Merge pull request #6846 from AlexSCorey/4969-Copy

Copy Feature for Templates and Credentials

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

awx/ui_next/src/api/Base.js

@@ -45,6 +45,10 @@ class Base {
   update(id, data) {
     return this.http.patch(`${this.baseUrl}${id}/`, data);
   }
+
+  copy(id, data) {
+    return this.http.post(`${this.baseUrl}${id}/copy/`, data);
+  }
 }
 
 export default Base;

awx/ui_next/src/components/CopyButton/CopyButton.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect } 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 { CopyIcon } from '@patternfly/react-icons';
+import useRequest, { useDismissableError } from '@util/useRequest';
+import AlertModal from '@components/AlertModal';
+import ErrorDetail from '@components/ErrorDetail';
+
+function CopyButton({ i18n, copyItem, onLoading, onDoneLoading, helperText }) {
+  const { isLoading, error: copyError, request: copyItemToAPI } = useRequest(
+    copyItem
+  );
+
+  useEffect(() => {
+    if (isLoading) {
+      return onLoading();
+    }
+    return onDoneLoading();
+  }, [isLoading, onLoading, onDoneLoading]);
+
+  const { error, dismissError } = useDismissableError(copyError);
+
+  return (
+    <>
+      <Tooltip content={helperText.tooltip} position="top">
+        <Button
+          aria-label={i18n._(t`Copy`)}
+          variant="plain"
+          onClick={copyItemToAPI}
+        >
+          <CopyIcon />
+        </Button>
+      </Tooltip>
+      <AlertModal
+        aria-label={i18n._(t`Copy Error`)}
+        isOpen={error}
+        variant="error"
+        title={i18n._(t`Error!`)}
+        onClose={dismissError}
+      >
+        {helperText.errorMessage}
+        <ErrorDetail error={error} />
+      </AlertModal>
+    </>
+  );
+}
+
+CopyButton.propTypes = {
+  copyItem: PropTypes.func.isRequired,
+  onLoading: PropTypes.func.isRequired,
+  onDoneLoading: PropTypes.func.isRequired,
+  helperText: PropTypes.shape({
+    tooltip: PropTypes.string.isRequired,
+    errorMessage: PropTypes.string.isRequired,
+  }).isRequired,
+};
+export default withI18n()(CopyButton);

awx/ui_next/src/components/CopyButton/CopyButton.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import CopyButton from './CopyButton';
+
+jest.mock('@api');
+
+describe('<CopyButton/>', () => {
+  test('shold mount properly', () => {
+    const wrapper = mountWithContexts(
+      <CopyButton
+        onLoading={() => {}}
+        onDoneLoading={() => {}}
+        copyItem={() => {}}
+        helperText={{
+          tooltip: `Copy Template`,
+          errorMessage: `Failed to copy template.`,
+        }}
+      />
+    );
+    expect(wrapper.find('CopyButton').length).toBe(1);
+  });
+  test('should render proper tooltip', () => {
+    const wrapper = mountWithContexts(
+      <CopyButton
+        onLoading={() => {}}
+        onDoneLoading={() => {}}
+        copyItem={() => {}}
+        helperText={{
+          tooltip: `Copy Template`,
+          errorMessage: `Failed to copy template.`,
+        }}
+      />
+    );
+    expect(wrapper.find('Tooltip').prop('content')).toBe('Copy Template');
+  });
+});

awx/ui_next/src/components/CopyButton/index.js

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

awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx

@@ -106,6 +106,7 @@ function CredentialList({ i18n }) {
             <CredentialListItem
               key={item.id}
               credential={item}
+              fetchCredentials={fetchCredentials}
               detailUrl={`/credentials/${item.id}/details`}
               isSelected={selected.some(row => row.id === item.id)}
               onSelect={() => handleSelect(item)}
@@ -134,6 +135,7 @@ function CredentialList({ i18n }) {
         />
       </Card>
       <AlertModal
+        aria-label={i18n._(t`Deletion Error`)}
         isOpen={deletionError}
         variant="error"
         title={i18n._(t`Error!`)}

awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx

@@ -128,7 +128,7 @@ describe('<CredentialList />', () => {
     });
     await waitForElement(
       wrapper,
-      'Modal',
+      'Modal[aria-label="Deletion Error"]',
       el => el.props().isOpen === true && el.props().title === 'Error!'
     );
     await act(async () => {

awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -13,16 +13,19 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import DataListCell from '@components/DataListCell';
+import { timeOfDay } from '@util/dates';
 
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { Credential } from '@types';
+import { CredentialsAPI } from '@api';
 import styled from 'styled-components';
+import CopyButton from '@components/CopyButton';
 
 const DataListAction = styled(_DataListAction)`
   align-items: center;
   display: grid;
   grid-gap: 16px;
-  grid-template-columns: 40px;
+  grid-template-columns: repeat(2, 40px);
 `;
 
 function CredentialListItem({
@@ -31,10 +34,20 @@ function CredentialListItem({
   isSelected,
   onSelect,
   i18n,
+  fetchCredentials,
 }) {
+  const [isDisabled, setIsDisabled] = useState(false);
+
   const labelId = `check-action-${credential.id}`;
   const canEdit = credential.summary_fields.user_capabilities.edit;
 
+  const copyCredential = useCallback(async () => {
+    await CredentialsAPI.copy(credential.id, {
+      name: `${credential.name} @ ${timeOfDay()}`,
+    });
+    await fetchCredentials();
+  }, [credential.id, credential.name, fetchCredentials]);
+
   return (
     <DataListItem
       key={credential.id}
@@ -43,6 +56,7 @@ function CredentialListItem({
     >
       <DataListItemRow>
         <DataListCheck
+          isDisabled={isDisabled}
           id={`select-credential-${credential.id}`}
           checked={isSelected}
           onChange={onSelect}
@@ -65,9 +79,10 @@ function CredentialListItem({
           aria-labelledby={labelId}
           id={labelId}
         >
-          {canEdit ? (
+          {canEdit && (
             <Tooltip content={i18n._(t`Edit Credential`)} position="top">
               <Button
+                isDisabled={isDisabled}
                 aria-label={i18n._(t`Edit Credential`)}
                 variant="plain"
                 component={Link}
@@ -76,8 +91,18 @@ function CredentialListItem({
                 <PencilAltIcon />
               </Button>
             </Tooltip>
-          ) : (
-            ''
+          )}
+          {credential.summary_fields.user_capabilities.copy && (
+            <CopyButton
+              isDisabled={isDisabled}
+              onLoading={() => setIsDisabled(true)}
+              onDoneLoading={() => setIsDisabled(false)}
+              copyItem={copyCredential}
+              helperText={{
+                tooltip: i18n._(t`Copy Credential`),
+                errorMessage: i18n._(t`Failed to copy credential.`),
+              }}
+            />
           )}
         </DataListAction>
       </DataListItemRow>

awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.test.jsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import { CredentialListItem } from '.';
+import { act } from 'react-dom/test-utils';
 import { mockCredentials } from '../shared';
+import { CredentialsAPI } from '@api';
+
+jest.mock('@api');
 
 describe('<CredentialListItem />', () => {
   let wrapper;
@@ -33,4 +37,53 @@ describe('<CredentialListItem />', () => {
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
+  test('should call api to copy template', async () => {
+    CredentialsAPI.copy.mockResolvedValue();
+
+    wrapper = mountWithContexts(
+      <CredentialListItem
+        isSelected={false}
+        detailUrl="/foo/bar"
+        credential={mockCredentials.results[0]}
+        onSelect={() => {}}
+      />
+    );
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
+    );
+    expect(CredentialsAPI.copy).toHaveBeenCalled();
+    jest.clearAllMocks();
+  });
+
+  test('should render proper alert modal on copy error', async () => {
+    CredentialsAPI.copy.mockRejectedValue(new Error());
+
+    wrapper = mountWithContexts(
+      <CredentialListItem
+        isSelected={false}
+        detailUrl="/foo/bar"
+        onSelect={() => {}}
+        credential={mockCredentials.results[0]}
+      />
+    );
+    await act(async () =>
+      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(wrapper.find('Modal').prop('isOpen')).toBe(true);
+    jest.clearAllMocks();
+  });
+
+  test('should not render copy button', async () => {
+    wrapper = mountWithContexts(
+      <CredentialListItem
+        isSelected={false}
+        detailUrl="/foo/bar"
+        onSelect={() => {}}
+        credential={mockCredentials.results[1]}
+      />
+    );
+    expect(wrapper.find('CopyButton').length).toBe(0);
+  });
 });

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

@@ -227,12 +227,14 @@ function TemplateList({ i18n }) {
               detailUrl={`/templates/${template.type}/${template.id}`}
               onSelect={() => handleSelect(template)}
               isSelected={selected.some(row => row.id === template.id)}
+              fetchTemplates={fetchTemplates}
             />
           )}
           emptyStateControls={(canAddJT || canAddWFJT) && addButton}
         />
       </Card>
       <AlertModal
+        aria-label={i18n._(t`Deletion Error`)}
         isOpen={deletionError}
         variant="error"
         title={i18n._(t`Error!`)}

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

@@ -20,6 +20,8 @@ const mockTemplates = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        edit: true,
+        copy: true,
       },
     },
   },
@@ -300,10 +302,24 @@ describe('<TemplateList />', () => {
         .find('button[aria-label="confirm delete"]')
         .prop('onClick')();
     });
+
     await waitForElement(
       wrapper,
-      'Modal',
+      'Modal[aria-label="Deletion Error"]',
       el => el.props().isOpen === true && el.props().title === 'Error!'
     );
   });
+  test('should properly copy template', async () => {
+    JobTemplatesAPI.copy.mockResolvedValue({});
+    const wrapper = mountWithContexts(<TemplateList />);
+    await act(async () => {
+      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    });
+    await act(async () =>
+      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
+    );
+    expect(JobTemplatesAPI.copy).toHaveBeenCalled();
+    expect(UnifiedJobTemplatesAPI.read).toHaveBeenCalled();
+    wrapper.update();
+  });
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import {
   Button,
@@ -18,33 +18,58 @@ import {
   PencilAltIcon,
   RocketIcon,
 } from '@patternfly/react-icons';
+import { timeOfDay } from '@util/dates';
 
+import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '@api';
 import LaunchButton from '@components/LaunchButton';
 import Sparkline from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 import styled from 'styled-components';
+import CopyButton from '@components/CopyButton';
 
 const DataListAction = styled(_DataListAction)`
   align-items: center;
   display: grid;
   grid-gap: 16px;
-  grid-template-columns: repeat(2, 40px);
+  grid-template-columns: repeat(3, 40px);
 `;
 
-function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
+function TemplateListItem({
+  i18n,
+  template,
+  isSelected,
+  onSelect,
+  detailUrl,
+  fetchTemplates,
+}) {
+  const [isDisabled, setIsDisabled] = useState(false);
+
   const labelId = `check-action-${template.id}`;
   const canLaunch = template.summary_fields.user_capabilities.start;
 
+  const copyTemplate = useCallback(async () => {
+    if (template.type === 'job_template') {
+      await JobTemplatesAPI.copy(template.id, {
+        name: `${template.name} @ ${timeOfDay()}`,
+      });
+    } else {
+      await WorkflowJobTemplatesAPI.copy(template.id, {
+        name: `${template.name} @ ${timeOfDay()}`,
+      });
+    }
+    await fetchTemplates();
+  }, [fetchTemplates, template.id, template.name, template.type]);
+
   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
+          isDisabled={isDisabled}
           id={`select-jobTemplate-${template.id}`}
           checked={isSelected}
           onChange={onSelect}
@@ -89,6 +114,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
               <LaunchButton resource={template}>
                 {({ handleLaunch }) => (
                   <Button
+                    isDisabled={isDisabled}
                     aria-label={i18n._(t`Launch template`)}
                     css="grid-column: 1"
                     variant="plain"
@@ -100,9 +126,10 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
               </LaunchButton>
             </Tooltip>
           )}
-          {template.summary_fields.user_capabilities.edit ? (
+          {template.summary_fields.user_capabilities.edit && (
             <Tooltip content={i18n._(t`Edit Template`)} position="top">
               <Button
+                isDisabled={isDisabled}
                 aria-label={i18n._(t`Edit Template`)}
                 css="grid-column: 2"
                 variant="plain"
@@ -112,8 +139,18 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
                 <PencilAltIcon />
               </Button>
             </Tooltip>
-          ) : (
-            ''
+          )}
+          {template.summary_fields.user_capabilities.copy && (
+            <CopyButton
+              helperText={{
+                tooltip: i18n._(t`Copy Template`),
+                errorMessage: i18n._(t`Failed to copy template.`),
+              }}
+              isDisabled={isDisabled}
+              onLoading={() => setIsDisabled(true)}
+              onDoneLoading={() => setIsDisabled(false)}
+              copyItem={copyTemplate}
+            />
           )}
         </DataListAction>
       </DataListItemRow>

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

@@ -2,8 +2,13 @@ import React from 'react';
 
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import { createMemoryHistory } from 'history';
+import { JobTemplatesAPI } from '@api';
+import { act } from 'react-dom/test-utils';
+import mockJobTemplateData from '../shared/data.job_template.json';
 import TemplateListItem from './TemplateListItem';
 
+jest.mock('@api');
+
 describe('<TemplateListItem />', () => {
   test('launch button shown to users with start capabilities', () => {
     const wrapper = mountWithContexts(
@@ -186,4 +191,52 @@ describe('<TemplateListItem />', () => {
       '/templates/job_template/1/details'
     );
   });
+  test('should call api to copy template', async () => {
+    JobTemplatesAPI.copy.mockResolvedValue();
+
+    const wrapper = mountWithContexts(
+      <TemplateListItem
+        isSelected={false}
+        detailUrl="/templates/job_template/1/details"
+        template={mockJobTemplateData}
+      />
+    );
+    await act(async () =>
+      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
+    );
+    expect(JobTemplatesAPI.copy).toHaveBeenCalled();
+    jest.clearAllMocks();
+  });
+
+  test('should render proper alert modal on copy error', async () => {
+    JobTemplatesAPI.copy.mockRejectedValue(new Error());
+
+    const wrapper = mountWithContexts(
+      <TemplateListItem
+        isSelected={false}
+        detailUrl="/templates/job_template/1/details"
+        template={mockJobTemplateData}
+      />
+    );
+    await act(async () =>
+      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(wrapper.find('Modal').prop('isOpen')).toBe(true);
+    jest.clearAllMocks();
+  });
+
+  test('should not render copy button', async () => {
+    const wrapper = mountWithContexts(
+      <TemplateListItem
+        isSelected={false}
+        detailUrl="/templates/job_template/1/details"
+        template={{
+          ...mockJobTemplateData,
+          summary_fields: { user_capabilities: { copy: false } },
+        }}
+      />
+    );
+    expect(wrapper.find('CopyButton').length).toBe(0);
+  });
 });

awx/ui_next/src/util/dates.jsx

@@ -17,6 +17,18 @@ export function secondsToHHMMSS(seconds) {
   return new Date(seconds * 1000).toISOString().substr(11, 8);
 }
 
+export function timeOfDay() {
+  const date = new Date();
+  const hour = date.getHours();
+  const minute = prependZeros(date.getMinutes());
+  const second = prependZeros(date.getSeconds());
+  const time =
+    hour > 12
+      ? `${hour - 12}:${minute} :${second} PM`
+      : `${hour}:${minute}:${second}`;
+  return time;
+}
+
 export function dateToInputDateTime(dateObj) {
   // input type="date-time" expects values to be formatted
   // like: YYYY-MM-DDTHH-MM-SS