Merge pull request #6015 from AlexSCorey/5777-JTTabOnProjectsAndTemplateListRefactor

Fixes navigation bug

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/screens/Project/Project.jsx

@@ -11,7 +11,7 @@ import NotificationList from '@components/NotificationList';
 import { ResourceAccessList } from '@components/ResourceAccessList';
 import ProjectDetail from './ProjectDetail';
 import ProjectEdit from './ProjectEdit';
-import ProjectJobTemplates from './ProjectJobTemplates';
+import ProjectJobTemplatesList from './ProjectJobTemplatesList';
 import ProjectSchedules from './ProjectSchedules';
 import { OrganizationsAPI, ProjectsAPI } from '@api';
 
@@ -227,7 +227,7 @@ class Project extends Component {
             <Route
               path="/projects/:id/job_templates"
               render={() => (
-                <ProjectJobTemplates id={Number(match.params.id)} />
+                <ProjectJobTemplatesList id={Number(match.params.id)} />
               )}
             />
             <Route

awx/ui_next/src/screens/Project/ProjectJobTemplates/ProjectJobTemplates.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { withRouter } from 'react-router-dom';
-import TemplateList from '../../Template/TemplateList/TemplateList';
-
-function ProjectJobTemplates() {
-  return <TemplateList />;
-}
-
-export default withRouter(ProjectJobTemplates);

awx/ui_next/src/screens/Project/ProjectJobTemplates/index.js

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

awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesList.jsx

@@ -0,0 +1,271 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useLocation } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Card } from '@patternfly/react-core';
+
+import {
+  JobTemplatesAPI,
+  UnifiedJobTemplatesAPI,
+  WorkflowJobTemplatesAPI,
+} from '@api';
+import AlertModal from '@components/AlertModal';
+import DatalistToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
+import PaginatedDataList, {
+  ToolbarDeleteButton,
+} from '@components/PaginatedDataList';
+import { getQSConfig, parseQueryString } from '@util/qs';
+
+import AddDropDownButton from '@components/AddDropDownButton';
+import ProjectTemplatesListItem from './ProjectJobTemplatesListItem';
+
+// The type value in const QS_CONFIG below does not have a space between job_template and
+// workflow_job_template so the params sent to the API match what the api expects.
+const QS_CONFIG = getQSConfig('template', {
+  page: 1,
+  page_size: 20,
+  order_by: 'name',
+  type: 'job_template,workflow_job_template',
+});
+
+function ProjectJobTemplatesList({ i18n }) {
+  const { id: projectId } = useParams();
+  const { pathname, search } = useLocation();
+
+  const [deletionError, setDeletionError] = useState(null);
+  const [contentError, setContentError] = useState(null);
+  const [hasContentLoading, setHasContentLoading] = useState(true);
+  const [jtActions, setJTActions] = useState(null);
+  const [wfjtActions, setWFJTActions] = useState(null);
+  const [count, setCount] = useState(0);
+  const [templates, setTemplates] = useState([]);
+  const [selected, setSelected] = useState([]);
+
+  useEffect(
+    () => {
+      const loadTemplates = async () => {
+        const params = {
+          ...parseQueryString(QS_CONFIG, search),
+        };
+
+        let jtOptionsPromise;
+        if (jtActions) {
+          jtOptionsPromise = Promise.resolve({
+            data: { actions: jtActions },
+          });
+        } else {
+          jtOptionsPromise = JobTemplatesAPI.readOptions();
+        }
+
+        let wfjtOptionsPromise;
+        if (wfjtActions) {
+          wfjtOptionsPromise = Promise.resolve({
+            data: { actions: wfjtActions },
+          });
+        } else {
+          wfjtOptionsPromise = WorkflowJobTemplatesAPI.readOptions();
+        }
+        if (pathname.startsWith('/projects') && projectId) {
+          params.jobtemplate__project = projectId;
+        }
+
+        const promises = Promise.all([
+          UnifiedJobTemplatesAPI.read(params),
+          jtOptionsPromise,
+          wfjtOptionsPromise,
+        ]);
+        setDeletionError(null);
+
+        try {
+          const [
+            {
+              data: { count: itemCount, results },
+            },
+            {
+              data: { actions: jobTemplateActions },
+            },
+            {
+              data: { actions: workFlowJobTemplateActions },
+            },
+          ] = await promises;
+          setJTActions(jobTemplateActions);
+          setWFJTActions(workFlowJobTemplateActions);
+          setCount(itemCount);
+          setTemplates(results);
+          setHasContentLoading(false);
+        } catch (err) {
+          setContentError(err);
+        }
+      };
+      loadTemplates();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pathname, search, count, projectId]
+  );
+
+  const handleSelectAll = isSelected => {
+    const selectedItems = isSelected ? [...templates] : [];
+    setSelected(selectedItems);
+  };
+
+  const handleSelect = template => {
+    if (selected.some(s => s.id === template.id)) {
+      setSelected(selected.filter(s => s.id !== template.id));
+    } else {
+      setSelected(selected.concat(template));
+    }
+  };
+
+  const handleTemplateDelete = async () => {
+    setHasContentLoading(true);
+    try {
+      await Promise.all(
+        selected.map(({ type, id }) => {
+          let deletePromise;
+          if (type === 'job_template') {
+            deletePromise = JobTemplatesAPI.destroy(id);
+          } else if (type === 'workflow_job_template') {
+            deletePromise = WorkflowJobTemplatesAPI.destroy(id);
+          }
+          return deletePromise;
+        })
+      );
+      setCount(count - selected.length);
+    } catch (err) {
+      setDeletionError(err);
+    }
+  };
+
+  const canAddJT =
+    jtActions && Object.prototype.hasOwnProperty.call(jtActions, 'POST');
+  const canAddWFJT =
+    wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
+  const addButtonOptions = [];
+  if (canAddJT) {
+    addButtonOptions.push({
+      label: i18n._(t`Template`),
+      url: `/templates/job_template/add/`,
+    });
+  }
+  if (canAddWFJT) {
+    addButtonOptions.push({
+      label: i18n._(t`Workflow Template`),
+      url: `/templates/workflow_job_template/add/`,
+    });
+  }
+  const isAllSelected =
+    selected.length === templates.length && selected.length > 0;
+  const addButton = (
+    <AddDropDownButton key="add" dropdownItems={addButtonOptions} />
+  );
+  return (
+    <>
+      <Card>
+        <PaginatedDataList
+          contentError={contentError}
+          hasContentLoading={hasContentLoading}
+          items={templates}
+          itemCount={count}
+          pluralizedItemName={i18n._(t`Templates`)}
+          qsConfig={QS_CONFIG}
+          onRowClick={handleSelect}
+          toolbarSearchColumns={[
+            {
+              name: i18n._(t`Name`),
+              key: 'name',
+              isDefault: true,
+            },
+            {
+              name: i18n._(t`Type`),
+              key: 'type',
+              options: [
+                [`job_template`, i18n._(t`Job Template`)],
+                [`workflow_job_template`, i18n._(t`Workflow Template`)],
+              ],
+            },
+            {
+              name: i18n._(t`Playbook name`),
+              key: 'job_template__playbook',
+            },
+            {
+              name: i18n._(t`Created By (Username)`),
+              key: 'created_by__username',
+            },
+            {
+              name: i18n._(t`Modified By (Username)`),
+              key: 'modified_by__username',
+            },
+          ]}
+          toolbarSortColumns={[
+            {
+              name: i18n._(t`Inventory`),
+              key: 'job_template__inventory__id',
+            },
+            {
+              name: i18n._(t`Last Job Run`),
+              key: 'last_job_run',
+            },
+            {
+              name: i18n._(t`Modified`),
+              key: 'modified',
+            },
+            {
+              name: i18n._(t`Name`),
+              key: 'name',
+            },
+            {
+              name: i18n._(t`Project`),
+              key: 'jobtemplate__project__id',
+            },
+            {
+              name: i18n._(t`Type`),
+              key: 'type',
+            },
+          ]}
+          renderToolbar={props => (
+            <DatalistToolbar
+              {...props}
+              showSelectAll
+              showExpandCollapse
+              isAllSelected={isAllSelected}
+              onSelectAll={handleSelectAll}
+              qsConfig={QS_CONFIG}
+              additionalControls={[
+                <ToolbarDeleteButton
+                  key="delete"
+                  onDelete={handleTemplateDelete}
+                  itemsToDelete={selected}
+                  pluralizedItemName="Templates"
+                />,
+                ...(canAddJT || canAddWFJT ? [addButton] : []),
+              ]}
+            />
+          )}
+          renderItem={template => (
+            <ProjectTemplatesListItem
+              key={template.id}
+              value={template.name}
+              template={template}
+              detailUrl={`/templates/${template.type}/${template.id}/details`}
+              onSelect={() => handleSelect(template)}
+              isSelected={selected.some(row => row.id === template.id)}
+            />
+          )}
+          emptyStateControls={(canAddJT || canAddWFJT) && addButton}
+        />
+      </Card>
+      <AlertModal
+        isOpen={deletionError}
+        variant="danger"
+        title={i18n._(t`Error!`)}
+        onClose={() => setDeletionError(null)}
+      >
+        {i18n._(t`Failed to delete one or more templates.`)}
+        <ErrorDetail error={deletionError} />
+      </AlertModal>
+    </>
+  );
+}
+
+export default withI18n()(ProjectJobTemplatesList);

awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Button,
+  DataListAction as _DataListAction,
+  DataListCell,
+  DataListCheck,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  Tooltip,
+} from '@patternfly/react-core';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import {
+  ExclamationTriangleIcon,
+  PencilAltIcon,
+  RocketIcon,
+} from '@patternfly/react-icons';
+
+import LaunchButton from '@components/LaunchButton';
+import Sparkline from '@components/Sparkline';
+import { toTitleCase } from '@util/strings';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(2, 40px);
+`;
+
+function ProjectJobTemplateListItem({
+  i18n,
+  template,
+  isSelected,
+  onSelect,
+  detailUrl,
+}) {
+  const labelId = `check-action-${template.id}`;
+  const canLaunch = template.summary_fields.user_capabilities.start;
+
+  const missingResourceIcon =
+    template.type === 'job_template' &&
+    (!template.summary_fields.project ||
+      (!template.summary_fields.inventory &&
+        !template.ask_inventory_on_launch));
+
+  return (
+    <DataListItem aria-labelledby={labelId} id={`${template.id}`}>
+      <DataListItemRow>
+        <DataListCheck
+          id={`select-jobTemplate-${template.id}`}
+          checked={isSelected}
+          onChange={onSelect}
+          aria-labelledby={labelId}
+        />
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="divider">
+              <span>
+                <Link to={`${detailUrl}`}>
+                  <b>{template.name}</b>
+                </Link>
+              </span>
+              {missingResourceIcon && (
+                <span>
+                  <Tooltip
+                    content={i18n._(
+                      t`Resources are missing from this template.`
+                    )}
+                    position="right"
+                  >
+                    <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
+                  </Tooltip>
+                </span>
+              )}
+            </DataListCell>,
+            <DataListCell key="type">
+              {toTitleCase(template.type)}
+            </DataListCell>,
+            <DataListCell key="sparkline">
+              <Sparkline jobs={template.summary_fields.recent_jobs} />
+            </DataListCell>,
+          ]}
+        />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {canLaunch && template.type === 'job_template' && (
+            <Tooltip content={i18n._(t`Launch Template`)} position="top">
+              <LaunchButton resource={template}>
+                {({ handleLaunch }) => (
+                  <Button
+                    css="grid-column: 1"
+                    variant="plain"
+                    onClick={handleLaunch}
+                  >
+                    <RocketIcon />
+                  </Button>
+                )}
+              </LaunchButton>
+            </Tooltip>
+          )}
+          {template.summary_fields.user_capabilities.edit && (
+            <Tooltip content={i18n._(t`Edit Template`)} position="top">
+              <Button
+                css="grid-column: 2"
+                variant="plain"
+                component={Link}
+                to={`/templates/${template.type}/${template.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
+      </DataListItemRow>
+    </DataListItem>
+  );
+}
+
+export { ProjectJobTemplateListItem as _ProjectJobTemplateListItem };
+export default withI18n()(ProjectJobTemplateListItem);

awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.test.jsx

@@ -0,0 +1,189 @@
+import React from 'react';
+
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { createMemoryHistory } from 'history';
+import ProjectJobTemplatesListItem from './ProjectJobTemplatesListItem';
+
+describe('<ProjectJobTemplatesListItem />', () => {
+  test('launch button shown to users with start capabilities', () => {
+    const wrapper = mountWithContexts(
+      <ProjectJobTemplatesListItem
+        isSelected={false}
+        template={{
+          id: 1,
+          name: 'Template 1',
+          url: '/templates/job_template/1',
+          type: 'job_template',
+          summary_fields: {
+            user_capabilities: {
+              start: true,
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('LaunchButton').exists()).toBeTruthy();
+  });
+  test('launch button hidden from users without start capabilities', () => {
+    const wrapper = mountWithContexts(
+      <ProjectJobTemplatesListItem
+        isSelected={false}
+        template={{
+          id: 1,
+          name: 'Template 1',
+          url: '/templates/job_template/1',
+          type: 'job_template',
+          summary_fields: {
+            user_capabilities: {
+              start: false,
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('LaunchButton').exists()).toBeFalsy();
+  });
+  test('edit button shown to users with edit capabilities', () => {
+    const wrapper = mountWithContexts(
+      <ProjectJobTemplatesListItem
+        isSelected={false}
+        template={{
+          id: 1,
+          name: 'Template 1',
+          url: '/templates/job_template/1',
+          type: 'job_template',
+          summary_fields: {
+            user_capabilities: {
+              edit: true,
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
+  });
+  test('edit button hidden from users without edit capabilities', () => {
+    const wrapper = mountWithContexts(
+      <ProjectJobTemplatesListItem
+        isSelected={false}
+        template={{
+          id: 1,
+          name: 'Template 1',
+          url: '/templates/job_template/1',
+          type: 'job_template',
+          summary_fields: {
+            user_capabilities: {
+              edit: false,
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
+  });
+  test('missing resource icon is shown.', () => {
+    const wrapper = mountWithContexts(
+      <ProjectJobTemplatesListItem
+        isSelected={false}
+        template={{
+          id: 1,
+          name: 'Template 1',
+          url: '/templates/job_template/1',
+          type: 'job_template',
+          summary_fields: {
+            user_capabilities: {
+              edit: false,
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(true);
+  });
+  test('missing resource icon is not shown when there is a project and an inventory.', () => {
+    const wrapper = mountWithContexts(
+      <ProjectJobTemplatesListItem
+        isSelected={false}
+        template={{
+          id: 1,
+          name: 'Template 1',
+          url: '/templates/job_template/1',
+          type: 'job_template',
+          summary_fields: {
+            user_capabilities: {
+              edit: false,
+            },
+            project: { name: 'Foo', id: 2 },
+            inventory: { name: 'Bar', id: 2 },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
+  });
+  test('missing resource icon is not shown when inventory is prompt_on_launch, and a project', () => {
+    const wrapper = mountWithContexts(
+      <ProjectJobTemplatesListItem
+        isSelected={false}
+        template={{
+          id: 1,
+          name: 'Template 1',
+          url: '/templates/job_template/1',
+          type: 'job_template',
+          ask_inventory_on_launch: true,
+          summary_fields: {
+            user_capabilities: {
+              edit: false,
+            },
+            project: { name: 'Foo', id: 2 },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
+  });
+  test('missing resource icon is not shown type is workflow_job_template', () => {
+    const wrapper = mountWithContexts(
+      <ProjectJobTemplatesListItem
+        isSelected={false}
+        template={{
+          id: 1,
+          name: 'Template 1',
+          url: '/templates/job_template/1',
+          type: 'workflow_job_template',
+          summary_fields: {
+            user_capabilities: {
+              edit: false,
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
+  });
+  test('clicking on template from project templates list navigates properly', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/projects/1/job_templates'],
+    });
+    const wrapper = mountWithContexts(
+      <ProjectJobTemplatesListItem
+        isSelected={false}
+        detailUrl="/templates/job_template/2/details"
+        template={{
+          id: 2,
+          name: 'Template 2',
+          summary_fields: {
+            user_capabilities: {
+              edit: false,
+            },
+          },
+        }}
+      />,
+      { context: { router: { history } } }
+    );
+    wrapper.find('Link').simulate('click', { button: 0 });
+    expect(history.location.pathname).toEqual(
+      '/templates/job_template/2/details'
+    );
+  });
+});

awx/ui_next/src/screens/Project/ProjectJobTemplatesList/index.js

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

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
-
+import { createMemoryHistory } from 'history';
 import TemplateListItem from './TemplateListItem';
 
 describe('<TemplateListItem />', () => {
@@ -161,4 +161,29 @@ describe('<TemplateListItem />', () => {
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
+  test('clicking on template from templates list navigates properly', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/templates'],
+    });
+    const wrapper = mountWithContexts(
+      <TemplateListItem
+        isSelected={false}
+        detailUrl="/templates/job_template/1/details"
+        template={{
+          id: 1,
+          name: 'Template 1',
+          summary_fields: {
+            user_capabilities: {
+              edit: false,
+            },
+          },
+        }}
+      />,
+      { context: { router: { history } } }
+    );
+    wrapper.find('Link').simulate('click', { button: 0 });
+    expect(history.location.pathname).toEqual(
+      '/templates/job_template/1/details'
+    );
+  });
 });