diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx index af3148f62..e47a7971c 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx @@ -107,10 +107,22 @@ const StyledDataGrid = styled(DataGrid)` } ` as typeof DataGrid; -type SpreadsheetImportTableProps = DataGridProps & { - rowHeight?: number; - hiddenHeader?: boolean; -}; +type SpreadsheetImportTableProps = Pick< + DataGridProps, + | 'selectedRows' + | 'onSelectedRowsChange' + | 'columns' + | 'headerRowHeight' + | 'rowKeyGetter' + | 'rows' +> & + Partial< + Pick, 'onRowClick' | 'components' | 'onRowsChange'> + > & { + className?: string; + rowHeight?: number; + hiddenHeader?: boolean; + }; export const SpreadsheetImportTable = ({ className, @@ -119,8 +131,8 @@ export const SpreadsheetImportTable = ({ headerRowHeight, rowKeyGetter, rows, - onRowClick, onRowsChange, + onRowClick, onSelectedRowsChange, selectedRows, }: SpreadsheetImportTableProps) => { @@ -137,12 +149,12 @@ export const SpreadsheetImportTable = ({ {...{ className: `${className || ''} ${themeClassName}`, columns, - components, headerRowHeight, rowKeyGetter, - rows, - onRowClick, onRowsChange, + rows, + components, + onRowClick, onSelectedRowsChange, selectedRows, }} diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx index f236f4319..121e71e45 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx +++ b/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} - onSelectedRowIndexesChange={(newRowIndexes: number[]) => { - // allow selecting only one row - newRowIndexes.forEach((value: any) => { - if (!selectedRowIndexes.has(value as number)) { - setSelectedRowIndexes(new Set([value as number])); + selectedRows={selectedRowIndexes} + onSelectedRowsChange={(newRowIndexes: number[]) => { + newRowIndexes.forEach((value) => { + if (!selectedRowIndexes.has(value)) { + setSelectedRowIndexes(new Set([value])); return; } }); 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 2e2798aca..fe63402a1 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 @@ -16,19 +16,23 @@ import { WorkBook } from 'xlsx-ugnis'; const StyledContent = styled(Modal.Content)` align-items: center; - padding-left: ${({ theme }) => theme.spacing(6)}; - padding-right: ${({ theme }) => theme.spacing(6)}; + display: flex; + 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 = ({ setValue(value)} value={value}> {sheetNames.map((sheetName) => ( - + ))}