diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx index 5fd5bd257..9ffcd272a 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx +++ b/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 ( - + ); }; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalWrapper.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalWrapper.tsx index 067ef5bf3..e6352d538 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalWrapper.tsx +++ b/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} > diff --git a/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx b/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx index 83f0777a7..ef265a29e 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx @@ -2,8 +2,13 @@ import { ReactSpreadsheetImportContextProvider } from '@/spreadsheet-import/comp import { SpreadSheetImportModalWrapper } from '@/spreadsheet-import/components/SpreadSheetImportModalWrapper'; import { SPREADSHEET_IMPORT_MODAL_ID } from '@/spreadsheet-import/constants/SpreadsheetImportModalId'; import { SpreadsheetMaxRecordImportCapacity } from '@/spreadsheet-import/constants/SpreadsheetMaxRecordImportCapacity'; +import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep'; +import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; import { SpreadsheetImportStepperContainer } from '@/spreadsheet-import/steps/components/SpreadsheetImportStepperContainer'; import { SpreadsheetImportDialogOptions as SpreadsheetImportProps } from '@/spreadsheet-import/types'; +import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager'; +import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar'; +import { useLingui } from '@lingui/react/macro'; export const defaultSpreadsheetImportProps: Partial< SpreadsheetImportProps @@ -31,11 +36,46 @@ export const SpreadsheetImport = ( ...props, } as SpreadsheetImportProps; + const { enqueueDialog } = useDialogManager(); + + const { initialStepState } = useSpreadsheetImportInternal(); + + const { initialStep } = useSpreadsheetImportInitialStep( + initialStepState?.type, + ); + + const { activeStep } = useStepBar({ + initialStep, + }); + + const { t } = useLingui(); + + const confirmOnClose = () => { + if (activeStep < 1) { + mergedProps.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: mergedProps.onClose, + accent: 'danger', + role: 'confirm', + }, + ], + }); + }; + return ( diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx index 51d86cc32..3054a4308 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx @@ -247,6 +247,27 @@ export const MatchColumnsStep = ({ ), ); + 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 ( <> @@ -282,10 +303,8 @@ export const MatchColumnsStep = ({ onContinue={handleOnContinue} isLoading={isLoading} continueTitle={t`Next Step`} - onBack={() => { - onBack?.(); - setColumns([]); - }} + backTitle={t`Restart Import`} + onBack={openRestartDialog} isContinueDisabled={!hasMatchedColumns} /> diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/SelectHeader.stories.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/SelectHeader.stories.tsx index 6f8eca418..b5fe67451 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/SelectHeader.stories.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/SelectHeader.stories.tsx @@ -42,7 +42,10 @@ export default meta; export const Default = () => ( - + null} + > null} diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx index ec6df0927..d1feb0c16 100644 --- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx +++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx @@ -195,6 +195,7 @@ export type ModalProps = React.PropsWithChildren & { onEnter?: () => void; modalVariant?: ModalVariants; dataGloballyPreventClickOutside?: boolean; + shouldCloseModalOnClickOutsideOrEscape?: boolean; } & ( | { isClosable: true; onClose?: () => void } | { isClosable?: false; onClose?: never } @@ -217,6 +218,7 @@ export const Modal = ({ onClose, modalVariant = 'primary', dataGloballyPreventClickOutside = false, + shouldCloseModalOnClickOutsideOrEscape = true, }: ModalProps) => { const isMobile = useIsMobile(); const modalRef = useRef(null); @@ -236,7 +238,7 @@ export const Modal = ({ const handleClose = () => { onClose?.(); - closeModal(modalId); + if (shouldCloseModalOnClickOutsideOrEscape) closeModal(modalId); }; return (