Skip to content

fix(desktop): remove browser pane tooltips and restyle pane/preset tooltips #5870

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

Merged
AviPeltz merged 1 commit into from
Jul 22, 2026
Merged

fix(desktop): remove browser pane tooltips and restyle pane/preset tooltips #5870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 7 additions & 2 deletions ...thenticated/_dashboard/v2-workspace/$workspaceId/components/V2PresetsBar/V2PresetsBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ export function V2PresetsBar({
style={{ scrollbarWidth: "none" }}
>
<DropdownMenu>
<Tooltip>
<Tooltip delayDuration={1000}>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<Button
Expand All @@ -210,7 +210,12 @@ export function V2PresetsBar({
</Button>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent side="bottom" sideOffset={4}>
<TooltipContent
side="bottom"
sideOffset={4}
showArrow={false}
className="rounded-sm border border-border bg-background px-1.5 py-0.5 font-medium text-muted-foreground shadow-sm"
>
Manage Presets
</TooltipContent>
</Tooltip>
Expand Down
1 change: 0 additions & 1 deletion ...dashboard/v2-workspace/$workspaceId/hooks/useDefaultPaneActions/useDefaultPaneActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export function useDefaultPaneActions({
{
key: "close",
icon: <HiMiniXMark className="size-3.5" />,
tooltip: <HotkeyLabel label="Close pane" id="CLOSE_PANE" />,
onClick: (ctx) => ctx.actions.close(),
},
],
Expand Down
76 changes: 27 additions & 49 deletions ...hooks/usePaneRegistry/components/BrowserPane/components/BrowserToolbar/BrowserToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
import { useCallback, useEffect, useRef, useState } from "react";
import {
TbArrowLeft,
Expand Down Expand Up @@ -109,54 +108,33 @@ export function BrowserToolbar({
return (
<div className="flex h-full min-w-0 flex-1 items-center px-2">
<div className="flex shrink-0 items-center gap-0.5">
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onGoBack}
disabled={!canGoBack}
className={`rounded p-1 transition-colors ${canGoBack ? "text-muted-foreground/60 hover:text-muted-foreground" : "opacity-30 pointer-events-none"}`}
>
<TbArrowLeft className="size-3.5" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
Go Back
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onGoForward}
disabled={!canGoForward}
className={`rounded p-1 transition-colors ${canGoForward ? "text-muted-foreground/60 hover:text-muted-foreground" : "opacity-30 pointer-events-none"}`}
>
<TbArrowRight className="size-3.5" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
Go Forward
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onReload}
className="rounded p-1 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
>
{isLoading ? (
<TbLoader2 className="size-3.5 animate-spin" />
) : (
<TbRefresh className="size-3.5" />
)}
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
{isLoading ? "Loading..." : "Reload"}
</TooltipContent>
</Tooltip>
<button
type="button"
onClick={onGoBack}
disabled={!canGoBack}
className={`rounded p-1 transition-colors ${canGoBack ? "text-muted-foreground/60 hover:text-muted-foreground" : "opacity-30 pointer-events-none"}`}
>
<TbArrowLeft className="size-3.5" />
</button>
<button
type="button"
onClick={onGoForward}
disabled={!canGoForward}
className={`rounded p-1 transition-colors ${canGoForward ? "text-muted-foreground/60 hover:text-muted-foreground" : "opacity-30 pointer-events-none"}`}
>
<TbArrowRight className="size-3.5" />
</button>
<button
type="button"
onClick={onReload}
className="rounded p-1 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
>
{isLoading ? (
<TbLoader2 className="size-3.5 animate-spin" />
) : (
<TbRefresh className="size-3.5" />
)}
</button>
</div>
<div className="mx-1.5 h-3.5 w-px shrink-0 bg-muted-foreground/60" />
<div className="relative flex min-w-0 flex-1 items-center">
Expand Down
1 change: 0 additions & 1 deletion ...main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/BrowserPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@ export function BrowserPane({
splitOrientation={handlers.splitOrientation}
onSplitPane={handlers.onSplitPane}
onClosePane={handlers.onClosePane}
closeHotkeyId="CLOSE_TERMINAL"
leadingActions={
<>
<Tooltip>
Expand Down
76 changes: 27 additions & 49 deletions .../ContentView/TabsContent/TabView/BrowserPane/components/BrowserToolbar/BrowserToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
import { useCallback, useEffect, useRef, useState } from "react";
import {
TbArrowLeft,
Expand Down Expand Up @@ -114,54 +113,33 @@ export function BrowserToolbar({
return (
<div className="flex h-full flex-1 min-w-0 items-center px-2">
<div className="flex items-center gap-0.5 shrink-0">
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onGoBack}
disabled={!canGoBack}
className={`rounded p-1 transition-colors ${canGoBack ? "text-muted-foreground/60 hover:text-muted-foreground" : "opacity-30 pointer-events-none"}`}
>
<TbArrowLeft className="size-3.5" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
Go Back
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onGoForward}
disabled={!canGoForward}
className={`rounded p-1 transition-colors ${canGoForward ? "text-muted-foreground/60 hover:text-muted-foreground" : "opacity-30 pointer-events-none"}`}
>
<TbArrowRight className="size-3.5" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
Go Forward
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onReload}
className="rounded p-1 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
>
{isLoading ? (
<TbLoader2 className="size-3.5 animate-spin" />
) : (
<TbRefresh className="size-3.5" />
)}
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
{isLoading ? "Loading..." : "Reload"}
</TooltipContent>
</Tooltip>
<button
type="button"
onClick={onGoBack}
disabled={!canGoBack}
className={`rounded p-1 transition-colors ${canGoBack ? "text-muted-foreground/60 hover:text-muted-foreground" : "opacity-30 pointer-events-none"}`}
>
<TbArrowLeft className="size-3.5" />
</button>
<button
type="button"
onClick={onGoForward}
disabled={!canGoForward}
className={`rounded p-1 transition-colors ${canGoForward ? "text-muted-foreground/60 hover:text-muted-foreground" : "opacity-30 pointer-events-none"}`}
>
<TbArrowRight className="size-3.5" />
</button>
<button
type="button"
onClick={onReload}
className="rounded p-1 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
>
{isLoading ? (
<TbLoader2 className="size-3.5 animate-spin" />
) : (
<TbRefresh className="size-3.5" />
)}
</button>
</div>
<div className="mx-1.5 h-3.5 w-px bg-muted-foreground/60" />
<div className="relative flex flex-1 min-w-0 items-center">
Expand Down
1 change: 0 additions & 1 deletion ...reens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,6 @@ export function ChatPane({
splitOrientation={handlers.splitOrientation}
onSplitPane={handlers.onSplitPane}
onClosePane={handlers.onClosePane}
closeHotkeyId="CLOSE_TERMINAL"
/>
</div>
)}
Expand Down
1 change: 0 additions & 1 deletion ...main/components/WorkspaceView/ContentView/TabsContent/TabView/CommentPane/CommentPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,6 @@ export function CommentPane({
splitOrientation={handlers.splitOrientation}
onSplitPane={handlers.onSplitPane}
onClosePane={handlers.onClosePane}
closeHotkeyId="CLOSE_TERMINAL"
/>
</div>
)}
Expand Down
1 change: 0 additions & 1 deletion ...in/components/WorkspaceView/ContentView/TabsContent/TabView/DevToolsPane/DevToolsPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ export function DevToolsPane({
splitOrientation={handlers.splitOrientation}
onSplitPane={handlers.onSplitPane}
onClosePane={handlers.onClosePane}
closeHotkeyId="CLOSE_TERMINAL"
/>
</div>
)}
Expand Down
1 change: 0 additions & 1 deletion ...enderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ export function TabPane({
splitOrientation={handlers.splitOrientation}
onSplitPane={handlers.onSplitPane}
onClosePane={handlers.onClosePane}
closeHotkeyId="CLOSE_TERMINAL"
/>
</div>
)}
Expand Down
34 changes: 14 additions & 20 deletions ...View/ContentView/TabsContent/TabView/components/PaneToolbarActions/PaneToolbarActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
import { HiMiniXMark } from "react-icons/hi2";
import { TbLayoutColumns, TbLayoutRows } from "react-icons/tb";
import type { HotkeyId } from "renderer/hotkeys";
import { HotkeyLabel } from "renderer/hotkeys";
import type { SplitOrientation } from "../../hooks";

Expand All @@ -10,16 +9,13 @@ interface PaneToolbarActionsProps {
onSplitPane: (e: React.MouseEvent) => void;
onClosePane: (e: React.MouseEvent) => void;
leadingActions?: React.ReactNode;
/** Hotkey ID to display for the close action. Defaults to CLOSE_PANE. */
closeHotkeyId?: HotkeyId;
}

export function PaneToolbarActions({
splitOrientation,
onSplitPane,
onClosePane,
leadingActions,
closeHotkeyId = "CLOSE_PANE",
}: PaneToolbarActionsProps) {
const splitIcon =
splitOrientation === "vertical" ? (
Expand All @@ -31,7 +27,7 @@ export function PaneToolbarActions({
return (
<div className="flex items-center gap-0.5">
{leadingActions}
<Tooltip>
<Tooltip delayDuration={1000}>
<TooltipTrigger asChild>
<button
type="button"
Expand All @@ -41,24 +37,22 @@ export function PaneToolbarActions({
{splitIcon}
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
<TooltipContent
side="bottom"
sideOffset={4}
showArrow={false}
className="rounded-sm border border-border bg-background px-1.5 py-0.5 font-medium text-muted-foreground shadow-sm"
>
<HotkeyLabel label="Split pane" id="SPLIT_AUTO" />
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onClosePane}
className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
>
<HiMiniXMark className="size-3.5" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
<HotkeyLabel label="Close pane" id={closeHotkeyId} />
</TooltipContent>
</Tooltip>
<button
type="button"
onClick={onClosePane}
className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
>
<HiMiniXMark className="size-3.5" />
</button>
</div>
);
}
9 changes: 7 additions & 2 deletions ...er/screens/main/components/WorkspaceView/ContentView/components/PresetsBar/PresetsBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,15 +343,20 @@ export function PresetsBar() {
style={{ scrollbarWidth: "none" }}
>
<DropdownMenu>
<Tooltip>
<Tooltip delayDuration={1000}>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="size-6 shrink-0">
<HiMiniCog6Tooth className="size-3.5" />
</Button>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent side="bottom" sideOffset={4}>
<TooltipContent
side="bottom"
sideOffset={4}
showArrow={false}
className="rounded-sm border border-border bg-background px-1.5 py-0.5 font-medium text-muted-foreground shadow-sm"
>
Manage Presets
</TooltipContent>
</Tooltip>
Expand Down
34 changes: 23 additions & 11 deletions packages/panes/src/react/components/PaneHeaderActions/PaneHeaderActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
import { Fragment } from "react";
import type { PaneActionConfig, RendererContext } from "../../types";

export function PaneHeaderActions<TData>({
Expand All @@ -24,18 +25,29 @@ export function PaneHeaderActions<TData>({
? action.tooltip(context)
: action.tooltip;

const button = (
<button
type="button"
onClick={() => action.onClick(context)}
className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
>
{icon}
</button>
);

if (tooltip == null) {
return <Fragment key={action.key}>{button}</Fragment>;
}

return (
<Tooltip key={action.key}>
<TooltipTrigger asChild>
<button
type="button"
onClick={() => action.onClick(context)}
className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
>
{icon}
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
<Tooltip key={action.key} delayDuration={1000}>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent
side="bottom"
sideOffset={4}
showArrow={false}
className="rounded-sm border border-border bg-background px-1.5 py-0.5 font-medium text-muted-foreground shadow-sm"
>
{tooltip}
</TooltipContent>
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletion packages/panes/src/react/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { Pane, Tab } from "../types";
export interface PaneActionConfig<TData> {
key: string;
icon: ReactNode | ((context: RendererContext<TData>) => ReactNode);
tooltip: ReactNode | ((context: RendererContext<TData>) => ReactNode);
tooltip?: ReactNode | ((context: RendererContext<TData>) => ReactNode);

@coderabbitai coderabbitai Bot Jul 22, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift

Add accessible names before removing tooltip-only labels.

Tooltip removal is fine, but these SVG-only buttons need aria-labels so screen-reader users can identify and operate them.

  • packages/panes/src/react/types.ts#L9-L9: add a required ariaLabel field (supporting the same renderer pattern if needed).
  • packages/panes/src/react/components/PaneHeaderActions/PaneHeaderActions.tsx#L28-L44: resolve and apply that label to the rendered <button>.
  • apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/components/PaneToolbarActions/PaneToolbarActions.tsx#L49-L55: add aria-label="Close pane".
  • apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/BrowserPane/components/BrowserToolbar/BrowserToolbar.tsx#L111-L137: label Back, Forward, and Reload/Loading.
  • apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/components/BrowserToolbar/BrowserToolbar.tsx#L116-L142: label Back, Forward, and Reload/Loading.
Suggested shared contract 
 export interface PaneActionConfig<TData> {
   key: string;
   icon: ReactNode | ((context: RendererContext<TData>) => ReactNode);
+  ariaLabel: string | ((context: RendererContext<TData>) => string);
   tooltip?: ReactNode | ((context: RendererContext<TData>) => ReactNode);
   onClick: (context: RendererContext<TData>) => void;
 }
📍 Affects 5 files
  • packages/panes/src/react/types.ts#L9-L9 (this comment)
  • packages/panes/src/react/components/PaneHeaderActions/PaneHeaderActions.tsx#L28-L44
  • apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/components/PaneToolbarActions/PaneToolbarActions.tsx#L49-L55
  • apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/BrowserPane/components/BrowserToolbar/BrowserToolbar.tsx#L111-L137
  • apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/components/BrowserToolbar/BrowserToolbar.tsx#L116-L142
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/panes/src/react/types.ts` at line 9, Add a required ariaLabel field
to the pane action type in packages/panes/src/react/types.ts, supporting the
existing renderer pattern if needed, and resolve/apply it to the rendered button
in packages/panes/src/react/components/PaneHeaderActions/PaneHeaderActions.tsx.
Add aria-label="Close pane" in the specified PaneToolbarActions component. In
both specified BrowserToolbar files, add accessible labels for the Back,
Forward, and Reload/Loading buttons, using the loading state’s appropriate
label.

onClick: (context: RendererContext<TData>) => void;
}

Expand Down
Loading