fix confirm close dialog + add restart confirm dialog (#12761)

Test: 
- On upload > No dialog at modal closing
- On match > Confirm cancel dialog at closing (escape, click outside,
cancel cross)
- On match > Restart dialog at Restart Import
- On validation > Confirm cancel dialog at closing (escape, click
outside, cancel cross)
- On import > Confirm cancel dialog at closing (escape, click outside,
cancel cross)
- On import > No confirm at import end

closes : https://github.com/twentyhq/core-team-issues/issues/1071

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

@@ -247,6 +247,27 @@ export const MatchColumnsStep = <T extends string>({
       ),
   );
 
+  const onBackConfirmation = () => {
+    onBack?.();
+    setColumns([]);
+  };
+
+  const openRestartDialog = () => {
+    enqueueDialog({
+      title: t`Restart Import`,
+      message: t`You will lose all your mappings.`,
+      buttons: [
+        { title: t`Cancel` },
+        {
+          title: t`Restart`,
+          onClick: onBackConfirmation,
+          accent: 'danger',
+          role: 'confirm',
+        },
+      ],
+    });
+  };
+
   return (
     <>
       <StyledContent>
@@ -282,10 +303,8 @@ export const MatchColumnsStep = <T extends string>({
         onContinue={handleOnContinue}
         isLoading={isLoading}
         continueTitle={t`Next Step`}
-        onBack={() => {
-          onBack?.();
-          setColumns([]);
-        }}
+        backTitle={t`Restart Import`}
+        onBack={openRestartDialog}
         isContinueDisabled={!hasMatchedColumns}
       />
     </>

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

@@ -42,7 +42,10 @@ export default meta;
 export const Default = () => (
   <DialogManagerScope dialogManagerScopeId="dialog-manager">
     <ReactSpreadsheetImportContextProvider values={mockRsiValues}>
-      <SpreadSheetImportModalWrapper modalId="select-header-step">
+      <SpreadSheetImportModalWrapper
+        modalId="select-header-step"
+        onClose={() => null}
+      >
         <SelectHeaderStep
           importedRows={headerSelectionTableFields}
           setCurrentStepState={() => null}