Feat: Nullable Column UI

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

@@ -1,88 +1,181 @@
 'use client';
 import { TableMapRow } from '@/app/dto/MirrorsDTO';
+import { ColumnSetting } from '@/grpc_generated/flow';
 import { ColumnsItem } from '@/grpc_generated/route';
 import { Checkbox } from '@/lib/Checkbox';
 import { Label } from '@/lib/Label';
 import { RowWithCheckbox } from '@/lib/Layout';
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, Fragment, SetStateAction, useMemo } from 'react';
+import InfoPopover from '@/components/InfoPopover';
 
 interface ColumnProps {
   columns: ColumnsItem[];
   tableRow: TableMapRow;
   rows: TableMapRow[];
   setRows: Dispatch<SetStateAction<TableMapRow[]>>;
   disabled?: boolean;
-  showOrdering: boolean;
+  showNullable: boolean;
 }
 export default function ColumnBox({
   columns,
   tableRow,
   rows,
   setRows,
   disabled,
+  showNullable,
 }: ColumnProps) {
-  const handleColumnExclusion = (column: string, include: boolean) => {
-    const source = tableRow.source;
-    const currRows = [...rows];
-    const rowIndex = currRows.findIndex((row) => row.source === source);
+  // Helper to update a specific row
+  const updateRow = (updater: (row: TableMapRow) => TableMapRow) => {
+    const rowIndex = rows.findIndex((row) => row.source === tableRow.source);
     if (rowIndex !== -1) {
-      const sourceRow = currRows[rowIndex],
-        newExclude = new Set(sourceRow.exclude);
+      const updatedRows = [...rows];
+      updatedRows[rowIndex] = updater(updatedRows[rowIndex]);
+      setRows(updatedRows);
+    }
+  };
+
+  const handleColumnExclusion = (column: string, include: boolean) => {
+    updateRow((row) => {
+      const newExclude = new Set(row.exclude);
       if (include) {
         newExclude.delete(column);
       } else {
         newExclude.add(column);
       }
-      currRows[rowIndex] = {
-        ...sourceRow,
-        exclude: newExclude,
-      };
-      setRows(currRows);
-    }
+      return { ...row, exclude: newExclude };
+    });
   };
 
-  return columns.map((column) => {
-    const partOfOrderingKey = rows
-      .find((row) => row.source == tableRow.source)
-      ?.columns.some(
-        (col) =>
-          col.sourceName === column.name &&
-          (col.ordering > 0 || col.partitioning > 0)
+  const handleNullableEnabledChange = (columnName: string, enabled: boolean) => {
+    updateRow((row) => {
+      const existingColumn = row.columns.find(
+        (col) => col.sourceName === columnName
       );
-    return (
-      <RowWithCheckbox
-        key={column.name}
-        label={
-          <Label
-            as='label'
-            style={{
-              fontSize: 13,
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            {column.name}
-            <p
+
+      const updatedColumns: ColumnSetting[] = existingColumn
+        ? // Update existing ColumnSetting
+        row.columns.map((col) =>
+          col.sourceName === columnName
+            ? { ...col, nullableEnabled: enabled }
+            : col
+        )
+        : // Create new ColumnSetting
+        [
+          ...row.columns,
+          {
+            sourceName: columnName,
+            destinationName: '',
+            destinationType: '',
+            ordering: 0,
+            partitioning: 0,
+            nullableEnabled: enabled,
+          },
+        ];
+
+      return { ...row, columns: updatedColumns };
+    });
+  };
+
+  const nullableEnabledMap = useMemo(() => {
+    const map = new Map<string, boolean>();
+    tableRow.columns.forEach((col) => {
+      map.set(col.sourceName, col.nullableEnabled ?? false);
+    });
+    return map;
+  }, [tableRow.columns]);
+
+  const getNullableEnabled = (columnName: string): boolean => {
+    return nullableEnabledMap.get(columnName) ?? false;
+  };
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: showNullable
+          ? 'minmax(0, 2fr) minmax(0, 1fr) auto'
+          : 'minmax(0, 2fr) minmax(0, 1fr)',
+        alignItems: 'center',
+        columnGap: '2.5rem',
+        width: '80%',
+      }}
+    >
+      <div style={{ fontSize: 12, fontWeight: 500, textAlign: 'left' }}>Name</div>
+      <div style={{ fontSize: 12, fontWeight: 500 }}>Type</div>
+      {showNullable && (
+        <div style={{ fontSize: 12, fontWeight: 500, display: 'flex', alignItems: 'center', gap: '0.25rem', justifyContent: 'flex-end' }}>
+          Nullable
+          <InfoPopover
+            tips="Enabling nullable columns wraps types in Nullable() which may impact query performance and storage in Clickhouse."
+          />
+        </div>
+      )}
+
+      {columns.map((column) => {
+        const partOfOrderingKey = rows
+          .find((row) => row.source == tableRow.source)
+          ?.columns.some(
+            (col) =>
+              col.sourceName === column.name &&
+              (col.ordering > 0 || col.partitioning > 0)
+          );
+
+        const isIncluded = !tableRow.exclude.has(column.name);
+        const nullableEnabled = getNullableEnabled(column.name);
+
+        return (
+          <Fragment key={column.name}>
+            <RowWithCheckbox
+              label={
+                <Label
+                  as="label"
+                  style={{
+                    fontSize: 13,
+                    display: 'flex',
+                    alignItems: 'center',
+                  }}
+                >
+                  {column.name}
+                </Label>
+              }
+              action={
+                <Checkbox
+                  style={{ cursor: 'pointer' }}
+                  disabled={column.isKey || disabled || partOfOrderingKey}
+                  checked={isIncluded}
+                  onCheckedChange={(state: boolean) =>
+                    handleColumnExclusion(column.name, state)
+                  }
+                />
+              }
+            />
+
+            <div
               style={{
-                marginLeft: '0.5rem',
+                fontSize: 13,
                 color: 'gray',
+                whiteSpace: 'nowrap',
               }}
             >
               {column.type}
-            </p>
-          </Label>
-        }
-        action={
-          <Checkbox
-            style={{ cursor: 'pointer' }}
-            disabled={column.isKey || disabled || partOfOrderingKey}
-            checked={!tableRow.exclude.has(column.name)}
-            onCheckedChange={(state: boolean) =>
-              handleColumnExclusion(column.name, state)
-            }
-          />
-        }
-      />
-    );
-  });
+            </div>
+
+            {showNullable && (
+              <Checkbox
+                style={{
+                  cursor: isIncluded && !disabled ? 'pointer' : 'default',
+                  justifySelf: 'flex-end',
+                }}
+                disabled={disabled || !isIncluded}
+                checked={isIncluded ? nullableEnabled : false}
+                onCheckedChange={(state: boolean) =>
+                  handleNullableEnabledChange(column.name, state)
+                }
+              />
+            )}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
 }

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

@@ -141,10 +141,10 @@ export default function CustomColumnType({
           prev.map((row) => {
             if (row.source !== tableRow.source) return row;
 
-            const columnExistsInRow = row.columns.some(
+            const existingColumn = row.columns.find(
               (col) => col.sourceName === selectedColumnName
             );
-            if (!columnExistsInRow) {
+            if (!existingColumn) {
               return {
                 ...row,
                 columns: [

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

@@ -231,6 +231,7 @@ export default function SchemaBox({
               row.partitionByExpr = existingRow.partitionByExpr;
               row.exclude = new Set(existingRow.exclude ?? []);
               row.destination = existingRow.destinationTableIdentifier;
+              row.columns = existingRow.columns ?? [];
               addTableColumns(row.source);
             }
           }
@@ -529,7 +530,7 @@ export default function SchemaBox({
                               rows={rows}
                               setRows={setRows}
                               disabled={row.editingDisabled}
-                              showOrdering={
+                              showNullable={
                                 peerType?.toString() ===
                                 DBType[DBType.CLICKHOUSE].toString()
                               }

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

@@ -49,6 +49,10 @@ function UpdatedRows(
   const rowIndex = rows.findIndex((row) => row.source === tableRow.source);
   if (rowIndex !== -1) {
     const newRows = [...rows];
+    // Check if there's an existing ColumnSetting to preserve nullableEnabled
+    const existingSetting = rows[rowIndex].columns.find(
+      (setting) => setting.sourceName === colName
+    );
     const columns = rows[rowIndex].columns.map(update);
     if (!columns.find((setting) => setting.sourceName === colName)) {
       columns.push(
@@ -58,7 +62,7 @@ function UpdatedRows(
           destinationType: '',
           ordering: 0,
           partitioning: 0,
-          nullableEnabled: false,
+          nullableEnabled: existingSetting?.nullableEnabled ?? false,
         })
       );
     }