From 7170b8455c195cc72a2aa02b1e4678ee05710fcd Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Wed, 27 Dec 2023 22:18:05 +0530
Subject: [PATCH 1/5] tabs, default snapshot, link load

---
 ui/app/mirrors/create/cdc/fields.tsx    |  3 ++-
 ui/app/mirrors/create/helpers/cdc.ts    |  3 ++-
 ui/app/mirrors/create/helpers/common.ts |  4 ++--
 ui/app/mirrors/create/qrep/qrep.tsx     |  2 +-
 ui/app/mirrors/edit/[mirrorId]/cdc.tsx  | 19 +++++++++++++++----
 ui/app/mirrors/tables.tsx               | 11 ++++-------
 ui/components/MirrorLink.tsx            | 23 +++++++++++++++++++++++
 7 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 ui/components/MirrorLink.tsx

diff --git a/ui/app/mirrors/create/cdc/fields.tsx b/ui/app/mirrors/create/cdc/fields.tsx
index a401c3be24..19518e2e42 100644
--- a/ui/app/mirrors/create/cdc/fields.tsx
+++ b/ui/app/mirrors/create/cdc/fields.tsx
@@ -25,6 +25,7 @@ const CDCFields = ({ setting, handleChange }: FieldProps) => {
           }}
         >
           <Switch
+            defaultChecked={setting.default as boolean}
             onCheckedChange={(state: boolean) => handleChange(state, setting)}
           />
           {setting.tips && (
@@ -52,7 +53,7 @@ const CDCFields = ({ setting, handleChange }: FieldProps) => {
           <TextField
             variant='simple'
             type={setting.type}
-            defaultValue={setting.default}
+            defaultValue={setting.default as string}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               handleChange(e.target.value, setting)
             }
diff --git a/ui/app/mirrors/create/helpers/cdc.ts b/ui/app/mirrors/create/helpers/cdc.ts
index 88d39a6dc8..3cf35d4c92 100644
--- a/ui/app/mirrors/create/helpers/cdc.ts
+++ b/ui/app/mirrors/create/helpers/cdc.ts
@@ -6,10 +6,11 @@ export const cdcSettings: MirrorSetting[] = [
     stateHandler: (value, setter) =>
       setter((curr: CDCConfig) => ({
         ...curr,
-        doInitialCopy: (value as boolean) || false,
+        doInitialCopy: (value as boolean) || true,
       })),
     tips: 'Specify if you want initial load to happen for your tables.',
     type: 'switch',
+    default: true,
   },
   {
     label: 'Pull Batch Size',
diff --git a/ui/app/mirrors/create/helpers/common.ts b/ui/app/mirrors/create/helpers/common.ts
index 15f0607920..f68e72c479 100644
--- a/ui/app/mirrors/create/helpers/common.ts
+++ b/ui/app/mirrors/create/helpers/common.ts
@@ -15,7 +15,7 @@ export interface MirrorSetting {
   required?: boolean;
   tips?: string;
   helpfulLink?: string;
-  default?: string | number;
+  default?: string | number | boolean;
   advanced?: boolean; // whether it should come under an 'Advanced' section
 }
 
@@ -29,7 +29,7 @@ export const blankCDCSetting: FlowConnectionConfigs = {
   tableNameSchemaMapping: {},
   metadataPeer: undefined,
   maxBatchSize: 100000,
-  doInitialCopy: false,
+  doInitialCopy: true,
   publicationName: '',
   snapshotNumRowsPerPartition: 500000,
   snapshotMaxParallelWorkers: 1,
diff --git a/ui/app/mirrors/create/qrep/qrep.tsx b/ui/app/mirrors/create/qrep/qrep.tsx
index 9dd7943b80..bfabd6a3ce 100644
--- a/ui/app/mirrors/create/qrep/qrep.tsx
+++ b/ui/app/mirrors/create/qrep/qrep.tsx
@@ -285,7 +285,7 @@ export default function QRepConfigForm({
                       defaultValue={
                         setting.label === 'Destination Table Name'
                           ? mirrorConfig.destinationTableIdentifier
-                          : setting.default
+                          : (setting.default as string)
                       }
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                         handleChange(e.target.value, setting)
diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
index 8c33fa7c9b..ba981539e4 100644
--- a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -1,5 +1,4 @@
 'use client';
-
 import { SyncStatusRow } from '@/app/dto/MirrorsDTO';
 import TimeLabel from '@/components/TimeComponent';
 import {
@@ -275,7 +274,13 @@ export function CDCMirror({
   createdAt,
   syncStatusChild,
 }: CDCMirrorStatusProps) {
-  const [selectedTab, setSelectedTab] = useState('');
+  const [selectedTab, setSelectedTab] = useState(-1);
+  const LocalStorageTabKey = 'cdctab';
+
+  const handleTab = (index: number) => {
+    localStorage.setItem(LocalStorageTabKey, index.toString());
+    setSelectedTab(index);
+  };
 
   let snapshot = <></>;
   if (cdc.snapshotStatus) {
@@ -284,12 +289,18 @@ export function CDCMirror({
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      setSelectedTab(localStorage?.getItem('mirrortab') || 'tab1');
+      setSelectedTab(
+        parseInt(localStorage?.getItem(LocalStorageTabKey) || '0')
+      );
     }
   }, []);
 
   return (
-    <TabGroup style={{ marginTop: '1rem' }}>
+    <TabGroup
+      index={selectedTab}
+      onIndexChange={handleTab}
+      style={{ marginTop: '1rem' }}
+    >
       <TabList
         color='neutral'
         style={{ display: 'flex', justifyContent: 'space-around' }}
diff --git a/ui/app/mirrors/tables.tsx b/ui/app/mirrors/tables.tsx
index 6c1289befc..0a96e33011 100644
--- a/ui/app/mirrors/tables.tsx
+++ b/ui/app/mirrors/tables.tsx
@@ -1,11 +1,11 @@
 'use client';
 import { DropDialog } from '@/components/DropDialog';
+import MirrorLink from '@/components/MirrorLink';
 import PeerButton from '@/components/PeerComponent';
 import TimeLabel from '@/components/TimeComponent';
 import { Label } from '@/lib/Label';
 import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
-import Link from 'next/link';
 import { useMemo, useState } from 'react';
 import { MirrorError } from './mirror-status';
 
@@ -18,6 +18,7 @@ export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
       }),
     [searchQuery, cdcFlows]
   );
+  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <>
@@ -70,9 +71,7 @@ export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
           {mirrors.map((flow: any) => (
             <TableRow key={flow.id}>
               <TableCell>
-                <Label as={Link} href={`/mirrors/edit/${flow.name}`}>
-                  <div className='cursor-pointer underline'>{flow.name}</div>
-                </Label>
+                <MirrorLink flowName={flow?.name} />
               </TableCell>
               <TableCell>
                 <PeerButton
@@ -167,9 +166,7 @@ export function QRepFlows({
           {mirrors.map((flow: any) => (
             <TableRow key={flow.id}>
               <TableCell>
-                <Label as={Link} href={`/mirrors/edit/${flow.name}`}>
-                  <div className='cursor-pointer underline'>{flow.name}</div>
-                </Label>
+                <MirrorLink flowName={flow?.name} />
               </TableCell>
               <TableCell>
                 <PeerButton
diff --git a/ui/components/MirrorLink.tsx b/ui/components/MirrorLink.tsx
new file mode 100644
index 0000000000..53cc6f14a4
--- /dev/null
+++ b/ui/components/MirrorLink.tsx
@@ -0,0 +1,23 @@
+'use client';
+import { Label } from '@/lib/Label';
+import { ProgressCircle } from '@/lib/ProgressCircle';
+import Link from 'next/link';
+import { useState } from 'react';
+
+const MirrorLink = ({ flowName }: { flowName: string }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  return (
+    <div onClick={() => setIsLoading(true)}>
+      {isLoading ? (
+        <ProgressCircle variant='determinate_progress_circle' />
+      ) : (
+        <Link href={`/mirrors/edit/${flowName}`}>
+          <Label>
+            <div className='cursor-pointer underline'>{flowName}</div>
+          </Label>
+        </Link>
+      )}
+    </div>
+  );
+};
+export default MirrorLink;

From 407b3774669059cf26f5cb97d30328c592c71b0b Mon Sep 17 00:00:00 2001
From: Amogh Bharadwaj <amoghrb01@gmail.com>
Date: Wed, 27 Dec 2023 22:43:39 +0530
Subject: [PATCH 2/5] fix default setting

---
 ui/app/mirrors/create/helpers/cdc.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/mirrors/create/helpers/cdc.ts b/ui/app/mirrors/create/helpers/cdc.ts
index 3cf35d4c92..e5f0638d61 100644
--- a/ui/app/mirrors/create/helpers/cdc.ts
+++ b/ui/app/mirrors/create/helpers/cdc.ts
@@ -6,7 +6,7 @@ export const cdcSettings: MirrorSetting[] = [
     stateHandler: (value, setter) =>
       setter((curr: CDCConfig) => ({
         ...curr,
-        doInitialCopy: (value as boolean) || true,
+        doInitialCopy: (value as boolean) ?? true,
       })),
     tips: 'Specify if you want initial load to happen for your tables.',
     type: 'switch',

From 81e1fc4f44acf68210fe8ee35a5444b5ecaf3a0d Mon Sep 17 00:00:00 2001
From: Amogh Bharadwaj <amoghrb01@gmail.com>
Date: Wed, 27 Dec 2023 23:11:55 +0530
Subject: [PATCH 3/5] fix parseint usage

---
 ui/app/mirrors/edit/[mirrorId]/cdc.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
index ba981539e4..ec46c94682 100644
--- a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -290,7 +290,7 @@ export function CDCMirror({
   useEffect(() => {
     if (typeof window !== 'undefined') {
       setSelectedTab(
-        parseInt(localStorage?.getItem(LocalStorageTabKey) || '0')
+        parseInt(localStorage?.getItem(LocalStorageTabKey)) | 0
       );
     }
   }, []);

From 5e9d7af0b88ab6731fb42ed6f09820927550a186 Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Thu, 28 Dec 2023 02:18:13 +0530
Subject: [PATCH 4/5] lint

---
 ui/app/mirrors/edit/[mirrorId]/cdc.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
index ec46c94682..cdaf39248d 100644
--- a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -289,9 +289,7 @@ export function CDCMirror({
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      setSelectedTab(
-        parseInt(localStorage?.getItem(LocalStorageTabKey)) | 0
-      );
+      setSelectedTab(parseInt(localStorage?.getItem(LocalStorageTabKey)) | 0);
     }
   }, []);
 

From 175128587f0352d9acf34da4ca43f5e7600cb042 Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Thu, 28 Dec 2023 02:21:31 +0530
Subject: [PATCH 5/5] fix type for tab

---
 ui/app/mirrors/edit/[mirrorId]/cdc.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
index cdaf39248d..52d21c4999 100644
--- a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -289,7 +289,9 @@ export function CDCMirror({
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      setSelectedTab(parseInt(localStorage?.getItem(LocalStorageTabKey)) | 0);
+      setSelectedTab(
+        parseInt(localStorage?.getItem(LocalStorageTabKey) ?? '0') | 0
+      );
     }
   }, []);