UI: Improve table picker component (#859)

- Fixes SelectAll and SchemaExpand issues
- Moves Column view to separate component for readability
- Moves table picker below the settings for CDC and has more height
- useMemo for table search
- overall code improvements

ui/app/mirrors/create/cdc/cdc.tsx

@@ -66,12 +66,6 @@ export default function CDCConfigForm({
   if (mirrorConfig.source != undefined && mirrorConfig.destination != undefined)
     return (
       <>
-        <TableMapping
-          sourcePeerName={mirrorConfig.source?.name}
-          rows={rows}
-          setRows={setRows}
-          peerType={mirrorConfig.destination?.type}
-        />
         {normalSettings.map((setting, id) => {
           return (
             paramDisplayCondition(setting) && (
@@ -112,6 +106,13 @@ export default function CDCConfigForm({
               />
             );
           })}
+
+        <TableMapping
+          sourcePeerName={mirrorConfig.source?.name}
+          rows={rows}
+          setRows={setRows}
+          peerType={mirrorConfig.destination?.type}
+        />
       </>
     );
 }

ui/app/mirrors/create/cdc/columnbox.tsx

@@ -0,0 +1,80 @@
+'use client';
+import { TableMapRow } from '@/app/dto/MirrorsDTO';
+import { Checkbox } from '@/lib/Checkbox';
+import { Label } from '@/lib/Label';
+import { RowWithCheckbox } from '@/lib/Layout';
+import { Dispatch, SetStateAction } from 'react';
+
+interface ColumnProps {
+  columns: string[];
+  tableRow: TableMapRow;
+  rows: TableMapRow[];
+  setRows: Dispatch<SetStateAction<TableMapRow[]>>;
+}
+export default function ColumnBox({
+  columns,
+  tableRow,
+  rows,
+  setRows,
+}: ColumnProps) {
+  const handleColumnExclusion = (
+    source: string,
+    column: string,
+    include: boolean
+  ) => {
+    const currRows = [...rows];
+    const rowOfSource = currRows.find((row) => row.source === source);
+    if (rowOfSource) {
+      if (include) {
+        const updatedExclude = rowOfSource.exclude.filter(
+          (col) => col !== column
+        );
+        rowOfSource.exclude = updatedExclude;
+      } else {
+        rowOfSource.exclude.push(column);
+      }
+    }
+    setRows(currRows);
+  };
+
+  const columnExclusion = new Set(tableRow.exclude);
+  return columns.map((column) => {
+    const [columnName, columnType, isPkeyStr] = column.split(':');
+    const isPkey = isPkeyStr === 'true';
+    return (
+      <RowWithCheckbox
+        key={column}
+        label={
+          <Label
+            as='label'
+            style={{
+              fontSize: 13,
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            {columnName}
+            <p
+              style={{
+                marginLeft: '0.5rem',
+                color: 'gray',
+              }}
+            >
+              {columnType}
+            </p>
+          </Label>
+        }
+        action={
+          <Checkbox
+            style={{ cursor: 'pointer' }}
+            disabled={isPkey}
+            checked={!columnExclusion.has(columnName)}
+            onCheckedChange={(state: boolean) =>
+              handleColumnExclusion(tableRow.source, columnName, state)
+            }
+          />
+        }
+      />
+    );
+  });
+}