UILD-451: Authority warning message displayed on save (#93)

Author: SKarolFolio

src/common/hooks/useModalControls.ts

@@ -7,5 +7,9 @@ export const useModalControls = () => {
     !isModalOpen && setIsModalOpen(true);
   };
 
-  return { isModalOpen, setIsModalOpen, openModal };
+  const closeModal = () => {
+    isModalOpen && setIsModalOpen(false);
+  };
+
+  return { isModalOpen, setIsModalOpen, openModal, closeModal };
 };

src/common/hooks/useSaveRecord.ts

@@ -0,0 +1,24 @@
+import { useSearchParams } from 'react-router-dom';
+import { useRecordStatus } from '@common/hooks/useRecordStatus';
+import { useRecordControls } from '@common/hooks/useRecordControls';
+import { useModalControls } from '@common/hooks/useModalControls';
+import { QueryParams } from '@common/constants/routes.constants';
+import { useStatusState } from '@src/store';
+
+export const useSaveRecord = (primary: boolean) => {
+  const { isRecordEdited } = useStatusState();
+  const { hasBeenSaved } = useRecordStatus();
+  const { saveRecord } = useRecordControls();
+  const { isModalOpen, openModal, closeModal } = useModalControls();
+  const [searchParams] = useSearchParams();
+
+  const isButtonDisabled = !searchParams.get(QueryParams.CloneOf) && !hasBeenSaved && !isRecordEdited;
+
+  return {
+    isButtonDisabled,
+    isModalOpen,
+    openModal,
+    closeModal,
+    saveRecord: () => saveRecord({ isNavigatingBack: primary }),
+  };
+};

src/common/hooks/useSaveRecordWarning.ts

@@ -0,0 +1,20 @@
+import { useUIState, useInputsState } from '@src/store';
+import { TYPE_URIS } from '@common/constants/bibframe.constants';
+
+const hasSelectedUncontrolledAuthority = (userValues: UserValues) =>
+  Object.values(userValues).some((value: UserValue) =>
+    value.contents.some(content => content?.meta?.isPreferred !== undefined && !content?.meta?.isPreferred),
+  );
+
+export const useSaveRecordWarning = () => {
+  const { hasShownAuthorityWarning, setHasShownAuthorityWarning } = useUIState();
+  const { userValues, selectedRecordBlocks } = useInputsState();
+  const isWorkEditPage = selectedRecordBlocks?.block === TYPE_URIS.WORK;
+  const shouldDisplayWarningMessage =
+    isWorkEditPage && !hasShownAuthorityWarning && hasSelectedUncontrolledAuthority(userValues);
+
+  return {
+    shouldDisplayWarningMessage,
+    setHasShownAuthorityWarning,
+  };
+};

src/components/ModalUncontrolledAuthorities/ModalUncontrolledAuthorities.scss

@@ -0,0 +1,4 @@
+.uncontrolled-authorities-contents {
+  padding: 1.5rem 0;
+  white-space: pre-line;
+}

src/components/ModalUncontrolledAuthorities/ModalUncontrolledAuthorities.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Modal } from '@components/Modal';
+import './ModalUncontrolledAuthorities.scss';
+
+type ModalUncontrolledAuthoritiesProps = {
+  isOpen: boolean;
+  onCancel: VoidFunction;
+  onSubmit: VoidFunction;
+  onClose: VoidFunction;
+};
+
+export const ModalUncontrolledAuthorities: FC<ModalUncontrolledAuthoritiesProps> = ({
+  isOpen,
+  onCancel,
+  onSubmit,
+  onClose,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      title={formatMessage({ id: 'ld.modal.uncontrolledAuthoritiesWarning.title' })}
+      submitButtonLabel={formatMessage({ id: 'ld.continue' })}
+      cancelButtonLabel={formatMessage({ id: 'ld.cancel' })}
+      onClose={onClose}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      className="modal-uncontrolled-authorities-warning"
+    >
+      <div className="uncontrolled-authorities-contents" data-testid="modal-uncontrolled-authorities-warning">
+        <FormattedMessage id="ld.modal.uncontrolledAuthoritiesWarning.body" />
+      </div>
+    </Modal>
+  );
+};

src/components/ModalUncontrolledAuthorities/index.ts

@@ -0,0 +1 @@
+export { ModalUncontrolledAuthorities } from './ModalUncontrolledAuthorities';

src/components/RecordControls/RecordControls.tsx

@@ -3,10 +3,12 @@ import { SaveRecord } from '@components/SaveRecord';
 import { CloseRecord } from '@components/CloseRecord';
 import './RecordControls.scss';
 
-export const RecordControls = memo(() => (
-  <div className="record-controls">
-    <CloseRecord />
-    <SaveRecord primary />
-    <SaveRecord />
-  </div>
-));
+export const RecordControls = memo(() => {
+  return (
+    <div className="record-controls">
+      <CloseRecord />
+      <SaveRecord primary />
+      <SaveRecord />
+    </div>
+  );
+});

src/components/SaveRecord/SaveRecord.tsx

@@ -1,27 +1,55 @@
-import { memo } from 'react';
+import { FC, memo } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSearchParams } from 'react-router-dom';
-import { useRecordControls } from '@common/hooks/useRecordControls';
 import { Button, ButtonType } from '@components/Button';
-import { useRecordStatus } from '@common/hooks/useRecordStatus';
-import { QueryParams } from '@common/constants/routes.constants';
-import { useStatusState } from '@src/store';
+import { ModalUncontrolledAuthorities } from '@components/ModalUncontrolledAuthorities';
+import { useSaveRecordWarning } from '@common/hooks/useSaveRecordWarning';
+import { useSaveRecord } from '@common/hooks/useSaveRecord';
 
-const SaveRecord = ({ primary = false }) => {
-  const { isRecordEdited } = useStatusState();
-  const { saveRecord } = useRecordControls();
-  const { hasBeenSaved } = useRecordStatus();
-  const [searchParams] = useSearchParams();
+type SaveRecordProps = {
+  primary?: boolean;
+};
+
+const SaveRecord: FC<SaveRecordProps> = ({ primary = false }) => {
+  const { shouldDisplayWarningMessage, setHasShownAuthorityWarning } = useSaveRecordWarning();
+  const { isButtonDisabled, isModalOpen, openModal, closeModal, saveRecord } = useSaveRecord(primary);
+
+  const handleButtonClick = () => {
+    if (shouldDisplayWarningMessage) {
+      openModal();
+    } else {
+      handleSave();
+    }
+  };
+
+  const handleSave = () => {
+    saveRecord();
+    handleCloseModal();
+  };
+
+  const handleCloseModal = () => {
+    if (shouldDisplayWarningMessage) {
+      setHasShownAuthorityWarning(true);
+    }
+    closeModal();
+  };
 
   return (
-    <Button
-      data-testid={`save-record${primary ? '-and-close' : '-and-keep-editing'}`}
-      type={primary ? ButtonType.Primary : ButtonType.Highlighted}
-      onClick={() => saveRecord({ isNavigatingBack: primary })}
-      disabled={!searchParams.get(QueryParams.CloneOf) && !hasBeenSaved && !isRecordEdited}
-    >
-      <FormattedMessage id={!primary ? 'ld.saveAndKeepEditing' : 'ld.saveAndClose'} />
-    </Button>
+    <>
+      <Button
+        data-testid={`save-record${primary ? '-and-close' : '-and-keep-editing'}`}
+        type={primary ? ButtonType.Primary : ButtonType.Highlighted}
+        onClick={handleButtonClick}
+        disabled={isButtonDisabled}
+      >
+        <FormattedMessage id={primary ? 'ld.saveAndClose' : 'ld.saveAndKeepEditing'} />
+      </Button>
+      <ModalUncontrolledAuthorities
+        isOpen={isModalOpen}
+        onCancel={handleCloseModal}
+        onSubmit={handleSave}
+        onClose={handleCloseModal}
+      />
+    </>
   );
 };
 

src/store/stores/ui.ts

@@ -12,7 +12,8 @@ export type UIState = SliceState<'isAdvancedSearchOpen', boolean> &
   SliceState<'collapsibleEntries', UIEntries> &
   SliceState<'currentlyEditedEntityBfid', UIEntries> &
   SliceState<'fullDisplayComponentType', FullDisplayType> &
-  SliceState<'currentlyPreviewedEntityBfid', UIEntries>;
+  SliceState<'currentlyPreviewedEntityBfid', UIEntries> &
+  SliceState<'hasShownAuthorityWarning', boolean>;
 
 const STORE_NAME = 'UI';
 
@@ -44,6 +45,9 @@ const sliceConfigs: SliceConfigs = {
   currentlyPreviewedEntityBfid: {
     initialValue: new Set(),
   },
+  hasShownAuthorityWarning: {
+    initialValue: false,
+  },
 };
 
 export const useUIStore = createStoreFactory<UIState, SliceConfigs>(sliceConfigs, STORE_NAME);

src/test/__tests__/common/hooks/useSaveRecord.test.ts

@@ -0,0 +1,78 @@
+import { renderHook } from '@testing-library/react';
+import { useSearchParams } from 'react-router-dom';
+import { useSaveRecord } from '@common/hooks/useSaveRecord';
+import { useStatusStore } from '@src/store';
+import { setInitialGlobalState } from '@src/test/__mocks__/store';
+
+const mockSaveRecord = jest.fn();
+const mockOpenModal = jest.fn();
+const mockCloseModal = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useSearchParams: jest.fn(),
+}));
+
+jest.mock('@common/hooks/useRecordStatus', () => ({
+  useRecordStatus: () => ({
+    hasBeenSaved: false,
+  }),
+}));
+
+jest.mock('@common/hooks/useRecordControls', () => ({
+  useRecordControls: () => ({
+    saveRecord: mockSaveRecord,
+  }),
+}));
+
+jest.mock('@common/hooks/useModalControls', () => ({
+  useModalControls: () => ({
+    isModalOpen: false,
+    openModal: mockOpenModal,
+    closeModal: mockCloseModal,
+  }),
+}));
+
+describe('useSaveRecord', () => {
+  const renderUseSaveRecordHook = (isRecordEdited = false, searchParamsCloneOf?: string) => {
+    (useSearchParams as jest.Mock).mockReturnValue([{ get: () => searchParamsCloneOf }]);
+
+    setInitialGlobalState([
+      {
+        store: useStatusStore,
+        state: { isRecordEdited },
+      },
+    ]);
+
+    return renderHook(() => useSaveRecord(true));
+  };
+
+  test('isButtonDisabled is false when record is edited', () => {
+    const { result } = renderUseSaveRecordHook(true);
+
+    expect(result.current.isButtonDisabled).toBeFalsy();
+  });
+
+  test('isButtonDisabled is false when cloning record', () => {
+    const { result } = renderUseSaveRecordHook(false, 'cloneOfId');
+
+    expect(result.current.isButtonDisabled).toBeFalsy();
+  });
+
+  test('saveRecord calls useRecordControls.saveRecord with correct params', () => {
+    const { result } = renderUseSaveRecordHook(true);
+
+    result.current.saveRecord();
+
+    expect(mockSaveRecord).toHaveBeenCalledWith({ isNavigatingBack: true });
+  });
+
+  test('modal controls are exposed correctly', () => {
+    const { result } = renderUseSaveRecordHook();
+
+    result.current.openModal();
+    expect(mockOpenModal).toHaveBeenCalled();
+
+    result.current.closeModal();
+    expect(mockCloseModal).toHaveBeenCalled();
+  });
+});