Merge pull request #9595 from nixocio/ui_issue_9307

Add copy functionality to EE

Add copy functionality to EE.
See: #9307

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.jsx

@@ -195,6 +195,7 @@ function ExecutionEnvironmentList({ i18n }) {
                 isSelected={selected.some(
                   row => row.id === executionEnvironment.id
                 )}
+                fetchExecutionEnvironments={fetchExecutionEnvironments}
               />
             )}
             emptyStateControls={

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.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';
@@ -8,7 +8,10 @@ import { Tr, Td } from '@patternfly/react-table';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
+import CopyButton from '../../../components/CopyButton';
 import { ExecutionEnvironment } from '../../../types';
+import { ExecutionEnvironmentsAPI } from '../../../api';
+import { timeOfDay } from '../../../util/dates';
 
 function ExecutionEnvironmentListItem({
   executionEnvironment,
@@ -17,7 +20,29 @@ function ExecutionEnvironmentListItem({
   onSelect,
   i18n,
   rowIndex,
+  fetchExecutionEnvironments,
 }) {
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  const copyExecutionEnvironment = useCallback(async () => {
+    await ExecutionEnvironmentsAPI.copy(executionEnvironment.id, {
+      name: `${executionEnvironment.name} @ ${timeOfDay()}`,
+    });
+    await fetchExecutionEnvironments();
+  }, [
+    executionEnvironment.id,
+    executionEnvironment.name,
+    fetchExecutionEnvironments,
+  ]);
+
+  const handleCopyStart = useCallback(() => {
+    setIsDisabled(true);
+  }, []);
+
+  const handleCopyFinish = useCallback(() => {
+    setIsDisabled(false);
+  }, []);
+
   const labelId = `check-action-${executionEnvironment.id}`;
 
   return (
@@ -65,6 +90,19 @@ function ExecutionEnvironmentListItem({
             <PencilAltIcon />
           </Button>
         </ActionItem>
+        <ActionItem
+          visible={executionEnvironment.summary_fields.user_capabilities.copy}
+          tooltip={i18n._(t`Copy Execution Environment`)}
+        >
+          <CopyButton
+            ouiaId={`copy-ee-${executionEnvironment.id}`}
+            isDisabled={isDisabled}
+            onCopyStart={handleCopyStart}
+            onCopyFinish={handleCopyFinish}
+            copyItem={copyExecutionEnvironment}
+            errorMessage={i18n._(t`Failed to copy execution environment`)}
+          />
+        </ActionItem>
       </ActionsTd>
     </Tr>
   );

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.test.jsx

@@ -4,8 +4,15 @@ import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 
 import ExecutionEnvironmentListItem from './ExecutionEnvironmentListItem';
+import { ExecutionEnvironmentsAPI } from '../../../api';
+
+jest.mock('../../../api');
 
 describe('<ExecutionEnvironmentListItem/>', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   let wrapper;
   const executionEnvironment = {
     name: 'Foo',
@@ -13,7 +20,9 @@ describe('<ExecutionEnvironmentListItem/>', () => {
     image: 'https://registry.com/r/image/manifest',
     organization: null,
     credential: null,
-    summary_fields: { user_capabilities: { edit: true } },
+    summary_fields: {
+      user_capabilities: { edit: true, copy: true, delete: true },
+    },
   };
 
   test('should mount successfully', async () => {
@@ -71,4 +80,68 @@ describe('<ExecutionEnvironmentListItem/>', () => {
 
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });
+
+  test('should call api to copy execution environment', async () => {
+    ExecutionEnvironmentsAPI.copy.mockResolvedValue();
+
+    wrapper = mountWithContexts(
+      <table>
+        <tbody>
+          <ExecutionEnvironmentListItem
+            executionEnvironment={executionEnvironment}
+            detailUrl="execution_environments/1/details"
+            isSelected={false}
+            onSelect={() => {}}
+          />
+        </tbody>
+      </table>
+    );
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
+    );
+    expect(ExecutionEnvironmentsAPI.copy).toHaveBeenCalled();
+  });
+
+  test('should render proper alert modal on copy error', async () => {
+    ExecutionEnvironmentsAPI.copy.mockRejectedValue(new Error());
+
+    wrapper = mountWithContexts(
+      <table>
+        <tbody>
+          <ExecutionEnvironmentListItem
+            executionEnvironment={executionEnvironment}
+            detailUrl="execution_environments/1/details"
+            isSelected={false}
+            onSelect={() => {}}
+          />
+        </tbody>
+      </table>
+    );
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(wrapper.find('Modal').prop('isOpen')).toBe(true);
+  });
+
+  test('should not render copy button', async () => {
+    wrapper = mountWithContexts(
+      <table>
+        <tbody>
+          <ExecutionEnvironmentListItem
+            executionEnvironment={{
+              ...executionEnvironment,
+              summary_fields: { user_capabilities: { copy: false } },
+            }}
+            detailUrl="execution_environments/1/details"
+            isSelected={false}
+            onSelect={() => {}}
+          />
+        </tbody>
+      </table>
+    );
+    expect(wrapper.find('CopyButton').length).toBe(0);
+  });
 });