UIORGS-441 Add Duplicate integration action to organization integration view

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Show in version history record view, which fields have been edited. Refs UIORGS-356.
 * Adapt organization metadata fields to version history mechanism. Refs UIORGS-359.
 * Add claiming to organization integration details. Refs UIORGS-442.
+* Add "Duplicate" integration action to organization integration view. Refs UIORGS-441.
 
 ## [5.2.0](https://github.com/folio-org/ui-organizations/tree/v5.2.0) (2024-10-31)
 [Full Changelog](https://github.com/folio-org/ui-organizations/compare/v5.1.1...v5.2.0)

src/OrganizationIntegration/OrganizationIntegrationView/OrganizationIntegrationView.js

@@ -1,7 +1,21 @@
-import React, { useCallback, useRef } from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import omit from 'lodash/omit';
+import set from 'lodash/set';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { useHistory, useParams, useLocation } from 'react-router';
+import {
+  useCallback,
+  useRef,
+} from 'react';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
+import {
+  useHistory,
+  useParams,
+  useLocation,
+} from 'react-router-dom';
 
 import { AppIcon } from '@folio/stripes/core';
 import {
@@ -34,24 +48,32 @@ import {
   useIntegrationConfig,
   useIntegrationConfigMutation,
 } from '../../common/hooks';
-import { isClaimingIntegration } from '../utils';
+import {
+  getDuplicateTimestamp,
+  isClaimingIntegration,
+} from '../utils';
 import { IntegrationInfoView } from './IntegrationInfoView';
 import { EdiView } from './EdiView';
 import { FtpView } from './FtpView';
 import { SchedulingView } from './SchedulingView';
 
+const CONFIG_NAME_PATH = 'exportTypeSpecificParameters.vendorEdiOrdersExportConfig.configName';
+
 const OrganizationIntegrationView = ({ orgId }) => {
+  const intl = useIntl();
   const history = useHistory();
   const location = useLocation();
   const accordionStatusRef = useRef();
   const { id } = useParams();
   const showCallout = useShowCallout();
 
+  const [isDuplicateConfirmation, toggleDuplicateConfirmation] = useModalToggle();
   const [isRemoveConfirmation, toggleRemoveConfirmation] = useModalToggle();
 
   const { integrationConfig, isLoading } = useIntegrationConfig(id);
   const { acqMethods, isLoading: isAcqMethodsLoading } = useAcqMethods();
 
+  const configName = get(integrationConfig, CONFIG_NAME_PATH);
   const isClaimingType = isClaimingIntegration(integrationConfig);
 
   const onEdit = useCallback(
@@ -74,6 +96,10 @@ const OrganizationIntegrationView = ({ orgId }) => {
     [history, location.search, orgId],
   );
 
+  const {
+    mutateIntegrationConfig: createIntegrationConfig,
+  } = useIntegrationConfigMutation({ method: 'post' });
+
   const { mutateIntegrationConfig } = useIntegrationConfigMutation({
     method: 'delete',
     onSuccess: () => {
@@ -90,6 +116,50 @@ const OrganizationIntegrationView = ({ orgId }) => {
     },
   });
 
+  const onDuplicate = useCallback(async () => {
+    toggleDuplicateConfirmation();
+
+    const integrationConfigCloned = omit(cloneDeep(integrationConfig), 'id');
+    const configNameCloned = `${configName} (${getDuplicateTimestamp({ intl })})`;
+
+    set(
+      integrationConfigCloned,
+      CONFIG_NAME_PATH,
+      intl.formatMessage(
+        { id: 'ui-organizations.integrationDetails.duplicate.name' },
+        { term: configNameCloned },
+      ),
+    );
+
+    try {
+      await createIntegrationConfig(integrationConfigCloned);
+
+      showCallout({
+        messageId: 'ui-organizations.integrationDetails.duplicate.success',
+        values: { term: configNameCloned },
+      });
+      history.push({
+        pathname: `/organizations/view/${orgId}`,
+        search: location.search,
+      });
+    } catch {
+      showCallout({
+        messageId: 'ui-organizations.integrationDetails.duplicate.error',
+        type: 'error',
+      });
+    }
+  }, [
+    configName,
+    createIntegrationConfig,
+    history,
+    integrationConfig,
+    intl,
+    location.search,
+    orgId,
+    showCallout,
+    toggleDuplicateConfirmation,
+  ]);
+
   const onRemove = useCallback(
     () => mutateIntegrationConfig(integrationConfig),
     [integrationConfig, mutateIntegrationConfig],
@@ -111,6 +181,22 @@ const OrganizationIntegrationView = ({ orgId }) => {
         </Icon>
       </Button>
 
+      <Button
+        buttonStyle="dropdownItem"
+        data-testid="duplicate-integration-action"
+        onClick={() => {
+          onToggle();
+          toggleDuplicateConfirmation();
+        }}
+      >
+        <Icon
+          size="small"
+          icon="duplicate"
+        >
+          <FormattedMessage id="ui-organizations.view.duplicate" />
+        </Icon>
+      </Button>
+
       <Button
         buttonStyle="dropdownItem"
         data-testid="remove-integration-action"
@@ -176,7 +262,7 @@ const OrganizationIntegrationView = ({ orgId }) => {
         dismissible
         id="integration-view"
         onClose={onClose}
-        paneTitle={integrationConfig.exportTypeSpecificParameters?.vendorEdiOrdersExportConfig?.configName}
+        paneTitle={configName}
       >
         <Row>
           <Col
@@ -223,6 +309,23 @@ const OrganizationIntegrationView = ({ orgId }) => {
           </Col>
         </Row>
 
+        {isDuplicateConfirmation && (
+          <ConfirmationModal
+            id="duplicate-integration-modal"
+            confirmLabel={<FormattedMessage id="ui-organizations.integration.confirmation.confirm" />}
+            heading={<FormattedMessage id="ui-organizations.integrationDetails.duplicate.confirmModal.heading" />}
+            message={(
+              <FormattedMessage
+                id="ui-organizations.integrationDetails.duplicate.confirmModal.message"
+                values={{ term: configName }}
+              />
+            )}
+            onCancel={toggleDuplicateConfirmation}
+            onConfirm={onDuplicate}
+            open
+          />
+        )}
+
         {isRemoveConfirmation && (
           <ConfirmationModal
             id="integration-remove-confirmation"

src/OrganizationIntegration/OrganizationIntegrationView/OrganizationIntegrationView.test.js

@@ -1,9 +1,15 @@
-import React from 'react';
-import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
+import {
+  MemoryRouter,
+  useHistory,
+  useParams,
+} from 'react-router-dom';
+
+import {
+  render,
+  screen,
+} from '@folio/jest-config-stripes/testing-library/react';
 import { queryHelpers } from '@folio/jest-config-stripes/testing-library/dom';
 import user from '@folio/jest-config-stripes/testing-library/user-event';
-import { MemoryRouter } from 'react-router-dom';
-import { useHistory, useParams } from 'react-router';
 
 import {
   HasCommand,
@@ -20,8 +26,10 @@ import {
 } from '../../common/hooks';
 import OrganizationIntegrationView from './OrganizationIntegrationView';
 
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
+import { getDuplicateTimestamp } from '../utils';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useHistory: jest.fn(),
   useParams: jest.fn(),
 }));
@@ -43,6 +51,10 @@ jest.mock('../../common/hooks', () => ({
   useIntegrationConfig: jest.fn(),
   useIntegrationConfigMutation: jest.fn().mockReturnValue({ mutateIntegrationConfig: jest.fn() }),
 }));
+jest.mock('../utils', () => ({
+  ...jest.requireActual('../utils'),
+  getDuplicateTimestamp: jest.fn(),
+}));
 
 const queryAllByClass = queryHelpers.queryAllByAttribute.bind(null, 'class');
 
@@ -54,19 +66,23 @@ const renderOrganizationIntegrationView = (props = defaultProps) => render(
 );
 
 describe('OrganizationIntegrationView', () => {
+  const mutateIntegrationConfig = jest.fn();
+
   beforeEach(() => {
+    getDuplicateTimestamp.mockReturnValue('01/01/2025');
     global.document.createRange = global.document.originalCreateRange;
 
-    useParams.mockClear().mockReturnValue({ id: integrationConfig.id });
-    useOrganization.mockClear().mockReturnValue({
+    useParams.mockReturnValue({ id: integrationConfig.id });
+    useOrganization.mockReturnValue({
       organization: { id: defaultProps.orgId, accounts: [] },
       isLoading: false,
     });
-    useIntegrationConfigMutation.mockClear().mockReturnValue({ });
-    useIntegrationConfig.mockClear().mockReturnValue({ integrationConfig });
+    useIntegrationConfigMutation.mockReturnValue({ mutateIntegrationConfig });
+    useIntegrationConfig.mockReturnValue({ integrationConfig });
   });
 
   afterEach(() => {
+    jest.clearAllMocks();
     global.document.createRange = global.document.mockCreateRange;
   });
 
@@ -131,6 +147,23 @@ describe('OrganizationIntegrationView', () => {
         search: '',
       });
     });
+
+    it('should duplicate integration config', async () => {
+      const pushMock = jest.fn();
+
+      useHistory.mockReturnValue({ push: pushMock });
+
+      renderOrganizationIntegrationView();
+
+      await user.click(screen.getByTestId('duplicate-integration-action'));
+      await user.click(screen.getByText('ui-organizations.integration.confirmation.confirm'));
+
+      expect(mutateIntegrationConfig).toHaveBeenCalled();
+      expect(pushMock).toHaveBeenCalledWith({
+        pathname: `/organizations/view/${orgId}`,
+        search: '',
+      });
+    });
   });
 
   describe('Shortcuts', () => {

src/OrganizationIntegration/OrganizationIntegrationView/__snapshots__/OrganizationIntegrationView.test.js.snap

@@ -117,6 +117,19 @@ exports[`OrganizationIntegrationView should render correct view structure 1`] =
                         </span>
                       </span>
                     </button>
+                    <button
+                      class="button dropdownItem"
+                      data-testid="duplicate-integration-action"
+                      type="button"
+                    >
+                      <span
+                        class="inner"
+                      >
+                        <span>
+                          Icon
+                        </span>
+                      </span>
+                    </button>
                     <button
                       class="button dropdownItem"
                       data-testid="remove-integration-action"

src/OrganizationIntegration/utils.js

@@ -134,3 +134,16 @@ export const isClaimingIntegration = (config) => {
 export const isOrderingIntegration = (config) => {
   return isIntegrationType(config, INTEGRATION_TYPE.ordering);
 };
+
+export const getDuplicateTimestamp = ({ intl }) => {
+  const timestamp = intl.formatDate(Date.now(), {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+  });
+
+  return timestamp;
+};

translations/ui-organizations/en.json

@@ -75,6 +75,7 @@
 
   "view.edit": "Edit",
   "view.delete": "Delete",
+  "view.duplicate": "Duplicate",
   "view.exportLog": "View export log",
   "view.editVendorDialog": "Edit vendor dialog",
   "view.details": "Details",
@@ -107,7 +108,13 @@
   "ediInformation": "EDI information",
   "interface": "Interface",
   "accounts": "Accounts",
+
   "integrationDetails": "Integration details",
+  "integrationDetails.duplicate.name": "Copy of {term}",
+  "integrationDetails.duplicate.success": "Integration <b>{term}</b> was successfully duplicated",
+  "integrationDetails.duplicate.error": "Integration was not duplicated",
+  "integrationDetails.duplicate.confirmModal.heading": "Duplicate integration config",
+  "integrationDetails.duplicate.confirmModal.message": "Are you sure you want to duplicate the <b>{term}</b> integration config?",
 
   "main.code":"Code",
   "main.description":"Description",