Fix mirror actions dropdown

ui/app/mirrors/[mirrorId]/configValues.ts

@@ -22,14 +22,6 @@ const MirrorValues = (mirrorConfig: FlowConnectionConfigs | undefined) => {
       value: `${mirrorConfig?.softDelete}`,
       label: 'Soft Delete',
     },
-    {
-      value: mirrorConfig?.cdcStagingPath || 'Local',
-      label: 'CDC Staging Path',
-    },
-    {
-      value: mirrorConfig?.snapshotStagingPath || 'Local',
-      label: 'Snapshot Staging Path',
-    },
     {
       value: mirrorConfig?.script,
       label: 'Script',

ui/components/EditButton.tsx

@@ -2,7 +2,6 @@
 import { Button } from '@/lib/Button';
 import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
-import { Tooltip } from '@/lib/Tooltip';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
@@ -21,32 +20,21 @@ const EditButton = ({
     router.push(toLink);
   };
   return (
-    <Tooltip
+    <Button
+      onClick={handleEdit}
+      variant='normalBorderless'
       style={{
-        display: disabled ? 'flex' : 'none',
-        backgroundColor: 'white',
-        color: 'black',
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'left',
+        columnGap: '0.3rem',
         width: '100%',
       }}
-      content='Pause the mirror to enable editing'
+      disabled={disabled}
     >
-      <Button
-        className='IconButton'
-        onClick={handleEdit}
-        aria-label='sort up'
-        variant='normalBorderless'
-        style={{
-          display: 'flex',
-          alignItems: 'flex-start',
-          columnGap: '0.3rem',
-          width: '100%',
-        }}
-        disabled={disabled}
-      >
-        <Label>Edit mirror</Label>
-        {loading && <ProgressCircle variant='determinate_progress_circle' />}
-      </Button>
-    </Tooltip>
+      <Label>Edit {disabled ? '(pause first)' : 'mirror'}</Label>
+      {loading && <ProgressCircle variant='determinate_progress_circle' />}
+    </Button>
   );
 };
 

ui/components/MirrorActionsDropdown.tsx

@@ -4,7 +4,7 @@ import EditButton from '@/components/EditButton';
 import { ResyncDialog } from '@/components/ResyncDialog';
 import { FlowConnectionConfigs, FlowStatus } from '@/grpc_generated/flow';
 import { MirrorStatusResponse } from '@/grpc_generated/route';
-import { Select, SelectItem } from '@tremor/react';
+import { Select } from '@tremor/react';
 import { useEffect, useState } from 'react';
 import PauseOrResumeButton from './PauseOrResumeButton';
 
@@ -36,31 +36,17 @@ const MirrorActions = ({
   if (mounted)
     return (
       <div>
-        <Select
-          placeholder='Actions'
-          value='Actions'
-          style={{ width: 'fit-content' }}
-        >
-          <SelectItem value='1' style={{ padding: 0 }}>
-            {mirrorStatus && (
-              <PauseOrResumeButton
-                mirrorConfig={mirrorConfig}
-                mirrorStatus={mirrorStatus}
-              />
-            )}
-          </SelectItem>
-          <SelectItem value='2' style={{ padding: 0 }}>
-            <EditButton toLink={editLink} disabled={isNotPaused} />
-          </SelectItem>
-
-          <SelectItem value='3' style={{ padding: 0 }}>
-            {canResync && (
-              <ResyncDialog
-                mirrorConfig={mirrorConfig}
-                workflowId={workflowId}
-              />
-            )}
-          </SelectItem>
+        <Select placeholder='Actions' value='Actions'>
+          {mirrorStatus && (
+            <PauseOrResumeButton
+              mirrorConfig={mirrorConfig}
+              mirrorStatus={mirrorStatus}
+            />
+          )}
+          <EditButton toLink={editLink} disabled={isNotPaused} />
+          {canResync && (
+            <ResyncDialog mirrorConfig={mirrorConfig} workflowId={workflowId} />
+          )}
         </Select>
       </div>
     );

ui/components/PauseOrResumeButton.tsx

@@ -14,9 +14,8 @@ function PauseOrResumeButton({
   if (mirrorStatus.toString() === FlowStatus[FlowStatus.STATUS_RUNNING]) {
     return (
       <Button
-        className='IconButton'
-        aria-label='Pause'
         variant='normalBorderless'
+        style={{ width: '100%', justifyContent: 'left' }}
         onClick={() => changeFlowState(mirrorConfig, FlowStatus.STATUS_PAUSED)}
       >
         <Label>Pause mirror</Label>
@@ -25,8 +24,7 @@ function PauseOrResumeButton({
   } else if (mirrorStatus.toString() === FlowStatus[FlowStatus.STATUS_PAUSED]) {
     return (
       <Button
-        className='IconButton'
-        aria-label='Play'
+        style={{ width: '100%', justifyContent: 'left' }}
         onClick={() => changeFlowState(mirrorConfig, FlowStatus.STATUS_RUNNING)}
       >
         <Label>Resume mirror</Label>

ui/components/ResyncDialog.tsx

@@ -62,7 +62,10 @@ export const ResyncDialog = ({
       noInteract={true}
       size='xLarge'
       triggerButton={
-        <Button variant='normalBorderless' style={{ width: '100%' }}>
+        <Button
+          variant='normalBorderless'
+          style={{ width: '100%', justifyContent: 'left' }}
+        >
           <Label as='label'>Resync mirror</Label>
         </Button>
       }