UI: Create Mirror And Mirror Overview Improvements

ui/app/login/page.tsx

@@ -13,9 +13,7 @@ export default function Login() {
   const searchParams = useSearchParams();
   const [pass, setPass] = useState('');
   const [show, setShow] = useState(false);
-  const [error, setError] = useState(() =>
-    searchParams.has('reject') ? 'Authentication failed, please login' : ''
-  );
+  const [error, setError] = useState(() => '');
   const login = () => {
     fetch('/api/login', {
       method: 'POST',

ui/app/mirrors/create/handlers.ts

@@ -73,45 +73,33 @@ const validateCDCFields = (
       }
     | undefined
   )[],
-  setMsg: Dispatch<SetStateAction<{ ok: boolean; msg: string }>>,
   config: CDCConfig
-): boolean => {
+): string | undefined => {
   let validationErr: string | undefined;
   const tablesValidity = tableMappingSchema.safeParse(tableMapping);
   if (!tablesValidity.success) {
     validationErr = tablesValidity.error.issues[0].message;
-    setMsg({ ok: false, msg: validationErr });
-    return false;
   }
   const configValidity = cdcSchema.safeParse(config);
   if (!configValidity.success) {
     validationErr = configValidity.error.issues[0].message;
-    setMsg({ ok: false, msg: validationErr });
-    return false;
   }
-  setMsg({ ok: true, msg: '' });
-  return true;
+  return validationErr;
 };
 
 const validateQRepFields = (
   query: string,
-  setMsg: Dispatch<SetStateAction<{ ok: boolean; msg: string }>>,
   config: QRepConfig
-): boolean => {
+): string | undefined => {
   if (query.length < 5) {
-    setMsg({ ok: false, msg: 'Query is invalid' });
-    return false;
+    return 'Query is invalid';
   }
-
   let validationErr: string | undefined;
   const configValidity = qrepSchema.safeParse(config);
   if (!configValidity.success) {
     validationErr = configValidity.error.issues[0].message;
-    setMsg({ ok: false, msg: validationErr });
-    return false;
   }
-  setMsg({ ok: true, msg: '' });
-  return true;
+  return validationErr;
 };
 
 interface TableMapping {
@@ -140,25 +128,23 @@ export const handleCreateCDC = async (
   flowJobName: string,
   rows: TableMapRow[],
   config: CDCConfig,
-  setMsg: Dispatch<
-    SetStateAction<{
-      ok: boolean;
-      msg: string;
-    }>
-  >,
+  notify: (msg: string) => void,
   setLoading: Dispatch<SetStateAction<boolean>>,
   route: RouteCallback
 ) => {
   const flowNameValid = flowNameSchema.safeParse(flowJobName);
   if (!flowNameValid.success) {
     const flowNameErr = flowNameValid.error.issues[0].message;
-    setMsg({ ok: false, msg: flowNameErr });
+    notify(flowNameErr);
     return;
   }
 
   const tableNameMapping = reformattedTableMapping(rows);
-  const isValid = validateCDCFields(tableNameMapping, setMsg, config);
-  if (!isValid) return;
+  const fieldErr = validateCDCFields(tableNameMapping, config);
+  if (fieldErr) {
+    notify(fieldErr);
+    return;
+  }
 
   config['tableMappings'] = tableNameMapping as TableMapping[];
   config['flowJobName'] = flowJobName;
@@ -172,10 +158,7 @@ export const handleCreateCDC = async (
   }
 
   if (config.doInitialCopy == false && config.initialCopyOnly == true) {
-    setMsg({
-      ok: false,
-      msg: 'Initial Copy Only cannot be true if Initial Copy is false.',
-    });
+    notify('Initial Copy Only cannot be true if Initial Copy is false.');
     return;
   }
 
@@ -187,11 +170,11 @@ export const handleCreateCDC = async (
     }),
   }).then((res) => res.json());
   if (!statusMessage.created) {
-    setMsg({ ok: false, msg: 'unable to create mirror.' });
+    notify('unable to create mirror.');
     setLoading(false);
     return;
   }
-  setMsg({ ok: true, msg: 'CDC Mirror created successfully' });
+  notify('CDC Mirror created successfully');
   route();
   setLoading(false);
 };
@@ -209,20 +192,15 @@ export const handleCreateQRep = async (
   flowJobName: string,
   query: string,
   config: QRepConfig,
-  setMsg: Dispatch<
-    SetStateAction<{
-      ok: boolean;
-      msg: string;
-    }>
-  >,
+  notify: (msg: string) => void,
   setLoading: Dispatch<SetStateAction<boolean>>,
   route: RouteCallback,
   xmin?: boolean
 ) => {
   const flowNameValid = flowNameSchema.safeParse(flowJobName);
   if (!flowNameValid.success) {
     const flowNameErr = flowNameValid.error.issues[0].message;
-    setMsg({ ok: false, msg: flowNameErr });
+    notify(flowNameErr);
     return;
   }
 
@@ -237,16 +215,17 @@ export const handleCreateQRep = async (
 
   if (
     config.writeMode?.writeType == QRepWriteType.QREP_WRITE_MODE_UPSERT &&
-    !config.writeMode?.upsertKeyColumns
+    (!config.writeMode?.upsertKeyColumns ||
+      config.writeMode?.upsertKeyColumns.length == 0)
   ) {
-    setMsg({
-      ok: false,
-      msg: 'For upsert mode, unique key columns cannot be empty.',
-    });
+    notify('For upsert mode, unique key columns cannot be empty.');
+    return;
+  }
+  const fieldErr = validateQRepFields(query, config);
+  if (fieldErr) {
+    notify(fieldErr);
     return;
   }
-  const isValid = validateQRepFields(query, setMsg, config);
-  if (!isValid) return;
   config.flowJobName = flowJobName;
   config.query = query;
 
@@ -267,11 +246,11 @@ export const handleCreateQRep = async (
     }
   ).then((res) => res.json());
   if (!statusMessage.created) {
-    setMsg({ ok: false, msg: 'unable to create mirror.' });
+    notify('unable to create mirror.');
     setLoading(false);
     return;
   }
-  setMsg({ ok: true, msg: 'Query Replication Mirror created successfully' });
+  notify('Query Replication Mirror created successfully');
   route();
   setLoading(false);
 };

ui/app/mirrors/create/helpers/qrep.ts

@@ -112,8 +112,9 @@ export const qrepSettings: MirrorSetting[] = [
           writeMode: currWriteMode,
         };
       }),
-    tips: `Comma separated string column names. Needed when write mode is set to UPSERT. 
+    tips: `Needed when write mode is set to UPSERT.
     These columns need to be unique and are used for updates.`,
+    type: 'select',
   },
   {
     label: 'Initial Copy Only',

ui/app/mirrors/create/page.tsx

@@ -4,17 +4,18 @@ import { RequiredIndicator } from '@/components/RequiredIndicator';
 import { QRepConfig } from '@/grpc_generated/flow';
 import { DBType, Peer } from '@/grpc_generated/peers';
 import { Button } from '@/lib/Button';
-import { ButtonGroup } from '@/lib/ButtonGroup';
+import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { RowWithSelect, RowWithTextField } from '@/lib/Layout';
 import { Panel } from '@/lib/Panel';
 import { TextField } from '@/lib/TextField';
 import { Divider } from '@tremor/react';
 import Image from 'next/image';
-import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import ReactSelect from 'react-select';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import { InfoPopover } from '../../../components/InfoPopover';
 import { CDCConfig, TableMapRow } from '../../dto/MirrorsDTO';
 import CDCConfigForm from './cdc/cdc';
@@ -47,22 +48,23 @@ function getPeerLabel(peer: Peer) {
   );
 }
 
+const notifyErr = (errMsg: string) => {
+  toast.error(errMsg, {
+    position: toast.POSITION.BOTTOM_CENTER,
+  });
+};
 export default function CreateMirrors() {
   const router = useRouter();
   const [mirrorName, setMirrorName] = useState<string>('');
   const [mirrorType, setMirrorType] = useState<string>('');
-  const [formMessage, setFormMessage] = useState<{ ok: boolean; msg: string }>({
-    ok: true,
-    msg: '',
-  });
   const [loading, setLoading] = useState<boolean>(false);
   const [config, setConfig] = useState<CDCConfig | QRepConfig>(blankCDCSetting);
   const [peers, setPeers] = useState<Peer[]>([]);
   const [rows, setRows] = useState<TableMapRow[]>([]);
   const [qrepQuery, setQrepQuery] =
     useState<string>(`-- Here's a sample template:
-    SELECT * FROM <table_name> 
-    WHERE <watermark_column> 
+    SELECT * FROM <table_name>
+    WHERE <watermark_column>
     BETWEEN {{.start}} AND {{.end}}`);
 
   useEffect(() => {
@@ -183,15 +185,7 @@ export default function CreateMirrors() {
             Configuration
           </Label>
         )}
-        {!loading && formMessage.msg.length > 0 && (
-          <Label
-            colorName='lowContrast'
-            colorSet={formMessage.ok ? 'positive' : 'destructive'}
-            variant='subheadline'
-          >
-            {formMessage.msg}
-          </Label>
-        )}
+        {!loading && <ToastContainer />}
         {mirrorType === '' ? (
           <></>
         ) : mirrorType === 'CDC' ? (
@@ -213,36 +207,41 @@ export default function CreateMirrors() {
       </Panel>
       <Panel>
         {mirrorType && (
-          <ButtonGroup className='justify-end'>
-            <Button as={Link} href='/mirrors'>
-              Cancel
-            </Button>
-            <Button
-              variant='normalSolid'
-              onClick={() =>
-                mirrorType === 'CDC'
-                  ? handleCreateCDC(
-                      mirrorName,
-                      rows,
-                      config as CDCConfig,
-                      setFormMessage,
-                      setLoading,
-                      listMirrorsPage
-                    )
-                  : handleCreateQRep(
-                      mirrorName,
-                      qrepQuery,
-                      config as QRepConfig,
-                      setFormMessage,
-                      setLoading,
-                      listMirrorsPage,
-                      mirrorType === 'XMIN' // for handling xmin specific
-                    )
-              }
-            >
-              Create Mirror
-            </Button>
-          </ButtonGroup>
+          <Button
+            style={{
+              position: 'fixed',
+              bottom: '5%',
+              right: '5%',
+              width: '10em',
+              height: '3em',
+              boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+              borderRadius: '2em',
+              fontWeight: 'bold',
+            }}
+            variant='normalSolid'
+            onClick={() =>
+              mirrorType === 'CDC'
+                ? handleCreateCDC(
+                    mirrorName,
+                    rows,
+                    config as CDCConfig,
+                    notifyErr,
+                    setLoading,
+                    listMirrorsPage
+                  )
+                : handleCreateQRep(
+                    mirrorName,
+                    qrepQuery,
+                    config as QRepConfig,
+                    notifyErr,
+                    setLoading,
+                    listMirrorsPage,
+                    mirrorType === 'XMIN' // for handling xmin specific
+                  )
+            }
+          >
+            <Icon name='add' /> Create Mirror
+          </Button>
         )}
       </Panel>
     </div>

ui/app/mirrors/create/qrep/qrep.tsx

@@ -14,6 +14,7 @@ import { MirrorSetter } from '../../../dto/MirrorsDTO';
 import { defaultSyncMode } from '../cdc/cdc';
 import { fetchAllTables, fetchColumns } from '../handlers';
 import { MirrorSetting, blankQRepSetting } from '../helpers/common';
+import UpsertColsDisplay from './upsertcols';
 
 interface QRepConfigProps {
   settings: MirrorSetting[];
@@ -29,10 +30,6 @@ interface QRepConfigProps {
   xmin?: boolean;
 }
 
-const SyncModes = ['AVRO', 'Copy with Binary'].map((value) => ({
-  label: value,
-  value,
-}));
 const WriteModes = ['Append', 'Upsert', 'Overwrite'].map((value) => ({
   label: value,
   value,
@@ -50,6 +47,7 @@ export default function QRepConfigForm({
   const [watermarkColumns, setWatermarkColumns] = useState<
     { value: string; label: string }[]
   >([]);
+
   const [loading, setLoading] = useState(false);
 
   const handleChange = (val: string | boolean, setting: MirrorSetting) => {
@@ -220,6 +218,13 @@ export default function QRepConfigForm({
                           }
                           options={WriteModes}
                         />
+                      ) : setting.label === 'Upsert Key Columns' ? (
+                        <UpsertColsDisplay
+                          columns={watermarkColumns}
+                          loading={loading}
+                          setter={setter}
+                          setting={setting}
+                        />
                       ) : (
                         <ReactSelect
                           placeholder={