#ROWY-763: Select all for Airtable wizard, format

src/components/TableModals/ImportAirtableWizard/Step1Columns.tsx

@@ -57,6 +57,9 @@ export default function Step1Columns({
     config.pairs.map((pair) => pair.fieldKey)
   );
 
+
+  const fieldKeys = Object.keys(airtableData.records[0].fields);
+
   // When a field is selected to be imported
   const handleSelect =
     (field: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -123,6 +126,47 @@ export default function Step1Columns({
       }
     };
 
+  const handleSelectAll = () => {
+    if (selectedFields.length !== fieldKeys.length) {
+      setSelectedFields(fieldKeys)
+      fieldKeys.forEach(field => {
+        // Try to match each field to a column in the table
+        const match =
+          find(tableColumns, (column) =>
+            column.label.toLowerCase().includes(field.toLowerCase())
+          )?.value ?? null;
+
+        const columnKey = camelCase(field);
+        const columnConfig: Partial<AirtableConfig> = {
+          pairs: [],
+          newColumns: [],
+        };
+        columnConfig.pairs = [
+          { fieldKey: field, columnKey: match ?? columnKey },
+        ];
+        if (!match) {
+          columnConfig.newColumns = [
+            {
+              name: field,
+              fieldName: columnKey,
+              key: columnKey,
+              type:
+                suggestType(airtableData.records, field) || FieldType.shortText,
+              index: -1,
+              config: {},
+            },
+          ];
+        }
+        updateConfig(columnConfig);
+      })
+    } else {
+      setSelectedFields([])
+      setConfig((config) => ({ ...config, newColumns: [], pairs: [] }))
+    }
+
+  };
+
+
   // When a field is mapped to a new column
   const handleChange = (fieldKey: string) => (value: string) => {
     if (!value) return;
@@ -159,7 +203,6 @@ export default function Step1Columns({
     }
   };
 
-  const fieldKeys = Object.keys(airtableData.records[0].fields);
   return (
     <div>
       <Grid container spacing={7}>
@@ -180,14 +223,36 @@ export default function Step1Columns({
       <Divider />
 
       <FadeList>
+        <li>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={selectedFields.length === fieldKeys.length}
+                indeterminate={
+                  selectedFields.length !== 0 &&
+                  selectedFields.length !== fieldKeys.length
+                }
+                onChange={handleSelectAll}
+                color="default"
+              />
+            }
+            label={selectedFields.length == fieldKeys.length ? "Clear all" : "Select all"}
+            sx={{
+              height: 42,
+              mr: 0,
+              alignItems: "center",
+              "& .MuiFormControlLabel-label": { mt: 0, flex: 1 },
+            }}
+          />
+        </li>
         {fieldKeys.map((field) => {
           const selected = selectedFields.indexOf(field) > -1;
           const columnKey =
             find(config.pairs, { fieldKey: field })?.columnKey ?? null;
           const matchingColumn = columnKey
             ? tableSchema.columns?.[columnKey] ??
-              find(config.newColumns, { key: columnKey }) ??
-              null
+            find(config.newColumns, { key: columnKey }) ??
+            null
             : null;
           const isNewColumn = !!find(config.newColumns, { key: columnKey });
           return (

src/components/TableModals/ImportCsvWizard/Step1Columns.tsx

@@ -68,7 +68,7 @@ export default function Step1Columns({
     if (selectedFields.length !== csvData.columns.length) {
       setSelectedFields(csvData.columns);
       csvData.columns.forEach(field => {
-        // Try to match the field to a column in the table
+        // Try to match each field to a column in the table
         const match =
           find(tableColumns, (column) =>
             column.label.toLowerCase().includes(field.toLowerCase())
@@ -89,34 +89,12 @@ export default function Step1Columns({
           ];
         }
         updateConfig(columnConfig);
-      }) 
-    } else {
-      setSelectedFields([]);
-      csvData.columns.forEach(field => {
-        // Check if this pair was already pushed to main config
-        const configPair = find(config.pairs, { csvKey: field });
-        const configIndex = findIndex(config.pairs, { csvKey: field });
-
-        // Delete matching newColumn if it was created
-        if (configPair) {
-          const newColumnIndex = findIndex(config.newColumns, {
-            key: configPair.columnKey,
-          });
-          if (newColumnIndex > -1) {
-            const newColumns = [...config.newColumns];
-            newColumns.splice(newColumnIndex, 1);
-            setConfig((config) => ({ ...config, newColumns }));
-          }
-        }
-
-        // Delete pair from main config
-        if (configIndex > -1) {
-          const newConfig = [...config.pairs];
-          newConfig.splice(configIndex, 1);
-          setConfig((config) => ({ ...config, pairs: newConfig }));
-        }
       })
-  }};
+    } else {
+      setSelectedFields([])
+      setConfig((config) => ({ ...config, newColumns: [], pairs: [] }))
+    }
+  };
 
   // When a field is selected to be imported
   const handleSelect =
@@ -241,36 +219,36 @@ export default function Step1Columns({
       <Divider />
 
       <FadeList>
-      <li>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={selectedFields.length === csvData.columns.length}
-                  indeterminate={
-                    selectedFields.length !== 0 &&
-                    selectedFields.length !== csvData.columns.length
-                  }
-                  onChange={handleSelectAll}
-                  color="default"
-                />
-              }
-              label="Select all"
-              sx={{
-                height: 42,
-                mr: 0,
-                alignItems: "center",
-                "& .MuiFormControlLabel-label": { mt: 0, flex: 1 },
-              }}
-            />
-          </li>
+        <li>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={selectedFields.length === csvData.columns.length}
+                indeterminate={
+                  selectedFields.length !== 0 &&
+                  selectedFields.length !== csvData.columns.length
+                }
+                onChange={handleSelectAll}
+                color="default"
+              />
+            }
+            label={selectedFields.length == csvData.columns.length ? "Clear all" : "Select all"}
+            sx={{
+              height: 42,
+              mr: 0,
+              alignItems: "center",
+              "& .MuiFormControlLabel-label": { mt: 0, flex: 1 },
+            }}
+          />
+        </li>
         {csvData.columns.map((field) => {
           const selected = selectedFields.indexOf(field) > -1;
           const columnKey =
             find(config.pairs, { csvKey: field })?.columnKey ?? null;
           const matchingColumn = columnKey
             ? tableSchema.columns?.[columnKey] ??
-              find(config.newColumns, { key: columnKey }) ??
-              null
+            find(config.newColumns, { key: columnKey }) ??
+            null
             : null;
           const isNewColumn = !!find(config.newColumns, { key: columnKey });
 

src/components/TableModals/ImportExistingWizard/Step1Columns.tsx

@@ -117,7 +117,7 @@ export default function Step1Columns({ config, setConfig }: IStepProps) {
                   color="default"
                 />
               }
-              label="Select all"
+              label={selectedFields.length == allFields.length ? "Clear all" : "Select all"}
               sx={{
                 height: 42,
                 mr: 0,