From c98077e8a75c5a6c4c8ea0decb74ecc3f015c2d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philip=20Dub=C3=A9?= <philip@peerdb.io>
Date: Thu, 18 Jan 2024 05:30:45 +0000
Subject: [PATCH] Avoid mutating react state, change exclude from string[] to
 Set<string>

Also have /mirrors/errors link to /mirrors/edit
---
 ui/app/dto/MirrorsDTO.ts                      |  2 +-
 ui/app/mirrors/create/cdc/columnbox.tsx       | 19 +++++++++++--------
 ui/app/mirrors/create/cdc/schemabox.tsx       | 12 ++++--------
 ui/app/mirrors/create/handlers.ts             |  4 ++--
 ui/app/mirrors/create/mirrorcards.tsx         |  4 ++--
 ui/app/mirrors/create/schema.ts               |  2 +-
 ui/app/mirrors/errors/[mirrorName]/page.tsx   |  6 +++++-
 .../qrep/[mirrorId]/qrepStatusTable.tsx       |  3 +--
 8 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/ui/app/dto/MirrorsDTO.ts b/ui/app/dto/MirrorsDTO.ts
index f76904b08d..33234a557d 100644
--- a/ui/app/dto/MirrorsDTO.ts
+++ b/ui/app/dto/MirrorsDTO.ts
@@ -23,7 +23,7 @@ export type TableMapRow = {
   source: string;
   destination: string;
   partitionKey: string;
-  exclude: string[];
+  exclude: Set<string>;
   selected: boolean;
   canMirror: boolean;
 };
diff --git a/ui/app/mirrors/create/cdc/columnbox.tsx b/ui/app/mirrors/create/cdc/columnbox.tsx
index b68560419f..f017edfa8c 100644
--- a/ui/app/mirrors/create/cdc/columnbox.tsx
+++ b/ui/app/mirrors/create/cdc/columnbox.tsx
@@ -23,18 +23,21 @@ export default function ColumnBox({
     include: boolean
   ) => {
     const currRows = [...rows];
-    const rowOfSource = currRows.find((row) => row.source === source);
-    if (rowOfSource) {
+    const rowIndex = currRows.findIndex((row) => row.source === source);
+    if (rowIndex !== -1) {
+      const sourceRow = currRows[rowIndex],
+        newExclude = new Set(sourceRow.exclude);
       if (include) {
-        const updatedExclude = rowOfSource.exclude.filter(
-          (col) => col !== column
-        );
-        rowOfSource.exclude = updatedExclude;
+        newExclude.delete(column);
       } else {
-        rowOfSource.exclude.push(column);
+        newExclude.add(column);
       }
+      currRows[rowIndex] = {
+        ...sourceRow,
+        exclude: newExclude,
+      };
+      setRows(currRows);
     }
-    setRows(currRows);
   };
 
   const columnExclusion = new Set(tableRow.exclude);
diff --git a/ui/app/mirrors/create/cdc/schemabox.tsx b/ui/app/mirrors/create/cdc/schemabox.tsx
index 34c49c0b16..7e09767c4f 100644
--- a/ui/app/mirrors/create/cdc/schemabox.tsx
+++ b/ui/app/mirrors/create/cdc/schemabox.tsx
@@ -50,8 +50,6 @@ const SchemaBox = ({
   const [expandedSchemas, setExpandedSchemas] = useState<string[]>([]);
   const [tableQuery, setTableQuery] = useState<string>('');
 
-  const [handlingAll, setHandlingAll] = useState(false);
-
   const searchedTables = useMemo(() => {
     const tableQueryLower = tableQuery.toLowerCase();
     return rows
@@ -125,17 +123,16 @@ const SchemaBox = ({
     e: React.MouseEvent<HTMLInputElement, MouseEvent>,
     schemaName: string
   ) => {
-    setHandlingAll(true);
     const newRows = [...rows];
-    for (const row of newRows) {
+    for (let i=0; i<newRows.length; i++) {
+      const row = newRows[i];
       if (row.schema === schemaName) {
-        row.selected = e.currentTarget.checked;
+        newRows[i] = { ...row, selected: e.currentTarget.checked };
         if (e.currentTarget.checked) addTableColumns(row.source);
         else removeTableColumns(row.source);
       }
     }
     setRows(newRows);
-    setHandlingAll(false);
   };
 
   const rowsDoNotHaveSchemaTables = (schema: string) => {
@@ -199,8 +196,7 @@ const SchemaBox = ({
           </div>
         </div>
         {/* TABLE BOX */}
-        {handlingAll && <BarLoader />}
-        {!handlingAll && schemaIsExpanded(schema) && (
+        {schemaIsExpanded(schema) && (
           <div className='ml-5 mt-3' style={{ width: '90%' }}>
             {searchedTables.length ? (
               searchedTables.map((row) => {
diff --git a/ui/app/mirrors/create/handlers.ts b/ui/app/mirrors/create/handlers.ts
index 00dab7347b..34d9aa2106 100644
--- a/ui/app/mirrors/create/handlers.ts
+++ b/ui/app/mirrors/create/handlers.ts
@@ -149,7 +149,7 @@ const reformattedTableMapping = (tableMapping: TableMapRow[]) => {
           sourceTableIdentifier: row.source,
           destinationTableIdentifier: row.destination,
           partitionKey: row.partitionKey,
-          exclude: row.exclude,
+          exclude: Array.from(row.exclude),
         };
       }
     })
@@ -306,7 +306,7 @@ export const fetchTables = async (
         source: `${schemaName}.${tableObject.tableName}`,
         destination: dstName,
         partitionKey: '',
-        exclude: [],
+        exclude: new Set(),
         selected: false,
         canMirror: tableObject.canMirror,
       });
diff --git a/ui/app/mirrors/create/mirrorcards.tsx b/ui/app/mirrors/create/mirrorcards.tsx
index 9e781324f1..5816fbaee5 100644
--- a/ui/app/mirrors/create/mirrorcards.tsx
+++ b/ui/app/mirrors/create/mirrorcards.tsx
@@ -58,7 +58,7 @@ const MirrorCards = ({
                 borderRadius: '1rem',
               }}
             >
-              <div>
+              <label style={{ display: 'block' }}>
                 <RowWithRadiobutton
                   label={
                     <Label>
@@ -70,7 +70,7 @@ const MirrorCards = ({
                 <Label>
                   <div style={{ fontSize: 14 }}>{card.description}</div>
                 </Label>
-              </div>
+              </label>
               <Label
                 as={Link}
                 target='_blank'
diff --git a/ui/app/mirrors/create/schema.ts b/ui/app/mirrors/create/schema.ts
index 3ca4408315..17b6fd5aa5 100644
--- a/ui/app/mirrors/create/schema.ts
+++ b/ui/app/mirrors/create/schema.ts
@@ -20,7 +20,7 @@ export const tableMappingSchema = z
       destinationTableIdentifier: z
         .string()
         .min(1, 'destination table names, if added, must be non-empty'),
-      exclude: z.array(z.string()).optional(),
+      exclude: z.set(z.string()).optional(),
       partitionKey: z.string().optional(),
     })
   )
diff --git a/ui/app/mirrors/errors/[mirrorName]/page.tsx b/ui/app/mirrors/errors/[mirrorName]/page.tsx
index d0148b6b7b..e2fad6b8b5 100644
--- a/ui/app/mirrors/errors/[mirrorName]/page.tsx
+++ b/ui/app/mirrors/errors/[mirrorName]/page.tsx
@@ -86,7 +86,11 @@ export default function MirrorError() {
           <Label variant='body'>
             <b>Mirror name</b>:
           </Label>
-          <Label variant='body'>{params.mirrorName}</Label>
+          <Label variant='body'>
+            <a href={`/mirrors/edit/${params.mirrorName}`}>
+              {params.mirrorName}
+            </a>
+          </Label>
 
           <div>
             <Label as='label' style={{ fontSize: 14, marginTop: '1rem' }}>
diff --git a/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx b/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx
index b88695d07e..667ddcbff4 100644
--- a/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx
+++ b/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx
@@ -100,8 +100,7 @@ export default function QRepStatusTable({
   );
   const [sortDir, setSortDir] = useState<'asc' | 'dsc'>('dsc');
   const displayedPartitions = useMemo(() => {
-    let currentPartitions = [...visiblePartitions];
-    currentPartitions = currentPartitions.filter(
+    const currentPartitions = visiblePartitions.filter(
       (partition: QRepPartitionStatus) => {
         return partition.partitionId
           .toLowerCase()