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 7e79ed33fd..052082fe29 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 @@ -12,7 +12,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { Modal } from '@/ui/layout/modal/components/Modal'; -import { MatchColumnsStep } from './MatchColumnsStep/MatchColumnsStep'; +import { Columns, MatchColumnsStep } from './MatchColumnsStep/MatchColumnsStep'; import { SelectHeaderStep } from './SelectHeaderStep/SelectHeaderStep'; import { SelectSheetStep } from './SelectSheetStep/SelectSheetStep'; import { UploadStep } from './UploadStep/UploadStep'; @@ -52,6 +52,7 @@ export type StepState = | { type: StepType.validateData; data: any[]; + importedColumns: Columns; } | { type: StepType.loading; @@ -216,6 +217,7 @@ export const UploadFlow = ({ nextStep, prevStep }: UploadFlowProps) => { setState({ type: StepType.validateData, data, + importedColumns: columns, }); setPreviousState(state); nextStep(); @@ -233,6 +235,7 @@ export const UploadFlow = ({ nextStep, prevStep }: UploadFlowProps) => { return ( setState({ 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 e9b6ebe8bb..35430fcceb 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 @@ -8,6 +8,10 @@ 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 { + Columns, + ColumnType, +} from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep'; import { Data } from '@/spreadsheet-import/types'; import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations'; import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager'; @@ -62,6 +66,7 @@ const StyledNoRowsContainer = styled.div` type ValidationStepProps = { initialData: Data[]; + importedColumns: Columns; file: File; onSubmitStart?: () => void; onBack: () => void; @@ -69,6 +74,7 @@ type ValidationStepProps = { export const ValidationStep = ({ initialData, + importedColumns, file, onSubmitStart, onBack, @@ -88,6 +94,7 @@ export const ValidationStep = ({ ReadonlySet >(new Set()); const [filterByErrors, setFilterByErrors] = useState(false); + const [showUnmatchedColumns, setShowUnmatchedColumns] = useState(false); const updateData = useCallback( (rows: typeof data) => { @@ -127,7 +134,24 @@ export const ValidationStep = ({ [data, updateData], ); - const columns = useMemo(() => generateColumns(fields), [fields]); + const columns = useMemo( + () => + generateColumns(fields) + .map((column) => { + const hasBeenImported = + importedColumns.filter( + (importColumn) => + (importColumn.type === ColumnType.matched && + importColumn.value === column.key) || + column.key === 'select-row', + ).length > 0; + + if (!hasBeenImported && !showUnmatchedColumns) return null; + return column; + }) + .filter(Boolean), + [fields, importedColumns, showUnmatchedColumns], + ); const tableData = useMemo(() => { if (filterByErrors) { @@ -212,6 +236,15 @@ export const ValidationStep = ({ Show only rows with errors + + setShowUnmatchedColumns(!showUnmatchedColumns)} + /> + + Show unmatched columns + +