From 89f914ebf846b995733abc30dee4973905e3134e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Wed, 5 Jun 2024 17:01:13 +0200
Subject: [PATCH] Improve csv import (#5753)

This is a small PR to improve the design of our CSV import.

I noticed the back button that was implemented in a recent PR #5625 was
broken and would need to be fixed (e.g. try to come back to the very
first upload step from the sheet selection step). cc @shashankvish0010
if you want to give a stab at fixing your PR that'd be amazing, thanks!
---
 .../components/StepNavigationButton.tsx       | 25 +++++++++++--------
 .../MatchColumnsStep/MatchColumnsStep.tsx     |  4 +--
 .../SelectHeaderStep/SelectHeaderStep.tsx     |  4 +--
 .../SelectSheetStep/SelectSheetStep.tsx       |  6 ++---
 .../ValidationStep/ValidationStep.tsx         |  7 ++++--
 .../ui/input/button/components/MainButton.tsx |  4 +--
 6 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx
index 41f078e3c..85f58d923 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx
@@ -3,35 +3,40 @@ import styled from '@emotion/styled';
 import { CircularProgressBar } from '@/ui/feedback/progress-bar/components/CircularProgressBar';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { Modal } from '@/ui/layout/modal/components/Modal';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 const StyledFooter = styled(Modal.Footer)`
-  height: 60px;
-  justify-content: center;
-  padding: 0px;
-  padding-left: ${({ theme }) => theme.spacing(30)};
-  padding-right: ${({ theme }) => theme.spacing(30)};
-`;
-
-const StyledButton = styled(MainButton)`
-  width: 200px;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: space-between;
 `;
 
 type StepNavigationButtonProps = {
   onClick: () => void;
   title: string;
   isLoading?: boolean;
+  onBack?: () => void;
 };
 
 export const StepNavigationButton = ({
   onClick,
   title,
   isLoading,
+  onBack,
 }: StepNavigationButtonProps) => (
   <StyledFooter>
-    <StyledButton
+    {!isUndefinedOrNull(onBack) && (
+      <MainButton
+        Icon={isLoading ? CircularProgressBar : undefined}
+        title="Back"
+        onClick={!isLoading ? onBack : undefined}
+        variant="secondary"
+      />
+    )}
+    <MainButton
       Icon={isLoading ? CircularProgressBar : undefined}
       title={title}
       onClick={!isLoading ? onClick : undefined}
+      variant="primary"
     />
   </StyledFooter>
 );
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 cb3504625..b9f36e969 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
@@ -287,11 +287,11 @@ export const MatchColumnsStep = <T extends string>({
         />
       </StyledContent>
       <StepNavigationButton
+        onBack={onBack}
         onClick={handleOnContinue}
         isLoading={isLoading}
-        title="Next"
+        title="Continue"
       />
-      <StepNavigationButton onClick={onBack} title="Back" />
     </>
   );
 };
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 5f4c9e1fd..754b3c6e4 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
@@ -57,10 +57,10 @@ export const SelectHeaderStep = ({
       </Modal.Content>
       <StepNavigationButton
         onClick={handleContinue}
-        title="Next"
+        onBack={onBack}
+        title="Continue"
         isLoading={isLoading}
       />
-      <StepNavigationButton onClick={onBack} title="Back" />
     </>
   );
 };
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 69e388738..713b17ff7 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
@@ -55,17 +55,17 @@ export const SelectSheetStep = ({
         <StyledRadioContainer>
           <RadioGroup onValueChange={(value) => setValue(value)} value={value}>
             {sheetNames.map((sheetName) => (
-              <Radio value={sheetName} key={sheetName} />
+              <Radio value={sheetName} key={sheetName} label={sheetName} />
             ))}
           </RadioGroup>
         </StyledRadioContainer>
       </StyledContent>
       <StepNavigationButton
         onClick={() => handleOnContinue(value)}
+        onBack={onBack}
         isLoading={isLoading}
-        title="Next"
+        title="Continue"
       />
-      <StepNavigationButton onClick={onBack} title="Back" />
     </>
   );
 };
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 9873700c6..e9b6ebe8b 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
@@ -240,8 +240,11 @@ export const ValidationStep = <T extends string>({
           />
         </StyledScrollContainer>
       </StyledContent>
-      <StepNavigationButton onClick={onContinue} title="Confirm" />
-      <StepNavigationButton onClick={onBack} title="Back" />
+      <StepNavigationButton
+        onClick={onContinue}
+        onBack={onBack}
+        title="Confirm"
+      />
     </>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
index bacd927bd..ab23ceecc 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
@@ -3,13 +3,13 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
 
-type Variant = 'primary' | 'secondary';
+export type MainButtonVariant = 'primary' | 'secondary';
 
 type Props = {
   title: string;
   fullWidth?: boolean;
   width?: number;
-  variant?: Variant;
+  variant?: MainButtonVariant;
   soon?: boolean;
 } & React.ComponentProps<'button'>;