Merge pull request #5752 from marshmalien/details-delete-job-template

Add delete button to Job Template details

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

awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx

@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import React, { Fragment, useState, useEffect } from 'react';
+import { Link, useHistory, useParams } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import {
   Button,
@@ -11,12 +11,15 @@ import {
 import styled from 'styled-components';
 import { t } from '@lingui/macro';
 
+import AlertModal from '@components/AlertModal';
 import { CardBody, CardActionsRow } from '@components/Card';
 import ContentError from '@components/ContentError';
-import LaunchButton from '@components/LaunchButton';
 import ContentLoading from '@components/ContentLoading';
 import { ChipGroup, Chip, CredentialChip } from '@components/Chip';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
+import DeleteButton from '@components/DeleteButton';
+import ErrorDetail from '@components/ErrorDetail';
+import LaunchButton from '@components/LaunchButton';
 import { JobTemplatesAPI } from '@api';
 
 const MissingDetail = styled(Detail)`
@@ -25,319 +28,325 @@ const MissingDetail = styled(Detail)`
   }
 `;
 
-class JobTemplateDetail extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      contentError: null,
-      hasContentLoading: true,
-      instanceGroups: [],
-    };
-    this.readInstanceGroups = this.readInstanceGroups.bind(this);
-  }
+function JobTemplateDetail({ i18n, template }) {
+  const {
+    ask_inventory_on_launch,
+    allow_simultaneous,
+    become_enabled,
+    created,
+    description,
+    diff_mode,
+    forks,
+    host_config_key,
+    job_slice_count,
+    job_tags,
+    job_type,
+    name,
+    limit,
+    modified,
+    playbook,
+    skip_tags,
+    timeout,
+    summary_fields,
+    use_fact_cache,
+    url,
+    verbosity,
+  } = template;
+  const [contentError, setContentError] = useState(null);
+  const [deletionError, setDeletionError] = useState(null);
+  const [hasContentLoading, setHasContentLoading] = useState(false);
+  const [instanceGroups, setInstanceGroups] = useState([]);
+  const { id: templateId } = useParams();
+  const history = useHistory();
 
-  componentDidMount() {
-    this.readInstanceGroups();
-  }
+  useEffect(() => {
+    (async () => {
+      setContentError(null);
+      setHasContentLoading(true);
+      try {
+        const {
+          data: { results = [] },
+        } = await JobTemplatesAPI.readInstanceGroups(templateId);
+        setInstanceGroups(results);
+      } catch (error) {
+        setContentError(error);
+      } finally {
+        setHasContentLoading(false);
+      }
+    })();
+  }, [templateId]);
 
-  async readInstanceGroups() {
-    const { match } = this.props;
+  const handleDelete = async () => {
+    setHasContentLoading(true);
     try {
-      const { data } = await JobTemplatesAPI.readInstanceGroups(
-        match.params.id
-      );
-      this.setState({ instanceGroups: [...data.results] });
-    } catch (err) {
-      this.setState({ contentError: err });
-    } finally {
-      this.setState({ hasContentLoading: false });
+      await JobTemplatesAPI.destroy(templateId);
+      history.push(`/templates`);
+    } catch (error) {
+      setDeletionError(error);
     }
-  }
+    setHasContentLoading(false);
+  };
 
-  render() {
-    const {
-      template: {
-        ask_inventory_on_launch,
-        allow_simultaneous,
-        become_enabled,
-        created,
-        description,
-        diff_mode,
-        forks,
-        host_config_key,
-        job_slice_count,
-        job_tags,
-        job_type,
-        name,
-        limit,
-        modified,
-        playbook,
-        skip_tags,
-        timeout,
-        summary_fields,
-        use_fact_cache,
-        url,
-        verbosity,
-      },
-      hasTemplateLoading,
-      template,
-      i18n,
-      match,
-    } = this.props;
-    const canLaunch = summary_fields.user_capabilities.start;
-    const { instanceGroups, hasContentLoading, contentError } = this.state;
-    const verbosityOptions = [
-      { verbosity: 0, details: i18n._(t`0 (Normal)`) },
-      { verbosity: 1, details: i18n._(t`1 (Verbose)`) },
-      { verbosity: 2, details: i18n._(t`2 (More Verbose)`) },
-      { verbosity: 3, details: i18n._(t`3 (Debug)`) },
-      { verbosity: 4, details: i18n._(t`4 (Connection Debug)`) },
-      { verbosity: 5, details: i18n._(t`5 (WinRM Debug)`) },
-    ];
-    const verbosityDetails = verbosityOptions.filter(
-      option => option.verbosity === verbosity
-    );
-    const generateCallBackUrl = `${window.location.origin + url}callback/`;
-    const isInitialized = !hasTemplateLoading && !hasContentLoading;
+  const canLaunch =
+    summary_fields.user_capabilities && summary_fields.user_capabilities.start;
+  const verbosityOptions = [
+    { verbosity: 0, details: i18n._(t`0 (Normal)`) },
+    { verbosity: 1, details: i18n._(t`1 (Verbose)`) },
+    { verbosity: 2, details: i18n._(t`2 (More Verbose)`) },
+    { verbosity: 3, details: i18n._(t`3 (Debug)`) },
+    { verbosity: 4, details: i18n._(t`4 (Connection Debug)`) },
+    { verbosity: 5, details: i18n._(t`5 (WinRM Debug)`) },
+  ];
+  const verbosityDetails = verbosityOptions.filter(
+    option => option.verbosity === verbosity
+  );
+  const generateCallBackUrl = `${window.location.origin + url}callback/`;
+  const renderOptionsField =
+    become_enabled || host_config_key || allow_simultaneous || use_fact_cache;
 
-    const renderOptionsField =
-      become_enabled || host_config_key || allow_simultaneous || use_fact_cache;
+  const renderOptions = (
+    <TextList component={TextListVariants.ul}>
+      {become_enabled && (
+        <TextListItem component={TextListItemVariants.li}>
+          {i18n._(t`Enable Privilege Escalation`)}
+        </TextListItem>
+      )}
+      {host_config_key && (
+        <TextListItem component={TextListItemVariants.li}>
+          {i18n._(t`Allow Provisioning Callbacks`)}
+        </TextListItem>
+      )}
+      {allow_simultaneous && (
+        <TextListItem component={TextListItemVariants.li}>
+          {i18n._(t`Enable Concurrent Jobs`)}
+        </TextListItem>
+      )}
+      {use_fact_cache && (
+        <TextListItem component={TextListItemVariants.li}>
+          {i18n._(t`Use Fact Cache`)}
+        </TextListItem>
+      )}
+    </TextList>
+  );
 
-    const renderOptions = (
-      <TextList component={TextListVariants.ul}>
-        {become_enabled && (
-          <TextListItem component={TextListItemVariants.li}>
-            {i18n._(t`Enable Privilege Escalation`)}
-          </TextListItem>
-        )}
-        {host_config_key && (
-          <TextListItem component={TextListItemVariants.li}>
-            {i18n._(t`Allow Provisioning Callbacks`)}
-          </TextListItem>
-        )}
-        {allow_simultaneous && (
-          <TextListItem component={TextListItemVariants.li}>
-            {i18n._(t`Enable Concurrent Jobs`)}
-          </TextListItem>
-        )}
-        {use_fact_cache && (
-          <TextListItem component={TextListItemVariants.li}>
-            {i18n._(t`Use Fact Cache`)}
-          </TextListItem>
-        )}
-      </TextList>
-    );
+  const renderMissingDataDetail = value => (
+    <MissingDetail label={value} value={i18n._(t`Deleted`)} />
+  );
 
-    const renderMissingDataDetail = value => (
-      <MissingDetail label={value} value={i18n._(t`Deleted`)} />
-    );
+  const inventoryValue = (kind, id) => {
+    const inventorykind = kind === 'smart' ? 'smart_inventory' : 'inventory';
 
-    const inventoryValue = (kind, id) => {
-      const inventorykind =
-        kind === 'smart' ? (kind = 'smart_inventory') : (kind = 'inventory');
-
-      return ask_inventory_on_launch ? (
-        <Fragment>
-          <Link to={`/inventories/${inventorykind}/${id}/details`}>
-            {summary_fields.inventory.name}
-          </Link>
-          <span> {i18n._(t`(Prompt on Launch)`)}</span>
-        </Fragment>
-      ) : (
+    return ask_inventory_on_launch ? (
+      <Fragment>
         <Link to={`/inventories/${inventorykind}/${id}/details`}>
           {summary_fields.inventory.name}
         </Link>
-      );
-    };
+        <span> {i18n._(t`(Prompt on Launch)`)}</span>
+      </Fragment>
+    ) : (
+      <Link to={`/inventories/${inventorykind}/${id}/details`}>
+        {summary_fields.inventory.name}
+      </Link>
+    );
+  };
 
-    if (contentError) {
-      return <ContentError error={contentError} />;
-    }
+  if (contentError) {
+    return <ContentError error={contentError} />;
+  }
 
-    if (hasContentLoading) {
-      return <ContentLoading />;
-    }
+  if (hasContentLoading) {
+    return <ContentLoading />;
+  }
 
-    return (
-      isInitialized && (
-        <CardBody>
-          <DetailList gutter="sm">
-            <Detail
-              label={i18n._(t`Name`)}
-              value={name}
-              dataCy="jt-detail-name"
-            />
-            <Detail label={i18n._(t`Description`)} value={description} />
-            <Detail label={i18n._(t`Job Type`)} value={job_type} />
-
-            {summary_fields.inventory ? (
-              <Detail
-                label={i18n._(t`Inventory`)}
-                value={inventoryValue(
-                  summary_fields.inventory.kind,
-                  summary_fields.inventory.id
-                )}
-              />
-            ) : (
-              !ask_inventory_on_launch &&
-              renderMissingDataDetail(i18n._(t`Inventory`))
+  return (
+    <CardBody>
+      <DetailList gutter="sm">
+        <Detail label={i18n._(t`Name`)} value={name} dataCy="jt-detail-name" />
+        <Detail label={i18n._(t`Description`)} value={description} />
+        <Detail label={i18n._(t`Job Type`)} value={job_type} />
+        {summary_fields.inventory ? (
+          <Detail
+            label={i18n._(t`Inventory`)}
+            value={inventoryValue(
+              summary_fields.inventory.kind,
+              summary_fields.inventory.id
             )}
-            {summary_fields.project ? (
-              <Detail
-                label={i18n._(t`Project`)}
-                value={
-                  <Link to={`/projects/${summary_fields.project.id}/details`}>
-                    {summary_fields.project
-                      ? summary_fields.project.name
-                      : i18n._(t`Deleted`)}
-                  </Link>
-                }
-              />
-            ) : (
-              renderMissingDataDetail(i18n._(t`Project`))
-            )}
-            <Detail label={i18n._(t`SCM Branch`)} value={template.scm_branch} />
-            <Detail label={i18n._(t`Playbook`)} value={playbook} />
-            <Detail label={i18n._(t`Forks`)} value={forks || '0'} />
-            <Detail label={i18n._(t`Limit`)} value={limit} />
+          />
+        ) : (
+          !ask_inventory_on_launch &&
+          renderMissingDataDetail(i18n._(t`Inventory`))
+        )}
+        {summary_fields.project ? (
+          <Detail
+            label={i18n._(t`Project`)}
+            value={
+              <Link to={`/projects/${summary_fields.project.id}/details`}>
+                {summary_fields.project.name}
+              </Link>
+            }
+          />
+        ) : (
+          renderMissingDataDetail(i18n._(t`Project`))
+        )}
+        <Detail label={i18n._(t`SCM Branch`)} value={template.scm_branch} />
+        <Detail label={i18n._(t`Playbook`)} value={playbook} />
+        <Detail label={i18n._(t`Forks`)} value={forks || '0'} />
+        <Detail label={i18n._(t`Limit`)} value={limit} />
+        <Detail
+          label={i18n._(t`Verbosity`)}
+          value={verbosityDetails[0].details}
+        />
+        <Detail label={i18n._(t`Timeout`)} value={timeout || '0'} />
+        <UserDateDetail
+          label={i18n._(t`Created`)}
+          date={created}
+          user={summary_fields.created_by}
+        />
+        <UserDateDetail
+          label={i18n._(t`Last Modified`)}
+          date={modified}
+          user={summary_fields.modified_by}
+        />
+        <Detail
+          label={i18n._(t`Show Changes`)}
+          value={diff_mode ? 'On' : 'Off'}
+        />
+        <Detail label={i18n._(t` Job Slicing`)} value={job_slice_count} />
+        {host_config_key && (
+          <React.Fragment>
             <Detail
-              label={i18n._(t`Verbosity`)}
-              value={verbosityDetails[0].details}
-            />
-            <Detail label={i18n._(t`Timeout`)} value={timeout || '0'} />
-            <UserDateDetail
-              label={i18n._(t`Created`)}
-              date={created}
-              user={summary_fields.created_by}
-            />
-            <UserDateDetail
-              label={i18n._(t`Last Modified`)}
-              date={modified}
-              user={summary_fields.modified_by}
+              label={i18n._(t`Host Config Key`)}
+              value={host_config_key}
             />
             <Detail
-              label={i18n._(t`Show Changes`)}
-              value={diff_mode ? 'On' : 'Off'}
+              label={i18n._(t`Provisioning Callback URL`)}
+              value={generateCallBackUrl}
             />
-            <Detail label={i18n._(t` Job Slicing`)} value={job_slice_count} />
-            {host_config_key && (
-              <React.Fragment>
-                <Detail
-                  label={i18n._(t`Host Config Key`)}
-                  value={host_config_key}
-                />
-                <Detail
-                  label={i18n._(t`Provisioning Callback URL`)}
-                  value={generateCallBackUrl}
-                />
-              </React.Fragment>
-            )}
-            {renderOptionsField && (
-              <Detail label={i18n._(t`Options`)} value={renderOptions} />
-            )}
-            {summary_fields.credentials &&
-              summary_fields.credentials.length > 0 && (
-                <Detail
-                  fullWidth
-                  label={i18n._(t`Credentials`)}
-                  value={
-                    <ChipGroup numChips={5}>
-                      {summary_fields.credentials.map(c => (
-                        <CredentialChip key={c.id} credential={c} isReadOnly />
-                      ))}
-                    </ChipGroup>
-                  }
-                />
-              )}
-            {summary_fields.labels && summary_fields.labels.results.length > 0 && (
-              <Detail
-                fullWidth
-                label={i18n._(t`Labels`)}
-                value={
-                  <ChipGroup numChips={5}>
-                    {summary_fields.labels.results.map(l => (
-                      <Chip key={l.id} isReadOnly>
-                        {l.name}
-                      </Chip>
-                    ))}
-                  </ChipGroup>
-                }
-              />
-            )}
-            {instanceGroups.length > 0 && (
-              <Detail
-                fullWidth
-                label={i18n._(t`Instance Groups`)}
-                value={
-                  <ChipGroup numChips={5}>
-                    {instanceGroups.map(ig => (
-                      <Chip key={ig.id} isReadOnly>
-                        {ig.name}
-                      </Chip>
-                    ))}
-                  </ChipGroup>
-                }
-              />
-            )}
-            {job_tags && job_tags.length > 0 && (
-              <Detail
-                fullWidth
-                label={i18n._(t`Job tags`)}
-                value={
-                  <ChipGroup numChips={5}>
-                    {job_tags.split(',').map(jobTag => (
-                      <Chip key={jobTag} isReadOnly>
-                        {jobTag}
-                      </Chip>
-                    ))}
-                  </ChipGroup>
-                }
-              />
-            )}
-            {skip_tags && skip_tags.length > 0 && (
-              <Detail
-                fullWidth
-                label={i18n._(t`Skip tags`)}
-                value={
-                  <ChipGroup numChips={5}>
-                    {skip_tags.split(',').map(skipTag => (
-                      <Chip key={skipTag} isReadOnly>
-                        {skipTag}
-                      </Chip>
-                    ))}
-                  </ChipGroup>
-                }
-              />
-            )}
-          </DetailList>
-          <CardActionsRow>
-            {summary_fields.user_capabilities.edit && (
-              <Button
-                component={Link}
-                to={`/templates/job_template/${match.params.id}/edit`}
-                aria-label={i18n._(t`Edit`)}
-              >
-                {i18n._(t`Edit`)}
+          </React.Fragment>
+        )}
+        {renderOptionsField && (
+          <Detail label={i18n._(t`Options`)} value={renderOptions} />
+        )}
+        {summary_fields.credentials && summary_fields.credentials.length > 0 && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Credentials`)}
+            value={
+              <ChipGroup numChips={5}>
+                {summary_fields.credentials.map(c => (
+                  <CredentialChip key={c.id} credential={c} isReadOnly />
+                ))}
+              </ChipGroup>
+            }
+          />
+        )}
+        {summary_fields.labels && summary_fields.labels.results.length > 0 && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Labels`)}
+            value={
+              <ChipGroup numChips={5}>
+                {summary_fields.labels.results.map(l => (
+                  <Chip key={l.id} isReadOnly>
+                    {l.name}
+                  </Chip>
+                ))}
+              </ChipGroup>
+            }
+          />
+        )}
+        {instanceGroups.length > 0 && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Instance Groups`)}
+            value={
+              <ChipGroup numChips={5}>
+                {instanceGroups.map(ig => (
+                  <Chip key={ig.id} isReadOnly>
+                    {ig.name}
+                  </Chip>
+                ))}
+              </ChipGroup>
+            }
+          />
+        )}
+        {job_tags && job_tags.length > 0 && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Job tags`)}
+            value={
+              <ChipGroup numChips={5}>
+                {job_tags.split(',').map(jobTag => (
+                  <Chip key={jobTag} isReadOnly>
+                    {jobTag}
+                  </Chip>
+                ))}
+              </ChipGroup>
+            }
+          />
+        )}
+        {skip_tags && skip_tags.length > 0 && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Skip tags`)}
+            value={
+              <ChipGroup numChips={5}>
+                {skip_tags.split(',').map(skipTag => (
+                  <Chip key={skipTag} isReadOnly>
+                    {skipTag}
+                  </Chip>
+                ))}
+              </ChipGroup>
+            }
+          />
+        )}
+      </DetailList>
+      <CardActionsRow>
+        {summary_fields.user_capabilities &&
+          summary_fields.user_capabilities.edit && (
+            <Button
+              component={Link}
+              to={`/templates/job_template/${templateId}/edit`}
+              aria-label={i18n._(t`Edit`)}
+            >
+              {i18n._(t`Edit`)}
+            </Button>
+          )}
+        {canLaunch && (
+          <LaunchButton resource={template} aria-label={i18n._(t`Launch`)}>
+            {({ handleLaunch }) => (
+              <Button variant="secondary" type="submit" onClick={handleLaunch}>
+                {i18n._(t`Launch`)}
               </Button>
             )}
-            {canLaunch && (
-              <LaunchButton resource={template} aria-label={i18n._(t`Launch`)}>
-                {({ handleLaunch }) => (
-                  <Button
-                    variant="secondary"
-                    type="submit"
-                    onClick={handleLaunch}
-                  >
-                    {i18n._(t`Launch`)}
-                  </Button>
-                )}
-              </LaunchButton>
-            )}
-          </CardActionsRow>
-        </CardBody>
-      )
-    );
-  }
+          </LaunchButton>
+        )}
+        {summary_fields.user_capabilities &&
+          summary_fields.user_capabilities.delete && (
+            <DeleteButton
+              name={name}
+              modalTitle={i18n._(t`Delete Job Template`)}
+              onConfirm={handleDelete}
+            >
+              {i18n._(t`Delete`)}
+            </DeleteButton>
+          )}
+      </CardActionsRow>
+      {/* Update delete modal to show dependencies https://github.com/ansible/awx/issues/5546 */}
+      {deletionError && (
+        <AlertModal
+          isOpen={deletionError}
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          onClose={() => setDeletionError(null)}
+        >
+          {i18n._(t`Failed to delete job template.`)}
+          <ErrorDetail error={deletionError} />
+        </AlertModal>
+      )}
+    </CardBody>
+  );
 }
+
 export { JobTemplateDetail as _JobTemplateDetail };
-export default withI18n()(withRouter(JobTemplateDetail));
+export default withI18n()(JobTemplateDetail);

awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.jsx

@@ -1,161 +1,141 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
-import JobTemplateDetail, { _JobTemplateDetail } from './JobTemplateDetail';
+import JobTemplateDetail from './JobTemplateDetail';
 import { JobTemplatesAPI } from '@api';
+import mockTemplate from '../shared/data.job_template.json';
 
 jest.mock('@api');
 
+const mockInstanceGroups = {
+  count: 5,
+  data: {
+    results: [{ id: 1, name: 'IG1' }, { id: 2, name: 'IG2' }],
+  },
+};
+
 describe('<JobTemplateDetail />', () => {
-  const template = {
-    forks: 1,
-    host_config_key: 'ssh',
-    name: 'Temp 1',
-    job_type: 'run',
-    inventory: 1,
-    limit: '1',
-    project: 7,
-    playbook: '',
-    id: 1,
-    verbosity: 1,
-    summary_fields: {
-      user_capabilities: { edit: true },
-      created_by: { id: 1, username: 'Joe' },
-      modified_by: { id: 1, username: 'Joe' },
-      credentials: [
-        { id: 1, kind: 'ssh', name: 'Credential 1' },
-        { id: 2, kind: 'awx', name: 'Credential 2' },
-      ],
-      inventory: { name: 'Inventory' },
-      project: { name: 'Project' },
-    },
-    created: '2020-04-25T01:23:45.678901Z',
-    modified: '2020-04-25T01:23:45.678901Z',
-  };
+  let wrapper;
 
-  const mockInstanceGroups = {
-    count: 5,
-    data: {
-      results: [{ id: 1, name: 'IG1' }, { id: 2, name: 'IG2' }],
-    },
-  };
-
-  const readInstanceGroups = jest.spyOn(
-    _JobTemplateDetail.prototype,
-    'readInstanceGroups'
-  );
-
-  beforeEach(() => {
+  beforeEach(async () => {
     JobTemplatesAPI.readInstanceGroups.mockResolvedValue(mockInstanceGroups);
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <JobTemplateDetail template={mockTemplate} />
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
   });
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
-  test('Can load with missing summary fields', async () => {
-    const mockTemplate = { ...template };
-    mockTemplate.summary_fields = { user_capabilities: {} };
-
-    const wrapper = mountWithContexts(
-      <JobTemplateDetail template={mockTemplate} />
-    );
+  test('should render successfully with missing summary fields', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <JobTemplateDetail
+          template={{
+            ...mockTemplate,
+            become_enabled: true,
+            summary_fields: { user_capabilities: {} },
+          }}
+        />
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
     await waitForElement(
       wrapper,
-      'Detail[label="Description"]',
+      'Detail[label="Name"]',
       el => el.length === 1
     );
   });
 
-  test('When component mounts API is called to get instance groups', async done => {
-    const wrapper = mountWithContexts(
-      <JobTemplateDetail template={template} />
-    );
-    await waitForElement(
-      wrapper,
-      'JobTemplateDetail',
-      el => el.state('hasContentLoading') === true
-    );
-    expect(readInstanceGroups).toHaveBeenCalled();
-    await waitForElement(
-      wrapper,
-      'JobTemplateDetail',
-      el => el.state('hasContentLoading') === false
-    );
+  test('should request instance groups from api', async () => {
     expect(JobTemplatesAPI.readInstanceGroups).toHaveBeenCalledTimes(1);
-    done();
   });
 
-  test('Edit button is absent when user does not have edit privilege', async done => {
-    const regularUser = {
-      forks: 1,
-      host_config_key: 'ssh',
-      name: 'Temp 1',
-      job_tags: 'cookies,pizza',
-      job_type: 'run',
-      inventory: 1,
-      limit: '1',
-      project: 7,
-      playbook: '',
-      id: 1,
-      verbosity: 0,
-      created_by: 'Alex',
-      skip_tags: 'coffe,tea',
-      summary_fields: {
-        user_capabilities: { edit: false },
-        created_by: { id: 1, username: 'Joe' },
-        modified_by: { id: 1, username: 'Joe' },
-        inventory: { name: 'Inventory' },
-        project: { name: 'Project' },
-        labels: { count: 1, results: [{ name: 'Label', id: 1 }] },
-      },
-      created: '2020-04-25T01:23:45.678901Z',
-      modified: '2020-04-25T01:23:45.678901Z',
-    };
-    const wrapper = mountWithContexts(
-      <JobTemplateDetail template={regularUser} />
-    );
-    const jobTemplateDetail = wrapper.find('JobTemplateDetail');
-    const editButton = jobTemplateDetail.find('button[aria-label="Edit"]');
-
-    jobTemplateDetail.setState({
-      instanceGroups: mockInstanceGroups,
-      hasContentLoading: false,
-      contentError: false,
+  test('should hide edit button for users without edit permission', async () => {
+    JobTemplatesAPI.readInstanceGroups.mockResolvedValue({ data: {} });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <JobTemplateDetail
+          template={{
+            ...mockTemplate,
+            diff_mode: true,
+            host_config_key: 'key',
+            summary_fields: { user_capabilities: { edit: false } },
+          }}
+        />
+      );
     });
-    expect(editButton.length).toBe(0);
-    done();
+    expect(wrapper.find('button[aria-label="Edit"]').length).toBe(0);
   });
 
-  test('should render CredentialChip', () => {
-    template.summary_fields.credentials = [{ id: 1, name: 'cred', kind: null }];
-    const wrapper = mountWithContexts(
-      <JobTemplateDetail template={template} />
-    );
-    wrapper.find('JobTemplateDetail').setState({
-      instanceGroups: mockInstanceGroups,
-      hasContentLoading: false,
-      contentError: false,
+  test('should render credential chips', () => {
+    const chips = wrapper.find('CredentialChip');
+    expect(chips).toHaveLength(2);
+    chips.forEach((chip, id) => {
+      expect(chip.prop('credential')).toEqual(
+        mockTemplate.summary_fields.credentials[id]
+      );
     });
-
-    const chip = wrapper.find('CredentialChip');
-    expect(chip).toHaveLength(1);
-    expect(chip.prop('credential')).toEqual(
-      template.summary_fields.credentials[0]
-    );
   });
+
   test('should render SCM_Branch', async () => {
-    const mockTemplate = { ...template };
-    mockTemplate.scm_branch = 'Foo branch';
-
-    const wrapper = mountWithContexts(
-      <JobTemplateDetail template={mockTemplate} />
-    );
-    await waitForElement(
-      wrapper,
-      'JobTemplateDetail',
-      el => el.state('hasContentLoading') === false
-    );
     const SCMBranch = wrapper.find('Detail[label="SCM Branch"]');
     expect(SCMBranch.prop('value')).toBe('Foo branch');
   });
+
+  test('should show content error for failed instance group fetch', async () => {
+    JobTemplatesAPI.readInstanceGroups.mockImplementationOnce(() =>
+      Promise.reject(new Error())
+    );
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <JobTemplateDetail
+          template={{
+            ...mockTemplate,
+            allow_simultaneous: true,
+            ask_inventory_on_launch: true,
+            summary_fields: {
+              inventory: {
+                kind: 'smart',
+              },
+            },
+          }}
+        />
+      );
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+  });
+
+  test('expected api calls are made for delete', async () => {
+    await act(async () => {
+      wrapper.find('DeleteButton').invoke('onConfirm')();
+    });
+    expect(JobTemplatesAPI.destroy).toHaveBeenCalledTimes(1);
+  });
+
+  test('Error dialog shown for failed deletion', async () => {
+    JobTemplatesAPI.destroy.mockImplementationOnce(() =>
+      Promise.reject(new Error())
+    );
+    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/Template/JobTemplateDetail/index.js

@@ -1,4 +1 @@
-import JobTemplateDetail from './JobTemplateDetail';
-
-export { JobTemplateDetail as _JobTemplateDetail };
-export default JobTemplateDetail;
+export { default } from './JobTemplateDetail';

awx/ui_next/src/screens/Template/shared/data.job_template.json

@@ -101,9 +101,14 @@
           "copy": true
       },
       "labels": {
-          "count": 0,
-          "results": []
-      },
+        "count": 1,
+        "results": [
+            {
+                "id": 91,
+                "name": "L_91o2"
+            }
+        ]
+    },
       "survey": {
           "title": "",
           "description": ""
@@ -117,7 +122,14 @@
           }
       ],
       "extra_credentials": [],
-      "credentials": []
+      "credentials": [
+        {
+          "id": 1, "kind": "ssh" , "name": "Credential 1"
+        },
+        {
+          "id": 2, "kind": "awx" , "name": "Credential 2"
+        }
+      ]
   },
   "created": "2019-09-30T16:18:34.564820Z",
   "modified": "2019-10-01T14:47:31.818431Z",
@@ -127,17 +139,17 @@
   "inventory": 1,
   "project": 6,
   "playbook": "ping.yml",
-  "scm_branch": "",
+  "scm_branch": "Foo branch",
   "forks": 0,
   "limit": "",
   "verbosity": 0,
   "extra_vars": "",
-  "job_tags": "",
+  "job_tags": "T_100,T_200",
   "force_handlers": false,
-  "skip_tags": "",
+  "skip_tags": "S_100,S_200",
   "start_at_task": "",
   "timeout": 0,
-  "use_fact_cache": false,
+  "use_fact_cache": true,
   "last_job_run": "2019-10-01T14:34:35.142483Z",
   "last_job_failed": false,
   "next_job_run": null,