Adds support for a single button to be shown on hover in a table cell

Author: samejr

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

@@ -1,6 +1,6 @@
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { Link } from "@remix-run/react";
-import React, { ReactNode, forwardRef, useState, useContext, createContext } from "react";
+import React, { type ReactNode, forwardRef, useState, useContext, createContext } from "react";
 import { cn } from "~/utils/cn";
 import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover";
 import { InfoIconTooltip } from "./Tooltip";
@@ -302,6 +302,7 @@ export const TableCellMenu = forwardRef<
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     visibleButtons?: ReactNode;
     hiddenButtons?: ReactNode;
+    hiddenSoloButton?: ReactNode;
     popoverContent?: ReactNode;
     children?: ReactNode;
     isSelected?: boolean;
@@ -314,6 +315,7 @@ export const TableCellMenu = forwardRef<
       onClick,
       visibleButtons,
       hiddenButtons,
+      hiddenSoloButton,
       popoverContent,
       children,
       isSelected,
@@ -351,6 +353,10 @@ export const TableCellMenu = forwardRef<
                 {hiddenButtons}
               </div>
             )}
+            {/* Hidden solo button that shows on hover. To be used without the ellipsis popover content */}
+            {hiddenSoloButton && (
+              <div className={cn("hidden group-hover/table-row:block")}>{hiddenSoloButton}</div>
+            )}
             {/* Always visible buttons  */}
             {visibleButtons}
             {/* Always visible popover with ellipsis trigger */}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx

@@ -399,7 +399,9 @@ export default function Page() {
                         <TableCellMenu
                           isSticky
                           visibleButtons={queue.paused && <QueuePauseResumeButton queue={queue} />}
-                          hiddenButtons={!queue.paused && <QueuePauseResumeButton queue={queue} />}
+                          hiddenSoloButton={
+                            !queue.paused && <QueuePauseResumeButton queue={queue} />
+                          }
                         />
                       </TableRow>
                     ))