From ad621ab474d051d90dcc4501c8e82760d88aa340 Mon Sep 17 00:00:00 2001
From: Bruno Carlos <6951456+brnovasco@users.noreply.github.com>
Date: Tue, 21 Jan 2025 18:05:23 -0300
Subject: [PATCH] feat(spu-ui): add tooltip to RedoButton in HistoryItem
 component

---
 apps/spu-ui/src/app/_components/history.tsx | 28 ++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/apps/spu-ui/src/app/_components/history.tsx b/apps/spu-ui/src/app/_components/history.tsx
index 8a6cdea..baf84e5 100644
--- a/apps/spu-ui/src/app/_components/history.tsx
+++ b/apps/spu-ui/src/app/_components/history.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import { RotateCcwIcon } from "lucide-react";
 import { useQueue } from "@sophys-web/api-client/hooks";
 import { api } from "@sophys-web/api-client/react";
@@ -13,6 +14,12 @@ import {
   CardTitle,
 } from "@sophys-web/ui/card";
 import { ScrollArea } from "@sophys-web/ui/scroll-area";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@sophys-web/ui/tooltip";
 import type { HistoryItemProps } from "../../lib/types";
 import {
   formatPlanNames,
@@ -20,7 +27,10 @@ import {
   QueueItemStatusBadge,
 } from "./queue/queue-item";
 
-function RedoButton(props: HistoryItemProps) {
+const RedoButton = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  { props: HistoryItemProps }
+>(({ props, ...buttonProps }, ref) => {
   const { add } = useQueue();
   if (!props.kwargs) {
     return null;
@@ -35,17 +45,20 @@ function RedoButton(props: HistoryItemProps) {
   };
   return (
     <Button
+      ref={ref}
       className="size-8"
       onClick={() => {
         add.mutate(submitParams);
       }}
       size="icon"
       variant="outline"
+      {...buttonProps}
     >
       <RotateCcwIcon className="h-4 w-4" />
     </Button>
   );
-}
+});
+RedoButton.displayName = "RedoButton";
 
 function HistoryItem({ props }: { props: HistoryItemProps }) {
   return (
@@ -63,7 +76,16 @@ function HistoryItem({ props }: { props: HistoryItemProps }) {
           <span className="break-all">{formatPlanNames(props.name)}</span>
         </CardTitle>
         <div className="absolute right-2 top-2 flex gap-1">
-          <RedoButton {...props} />
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger>
+                <RedoButton props={props} />
+              </TooltipTrigger>
+              <TooltipContent>
+                <Tooltip>Resubmit this item to the queue</Tooltip>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
       </CardHeader>
       <CardContent>