fix(airtable-import): fix columns step issues,

ui improvements exact same as csv import

src/components/TableModals/ImportAirtableWizard/Step1Columns.tsx

@@ -13,14 +13,17 @@ import {
   FormControl,
   RadioGroup,
   Radio,
+  Stack,
+  Box,
 } from "@mui/material";
 import ArrowIcon from "@mui/icons-material/ArrowForward";
+import { TableColumn as TableColumnIcon } from "@src/assets/icons";
 
 import { IStepProps } from ".";
-import { AirtableConfig } from "./ImportAirtableWizard";
+import { AirtableConfig } from "@src/components/TableModals/ImportAirtableWizard";
 import FadeList from "@src/components/TableModals/ScrollableList";
 import Column, { COLUMN_HEADER_HEIGHT } from "@src/components/Table/Column";
-import MultiSelect from "@rowy/multiselect";
+import ColumnSelect from "@src/components/Table/ColumnSelect";
 
 import {
   tableScope,
@@ -28,7 +31,8 @@ import {
   tableColumnsOrderedAtom,
 } from "@src/atoms/tableScope";
 import { FieldType } from "@src/constants/fields";
-import { suggestType } from "./utils";
+import { getFieldProp } from "@src/components/fields";
+import { suggestType } from "@src/components/TableModals/ImportAirtableWizard/utils";
 
 export default function Step1Columns({
   airtableData,
@@ -51,6 +55,7 @@ export default function Step1Columns({
     config.pairs.map((pair) => pair.fieldKey)
   );
 
+  // When a field is selected to be imported
   const handleSelect =
     (field: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
       const checked = e.target.checked;
@@ -98,7 +103,7 @@ export default function Step1Columns({
         // Delete matching newColumn if it was created
         if (configPair) {
           const newColumnIndex = findIndex(config.newColumns, {
-            key: configPair.fieldKey,
+            key: configPair.columnKey,
           });
           if (newColumnIndex > -1) {
             const newColumns = [...config.newColumns];
@@ -116,14 +121,17 @@ export default function Step1Columns({
       }
     };
 
+  // When a field is mapped to a new column
   const handleChange = (fieldKey: string) => (value: string) => {
     if (!value) return;
     const columnKey = !!tableSchema.columns?.[value] ? value : camelCase(value);
+    if (columnKey === "") return;
     // Check if this pair already exists in config
     const configIndex = findIndex(config.pairs, { fieldKey });
+    console.log(columnKey, configIndex);
     if (configIndex > -1) {
       const pairs = [...config.pairs];
-      pairs[configIndex].fieldKey = columnKey;
+      pairs[configIndex].columnKey = columnKey;
       setConfig((config) => ({ ...config, pairs }));
     } else {
       updateConfig({
@@ -217,9 +225,8 @@ export default function Step1Columns({
 
               <Grid item xs>
                 {selected && (
-                  <MultiSelect
+                  <ColumnSelect
                     multiple={false}
-                    options={tableColumns}
                     value={columnKey}
                     onChange={handleChange(field) as any}
                     TextFieldProps={{
@@ -229,21 +236,34 @@ export default function Step1Columns({
                           if (!columnKey) return "Select or add column";
                           else
                             return (
-                              <>
+                              <Stack
+                                direction="row"
+                                gap={1}
+                                alignItems="center"
+                              >
+                                <Box sx={{ width: 24, height: 24 }}>
+                                  {!isNewColumn ? (
+                                    getFieldProp("icon", matchingColumn?.type)
+                                  ) : (
+                                    <TableColumnIcon color="disabled" />
+                                  )}
+                                </Box>
                                 {matchingColumn?.name}
                                 {isNewColumn && (
                                   <Chip
                                     label="New"
+                                    color="primary"
                                     size="small"
-                                    sx={{
-                                      marginLeft: (theme) =>
-                                        theme.spacing(1) + " !important",
-                                      backgroundColor: "action.focus",
+                                    variant="outlined"
+                                    style={{
+                                      marginLeft: "auto",
                                       pointerEvents: "none",
+                                      height: 24,
+                                      fontWeight: "normal",
                                     }}
                                   />
                                 )}
-                              </>
+                              </Stack>
                             );
                         },
                         sx: [
@@ -274,14 +294,14 @@ export default function Step1Columns({
                           !columnKey && { color: "text.disabled" },
                         ],
                       },
+                      sx: { "& .MuiInputLabel-root": { display: "none" } },
                     }}
                     clearable={false}
                     displayEmpty
-                    labelPlural="columns"
                     freeText
-                    AddButtonProps={{ children: "Add new column…" }}
+                    AddButtonProps={{ children: "Create column…" }}
                     AddDialogProps={{
-                      title: "Add new column",
+                      title: "Create column",
                       textFieldLabel: "Column name",
                     }}
                   />