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/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}>
-    <ModalWrapper isOpen={true} onClose={() => null}>
-      <MatchColumnsStep
-        headerValues={mockData[0] as string[]}
-        data={mockData.slice(1)}
-        onContinue={() => null}
-      />
-    </ModalWrapper>
-  </Providers>
+  <DialogManagerScope dialogManagerScopeId="dialog-manager">
+    <Providers values={mockRsiValues}>
+      <ModalWrapper isOpen={true} onClose={() => null}>
+        <MatchColumnsStep
+          headerValues={mockData[0] as string[]}
+          data={mockData.slice(1)}
+          onContinue={() => null}
+        />
+      </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}>
-    <ModalWrapper isOpen={true} onClose={() => null}>
-      <SelectHeaderStep
-        data={headerSelectionTableFields}
-        onContinue={() => Promise.resolve()}
-      />
-    </ModalWrapper>
-  </Providers>
+  <DialogManagerScope dialogManagerScopeId="dialog-manager">
+    <Providers values={mockRsiValues}>
+      <ModalWrapper isOpen={true} onClose={() => null}>
+        <SelectHeaderStep
+          data={headerSelectionTableFields}
+          onContinue={() => Promise.resolve()}
+        />
+      </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}>
-    <ModalWrapper isOpen={true} onClose={() => null}>
-      <SelectSheetStep
-        sheetNames={sheetNames}
-        onContinue={() => Promise.resolve()}
-      />
-    </ModalWrapper>
-  </Providers>
+  <DialogManagerScope dialogManagerScopeId="dialog-manager">
+    <Providers values={mockRsiValues}>
+      <ModalWrapper isOpen={true} onClose={() => null}>
+        <SelectSheetStep
+          sheetNames={sheetNames}
+          onContinue={() => Promise.resolve()}
+        />
+      </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}>
-    <ModalWrapper isOpen={true} onClose={() => null}>
-      <UploadStep onContinue={() => Promise.resolve()} />
-    </ModalWrapper>
-  </Providers>
+  <DialogManagerScope dialogManagerScopeId="dialog-manager">
+    <Providers values={mockRsiValues}>
+      <ModalWrapper isOpen={true} onClose={() => null}>
+        <UploadStep onContinue={() => Promise.resolve()} />
+      </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}>
-    <ModalWrapper isOpen={true} onClose={() => null}>
-      <ValidationStep initialData={editableTableInitialData} file={file} />
-    </ModalWrapper>
-  </Providers>
+  <DialogManagerScope dialogManagerScopeId="dialog-manager">
+    <Providers values={mockRsiValues}>
+      <ModalWrapper isOpen={true} onClose={() => null}>
+        <ValidationStep initialData={editableTableInitialData} file={file} />
+      </ModalWrapper>
+    </Providers>
+  </DialogManagerScope>
 );