2363 refactor the dialog component to use the new scope architecture (#2415)

* create Scope

* refactor dialog manager

* finished refactoring

* modify closeDialog to use a recoilcallback

* modify according to comments + add effet component

* fix spreadsheet import stories

front/src/index.tsx

@@ -7,7 +7,8 @@ import { RecoilRoot } from 'recoil';
 import { ApolloProvider } from '@/apollo/components/ApolloProvider';
 import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
 import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
-import { DialogProvider } from '@/ui/feedback/dialog/components/DialogProvider';
+import { DialogManager } from '@/ui/feedback/dialog-manager/components/DialogManager';
+import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
 import { SnackBarProvider } from '@/ui/feedback/snack-bar/components/SnackBarProvider';
 import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
 import { ThemeType } from '@/ui/theme/constants/theme';
@@ -38,11 +39,13 @@ root.render(
                 <PageChangeEffect />
                 <AppThemeProvider>
                   <SnackBarProvider>
-                    <DialogProvider>
+                    <DialogManagerScope dialogManagerScopeId="dialog-manager">
-                      <StrictMode>
+                      <DialogManager>
-                        <App />
+                        <StrictMode>
-                      </StrictMode>
+                          <App />
-                    </DialogProvider>
+                        </StrictMode>
+                      </DialogManager>
+                    </DialogManagerScope>
                   </SnackBarProvider>
                 </AppThemeProvider>
               </ApolloMetadataClientProvider>

front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { IconX } from '@/ui/display/icon/index';
-import { useDialog } from '@/ui/feedback/dialog//hooks/useDialog';
+import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
 
@@ -33,7 +33,7 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
     initialStep,
   });
 
-  const { enqueueDialog } = useDialog();
+  const { enqueueDialog } = useDialogManager();
 
   const handleClose = () => {
     if (activeStep === -1) {

front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx

@@ -11,7 +11,7 @@ import { normalizeTableData } from '@/spreadsheet-import/utils/normalizeTableDat
 import { setColumn } from '@/spreadsheet-import/utils/setColumn';
 import { setIgnoreColumn } from '@/spreadsheet-import/utils/setIgnoreColumn';
 import { setSubColumn } from '@/spreadsheet-import/utils/setSubColumn';
-import { useDialog } from '@/ui/feedback/dialog//hooks/useDialog';
+import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { useSnackBar } from '@/ui/feedback/snack-bar/hooks/useSnackBar';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 
@@ -112,7 +112,7 @@ export const MatchColumnsStep = <T extends string>({
   headerValues,
   onContinue,
 }: MatchColumnsStepProps<T>) => {
-  const { enqueueDialog } = useDialog();
+  const { enqueueDialog } = useDialogManager();
   const { enqueueSnackBar } = useSnackBar();
   const dataExample = data.slice(0, 2);
   const { fields, autoMapHeaders, autoMapDistance } =

front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -9,7 +9,7 @@ import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpre
 import { Data } from '@/spreadsheet-import/types';
 import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations';
 import { IconTrash } from '@/ui/display/icon';
-import { useDialog } from '@/ui/feedback/dialog//hooks/useDialog';
+import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { Button } from '@/ui/input/button/components/Button';
 import { Toggle } from '@/ui/input/components/Toggle';
 import { Modal } from '@/ui/layout/modal/components/Modal';
@@ -69,7 +69,7 @@ export const ValidationStep = <T extends string>({
   file,
   onSubmitStart,
 }: ValidationStepProps<T>) => {
-  const { enqueueDialog } = useDialog();
+  const { enqueueDialog } = useDialogManager();
   const { fields, onClose, onSubmit, rowHook, tableHook } =
     useSpreadsheetImportInternal<T>();
 

front/src/modules/spreadsheet-import/steps/components/__stories__/MatchColumns.stories.tsx

@@ -4,6 +4,7 @@ import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
 import { Providers } from '@/spreadsheet-import/components/Providers';
 import { MatchColumnsStep } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import { mockRsiValues } from '@/spreadsheet-import/tests/mockRsiValues';
+import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
 
 const meta: Meta<typeof MatchColumnsStep> = {
   title: 'Modules/SpreadsheetImport/MatchColumnsStep',
@@ -57,13 +58,15 @@ const mockData = [
 ];
 
 export const Default = () => (
-  <Providers values={mockRsiValues}>
+  <DialogManagerScope dialogManagerScopeId="dialog-manager">
-    <ModalWrapper isOpen={true} onClose={() => null}>
+    <Providers values={mockRsiValues}>
-      <MatchColumnsStep
+      <ModalWrapper isOpen={true} onClose={() => null}>
-        headerValues={mockData[0] as string[]}
+        <MatchColumnsStep
-        data={mockData.slice(1)}
+          headerValues={mockData[0] as string[]}
-        onContinue={() => null}
+          data={mockData.slice(1)}
-      />
+          onContinue={() => null}
-    </ModalWrapper>
+        />
-  </Providers>
+      </ModalWrapper>
+    </Providers>
+  </DialogManagerScope>
 );

front/src/modules/spreadsheet-import/steps/components/__stories__/SelectHeader.stories.tsx

@@ -7,6 +7,7 @@ import {
   headerSelectionTableFields,
   mockRsiValues,
 } from '@/spreadsheet-import/tests/mockRsiValues';
+import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
 
 const meta: Meta<typeof SelectHeaderStep> = {
   title: 'Modules/SpreadsheetImport/SelectHeaderStep',
@@ -19,12 +20,14 @@ const meta: Meta<typeof SelectHeaderStep> = {
 export default meta;
 
 export const Default = () => (
-  <Providers values={mockRsiValues}>
+  <DialogManagerScope dialogManagerScopeId="dialog-manager">
-    <ModalWrapper isOpen={true} onClose={() => null}>
+    <Providers values={mockRsiValues}>
-      <SelectHeaderStep
+      <ModalWrapper isOpen={true} onClose={() => null}>
-        data={headerSelectionTableFields}
+        <SelectHeaderStep
-        onContinue={() => Promise.resolve()}
+          data={headerSelectionTableFields}
-      />
+          onContinue={() => Promise.resolve()}
-    </ModalWrapper>
+        />
-  </Providers>
+      </ModalWrapper>
+    </Providers>
+  </DialogManagerScope>
 );

front/src/modules/spreadsheet-import/steps/components/__stories__/SelectSheet.stories.tsx

@@ -4,6 +4,7 @@ import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
 import { Providers } from '@/spreadsheet-import/components/Providers';
 import { SelectSheetStep } from '@/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep';
 import { mockRsiValues } from '@/spreadsheet-import/tests/mockRsiValues';
+import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
 
 const meta: Meta<typeof SelectSheetStep> = {
   title: 'Modules/SpreadsheetImport/SelectSheetStep',
@@ -18,12 +19,14 @@ export default meta;
 const sheetNames = ['Sheet1', 'Sheet2', 'Sheet3'];
 
 export const Default = () => (
-  <Providers values={mockRsiValues}>
+  <DialogManagerScope dialogManagerScopeId="dialog-manager">
-    <ModalWrapper isOpen={true} onClose={() => null}>
+    <Providers values={mockRsiValues}>
-      <SelectSheetStep
+      <ModalWrapper isOpen={true} onClose={() => null}>
-        sheetNames={sheetNames}
+        <SelectSheetStep
-        onContinue={() => Promise.resolve()}
+          sheetNames={sheetNames}
-      />
+          onContinue={() => Promise.resolve()}
-    </ModalWrapper>
+        />
-  </Providers>
+      </ModalWrapper>
+    </Providers>
+  </DialogManagerScope>
 );

front/src/modules/spreadsheet-import/steps/components/__stories__/Upload.stories.tsx

@@ -4,6 +4,7 @@ import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
 import { Providers } from '@/spreadsheet-import/components/Providers';
 import { UploadStep } from '@/spreadsheet-import/steps/components/UploadStep/UploadStep';
 import { mockRsiValues } from '@/spreadsheet-import/tests/mockRsiValues';
+import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
 
 const meta: Meta<typeof UploadStep> = {
   title: 'Modules/SpreadsheetImport/UploadStep',
@@ -16,9 +17,11 @@ const meta: Meta<typeof UploadStep> = {
 export default meta;
 
 export const Default = () => (
-  <Providers values={mockRsiValues}>
+  <DialogManagerScope dialogManagerScopeId="dialog-manager">
-    <ModalWrapper isOpen={true} onClose={() => null}>
+    <Providers values={mockRsiValues}>
-      <UploadStep onContinue={() => Promise.resolve()} />
+      <ModalWrapper isOpen={true} onClose={() => null}>
-    </ModalWrapper>
+        <UploadStep onContinue={() => Promise.resolve()} />
-  </Providers>
+      </ModalWrapper>
+    </Providers>
+  </DialogManagerScope>
 );

front/src/modules/spreadsheet-import/steps/components/__stories__/Validation.stories.tsx

@@ -7,6 +7,7 @@ import {
   editableTableInitialData,
   mockRsiValues,
 } from '@/spreadsheet-import/tests/mockRsiValues';
+import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
 
 const meta: Meta<typeof ValidationStep> = {
   title: 'Modules/SpreadsheetImport/ValidationStep',
@@ -21,9 +22,11 @@ export default meta;
 const file = new File([''], 'file.csv');
 
 export const Default = () => (
-  <Providers values={mockRsiValues}>
+  <DialogManagerScope dialogManagerScopeId="dialog-manager">
-    <ModalWrapper isOpen={true} onClose={() => null}>
+    <Providers values={mockRsiValues}>
-      <ValidationStep initialData={editableTableInitialData} file={file} />
+      <ModalWrapper isOpen={true} onClose={() => null}>
-    </ModalWrapper>
+        <ValidationStep initialData={editableTableInitialData} file={file} />
-  </Providers>
+      </ModalWrapper>
+    </Providers>
+  </DialogManagerScope>
 );

front/src/modules/ui/feedback/dialog-manager/components/DialogManager.tsx

@@ -0,0 +1,24 @@
+import { useDialogManagerScopedStates } from '../hooks/internal/useDialogManagerScopedStates';
+import { useDialogManager } from '../hooks/useDialogManager';
+
+import { Dialog } from './Dialog';
+import { DialogManagerEffect } from './DialogManagerEffect';
+
+export const DialogManager = ({ children }: React.PropsWithChildren) => {
+  const { dialogInternal } = useDialogManagerScopedStates();
+  const { closeDialog } = useDialogManager();
+
+  return (
+    <>
+      <DialogManagerEffect />
+      {children}
+      {dialogInternal.queue.map(({ buttons, children, id, message, title }) => (
+        <Dialog
+          key={id}
+          {...{ title, message, buttons, id, children }}
+          onClose={() => closeDialog(id)}
+        />
+      ))}
+    </>
+  );
+};

front/src/modules/ui/feedback/dialog-manager/components/DialogManagerEffect.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+
+import { useDialogManagerScopedStates } from '../hooks/internal/useDialogManagerScopedStates';
+import { DialogHotkeyScope } from '../types/DialogHotkeyScope';
+
+export const DialogManagerEffect = () => {
+  const { dialogInternal } = useDialogManagerScopedStates();
+
+  const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
+
+  useEffect(() => {
+    if (dialogInternal.queue.length === 0) {
+      return;
+    }
+
+    setHotkeyScopeAndMemorizePreviousScope(DialogHotkeyScope.Dialog);
+  }, [dialogInternal.queue, setHotkeyScopeAndMemorizePreviousScope]);
+
+  return <></>;
+};

front/src/modules/ui/feedback/dialog-manager/hooks/internal/useDialogManagerScopedStates.ts

@@ -0,0 +1,25 @@
+import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+import { DialogManagerScopeInternalContext } from '../../scopes/scope-internal-context/DialogManagerScopeInternalContext';
+import { dialogInternalScopedState } from '../../states/dialogInternalScopedState';
+
+type useDialogManagerScopedStatesProps = {
+  dialogManagerScopeId?: string;
+};
+
+export const useDialogManagerScopedStates = (
+  props?: useDialogManagerScopedStatesProps,
+) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    DialogManagerScopeInternalContext,
+    props?.dialogManagerScopeId,
+  );
+
+  const [dialogInternal, setDialogInternal] = useRecoilScopedStateV2(
+    dialogInternalScopedState,
+    scopeId,
+  );
+
+  return { dialogInternal, setDialogInternal };
+};

front/src/modules/ui/feedback/dialog-manager/hooks/useDialogManager.ts

@@ -0,0 +1,62 @@
+import { useRecoilCallback } from 'recoil';
+import { v4 } from 'uuid';
+
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+import { DialogManagerScopeInternalContext } from '../scopes/scope-internal-context/DialogManagerScopeInternalContext';
+import { dialogInternalScopedState } from '../states/dialogInternalScopedState';
+import { DialogOptions } from '../types/DialogOptions';
+
+type useDialogManagerProps = {
+  dialogManagerScopeId?: string;
+};
+
+export const useDialogManager = (props?: useDialogManagerProps) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    DialogManagerScopeInternalContext,
+    props?.dialogManagerScopeId,
+  );
+
+  const { goBackToPreviousHotkeyScope } = usePreviousHotkeyScope();
+
+  const closeDialog = useRecoilCallback(
+    ({ set }) =>
+      (id: string) => {
+        set(dialogInternalScopedState({ scopeId: scopeId }), (prevState) => ({
+          ...prevState,
+          queue: prevState.queue.filter((snackBar) => snackBar.id !== id),
+        }));
+        goBackToPreviousHotkeyScope();
+      },
+    [goBackToPreviousHotkeyScope, scopeId],
+  );
+
+  const setDialogQueue = useRecoilCallback(
+    ({ set }) =>
+      (newValue) =>
+        set(dialogInternalScopedState({ scopeId: scopeId }), (prev) => {
+          if (prev.queue.length >= prev.maxQueue) {
+            return {
+              ...prev,
+              queue: [...prev.queue.slice(1), newValue] as DialogOptions[],
+            };
+          }
+
+          return {
+            ...prev,
+            queue: [...prev.queue, newValue] as DialogOptions[],
+          };
+        }),
+    [scopeId],
+  );
+
+  const enqueueDialog = (options?: Omit<DialogOptions, 'id'>) => {
+    setDialogQueue({
+      id: v4(),
+      ...options,
+    });
+  };
+
+  return { closeDialog, enqueueDialog };
+};

front/src/modules/ui/feedback/dialog-manager/scopes/DialogManagerScope.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+import { DialogManagerScopeInternalContext } from './scope-internal-context/DialogManagerScopeInternalContext';
+
+type DialogManagerScopeProps = {
+  children: ReactNode;
+  dialogManagerScopeId: string;
+};
+
+export const DialogManagerScope = ({
+  children,
+  dialogManagerScopeId,
+}: DialogManagerScopeProps) => {
+  return (
+    <DialogManagerScopeInternalContext.Provider
+      value={{
+        scopeId: dialogManagerScopeId,
+      }}
+    >
+      {children}
+    </DialogManagerScopeInternalContext.Provider>
+  );
+};

front/src/modules/ui/feedback/dialog-manager/scopes/scope-internal-context/DialogManagerScopeInternalContext.ts

@@ -0,0 +1,7 @@
+import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
+
+type DialogManagerScopeInternalContextProps = ScopedStateKey;
+
+export const DialogManagerScopeInternalContext =
+  createScopeInternalContext<DialogManagerScopeInternalContextProps>();

front/src/modules/ui/feedback/dialog-manager/states/dialogInternalScopedState.ts

@@ -0,0 +1,16 @@
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+
+import { DialogOptions } from '../types/DialogOptions';
+
+type DialogState = {
+  maxQueue: number;
+  queue: DialogOptions[];
+};
+
+export const dialogInternalScopedState = createScopedState<DialogState>({
+  key: 'dialog/internal-state',
+  defaultValue: {
+    maxQueue: 2,
+    queue: [],
+  },
+});

front/src/modules/ui/feedback/dialog-manager/types/DialogOptions.ts

@@ -0,0 +1,5 @@
+import { DialogProps } from '../components/Dialog';
+
+export type DialogOptions = DialogProps & {
+  id: string;
+};

front/src/modules/ui/feedback/dialog/components/DialogProvider.tsx

@@ -1,49 +0,0 @@
-import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
-
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-
-import { dialogInternalState } from '../states/dialogState';
-import { DialogHotkeyScope } from '../types/DialogHotkeyScope';
-
-import { Dialog } from './Dialog';
-
-export const DialogProvider = ({ children }: React.PropsWithChildren) => {
-  const [dialogInternal, setDialogInternal] =
-    useRecoilState(dialogInternalState);
-
-  const {
-    setHotkeyScopeAndMemorizePreviousScope,
-    goBackToPreviousHotkeyScope,
-  } = usePreviousHotkeyScope();
-
-  // Handle dialog close event
-  const handleDialogClose = (id: string) => {
-    setDialogInternal((prevState) => ({
-      ...prevState,
-      queue: prevState.queue.filter((snackBar) => snackBar.id !== id),
-    }));
-    goBackToPreviousHotkeyScope();
-  };
-
-  useEffect(() => {
-    if (dialogInternal.queue.length === 0) {
-      return;
-    }
-
-    setHotkeyScopeAndMemorizePreviousScope(DialogHotkeyScope.Dialog);
-  }, [dialogInternal.queue, setHotkeyScopeAndMemorizePreviousScope]);
-
-  return (
-    <>
-      {children}
-      {dialogInternal.queue.map(({ buttons, children, id, message, title }) => (
-        <Dialog
-          key={id}
-          {...{ title, message, buttons, id, children }}
-          onClose={() => handleDialogClose(id)}
-        />
-      ))}
-    </>
-  );
-};

front/src/modules/ui/feedback/dialog/hooks/useDialog.ts

@@ -1,17 +0,0 @@
-import { useSetRecoilState } from 'recoil';
-import { v4 as uuidv4 } from 'uuid';
-
-import { DialogOptions, dialogSetQueueState } from '../states/dialogState';
-
-export const useDialog = () => {
-  const setDialogQueue = useSetRecoilState(dialogSetQueueState);
-
-  const enqueueDialog = (options?: Omit<DialogOptions, 'id'>) => {
-    setDialogQueue({
-      id: uuidv4(),
-      ...options,
-    });
-  };
-
-  return { enqueueDialog };
-};

front/src/modules/ui/feedback/dialog/states/dialogState.ts

@@ -1,39 +0,0 @@
-import { atom, selector } from 'recoil';
-
-import { DialogProps } from '../components/Dialog';
-
-export type DialogOptions = DialogProps & {
-  id: string;
-};
-
-export type DialogState = {
-  maxQueue: number;
-  queue: DialogOptions[];
-};
-
-export const dialogInternalState = atom<DialogState>({
-  key: 'dialog/internal-state',
-  default: {
-    maxQueue: 2,
-    queue: [],
-  },
-});
-
-export const dialogSetQueueState = selector<DialogOptions | null>({
-  key: 'dialog/queue-state',
-  get: ({ get: _get }) => null, // We don't care about getting the value
-  set: ({ set }, newValue) =>
-    set(dialogInternalState, (prev) => {
-      if (prev.queue.length >= prev.maxQueue) {
-        return {
-          ...prev,
-          queue: [...prev.queue.slice(1), newValue] as DialogOptions[],
-        };
-      }
-
-      return {
-        ...prev,
-        queue: [...prev.queue, newValue] as DialogOptions[],
-      };
-    }),
-});