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/components/SpreadSheetImportModalCloseButton.tsx

@@ -1,10 +1,5 @@
 import styled from '@emotion/styled';
 
-import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep';
-import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
-import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
-import { useLingui } from '@lingui/react/macro';
 import { IconX } from 'twenty-ui/display';
 import { IconButton } from 'twenty-ui/input';
 
@@ -20,49 +15,15 @@ const StyledCloseButtonContainer = styled.div`
 `;
 
 type SpreadSheetImportModalCloseButtonProps = {
-  onClose?: () => void;
+  onClose: () => void;
 };
 
 export const SpreadSheetImportModalCloseButton = ({
   onClose,
 }: SpreadSheetImportModalCloseButtonProps) => {
-  const { initialStepState } = useSpreadsheetImportInternal();
-
-  const { initialStep } = useSpreadsheetImportInitialStep(
-    initialStepState?.type,
-  );
-
-  const { activeStep } = useStepBar({
-    initialStep,
-  });
-
-  const { enqueueDialog } = useDialogManager();
-
-  const { t } = useLingui();
-
-  const handleClose = () => {
-    if (activeStep === -1) {
-      onClose?.();
-      return;
-    }
-    enqueueDialog({
-      title: t`Exit import flow`,
-      message: t`Are you sure? Your current information will not be saved.`,
-      buttons: [
-        { title: t`Cancel` },
-        {
-          title: t`Exit`,
-          onClick: onClose,
-          accent: 'danger',
-          role: 'confirm',
-        },
-      ],
-    });
-  };
-
   return (
     <StyledCloseButtonContainer>
-      <IconButton Icon={IconX} onClick={handleClose} />
+      <IconButton Icon={IconX} onClick={onClose} />
     </StyledCloseButtonContainer>
   );
 };

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

@@ -28,7 +28,7 @@ const StyledRtlLtr = styled.div`
 type SpreadSheetImportModalWrapperProps = {
   children: React.ReactNode;
   modalId: string;
-  onClose?: () => void;
+  onClose: () => void;
 };
 
 export const SpreadSheetImportModalWrapper = ({
@@ -44,6 +44,7 @@ export const SpreadSheetImportModalWrapper = ({
       modalId={modalId}
       isClosable={true}
       onClose={onClose}
+      shouldCloseModalOnClickOutsideOrEscape={false}
     >
       <StyledRtlLtr dir={rtl ? 'rtl' : 'ltr'}>
         <SpreadSheetImportModalCloseButton onClose={onClose} />