Improved the menu items

Author: samejr

apps/webapp/app/components/primitives/Table.tsx

@@ -277,7 +277,7 @@ export const TableCellMenu = forwardRef<
         hasAction={true}
       >
         <div className="relative p-1">
-          <div className="absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 bg-background-dimmed p-0.5 shadow-lg group-hover/table-row:rounded-[0.25rem] group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright">
+          <div className="absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 bg-background-dimmed p-0.5 group-hover/table-row:rounded-[0.25rem] group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright">
             {/* Hidden buttons that show on hover */}
             {hiddenButtons && (
               <div className="hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r group-hover/table-row:border-grid-dimmed">

apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

@@ -1,11 +1,10 @@
 import {
   ArrowPathIcon,
+  ArrowRightIcon,
   ClockIcon,
   CpuChipIcon,
   NoSymbolIcon,
   RectangleStackIcon,
-  StopCircleIcon,
-  StopIcon,
 } from "@heroicons/react/20/solid";
 import { BeakerIcon, BookOpenIcon, CheckIcon } from "@heroicons/react/24/solid";
 import { useLocation } from "@remix-run/react";
@@ -16,6 +15,7 @@ import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Checkbox } from "~/components/primitives/Checkbox";
 import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
 import { Header3 } from "~/components/primitives/Headers";
+import { PopoverMenuItem } from "~/components/primitives/Popover";
 import { useSelectedItems } from "~/components/primitives/SelectedItemsProvider";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useEnvironments } from "~/hooks/useEnvironments";
@@ -412,9 +412,65 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) {
   return (
     <TableCellMenu
       isSticky
+      popoverContent={
+        <>
+          <PopoverMenuItem
+            to={path}
+            icon={ArrowRightIcon}
+            leadingIconClassName="text-blue-500"
+            title="View run"
+          />
+          {!run.isCancellable && (
+            <Dialog>
+              <DialogTrigger
+                asChild
+                className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+              >
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={NoSymbolIcon}
+                  leadingIconClassName="text-error"
+                  fullWidth
+                  textAlignLeft
+                  className="w-full px-1.5 py-[0.9rem]"
+                >
+                  Cancel run
+                </Button>
+              </DialogTrigger>
+              <CancelRunDialog
+                runFriendlyId={run.friendlyId}
+                redirectPath={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+          {run.isReplayable && (
+            <Dialog>
+              <DialogTrigger
+                asChild
+                className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+              >
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={ArrowPathIcon}
+                  leadingIconClassName="text-success"
+                  fullWidth
+                  textAlignLeft
+                  className="w-full px-1.5 py-[0.9rem]"
+                >
+                  Replay run
+                </Button>
+              </DialogTrigger>
+              <ReplayRunDialog
+                runFriendlyId={run.friendlyId}
+                failedRedirect={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+        </>
+      }
       hiddenButtons={
-        <div className="flex items-center gap-1">
-          {run.isCancellable && (
+        <div className="flex items-center">
+          {!run.isCancellable && (
             <SimpleTooltip
               button={
                 <Dialog>
@@ -435,6 +491,9 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) {
               disableHoverableContent
             />
           )}
+          {!run.isCancellable && run.isReplayable && (
+            <div className="mx-0.5 h-6 w-px bg-grid-dimmed" />
+          )}
           {run.isReplayable && (
             <SimpleTooltip
               button={