feat(requests): add tooltips to icons for better accessibility

Helicone · Oct 16, 2024 · 6631879 · 6631879
1 parent 4a9023d
commit 6631879
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 35 deletions.
diff --git a/web/components/shared/themed/table/viewButton.tsx b/web/components/shared/themed/table/viewButton.tsx
@@ -13,6 +13,12 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface ViewButtonProps {
   currentView: RequestViews;
@@ -25,6 +31,24 @@ export default function ViewButton({
 }: ViewButtonProps) {
   return (
     <div className="hidden md:block text-right">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-slate-700 dark:text-slate-400"
+              >
+                <Square3Stack3DIcon className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Change view</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
@@ -36,7 +60,10 @@ export default function ViewButton({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-40">
-          <DropdownMenuItem onClick={() => onViewChange("table")}>
+          <DropdownMenuItem 
+            onClick={() => onViewChange("table")}
+            title="Switch to table view"
+          >
             <div className="flex w-full items-center">
               <TableCellsIcon className="mr-2 h-5 w-5" />
               Table
@@ -45,14 +72,20 @@ export default function ViewButton({
               <CheckIcon className="ml-auto h-5 w-5" />
             )}
           </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => onViewChange("row")}>
+          <DropdownMenuItem 
+            onClick={() => onViewChange("row")}
+            title="Switch to row view"
+          >
             <div className="flex w-full items-center">
               <Square2StackIcon className="mr-2 h-5 w-5" />
               Row
             </div>
             {currentView === "row" && <CheckIcon className="ml-auto h-5 w-5" />}
           </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => onViewChange("card")}>
+          <DropdownMenuItem 
+            onClick={() => onViewChange("card")}
+            title="Switch to card view"
+          >
             <div className="flex w-full items-center">
               <Squares2X2Icon className="mr-2 h-5 w-5" />
               Card

diff --git a/web/components/templates/requestsV2/requestsPageV2.tsx b/web/components/templates/requestsV2/requestsPageV2.tsx
@@ -56,6 +56,12 @@ import { Button } from "@/components/ui/button";
 import RequestDiv from "./requestDiv";
 import StreamWarning from "./StreamWarning";
 import UnauthorizedView from "./UnauthorizedView";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface RequestsPageV2Props {
   currentPage: number;
@@ -694,38 +700,56 @@ const RequestsPageV2 = (props: RequestsPageV2Props) => {
             title={isCached ? "Cached Requests" : "Requests"}
             headerActions={
               <div className="flex flex-row gap-2 items-center">
-                <button
-                  onClick={() => {
-                    refetch();
-                  }}
-                  className="font-medium text-black dark:text-white text-sm items-center flex flex-row hover:text-sky-700 dark:hover:text-sky-300"
-                >
-                  <ArrowPathIcon
-                    className={clsx(
-                      isDataLoading || isRefetching ? "animate-spin" : "",
-                      "h-4 w-4 inline duration-500 ease-in-out"
-                    )}
-                  />
-                </button>
-                <Button
-                  variant="ghost"
-                  className={clsx(
-                    "flex flex-row gap-2 items-center",
-                    isLive ? "text-green-500 animate-pulse" : "text-slate-500"
-                  )}
-                  size="sm_sleek"
-                  onClick={() => setIsLive(!isLive)}
-                >
-                  <div
-                    className={clsx(
-                      isLive ? "bg-green-500" : "bg-slate-500",
-                      "h-2 w-2 rounded-full"
-                    )}
-                  ></div>
-                  <span className="text-xs italic font-medium text-slate-900 dark:text-slate-100 whitespace-nowrap">
-                    {isLive ? "Live" : "Start Live"}
-                  </span>
-                </Button>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        onClick={() => {
+                          refetch();
+                        }}
+                        className="font-medium text-black dark:text-white text-sm items-center flex flex-row hover:text-sky-700 dark:hover:text-sky-300"
+                      >
+                        <ArrowPathIcon
+                          className={clsx(
+                            isDataLoading || isRefetching ? "animate-spin" : "",
+                            "h-4 w-4 inline duration-500 ease-in-out"
+                          )}
+                        />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Refresh data</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        className={clsx(
+                          "flex flex-row gap-2 items-center",
+                          isLive ? "text-green-500 animate-pulse" : "text-slate-500"
+                        )}
+                        size="sm_sleek"
+                        onClick={() => setIsLive(!isLive)}
+                      >
+                        <div
+                          className={clsx(
+                            isLive ? "bg-green-500" : "bg-slate-500",
+                            "h-2 w-2 rounded-full"
+                          )}
+                        ></div>
+                        <span className="text-xs italic font-medium text-slate-900 dark:text-slate-100 whitespace-nowrap">
+                          {isLive ? "Live" : "Start Live"}
+                        </span>
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{isLive ? "Stop live updates" : "Start live updates"}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </div>
             }
           />