diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/ContinueButton.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx
similarity index 79%
rename from packages/twenty-front/src/modules/spreadsheet-import/components/ContinueButton.tsx
rename to packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx
index a3b06aba4..41f078e3c 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/components/ContinueButton.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx
@@ -16,22 +16,22 @@ const StyledButton = styled(MainButton)`
width: 200px;
`;
-type ContinueButtonProps = {
- onContinue: (val: any) => void;
+type StepNavigationButtonProps = {
+ onClick: () => void;
title: string;
isLoading?: boolean;
};
-export const ContinueButton = ({
- onContinue,
+export const StepNavigationButton = ({
+ onClick,
title,
isLoading,
-}: ContinueButtonProps) => (
+}: StepNavigationButtonProps) => (
);
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 547e8d928..cb3504625 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
@@ -1,8 +1,8 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import styled from '@emotion/styled';
-import { ContinueButton } from '@/spreadsheet-import/components/ContinueButton';
import { Heading } from '@/spreadsheet-import/components/Heading';
+import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
import { Field, RawData } from '@/spreadsheet-import/types';
import { findUnmatchedRequiredFields } from '@/spreadsheet-import/utils/findUnmatchedRequiredFields';
@@ -49,6 +49,7 @@ export type MatchColumnsStepProps = {
data: RawData[];
headerValues: RawData;
onContinue: (data: any[], rawData: RawData[], columns: Columns) => void;
+ onBack: () => void;
};
export enum ColumnType {
@@ -112,6 +113,7 @@ export const MatchColumnsStep = ({
data,
headerValues,
onContinue,
+ onBack,
}: MatchColumnsStepProps) => {
const { enqueueDialog } = useDialogManager();
const { enqueueSnackBar } = useSnackBar();
@@ -284,11 +286,12 @@ export const MatchColumnsStep = ({
)}
/>
-
+
>
);
};
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
index 90b595e30..5f4c9e1fd 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
@@ -1,8 +1,8 @@
import { useCallback, useState } from 'react';
import styled from '@emotion/styled';
-import { ContinueButton } from '@/spreadsheet-import/components/ContinueButton';
import { Heading } from '@/spreadsheet-import/components/Heading';
+import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
import { RawData } from '@/spreadsheet-import/types';
import { Modal } from '@/ui/layout/modal/components/Modal';
@@ -21,11 +21,13 @@ const StyledTableContainer = styled.div`
type SelectHeaderStepProps = {
data: RawData[];
onContinue: (headerValues: RawData, data: RawData[]) => Promise;
+ onBack: () => void;
};
export const SelectHeaderStep = ({
data,
onContinue,
+ onBack,
}: SelectHeaderStepProps) => {
const [selectedRows, setSelectedRows] = useState>(
new Set([0]),
@@ -53,11 +55,12 @@ export const SelectHeaderStep = ({
/>
-
+
>
);
};
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
index 6739fa2eb..69e388738 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
@@ -1,8 +1,8 @@
import { useCallback, useState } from 'react';
import styled from '@emotion/styled';
-import { ContinueButton } from '@/spreadsheet-import/components/ContinueButton';
import { Heading } from '@/spreadsheet-import/components/Heading';
+import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
import { Radio } from '@/ui/input/components/Radio';
import { RadioGroup } from '@/ui/input/components/RadioGroup';
import { Modal } from '@/ui/layout/modal/components/Modal';
@@ -27,11 +27,13 @@ const StyledRadioContainer = styled.div`
type SelectSheetStepProps = {
sheetNames: string[];
onContinue: (sheetName: string) => Promise;
+ onBack: () => void;
};
export const SelectSheetStep = ({
sheetNames,
onContinue,
+ onBack,
}: SelectSheetStepProps) => {
const [isLoading, setIsLoading] = useState(false);
@@ -58,11 +60,12 @@ export const SelectSheetStep = ({
- handleOnContinue(value)}
isLoading={isLoading}
- onContinue={() => handleOnContinue(value)}
title="Next"
/>
+
>
);
};
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx
index 612c82d0d..d478fc86e 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx
@@ -35,7 +35,7 @@ export const Steps = () => {
initialStepState?.type,
);
- const { nextStep, activeStep } = useStepBar({
+ const { nextStep, prevStep, activeStep } = useStepBar({
initialStep,
});
@@ -48,7 +48,7 @@ export const Steps = () => {
))}
-
+
>
);
};
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
index 407ae1c00..7e79ed33f 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
@@ -59,14 +59,18 @@ export type StepState =
interface UploadFlowProps {
nextStep: () => void;
+ prevStep: () => void;
}
-export const UploadFlow = ({ nextStep }: UploadFlowProps) => {
+export const UploadFlow = ({ nextStep, prevStep }: UploadFlowProps) => {
const theme = useTheme();
const { initialStepState } = useSpreadsheetImportInternal();
const [state, setState] = useState(
initialStepState || { type: StepType.upload },
);
+ const [previousState, setPreviousState] = useState(
+ initialStepState || { type: StepType.upload },
+ );
const [uploadedFile, setUploadedFile] = useState(null);
const {
maxRecords,
@@ -87,6 +91,11 @@ export const UploadFlow = ({ nextStep }: UploadFlowProps) => {
[enqueueSnackBar],
);
+ const onBack = useCallback(() => {
+ setState(previousState);
+ prevStep();
+ }, [prevStep, previousState]);
+
switch (state.type) {
case StepType.upload:
return (
@@ -138,6 +147,7 @@ export const UploadFlow = ({ nextStep }: UploadFlowProps) => {
} else {
setState({ type: StepType.selectSheet, workbook });
}
+ setPreviousState(state);
nextStep();
}}
/>
@@ -164,10 +174,12 @@ export const UploadFlow = ({ nextStep }: UploadFlowProps) => {
type: StepType.selectHeader,
data: mappedWorkbook,
});
+ setPreviousState(state);
} catch (e) {
errorToast((e as Error).message);
}
}}
+ onBack={onBack}
/>
);
case StepType.selectHeader:
@@ -184,11 +196,13 @@ export const UploadFlow = ({ nextStep }: UploadFlowProps) => {
data,
headerValues,
});
+ setPreviousState(state);
nextStep();
} catch (e) {
errorToast((e as Error).message);
}
}}
+ onBack={onBack}
/>
);
case StepType.matchColumns:
@@ -203,11 +217,13 @@ export const UploadFlow = ({ nextStep }: UploadFlowProps) => {
type: StepType.validateData,
data,
});
+ setPreviousState(state);
nextStep();
} catch (e) {
errorToast((e as Error).message);
}
}}
+ onBack={onBack}
/>
);
case StepType.validateData:
@@ -223,6 +239,10 @@ export const UploadFlow = ({ nextStep }: UploadFlowProps) => {
type: StepType.loading,
})
}
+ onBack={() => {
+ onBack();
+ setPreviousState(initialStepState || { type: StepType.upload });
+ }}
/>
);
case StepType.loading:
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
index 882893ff0..9873700c6 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
@@ -4,8 +4,8 @@ import { RowsChangeData } from 'react-data-grid';
import styled from '@emotion/styled';
import { IconTrash } from 'twenty-ui';
-import { ContinueButton } from '@/spreadsheet-import/components/ContinueButton';
import { Heading } from '@/spreadsheet-import/components/Heading';
+import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
import { Table } from '@/spreadsheet-import/components/Table';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
import { Data } from '@/spreadsheet-import/types';
@@ -64,12 +64,14 @@ type ValidationStepProps = {
initialData: Data[];
file: File;
onSubmitStart?: () => void;
+ onBack: () => void;
};
export const ValidationStep = ({
initialData,
file,
onSubmitStart,
+ onBack,
}: ValidationStepProps) => {
const { enqueueDialog } = useDialogManager();
const { fields, onClose, onSubmit, rowHook, tableHook } =
@@ -238,7 +240,8 @@ export const ValidationStep = ({
/>
-
+
+
>
);
};
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/MatchColumns.stories.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/MatchColumns.stories.tsx
index da0431106..d7eaff869 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/MatchColumns.stories.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/MatchColumns.stories.tsx
@@ -67,6 +67,7 @@ export const Default = () => (
headerValues={mockData[0] as string[]}
data={mockData.slice(1)}
onContinue={() => null}
+ onBack={() => null}
/>
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 45f700833..3fd58030b 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
@@ -26,6 +26,7 @@ export const Default = () => (
Promise.resolve()}
+ onBack={() => Promise.resolve()}
/>
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/SelectSheet.stories.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/SelectSheet.stories.tsx
index 54c2e0034..30b8e4873 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/SelectSheet.stories.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/SelectSheet.stories.tsx
@@ -25,6 +25,7 @@ export const Default = () => (
Promise.resolve()}
+ onBack={() => Promise.resolve()}
/>
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/Validation.stories.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/Validation.stories.tsx
index 641df1ea9..e2d79644a 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/Validation.stories.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/Validation.stories.tsx
@@ -25,7 +25,11 @@ export const Default = () => (
null}>
-
+ Promise.resolve()}
+ />