From ad618ca9286f15502787f65696db74eb6fcee42c Mon Sep 17 00:00:00 2001 From: Andrew Aquino Date: Tue, 25 Nov 2025 21:53:49 +0000 Subject: [PATCH 1/9] refactor: replace MUI tooltip in RichParameterInput --- .../RichParameterInput/RichParameterInput.tsx | 59 +++++++++++++------ 1 file changed, 40 insertions(+), 19 deletions(-) diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 1852d50af9f4e..b3d75891874df 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -5,13 +5,17 @@ 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 { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import { CircleAlertIcon, SettingsIcon } from "lucide-react"; import { type FC, type ReactNode, useState } from "react"; import type { @@ -136,25 +140,41 @@ const ParameterLabel: FC = ({ parameter, isPreset }) => { {displayName} {!parameter.required && ( - - (optional) + + + (optional) + + + If no value is specified, the system will default to the value set + by the administrator. + )} {!parameter.mutable && ( - - } - > - Immutable - + + + } + > + Immutable + + + + This value cannot be modified after the workspace has been created. + )} {isPreset && ( - - }> - Preset - + + + }> + Preset + + + + This value was set by a preset + )} @@ -328,14 +348,15 @@ const RichParameterField: FC = ({ css={{ padding: small ? undefined : "4px 0" }} > {small ? ( - + +
{option.name}
+ + {option.description} - } - > -
{option.name}
+ ) : ( <> From b5dab33be12d056688df29779a17b28159096359 Mon Sep 17 00:00:00 2001 From: Andrew Aquino Date: Wed, 26 Nov 2025 01:38:04 +0000 Subject: [PATCH 2/9] refactor: replace MUI tooltips whose content is JSX --- .../modules/resources/AgentLogs/AgentLogs.tsx | 28 +++--- .../WorkspaceDormantBadge.tsx | 56 ++++++----- .../AuditPage/AuditLogRow/AuditLogRow.tsx | 25 +++-- .../ConnectionLogRow/ConnectionLogRow.tsx | 25 +++-- .../WorkspaceScheduleControls.tsx | 98 +++++++++++-------- 5 files changed, 130 insertions(+), 102 deletions(-) diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.tsx index e71576913219f..744d8c1b9699b 100644 --- a/site/src/modules/resources/AgentLogs/AgentLogs.tsx +++ b/site/src/modules/resources/AgentLogs/AgentLogs.tsx @@ -1,4 +1,3 @@ -import MuiTooltip from "@mui/material/Tooltip"; import type { WorkspaceAgentLogSource } from "api/typesGenerated"; import { Badge } from "components/Badge/Badge"; import type { Line } from "components/Logs/LogLine"; @@ -125,21 +124,18 @@ export const AgentLogs = forwardRef( maxLineNumber={logs.length} style={style} sourceIcon={ - - {logSource.display_name} - {assignedIcon && ( - -
- No icon specified! - - )} - - } - > - {icon} - + + {icon} + + {logSource.display_name} + {assignedIcon && ( + +
+ No icon specified! + + )} + + } /> ); diff --git a/site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx b/site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx index 1712d67e774cf..0bb4ba53eed4b 100644 --- a/site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx +++ b/site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx @@ -1,6 +1,10 @@ -import Tooltip from "@mui/material/Tooltip"; import type { Workspace } from "api/typesGenerated"; import { Badge } from "components/Badge/Badge"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import type { FC } from "react"; import { DATE_FORMAT, @@ -16,34 +20,32 @@ export const WorkspaceDormantBadge: FC = ({ workspace, }) => { return workspace.deleting_at ? ( - - This workspace has not been used for{" "} - {relativeTimeWithoutSuffix(workspace.last_used_at)} and has been - marked dormant. It is scheduled to be deleted on{" "} - {formatDateTime(workspace.deleting_at, DATE_FORMAT.FULL_DATETIME)}. - - } - > - - Deletion Pending - + + + + Deletion Pending + + + + This workspace has not been used for{" "} + {relativeTimeWithoutSuffix(workspace.last_used_at)} and has been marked + dormant. It is scheduled to be deleted on{" "} + {formatDateTime(workspace.deleting_at, DATE_FORMAT.FULL_DATETIME)}. + ) : ( - - This workspace has not been used for{" "} - {relativeTimeWithoutSuffix(workspace.last_used_at)} and has been - marked dormant. It is not scheduled for auto-deletion but will become - a candidate if auto-deletion is enabled on this template. - - } - > - - Dormant - + + + + Dormant + + + + This workspace has not been used for{" "} + {relativeTimeWithoutSuffix(workspace.last_used_at)} and has been marked + dormant. It is not scheduled for auto-deletion but will become a + candidate if auto-deletion is enabled on this template. + ); }; diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx index a1422e95deab6..7611407e56866 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx @@ -1,7 +1,6 @@ import type { CSSObject, Interpolation, Theme } from "@emotion/react"; import Collapse from "@mui/material/Collapse"; import Link from "@mui/material/Link"; -import Tooltip from "@mui/material/Tooltip"; import type { AuditLog, BuildReason } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; @@ -9,6 +8,11 @@ import { Stack } from "components/Stack/Stack"; import { StatusPill } from "components/StatusPill/StatusPill"; import { TableCell } from "components/Table/Table"; import { TimelineEntry } from "components/Timeline/TimelineEntry"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import { InfoIcon, NetworkIcon } from "lucide-react"; import { type FC, useState } from "react"; import { Link as RouterLink } from "react-router"; @@ -128,8 +132,15 @@ export const AuditLogRow: FC = ({ {/* With multi-org, there is not enough space so show everything in a tooltip. */} {showOrgDetails ? ( - + + ({ + color: theme.palette.info.light, + })} + /> + +
{auditLog.ip && (
@@ -181,13 +192,7 @@ export const AuditLogRow: FC = ({
)}
- } - > - ({ - color: theme.palette.info.light, - })} - /> + ) : ( diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogRow/ConnectionLogRow.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogRow/ConnectionLogRow.tsx index f9d14432d4e91..3ad86c191772a 100644 --- a/site/src/pages/ConnectionLogPage/ConnectionLogRow/ConnectionLogRow.tsx +++ b/site/src/pages/ConnectionLogPage/ConnectionLogRow/ConnectionLogRow.tsx @@ -1,12 +1,16 @@ import type { CSSObject, Interpolation, Theme } from "@emotion/react"; import Link from "@mui/material/Link"; -import Tooltip from "@mui/material/Tooltip"; import type { ConnectionLog } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; import { StatusPill } from "components/StatusPill/StatusPill"; import { TableCell } from "components/Table/Table"; import { TimelineEntry } from "components/Timeline/TimelineEntry"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import { InfoIcon, NetworkIcon } from "lucide-react"; import type { FC } from "react"; import { Link as RouterLink } from "react-router"; @@ -87,8 +91,15 @@ export const ConnectionLogRow: FC = ({ label={isWeb ? "HTTP Status Code" : "SSH Exit Code"} /> )} - + + ({ + color: theme.palette.info.light, + })} + /> + +
{connectionLog.ip && (
@@ -133,13 +144,7 @@ export const ConnectionLogRow: FC = ({
)}
- } - > - ({ - color: theme.palette.info.light, - })} - /> + diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx index 1968f48a2f3fb..3579935503e61 100644 --- a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx @@ -1,7 +1,6 @@ import type { Interpolation, Theme } from "@emotion/react"; import IconButton from "@mui/material/IconButton"; import Link, { type LinkProps } from "@mui/material/Link"; -import Tooltip from "@mui/material/Tooltip"; import { visuallyHidden } from "@mui/utils"; import { getErrorMessage } from "api/errors"; import { @@ -11,6 +10,11 @@ import { import type { Template, Workspace } from "api/typesGenerated"; import { TopbarData, TopbarIcon } from "components/FullPageLayout/Topbar"; import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import dayjs, { type Dayjs } from "dayjs"; import { useTime } from "hooks/useTime"; import { ClockIcon, MinusIcon, PlusIcon } from "lucide-react"; @@ -45,19 +49,22 @@ const WorkspaceScheduleContainer: FC = ({ return ( - - {onClickIcon ? ( - - ) : ( - icon - )} + + + {onClickIcon ? ( + + ) : ( + icon + )} + + Schedule {children} @@ -200,31 +207,39 @@ const AutostopDisplay: FC = ({ const controls = canUpdateSchedule && canEditDeadline(workspace) && (
- - { - handleDeadlineChange(deadline.subtract(1, "h")); - }} - > - - Subtract 1 hour - + + + { + handleDeadlineChange(deadline.subtract(1, "h")); + }} + > + + Subtract 1 hour + + + + Subtract 1 hour from deadline + - - { - handleDeadlineChange(deadline.add(1, "h")); - }} - > - - Add 1 hour - + + + { + handleDeadlineChange(deadline.add(1, "h")); + }} + > + + Add 1 hour + + + Add 1 hour to deadline
); @@ -232,7 +247,12 @@ const AutostopDisplay: FC = ({ if (tooltip) { return ( - {display} + + {display} + + {tooltip} + + {controls} ); From dd32f753fd469647e708bc87d9cb24bae87b2a99 Mon Sep 17 00:00:00 2001 From: Andrew Aquino Date: Wed, 26 Nov 2025 01:45:26 +0000 Subject: [PATCH 3/9] refactor: replace MUI tooltip in EditRolesButton https://github.com/shadcn-ui/ui/issues/2557#issuecomment-2665782324 --- .../UserTable/EditRolesButton.tsx | 33 +++++++++++-------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx b/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx index 5d0f23219337a..87be0b6c6aa4d 100644 --- a/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx +++ b/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx @@ -1,5 +1,4 @@ import Checkbox from "@mui/material/Checkbox"; -import Tooltip from "@mui/material/Tooltip"; import type { SlimRole } from "api/typesGenerated"; import { Button } from "components/Button/Button"; import { CollapsibleSummary } from "components/CollapsibleSummary/CollapsibleSummary"; @@ -16,6 +15,11 @@ import { PopoverContent, PopoverTrigger, } from "components/Popover/Popover"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import { UserIcon } from "lucide-react"; import { type FC, useEffect, useState } from "react"; @@ -130,18 +134,21 @@ const EnabledEditRolesButton: FC = ({ return ( - - - - - + + + + + + + Edit user roles + Date: Wed, 26 Nov 2025 23:59:47 +0000 Subject: [PATCH 4/9] fix: make WorkspaceScheduleControls' trigger name the same as its content --- site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx index 3579935503e61..f815d116a143e 100644 --- a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx @@ -218,7 +218,7 @@ const AutostopDisplay: FC = ({ }} > - Subtract 1 hour + Subtract 1 hour from deadline @@ -236,7 +236,7 @@ const AutostopDisplay: FC = ({ }} > - Add 1 hour + Add 1 hour to deadline Add 1 hour to deadline From 5b98d0c96229144db44340075fbc64e121d19489 Mon Sep 17 00:00:00 2001 From: Andrew Aquino Date: Wed, 3 Dec 2025 23:50:03 +0000 Subject: [PATCH 5/9] feat: set max width for AppLink tooltip --- site/src/modules/resources/AppLink/AppLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx index 419148ed0914a..195f9b7c213cf 100644 --- a/site/src/modules/resources/AppLink/AppLink.tsx +++ b/site/src/modules/resources/AppLink/AppLink.tsx @@ -138,7 +138,7 @@ export const AppLink: FC = ({ return ( {button} - + {primaryTooltip ? ( primaryTooltip ) : app.tooltip ? ( From 45ea289efc71440b15b3b5112e84f75da08958c7 Mon Sep 17 00:00:00 2001 From: Andrew Aquino Date: Thu, 4 Dec 2025 01:39:35 +0000 Subject: [PATCH 6/9] refactor: replace MUI tooltip in UserRoleCell --- .../UserTable/UserRoleCell.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx b/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx index 2f7d378e2b8a9..3ac135c8f27f1 100644 --- a/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx +++ b/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx @@ -88,9 +88,14 @@ export const UserRoleCell: FC = ({ } > {mainDisplayRole.global ? ( - - {displayName}* - + + + {displayName}* + + + This user has this role for all organizations. + + ) : ( displayName )} From 6669eb4a4298da2bbde6f2c95a3a50e6fc81e9ba Mon Sep 17 00:00:00 2001 From: Andrew Aquino Date: Thu, 4 Dec 2025 02:12:47 +0000 Subject: [PATCH 7/9] test: configure test user to show OverflowRolePill containing global role --- .../OrganizationMembersPageView.stories.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.stories.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.stories.tsx index 9cf02a22f1b9e..d999e3a211448 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.stories.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.stories.tsx @@ -1,6 +1,8 @@ import { MockOrganizationMember, MockOrganizationMember2, + MockOwnerRole, + MockUserAdminRole, MockUserOwner, } from "testHelpers/entities"; import type { Meta, StoryObj } from "@storybook/react-vite"; @@ -19,7 +21,11 @@ const meta: Meta = { canViewMembers: true, me: MockUserOwner, members: [ - { ...MockOrganizationMember, groups: [] }, + { + ...MockOrganizationMember, + global_roles: [MockOwnerRole, MockUserAdminRole], + groups: [], + }, { ...MockOrganizationMember2, groups: [] }, ], membersQuery: { From 746b41645582c9a347612501e9adda41b8b9da90 Mon Sep 17 00:00:00 2001 From: Andrew Aquino Date: Thu, 4 Dec 2025 02:18:41 +0000 Subject: [PATCH 8/9] refactor: replace nested MUI tooltip in OverflowRolePill --- .../OrganizationSettingsPage/UserTable/UserRoleCell.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx b/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx index 3ac135c8f27f1..35cec392fbdf7 100644 --- a/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx +++ b/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx @@ -14,7 +14,6 @@ * users like that, though, know that it will be painful */ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import MUITooltip from "@mui/material/Tooltip"; import type { LoginType, SlimRole } from "api/typesGenerated"; import { Pill } from "components/Pill/Pill"; import { TableCell } from "components/Table/Table"; @@ -135,9 +134,9 @@ const OverflowRolePill: FC = ({ roles }) => { css={role.global ? styles.globalRoleBadge : styles.roleBadge} > {role.global ? ( - - {role.display_name || role.name}* - + + {role.display_name || role.name}* + ) : ( role.display_name || role.name )} From 74ff42126e8220cfaa9bd1698d89dda8b0f8d221 Mon Sep 17 00:00:00 2001 From: Andrew Aquino Date: Wed, 10 Dec 2025 00:58:16 +0000 Subject: [PATCH 9/9] chore: uncomment MUI tooltip deprecation warning --- biome.jsonc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/biome.jsonc b/biome.jsonc index d45b5cabb295d..b6fa53af58dd8 100644 --- a/biome.jsonc +++ b/biome.jsonc @@ -99,7 +99,7 @@ // "@mui/material/TextField": "Use shadcn/ui Input component instead.", // "@mui/material/ToggleButton": "Use shadcn/ui Toggle or custom component instead.", // "@mui/material/ToggleButtonGroup": "Use shadcn/ui Toggle or custom component instead.", - // "@mui/material/Tooltip": "Use shadcn/ui Tooltip component instead.", + "@mui/material/Tooltip": "Use components/Tooltip/Tooltip instead.", "@mui/material/Typography": "Use native HTML elements instead. Eg: ,

,

, etc.", // "@mui/material/useMediaQuery": "Use Tailwind responsive classes or custom hook instead.", // "@mui/system": "Use Tailwind CSS instead.",