Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tooltips to action icons in request page #2790

Closed
wants to merge 4 commits into from
Closed

Add tooltips to action icons in request page #2790

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6631879
feat(requests): add tooltips to icons for better accessibility
use-tusk[bot] Oct 16, 2024
684c625
fix(11372790461): auto linting
use-tusk[bot] Oct 16, 2024
6140ee0
fix: address review from colegottdank
use-tusk[bot] Oct 16, 2024
412e577
fix(11374087738): auto linting
use-tusk[bot] Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 36 additions & 3 deletions web/components/shared/themed/table/viewButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
92 changes: 60 additions & 32 deletions web/components/templates/requestsV2/requestsPageV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -694,38 +700,60 @@ 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>
}
/>
Expand Down
Loading