Mirror page: actions dropdown

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

@@ -1,7 +1,6 @@
 import { SyncStatusRow } from '@/app/dto/MirrorsDTO';
 import prisma from '@/app/utils/prisma';
-import EditButton from '@/components/EditButton';
-import { ResyncDialog } from '@/components/ResyncDialog';
+import MirrorActions from '@/components/MirrorActionsDropdown';
 import { FlowConnectionConfigs, FlowStatus } from '@/grpc_generated/flow';
 import { DBType } from '@/grpc_generated/peers';
 import { MirrorStatusResponse } from '@/grpc_generated/route';
@@ -77,8 +76,7 @@ export default async function ViewMirror({
   }
 
   let syncStatusChild = null;
-  let resyncComponent = null;
-  let editButtonHTML = null;
+  let actionsDropdown = null;
 
   if (mirrorStatus.cdcStatus) {
     let rowsSynced = syncs.reduce((acc, sync) => {
@@ -88,32 +86,27 @@ export default async function ViewMirror({
       return acc;
     }, 0);
     const mirrorConfig = FlowConnectionConfigs.decode(mirrorInfo.config_proto!);
+    syncStatusChild = (
+      <SyncStatus rowsSynced={rowsSynced} rows={rows} flowJobName={mirrorId} />
+    );
+
     const dbType = mirrorConfig.destination!.type;
     const canResync =
       dbType.valueOf() === DBType.BIGQUERY.valueOf() ||
       dbType.valueOf() === DBType.SNOWFLAKE.valueOf();
-    if (canResync) {
-      resyncComponent = (
-        <ResyncDialog
-          mirrorConfig={mirrorConfig}
-          workflowId={mirrorInfo.workflow_id || ''}
-        />
-      );
-    }
 
-    syncStatusChild = (
-      <SyncStatus rowsSynced={rowsSynced} rows={rows} flowJobName={mirrorId} />
-    );
     const isNotPaused =
       mirrorStatus.currentFlowState.toString() !==
       FlowStatus[FlowStatus.STATUS_PAUSED];
-    editButtonHTML = (
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <EditButton
-          toLink={`/mirrors/${mirrorId}/edit`}
-          disabled={isNotPaused}
-        />
-      </div>
+
+    actionsDropdown = (
+      <MirrorActions
+        mirrorConfig={mirrorConfig}
+        workflowId={mirrorInfo.workflow_id || ''}
+        editLink={`/mirrors/${mirrorId}/edit`}
+        canResync={canResync}
+        isNotPaused={isNotPaused}
+      />
     );
   } else {
     redirect(`/mirrors/status/qrep/${mirrorId}`);
@@ -129,11 +122,8 @@ export default async function ViewMirror({
           paddingRight: '2rem',
         }}
       >
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <Header variant='title2'>{mirrorId}</Header>
-          {editButtonHTML}
-        </div>
-        {resyncComponent}
+        <Header variant='title2'>{mirrorId}</Header>
+        {actionsDropdown}
       </div>
       <CDCMirror
         rows={rows}

ui/components/AlertDropdown.tsx

@@ -17,10 +17,6 @@ const AlertDropdown = ({
     setOpen((prevOpen) => !prevOpen);
   };
 
-  const handleClose = () => {
-    setOpen(false);
-  };
-
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>

ui/components/EditButton.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { Button } from '@/lib/Button';
-import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
 import { useRouter } from 'next/navigation';
@@ -25,22 +24,17 @@ const EditButton = ({
       className='IconButton'
       onClick={handleEdit}
       aria-label='sort up'
+      variant='normal'
       style={{
         display: 'flex',
-        marginLeft: '1rem',
-        alignItems: 'center',
-        backgroundColor: 'whitesmoke',
-        border: '1px solid rgba(0,0,0,0.1)',
-        borderRadius: '0.5rem',
+        alignItems: 'flex-start',
+        columnGap: '0.3rem',
+        width: '100%',
       }}
       disabled={disabled}
     >
       <Label>Edit Mirror</Label>
-      {loading ? (
-        <ProgressCircle variant='determinate_progress_circle' />
-      ) : (
-        <Icon name='edit' />
-      )}
+      {loading && <ProgressCircle variant='determinate_progress_circle' />}
     </Button>
   );
 };

ui/components/MirrorActionsDropdown.tsx

@@ -0,0 +1,72 @@
+'use client';
+import EditButton from '@/components/EditButton';
+import { ResyncDialog } from '@/components/ResyncDialog';
+import { FlowConnectionConfigs } from '@/grpc_generated/flow';
+import { Button } from '@/lib/Button/Button';
+import { Icon } from '@/lib/Icon';
+import { Label } from '@/lib/Label/Label';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { useEffect, useState } from 'react';
+
+const MirrorActions = ({
+  mirrorConfig,
+  workflowId,
+  editLink,
+  canResync,
+  isNotPaused,
+}: {
+  mirrorConfig: FlowConnectionConfigs;
+  workflowId: string;
+  editLink: string;
+  canResync: boolean;
+  isNotPaused: boolean;
+}) => {
+  const [mounted, setMounted] = useState(false);
+  const [open, setOpen] = useState(false);
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+  useEffect(() => setMounted(true), []);
+  if (mounted)
+    return (
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <Button
+            aria-controls={open ? 'menu-list-grow' : undefined}
+            aria-haspopup='true'
+            variant='normal'
+            onClick={handleToggle}
+            style={{
+              boxShadow: '0px 1px 1px rgba(0,0,0,0.1)',
+              border: '1px solid rgba(0,0,0,0.1)',
+            }}
+          >
+            <Label>Actions</Label>
+            <Icon name='arrow_downward_alt' />
+          </Button>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            style={{
+              border: '1px solid rgba(0,0,0,0.1)',
+              borderRadius: '0.5rem',
+              backgroundColor: 'white',
+            }}
+          >
+            <EditButton toLink={editLink} disabled={isNotPaused} />
+
+            {canResync && (
+              <ResyncDialog
+                mirrorConfig={mirrorConfig}
+                workflowId={workflowId}
+              />
+            )}
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    );
+  return <></>;
+};
+
+export default MirrorActions;

ui/components/ResyncDialog.tsx

@@ -62,8 +62,8 @@ export const ResyncDialog = ({
       noInteract={true}
       size='xLarge'
       triggerButton={
-        <Button variant='blue' style={{ height: '2em', width: '8em' }}>
-          Resync
+        <Button variant='normal' style={{ width: '100%' }}>
+          <Label as='label'>Resync</Label>
         </Button>
       }
     >