UIQM-716: Consolidate bib and authority routes to avoid page refresh after redirecting from the create/derive page to the edit one.

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for ui-quick-marc
 
+## [10.0.0] (IN PROGRESS)
+
+* [UIQM-716](https://issues.folio.org/browse/UIQM-716) *BREAKING* Consolidate routes based on MARC type for bib and authority records to avoid page refresh after redirecting from the create page to the edit one.
+
 ## [9.0.1] (IN PROGRESS)
 
 * [UIQM-725](https://issues.folio.org/browse/UIQM-725) Fix wrong error message while saving MARC Bib record with invalid LDR position values.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/quick-marc",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "description": "Quick MARC editor",
   "main": "index.js",
   "repository": "",

src/MarcRoute/MarcRoute.js

@@ -14,12 +14,14 @@ import {
 import { QuickMarcEditorContainer } from '../QuickMarcEditor';
 import { applyCentralTenantInHeaders } from '../QuickMarcEditor/utils';
 import { QUICK_MARC_ACTIONS } from '../QuickMarcEditor/constants';
+import { QuickMarcProvider } from '../contexts';
 
 const MarcRoute = ({
   externalRecordPath,
   path,
   permission,
   routeProps,
+  basePath,
   onClose,
   onSave,
 }) => {
@@ -64,13 +66,18 @@ const MarcRoute = ({
       path={path}
       key={path}
       render={() => (
-        <QuickMarcEditorContainer
-          onClose={onClose}
-          onSave={onSave}
-          externalRecordPath={externalRecordPath}
-          onCheckCentralTenantPerm={checkCentralTenantPerm}
-          {...routeProps}
-        />
+        <QuickMarcProvider
+          action={action}
+          marcType={marcType}
+          basePath={basePath}
+        >
+          <QuickMarcEditorContainer
+            onClose={onClose}
+            onSave={onSave}
+            externalRecordPath={externalRecordPath}
+            onCheckCentralTenantPerm={checkCentralTenantPerm}
+          />
+        </QuickMarcProvider>
       )}
     />
   );
@@ -81,6 +88,7 @@ MarcRoute.propTypes = {
   path: PropTypes.string.isRequired,
   permission: PropTypes.string,
   routeProps: PropTypes.object.isRequired,
+  basePath: PropTypes.string.isRequired,
   onClose: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
 };

src/MarcRoute/MarcRoute.test.js

@@ -28,7 +28,7 @@ const renderMarcRoute = ({ history, ...props } = {}) => (render(
   <Harness history={history}>
     <MarcRoute
       externalRecordPath="/inventory/view"
-      path="/inventory/quick-marc/edit-bib/:externalId"
+      path="/inventory/quick-marc/edit-bibliographic/:externalId"
       permission="ui-quick-marc.quick-marc-editor.all"
       routeProps={routeProps}
       onClose={() => {}}

src/QuickMarc.js

@@ -2,16 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Switch,
+  useLocation,
 } from 'react-router-dom';
 
 import { CommandList } from '@folio/stripes/components';
 
 import { MarcRoute } from './MarcRoute';
-import {
-  QuickMarcDeriveWrapper,
-  QuickMarcCreateWrapper,
-  QuickMarcEditWrapper,
-} from './QuickMarcEditor';
 import { QUICK_MARC_ACTIONS } from './QuickMarcEditor/constants';
 import {
   MARC_TYPES,
@@ -24,40 +20,41 @@ const QuickMarc = ({
   onClose,
   onSave,
 }) => {
+  const location = useLocation();
+
+  const permissionsMap = {
+    'create-bibliographic': 'ui-quick-marc.quick-marc-editor.create',
+    'edit-bibliographic': 'ui-quick-marc.quick-marc-editor.all',
+    'derive-bibliographic': 'ui-quick-marc.quick-marc-editor.derive.execute',
+    'create-authority': 'ui-quick-marc.quick-marc-authorities-editor.create',
+    'edit-authority': '', // ui-quick-marc.quick-marc-authorities-editor.all
+  };
+
+  // .../some-path/create-bibliographic => [, create-bibliographic, create, bibliographic]
+  const [, page, action] = location.pathname.match(/\/((edit|create|derive)-(bibliographic|authority|holdings))/) || [];
+
   const editorRoutesConfig = [
     {
-      path: `${basePath}/edit-bib/:externalId`,
-      permission: 'ui-quick-marc.quick-marc-editor.all',
+      path: `${basePath}/:action-bibliographic/:externalId?`,
+      permission: permissionsMap[page],
       props: {
-        action: QUICK_MARC_ACTIONS.EDIT,
-        wrapper: QuickMarcEditWrapper,
+        action,
         marcType: MARC_TYPES.BIB,
       },
     },
     {
-      path: `${basePath}/duplicate-bib/:externalId`,
-      permission: 'ui-quick-marc.quick-marc-editor.derive.execute',
+      path: `${basePath}/:action-authority/:externalId?`,
+      permission: permissionsMap[page],
       props: {
-        action: QUICK_MARC_ACTIONS.DERIVE,
-        wrapper: QuickMarcDeriveWrapper,
-        marcType: MARC_TYPES.BIB,
-      },
-    },
-    {
-      path: `${basePath}/create-bib`,
-      permission: 'ui-quick-marc.quick-marc-editor.create',
-      props: {
-        action: QUICK_MARC_ACTIONS.CREATE,
-        wrapper: QuickMarcCreateWrapper,
-        marcType: MARC_TYPES.BIB,
+        action,
+        marcType: MARC_TYPES.AUTHORITY,
       },
     },
     {
       path: `${basePath}/create-holdings/:externalId`,
       permission: 'ui-quick-marc.quick-marc-holdings-editor.create',
       props: {
         action: QUICK_MARC_ACTIONS.CREATE,
-        wrapper: QuickMarcCreateWrapper,
         marcType: MARC_TYPES.HOLDINGS,
       },
     },
@@ -66,28 +63,9 @@ const QuickMarc = ({
       permission: 'ui-quick-marc.quick-marc-holdings-editor.all',
       props: {
         action: QUICK_MARC_ACTIONS.EDIT,
-        wrapper: QuickMarcEditWrapper,
         marcType: MARC_TYPES.HOLDINGS,
       },
     },
-    {
-      path: `${basePath}/create-authority`,
-      permission: 'ui-quick-marc.quick-marc-authorities-editor.create',
-      props: {
-        action: QUICK_MARC_ACTIONS.CREATE,
-        wrapper: QuickMarcCreateWrapper,
-        marcType: MARC_TYPES.AUTHORITY,
-      },
-    },
-    {
-      path: `${basePath}/edit-authority/:externalId`,
-      // permission: 'ui-quick-marc.quick-marc-authorities-editor.all',
-      props: {
-        action: QUICK_MARC_ACTIONS.EDIT,
-        wrapper: QuickMarcEditWrapper,
-        marcType: MARC_TYPES.AUTHORITY,
-      },
-    },
   ];
 
   return (
@@ -108,6 +86,7 @@ const QuickMarc = ({
                 path={path}
                 permission={permission}
                 routeProps={routeProps}
+                basePath={basePath}
                 onClose={onClose}
                 onSave={onSave}
               />

src/QuickMarc.test.js

@@ -8,6 +8,9 @@ import { createMemoryHistory } from 'history';
 import QuickMarc from './QuickMarc';
 
 import Harness from '../test/jest/helpers/harness';
+import { QuickMarcProvider } from './contexts';
+import { QUICK_MARC_ACTIONS } from './QuickMarcEditor/constants';
+import { MARC_TYPES } from './common';
 
 jest.mock('@folio/stripes/core', () => ({
   ...jest.requireActual('@folio/stripes/core'),
@@ -19,19 +22,25 @@ jest.mock('@folio/stripes/core', () => ({
 
 jest.mock('./QuickMarcEditor', () => {
   return {
-    QuickMarcEditorContainer: ({ action }) => <span>QuickMarcEditorContainer {action}</span>,
+    QuickMarcEditorContainer: () => <span>QuickMarcEditorContainer</span>,
   };
 });
 
+jest.mock('./contexts', () => ({
+  QuickMarcProvider: jest.fn(({ children }) => <div>{children}</div>),
+}));
+
 const mockOnSave = jest.fn();
 const mockOnClose = jest.fn();
 
+const basePath = '/some-path';
+
 const renderQuickMarc = (props = {}) => (render(
   <Harness history={props.history}>
     <QuickMarc
       onClose={mockOnClose}
       onSave={mockOnSave}
-      basePath="/some-path"
+      basePath={basePath}
       {...props}
     />
   </Harness>,
@@ -44,39 +53,63 @@ describe('Given Quick Marc', () => {
     history = createMemoryHistory();
   });
 
-  describe('When visiting "duplicate" route', () => {
+  describe('When visiting "derive" route', () => {
     beforeEach(() => {
-      history.push('/some-path/duplicate-bib/1234');
+      history.push(`${basePath}/derive-bibliographic/1234`);
     });
 
     it('should display correct route', () => {
       const { getByText } = renderQuickMarc({ history });
 
-      expect(getByText('QuickMarcEditorContainer derive')).toBeDefined();
+      const expectedProps = {
+        action: QUICK_MARC_ACTIONS.DERIVE,
+        marcType: MARC_TYPES.BIB,
+        basePath,
+        children: expect.anything(),
+      };
+
+      expect(getByText('QuickMarcEditorContainer')).toBeDefined();
+      expect(QuickMarcProvider).toHaveBeenCalledWith(expect.objectContaining(expectedProps), {});
     });
   });
 
   describe('When visiting "edit" route', () => {
     beforeEach(() => {
-      history.push('/some-path/edit-bib/1234');
+      history.push(`${basePath}/edit-bibliographic/1234`);
     });
 
     it('should display correct route', () => {
       const { getByText } = renderQuickMarc({ history });
 
-      expect(getByText('QuickMarcEditorContainer edit')).toBeDefined();
+      const expectedProps = {
+        action: QUICK_MARC_ACTIONS.EDIT,
+        marcType: MARC_TYPES.BIB,
+        basePath,
+        children: expect.anything(),
+      };
+
+      expect(getByText('QuickMarcEditorContainer')).toBeDefined();
+      expect(QuickMarcProvider).toHaveBeenCalledWith(expect.objectContaining(expectedProps), {});
     });
   });
 
   describe('When visiting "create" route', () => {
     beforeEach(() => {
-      history.push('/some-path/create-holdings/1234');
+      history.push(`${basePath}/create-holdings/1234`);
     });
 
     it('should display correct route', () => {
       const { getByText } = renderQuickMarc({ history });
 
-      expect(getByText('QuickMarcEditorContainer create')).toBeDefined();
+      const expectedProps = {
+        action: QUICK_MARC_ACTIONS.CREATE,
+        marcType: MARC_TYPES.HOLDINGS,
+        basePath,
+        children: expect.anything(),
+      };
+
+      expect(getByText('QuickMarcEditorContainer')).toBeDefined();
+      expect(QuickMarcProvider).toHaveBeenCalledWith(expect.objectContaining(expectedProps), {});
     });
   });
 });