Merge branch 'main' into better-eslint-ci

PeerDB-io · Nov 7, 2023 · a4ff2e8 · a4ff2e8
2 parents 55613f3 + 40fd0eb
commit a4ff2e8
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 87 deletions.
diff --git a/ui/app/dto/MirrorsDTO.ts b/ui/app/dto/MirrorsDTO.ts
@@ -17,4 +17,5 @@ export type TableMapRow = {
   source: string;
   destination: string;
   partitionKey: string;
+  selected: boolean;
 };
diff --git a/ui/app/mirrors/create/handlers.ts b/ui/app/mirrors/create/handlers.ts
@@ -52,14 +52,23 @@ const validateQRepFields = (
   return true;
 };
 
+interface TableMapping {
+  sourceTableIdentifier: string;
+  destinationTableIdentifier: string;
+  partitionKey: string;
+}
 const reformattedTableMapping = (tableMapping: TableMapRow[]) => {
-  const mapping = tableMapping.map((row) => {
-    return {
-      sourceTableIdentifier: row.source,
-      destinationTableIdentifier: row.destination,
-      partitionKey: row.partitionKey,
-    };
-  });
+  const mapping = tableMapping
+    .map((row) => {
+      if (row.selected === true) {
+        return {
+          sourceTableIdentifier: row.source,
+          destinationTableIdentifier: row.destination,
+          partitionKey: row.partitionKey,
+        };
+      }
+    })
+    .filter(Boolean);
   return mapping;
 };
 
@@ -83,7 +92,7 @@ export const handleCreateCDC = async (
   const isValid = validateCDCFields(rows, setMsg, config);
   if (!isValid) return;
   const tableNameMapping = reformattedTableMapping(rows);
-  config['tableMappings'] = tableNameMapping;
+  config['tableMappings'] = tableNameMapping as TableMapping[];
   config['flowJobName'] = flowJobName;
   setLoading(true);
   const statusMessage: UCreateMirrorResponse = await fetch('/api/mirrors/cdc', {

diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx
@@ -74,7 +74,6 @@ export default function CreateMirrors() {
 
   const handlePeer = (val: string, peerEnd: 'src' | 'dst') => {
     const stateVal = peers.find((peer) => peer.name === val)!;
-    console.log('/handelPeer: val:', stateVal);
     if (peerEnd === 'dst') {
       if (stateVal.type === DBType.POSTGRES) {
         setConfig((curr) => {
@@ -107,7 +106,6 @@ export default function CreateMirrors() {
         sourcePeer: stateVal,
       }));
     }
-    console.log('/handelPeer: val:', config);
   };
 
   return (

diff --git a/ui/app/mirrors/create/tablemapping.tsx b/ui/app/mirrors/create/tablemapping.tsx
@@ -34,93 +34,88 @@ const TableMapping = ({
   setSchema,
 }: TableMappingProps) => {
   const [allSchemas, setAllSchemas] = useState<string[]>();
-  const [allTables, setAllTables] = useState<string[]>();
   const [tableColumns, setTableColumns] = useState<
     { tableName: string; columns: string[] }[]
   >([]);
   const [loading, setLoading] = useState(false);
 
   const handleAddRow = (source: string) => {
-    setRows([...rows, { source, destination: source, partitionKey: '' }]);
-  };
-
-  const handleRemoveRow = (source: string) => {
     const newRows = [...rows];
     const index = newRows.findIndex((row) => row.source === source);
-    if (index >= 0) newRows.splice(index, 1);
+    if (index >= 0) newRows[index] = { ...newRows[index], selected: true };
     setRows(newRows);
   };
 
-  const getRow = (source: string) => {
+  const handleRemoveRow = (source: string) => {
     const newRows = [...rows];
-    const row = newRows.find((row) => row.source === `${schema}.${source}`);
-    return row;
+    const index = newRows.findIndex((row) => row.source === source);
+    if (index >= 0) newRows[index] = { ...newRows[index], selected: false };
+    setRows(newRows);
   };
 
   const handleSelectAll = (
     e: React.MouseEvent<HTMLInputElement, MouseEvent>
   ) => {
-    if (e.currentTarget.checked) {
-      const tableNames: TableMapRow[] | undefined = allTables?.map(
-        (tableName) => {
-          return {
-            source: `${schema}.${tableName}`,
-            destination: `${schema}.${tableName}`,
-            partitionKey: '',
-          };
-        }
-      );
-      setRows(tableNames ?? []);
-    } else setRows([]);
+    const newRows = [...rows];
+    for (const row of newRows) {
+      row.selected = e.currentTarget.checked;
+    }
+    setRows(newRows);
   };
 
   const handleSwitch = (on: boolean, source: string) => {
     if (on) {
-      handleAddRow(`${schema}.${source}`);
+      handleAddRow(source);
     } else {
-      handleRemoveRow(`${schema}.${source}`);
+      handleRemoveRow(source);
     }
   };
 
   const updateDestination = (source: string, dest: string) => {
     // find the row with source and update the destination
     const newRows = [...rows];
     const index = newRows.findIndex((row) => row.source === source);
-    newRows[index].destination = dest;
-    return newRows;
+    newRows[index] = { ...newRows[index], destination: dest };
+    setRows(newRows);
   };
 
   const updatePartitionKey = (source: string, pkey: string) => {
     const newRows = [...rows];
     const index = newRows.findIndex((row) => row.source === source);
-    newRows[index].partitionKey = pkey;
-    return newRows;
+    newRows[index] = { ...newRows[index], partitionKey: pkey };
+    setRows(newRows);
   };
 
   const getTablesOfSchema = useCallback(
     (schemaName: string) => {
-      fetchTables(sourcePeerName, schemaName, setLoading).then((res) =>
-        setAllTables(res)
+      fetchTables(sourcePeerName, schemaName, setLoading).then((tableNames) =>
+        setRows((curr) => {
+          const newRows = [...curr];
+          tableNames.forEach((tableName) => {
+            const row = newRows.find(
+              (row) => row.source === `${schemaName}.${tableName}`
+            );
+            if (!row) {
+              newRows.push({
+                source: `${schemaName}.${tableName}`,
+                destination: `${schemaName}.${tableName}`,
+                partitionKey: '',
+                selected: false,
+              });
+            }
+          });
+          return newRows;
+        })
       );
     },
-    [sourcePeerName]
+    [sourcePeerName, setRows]
   );
 
   const [searchQuery, setSearchQuery] = useState('');
 
-  useEffect(() => {
-    if (searchQuery.length > 0) {
-      setAllTables(
-        (curr) =>
-          curr?.filter((table) => {
-            return table.toLowerCase().includes(searchQuery.toLowerCase());
-          })
-      );
-    }
-    if (searchQuery.length == 0) {
-      getTablesOfSchema(schema);
-    }
-  }, [searchQuery, getTablesOfSchema]);
+  const filteredRows = rows?.filter((row) => {
+    return row.source.toLowerCase().includes(searchQuery.toLowerCase());
+  });
 
   useEffect(() => {
     fetchSchemas(sourcePeerName, setLoading).then((res) => setAllSchemas(res));
@@ -179,8 +174,8 @@ const TableMapping = ({
         </div>
       </div>
       <div style={{ maxHeight: '40vh', overflow: 'scroll' }}>
-        {allTables ? (
-          allTables.map((sourceTableName, index) => (
+        {filteredRows ? (
+          filteredRows.map((row, index) => (
             <div
               key={index}
               style={{
@@ -205,9 +200,9 @@ const TableMapping = ({
                 <div>
                   <div style={{ display: 'flex', alignItems: 'center' }}>
                     <Switch
-                      checked={!!getRow(sourceTableName)}
+                      checked={row.selected}
                       onCheckedChange={(state: boolean) =>
-                        handleSwitch(state, sourceTableName)
+                        handleSwitch(state, row.source)
                       }
                     />
                     <div
@@ -220,14 +215,13 @@ const TableMapping = ({
                         whiteSpace: 'nowrap',
                       }}
                     >
-                      {sourceTableName}
+                      {row.source}
                     </div>
                   </div>
-                  {rows.find(
-                    (row) => row.source === `${schema}.${sourceTableName}`
-                  )?.destination && (
+                  {row.selected && (
                     <div style={{ padding: '0.5rem' }}>
                       <RowWithTextField
+                        key={row.source}
                         label={
                           <div
                             style={{
@@ -250,20 +244,11 @@ const TableMapping = ({
                           >
                             <TextField
                               variant='simple'
-                              defaultValue={
-                                rows.find(
-                                  (row) =>
-                                    row.source ===
-                                    `${schema}.${sourceTableName}`
-                                )?.destination
-                              }
+                              defaultValue={row.destination}
                               onChange={(
                                 e: React.ChangeEvent<HTMLInputElement>
                               ) =>
-                                updateDestination(
-                                  `${schema}.${sourceTableName}`,
-                                  e.target.value
-                                )
+                                updateDestination(row.source, e.target.value)
                               }
                             />
                           </div>
@@ -294,10 +279,7 @@ const TableMapping = ({
                               onChange={(
                                 e: React.ChangeEvent<HTMLInputElement>
                               ) =>
-                                updatePartitionKey(
-                                  `${schema}.${sourceTableName}`,
-                                  e.target.value
-                                )
+                                updatePartitionKey(row.source, e.target.value)
                               }
                             />
                           </div>
@@ -313,7 +295,7 @@ const TableMapping = ({
                 <ColumnsDisplay
                   peerName={sourcePeerName}
                   schemaName={schema}
-                  tableName={sourceTableName}
+                  tableName={row.source.split('.')[1]}
                   setColumns={setTableColumns}
                   columns={tableColumns}
                 />

diff --git a/ui/components/Search.tsx b/ui/components/Search.tsx
@@ -1,29 +1,26 @@
 import { SearchField } from '@/lib/SearchField';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 
 interface SearchProps {
   allItems: any[];
   setItems: Dispatch<SetStateAction<any>>;
   filterFunction: (query: string) => {};
 }
-const SearchBar = (props: SearchProps) => {
-  const [searchQuery, setSearchQuery] = useState('');
-
-  useEffect(() => {
+const SearchBar = ({ allItems, setItems, filterFunction }: SearchProps) => {
+  const handleSearch = (searchQuery: string) => {
     if (searchQuery.length > 0) {
-      props.setItems(props.filterFunction(searchQuery));
+      setItems(filterFunction(searchQuery));
     }
     if (searchQuery.length == 0) {
-      props.setItems(props.allItems);
+      setItems(allItems);
     }
-  }, [searchQuery]);
+  };
 
   return (
     <SearchField
       placeholder='Search'
-      value={searchQuery}
       onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-        setSearchQuery(e.target.value)
+        handleSearch(e.target.value)
       }
     />
   );