Support solo buttons in table row (#1840)

* Removed old condition that handled old v2 tables

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

* Makes the “hiddenButtons” support a single button instead of adding a new property

* Format the docs link for Schedules like the other for consistency

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";
@@ -21,7 +21,7 @@ const variants = {
     stickyCell: "group-hover/table-row:bg-charcoal-800",
     menuButton:
       "bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
-    menuButtonDivider: "group-hover/table-row:border-grid-dimmed",
+    menuButtonDivider: "group-hover/table-row:border-grid-bright",
     rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
   },
 } as const;
@@ -344,11 +344,12 @@ export const TableCellMenu = forwardRef<
             {hiddenButtons && (
               <div
                 className={cn(
-                  "hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r",
+                  "hidden group-hover/table-row:block",
+                  popoverContent && "pr-0.5 group-hover/table-row:border-r",
                   variants[variant].menuButtonDivider
                 )}
               >
-                {hiddenButtons}
+                <div className={cn("flex items-center gap-x-0.5")}>{hiddenButtons}</div>
               </div>
             )}
             {/* Always visible buttons  */}
@@ -368,18 +369,6 @@ export const TableCellMenu = forwardRef<
                 </PopoverContent>
               </Popover>
             )}
-            {/* Optionally pass in children to render in a popover */}
-            {!visibleButtons && !hiddenButtons && !popoverContent && (
-              <Popover onOpenChange={(open) => setIsOpen(open)}>
-                <PopoverVerticalEllipseTrigger isOpen={isOpen} />
-                <PopoverContent
-                  className="w-fit max-w-[10rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-                  align="end"
-                >
-                  <div className="flex flex-col gap-1 p-1">{children}</div>
-                </PopoverContent>
-              </Popover>
-            )}
           </div>
         </div>
       </TableCell>

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

@@ -472,7 +472,7 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) {
         </>
       }
       hiddenButtons={
-        <div className="flex items-center">
+        <>
           {run.isCancellable && (
             <SimpleTooltip
               button={
@@ -518,7 +518,7 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) {
               disableHoverableContent
             />
           )}
-        </div>
+        </>
       }
     />
   );

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

@@ -358,8 +358,12 @@ export default function Page() {
                 iconClassName="text-indigo-500"
                 variant="info"
                 accessory={
-                  <LinkButton to="https://trigger.dev/docs/v3/tasks-scheduled" variant="docs/small">
-                    Docs
+                  <LinkButton
+                    to="https://trigger.dev/docs/v3/tasks-scheduled"
+                    variant="docs/small"
+                    LeadingIcon={BookOpenIcon}
+                  >
+                    Schedules docs
                   </LinkButton>
                 }
                 panelClassName="max-w-full"