Skip to content

Commit 13fbbcd

Browse files
aqandrewaqandrew
authored
refactor: replace remaining MUI tooltips (#20938)
closes #19974 This PR replaces all remaining MUI tooltips with our shadcn tooltip component, and uncomments the linter restriction on importing the MUI tooltip
1 parent b073357 commit 13fbbcd

11 files changed

Lines changed: 210 additions & 144 deletions

File tree

‎biome.jsonc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
// "@mui/material/TextField": "Use shadcn/ui Input component instead.",
100100
// "@mui/material/ToggleButton": "Use shadcn/ui Toggle or custom component instead.",
101101
// "@mui/material/ToggleButtonGroup": "Use shadcn/ui Toggle or custom component instead.",
102-
// "@mui/material/Tooltip": "Use shadcn/ui Tooltip component instead.",
102+
"@mui/material/Tooltip": "Use components/Tooltip/Tooltip instead.",
103103
"@mui/material/Typography": "Use native HTML elements instead. Eg: <span>, <p>, <h1>, etc.",
104104
// "@mui/material/useMediaQuery": "Use Tailwind responsive classes or custom hook instead.",
105105
// "@mui/system": "Use Tailwind CSS instead.",

‎site/src/components/RichParameterInput/RichParameterInput.tsx‎

Lines changed: 40 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@ import type { InputBaseComponentProps } from "@mui/material/InputBase";
55
import Radio from "@mui/material/Radio";
66
import RadioGroup from "@mui/material/RadioGroup";
77
import TextField, { type TextFieldProps } from "@mui/material/TextField";
8-
import Tooltip from "@mui/material/Tooltip";
98
import type { TemplateVersionParameter } from "api/typesGenerated";
109
import { Button } from "components/Button/Button";
1110
import { ExternalImage } from "components/ExternalImage/ExternalImage";
1211
import { MemoizedMarkdown } from "components/Markdown/Markdown";
1312
import { Pill } from "components/Pill/Pill";
1413
import { Stack } from "components/Stack/Stack";
14+
import {
15+
Tooltip,
16+
TooltipContent,
17+
TooltipTrigger,
18+
} from "components/Tooltip/Tooltip";
1519
import { CircleAlertIcon, SettingsIcon } from "lucide-react";
1620
import { type FC, type ReactNode, useState } from "react";
1721
import type {
@@ -136,25 +140,41 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
136140
{displayName}
137141

138142
{!parameter.required && (
139-
<Tooltip title="If no value is specified, the system will default to the value set by the administrator.">
140-
<span css={styles.optionalLabel}>(optional)</span>
143+
<Tooltip>
144+
<TooltipTrigger asChild>
145+
<span css={styles.optionalLabel}>(optional)</span>
146+
</TooltipTrigger>
147+
<TooltipContent side="bottom" className="max-w-xs">
148+
If no value is specified, the system will default to the value set
149+
by the administrator.
150+
</TooltipContent>
141151
</Tooltip>
142152
)}
143153
{!parameter.mutable && (
144-
<Tooltip title="This value cannot be modified after the workspace has been created.">
145-
<Pill
146-
type="warning"
147-
icon={<CircleAlertIcon className="size-icon-xs" />}
148-
>
149-
Immutable
150-
</Pill>
154+
<Tooltip>
155+
<TooltipTrigger asChild>
156+
<Pill
157+
type="warning"
158+
icon={<CircleAlertIcon className="size-icon-xs" />}
159+
>
160+
Immutable
161+
</Pill>
162+
</TooltipTrigger>
163+
<TooltipContent side="bottom" className="max-w-xs">
164+
This value cannot be modified after the workspace has been created.
165+
</TooltipContent>
151166
</Tooltip>
152167
)}
153168
{isPreset && (
154-
<Tooltip title="This value was set by a preset">
155-
<Pill type="info" icon={<SettingsIcon className="size-icon-xs" />}>
156-
Preset
157-
</Pill>
169+
<Tooltip>
170+
<TooltipTrigger asChild>
171+
<Pill type="info" icon={<SettingsIcon className="size-icon-xs" />}>
172+
Preset
173+
</Pill>
174+
</TooltipTrigger>
175+
<TooltipContent side="bottom">
176+
This value was set by a preset
177+
</TooltipContent>
158178
</Tooltip>
159179
)}
160180
</span>
@@ -328,14 +348,15 @@ const RichParameterField: FC<RichParameterInputProps> = ({
328348
css={{ padding: small ? undefined : "4px 0" }}
329349
>
330350
{small ? (
331-
<Tooltip
332-
title={
351+
<Tooltip>
352+
<TooltipTrigger asChild>
353+
<div>{option.name}</div>
354+
</TooltipTrigger>
355+
<TooltipContent side="bottom" className="max-w-xs">
333356
<MemoizedMarkdown>
334357
{option.description}
335358
</MemoizedMarkdown>
336-
}
337-
>
338-
<div>{option.name}</div>
359+
</TooltipContent>
339360
</Tooltip>
340361
) : (
341362
<>

‎site/src/modules/resources/AgentLogs/AgentLogs.tsx‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import MuiTooltip from "@mui/material/Tooltip";
21
import type { WorkspaceAgentLogSource } from "api/typesGenerated";
32
import { Badge } from "components/Badge/Badge";
43
import type { Line } from "components/Logs/LogLine";
@@ -125,21 +124,18 @@ export const AgentLogs = forwardRef<List, AgentLogsProps>(
125124
maxLineNumber={logs.length}
126125
style={style}
127126
sourceIcon={
128-
<MuiTooltip
129-
title={
130-
<>
131-
{logSource.display_name}
132-
{assignedIcon && (
133-
<i>
134-
<br />
135-
No icon specified!
136-
</i>
137-
)}
138-
</>
139-
}
140-
>
141-
{icon}
142-
</MuiTooltip>
127+
<Tooltip>
128+
<TooltipTrigger asChild>{icon}</TooltipTrigger>
129+
<TooltipContent side="bottom">
130+
{logSource.display_name}
131+
{assignedIcon && (
132+
<i>
133+
<br />
134+
No icon specified!
135+
</i>
136+
)}
137+
</TooltipContent>
138+
</Tooltip>
143139
}
144140
/>
145141
);

‎site/src/modules/resources/AppLink/AppLink.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export const AppLink: FC<AppLinkProps> = ({
155155
return (
156156
<Tooltip>
157157
<TooltipTrigger asChild>{button}</TooltipTrigger>
158-
<TooltipContent>
158+
<TooltipContent className="max-w-xs">
159159
{primaryTooltip ? (
160160
primaryTooltip
161161
) : app.tooltip ? (

‎site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
import Tooltip from "@mui/material/Tooltip";
21
import type { Workspace } from "api/typesGenerated";
32
import { Badge } from "components/Badge/Badge";
3+
import {
4+
Tooltip,
5+
TooltipContent,
6+
TooltipTrigger,
7+
} from "components/Tooltip/Tooltip";
48
import type { FC } from "react";
59
import {
610
DATE_FORMAT,
@@ -16,34 +20,32 @@ export const WorkspaceDormantBadge: FC<WorkspaceDormantBadgeProps> = ({
1620
workspace,
1721
}) => {
1822
return workspace.deleting_at ? (
19-
<Tooltip
20-
title={
21-
<>
22-
This workspace has not been used for{" "}
23-
{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been
24-
marked dormant. It is scheduled to be deleted on{" "}
25-
{formatDateTime(workspace.deleting_at, DATE_FORMAT.FULL_DATETIME)}.
26-
</>
27-
}
28-
>
29-
<Badge role="status" variant="destructive" size="xs">
30-
Deletion Pending
31-
</Badge>
23+
<Tooltip>
24+
<TooltipTrigger asChild>
25+
<Badge role="status" variant="destructive" size="xs">
26+
Deletion Pending
27+
</Badge>
28+
</TooltipTrigger>
29+
<TooltipContent side="bottom" className="max-w-xs">
30+
This workspace has not been used for{" "}
31+
{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been marked
32+
dormant. It is scheduled to be deleted on{" "}
33+
{formatDateTime(workspace.deleting_at, DATE_FORMAT.FULL_DATETIME)}.
34+
</TooltipContent>
3235
</Tooltip>
3336
) : (
34-
<Tooltip
35-
title={
36-
<>
37-
This workspace has not been used for{" "}
38-
{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been
39-
marked dormant. It is not scheduled for auto-deletion but will become
40-
a candidate if auto-deletion is enabled on this template.
41-
</>
42-
}
43-
>
44-
<Badge role="status" variant="warning" size="xs">
45-
Dormant
46-
</Badge>
37+
<Tooltip>
38+
<TooltipTrigger asChild>
39+
<Badge role="status" variant="warning" size="xs">
40+
Dormant
41+
</Badge>
42+
</TooltipTrigger>
43+
<TooltipContent side="bottom" className="max-w-xs">
44+
This workspace has not been used for{" "}
45+
{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been marked
46+
dormant. It is not scheduled for auto-deletion but will become a
47+
candidate if auto-deletion is enabled on this template.
48+
</TooltipContent>
4749
</Tooltip>
4850
);
4951
};

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
22
import Collapse from "@mui/material/Collapse";
33
import Link from "@mui/material/Link";
4-
import Tooltip from "@mui/material/Tooltip";
54
import type { AuditLog, BuildReason } from "api/typesGenerated";
65
import { Avatar } from "components/Avatar/Avatar";
76
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
87
import { Stack } from "components/Stack/Stack";
98
import { StatusPill } from "components/StatusPill/StatusPill";
109
import { TableCell } from "components/Table/Table";
1110
import { TimelineEntry } from "components/Timeline/TimelineEntry";
11+
import {
12+
Tooltip,
13+
TooltipContent,
14+
TooltipTrigger,
15+
} from "components/Tooltip/Tooltip";
1216
import { InfoIcon, NetworkIcon } from "lucide-react";
1317
import { type FC, useState } from "react";
1418
import { Link as RouterLink } from "react-router";
@@ -128,8 +132,15 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
128132
{/* With multi-org, there is not enough space so show
129133
everything in a tooltip. */}
130134
{showOrgDetails ? (
131-
<Tooltip
132-
title={
135+
<Tooltip>
136+
<TooltipTrigger asChild>
137+
<InfoIcon
138+
css={(theme) => ({
139+
color: theme.palette.info.light,
140+
})}
141+
/>
142+
</TooltipTrigger>
143+
<TooltipContent side="bottom">
133144
<div css={styles.auditLogInfoTooltip}>
134145
{auditLog.ip && (
135146
<div>
@@ -181,13 +192,7 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
181192
</div>
182193
)}
183194
</div>
184-
}
185-
>
186-
<InfoIcon
187-
css={(theme) => ({
188-
color: theme.palette.info.light,
189-
})}
190-
/>
195+
</TooltipContent>
191196
</Tooltip>
192197
) : (
193198
<Stack direction="row" spacing={1} alignItems="baseline">

‎site/src/pages/ConnectionLogPage/ConnectionLogRow/ConnectionLogRow.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
22
import Link from "@mui/material/Link";
3-
import Tooltip from "@mui/material/Tooltip";
43
import type { ConnectionLog } from "api/typesGenerated";
54
import { Avatar } from "components/Avatar/Avatar";
65
import { Stack } from "components/Stack/Stack";
76
import { StatusPill } from "components/StatusPill/StatusPill";
87
import { TableCell } from "components/Table/Table";
98
import { TimelineEntry } from "components/Timeline/TimelineEntry";
9+
import {
10+
Tooltip,
11+
TooltipContent,
12+
TooltipTrigger,
13+
} from "components/Tooltip/Tooltip";
1014
import { InfoIcon, NetworkIcon } from "lucide-react";
1115
import type { FC } from "react";
1216
import { Link as RouterLink } from "react-router";
@@ -87,8 +91,15 @@ export const ConnectionLogRow: FC<ConnectionLogRowProps> = ({
8791
label={isWeb ? "HTTP Status Code" : "SSH Exit Code"}
8892
/>
8993
)}
90-
<Tooltip
91-
title={
94+
<Tooltip>
95+
<TooltipTrigger asChild>
96+
<InfoIcon
97+
css={(theme) => ({
98+
color: theme.palette.info.light,
99+
})}
100+
/>
101+
</TooltipTrigger>
102+
<TooltipContent side="bottom">
92103
<div css={styles.connectionLogInfoTooltip}>
93104
{connectionLog.ip && (
94105
<div>
@@ -133,13 +144,7 @@ export const ConnectionLogRow: FC<ConnectionLogRowProps> = ({
133144
</div>
134145
)}
135146
</div>
136-
}
137-
>
138-
<InfoIcon
139-
css={(theme) => ({
140-
color: theme.palette.info.light,
141-
})}
142-
/>
147+
</TooltipContent>
143148
</Tooltip>
144149
</Stack>
145150
</Stack>

‎site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.stories.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import {
22
MockOrganizationMember,
33
MockOrganizationMember2,
4+
MockOwnerRole,
5+
MockUserAdminRole,
46
MockUserOwner,
57
} from "testHelpers/entities";
68
import type { Meta, StoryObj } from "@storybook/react-vite";
@@ -19,7 +21,11 @@ const meta: Meta<typeof OrganizationMembersPageView> = {
1921
canViewMembers: true,
2022
me: MockUserOwner,
2123
members: [
22-
{ ...MockOrganizationMember, groups: [] },
24+
{
25+
...MockOrganizationMember,
26+
global_roles: [MockOwnerRole, MockUserAdminRole],
27+
groups: [],
28+
},
2329
{ ...MockOrganizationMember2, groups: [] },
2430
],
2531
membersQuery: {

0 commit comments

Comments
 (0)