Adds Copy Button to Inventory List and Project List

2026-05-24 09:07:45 -02:30 · 2020-05-06 14:00:47 -04:00
parent 3aa6e8a457
commit d566b465aa
7 changed files with 435 additions and 176 deletions
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
@@ -167,6 +167,7 @@ function InventoryList({ i18n }) {
              key={inventory.id}
              value={inventory.name}
              inventory={inventory}
+              fetchInventories={fetchInventories}
              detailUrl={
                inventory.kind === 'smart'
                  ? `${match.url}/smart_inventory/${inventory.id}/details`
@@ -182,6 +183,7 @@ function InventoryList({ i18n }) {
      <AlertModal
        isOpen={deletionError}
        variant="error"
+        aria-label={i18n._(t`Deletion Error`)}
        title={i18n._(t`Error!`)}
        onClose={clearDeletionError}
      >
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.test.jsx
@@ -279,7 +279,7 @@ describe('<InventoryList />', () => {
    });
    wrapper.update();

-    const modal = wrapper.find('Modal');
+    const modal = wrapper.find('Modal[aria-label="Deletion Error"]');
    expect(modal).toHaveLength(1);
    expect(modal.prop('title')).toEqual('Error!');
  });
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.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 {
@@ -16,26 +16,41 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { PencilAltIcon } from '@patternfly/react-icons';
-
+import { timeOfDay } from '@util/dates';
+import { InventoriesAPI } from '@api';
 import { Inventory } from '@types';
+import CopyButton from '../../../components/CopyButton/CopyButton';

 const DataListAction = styled(_DataListAction)`
  align-items: center;
  display: grid;
  grid-gap: 16px;
-  grid-template-columns: 40px;
+  grid-template-columns: repeat(2, 40px);
 `;

-class InventoryListItem extends React.Component {
-  static propTypes = {
+function InventoryListItem({
+  inventory,
+  isSelected,
+  onSelect,
+  detailUrl,
+  i18n,
+  fetchInventories,
+}) {
+  InventoryListItem.propTypes = {
    inventory: Inventory.isRequired,
    detailUrl: string.isRequired,
    isSelected: bool.isRequired,
    onSelect: func.isRequired,
  };
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  const copyInventory = useCallback(async () => {
+    await InventoriesAPI.copy(inventory.id, {
+      name: `${inventory.name} @ ${timeOfDay()}`,
+    });
+    await fetchInventories();
+  }, [inventory.id, inventory.name, fetchInventories]);

-  render() {
-    const { inventory, isSelected, onSelect, detailUrl, i18n } = this.props;
  const labelId = `check-action-${inventory.id}`;
  return (
    <DataListItem
@@ -72,6 +87,7 @@ class InventoryListItem extends React.Component {
          {inventory.summary_fields.user_capabilities.edit ? (
            <Tooltip content={i18n._(t`Edit Inventory`)} position="top">
              <Button
+                isDisabled={isDisabled}
                aria-label={i18n._(t`Edit Inventory`)}
                variant="plain"
                component={Link}
@@ -85,10 +101,21 @@ class InventoryListItem extends React.Component {
          ) : (
            ''
          )}
+          {inventory.summary_fields.user_capabilities.copy && (
+            <CopyButton
+              copyItem={copyInventory}
+              isDisabled={isDisabled}
+              onLoading={() => setIsDisabled(true)}
+              onDoneLoading={() => setIsDisabled(false)}
+              helperText={{
+                tooltip: i18n._(t`Copy Inventory`),
+                errorMessage: i18n._(t`Failed to copy inventory.`),
+              }}
+            />
+          )}
        </DataListAction>
      </DataListItemRow>
    </DataListItem>
  );
 }
-}
 export default withI18n()(InventoryListItem);
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.test.jsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
+import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { InventoriesAPI } from '@api';
 import InventoryListItem from './InventoryListItem';

+jest.mock('@api/models/Inventories');
+
 describe('<InventoryListItem />', () => {
  test('initially renders succesfully', () => {
    mountWithContexts(
@@ -85,4 +89,104 @@ describe('<InventoryListItem />', () => {
    );
    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
  });
+  test('should call api to copy inventory', async () => {
+    InventoriesAPI.copy.mockResolvedValue();
+
+    const wrapper = mountWithContexts(
+      <I18nProvider>
+        <MemoryRouter initialEntries={['/inventories']} initialIndex={0}>
+          <InventoryListItem
+            inventory={{
+              id: 1,
+              name: 'Inventory',
+              summary_fields: {
+                organization: {
+                  id: 1,
+                  name: 'Default',
+                },
+                user_capabilities: {
+                  edit: false,
+                  copy: true,
+                },
+              },
+            }}
+            detailUrl="/inventories/inventory/1"
+            isSelected
+            onSelect={() => {}}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
+    );
+    expect(InventoriesAPI.copy).toHaveBeenCalled();
+    jest.clearAllMocks();
+  });
+
+  test('should render proper alert modal on copy error', async () => {
+    InventoriesAPI.copy.mockRejectedValue(new Error());
+
+    const wrapper = mountWithContexts(
+      <I18nProvider>
+        <MemoryRouter initialEntries={['/inventories']} initialIndex={0}>
+          <InventoryListItem
+            inventory={{
+              id: 1,
+              name: 'Inventory',
+              summary_fields: {
+                organization: {
+                  id: 1,
+                  name: 'Default',
+                },
+                user_capabilities: {
+                  edit: false,
+                  copy: true,
+                },
+              },
+            }}
+            detailUrl="/inventories/inventory/1"
+            isSelected
+            onSelect={() => {}}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+    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(
+      <I18nProvider>
+        <MemoryRouter initialEntries={['/inventories']} initialIndex={0}>
+          <InventoryListItem
+            inventory={{
+              id: 1,
+              name: 'Inventory',
+              summary_fields: {
+                organization: {
+                  id: 1,
+                  name: 'Default',
+                },
+                user_capabilities: {
+                  edit: false,
+                  copy: false,
+                },
+              },
+            }}
+            detailUrl="/inventories/inventory/1"
+            isSelected
+            onSelect={() => {}}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+    expect(wrapper.find('CopyButton').length).toBe(0);
+  });
 });
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
@@ -170,6 +170,7 @@ function ProjectList({ i18n }) {
            )}
            renderItem={o => (
              <ProjectListItem
+                fetchProjects={fetchProjects}
                key={o.id}
                project={o}
                detailUrl={`${match.url}/${o.id}`}
@@ -188,6 +189,7 @@ function ProjectList({ i18n }) {
      <AlertModal
        isOpen={deletionError}
        variant="error"
+        aria-label={i18n._(t`Deletion Error`)}
        title={i18n._(t`Error!`)}
        onClose={clearDeletionError}
      >
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState, useCallback } from 'react';
 import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
@@ -16,35 +16,45 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
-
+import { timeOfDay } from '@util/dates';
+import { ProjectsAPI } from '@api';
 import ClipboardCopyButton from '@components/ClipboardCopyButton';
-import ProjectSyncButton from '../shared/ProjectSyncButton';
 import StatusIcon from '@components/StatusIcon';
 import { toTitleCase } from '@util/strings';
+import CopyButton from '@components/CopyButton';
+import ProjectSyncButton from '../shared/ProjectSyncButton';
 import { Project } from '@types';

 const DataListAction = styled(_DataListAction)`
  align-items: center;
  display: grid;
  grid-gap: 16px;
-  grid-template-columns: repeat(2, 40px);
+  grid-template-columns: repeat(3, 40px);
 `;
-class ProjectListItem extends React.Component {
-  static propTypes = {
+function ProjectListItem({
+  project,
+  isSelected,
+  onSelect,
+  detailUrl,
+  i18n,
+  fetchProjects,
+}) {
+  const [isDisabled, setIsDisabled] = useState(false);
+  ProjectListItem.propTypes = {
    project: Project.isRequired,
    detailUrl: string.isRequired,
    isSelected: bool.isRequired,
    onSelect: func.isRequired,
  };

-  constructor(props) {
-    super(props);
+  const copyProject = useCallback(async () => {
+    await ProjectsAPI.copy(project.id, {
+      name: `${project.name} @ ${timeOfDay()}`,
+    });
+    await fetchProjects();
+  }, [project.id, project.name, fetchProjects]);

-    this.generateLastJobTooltip = this.generateLastJobTooltip.bind(this);
-  }
-
-  generateLastJobTooltip = job => {
-    const { i18n } = this.props;
+  const generateLastJobTooltip = job => {
    return (
      <Fragment>
        <div>{i18n._(t`MOST RECENT SYNC`)}</div>
@@ -63,8 +73,6 @@ class ProjectListItem extends React.Component {
    );
  };

-  render() {
-    const { project, isSelected, onSelect, detailUrl, i18n } = this.props;
  const labelId = `check-action-${project.id}`;
  return (
    <DataListItem
@@ -85,7 +93,7 @@ class ProjectListItem extends React.Component {
              {project.summary_fields.last_job && (
                <Tooltip
                  position="top"
-                    content={this.generateLastJobTooltip(
+                  content={generateLastJobTooltip(
                    project.summary_fields.last_job
                  )}
                  key={project.summary_fields.last_job.id}
@@ -132,8 +140,8 @@ class ProjectListItem extends React.Component {
              <ProjectSyncButton projectId={project.id}>
                {handleSync => (
                  <Button
+                    isDisabled={isDisabled}
                    aria-label={i18n._(t`Sync Project`)}
-                      css="grid-column: 1"
                    variant="plain"
                    onClick={handleSync}
                  >
@@ -148,8 +156,8 @@ class ProjectListItem extends React.Component {
          {project.summary_fields.user_capabilities.edit ? (
            <Tooltip content={i18n._(t`Edit Project`)} position="top">
              <Button
+                isDisabled={isDisabled}
                aria-label={i18n._(t`Edit Project`)}
-                  css="grid-column: 2"
                variant="plain"
                component={Link}
                to={`/projects/${project.id}/edit`}
@@ -160,10 +168,21 @@ class ProjectListItem extends React.Component {
          ) : (
            ''
          )}
+          {project.summary_fields.user_capabilities.copy && (
+            <CopyButton
+              copyItem={copyProject}
+              isDisabled={isDisabled}
+              onLoading={() => setIsDisabled(true)}
+              onDoneLoading={() => setIsDisabled(false)}
+              helperText={{
+                tooltip: i18n._(t`Copy Project`),
+                errorMessage: i18n._(t`Failed to copy project.`),
+              }}
+            />
+          )}
        </DataListAction>
      </DataListItemRow>
    </DataListItem>
  );
 }
-}
 export default withI18n()(ProjectListItem);
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.test.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.test.jsx
@@ -1,8 +1,11 @@
 import React from 'react';

 import { mountWithContexts } from '@testUtils/enzymeHelpers';
-
+import { act } from 'react-dom/test-utils';
 import ProjectsListItem from './ProjectListItem';
+import { ProjectsAPI } from '@api';
+
+jest.mock('@api/models/Projects');

 describe('<ProjectsListItem />', () => {
  test('launch button shown to users with start capabilities', () => {
@@ -32,6 +35,7 @@ describe('<ProjectsListItem />', () => {
    );
    expect(wrapper.find('ProjectSyncButton').exists()).toBeTruthy();
  });
+
  test('launch button hidden from users without start capabilities', () => {
    const wrapper = mountWithContexts(
      <ProjectsListItem
@@ -59,6 +63,7 @@ describe('<ProjectsListItem />', () => {
    );
    expect(wrapper.find('ProjectSyncButton').exists()).toBeFalsy();
  });
+
  test('edit button shown to users with edit capabilities', () => {
    const wrapper = mountWithContexts(
      <ProjectsListItem
@@ -86,6 +91,7 @@ describe('<ProjectsListItem />', () => {
    );
    expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
  });
+
  test('edit button hidden from users without edit capabilities', () => {
    const wrapper = mountWithContexts(
      <ProjectsListItem
@@ -113,4 +119,103 @@ describe('<ProjectsListItem />', () => {
    );
    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
  });
+
+  test('should call api to copy project', async () => {
+    ProjectsAPI.copy.mockResolvedValue();
+    const wrapper = mountWithContexts(
+      <ProjectsListItem
+        isSelected={false}
+        detailUrl="/project/1"
+        onSelect={() => {}}
+        project={{
+          id: 1,
+          name: 'Project 1',
+          url: '/api/v2/projects/1',
+          type: 'project',
+          scm_type: 'git',
+          scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
+          summary_fields: {
+            last_job: {
+              id: 9000,
+              status: 'successful',
+            },
+            user_capabilities: {
+              edit: false,
+              copy: true,
+            },
+          },
+        }}
+      />
+    );
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
+    );
+    expect(ProjectsAPI.copy).toHaveBeenCalled();
+    jest.clearAllMocks();
+  });
+
+  test('should render proper alert modal on copy error', async () => {
+    ProjectsAPI.copy.mockRejectedValue(new Error());
+
+    const wrapper = mountWithContexts(
+      <ProjectsListItem
+        isSelected={false}
+        detailUrl="/project/1"
+        onSelect={() => {}}
+        project={{
+          id: 1,
+          name: 'Project 1',
+          url: '/api/v2/projects/1',
+          type: 'project',
+          scm_type: 'git',
+          scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
+          summary_fields: {
+            last_job: {
+              id: 9000,
+              status: 'successful',
+            },
+            user_capabilities: {
+              edit: false,
+              copy: true,
+            },
+          },
+        }}
+      />
+    );
+    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(
+      <ProjectsListItem
+        isSelected={false}
+        detailUrl="/foo/bar"
+        onSelect={() => {}}
+        project={{
+          id: 1,
+          name: 'Project 1',
+          url: '/api/v2/projects/1',
+          type: 'project',
+          scm_type: 'git',
+          scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
+          summary_fields: {
+            last_job: {
+              id: 9000,
+              status: 'successful',
+            },
+            user_capabilities: {
+              edit: false,
+              copy: false,
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('CopyButton').length).toBe(0);
+  });
 });