UILD-780: Update profile settings workflow for improved user experience

src/common/constants/profileSettings.constants.ts

@@ -12,3 +12,9 @@ export const BASE_SETTINGS_OPTIONS = [
     value: '',
   },
 ];
+
+export enum ProfileSettingsMode {
+  Landing = 'landing',
+  Creating = 'creating',
+  Editing = 'editing',
+}

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

@@ -39,8 +39,8 @@ export const ProfileSettingsSelector = () => {
     return profileSettings ? basicOption.concat(profileSettings) : basicOption;
   }, [basicOption, profileSettings]);
 
-  const hasOptions = useMemo(() => {
-    return (profileSettings?.length ?? 0) > 0;
+  const hasNoOptions = useMemo(() => {
+    return (profileSettings?.length ?? 0) === 0;
   }, [profileSettings]);
 
   const { isOpen: isMenuEnabled, setIsOpen: setIsMenuEnabled, toggle: toggleIsMenuEnabled } = useDismissMenu(ref);
@@ -83,7 +83,9 @@ export const ProfileSettingsSelector = () => {
     );
   };
 
-  return hasOptions ? (
+  if (hasNoOptions) return <></>;
+
+  return (
     <div className="profile-settings-selector" ref={ref}>
       <Button
         data-testid="profile-settings-selector-button"
@@ -122,7 +124,5 @@ export const ProfileSettingsSelector = () => {
         </ul>
       )}
     </div>
-  ) : (
-    <></>
   );
 };

src/features/manageProfileSettings/components/DefaultProfileOption/DefaultProfileOption.tsx

@@ -42,7 +42,7 @@ export const DefaultProfileOption: FC<DefaultProfileOptionProps> = ({ selectedPr
       const preferredProfiles = await loadPreferredProfiles();
       if (preferredProfiles?.length) {
         const preferred = preferredProfileForType(selectedProfile.resourceType, preferredProfiles);
-        setIsTypeDefaultProfile(!!preferred && preferred.id === String(selectedProfile.id));
+        setIsTypeDefaultProfile(!!preferred && preferred.id.toString() === selectedProfile.id.toString());
       } else {
         setIsTypeDefaultProfile(false);
       }

src/features/manageProfileSettings/components/ModalCloseProfileSettings/ModalCloseProfileSettings.test.tsx

@@ -6,6 +6,8 @@ import { MemoryRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
+import { ProfileSettingsMode } from '@/common/constants/profileSettings.constants';
+
 import { useManageProfileSettingsState, useUIState } from '@/store';
 
 import { ModalCloseProfileSettings } from './ModalCloseProfileSettings';
@@ -30,7 +32,7 @@ jest.mock('../../hooks/useSaveProfileSettings', () => ({
 
 describe('ModalCloseProfileSettings', () => {
   const mockSetSelectedProfile = jest.fn();
-  const mockSetIsCreating = jest.fn();
+  const mockSetMode = jest.fn();
   const mockSetSelectedProfileSettingsMeta = jest.fn();
   const mockSetIsPreferredProfileSettings = jest.fn();
   const mockSetSettingsName = jest.fn();
@@ -61,6 +63,38 @@ describe('ModalCloseProfileSettings', () => {
     expect(screen.getByTestId('modal-close-profile-settings')).toBeInTheDocument();
   });
 
+  it('renders modal component with component warning when not in landing mode', () => {
+    setInitialGlobalState([
+      {
+        store: useManageProfileSettingsState,
+        state: {
+          mode: ProfileSettingsMode.Editing,
+        },
+      },
+    ]);
+
+    renderComponent();
+
+    expect(screen.getByTestId('modal-close-profile-settings')).toBeInTheDocument();
+    expect(screen.getByText('ld.unsavedProfileNote')).toBeInTheDocument();
+  });
+
+  it('renders modal component without component warning when in landing mode', () => {
+    setInitialGlobalState([
+      {
+        store: useManageProfileSettingsState,
+        state: {
+          mode: ProfileSettingsMode.Landing,
+        },
+      },
+    ]);
+
+    renderComponent();
+
+    expect(screen.getByTestId('modal-close-profile-settings')).toBeInTheDocument();
+    expect(screen.queryByText('ld.unsavedProfileNote')).not.toBeInTheDocument();
+  });
+
   it('when closing modal, do not save or navigate', async () => {
     renderComponent();
 
@@ -125,6 +159,7 @@ describe('ModalCloseProfileSettings', () => {
             resourceTypeURL: 'test-resource',
           },
           setSelectedProfile: mockSetSelectedProfile,
+          setMode: mockSetMode,
         },
       },
       {
@@ -144,6 +179,7 @@ describe('ModalCloseProfileSettings', () => {
       expect(mockSetSelectedProfile).toHaveBeenCalled();
       expect(mockSetIsManageProfileSettingsShowEditor).toHaveBeenCalledWith(true);
       expect(mockSetIsManageProfileSettingsShowProfiles).toHaveBeenCalledWith(false);
+      expect(mockSetMode).toHaveBeenCalledWith(ProfileSettingsMode.Landing);
     });
   });
 
@@ -190,7 +226,7 @@ describe('ModalCloseProfileSettings', () => {
           isClosingNext: false,
           nextSelectedProfile: null,
           isCreatingSettingsNext: true,
-          setIsCreating: mockSetIsCreating,
+          setMode: mockSetMode,
           setSelectedProfileSettingsMeta: mockSetSelectedProfileSettingsMeta,
           setIsPreferredProfileSettings: mockSetIsPreferredProfileSettings,
         },
@@ -202,7 +238,7 @@ describe('ModalCloseProfileSettings', () => {
     fireEvent.click(screen.getByTestId('modal-button-submit'));
 
     await waitFor(() => {
-      expect(mockSetIsCreating).toHaveBeenCalledWith(true);
+      expect(mockSetMode).toHaveBeenCalledWith(ProfileSettingsMode.Creating);
       expect(mockSetSelectedProfileSettingsMeta).toHaveBeenCalledWith(null);
       expect(mockSetIsPreferredProfileSettings).toHaveBeenCalledWith(false);
     });
@@ -219,7 +255,7 @@ describe('ModalCloseProfileSettings', () => {
           isCreatingSettingsNext: false,
           isEditingSettingsNext: true,
           nextSelectedSettingsMeta: settingsMeta,
-          setIsCreating: mockSetIsCreating,
+          setMode: mockSetMode,
           setSelectedProfileSettingsMeta: mockSetSelectedProfileSettingsMeta,
           setSettingsName: mockSetSettingsName,
         },
@@ -231,7 +267,7 @@ describe('ModalCloseProfileSettings', () => {
     fireEvent.click(screen.getByTestId('modal-button-submit'));
 
     await waitFor(() => {
-      expect(mockSetIsCreating).toHaveBeenCalledWith(false);
+      expect(mockSetMode).toHaveBeenCalledWith(ProfileSettingsMode.Editing);
       expect(mockSetSelectedProfileSettingsMeta).toHaveBeenCalledWith(settingsMeta);
       expect(mockSetSettingsName).toHaveBeenCalledWith('edit-name');
     });

src/features/manageProfileSettings/components/ModalCloseProfileSettings/ModalCloseProfileSettings.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 
+import { ProfileSettingsMode } from '@/common/constants/profileSettings.constants';
 import { useBackToSearchUri } from '@/common/hooks/useBackToSearchUri';
 import { Modal } from '@/components/Modal';
 
@@ -21,13 +22,14 @@ export const ModalCloseProfileSettings: FC<ModalCloseProfileSettingsProps> = ({
   const navigate = useNavigate();
   const searchResultsUri = useBackToSearchUri();
   const {
+    mode,
     isClosingNext,
     setIsClosingNext,
     nextSelectedProfile,
     setNextSelectedProfile,
     setSelectedProfile,
     setIsModified,
-    setIsCreating,
+    setMode,
     isCreatingSettingsNext,
     setIsCreatingSettingsNext,
     isEditingSettingsNext,
@@ -38,14 +40,15 @@ export const ModalCloseProfileSettings: FC<ModalCloseProfileSettingsProps> = ({
     setSettingsName,
     setIsPreferredProfileSettings,
   } = useManageProfileSettingsState([
+    'mode',
     'isClosingNext',
     'setIsClosingNext',
     'nextSelectedProfile',
     'setNextSelectedProfile',
     'setSelectedProfile',
     'resetSelectedProfileSettingsMeta',
     'setIsModified',
-    'setIsCreating',
+    'setMode',
     'isCreatingSettingsNext',
     'setIsCreatingSettingsNext',
     'isEditingSettingsNext',
@@ -73,17 +76,19 @@ export const ModalCloseProfileSettings: FC<ModalCloseProfileSettingsProps> = ({
       resetSettings();
       setIsManageProfileSettingsShowProfiles(false);
       setIsManageProfileSettingsShowEditor(true);
+      setMode(ProfileSettingsMode.Landing);
     } else if (isCreatingSettingsNext) {
-      setIsCreating(true);
+      setMode(ProfileSettingsMode.Creating);
       setSelectedProfileSettingsMeta(null);
       setSettingsName('');
       setIsPreferredProfileSettings(false);
       setIsCreatingSettingsNext(false);
     } else if (isEditingSettingsNext) {
-      setIsCreating(false);
+      setMode(ProfileSettingsMode.Editing);
       resetSettings();
       setSelectedProfileSettingsMeta(nextSelectedSettingsMeta);
       setSettingsName(nextSelectedSettingsMeta?.name ?? '');
+      setIsPreferredProfileSettings(false);
       setIsEditingSettingsNext(false);
       setNextSelectedSettingsMeta(null);
     }
@@ -124,9 +129,11 @@ export const ModalCloseProfileSettings: FC<ModalCloseProfileSettingsProps> = ({
       <p>
         <FormattedMessage id="ld.unsavedProfilePrompt" />
       </p>
-      <p>
-        <FormattedMessage id="ld.unsavedProfileNote" />
-      </p>
+      {mode !== ProfileSettingsMode.Landing && (
+        <p>
+          <FormattedMessage id="ld.unsavedProfileNote" />
+        </p>
+      )}
     </Modal>
   );
 };