UILD-780: Incorporate preferred profile settings

src/common/api/profiles.api.ts

@@ -1,4 +1,5 @@
 import {
+  PREFERRED_PROFILE_SETTINGS_PATH,
   PROFILE_API_ENDPOINT,
   PROFILE_METADATA_API_ENDPOINT,
   PROFILE_PREFERRED_API_ENDPOINT,
@@ -99,3 +100,35 @@ export const saveProfileSettings = (
     },
   });
 };
+
+export const fetchPreferredProfileSettings = (profileId: string | number) =>
+  baseApi.getJson({
+    url: `${PROFILE_API_ENDPOINT}/${profileId}/${PREFERRED_PROFILE_SETTINGS_PATH}`,
+  }) as Promise<ProfileSettingsMetaList>;
+
+export const savePreferredProfileSettings = (profileId: string | number, profileSettingsId: number) => {
+  const url = `${PROFILE_API_ENDPOINT}/${profileId}/${PREFERRED_PROFILE_SETTINGS_PATH}`;
+  const body = JSON.stringify({ profileSettingsId });
+
+  return baseApi.request({
+    url,
+    requestParams: {
+      method: 'POST',
+      body,
+      headers: {
+        'content-type': 'application/json',
+      },
+    },
+  });
+};
+
+export const deletePreferredProfileSettings = (profileId: string | number) => {
+  const url = `${PROFILE_API_ENDPOINT}/${profileId}/${PREFERRED_PROFILE_SETTINGS_PATH}`;
+
+  return baseApi.request({
+    url,
+    requestParams: {
+      method: 'DELETE',
+    },
+  });
+};

src/common/constants/api.constants.ts

@@ -10,6 +10,7 @@ export const PROFILE_API_ENDPOINT = '/linked-data/profile';
 export const PROFILE_METADATA_API_ENDPOINT = '/linked-data/profile/metadata';
 export const PROFILE_PREFERRED_API_ENDPOINT = '/linked-data/profile/preferred';
 export const PROFILE_SETTINGS_PATH = 'settings';
+export const PREFERRED_PROFILE_SETTINGS_PATH = `preferred`;
 export const AUTHORITY_ASSIGNMENT_CHECK_API_ENDPOINT = '/linked-data/authority-assignment-check';
 export const IMPORT_JSON_FILE_API_ENDPOINT = '/linked-data/import/file';
 export const IMPORT_JSON_URL_API_ENDPOINT = '/linked-data/import/url';

src/common/helpers/navigation.helper.ts

@@ -41,12 +41,10 @@ export const generatePageURL = ({
   url,
   queryParams,
   profileId,
-  profileSettingsId,
 }: {
   url: string;
   queryParams: Record<QueryParams, string>;
   profileId: string | number;
-  profileSettingsId?: string | number;
 }) => {
   const urlParams = new URLSearchParams();
 
@@ -62,10 +60,6 @@ export const generatePageURL = ({
     urlParams.set(QueryParams.ProfileId, profileId.toString());
   }
 
-  if (profileSettingsId) {
-    urlParams.set(QueryParams.ProfileSettingsId, profileSettingsId.toString());
-  }
-
   const paramString = urlParams.toString();
 
   return paramString ? `${url}?${paramString}` : url;

src/features/edit/components/EditSection/EditSection.scss

@@ -98,6 +98,21 @@
       padding-bottom: 5px;
     }
 
+    .setting-current {
+      font-weight: 700;
+    }
+
+    .setting-default {
+      font-style: italic;
+    }
+
+    .setting-preferred {
+      span {
+        text-transform: uppercase;
+        font-size: 90%;
+      }
+    }
+
     &-menu {
       position: absolute;
       list-style: none;

src/features/edit/components/EditSection/ProfileSettingsSelector.test.tsx

@@ -19,7 +19,11 @@ describe('ProfileSettingsSelector', () => {
   const mockProfileId = 'profile-id';
   const mockSetSelectedProfileSettingsId = jest.fn();
 
-  const renderComponent = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  const renderComponent = (withOptions: boolean) => {
     setInitialGlobalState([
       {
         store: useProfileStore,
@@ -30,23 +34,24 @@ describe('ProfileSettingsSelector', () => {
       },
     ]);
 
-    const queryClient = new QueryClient({
-      defaultOptions: { queries: { retry: false } },
-    });
     queryClient.setQueryData(
       ['profileSettingsMeta', mockProfileId],
-      [
-        {
-          id: 15,
-          name: 'fifteen',
-        },
-        {
-          id: 32,
-          name: 'thirty-two',
-        },
-      ],
+      withOptions
+        ? [
+            {
+              id: 15,
+              name: 'fifteen',
+            },
+            {
+              id: 32,
+              name: 'thirty-two',
+            },
+          ]
+        : [],
     );
 
+    queryClient.setQueryData(['preferredProfileSettings', mockProfileId], [{ profileId: mockProfileId, id: 15 }]);
+
     return render(
       <QueryClientProvider client={queryClient}>
         <MemoryRouter>
@@ -56,14 +61,30 @@ describe('ProfileSettingsSelector', () => {
     );
   };
 
+  afterEach(() => {
+    queryClient?.clear();
+  });
+
   it('renders the component', () => {
-    renderComponent();
+    mockGetRecordProfileId.mockReturnValue(mockProfileId);
+
+    renderComponent(true);
 
     expect(screen.getByTestId('profile-settings-selector-button')).toBeInTheDocument();
   });
 
+  it('does not render the component when no options', () => {
+    mockGetRecordProfileId.mockReturnValue(mockProfileId);
+
+    renderComponent(false);
+
+    expect(screen.queryByTestId('profile-settings-selector-button')).not.toBeInTheDocument();
+  });
+
   it('clicking button shows menu', () => {
-    renderComponent();
+    mockGetRecordProfileId.mockReturnValue(mockProfileId);
+
+    renderComponent(true);
 
     fireEvent.click(screen.getByTestId('profile-settings-selector-button'));
 
@@ -73,7 +94,7 @@ describe('ProfileSettingsSelector', () => {
   it('profile setting currently in use is disabled', async () => {
     mockGetRecordProfileId.mockReturnValue(mockProfileId);
 
-    renderComponent();
+    renderComponent(true);
 
     fireEvent.click(screen.getByTestId('profile-settings-selector-button'));
 
@@ -82,10 +103,22 @@ describe('ProfileSettingsSelector', () => {
     });
   });
 
+  it('preferred profile setting shows a label', async () => {
+    mockGetRecordProfileId.mockReturnValue(mockProfileId);
+
+    renderComponent(true);
+
+    fireEvent.click(screen.getByTestId('profile-settings-selector-button'));
+
+    await waitFor(() => {
+      expect(screen.getByText('ld.preferred')).toBeInTheDocument();
+    });
+  });
+
   it('clicking a setting selects it', async () => {
     mockGetRecordProfileId.mockReturnValue(mockProfileId);
 
-    renderComponent();
+    renderComponent(true);
 
     fireEvent.click(screen.getByTestId('profile-settings-selector-button'));
     fireEvent.click(screen.getByText('fifteen'));

src/features/edit/components/EditSection/ProfileSettingsSelector.tsx

@@ -8,7 +8,7 @@ import { getRecordProfileId } from '@/common/helpers/record.helper';
 import { useDismissMenu } from '@/common/hooks/useDismissMenu';
 import { Button, ButtonType } from '@/components/Button';
 
-import { useLoadProfileSettingsMeta } from '@/features/profiles';
+import { useLoadProfileSettingsMeta, usePreferredProfileSettings } from '@/features/profiles';
 
 import { useInputsState, useProfileState } from '@/store';
 
@@ -33,18 +33,57 @@ export const ProfileSettingsSelector = () => {
     },
   ] as ProfileSettingsMetaList;
   const { data: profileSettings } = useLoadProfileSettingsMeta(selectedProfileId);
+  const { data: preferredProfileSettings } = usePreferredProfileSettings(selectedProfileId);
+
   const profileSettingsOptions = useMemo(() => {
     return profileSettings ? basicOption.concat(profileSettings) : basicOption;
   }, [basicOption, profileSettings]);
 
+  const hasOptions = useMemo(() => {
+    return (profileSettings?.length ?? 0) > 0;
+  }, [profileSettings]);
+
   const { isOpen: isMenuEnabled, setIsOpen: setIsMenuEnabled, toggle: toggleIsMenuEnabled } = useDismissMenu(ref);
 
   const handleSettingClick = async (profileSettingsId: string | number) => {
     setIsMenuEnabled(false);
     setSelectedProfileSettingsId(profileSettingsId.toString());
   };
 
-  return (
+  const isPreferred = (profileSetting: ProfileSettingsMeta) => {
+    return preferredProfileSettings?.some(p => p.id === profileSetting.id);
+  };
+
+  const getClassNames = (profileSetting: ProfileSettingsMeta) => {
+    const classNames = [];
+    if (profileSetting.id === PROFILE_SETTINGS_DEFAULT_OPTION) {
+      classNames.push('setting-default');
+    }
+    if (profileSetting.id === selectedProfileSettingsId) {
+      classNames.push('setting-current');
+    }
+    if (isPreferred(profileSetting)) {
+      classNames.push('setting-preferred');
+    }
+    return classNames.join(' ');
+  };
+
+  const getLabel = (profileSetting: ProfileSettingsMeta) => {
+    return (
+      <>
+        {profileSetting.name}
+        {isPreferred(profileSetting) ? (
+          <span>
+            <FormattedMessage id="ld.preferred" />
+          </span>
+        ) : (
+          ''
+        )}
+      </>
+    );
+  };
+
+  return hasOptions ? (
     <div className="profile-settings-selector" ref={ref}>
       <Button
         data-testid="profile-settings-selector-button"
@@ -69,17 +108,21 @@ export const ProfileSettingsSelector = () => {
               <li key={profileSetting.id} role="none">
                 <Button
                   type={ButtonType.Text}
-                  label={profileSetting.name}
                   role="menuitem"
                   disabled={profileSetting.id.toString() === selectedProfileSettingsId}
                   onClick={() => handleSettingClick(profileSetting.id)}
                   tabbable={isMenuEnabled}
-                />
+                  className={getClassNames(profileSetting)}
+                >
+                  {getLabel(profileSetting)}
+                </Button>
               </li>
             );
           })}
         </ul>
       )}
     </div>
+  ) : (
+    <></>
   );
 };

src/features/edit/hooks/useEditPage.test.ts

@@ -65,6 +65,7 @@ jest.mock('@/common/hooks/useSchemaPipeline', () => ({
 
 const mockSetIsLoading = jest.fn();
 const mockSetSelectedProfile = jest.fn();
+const mockSetSelectedProfileSettingsId = jest.fn();
 const mockSetInitialSchemaKey = jest.fn();
 const mockSetSchema = jest.fn();
 const mockSetUserValues = jest.fn();
@@ -86,6 +87,7 @@ const setupStores = () => {
       store: useProfileStore,
       state: {
         setSelectedProfile: mockSetSelectedProfile,
+        setSelectedProfileSettingsId: mockSetSelectedProfileSettingsId,
         setInitialSchemaKey: mockSetInitialSchemaKey,
         setSchema: mockSetSchema,
       },

src/features/edit/hooks/useEditPage.ts

@@ -61,8 +61,9 @@ export const useEditPage = () => {
   const { selectedEntriesService } = useSchemaPipeline();
 
   const { setIsLoading } = useLoadingState(['setIsLoading']);
-  const { setSelectedProfile, setInitialSchemaKey, setSchema } = useProfileState([
+  const { setSelectedProfile, setSelectedProfileSettingsId, setInitialSchemaKey, setSchema } = useProfileState([
     'setSelectedProfile',
+    'setSelectedProfileSettingsId',
     'setInitialSchemaKey',
     'setSchema',
   ]);
@@ -110,6 +111,7 @@ export const useEditPage = () => {
   const applyToProfileAndInputStores = useCallback(
     ({ result }: ApplyToProfileAndInputStoresProps) => {
       setSelectedProfile(result.selectedProfile ?? null);
+      setSelectedProfileSettingsId(result.selectedProfileSettingsId?.toString() ?? null);
       setSchema(result.schema);
       setInitialSchemaKey(result.initKey);
       setUserValues(result.userValues);

src/features/manageProfileSettings/components/DefaultProfileSettingsOption/DefaultProfileSettingsOption.scss

@@ -0,0 +1,7 @@
+.default-profile-settings {
+  padding: 3px 15px 15px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+}