Skip to content

refactor: replace MUI Tooltip with MiniTooltip #20027

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

Closed
aqandrew wants to merge 16 commits into from
Closed

refactor: replace MUI Tooltip with MiniTooltip #20027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3e71889
refactor: replace MUI Tooltip with MiniTooltip
aqandrew Sep 30, 2025
262df48
refactor: replace MUI Tooltip with MiniTooltip in Badges
aqandrew Sep 30, 2025
8cbcb7b
chore: lint:fix
aqandrew Sep 30, 2025
062dc85
fix: add aria-label to MiniTooltip trigger
aqandrew Sep 30, 2025
9438da7
refactor: replace MUI Tooltip in components which pass JSX to title
aqandrew Oct 4, 2025
f2e21a8
style: format
aqandrew Oct 4, 2025
e0e2bcd
style: sort imports
aqandrew Oct 4, 2025
fd62277
style: check:fix
aqandrew Oct 4, 2025
2991d90
fix: use open prop as default isOpen
aqandrew Oct 9, 2025
d843fa9
Merge branch 'main' into aqandrew/replace-mui-tooltip
aqandrew Oct 9, 2025
9398e0d
fix: prevent infinite renders in CreateWorkspacePageView by replacing…
aqandrew Oct 15, 2025
8b1e512
test: add story including OverflowRolePill (nested tooltip)
aqandrew Oct 15, 2025
dc2adf8
fix: keep loading Latency tooltip from moving when opened
aqandrew Oct 15, 2025
bfb263d
Revert "fix: prevent infinite renders in CreateWorkspacePageView by r…
aqandrew Oct 15, 2025
0e100ba
test: revert NoLatency play function back to checking name instead of
aqandrew Oct 15, 2025
2da4f52
chore: rm unused import
aqandrew Oct 15, 2025
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
10 changes: 5 additions & 5 deletions site/src/components/Badges/Badges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Interpolation, Theme } from "@emotion/react";
import Tooltip from "@mui/material/Tooltip";
import MiniTooltip from "components/MiniTooltip/MiniTooltip";
import { Stack } from "components/Stack/Stack";
import {
type FC,
Expand Down Expand Up @@ -69,17 +69,17 @@ export const NotHealthyBadge: FC = () => {

export const NotRegisteredBadge: FC = () => {
return (
<Tooltip title="Workspace Proxy has never come online and needs to be started.">
<MiniTooltip title="Workspace Proxy has never come online and needs to be started.">
<span css={[styles.badge, styles.warnBadge]}>Never seen</span>
</Tooltip>
</MiniTooltip>
);
};

export const NotReachableBadge: FC = () => {
return (
<Tooltip title="Workspace Proxy not responding to http(s) requests.">
<MiniTooltip title="Workspace Proxy not responding to http(s) requests.">
<span css={[styles.badge, styles.warnBadge]}>Not reachable</span>
</Tooltip>
</MiniTooltip>
);
};

Expand Down
16 changes: 7 additions & 9 deletions site/src/components/CopyableValue/CopyableValue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";
import MiniTooltip from "components/MiniTooltip/MiniTooltip";
import type { TooltipContentProps } from "components/Tooltip/Tooltip";
import { useClickable } from "hooks/useClickable";
import { useClipboard } from "hooks/useClipboard";
import type { FC, HTMLAttributes } from "react";

interface CopyableValueProps extends HTMLAttributes<HTMLSpanElement> {
value: string;
placement?: TooltipProps["placement"];
PopperProps?: TooltipProps["PopperProps"];
align?: TooltipContentProps["align"];
}

export const CopyableValue: FC<CopyableValueProps> = ({
value,
placement = "bottom-start",
PopperProps,
align = "start",
children,
...attrs
}) => {
Expand All @@ -22,14 +21,13 @@ export const CopyableValue: FC<CopyableValueProps> = ({
});

return (
<Tooltip
<MiniTooltip
title={showCopiedSuccess ? "Copied!" : "Click to copy"}
placement={placement}
PopperProps={PopperProps}
align={align}
>
<span {...attrs} {...clickableProps} css={{ cursor: "pointer" }}>
{children}
</span>
</Tooltip>
</MiniTooltip>
);
};
24 changes: 15 additions & 9 deletions site/src/components/Latency/Latency.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useTheme } from "@emotion/react";
import CircularProgress from "@mui/material/CircularProgress";
import Tooltip from "@mui/material/Tooltip";
import { Abbr } from "components/Abbr/Abbr";
import MiniTooltip from "components/MiniTooltip/MiniTooltip";
import { CircleHelpIcon } from "lucide-react";
import type { FC } from "react";
import { cn } from "utils/cn";
Expand All @@ -26,23 +26,29 @@ export const Latency: FC<LatencyProps> = ({

if (isLoading) {
return (
<Tooltip title="Loading latency..." className={className}>
<CircularProgress
className={cn("!size-icon-xs", iconClassName)}
style={{ color }}
/>
</Tooltip>
<MiniTooltip title="Loading latency..." className={className}>
{/**
* Spinning progress icon must be placed inside a fixed-size container,
* to ensure tooltip remains stationary when opened
*/}
<div className="size-4 flex flex-wrap place-content-center">
<CircularProgress
className={cn("!size-icon-xs", iconClassName)}
style={{ color }}
/>
</div>
</MiniTooltip>
);
}

if (!latency) {
return (
<Tooltip title="Latency not available" className={className}>
<MiniTooltip title="Latency not available" className={className}>
<CircleHelpIcon
className={cn("!size-icon-sm", iconClassName)}
style={{ color }}
/>
</Tooltip>
</MiniTooltip>
);
}

Expand Down
53 changes: 53 additions & 0 deletions site/src/components/MiniTooltip/MiniTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import {
Tooltip,
TooltipArrow,
TooltipContent,
type TooltipContentProps,
TooltipProvider,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { type FC, type ReactNode, useState } from "react";
import { cn } from "utils/cn";

type MiniTooltipProps = Omit<TooltipContentProps, "title"> & {
title: ReactNode;
arrow?: boolean;
open?: boolean;
};

const MiniTooltip: FC<MiniTooltipProps> = ({
title,
children,
arrow,
open = false,
...contentProps
}) => {
const [isOpen, setIsOpen] = useState(open);
Copy link
Contributor

@buenos-nachos buenos-nachos Oct 15, 2025

Choose a reason for hiding this comment

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

I think it's fine to have state here, but the current implementation will cause bugs. If the open prop ever changes during re-renders, then we won't ever acknowledge it, because we'll be driving everything via the isOpen state instead

I think this will work

const MiniTooltip: FC<MiniTooltipProps> = ({
  // No default assignment
	open,
  // Also destructure onOpenChange, even if it's not defined
  onOpenChange,
	...contentProps
}) => {
	const [isOpen, setIsOpen] = useState(false);
  const activeIsOpen = open ?? isOpen;

  // Sync state change to both so that if the component ever flips from
  // controlled to uncontrolled, the other piece of state won't be lagging behind
  const handleOpenChange = (newOpen: boolean) => {
    setIsOpen(newOpen);
    onOpenChange?.(newOpen);
  };


return (
<TooltipProvider>
<Tooltip delayDuration={0} open={isOpen} onOpenChange={setIsOpen}>
<TooltipTrigger
asChild
aria-label={typeof title === "string" ? title : undefined}
>
{children}
</TooltipTrigger>
<TooltipContent
collisionPadding={16}
side="bottom"
{...contentProps}
className={cn(
"max-w-[300px] bg-surface-secondary border-surface-quaternary text-content-primary text-xs",
contentProps.className,
)}
>
{title}
{arrow && <TooltipArrow className="fill-surface-quaternary" />}
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};

export default MiniTooltip;
18 changes: 9 additions & 9 deletions site/src/components/RichParameterInput/RichParameterInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import type { InputBaseComponentProps } from "@mui/material/InputBase";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import TextField, { type TextFieldProps } from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import type { TemplateVersionParameter } from "api/typesGenerated";
import { Button } from "components/Button/Button";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { MemoizedMarkdown } from "components/Markdown/Markdown";
import MiniTooltip from "components/MiniTooltip/MiniTooltip";
import { Pill } from "components/Pill/Pill";
import { Stack } from "components/Stack/Stack";
import { CircleAlertIcon, SettingsIcon } from "lucide-react";
Expand Down Expand Up @@ -136,26 +136,26 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
{displayName}

{!parameter.required && (
<Tooltip title="If no value is specified, the system will default to the value set by the administrator.">
<MiniTooltip title="If no value is specified, the system will default to the value set by the administrator.">
<span css={styles.optionalLabel}>(optional)</span>
</Tooltip>
</MiniTooltip>
)}
{!parameter.mutable && (
<Tooltip title="This value cannot be modified after the workspace has been created.">
<MiniTooltip title="This value cannot be modified after the workspace has been created.">
<Pill
type="warning"
icon={<CircleAlertIcon className="size-icon-xs" />}
>
Immutable
</Pill>
</Tooltip>
</MiniTooltip>
)}
{isPreset && (
<Tooltip title="This value was set by a preset">
<MiniTooltip title="This value was set by a preset">
<Pill type="info" icon={<SettingsIcon className="size-icon-xs" />}>
Preset
</Pill>
</Tooltip>
</MiniTooltip>
)}
</span>
);
Expand Down Expand Up @@ -328,15 +328,15 @@ const RichParameterField: FC<RichParameterInputProps> = ({
css={{ padding: small ? undefined : "4px 0" }}
>
{small ? (
<Tooltip
<MiniTooltip
title={
<MemoizedMarkdown>
{option.description}
</MemoizedMarkdown>
}
>
<div>{option.name}</div>
</Tooltip>
</MiniTooltip>
) : (
<>
<span>{option.name}</span>
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/SearchField/SearchField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment";
import TextField, { type TextFieldProps } from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import MiniTooltip from "components/MiniTooltip/MiniTooltip";
import { useEffectEvent } from "hooks/hookPolyfills";
import { SearchIcon, XIcon } from "lucide-react";
import { type FC, useLayoutEffect, useRef } from "react";
Expand Down Expand Up @@ -47,7 +47,7 @@ export const SearchField: FC<SearchFieldProps> = ({
),
endAdornment: value !== "" && (
<InputAdornment position="end">
<Tooltip title="Clear search">
<MiniTooltip title="Clear search">
<IconButton
size="small"
onClick={() => {
Expand All @@ -57,7 +57,7 @@ export const SearchField: FC<SearchFieldProps> = ({
<XIcon className="size-icon-xs" />
<span className="sr-only">Clear search</span>
</IconButton>
</Tooltip>
</MiniTooltip>
</InputAdornment>
),
...InputProps,
Expand Down
2 changes: 2 additions & 0 deletions site/src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export const Tooltip = TooltipPrimitive.Root;

export const TooltipTrigger = TooltipPrimitive.Trigger;

export const TooltipArrow = TooltipPrimitive.Arrow;

export type TooltipContentProps = React.ComponentPropsWithoutRef<
typeof TooltipPrimitive.Content
> & {
Expand Down
Loading
Loading