Import - fixes (#13097)

- Fixes : https://github.com/twentyhq/twenty/issues/11623
- Design fix :
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=61976-118483&t=z12YCJg7W7PFMcmg-4

After
<img width="600" alt="Screenshot 2025-07-08 at 11 52 26"
src="https://github.com/user-attachments/assets/744fd40b-bba1-4ed1-b44c-48766a20384d"
/>

Before
<img width="600" alt="Screenshot 2025-07-08 at 11 23 08"
src="https://github.com/user-attachments/assets/b5ef81a8-f4dc-4ba1-8741-b8edec579cc1"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -107,10 +107,22 @@ const StyledDataGrid = styled(DataGrid)`
   }
 ` as typeof DataGrid;
 
-type SpreadsheetImportTableProps<Data> = DataGridProps<Data> & {
+type SpreadsheetImportTableProps<Data> = Pick<
-  rowHeight?: number;
+  DataGridProps<Data>,
-  hiddenHeader?: boolean;
+  | 'selectedRows'
-};
+  | 'onSelectedRowsChange'
+  | 'columns'
+  | 'headerRowHeight'
+  | 'rowKeyGetter'
+  | 'rows'
+> &
+  Partial<
+    Pick<DataGridProps<Data>, 'onRowClick' | 'components' | 'onRowsChange'>
+  > & {
+    className?: string;
+    rowHeight?: number;
+    hiddenHeader?: boolean;
+  };
 
 export const SpreadsheetImportTable = <Data,>({
   className,
@@ -119,8 +131,8 @@ export const SpreadsheetImportTable = <Data,>({
   headerRowHeight,
   rowKeyGetter,
   rows,
-  onRowClick,
   onRowsChange,
+  onRowClick,
   onSelectedRowsChange,
   selectedRows,
 }: SpreadsheetImportTableProps<Data>) => {
@@ -137,12 +149,12 @@ export const SpreadsheetImportTable = <Data,>({
       {...{
         className: `${className || ''} ${themeClassName}`,
         columns,
-        components,
         headerRowHeight,
         rowKeyGetter,
-        rows,
-        onRowClick,
         onRowsChange,
+        rows,
+        components,
+        onRowClick,
         onSelectedRowsChange,
         selectedRows,
       }}

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx

@@ -27,12 +27,11 @@ export const SelectHeaderTable = ({
       rowKeyGetter={(row: any) => importedRows.indexOf(row)}
       rows={importedRows}
       columns={columns}
-      selectedRowIndexes={selectedRowIndexes}
+      selectedRows={selectedRowIndexes}
-      onSelectedRowIndexesChange={(newRowIndexes: number[]) => {
+      onSelectedRowsChange={(newRowIndexes: number[]) => {
-        // allow selecting only one row
+        newRowIndexes.forEach((value) => {
-        newRowIndexes.forEach((value: any) => {
+          if (!selectedRowIndexes.has(value)) {
-          if (!selectedRowIndexes.has(value as number)) {
+            setSelectedRowIndexes(new Set([value]));
-            setSelectedRowIndexes(new Set([value as number]));
             return;
           }
         });

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

@@ -16,19 +16,23 @@ import { WorkBook } from 'xlsx-ugnis';
 
 const StyledContent = styled(Modal.Content)`
   align-items: center;
-  padding-left: ${({ theme }) => theme.spacing(6)};
+  display: flex;
-  padding-right: ${({ theme }) => theme.spacing(6)};
+  flex-direction: column;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing(8)};
 `;
 
 const StyledHeading = styled(Heading)`
-  margin-bottom: ${({ theme }) => theme.spacing(8)};
+  display: flex;
 `;
 
 const StyledRadioContainer = styled.div`
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+`;
-  height: 0px;
+
+const StyledRadio = styled(Radio)`
+  margin-bottom: ${({ theme }) => theme.spacing(6)};
 `;
 
 type SelectSheetStepProps = {
@@ -110,7 +114,11 @@ export const SelectSheetStep = ({
         <StyledRadioContainer>
           <RadioGroup onValueChange={(value) => setValue(value)} value={value}>
             {sheetNames.map((sheetName) => (
-              <Radio value={sheetName} key={sheetName} label={sheetName} />
+              <StyledRadio
+                value={sheetName}
+                key={sheetName}
+                label={sheetName}
+              />
             ))}
           </RadioGroup>
         </StyledRadioContainer>