Adds /#/workflow_approvals list and details and allows users to approve or deny workflow approvals from these interfaces

awx/ui_next/src/api/index.js

@@ -32,6 +32,7 @@ import Tokens from './models/Tokens';
 import UnifiedJobTemplates from './models/UnifiedJobTemplates';
 import UnifiedJobs from './models/UnifiedJobs';
 import Users from './models/Users';
+import WorkflowApprovals from './models/WorkflowApprovals';
 import WorkflowApprovalTemplates from './models/WorkflowApprovalTemplates';
 import WorkflowJobTemplateNodes from './models/WorkflowJobTemplateNodes';
 import WorkflowJobTemplates from './models/WorkflowJobTemplates';
@@ -71,6 +72,7 @@ const TokensAPI = new Tokens();
 const UnifiedJobTemplatesAPI = new UnifiedJobTemplates();
 const UnifiedJobsAPI = new UnifiedJobs();
 const UsersAPI = new Users();
+const WorkflowApprovalsAPI = new WorkflowApprovals();
 const WorkflowApprovalTemplatesAPI = new WorkflowApprovalTemplates();
 const WorkflowJobTemplateNodesAPI = new WorkflowJobTemplateNodes();
 const WorkflowJobTemplatesAPI = new WorkflowJobTemplates();
@@ -111,6 +113,7 @@ export {
   UnifiedJobTemplatesAPI,
   UnifiedJobsAPI,
   UsersAPI,
+  WorkflowApprovalsAPI,
   WorkflowApprovalTemplatesAPI,
   WorkflowJobTemplateNodesAPI,
   WorkflowJobTemplatesAPI,

awx/ui_next/src/api/models/WorkflowApprovals.js

@@ -0,0 +1,18 @@
+import Base from '../Base';
+
+class WorkflowApprovals extends Base {
+  constructor(http) {
+    super(http);
+    this.baseUrl = '/api/v2/workflow_approvals/';
+  }
+
+  approve(id) {
+    return this.http.post(`${this.baseUrl}${id}/approve/`);
+  }
+
+  deny(id) {
+    return this.http.post(`${this.baseUrl}${id}/deny/`);
+  }
+}
+
+export default WorkflowApprovals;

awx/ui_next/src/routeConfig.js

@@ -17,6 +17,7 @@ import Settings from './screens/Setting';
 import Teams from './screens/Team';
 import Templates from './screens/Template';
 import Users from './screens/User';
+import WorkflowApprovals from './screens/WorkflowApproval';
 
 // Ideally, this should just be a regular object that we export, but we
 // need the i18n. When lingui3 arrives, we will be able to import i18n
@@ -126,6 +127,11 @@ function getRouteConfig(i18n) {
           path: '/applications',
           screen: Applications,
         },
+        {
+          title: i18n._(t`Workflow Approvals`),
+          path: '/workflow_approvals',
+          screen: WorkflowApprovals,
+        },
       ],
     },
     {

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx

@@ -138,7 +138,7 @@ function NotificationTemplatesList({ i18n }) {
                     key="delete"
                     onDelete={handleDelete}
                     itemsToDelete={selected}
-                    pluralizedItemName="Organizations"
+                    pluralizedItemName={i18n._(t`Notification Templates`)}
                   />,
                 ]}
               />
@@ -164,7 +164,7 @@ function NotificationTemplatesList({ i18n }) {
         title={i18n._(t`Error!`)}
         onClose={clearDeletionError}
       >
-        {i18n._(t`Failed to delete one or more organizations.`)}
+        {i18n._(t`Failed to delete one or more notification template.`)}
         <ErrorDetail error={deletionError} />
       </AlertModal>
     </>

awx/ui_next/src/screens/WorkflowApproval/WorkflowApproval.jsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useCallback } from 'react';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import { Card, PageSection } from '@patternfly/react-core';
+import { CaretLeftIcon } from '@patternfly/react-icons';
+import {
+  Link,
+  Switch,
+  Route,
+  Redirect,
+  useParams,
+  useRouteMatch,
+  useLocation,
+} from 'react-router-dom';
+import useRequest from '../../util/useRequest';
+import RoutedTabs from '../../components/RoutedTabs';
+import ContentError from '../../components/ContentError';
+import { WorkflowApprovalsAPI } from '../../api';
+import WorkflowApprovalDetail from './WorkflowApprovalDetail';
+
+function WorkflowApproval({ setBreadcrumb, i18n }) {
+  const { id: workflowApprovalId } = useParams();
+  const match = useRouteMatch();
+  const location = useLocation();
+  const {
+    result: { workflowApproval },
+    isLoading,
+    error,
+    request: fetchWorkflowApproval,
+  } = useRequest(
+    useCallback(async () => {
+      const detail = await WorkflowApprovalsAPI.readDetail(workflowApprovalId);
+      setBreadcrumb(detail.data);
+      return {
+        workflowApproval: detail.data,
+      };
+    }, [workflowApprovalId, setBreadcrumb]),
+    { workflowApproval: null }
+  );
+
+  useEffect(() => {
+    fetchWorkflowApproval();
+  }, [fetchWorkflowApproval, location.pathname]);
+
+  if (!isLoading && error) {
+    return (
+      <PageSection>
+        <Card>
+          <ContentError error={error}>
+            {error.response.status === 404 && (
+              <span>
+                {i18n._(t`Workflow Approval not found.`)}{' '}
+                <Link to="/workflow_approvals">
+                  {i18n._(t`View all Workflow Approvals.`)}
+                </Link>
+              </span>
+            )}
+          </ContentError>
+        </Card>
+      </PageSection>
+    );
+  }
+
+  const tabs = [
+    {
+      name: (
+        <>
+          <CaretLeftIcon />
+          {i18n._(t`Back to Workflow Approvals`)}
+        </>
+      ),
+      link: `/workflow_approvals`,
+      id: 99,
+    },
+    {
+      name: i18n._(t`Details`),
+      link: `${match.url}/details`,
+      id: 0,
+    },
+  ];
+  return (
+    <PageSection>
+      <Card>
+        <RoutedTabs tabsArray={tabs} />
+        <Switch>
+          <Redirect
+            from="/workflow_approvals/:id"
+            to="/workflow_approvals/:id/details"
+            exact
+          />
+          {workflowApproval && (
+            <Route path="/workflow_approvals/:id/details">
+              <WorkflowApprovalDetail
+                workflowApproval={workflowApproval}
+                isLoading={isLoading}
+              />
+            </Route>
+          )}
+          <Route key="not-found" path="*">
+            {!isLoading && (
+              <ContentError isNotFound>
+                {match.params.id && (
+                  <Link to={`/workflow_approvals/${match.params.id}/details`}>
+                    {i18n._(t`View Workflow Approval Details`)}
+                  </Link>
+                )}
+              </ContentError>
+            )}
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(WorkflowApproval);

awx/ui_next/src/screens/WorkflowApproval/WorkflowApproval.test.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import { WorkflowApprovalsAPI } from '../../api';
+import {
+  mountWithContexts,
+  waitForElement,
+} from '../../../testUtils/enzymeHelpers';
+import mockDetails from './data.workflowApproval.json';
+import WorkflowApproval from './WorkflowApproval';
+
+jest.mock('../../api');
+
+const mockMe = {
+  is_super_user: true,
+  is_system_auditor: false,
+};
+
+describe('<WorkflowApproval />', () => {
+  test('initially renders succesfully', async () => {
+    WorkflowApprovalsAPI.readDetail.mockResolvedValue({ data: mockDetails });
+    await act(async () => {
+      mountWithContexts(
+        <WorkflowApproval setBreadcrumb={() => {}} me={mockMe} />
+      );
+    });
+  });
+
+  test('should show content error when user attempts to navigate to erroneous route', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/workflow_approvals/1/foobar'],
+    });
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <WorkflowApproval setBreadcrumb={() => {}} me={mockMe} />,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: history.location,
+                match: {
+                  params: { id: 1 },
+                  url: '/workflow_approvals/1/foobar',
+                  path: '/workflow_approvals/1/foobar',
+                },
+              },
+            },
+          },
+        }
+      );
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+  });
+});

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalDetail/WorkflowApprovalDetail.jsx

@@ -0,0 +1,171 @@
+import React, { useCallback } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Link, useHistory, useParams } from 'react-router-dom';
+import AlertModal from '../../../components/AlertModal';
+import { CardBody, CardActionsRow } from '../../../components/Card';
+import DeleteButton from '../../../components/DeleteButton';
+import {
+  Detail,
+  DetailList,
+  UserDateDetail,
+} from '../../../components/DetailList';
+import ErrorDetail from '../../../components/ErrorDetail';
+import WorkflowApprovalActionButtons from '../shared/WorkflowApprovalActionButtons';
+import WorkflowApprovalStatus from '../shared/WorkflowApprovalStatus';
+import { formatDateString, secondsToHHMMSS } from '../../../util/dates';
+import { WorkflowApprovalsAPI } from '../../../api';
+import useRequest, { useDismissableError } from '../../../util/useRequest';
+
+function WorkflowApprovalDetail({ i18n, workflowApproval }) {
+  const { id: workflowApprovalId } = useParams();
+  const history = useHistory();
+  const {
+    request: deleteWorkflowApproval,
+    isLoading,
+    error: deleteError,
+  } = useRequest(
+    useCallback(async () => {
+      await WorkflowApprovalsAPI.destroy(workflowApprovalId);
+      history.push(`/workflow_approvals`);
+    }, [workflowApprovalId, history])
+  );
+
+  const { error, dismissError } = useDismissableError(deleteError);
+
+  const sourceWorkflowJob =
+    workflowApproval?.summary_fields?.source_workflow_job;
+
+  const sourceWorkflowJobTemplate =
+    workflowApproval?.summary_fields?.workflow_job_template;
+
+  const handleSuccesfulAction = useCallback(() => {
+    history.push(`/workflow_approvals/${workflowApprovalId}`);
+  }, [history, workflowApprovalId]);
+
+  return (
+    <CardBody>
+      <DetailList gutter="sm">
+        <Detail
+          label={i18n._(t`Name`)}
+          value={workflowApproval.name}
+          dataCy="wa-detail-name"
+        />
+        <Detail
+          label={i18n._(t`Description`)}
+          value={workflowApproval.description}
+        />
+        {workflowApproval.status === 'pending' && (
+          <Detail
+            label={i18n._(t`Expires`)}
+            value={
+              workflowApproval.approval_expiration
+                ? formatDateString(workflowApproval.approval_expiration)
+                : i18n._(t`Never`)
+            }
+          />
+        )}
+        {workflowApproval.status !== 'pending' && (
+          <Detail
+            label={i18n._(t`Status`)}
+            value={
+              <WorkflowApprovalStatus workflowApproval={workflowApproval} />
+            }
+          />
+        )}
+        {workflowApproval.summary_fields.approved_or_denied_by && (
+          <Detail
+            label={i18n._(t`Actor`)}
+            value={
+              <Link
+                to={`/users/${workflowApproval.summary_fields.approved_or_denied_by.id}`}
+              >
+                {workflowApproval.summary_fields.approved_or_denied_by.username}
+              </Link>
+            }
+          />
+        )}
+        <Detail
+          label={i18n._(t`Explanation`)}
+          value={workflowApproval.job_explanation}
+        />
+        <Detail
+          label={i18n._(t`Workflow Job`)}
+          value={
+            sourceWorkflowJob && (
+              <Link to={`/jobs/workflow/${sourceWorkflowJob?.id}`}>
+                {`${sourceWorkflowJob?.id} - ${sourceWorkflowJob?.name}`}
+              </Link>
+            )
+          }
+        />
+        <Detail
+          label={i18n._(t`Workflow Job Template`)}
+          value={
+            sourceWorkflowJobTemplate && (
+              <Link
+                to={`/templates/workflow_job_template/${sourceWorkflowJobTemplate?.id}`}
+              >
+                {sourceWorkflowJobTemplate?.name}
+              </Link>
+            )
+          }
+        />
+        <UserDateDetail
+          label={i18n._(t`Created`)}
+          date={workflowApproval.created}
+          user={workflowApproval.summary_fields.created_by}
+        />
+        <Detail
+          label={i18n._(t`Last Modified`)}
+          value={formatDateString(workflowApproval.modified)}
+        />
+        <Detail
+          label={i18n._(t`Finished`)}
+          value={formatDateString(workflowApproval.finished)}
+        />
+        <Detail
+          label={i18n._(t`Canceled`)}
+          value={formatDateString(workflowApproval.canceled_on)}
+        />
+        <Detail
+          label={i18n._(t`Elapsed`)}
+          value={secondsToHHMMSS(workflowApproval.elapsed)}
+        />
+      </DetailList>
+      <CardActionsRow>
+        {workflowApproval.can_approve_or_deny && (
+          <WorkflowApprovalActionButtons
+            icon={false}
+            workflowApproval={workflowApproval}
+            onSuccessfulAction={handleSuccesfulAction}
+          />
+        )}
+        {workflowApproval.summary_fields.user_capabilities &&
+          workflowApproval.summary_fields.user_capabilities.delete && (
+            <DeleteButton
+              name={workflowApproval.name}
+              modalTitle={i18n._(t`Delete Workflow Approval`)}
+              onConfirm={deleteWorkflowApproval}
+              isDisabled={isLoading}
+            >
+              {i18n._(t`Delete`)}
+            </DeleteButton>
+          )}
+      </CardActionsRow>
+      {error && (
+        <AlertModal
+          isOpen={error}
+          variant="error"
+          title={i18n._(t`Error!`)}
+          onClose={dismissError}
+        >
+          {i18n._(t`Failed to delete workflow approval.`)}
+          <ErrorDetail error={error} />
+        </AlertModal>
+      )}
+    </CardBody>
+  );
+}
+
+export default withI18n()(WorkflowApprovalDetail);

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalDetail/WorkflowApprovalDetail.test.jsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import {
+  mountWithContexts,
+  waitForElement,
+} from '../../../../testUtils/enzymeHelpers';
+import { WorkflowApprovalsAPI } from '../../../api';
+import { formatDateString } from '../../../util/dates';
+import WorkflowApprovalDetail from './WorkflowApprovalDetail';
+import workflowApproval from '../data.workflowApproval.json';
+
+jest.mock('../../../api');
+
+describe('<WorkflowApprovalDetail />', () => {
+  test('initially renders succesfully', () => {
+    mountWithContexts(
+      <WorkflowApprovalDetail workflowApproval={workflowApproval} />
+    );
+  });
+
+  test('should render Details', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalDetail workflowApproval={workflowApproval} />
+    );
+    function assertDetail(label, value) {
+      expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
+      expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
+    }
+    assertDetail('Name', workflowApproval.name);
+    assertDetail('Description', workflowApproval.description);
+    assertDetail('Expires', 'Never');
+    assertDetail(
+      'Workflow Job',
+      `${workflowApproval.summary_fields.workflow_job.id} - ${workflowApproval.summary_fields.workflow_job.name}`
+    );
+    assertDetail(
+      'Workflow Job Template',
+      workflowApproval.summary_fields.workflow_job_template.name
+    );
+    const dateDetails = wrapper.find('UserDateDetail');
+    expect(dateDetails).toHaveLength(1);
+    expect(dateDetails.at(0).prop('label')).toEqual('Created');
+    expect(dateDetails.at(0).prop('date')).toEqual(
+      '2020-10-09T17:13:12.067947Z'
+    );
+    expect(dateDetails.at(0).prop('user')).toEqual(
+      workflowApproval.summary_fields.created_by
+    );
+    assertDetail('Last Modified', formatDateString(workflowApproval.modified));
+    assertDetail('Elapsed', '00:00:22');
+    expect(wrapper.find('WorkflowApprovalActionButtons').length).toBe(1);
+    expect(wrapper.find('DeleteButton').length).toBe(1);
+  });
+
+  test('should show expiration date/time', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalDetail
+        workflowApproval={{
+          ...workflowApproval,
+          approval_expiration: '2020-10-10T17:13:12.067947Z',
+        }}
+      />
+    );
+    expect(wrapper.find(`Detail[label="Expires"] dd`).text()).toBe(
+      `${formatDateString('2020-10-10T17:13:12.067947Z')}`
+    );
+  });
+
+  test('should show finished date/time', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalDetail
+        workflowApproval={{
+          ...workflowApproval,
+          finished: '2020-10-10T17:13:12.067947Z',
+        }}
+      />
+    );
+    expect(wrapper.find(`Detail[label="Finished"] dd`).text()).toBe(
+      `${formatDateString('2020-10-10T17:13:12.067947Z')}`
+    );
+  });
+
+  test('should show canceled date/time', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalDetail
+        workflowApproval={{
+          ...workflowApproval,
+          canceled_on: '2020-10-10T17:13:12.067947Z',
+        }}
+      />
+    );
+    expect(wrapper.find(`Detail[label="Canceled"] dd`).text()).toBe(
+      `${formatDateString('2020-10-10T17:13:12.067947Z')}`
+    );
+  });
+
+  test('should show explanation', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalDetail
+        workflowApproval={{
+          ...workflowApproval,
+          job_explanation: 'Some explanation text',
+        }}
+      />
+    );
+    expect(wrapper.find(`Detail[label="Explanation"] dd`).text()).toBe(
+      'Some explanation text'
+    );
+  });
+
+  test('should show status when not pending', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalDetail
+        workflowApproval={{
+          ...workflowApproval,
+          status: 'successful',
+          summary_fields: {
+            ...workflowApproval.summary_fields,
+            approved_or_denied_by: {
+              id: 1,
+              username: 'Foobar',
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('WorkflowApprovalStatus Label').text()).toBe(
+      'Approved'
+    );
+  });
+
+  test('should show actor when available', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalDetail
+        workflowApproval={{
+          ...workflowApproval,
+          summary_fields: {
+            ...workflowApproval.summary_fields,
+            approved_or_denied_by: {
+              id: 1,
+              username: 'Foobar',
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find(`Detail[label="Actor"] dd`).text()).toBe('Foobar');
+  });
+
+  test('action buttons should be hidden when user cannot approve or deny', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalDetail
+        workflowApproval={{
+          ...workflowApproval,
+          can_approve_or_deny: false,
+        }}
+      />
+    );
+    expect(wrapper.find('WorkflowApprovalActionButtons').length).toBe(0);
+  });
+
+  test('delete button should be hidden when user cannot delete', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalDetail
+        workflowApproval={{
+          ...workflowApproval,
+          summary_fields: {
+            ...workflowApproval.summary_fields,
+            user_capabilities: {
+              delete: false,
+              start: false,
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('DeleteButton').length).toBe(0);
+  });
+
+  test('Error dialog shown for failed deletion', async () => {
+    WorkflowApprovalsAPI.destroy.mockImplementationOnce(() =>
+      Promise.reject(new Error())
+    );
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalDetail workflowApproval={workflowApproval} />
+    );
+    await waitForElement(
+      wrapper,
+      'WorkflowApprovalDetail Button[aria-label="Delete"]'
+    );
+    await act(async () => {
+      wrapper.find('DeleteButton').invoke('onConfirm')();
+    });
+    await waitForElement(
+      wrapper,
+      'Modal[title="Error!"]',
+      el => el.length === 1
+    );
+    await act(async () => {
+      wrapper.find('Modal[title="Error!"]').invoke('onClose')();
+    });
+    await waitForElement(
+      wrapper,
+      'Modal[title="Error!"]',
+      el => el.length === 0
+    );
+  });
+});

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalDetail/index.js

@@ -0,0 +1,3 @@
+import WorkflowApprovalDetail from './WorkflowApprovalDetail';
+
+export default WorkflowApprovalDetail;

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.jsx

@@ -0,0 +1,187 @@
+import React, { useCallback, useEffect } from 'react';
+import { useLocation, useRouteMatch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Card, PageSection } from '@patternfly/react-core';
+import { WorkflowApprovalsAPI } from '../../../api';
+import PaginatedDataList, {
+  ToolbarDeleteButton,
+} from '../../../components/PaginatedDataList';
+import AlertModal from '../../../components/AlertModal';
+import ErrorDetail from '../../../components/ErrorDetail';
+import DataListToolbar from '../../../components/DataListToolbar';
+import WorkflowApprovalListItem from './WorkflowApprovalListItem';
+import useRequest, { useDeleteItems } from '../../../util/useRequest';
+import useSelected from '../../../util/useSelected';
+import { getQSConfig, parseQueryString } from '../../../util/qs';
+import useWsWorkflowApprovals from './useWsWorkflowApprovals';
+
+const QS_CONFIG = getQSConfig('workflow_approvals', {
+  page: 1,
+  page_size: 20,
+  order_by: '-started',
+});
+
+function WorkflowApprovalsList({ i18n }) {
+  const location = useLocation();
+  const match = useRouteMatch();
+
+  const {
+    result: { results, count, relatedSearchableKeys, searchableKeys },
+    error: contentError,
+    isLoading: isWorkflowApprovalsLoading,
+    request: fetchWorkflowApprovals,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+      const [response, actionsResponse] = await Promise.all([
+        WorkflowApprovalsAPI.read(params),
+        WorkflowApprovalsAPI.readOptions(),
+      ]);
+      return {
+        results: response.data.results,
+        count: response.data.count,
+        relatedSearchableKeys: (
+          actionsResponse?.data?.related_search_fields || []
+        ).map(val => val.slice(0, -8)),
+        searchableKeys: Object.keys(
+          actionsResponse.data.actions?.GET || {}
+        ).filter(key => actionsResponse.data.actions?.GET[key].filterable),
+      };
+    }, [location]),
+    {
+      results: [],
+      count: 0,
+      relatedSearchableKeys: [],
+      searchableKeys: [],
+    }
+  );
+
+  useEffect(() => {
+    fetchWorkflowApprovals();
+  }, [fetchWorkflowApprovals]);
+
+  // TODO: update QS_CONFIG to be safe for deps array
+  const fetchWorkflowApprovalsById = useCallback(
+    async ids => {
+      const params = { ...parseQueryString(QS_CONFIG, location.search) };
+      params.id__in = ids.join(',');
+      const { data } = await WorkflowApprovalsAPI.read(params);
+      return data.results;
+    },
+    [location.search] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const workflowApprovals = useWsWorkflowApprovals(
+    results,
+    fetchWorkflowApprovals,
+    fetchWorkflowApprovalsById,
+    QS_CONFIG
+  );
+
+  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
+    workflowApprovals
+  );
+
+  const {
+    isLoading: isDeleteLoading,
+    deleteItems: deleteWorkflowApprovals,
+    deletionError,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
+      return Promise.all(
+        selected.map(({ id }) => WorkflowApprovalsAPI.destroy(id))
+      );
+    }, [selected]),
+    {
+      qsConfig: QS_CONFIG,
+      allItemsSelected: isAllSelected,
+      fetchItems: fetchWorkflowApprovals,
+    }
+  );
+
+  const handleDelete = async () => {
+    await deleteWorkflowApprovals();
+    setSelected([]);
+  };
+
+  return (
+    <>
+      <PageSection>
+        <Card>
+          <PaginatedDataList
+            contentError={contentError}
+            hasContentLoading={isWorkflowApprovalsLoading || isDeleteLoading}
+            items={workflowApprovals}
+            itemCount={count}
+            pluralizedItemName={i18n._(t`Workflow Approvals`)}
+            qsConfig={QS_CONFIG}
+            onRowClick={handleSelect}
+            toolbarSearchColumns={[
+              {
+                name: i18n._(t`Name`),
+                key: 'name',
+                isDefault: true,
+              },
+            ]}
+            toolbarSearchableKeys={searchableKeys}
+            toolbarRelatedSearchableKeys={relatedSearchableKeys}
+            toolbarSortColumns={[
+              {
+                name: i18n._(t`Name`),
+                key: 'name',
+              },
+              {
+                name: i18n._(t`Started`),
+                key: 'started',
+              },
+            ]}
+            renderToolbar={props => (
+              <DataListToolbar
+                {...props}
+                showSelectAll
+                isAllSelected={isAllSelected}
+                onSelectAll={set =>
+                  setSelected(set ? [...workflowApprovals] : [])
+                }
+                qsConfig={QS_CONFIG}
+                additionalControls={[
+                  <ToolbarDeleteButton
+                    key="delete"
+                    onDelete={handleDelete}
+                    itemsToDelete={selected}
+                    pluralizedItemName={i18n._(t`Workflow Approvals`)}
+                  />,
+                ]}
+              />
+            )}
+            renderItem={workflowApproval => (
+              <WorkflowApprovalListItem
+                key={workflowApproval.id}
+                workflowApproval={workflowApproval}
+                detailUrl={`${match.url}/${workflowApproval.id}`}
+                isSelected={selected.some(
+                  row => row.id === workflowApproval.id
+                )}
+                onSelect={() => handleSelect(workflowApproval)}
+                onSuccessfulAction={fetchWorkflowApprovals}
+              />
+            )}
+          />
+        </Card>
+      </PageSection>
+      <AlertModal
+        isOpen={deletionError}
+        variant="error"
+        title={i18n._(t`Error!`)}
+        onClose={clearDeletionError}
+      >
+        {i18n._(t`Failed to delete one or more workflow approval.`)}
+        <ErrorDetail error={deletionError} />
+      </AlertModal>
+    </>
+  );
+}
+
+export default withI18n()(WorkflowApprovalsList);

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.test.jsx

@@ -0,0 +1,317 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { WorkflowApprovalsAPI } from '../../../api';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import WorkflowApprovalList from './WorkflowApprovalList';
+
+jest.mock('../../../api');
+
+const mockWorkflowApprovals = [
+  {
+    id: 221,
+    type: 'workflow_approval',
+    url: '/api/v2/workflow_approvals/221/',
+    related: {
+      created_by: '/api/v2/users/1/',
+      unified_job_template: '/api/v2/workflow_approval_templates/10/',
+      source_workflow_job: '/api/v2/workflow_jobs/220/',
+      workflow_approval_template: '/api/v2/workflow_approval_templates/10/',
+      approve: '/api/v2/workflow_approvals/221/approve/',
+      deny: '/api/v2/workflow_approvals/221/deny/',
+    },
+    summary_fields: {
+      workflow_job_template: {
+        id: 9,
+        name: 'Approval @ 9:15:26 AM',
+        description: '',
+      },
+      workflow_job: {
+        id: 220,
+        name: 'Approval @ 9:15:26 AM',
+        description: '',
+      },
+      workflow_approval_template: {
+        id: 10,
+        name: 'approval copy',
+        description: '',
+        timeout: 30,
+      },
+      unified_job_template: {
+        id: 10,
+        name: 'approval copy',
+        description: '',
+        unified_job_type: 'workflow_approval',
+      },
+      created_by: {
+        id: 1,
+        username: 'admin',
+        first_name: '',
+        last_name: '',
+      },
+      user_capabilities: {
+        delete: true,
+        start: true,
+      },
+      source_workflow_job: {
+        id: 220,
+        name: 'Approval @ 9:15:26 AM',
+        description: '',
+        status: 'failed',
+        failed: true,
+        elapsed: 89.766,
+      },
+    },
+    created: '2020-10-09T19:58:27.337904Z',
+    modified: '2020-10-09T19:58:27.338000Z',
+    name: 'approval copy',
+    description: '',
+    unified_job_template: 10,
+    launch_type: 'workflow',
+    status: 'failed',
+    failed: true,
+    started: '2020-10-09T19:58:27.337904Z',
+    finished: '2020-10-09T19:59:26.974046Z',
+    canceled_on: null,
+    elapsed: 59.636,
+    job_explanation:
+      'The approval node approval copy (221) has expired after 30 seconds.',
+    can_approve_or_deny: false,
+    approval_expiration: null,
+    timed_out: true,
+  },
+  {
+    id: 6,
+    type: 'workflow_approval',
+    url: '/api/v2/workflow_approvals/6/',
+    related: {
+      created_by: '/api/v2/users/1/',
+      unified_job_template: '/api/v2/workflow_approval_templates/8/',
+      source_workflow_job: '/api/v2/workflow_jobs/5/',
+      workflow_approval_template: '/api/v2/workflow_approval_templates/8/',
+      approve: '/api/v2/workflow_approvals/6/approve/',
+      deny: '/api/v2/workflow_approvals/6/deny/',
+      approved_or_denied_by: '/api/v2/users/1/',
+    },
+    summary_fields: {
+      workflow_job_template: {
+        id: 7,
+        name: 'Approval',
+        description: '',
+      },
+      workflow_job: {
+        id: 5,
+        name: 'Approval',
+        description: '',
+      },
+      workflow_approval_template: {
+        id: 8,
+        name: 'approval',
+        description: '',
+        timeout: 0,
+      },
+      unified_job_template: {
+        id: 8,
+        name: 'approval',
+        description: '',
+        unified_job_type: 'workflow_approval',
+      },
+      approved_or_denied_by: {
+        id: 1,
+        username: 'admin',
+        first_name: '',
+        last_name: '',
+      },
+      created_by: {
+        id: 1,
+        username: 'admin',
+        first_name: '',
+        last_name: '',
+      },
+      user_capabilities: {
+        delete: false,
+        start: false,
+      },
+      source_workflow_job: {
+        id: 5,
+        name: 'Approval',
+        description: '',
+        status: 'successful',
+        failed: false,
+        elapsed: 168.233,
+      },
+    },
+    created: '2020-10-05T20:14:53.875701Z',
+    modified: '2020-10-05T20:17:41.211373Z',
+    name: 'approval',
+    description: '',
+    unified_job_template: 8,
+    launch_type: 'workflow',
+    status: 'successful',
+    failed: false,
+    started: '2020-10-05T20:14:53.875701Z',
+    finished: '2020-10-05T20:17:41.200738Z',
+    canceled_on: null,
+    elapsed: 167.325,
+    job_explanation: '',
+    can_approve_or_deny: false,
+    approval_expiration: null,
+    timed_out: false,
+  },
+];
+
+describe('<WorkflowApprovalList />', () => {
+  let wrapper;
+  beforeEach(() => {
+    WorkflowApprovalsAPI.read.mockResolvedValue({
+      data: {
+        count: mockWorkflowApprovals.length,
+        results: mockWorkflowApprovals,
+      },
+    });
+
+    WorkflowApprovalsAPI.readOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: {},
+          POST: {},
+        },
+        related_search_fields: [],
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+    jest.clearAllMocks();
+  });
+
+  test('should load and render workflow approvals', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<WorkflowApprovalList />);
+    });
+    wrapper.update();
+
+    expect(wrapper.find('WorkflowApprovalListItem')).toHaveLength(2);
+  });
+
+  test('should select workflow approval when checked', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<WorkflowApprovalList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('WorkflowApprovalListItem')
+        .first()
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('WorkflowApprovalListItem')
+        .first()
+        .prop('isSelected')
+    ).toEqual(true);
+  });
+
+  test('should select all', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<WorkflowApprovalList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
+    });
+    wrapper.update();
+
+    const items = wrapper.find('WorkflowApprovalListItem');
+    expect(items).toHaveLength(2);
+    items.forEach(item => {
+      expect(item.prop('isSelected')).toEqual(true);
+    });
+
+    expect(
+      wrapper
+        .find('WorkflowApprovalListItem')
+        .first()
+        .prop('isSelected')
+    ).toEqual(true);
+  });
+
+  test('should disable delete button', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<WorkflowApprovalList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('WorkflowApprovalListItem')
+        .at(1)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
+    expect(wrapper.find('ToolbarDeleteButton button').prop('disabled')).toEqual(
+      true
+    );
+  });
+
+  test('should call delete api', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<WorkflowApprovalList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('WorkflowApprovalListItem')
+        .at(0)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
+    });
+
+    expect(WorkflowApprovalsAPI.destroy).toHaveBeenCalledTimes(1);
+  });
+
+  test('should show deletion error', async () => {
+    WorkflowApprovalsAPI.destroy.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'delete',
+            url: '/api/v2/workflow_approvals/221',
+          },
+          data: 'An error occurred',
+        },
+      })
+    );
+    await act(async () => {
+      wrapper = mountWithContexts(<WorkflowApprovalList />);
+    });
+    wrapper.update();
+    expect(WorkflowApprovalsAPI.read).toHaveBeenCalledTimes(1);
+    await act(async () => {
+      wrapper
+        .find('WorkflowApprovalListItem')
+        .at(0)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
+    });
+    wrapper.update();
+
+    const modal = wrapper.find('Modal');
+    expect(modal).toHaveLength(1);
+    expect(modal.prop('title')).toEqual('Error!');
+  });
+});

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListItem.jsx

@@ -0,0 +1,119 @@
+import React, { useCallback, useState } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { string, bool, func } from 'prop-types';
+import {
+  DataListAction as _DataListAction,
+  DataListCheck,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+} from '@patternfly/react-core';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import DataListCell from '../../../components/DataListCell';
+import { WorkflowApproval } from '../../../types';
+import { formatDateString } from '../../../util/dates';
+import WorkflowApprovalActionButtons from '../shared/WorkflowApprovalActionButtons';
+import WorkflowApprovalStatus from '../shared/WorkflowApprovalStatus';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(2, 40px);
+`;
+
+const JobLabel = styled.b`
+  margin-right: 24px;
+`;
+
+function WorkflowApprovalListItem({
+  workflowApproval,
+  isSelected,
+  onSelect,
+  detailUrl,
+  i18n,
+}) {
+  const [actionTaken, setActionTaken] = useState(false);
+  const labelId = `check-action-${workflowApproval.id}`;
+  const workflowJob = workflowApproval?.summary_fields?.source_workflow_job;
+
+  const getStatus = () => {
+    if (
+      workflowApproval.status === 'pending' &&
+      workflowApproval.approval_expiration
+    ) {
+      return i18n._(
+        t`Expires on ${formatDateString(workflowApproval.approval_expiration)}`
+      );
+    }
+    if (
+      workflowApproval.status === 'pending' &&
+      !workflowApproval.approval_expiration
+    ) {
+      return i18n._(t`Never expires`);
+    }
+    return <WorkflowApprovalStatus workflowApproval={workflowApproval} />;
+  };
+
+  const handleSuccesfulAction = useCallback(() => {
+    setActionTaken(true);
+  }, []);
+
+  return (
+    <DataListItem
+      key={workflowApproval.id}
+      aria-labelledby={labelId}
+      id={`${workflowApproval.id}`}
+    >
+      <DataListItemRow>
+        <DataListCheck
+          id={`select-workflowApproval-${workflowApproval.id}`}
+          checked={isSelected}
+          onChange={onSelect}
+          aria-labelledby={labelId}
+        />
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="title" id={labelId}>
+              <Link to={`${detailUrl}`}>
+                <b>{workflowApproval.name}</b>
+              </Link>
+            </DataListCell>,
+            <DataListCell key="job" id={labelId}>
+              {workflowJob && (
+                <>
+                  <JobLabel>{i18n._(t`Job`)}</JobLabel>
+                  <Link to={`/jobs/workflow/${workflowJob?.id}`}>
+                    {`${workflowJob?.id} - ${workflowJob?.name}`}
+                  </Link>
+                </>
+              )}
+            </DataListCell>,
+            <DataListCell key="status">{getStatus()}</DataListCell>,
+          ]}
+        />
+        <DataListAction aria-label="actions" aria-labelledby={labelId}>
+          {workflowApproval.can_approve_or_deny && !actionTaken ? (
+            <WorkflowApprovalActionButtons
+              workflowApproval={workflowApproval}
+              onSuccessfulAction={handleSuccesfulAction}
+            />
+          ) : (
+            ''
+          )}
+        </DataListAction>
+      </DataListItemRow>
+    </DataListItem>
+  );
+}
+
+WorkflowApprovalListItem.propTypes = {
+  workflowApproval: WorkflowApproval.isRequired,
+  detailUrl: string.isRequired,
+  isSelected: bool.isRequired,
+  onSelect: func.isRequired,
+};
+
+export default withI18n()(WorkflowApprovalListItem);

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListItem.test.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import WorkflowApprovalListItem from './WorkflowApprovalListItem';
+import { WorkflowApprovalsAPI } from '../../../api';
+import workflowApproval from '../data.workflowApproval.json';
+
+jest.mock('../../../api/models/WorkflowApprovals');
+
+describe('<WorkflowApprovalListItem />', () => {
+  test('action buttons shown to users with ability to approve/deny', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalListItem
+        isSelected={false}
+        detailUrl={`/workflow_approvals/${workflowApproval.id}`}
+        onSelect={() => {}}
+        workflowApproval={workflowApproval}
+      />
+    );
+    expect(wrapper.find('WorkflowApprovalActionButtons').exists()).toBeTruthy();
+  });
+
+  test('action buttons hidden from users without ability to approve/deny', () => {
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalListItem
+        isSelected={false}
+        detailUrl={`/workflow_approvals/${workflowApproval.id}`}
+        onSelect={() => {}}
+        workflowApproval={{ ...workflowApproval, can_approve_or_deny: false }}
+      />
+    );
+    expect(wrapper.find('WorkflowApprovalActionButtons').exists()).toBeFalsy();
+  });
+
+  test('should hide action buttons after successful action', async () => {
+    WorkflowApprovalsAPI.approve.mockResolvedValue();
+    const wrapper = mountWithContexts(
+      <WorkflowApprovalListItem
+        isSelected={false}
+        detailUrl={`/workflow_approvals/${workflowApproval.id}`}
+        onSelect={() => {}}
+        workflowApproval={workflowApproval}
+      />
+    );
+    expect(wrapper.find('WorkflowApprovalActionButtons').exists()).toBeTruthy();
+    await act(async () =>
+      wrapper.find('Button[aria-label="Approve"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(WorkflowApprovalsAPI.approve).toHaveBeenCalled();
+    expect(wrapper.find('WorkflowApprovalActionButtons').exists()).toBeFalsy();
+    jest.clearAllMocks();
+  });
+});

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/index.js

@@ -0,0 +1,4 @@
+import WorkflowApprovalList from './WorkflowApprovalList';
+
+export default WorkflowApprovalList;
+export { default as WorkflowApprovalListItem } from './WorkflowApprovalListItem';

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/useWsWorkflowApprovals.js

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import useWebsocket from '../../../util/useWebsocket';
+import useThrottle from '../../../util/useThrottle';
+
+export default function useWsWorkflowApprovals(
+  initialWorkflowApprovals,
+  fetchWorkflowApprovals
+) {
+  const [workflowApprovals, setWorkflowApprovals] = useState(
+    initialWorkflowApprovals
+  );
+  const [reloadEntireList, setReloadEntireList] = useState(false);
+  const throttledListRefresh = useThrottle(reloadEntireList, 1000);
+  const lastMessage = useWebsocket({
+    jobs: ['status_changed'],
+    control: ['limit_reached_1'],
+  });
+
+  useEffect(() => {
+    setWorkflowApprovals(initialWorkflowApprovals);
+  }, [initialWorkflowApprovals]);
+
+  useEffect(
+    function reloadWorkflowApprovalsList() {
+      (async () => {
+        if (!throttledListRefresh) {
+          return;
+        }
+        setReloadEntireList(false);
+        fetchWorkflowApprovals();
+      })();
+    },
+    [throttledListRefresh, fetchWorkflowApprovals]
+  );
+
+  useEffect(
+    function processWsMessage() {
+      if (!(lastMessage?.type === 'workflow_approval')) {
+        return;
+      }
+
+      const index = workflowApprovals.findIndex(
+        p => p.id === lastMessage.unified_job_id
+      );
+
+      if (
+        (index > -1 &&
+          !['new', 'pending', 'waiting', 'running'].includes(
+            lastMessage.status
+          )) ||
+        (index === -1 && lastMessage.status === 'pending')
+      ) {
+        setReloadEntireList(true);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps,
+    [lastMessage]
+  );
+
+  return workflowApprovals;
+}

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/useWsWorkflowApprovals.test.jsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import WS from 'jest-websocket-mock';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import useWsWorkflowApprovals from './useWsWorkflowApprovals';
+
+/*
+  Jest mock timers don’t play well with jest-websocket-mock,
+  so we'll stub out throttling to resolve immediately
+*/
+jest.mock('../../../util/useThrottle', () => ({
+  __esModule: true,
+  default: jest.fn(val => val),
+}));
+
+function TestInner() {
+  return <div />;
+}
+function Test({ workflowApprovals, fetchWorkflowApprovals }) {
+  const updatedWorkflowApprovals = useWsWorkflowApprovals(
+    workflowApprovals,
+    fetchWorkflowApprovals
+  );
+  return <TestInner workflowApprovals={updatedWorkflowApprovals} />;
+}
+
+describe('useWsWorkflowApprovals hook', () => {
+  let debug;
+  let wrapper;
+  beforeEach(() => {
+    debug = global.console.debug; // eslint-disable-line prefer-destructuring
+    global.console.debug = () => {};
+  });
+
+  afterEach(() => {
+    global.console.debug = debug;
+    WS.clean();
+  });
+
+  test('should return workflow approvals list', () => {
+    const workflowApprovals = [{ id: 1, status: 'successful' }];
+    wrapper = mountWithContexts(
+      <Test
+        workflowApprovals={workflowApprovals}
+        fetchWorkflowApprovals={() => {}}
+      />
+    );
+
+    expect(wrapper.find('TestInner').prop('workflowApprovals')).toEqual(
+      workflowApprovals
+    );
+  });
+
+  test('should establish websocket connection', async () => {
+    global.document.cookie = 'csrftoken=abc123';
+    const mockServer = new WS('wss://localhost/websocket/');
+
+    const workflowApprovals = [{ id: 1, status: 'successful' }];
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Test
+          workflowApprovals={workflowApprovals}
+          fetchWorkflowApprovals={() => {}}
+        />
+      );
+    });
+
+    await mockServer.connected;
+    await expect(mockServer).toReceiveMessage(
+      JSON.stringify({
+        xrftoken: 'abc123',
+        groups: {
+          jobs: ['status_changed'],
+          control: ['limit_reached_1'],
+        },
+      })
+    );
+  });
+
+  test('should refetch after new approval job is created', async () => {
+    global.document.cookie = 'csrftoken=abc123';
+    const mockServer = new WS('wss://localhost/websocket/');
+    const workflowApprovals = [{ id: 1, status: 'successful' }];
+    const fetchWorkflowApprovals = jest.fn(() => []);
+    await act(async () => {
+      wrapper = await mountWithContexts(
+        <Test
+          workflowApprovals={workflowApprovals}
+          fetchWorkflowApprovals={fetchWorkflowApprovals}
+        />
+      );
+    });
+
+    await mockServer.connected;
+    await act(async () => {
+      mockServer.send(
+        JSON.stringify({
+          unified_job_id: 2,
+          type: 'workflow_approval',
+          status: 'pending',
+        })
+      );
+    });
+
+    expect(fetchWorkflowApprovals).toHaveBeenCalledTimes(1);
+  });
+
+  test('should refetch after approval job in current list is updated', async () => {
+    global.document.cookie = 'csrftoken=abc123';
+    const mockServer = new WS('wss://localhost/websocket/');
+    const workflowApprovals = [{ id: 1, status: 'pending' }];
+    const fetchWorkflowApprovals = jest.fn(() => []);
+    await act(async () => {
+      wrapper = await mountWithContexts(
+        <Test
+          workflowApprovals={workflowApprovals}
+          fetchWorkflowApprovals={fetchWorkflowApprovals}
+        />
+      );
+    });
+
+    await mockServer.connected;
+    await act(async () => {
+      mockServer.send(
+        JSON.stringify({
+          unified_job_id: 1,
+          type: 'workflow_approval',
+          status: 'successful',
+        })
+      );
+    });
+
+    expect(fetchWorkflowApprovals).toHaveBeenCalledTimes(1);
+  });
+
+  test('should not refetch when message is not workflow approval', async () => {
+    global.document.cookie = 'csrftoken=abc123';
+    const mockServer = new WS('wss://localhost/websocket/');
+    const workflowApprovals = [{ id: 1, status: 'successful' }];
+    const fetchWorkflowApprovals = jest.fn(() => []);
+    await act(async () => {
+      wrapper = await mountWithContexts(
+        <Test
+          workflowApprovals={workflowApprovals}
+          fetchWorkflowApprovals={fetchWorkflowApprovals}
+        />
+      );
+    });
+
+    await mockServer.connected;
+    await act(async () => {
+      mockServer.send(
+        JSON.stringify({
+          unified_job_id: 1,
+          type: 'job',
+          status: 'successful',
+        })
+      );
+    });
+
+    expect(fetchWorkflowApprovals).toHaveBeenCalledTimes(0);
+  });
+});

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovals.jsx

@@ -0,0 +1,42 @@
+import React, { useState, useCallback } from 'react';
+import { Route, Switch, useRouteMatch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import WorkflowApprovalList from './WorkflowApprovalList';
+import WorkflowApproval from './WorkflowApproval';
+import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+
+function WorkflowApprovals({ i18n }) {
+  const match = useRouteMatch();
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
+    '/workflow_approvals': i18n._(t`Workflow Approvals`),
+  });
+
+  const updateBreadcrumbConfig = useCallback(
+    workflowApproval => {
+      const { id } = workflowApproval;
+      setBreadcrumbConfig({
+        '/workflow_approvals': i18n._(t`Workflow Approvals`),
+        [`/workflow_approvals/${id}`]: workflowApproval.name,
+        [`/workflow_approvals/${id}/details`]: i18n._(t`Details`),
+      });
+    },
+    [i18n]
+  );
+
+  return (
+    <>
+      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <Switch>
+        <Route path={`${match.url}/:id`}>
+          <WorkflowApproval setBreadcrumb={updateBreadcrumbConfig} />
+        </Route>
+        <Route path={`${match.url}`}>
+          <WorkflowApprovalList />
+        </Route>
+      </Switch>
+    </>
+  );
+}
+
+export default withI18n()(WorkflowApprovals);

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovals.test.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { createMemoryHistory } from 'history';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import WorkflowApprovals from './WorkflowApprovals';
+
+describe('<WorkflowApprovals />', () => {
+  test('initially renders succesfully', () => {
+    mountWithContexts(<WorkflowApprovals />);
+  });
+
+  test('should display a breadcrumb heading', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/workflow_approvals'],
+    });
+    const match = {
+      path: '/workflow_approvals',
+      url: '/workflow_approvals',
+      isExact: true,
+    };
+
+    const wrapper = mountWithContexts(<WorkflowApprovals />, {
+      context: {
+        router: {
+          history,
+          route: {
+            location: history.location,
+            match,
+          },
+        },
+      },
+    });
+    expect(wrapper.find('BreadcrumbHeading').length).toBe(1);
+    wrapper.unmount();
+  });
+});

awx/ui_next/src/screens/WorkflowApproval/data.workflowApproval.json

@@ -0,0 +1,71 @@
+{
+  "id": 218,
+  "type": "workflow_approval",
+  "url": "/api/v2/workflow_approvals/218/",
+  "related": {
+    "created_by": "/api/v2/users/1/",
+    "unified_job_template": "/api/v2/workflow_approval_templates/10/",
+    "source_workflow_job": "/api/v2/workflow_jobs/216/",
+    "workflow_approval_template": "/api/v2/workflow_approval_templates/10/",
+    "approve": "/api/v2/workflow_approvals/218/approve/",
+    "deny": "/api/v2/workflow_approvals/218/deny/"
+  },
+  "summary_fields": {
+    "workflow_job_template": {
+      "id": 9,
+      "name": "Approval @ 9:15:26 AM",
+      "description": ""
+    },
+    "workflow_job": {
+      "id": 216,
+      "name": "Approval @ 9:15:26 AM",
+      "description": ""
+    },
+    "workflow_approval_template": {
+      "id": 10,
+      "name": "approval copy",
+      "description": "",
+      "timeout": 0
+    },
+    "unified_job_template": {
+      "id": 10,
+      "name": "approval copy",
+      "description": "",
+      "unified_job_type": "workflow_approval"
+    },
+    "created_by": {
+      "id": 1,
+      "username": "admin",
+      "first_name": "",
+      "last_name": ""
+    },
+    "user_capabilities": {
+      "delete": true,
+      "start": true
+    },
+    "source_workflow_job": {
+      "id": 216,
+      "name": "Approval @ 9:15:26 AM",
+      "description": "",
+      "status": "running",
+      "failed": false,
+      "elapsed": 0.0
+    }
+  },
+  "created": "2020-10-09T17:13:12.067947Z",
+  "modified": "2020-10-09T17:13:12.068147Z",
+  "name": "approval",
+  "description": "description of approval",
+  "unified_job_template": 10,
+  "launch_type": "workflow",
+  "status": "pending",
+  "failed": false,
+  "started": "2020-10-09T17:13:12.067947Z",
+  "finished": null,
+  "canceled_on": null,
+  "elapsed": 22.879029,
+  "job_explanation": "",
+  "can_approve_or_deny": true,
+  "approval_expiration": null,
+  "timed_out": false
+}

awx/ui_next/src/screens/WorkflowApproval/index.js

@@ -0,0 +1 @@
+export { default } from './WorkflowApprovals';

awx/ui_next/src/screens/WorkflowApproval/shared/WorkflowApprovalActionButtons.jsx

@@ -0,0 +1,115 @@
+import React, { useCallback } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import PropTypes from 'prop-types';
+import { Button, Tooltip } from '@patternfly/react-core';
+import { CheckIcon, CloseIcon } from '@patternfly/react-icons';
+import useRequest, { useDismissableError } from '../../../util/useRequest';
+import AlertModal from '../../../components/AlertModal/AlertModal';
+import ErrorDetail from '../../../components/ErrorDetail/ErrorDetail';
+import { WorkflowApprovalsAPI } from '../../../api';
+
+function WorkflowApprovalActionButtons({
+  workflowApproval,
+  icon,
+  i18n,
+  onSuccessfulAction,
+}) {
+  const {
+    isLoading: approveApprovalLoading,
+    error: approveApprovalError,
+    request: approveApprovalNode,
+  } = useRequest(
+    useCallback(async () => {
+      await WorkflowApprovalsAPI.approve(workflowApproval.id);
+      if (onSuccessfulAction) {
+        onSuccessfulAction();
+      }
+    }, [onSuccessfulAction, workflowApproval.id]),
+    {}
+  );
+
+  const {
+    isLoading: denyApprovalLoading,
+    error: denyApprovalError,
+    request: denyApprovalNode,
+  } = useRequest(
+    useCallback(async () => {
+      await WorkflowApprovalsAPI.deny(workflowApproval.id);
+      if (onSuccessfulAction) {
+        onSuccessfulAction();
+      }
+    }, [onSuccessfulAction, workflowApproval.id]),
+    {}
+  );
+
+  const {
+    error: approveError,
+    dismissError: dismissApproveError,
+  } = useDismissableError(approveApprovalError);
+
+  const {
+    error: denyError,
+    dismissError: dismissDenyError,
+  } = useDismissableError(denyApprovalError);
+
+  return (
+    <>
+      <Tooltip content={i18n._(t`Approve`)} position="top">
+        <Button
+          isDisabled={approveApprovalLoading || denyApprovalLoading}
+          aria-label={i18n._(t`Approve`)}
+          variant={icon ? 'plain' : 'primary'}
+          onClick={approveApprovalNode}
+        >
+          {icon ? <CheckIcon /> : i18n._(t`Approve`)}
+        </Button>
+      </Tooltip>
+      <Tooltip content={i18n._(t`Deny`)} position="top">
+        <Button
+          isDisabled={approveApprovalLoading || denyApprovalLoading}
+          aria-label={i18n._(t`Deny`)}
+          variant={icon ? 'plain' : 'danger'}
+          onClick={denyApprovalNode}
+        >
+          {icon ? <CloseIcon /> : i18n._(t`Deny`)}
+        </Button>
+      </Tooltip>
+      {approveError && (
+        <AlertModal
+          isOpen={approveError}
+          variant="error"
+          title={i18n._(t`Error!`)}
+          onClose={dismissApproveError}
+        >
+          {i18n._(t`Failed to approve this approval node.`)}
+          <ErrorDetail error={approveError} />
+        </AlertModal>
+      )}
+      {denyError && (
+        <AlertModal
+          isOpen={denyError}
+          variant="error"
+          title={i18n._(t`Error!`)}
+          onClose={dismissDenyError}
+        >
+          {i18n._(t`Failed to deny this approval node.`)}
+          <ErrorDetail error={denyError} />
+        </AlertModal>
+      )}
+    </>
+  );
+}
+
+WorkflowApprovalActionButtons.propTypes = {
+  workflowApproval: PropTypes.shape({}).isRequired,
+  icon: PropTypes.bool,
+  onSuccessfulAction: PropTypes.func,
+};
+
+WorkflowApprovalActionButtons.defaultProps = {
+  icon: true,
+  onSuccessfulAction: () => {},
+};
+
+export default withI18n()(WorkflowApprovalActionButtons);

awx/ui_next/src/screens/WorkflowApproval/shared/WorkflowApprovalActionButtons.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import { WorkflowApprovalsAPI } from '../../../api';
+import WorkflowApprovalActionButtons from './WorkflowApprovalActionButtons';
+import workflowApproval from '../data.workflowApproval.json';
+
+jest.mock('../../../api/models/WorkflowApprovals');
+
+describe('<WorkflowApprovalActionButtons />', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders succesfully with icons', () => {
+    wrapper = mountWithContexts(
+      <WorkflowApprovalActionButtons workflowApproval={workflowApproval} />
+    );
+    expect(wrapper.find('CheckIcon').length).toBe(1);
+    expect(wrapper.find('CloseIcon').length).toBe(1);
+    expect(wrapper.find('Button[children="Approve"]').length).toBe(0);
+    expect(wrapper.find('Button[children="Deny"]').length).toBe(0);
+  });
+  test('initially renders succesfully without icons', () => {
+    wrapper = mountWithContexts(
+      <WorkflowApprovalActionButtons
+        workflowApproval={workflowApproval}
+        icon={false}
+      />
+    );
+    expect(wrapper.find('CheckIcon').length).toBe(0);
+    expect(wrapper.find('CloseIcon').length).toBe(0);
+    expect(wrapper.find('Button[children="Approve"]').length).toBe(1);
+    expect(wrapper.find('Button[children="Deny"]').length).toBe(1);
+  });
+  test('approving makes correct call with correct param', async () => {
+    wrapper = mountWithContexts(
+      <WorkflowApprovalActionButtons workflowApproval={workflowApproval} />
+    );
+    await act(async () => wrapper.find('CheckIcon').simulate('click'));
+    expect(WorkflowApprovalsAPI.approve).toHaveBeenCalledWith(
+      workflowApproval.id
+    );
+  });
+  test('denying makes correct call with correct param', async () => {
+    wrapper = mountWithContexts(
+      <WorkflowApprovalActionButtons workflowApproval={workflowApproval} />
+    );
+    await act(async () => wrapper.find('CloseIcon').simulate('click'));
+    expect(WorkflowApprovalsAPI.deny).toHaveBeenCalledWith(workflowApproval.id);
+  });
+  test('approval error shown', async () => {
+    WorkflowApprovalsAPI.approve.mockRejectedValueOnce(
+      new Error({
+        response: {
+          config: {
+            method: 'post',
+            url: '/api/v2/workflow_approvals/approve',
+          },
+          data: 'An error occurred',
+          status: 403,
+        },
+      })
+    );
+    wrapper = mountWithContexts(
+      <WorkflowApprovalActionButtons workflowApproval={workflowApproval} />
+    );
+    expect(wrapper.find('AlertModal').length).toBe(0);
+    await act(async () => wrapper.find('CheckIcon').simulate('click'));
+    wrapper.update();
+    expect(wrapper.find('AlertModal').length).toBe(1);
+  });
+  test('denial error shown', async () => {
+    WorkflowApprovalsAPI.deny.mockRejectedValueOnce(
+      new Error({
+        response: {
+          config: {
+            method: 'post',
+            url: '/api/v2/workflow_approvals/deny',
+          },
+          data: 'An error occurred',
+          status: 403,
+        },
+      })
+    );
+    wrapper = mountWithContexts(
+      <WorkflowApprovalActionButtons workflowApproval={workflowApproval} />
+    );
+    expect(wrapper.find('AlertModal').length).toBe(0);
+    await act(async () => wrapper.find('CloseIcon').simulate('click'));
+    wrapper.update();
+    expect(wrapper.find('AlertModal').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/WorkflowApproval/shared/WorkflowApprovalStatus.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Label, Tooltip } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
+import { WorkflowApproval } from '../../../types';
+import { formatDateString } from '../../../util/dates';
+
+function WorkflowApprovalStatus({ workflowApproval, i18n }) {
+  if (workflowApproval.status === 'pending') {
+    return workflowApproval.approval_expiration
+      ? i18n._(
+          t`Expires on ${formatDateString(
+            workflowApproval.approval_expiration
+          )}`
+        )
+      : i18n._(t`Never expires`);
+  }
+
+  if (workflowApproval.timed_out) {
+    return <Label color="red">{i18n._(t`Timed out`)}</Label>;
+  }
+
+  if (workflowApproval.canceled_on) {
+    return <Label color="red">{i18n._(t`Canceled`)}</Label>;
+  }
+
+  if (workflowApproval.status === 'failed' && workflowApproval.failed) {
+    return (
+      <Tooltip
+        content={i18n._(
+          t`Denied by ${
+            workflowApproval.summary_fields.approved_or_denied_by.username
+          } - ${formatDateString(workflowApproval.finished)}`
+        )}
+        position="top"
+      >
+        <Label color="red" icon={<InfoCircleIcon />}>
+          {i18n._(t`Denied`)}
+        </Label>
+      </Tooltip>
+    );
+  }
+
+  if (workflowApproval.status === 'successful') {
+    return (
+      <Tooltip
+        content={i18n._(
+          t`Approved by ${
+            workflowApproval.summary_fields.approved_or_denied_by.username
+          } - ${formatDateString(workflowApproval.finished)}`
+        )}
+        position="top"
+      >
+        <Label color="green" icon={<InfoCircleIcon />}>
+          {i18n._(t`Approved`)}
+        </Label>
+      </Tooltip>
+    );
+  }
+
+  return null;
+}
+
+WorkflowApprovalStatus.defaultProps = {
+  workflowApproval: WorkflowApproval.isRequired,
+};
+
+export default withI18n()(WorkflowApprovalStatus);

awx/ui_next/src/screens/WorkflowApproval/shared/WorkflowApprovalStatus.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import { formatDateString } from '../../../util/dates';
+import WorkflowApprovalStatus from './WorkflowApprovalStatus';
+import workflowApproval from '../data.workflowApproval.json';
+
+describe('<WorkflowApprovalStatus />', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('shows no expiration when approval status is pending and no approval_expiration', () => {
+    wrapper = mountWithContexts(
+      <WorkflowApprovalStatus workflowApproval={workflowApproval} />
+    );
+    expect(wrapper.text()).toBe('Never expires');
+  });
+  test('shows expiration date/time when approval status is pending and approval_expiration present', () => {
+    wrapper = mountWithContexts(
+      <WorkflowApprovalStatus
+        workflowApproval={{
+          ...workflowApproval,
+          approval_expiration: '2020-10-10T17:13:12.067947Z',
+        }}
+      />
+    );
+    expect(wrapper.text()).toBe(
+      `Expires on ${formatDateString('2020-10-10T17:13:12.067947Z')}`
+    );
+  });
+  test('shows when an approval has timed out', () => {
+    wrapper = mountWithContexts(
+      <WorkflowApprovalStatus
+        workflowApproval={{
+          ...workflowApproval,
+          status: 'failed',
+          timed_out: true,
+        }}
+      />
+    );
+    expect(wrapper.find('Label').text()).toBe('Timed out');
+  });
+  test('shows when an approval has canceled', () => {
+    wrapper = mountWithContexts(
+      <WorkflowApprovalStatus
+        workflowApproval={{
+          ...workflowApproval,
+          status: 'canceled',
+          canceled_on: '2020-10-10T17:13:12.067947Z',
+        }}
+      />
+    );
+    expect(wrapper.find('Label').text()).toBe('Canceled');
+  });
+  test('shows when an approval has approved', () => {
+    wrapper = mountWithContexts(
+      <WorkflowApprovalStatus
+        workflowApproval={{
+          ...workflowApproval,
+          summary_fields: {
+            ...workflowApproval.summary_fields,
+            approved_or_denied_by: {
+              id: 1,
+              username: 'Foobar',
+            },
+          },
+          status: 'successful',
+          finished: '2020-10-10T17:13:12.067947Z',
+        }}
+      />
+    );
+    expect(wrapper.find('Label').text()).toBe('Approved');
+  });
+  test('shows when an approval has denied', () => {
+    wrapper = mountWithContexts(
+      <WorkflowApprovalStatus
+        workflowApproval={{
+          ...workflowApproval,
+          summary_fields: {
+            ...workflowApproval.summary_fields,
+            approved_or_denied_by: {
+              id: 1,
+              username: 'Foobar',
+            },
+          },
+          status: 'failed',
+          finished: '2020-10-10T17:13:12.067947Z',
+          failed: true,
+        }}
+      />
+    );
+    expect(wrapper.find('Label').text()).toBe('Denied');
+  });
+});

awx/ui_next/src/types.js

@@ -391,3 +391,19 @@ export const NotificationTemplate = shape({
     organization: Organization,
   }),
 });
+
+export const WorkflowApproval = shape({
+  id: number.isRequired,
+  name: string.isRequired,
+  description: string,
+  url: string.isRequired,
+  failed: bool,
+  started: string,
+  finished: string,
+  canceled_on: string,
+  elapsed: number,
+  job_explanation: string,
+  can_approve_or_deny: bool,
+  approval_expiration: string,
+  timed_out: bool,
+});

awx/ui_next/src/util/dates.jsx

@@ -6,10 +6,16 @@ import { getLanguage } from './language';
 const prependZeros = value => value.toString().padStart(2, 0);
 
 export function formatDateString(dateString, lang = getLanguage(navigator)) {
+  if (dateString === null) {
+    return null;
+  }
   return new Date(dateString).toLocaleString(lang);
 }
 
 export function formatDateStringUTC(dateString, lang = getLanguage(navigator)) {
+  if (dateString === null) {
+    return null;
+  }
   return new Date(dateString).toLocaleString(lang, { timeZone: 'UTC' });
 }
 

awx/ui_next/src/util/dates.test.jsx

@@ -21,9 +21,14 @@ const i18n = {
 describe('formatDateString', () => {
   test('it returns the expected value', () => {
     const lang = 'en-US';
+    expect(formatDateString(null, lang)).toEqual(null);
     expect(formatDateString('', lang)).toEqual('Invalid Date');
     expect(formatDateString({}, lang)).toEqual('Invalid Date');
     expect(formatDateString(undefined, lang)).toEqual('Invalid Date');
+    expect(formatDateString('foobar', lang)).toEqual('Invalid Date');
+    expect(formatDateString('2018-011-31T01:14:52.969227Z', lang)).toEqual(
+      'Invalid Date'
+    );
     expect(formatDateString('2018-01-31T01:14:52.969227Z', lang)).toEqual(
       '1/31/2018, 1:14:52 AM'
     );
@@ -33,9 +38,14 @@ describe('formatDateString', () => {
 describe('formatDateStringUTC', () => {
   test('it returns the expected value', () => {
     const lang = 'en-US';
+    expect(formatDateStringUTC(null, lang)).toEqual(null);
     expect(formatDateStringUTC('', lang)).toEqual('Invalid Date');
     expect(formatDateStringUTC({}, lang)).toEqual('Invalid Date');
     expect(formatDateStringUTC(undefined, lang)).toEqual('Invalid Date');
+    expect(formatDateStringUTC('foobar', lang)).toEqual('Invalid Date');
+    expect(formatDateStringUTC('2018-011-31T01:14:52.969227Z', lang)).toEqual(
+      'Invalid Date'
+    );
     expect(formatDateStringUTC('2018-01-31T01:14:52.969227Z', lang)).toEqual(
       '1/31/2018, 1:14:52 AM'
     );

awx/ui_next/src/util/useThrottle.js

@@ -3,12 +3,18 @@ import { useState, useEffect, useRef } from 'react';
 export default function useThrottle(value, limit) {
   const [throttledValue, setThrottledValue] = useState(value);
   const lastRan = useRef(Date.now());
+  const initialValue = useRef(value);
 
   useEffect(() => {
+    if (value !== initialValue.current) {
+      setThrottledValue(value);
+      return () => {};
+    }
+
     const handler = setTimeout(() => {
       if (Date.now() - lastRan.current >= limit) {
-        setThrottledValue(value);
         lastRan.current = Date.now();
+        setThrottledValue(value);
       }
     }, limit - (Date.now() - lastRan.current));