Improve Data Importer Select Matching - Post Merge Updates (#6750)

This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-6135-1](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-6135-1). --- ### Description This [PR](#6338) was merged, but the reviewr asked for some changes in another PR #6338 (review) ### Refs #6338 ### Demo <https://jam.dev/c/80336c7a-4536-4a58-b531-981bac81cb26> Co-authored-by: gitstart-twenty <[email protected]>
twentyhq · Aug 28, 2024 · 7c894fe · 7c894fe
1 parent 0531eb5
commit 7c894fe
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 66 deletions.
diff --git a/...t/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/...t/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
@@ -89,6 +89,7 @@ export const SelectFieldInput = ({
             fieldDefinition.metadata.isNullable ? handleClearField : undefined
           }
           clearLabel={fieldDefinition.label}
+          hotkeyScope={hotkeyScope}
         />
       </SelectableList>
     </div>

diff --git a/...ont/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx b/...ont/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
@@ -21,8 +21,8 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 import { Modal } from '@/ui/layout/modal/components/Modal';
 
+import { initialComputedColumnsSelector } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState';
 import { UnmatchColumn } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn';
-import { initialComputedColumnsState } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState';
 import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';
 import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
 import { useRecoilState } from 'recoil';
@@ -63,7 +63,7 @@ export type MatchColumnsStepProps = {
   setPreviousStepState: (currentStepState: SpreadsheetImportStep) => void;
   currentStepState: SpreadsheetImportStep;
   nextStep: () => void;
-  errorToast: (message: string) => void;
+  onError: (message: string) => void;
 };
 
 export enum ColumnType {
@@ -136,7 +136,7 @@ export const MatchColumnsStep = <T extends string>({
   setPreviousStepState,
   currentStepState,
   nextStep,
-  errorToast,
+  onError,
 }: MatchColumnsStepProps) => {
   const { enqueueDialog } = useDialogManager();
   const { enqueueSnackBar } = useSnackBar();
@@ -145,7 +145,7 @@ export const MatchColumnsStep = <T extends string>({
     useSpreadsheetImportInternal<T>();
   const [isLoading, setIsLoading] = useState(false);
   const [columns, setColumns] = useRecoilState(
-    initialComputedColumnsState(headerValues),
+    initialComputedColumnsSelector(headerValues),
   );
 
   const { matchColumnsStepHook } = useSpreadsheetImportInternal();
@@ -215,7 +215,7 @@ export const MatchColumnsStep = <T extends string>({
     ],
   );
 
-  const onContinue = useCallback(
+  const handleContinue = useCallback(
     async (
       values: ImportedStructuredRow<string>[],
       rawData: ImportedRow[],
@@ -231,11 +231,11 @@ export const MatchColumnsStep = <T extends string>({
         setPreviousStepState(currentStepState);
         nextStep();
       } catch (e) {
-        errorToast((e as Error).message);
+        onError((e as Error).message);
       }
     },
     [
-      errorToast,
+      onError,
       matchColumnsStepHook,
       nextStep,
       setPreviousStepState,
@@ -263,9 +263,13 @@ export const MatchColumnsStep = <T extends string>({
 
   const handleAlertOnContinue = useCallback(async () => {
     setIsLoading(true);
-    await onContinue(normalizeTableData(columns, data, fields), data, columns);
+    await handleContinue(
+      normalizeTableData(columns, data, fields),
+      data,
+      columns,
+    );
     setIsLoading(false);
-  }, [onContinue, columns, data, fields]);
+  }, [handleContinue, columns, data, fields]);
 
   const handleOnContinue = useCallback(async () => {
     if (unmatchedRequiredFields.length > 0) {
@@ -293,7 +297,7 @@ export const MatchColumnsStep = <T extends string>({
       });
     } else {
       setIsLoading(true);
-      await onContinue(
+      await handleContinue(
         normalizeTableData(columns, data, fields),
         data,
         columns,
@@ -304,7 +308,7 @@ export const MatchColumnsStep = <T extends string>({
     unmatchedRequiredFields,
     enqueueDialog,
     handleAlertOnContinue,
-    onContinue,
+    handleContinue,
     columns,
     data,
     fields,

diff --git a/...les/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx b/...les/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx
@@ -6,8 +6,10 @@ import { SelectOption } from '@/spreadsheet-import/types';
 
 import { getFieldOptions } from '@/spreadsheet-import/utils/getFieldOptions';
 
+import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope';
 import { SelectInput } from '@/ui/input/components/SelectInput';
-import { useState } from 'react';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { useEffect, useState } from 'react';
 import { IconChevronDown, Tag, TagColor } from 'twenty-ui';
 import {
   MatchedOptions,
@@ -83,6 +85,12 @@ export const SubMatchingSelect = <T extends string>({
     setIsOpen(false);
   };
 
+  const setHotkeyScope = useSetHotkeyScope();
+
+  useEffect(() => {
+    setHotkeyScope(SelectFieldHotkeyScope.SelectField);
+  }, [setHotkeyScope]);
+
   return (
     <StyledContainer>
       <StyledControlContainer cursor="default">
@@ -113,6 +121,7 @@ export const SubMatchingSelect = <T extends string>({
             options={options}
             onOptionSelected={handleSelect}
             onCancel={() => setIsOpen(false)}
+            hotkeyScope={SelectFieldHotkeyScope.SelectField}
           />
         )}
       </StyledControlContainer>

diff --git a/...import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState.ts b/...import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState.ts
@@ -10,11 +10,11 @@ export const matchColumnsState = atom({
   default: [] as Columns<string>,
 });
 
-export const initialComputedColumnsState = selectorFamily<
+export const initialComputedColumnsSelector = selectorFamily<
   Columns<string>,
   ImportedRow
 >({
-  key: 'InitialComputedColumnsState',
+  key: 'initialComputedColumnsSelector',
   get:
     (headerValues: ImportedRow) =>
     ({ get }) => {

diff --git a/...ont/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx b/...ont/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
@@ -27,7 +27,7 @@ type SelectHeaderStepProps = {
   setCurrentStepState: (currentStepState: SpreadsheetImportStep) => void;
   nextStep: () => void;
   setPreviousStepState: (currentStepState: SpreadsheetImportStep) => void;
-  errorToast: (message: string) => void;
+  onError: (message: string) => void;
   onBack: () => void;
   currentStepState: SpreadsheetImportStep;
 };
@@ -37,7 +37,7 @@ export const SelectHeaderStep = ({
   setCurrentStepState,
   nextStep,
   setPreviousStepState,
-  errorToast,
+  onError,
   onBack,
   currentStepState,
 }: SelectHeaderStepProps) => {
@@ -49,7 +49,7 @@ export const SelectHeaderStep = ({
 
   const { selectHeaderStepHook } = useSpreadsheetImportInternal();
 
-  const onContinue = useCallback(
+  const handleContinue = useCallback(
     async (...args: Parameters<typeof selectHeaderStepHook>) => {
       try {
         const { importedRows: data, headerRow: headerValues } =
@@ -62,11 +62,11 @@ export const SelectHeaderStep = ({
         setPreviousStepState(currentStepState);
         nextStep();
       } catch (e) {
-        errorToast((e as Error).message);
+        onError((e as Error).message);
       }
     },
     [
-      errorToast,
+      onError,
       nextStep,
       selectHeaderStepHook,
       setPreviousStepState,
@@ -75,17 +75,17 @@ export const SelectHeaderStep = ({
     ],
   );
 
-  const handleContinue = useCallback(async () => {
+  const handleOnContinue = useCallback(async () => {
     const [selectedRowIndex] = Array.from(new Set(selectedRowIndexes));
     // We consider data above header to be redundant
     const trimmedData = importedRows.slice(selectedRowIndex + 1);
 
     setIsLoading(true);
 
-    await onContinue(importedRows[selectedRowIndex], trimmedData);
+    await handleContinue(importedRows[selectedRowIndex], trimmedData);
 
     setIsLoading(false);
-  }, [onContinue, importedRows, selectedRowIndexes]);
+  }, [handleContinue, importedRows, selectedRowIndexes]);
 
   return (
     <>
@@ -100,7 +100,7 @@ export const SelectHeaderStep = ({
         </StyledTableContainer>
       </Modal.Content>
       <StepNavigationButton
-        onClick={handleContinue}
+        onClick={handleOnContinue}
         onBack={onBack}
         title="Continue"
         isLoading={isLoading}

diff --git a/...front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx b/...front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
@@ -35,7 +35,7 @@ type SelectSheetStepProps = {
   sheetNames: string[];
   onBack: () => void;
   setCurrentStepState: (data: SpreadsheetImportStep) => void;
-  errorToast: (message: string) => void;
+  onError: (message: string) => void;
   setPreviousStepState: (data: SpreadsheetImportStep) => void;
   currentStepState: {
     type: SpreadsheetImportStepType.selectSheet;
@@ -46,7 +46,7 @@ type SelectSheetStepProps = {
 export const SelectSheetStep = ({
   sheetNames,
   setCurrentStepState,
-  errorToast,
+  onError,
   setPreviousStepState,
   onBack,
   currentStepState,
@@ -57,7 +57,7 @@ export const SelectSheetStep = ({
 
   const { maxRecords, uploadStepHook } = useSpreadsheetImportInternal();
 
-  const onContinue = useCallback(
+  const handleContinue = useCallback(
     async (sheetName: string) => {
       if (
         maxRecords > 0 &&
@@ -66,7 +66,7 @@ export const SelectSheetStep = ({
           maxRecords,
         )
       ) {
-        errorToast(`Too many records. Up to ${maxRecords.toString()} allowed`);
+        onError(`Too many records. Up to ${maxRecords.toString()} allowed`);
         return;
       }
       try {
@@ -79,11 +79,11 @@ export const SelectSheetStep = ({
         });
         setPreviousStepState(currentStepState);
       } catch (e) {
-        errorToast((e as Error).message);
+        onError((e as Error).message);
       }
     },
     [
-      errorToast,
+      onError,
       maxRecords,
       currentStepState,
       setPreviousStepState,
@@ -95,10 +95,10 @@ export const SelectSheetStep = ({
   const handleOnContinue = useCallback(
     async (data: typeof value) => {
       setIsLoading(true);
-      await onContinue(data);
+      await handleContinue(data);
       setIsLoading(false);
     },
-    [onContinue],
+    [handleContinue],
   );
 
   return (

diff --git a/...twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx b/...twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx
@@ -48,7 +48,7 @@ export const SpreadsheetImportStepper = ({
 
   const { enqueueSnackBar } = useSnackBar();
 
-  const errorToast = useCallback(
+  const handleError = useCallback(
     (description: string) => {
       enqueueSnackBar(description, {
         title: 'Error',
@@ -58,7 +58,7 @@ export const SpreadsheetImportStepper = ({
     [enqueueSnackBar],
   );
 
-  const onBack = useCallback(() => {
+  const handleBack = useCallback(() => {
     setCurrentStepState(previousStepState);
     prevStep();
   }, [prevStep, previousStepState]);
@@ -71,7 +71,7 @@ export const SpreadsheetImportStepper = ({
           currentStepState={currentStepState}
           setPreviousStepState={setPreviousStepState}
           setCurrentStepState={setCurrentStepState}
-          errorToast={errorToast}
+          onError={handleError}
           nextStep={nextStep}
         />
       );
@@ -81,9 +81,9 @@ export const SpreadsheetImportStepper = ({
           sheetNames={currentStepState.workbook.SheetNames}
           setCurrentStepState={setCurrentStepState}
           currentStepState={currentStepState}
-          errorToast={errorToast}
+          onError={handleError}
           setPreviousStepState={setPreviousStepState}
-          onBack={onBack}
+          onBack={handleBack}
         />
       );
     case SpreadsheetImportStepType.selectHeader:
@@ -93,8 +93,8 @@ export const SpreadsheetImportStepper = ({
           setCurrentStepState={setCurrentStepState}
           nextStep={nextStep}
           setPreviousStepState={setPreviousStepState}
-          errorToast={errorToast}
-          onBack={onBack}
+          onError={handleError}
+          onBack={handleBack}
           currentStepState={currentStepState}
         />
       );
@@ -107,10 +107,8 @@ export const SpreadsheetImportStepper = ({
           setPreviousStepState={setPreviousStepState}
           currentStepState={currentStepState}
           nextStep={nextStep}
-          onBack={() => {
-            onBack();
-          }}
-          errorToast={errorToast}
+          onBack={handleBack}
+          onError={handleError}
         />
       );
     case SpreadsheetImportStepType.validateData:
@@ -124,7 +122,7 @@ export const SpreadsheetImportStepper = ({
           file={uploadedFile}
           setCurrentStepState={setCurrentStepState}
           onBack={() => {
-            onBack();
+            handleBack();
             setPreviousStepState(
               initialStepState || { type: SpreadsheetImportStepType.upload },
             );