tabs, default snapshot, link load

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)
             }

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',

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,

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)

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' }}

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

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;