UI: Improvements for edit mirror page (#1292)

- Add spinner + disabled for edit mirror button
- Toast for potential failure in the status change endpoint
- Fix glitch with default destination table setting related to
typescript enum

ui/app/mirrors/[mirrorId]/edit/page.tsx

@@ -9,23 +9,31 @@ import {
 import { Button } from '@/lib/Button';
 import { Label } from '@/lib/Label';
 import { RowWithTextField } from '@/lib/Layout';
+import { ProgressCircle } from '@/lib/ProgressCircle';
 import { TextField } from '@/lib/TextField';
-import { ProgressCircle } from '@tremor/react';
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import TableMapping from '../../create/cdc/tablemapping';
 import { reformattedTableMapping } from '../../create/handlers';
 import { blankCDCSetting } from '../../create/helpers/common';
-
 type EditMirrorProps = {
   params: { mirrorId: string };
 };
 
+const notifyErr = (errMsg: string) => {
+  toast.error(errMsg, {
+    position: 'bottom-center',
+  });
+};
+
 const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
   const defaultBatchSize = blankCDCSetting.maxBatchSize;
   const defaultIdleTimeout = blankCDCSetting.idleTimeoutSeconds;
 
   const [rows, setRows] = useState<TableMapRow[]>([]);
+  const [loading, setLoading] = useState(false);
   const [mirrorState, setMirrorState] = useState<MirrorStatusResponse>();
   const [config, setConfig] = useState<CDCFlowConfigUpdate>({
     batchSize: defaultBatchSize,
@@ -79,10 +87,11 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
   }, [rows]);
 
   if (!mirrorState) {
-    return <ProgressCircle />;
+    return <ProgressCircle variant='determinate_progress_circle' />;
   }
 
   const sendFlowStateChangeRequest = async () => {
+    setLoading(true);
     const req: FlowStateChangeRequest = {
       flowJobName: mirrorId,
       sourcePeer: mirrorState.cdcStatus?.config?.source,
@@ -92,12 +101,17 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
         cdcFlowConfigUpdate: { ...config, additionalTables },
       },
     };
-    await fetch(`/api/mirrors/state_change`, {
+    const res = await fetch(`/api/mirrors/state_chage`, {
       method: 'POST',
       body: JSON.stringify(req),
       cache: 'no-store',
     });
-    push(`/mirrors/${mirrorId}`);
+    if (res.ok) {
+      push(`/mirrors/${mirrorId}`);
+    } else {
+      notifyErr(`Something went wrong: ${res.statusText}`);
+      setLoading(false);
+    }
   };
 
   return (
@@ -163,6 +177,7 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
         setRows={setRows}
         omitAdditionalTablesMapping={omitAdditionalTablesMapping}
       />
+
       <div style={{ display: 'flex' }}>
         <Button
           style={{
@@ -173,13 +188,18 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
           }}
           variant='normalSolid'
           disabled={
-            additionalTables.length > 0 &&
-            mirrorState.currentFlowState.toString() !==
-              FlowStatus[FlowStatus.STATUS_PAUSED]
+            loading ||
+            (additionalTables.length > 0 &&
+              mirrorState.currentFlowState.toString() !==
+                FlowStatus[FlowStatus.STATUS_PAUSED])
           }
           onClick={sendFlowStateChangeRequest}
         >
-          Edit Mirror
+          {loading ? (
+            <ProgressCircle variant='determinate_progress_circle' />
+          ) : (
+            'Edit Mirror'
+          )}
         </Button>
         <Button
           style={{ marginTop: '1rem', width: '8%', height: '2.5rem' }}
@@ -190,6 +210,7 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
           Back
         </Button>
       </div>
+      <ToastContainer />
     </div>
   );
 };

ui/app/mirrors/create/handlers.ts

@@ -245,17 +245,20 @@ export const fetchSchemas = async (peerName: string) => {
 };
 
 const getDefaultDestinationTable = (
-  peerType: DBType | undefined,
+  peerType: DBType,
   schemaName: string,
   tableName: string
 ) => {
-  if (!peerType) {
-    return `${schemaName}.${tableName}`;
-  }
-  if (dBTypeToJSON(peerType) == 'BIGQUERY') {
+  if (
+    peerType.toString() == 'BIGQUERY' ||
+    dBTypeToJSON(peerType) == 'BIGQUERY'
+  ) {
     return tableName;
   }
-  if (dBTypeToJSON(peerType) == 'CLICKHOUSE') {
+  if (
+    peerType.toString() == 'CLICKHOUSE' ||
+    dBTypeToJSON(peerType) == 'CLICKHOUSE'
+  ) {
     return `${schemaName}_${tableName}`;
   }
   return `${schemaName}.${tableName}`;
@@ -283,7 +286,7 @@ export const fetchTables = async (
       // setting defaults:
       // for bigquery, tables are not schema-qualified
       const dstName = getDefaultDestinationTable(
-        peerType,
+        peerType!,
         schemaName,
         tableObject.tableName
       );

ui/components/EditButton.tsx

@@ -1,14 +1,22 @@
 'use client';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
+import { ProgressCircle } from '@/lib/ProgressCircle';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 const EditButton = ({ toLink }: { toLink: string }) => {
+  const [loading, setLoading] = useState(false);
   const router = useRouter();
+
+  const handleEdit = () => {
+    setLoading(true);
+    router.push(toLink);
+  };
   return (
     <button
       className='IconButton'
-      onClick={() => router.push(toLink)}
+      onClick={handleEdit}
       aria-label='sort up'
       style={{
         display: 'flex',
@@ -20,7 +28,11 @@ const EditButton = ({ toLink }: { toLink: string }) => {
       }}
     >
       <Label>Edit Mirror</Label>
-      <Icon name='edit' />
+      {loading ? (
+        <ProgressCircle variant='determinate_progress_circle' />
+      ) : (
+        <Icon name='edit' />
+      )}
     </button>
   );
 };