Update manage settings feature to accommodate creating new settings; update existing tests to run correctly

Author: zepheiryan

CHANGELOG.md

@@ -8,11 +8,13 @@
 * Refactor services providers and simple lookup data loading. Refs [UILD-816].
 * Refactor imports and add import boundary rules. Refs [UILD-816].
 * Fix regression issues that appeared after refactoring. Refs [UILD-816], [UILD-827].
+* Fix multiple settings per profile. Refs [UILD-780].
 
 [UILD-744]:https://folio-org.atlassian.net/browse/UILD-744
 [UILD-816]:https://folio-org.atlassian.net/browse/UILD-816
 [UILD-821]:https://folio-org.atlassian.net/browse/UILD-821
 [UILD-827]:https://folio-org.atlassian.net/browse/UILD-827
+[UILD-780]:https://folio-org.atlassian.net/browse/UILD-780
 
 ## 2.0.4 (2026-06-03)
 * Fix default profile type persistence across edit form and profile settings. Fixes [UILD-820].

src/common/api/profiles.api.ts

@@ -62,11 +62,11 @@ export const fetchProfileSettings = (profileId: string | number, profileSettings
     url: `${PROFILE_API_ENDPOINT}/${profileId}/${PROFILE_SETTINGS_PATH}/${profileSettingsId}`,
   }) as Promise<ProfileSettings>;
 
-export const createProfileSettings = (profileId: string | number, settings: ProfileSettings) => {
+export const createProfileSettings = async (profileId: string | number, settings: ProfileSettings) => {
   const url = `${PROFILE_API_ENDPOINT}/${profileId}/${PROFILE_SETTINGS_PATH}`;
   const body = JSON.stringify(settings);
 
-  return baseApi.request({
+  const response = await baseApi.request({
     url,
     requestParams: {
       method: 'POST',
@@ -76,6 +76,8 @@ export const createProfileSettings = (profileId: string | number, settings: Prof
       },
     },
   });
+
+  return response?.json();
 };
 
 export const saveProfileSettings = (

src/common/constants/api.constants.ts

@@ -49,6 +49,8 @@ export enum ApiErrorCodes {
   RequiredPrimaryMainTitle = 'required_primary_main_title',
   LccnDoesNotMatchPattern = 'lccn_does_not_match_pattern',
   LccnNotUnique = 'lccn_not_unique',
+  ProfileSettingsNameNotUnique = 'profile_settings_name_not_unique',
+  NotBlank = 'must not be blank',
   FailedDependency = 'failed_dependency',
   NotFound = 'not_found',
   Mapping = 'mapping',

src/common/constants/profileSettings.constants.ts

@@ -3,3 +3,12 @@ export const DEFAULT_INACTIVE_SETTINGS: ProfileSettingsWithDrift = {
   children: [],
   missingFromSettings: [],
 };
+
+export const PROFILE_SETTINGS_DEFAULT_OPTION = 'default';
+
+export const BASE_SETTINGS_OPTIONS = [
+  {
+    label: '',
+    value: '',
+  },
+];

src/common/constants/routes.constants.ts

@@ -57,6 +57,7 @@ export enum QueryParams {
   Source = 'source',
   SourceUri = 'sourceUri',
   ProfileId = 'profileId',
+  ProfileSettingsId = 'profileSettingsId',
 }
 
 export enum SearchQueryParams {

src/common/helpers/navigation.helper.ts

@@ -41,10 +41,12 @@ export const generatePageURL = ({
   url,
   queryParams,
   profileId,
+  profileSettingsId,
 }: {
   url: string;
   queryParams: Record<QueryParams, string>;
   profileId: string | number;
+  profileSettingsId?: string | number;
 }) => {
   const urlParams = new URLSearchParams();
 
@@ -60,6 +62,10 @@ 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/common/hooks/useDismissMenu.ts

@@ -0,0 +1,46 @@
+import { RefObject, useEffect, useState } from 'react';
+
+export const useDismissMenu = (ref: RefObject<HTMLElement | null>) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleFocusOutside = (event: FocusEvent) => {
+      if (!event.relatedTarget || (ref.current && !ref.current.contains(event.relatedTarget as Node))) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (ref.current && event.key === 'Escape') {
+        setIsOpen(false);
+        ref.current.focus();
+      }
+    };
+
+    document.addEventListener('pointerdown', handleClickOutside);
+    document.addEventListener('focusout', handleFocusOutside);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('pointerdown', handleClickOutside);
+      document.removeEventListener('focusout', handleFocusOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const toggle = () => {
+    setIsOpen(prev => !prev);
+  };
+
+  return {
+    isOpen,
+    setIsOpen,
+    toggle,
+  };
+};

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

@@ -16,6 +16,7 @@ import { getPlaceholderForProperty } from '@/features/search/ui';
 
 import { FieldWithMetadataAndControls } from '../FieldWithMetadataAndControls';
 import { BlockActions } from './BlockActions';
+import { ProfileSettingsSelector } from './ProfileSettingsSelector';
 import { EditSectionDataProps } from './renderDrawComponent';
 
 export type IDrawComponent = {
@@ -67,6 +68,7 @@ export const DrawComponent: FC<IDrawComponent & EditSectionDataProps> = ({
               <FormattedMessage id={collapsedEntries.size ? 'ld.expandAll' : 'ld.collapseAll'} />
             </Button>
           )}
+          <ProfileSettingsSelector />
           <BlockActions entry={entry} />
         </div>
       </FieldWithMetadataAndControls>

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

@@ -84,6 +84,40 @@
       width: 20rem;
     }
   }
+
+  .profile-settings-select {
+    display: inline-block;
+    position: relative;
+    margin: 0;
+    padding: 0;
+
+    #selector-title {
+      font-size: $font-md;
+      font-weight: 700;
+      color: $buttonIcon;
+      padding-bottom: 5px;
+    }
+
+    &-menu {
+      position: absolute;
+      list-style: none;
+      z-index: 2;
+      top: 10px;
+      right: 0;
+      width: max-content;
+      padding: 15px 10px;
+      border: 1px solid $gray-350;
+      background-color: $base;
+      box-shadow: $menu-drop-shadow;
+
+      button {
+        font-size: $font-md;
+        font-weight: 400;
+        width: 100%;
+        justify-content: flex-start;
+      }
+    }
+  }
 }
 
 .edit-section-passive {

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

@@ -0,0 +1,75 @@
+import { useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useSearchParams } from 'react-router-dom';
+
+import { PROFILE_SETTINGS_DEFAULT_OPTION } from '@/common/constants/profileSettings.constants';
+import { QueryParams } from '@/common/constants/routes.constants';
+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 { useInputsState, useProfileState } from '@/store';
+
+import Settings from '@/assets/settings.svg?react';
+
+export const ProfileSettingsSelector = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [searchParams] = useSearchParams();
+  const { record } = useInputsState(['record']);
+  const { setSelectedProfileSettingsId } = useProfileState(['setSelectedProfileSettingsId']);
+  const recordProfileId = getRecordProfileId(record);
+  const profileIdParam = searchParams.get(QueryParams.ProfileId);
+  const selectedProfileId = recordProfileId ?? profileIdParam;
+  const { data: profileSettings } = useLoadProfileSettingsMeta(selectedProfileId);
+
+  const { isOpen: isMenuEnabled, setIsOpen: setIsMenuEnabled, toggle: toggleIsMenuEnabled } = useDismissMenu(ref);
+
+  const handleSettingClick = async (profileSettingsId: string | number) => {
+    setIsMenuEnabled(false);
+    setSelectedProfileSettingsId(profileSettingsId.toString());
+  };
+
+  return (
+    <div className="profile-settings-select" ref={ref}>
+      <Button ariaHaspopup="menu" ariaExpanded={isMenuEnabled} onClick={toggleIsMenuEnabled}>
+        <Settings />
+      </Button>
+      {isMenuEnabled && (
+        <ul
+          data-testid="profile-settings-select-menu"
+          className="profile-settings-select-menu"
+          role="menu" // NOSONAR
+          aria-labelledby="selector-title"
+        >
+          <li id="selector-title" role="none">
+            <FormattedMessage id="ld.applyProfileSettings" />
+          </li>
+          <li role="none">
+            <Button
+              type={ButtonType.Text}
+              label={<FormattedMessage id="ld.profileDefaults" />}
+              role="menuitem"
+              onClick={() => handleSettingClick(PROFILE_SETTINGS_DEFAULT_OPTION)}
+              tabbable={isMenuEnabled}
+            />
+          </li>
+          {profileSettings?.map(profileSetting => {
+            return (
+              <li key={profileSetting.id} role="none">
+                <Button
+                  type={ButtonType.Text}
+                  label={profileSetting.name}
+                  role="menuitem"
+                  onClick={() => handleSettingClick(profileSetting.id)}
+                  tabbable={isMenuEnabled}
+                />
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+};