From c12bc599da52d97af6dc67db943cde4dbd300910 Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Thu, 30 May 2024 22:13:56 +0530 Subject: [PATCH] Fixed: In CSV import now users are able to come back to the previous step. (#5625) Users now can make a back transition from the current step state. - Added a `BackButton` component to `spreadsheet-import` in order to use it within the step state components. - Used the prebuilt `prevStep` from `useStepBar` and passed it as a prop to the `Uploadflow` to get the previous state as activestep. - Added a `previousState` to set the previous state with the required key data. - Added a `handleOnBack` function in `Uploadflow` to set the correct state and call the `prevStep` function to make the transition. - Added a callback function `onBack` and passed it as props to each step state component. fixes: #5564 https://github.com/twentyhq/twenty/assets/140178357/be7e1a0a-0fb8-41f2-a207-dfc3208ca6f0 --------- Co-authored-by: Thomas Trompette --- ...nueButton.tsx => StepNavigationButton.tsx} | 12 +++++----- .../MatchColumnsStep/MatchColumnsStep.tsx | 9 +++++--- .../SelectHeaderStep/SelectHeaderStep.tsx | 9 +++++--- .../SelectSheetStep/SelectSheetStep.tsx | 9 +++++--- .../steps/components/Steps.tsx | 4 ++-- .../steps/components/UploadFlow.tsx | 22 ++++++++++++++++++- .../ValidationStep/ValidationStep.tsx | 7 ++++-- .../__stories__/MatchColumns.stories.tsx | 1 + .../__stories__/SelectHeader.stories.tsx | 1 + .../__stories__/SelectSheet.stories.tsx | 1 + .../__stories__/Validation.stories.tsx | 6 ++++- 11 files changed, 60 insertions(+), 21 deletions(-) rename packages/twenty-front/src/modules/spreadsheet-import/components/{ContinueButton.tsx => StepNavigationButton.tsx} (79%) 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 a3b06aba4279..41f078e3c95a 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 547e8d9289d3..cb3504625725 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 90b595e30bbf..5f4c9e1fd403 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 6739fa2ebe54..69e388738492 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 612c82d0d442..d478fc86e9e8 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 407ae1c0045f..7e79ed33fd5c 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 882893ff0e3b..9873700c63fd 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 da0431106032..d7eaff8699dd 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 45f700833409..3fd58030b15d 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 54c2e003428c..30b8e48731b4 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 641df1ea935e..e2d79644ab47 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()} + />