From 66b1734d14bfe91b805a55e4a6f5834bb6792cf6 Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Fri, 6 Sep 2024 01:17:14 +0530
Subject: [PATCH] UI for CH column settings

---
 flow/connectors/clickhouse/normalize.go |  12 +-
 ui/app/mirrors/create/cdc/columnbox.tsx | 197 ++++++++++++++++++------
 ui/app/mirrors/create/cdc/schemabox.tsx |  26 ++--
 3 files changed, 178 insertions(+), 57 deletions(-)

diff --git a/flow/connectors/clickhouse/normalize.go b/flow/connectors/clickhouse/normalize.go
index fcd510fb1..5f6344e37 100644
--- a/flow/connectors/clickhouse/normalize.go
+++ b/flow/connectors/clickhouse/normalize.go
@@ -133,11 +133,15 @@ func generateCreateTableSQLForNormalizedTable(
 		}
 
 		if colType == qvalue.QValueKindNumeric {
-			precision, scale := datatypes.GetNumericTypeForWarehouse(column.TypeModifier, datatypes.ClickHouseNumericCompatibility{})
-			if column.Nullable {
-				stmtBuilder.WriteString(fmt.Sprintf("`%s` Nullable(DECIMAL(%d, %d)), ", dstColName, precision, scale))
+			if clickhouseType != "" && clickhouseType != "Decimal128(9)" {
+				stmtBuilder.WriteString(fmt.Sprintf("`%s` %s, ", dstColName, clickhouseType))
 			} else {
-				stmtBuilder.WriteString(fmt.Sprintf("`%s` DECIMAL(%d, %d), ", dstColName, precision, scale))
+				precision, scale := datatypes.GetNumericTypeForWarehouse(column.TypeModifier, datatypes.ClickHouseNumericCompatibility{})
+				if column.Nullable {
+					stmtBuilder.WriteString(fmt.Sprintf("`%s` Nullable(DECIMAL(%d, %d)), ", dstColName, precision, scale))
+				} else {
+					stmtBuilder.WriteString(fmt.Sprintf("`%s` DECIMAL(%d, %d), ", dstColName, precision, scale))
+				}
 			}
 		} else if tableSchema.NullableEnabled && column.Nullable && !colType.IsArray() {
 			stmtBuilder.WriteString(fmt.Sprintf("`%s` Nullable(%s), ", dstColName, clickhouseType))
diff --git a/ui/app/mirrors/create/cdc/columnbox.tsx b/ui/app/mirrors/create/cdc/columnbox.tsx
index de5bee300..8bff96d66 100644
--- a/ui/app/mirrors/create/cdc/columnbox.tsx
+++ b/ui/app/mirrors/create/cdc/columnbox.tsx
@@ -1,25 +1,29 @@
 'use client';
 import { TableMapRow } from '@/app/dto/MirrorsDTO';
+import { Button } from '@/lib/Button';
 import { Checkbox } from '@/lib/Checkbox';
+import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { RowWithCheckbox } from '@/lib/Layout';
 import { TextField } from '@/lib/TextField';
-import { Dispatch, SetStateAction } from 'react';
+import { Divider } from '@tremor/react';
+import { Dispatch, SetStateAction, useState } from 'react';
 
 interface ColumnProps {
-  columns: string[];
+  column: string;
   tableRow: TableMapRow;
   rows: TableMapRow[];
   setRows: Dispatch<SetStateAction<TableMapRow[]>>;
-  showOrdering: boolean;
+  showColumnSettings: boolean;
 }
 export default function ColumnBox({
-  columns,
+  column,
   tableRow,
   rows,
   setRows,
-  showOrdering,
+  showColumnSettings,
 }: ColumnProps) {
+  const [show, setShow] = useState(false);
   const handleColumnExclusion = (column: string, include: boolean) => {
     const source = tableRow.source;
     const currRows = [...rows];
@@ -65,35 +69,119 @@ export default function ColumnBox({
     }
   };
 
-  return columns.map((column) => {
-    const [columnName, columnType, isPkeyStr] = column.split(':');
-    const isPkey = isPkeyStr === 'true';
-    return (
-      <RowWithCheckbox
-        key={columnName}
-        label={
-          <Label
-            as='label'
-            style={{
-              fontSize: 13,
-              display: 'flex',
-              alignItems: 'center',
-            }}
+  const handleColumnTypeChange = (column: string, type: string) => {
+    const source = tableRow.source;
+    const currRows = [...rows];
+    const rowIndex = currRows.findIndex((row) => row.source === source);
+    if (rowIndex !== -1) {
+      const sourceRow = currRows[rowIndex];
+      const columns = [...sourceRow.columns];
+      const colIndex = columns.findIndex((col) => col.sourceName === column);
+      if (colIndex !== -1) {
+        columns[colIndex] = {
+          ...columns[colIndex],
+          destinationType: type,
+        };
+      } else {
+        columns.push({
+          sourceName: column,
+          destinationName: '',
+          destinationType: type,
+          ordering: 0,
+        });
+      }
+      currRows[rowIndex] = {
+        ...sourceRow,
+        columns,
+      };
+      setRows(currRows);
+    }
+  };
+
+  const [columnName, columnType, isPkeyStr] = column?.split(':');
+  const isPkey = isPkeyStr === 'true';
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: '0.5rem',
+        marginBottom: '0.5rem',
+        minWidth: '20%',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}
+      >
+        <RowWithCheckbox
+          key={columnName}
+          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={!tableRow.exclude.has(columnName)}
+              onCheckedChange={(state: boolean) =>
+                handleColumnExclusion(columnName, state)
+              }
+            />
+          }
+        />
+        {showColumnSettings && (
+          <Button
+            variant='peer'
+            style={{ padding: 0 }}
+            onClick={() => setShow((prev) => !prev)}
           >
-            {columnName}
-            <p
+            <Label as='label' style={{ fontSize: 12 }}>
+              {' '}
+              Configure{' '}
+            </Label>
+            <Icon name='arrow_drop_down' />
+          </Button>
+        )}
+      </div>
+      {show && showColumnSettings && (
+        <div style={{ padding: '4px 8px' }}>
+          {!isPkey && (
+            <div
               style={{
-                marginLeft: '0.5rem',
-                color: 'gray',
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                columnGap: '1rem',
               }}
             >
-              {columnType}
-            </p>
-            {showOrdering && !isPkey && (
+              <div>
+                <p style={{ fontSize: 13 }}>Ordering</p>
+              </div>
               <TextField
                 variant='simple'
                 type='number'
-                style={{ width: '3rem', marginLeft: '1rem', fontSize: 13 }}
+                style={{ fontSize: 13, width: '3rem' }}
                 value={
                   tableRow.columns.find((col) => col.sourceName === columnName)
                     ?.ordering ?? 0
@@ -102,20 +190,43 @@ export default function ColumnBox({
                   handleColumnOrdering(columnName, +e.target.value)
                 }
               />
-            )}
-          </Label>
-        }
-        action={
-          <Checkbox
-            style={{ cursor: 'pointer' }}
-            disabled={isPkey}
-            checked={!tableRow.exclude.has(columnName)}
-            onCheckedChange={(state: boolean) =>
-              handleColumnExclusion(columnName, state)
-            }
-          />
-        }
-      />
-    );
-  });
+            </div>
+          )}
+
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              columnGap: '1rem',
+            }}
+          >
+            <div>
+              <p
+                style={{
+                  fontSize: 13,
+                }}
+              >
+                Custom column type
+              </p>
+            </div>
+
+            <TextField
+              variant='simple'
+              placeholder='Custom column type'
+              style={{ width: '10rem', padding: '4px 8px', fontSize: 13 }}
+              value={
+                tableRow.columns.find((col) => col.sourceName === columnName)
+                  ?.destinationType ?? ''
+              }
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleColumnTypeChange(columnName, e.target.value)
+              }
+            />
+          </div>
+          <Divider style={{ marginTop: '0.5rem', marginBottom: '0.5rem' }} />
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/ui/app/mirrors/create/cdc/schemabox.tsx b/ui/app/mirrors/create/cdc/schemabox.tsx
index 18fe14405..1c8a0a0ef 100644
--- a/ui/app/mirrors/create/cdc/schemabox.tsx
+++ b/ui/app/mirrors/create/cdc/schemabox.tsx
@@ -377,16 +377,22 @@ export default function SchemaBox({
                           Columns
                         </Label>
                         {columns ? (
-                          <ColumnBox
-                            columns={columns}
-                            tableRow={row}
-                            rows={rows}
-                            setRows={setRows}
-                            showOrdering={
-                              peerType?.toString() ===
-                              DBType[DBType.CLICKHOUSE].toString()
-                            }
-                          />
+                          columns.map(
+                            (column) =>
+                              column != '' && (
+                                <ColumnBox
+                                  key={row.source + column}
+                                  column={column}
+                                  tableRow={row}
+                                  rows={rows}
+                                  setRows={setRows}
+                                  showColumnSettings={
+                                    peerType?.toString() ===
+                                    DBType[DBType.CLICKHOUSE].toString()
+                                  }
+                                />
+                              )
+                          )
                         ) : columnsLoading ? (
                           <BarLoader />
                         ) : (