UIDEXP-423 Display spinner and edited data when open Job profile view form after edit

CHANGELOG.md

@@ -10,6 +10,7 @@
 * Include universal read-only permissions. Refs UIDEXP-410.
 * Dependency correction: bump `@folio/stripes` peer to v7, as the dev-dep was in UIDEXP-405. Refs UIDEXP-421.
 * Make name of the User triggered export under "Running" accordion consistent to the User name in "Run by" column. Refs UIDEXP-422.
+* Display spinner and edited data when open Job profile view form after edit. Refs UIDEXP-423.
 
 ## [7.0.0](https://github.com/folio-org/ui-data-export/tree/v7.0.0) (2025-03-12)
 [Full Changelog](https://github.com/folio-org/ui-data-export/compare/v6.2.0...v7.0.0)

src/settings/JobProfiles/JobProfileDetailsRoute/JobProfileDetailsRoute.js

@@ -16,17 +16,24 @@ const JobProfileDetailsRoute = ({
   const ky = useOkapiKy();
   const intl = useIntl();
 
-  const { data: jobProfileRecord } = useQuery(
+  const {
+    data: jobProfileRecord,
+    isFetching: isJobProfileFetching,
+  } = useQuery(
     ['data-export', 'job-profile', match.params.id],
-    () => ky(`data-export/job-profiles/${match.params.id}`).json()
+    () => ky(`data-export/job-profiles/${match.params.id}`).json(),
   );
-  const { data: mappingProfileRecord } = useQuery(
+  const {
+    data: mappingProfileRecord,
+    isFetching: isMappingProfileFetching,
+  } = useQuery(
     ['data-export', 'mapping-profile', jobProfileRecord?.mappingProfileId],
     () => ky(`data-export/mapping-profiles/${jobProfileRecord?.mappingProfileId}`).json(),
     { enabled: Boolean(jobProfileRecord?.mappingProfileId) }
   );
 
   const isDefaultProfile = jobProfileRecord?.default;
+  const isLoading = isJobProfileFetching || isMappingProfileFetching || !jobProfileRecord || !mappingProfileRecord;
   const handleCancel = useCallback(() => {
     history.push(`/settings/data-export/job-profiles${location.search}`);
   }, [location.search]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -37,7 +44,7 @@ const JobProfileDetailsRoute = ({
         jobProfile={jobProfileRecord}
         mappingProfile={mappingProfileRecord}
         isDefaultProfile={isDefaultProfile}
-        isLoading={!jobProfileRecord || !mappingProfileRecord}
+        isLoading={isLoading}
         onCancel={handleCancel}
         onEdit={() => { history.push(`/settings/data-export/job-profiles/edit/${match.params.id}${location.search}`); }}
         onDuplicate={() => { history.push(`/settings/data-export/job-profiles/duplicate/${match.params.id}${location.search}`); }}

src/settings/JobProfiles/JobProfileDetailsRoute/JobProfileDetailsRoute.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import * as ReactQuery from 'react-query';
 
 import '../../../../test/jest/__mock__';
 
@@ -129,48 +130,16 @@ describe('JobProfileDetails', () => {
   describe('rendering details for non default job profile without job execution data', () => {
     const nonDefaultJobProfileId = 'job-profile-id';
 
-    it('should display job profile details for non default job profile', async () => {
-      const kyMock = (url) => {
-        return {
-          json: jest.fn(() => {
-            if (url.includes('job-profiles')) {
-              return Promise.resolve({ ...jobProfile, id: nonDefaultJobProfileId });
-            } else if (url.includes('mapping-profiles')) {
-              return Promise.resolve(mappingProfile);
-            } else {
-              return Promise.resolve();
-            }
-          }),
-        };
-      };
-
-      useOkapiKy.mockReturnValue(kyMock);
-
-      setupJobProfileDetailsRoute({ matchParams: { id: nonDefaultJobProfileId } });
-
-      expect(await screen.findByText(jobProfile.name)).toBeVisible();
-      expect(screen.getByText('ViewMetaData')).toBeVisible();
-      expect(screen.getByText(jobProfile.description)).toBeVisible();
-      expect(screen.getByText(mappingProfile.name)).toBeVisible();
-    });
-
-
     it('should render with no axe errors', async () => {
-      const kyMock = (url) => {
-        return {
-          json: jest.fn(() => {
-            if (url.includes('job-profiles')) {
-              return Promise.resolve({ ...jobProfile, id: nonDefaultJobProfileId });
-            } else if (url.includes('mapping-profiles')) {
-              return Promise.resolve(mappingProfile);
-            } else {
-              return Promise.resolve();
-            }
-          }),
-        };
-      };
-
-      useOkapiKy.mockReturnValue(kyMock);
+      jest.spyOn(ReactQuery, 'useQuery')
+        .mockReturnValueOnce({
+          data: { ...jobProfile, id: nonDefaultJobProfileId },
+          isFetching: false,
+        })
+        .mockReturnValueOnce({
+          data: mappingProfile,
+          isFetching: false,
+        });
 
       setupJobProfileDetailsRoute({ matchParams: { id: nonDefaultJobProfileId } });
 
@@ -182,23 +151,18 @@ describe('JobProfileDetails', () => {
 
   describe('rendering details for default job profile with job execution data', () => {
     it('should display job profile details', async () => {
-      const kyMock = (url) => {
-        return {
-          json: jest.fn(() => {
-            if (url.includes('job-profiles')) {
-              return Promise.resolve(jobProfile);
-            } else if (url.includes('mapping-profiles')) {
-              return Promise.resolve(mappingProfile);
-            } else {
-              return Promise.resolve();
-            }
-          }),
-        };
-      };
-
-      useOkapiKy.mockReturnValue(kyMock);
+      // Mock useQuery to return job profile first, then mapping profile
+      jest.spyOn(ReactQuery, 'useQuery')
+        .mockReturnValueOnce({
+          data: jobProfile,
+          isFetching: false,
+        })
+        .mockReturnValueOnce({
+          data: mappingProfile,
+          isFetching: false,
+        });
 
-      setupJobProfileDetailsRoute();
+      setupJobProfileDetailsRoute({ matchParams: { id: JOB_PROFILE_ID } });
 
       const summary = await screen.findByRole('region', { name: /summary/i });
 

src/settings/ProfileDetails/ProfileDetails.js

@@ -45,6 +45,7 @@ export const ProfileDetails = props => {
 
   const stripes = useStripes();
   const hasOnlyViewPerms = stripes.hasPerm('ui-data-export.settings.view') && !stripes.hasPerm('ui-data-export.settings.edit');
+  const paneTitle = isLoading ? <Preloader size="medium" /> : profile?.name;
 
   const renderActionMenu = useCallback(({ onToggle }) => {
     return (
@@ -85,7 +86,7 @@ export const ProfileDetails = props => {
     <FullScreenView
       id={`${type}-profile-details`}
       contentLabel={intl.formatMessage({ id: `ui-data-export.${type}Profiles.newProfile` })}
-      paneTitle={profile?.name}
+      paneTitle={paneTitle}
       actionMenu={!isLoading && !hasOnlyViewPerms && renderActionMenu}
       onCancel={onCancel}
     >