From b09d234d886d532fc1ffded4aebfefc76eeb227e Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Sun, 12 Oct 2025 15:16:31 +0000 Subject: [PATCH 1/9] refactor: migrate CopyableValue from MUI to Radix UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace MUI Tooltip with Radix Tooltip components and migrate Emotion CSS to Tailwind utility classes. This is part of the ongoing effort to standardize on Radix UI/shadcn components and Tailwind CSS. Changes: - Replace @mui/material/Tooltip with components/Tooltip/Tooltip (Radix) - Remove unused PopperProps (not used anywhere in codebase) - Rename placement prop to side to match Radix API - Replace Emotion css={{ cursor: "pointer" }} with Tailwind cursor-pointer class - Update single call site in IconsPage.tsx (placement → side) - Wrap in TooltipProvider as required by Radix Technical details: - Radix uses Provider/Tooltip/Trigger/Content pattern (more verbose but flexible) - Maintained backward compatibility for all other call sites (6 files) - No functional changes to component behavior 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- site/src/components/CopyableValue/CopyableValue.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx index 89d98e43e0474..f7ace509ecab0 100644 --- a/site/src/components/CopyableValue/CopyableValue.tsx +++ b/site/src/components/CopyableValue/CopyableValue.tsx @@ -37,7 +37,7 @@ export const CopyableValue: FC = ({ }); return ( - + { From 06cd20617a6e90efa3f155a27239354753e57cf8 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Mon, 13 Oct 2025 19:17:02 +0000 Subject: [PATCH 2/9] refactor: create a global tooltip provider with a consistent delay duration --- site/.storybook/preview.tsx | 7 +- site/src/App.tsx | 7 +- .../components/CodeExample/CodeExample.tsx | 29 ++-- site/src/components/Combobox/Combobox.tsx | 29 ++-- site/src/components/CopyButton/CopyButton.tsx | 31 ++-- .../CopyableValue/CopyableValue.tsx | 1 - .../FeatureStageBadge/FeatureStageBadge.tsx | 65 ++++--- .../components/HelpTooltip/HelpTooltip.tsx | 7 +- .../MultiSelectCombobox.tsx | 29 ++-- site/src/components/StatusPill/StatusPill.tsx | 11 +- .../modules/dashboard/Navbar/NavbarView.tsx | 29 ++-- .../resources/AgentDevcontainerCard.tsx | 25 ++- .../modules/resources/AgentLogs/AgentLogs.tsx | 49 +++--- .../src/modules/resources/AppLink/AppLink.tsx | 27 ++- .../modules/resources/PortForwardButton.tsx | 127 +++++++------- .../modules/tasks/TaskPrompt/TaskPrompt.tsx | 33 ++-- .../tasks/TasksSidebar/TasksSidebar.tsx | 94 +++++----- .../DynamicParameter/DynamicParameter.tsx | 161 ++++++++---------- .../WorkspaceAppStatus/WorkspaceAppStatus.tsx | 33 ++-- .../WorkspaceStatusIndicator.tsx | 27 ++- .../CreateWorkspacePageViewExperimental.tsx | 39 ++--- .../ExternalAuthButton.tsx | 25 ++- .../AppearanceSettingsPageView.tsx | 47 +++-- .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx | 33 ++-- .../IdpOrgSyncPage/OrganizationPills.tsx | 59 +++---- .../ObservabilitySettingsPageView.tsx | 47 +++-- .../CreateOrganizationPageView.tsx | 43 +++-- .../CustomRolesPage/PermissionPillsList.tsx | 50 +++--- .../IdpSyncPage/IdpGroupSyncForm.tsx | 33 ++-- .../IdpSyncPage/IdpPillList.tsx | 35 ++-- .../IdpSyncPage/IdpRoleSyncForm.tsx | 33 ++-- .../CancelJobButton.tsx | 35 ++-- .../OrganizationProvisionerJobsPageView.tsx | 33 ++-- .../LastConnectionHead.tsx | 31 ++-- .../OrganizationProvisionersPageView.tsx | 33 ++-- .../ProvisionerKey.tsx | 31 ++-- .../ProvisionerVersion.tsx | 43 +++-- .../UserTable/UserRoleCell.tsx | 55 +++--- site/src/pages/TaskPage/TaskTopbar.tsx | 61 +++---- site/src/pages/TasksPage/TasksTable.tsx | 33 ++-- .../UsersPage/UsersTable/UserGroupsCell.tsx | 139 ++++++++------- site/src/pages/WorkspacePage/AppStatuses.tsx | 61 +++---- .../WorkspaceNotifications/Notifications.tsx | 55 +++--- .../WorkspaceParametersPageExperimental.tsx | 39 ++--- .../pages/WorkspacesPage/WorkspacesTable.tsx | 71 ++++---- 45 files changed, 914 insertions(+), 1071 deletions(-) diff --git a/site/.storybook/preview.tsx b/site/.storybook/preview.tsx index 21b63e59bea45..13a875442db70 100644 --- a/site/.storybook/preview.tsx +++ b/site/.storybook/preview.tsx @@ -11,6 +11,7 @@ import isChromatic from "chromatic/isChromatic"; import { StrictMode } from "react"; import { QueryClient, QueryClientProvider } from "react-query"; import { withRouter } from "storybook-addon-remix-react-router"; +import { TooltipProvider } from "../src/components/Tooltip/Tooltip"; import "theme/globalFonts"; import type { Decorator, Loader, Parameters } from "@storybook/react-vite"; import themes from "../src/theme"; @@ -100,8 +101,10 @@ const withTheme: Decorator = (Story, context) => { - - + + + + diff --git a/site/src/App.tsx b/site/src/App.tsx index 57497b586f56d..a4fad65a3d265 100644 --- a/site/src/App.tsx +++ b/site/src/App.tsx @@ -1,5 +1,6 @@ import "./theme/globalFonts"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; +import { TooltipProvider } from "components/Tooltip/Tooltip"; import { type FC, type ReactNode, @@ -53,8 +54,10 @@ export const AppProviders: FC = ({ - {children} - + + {children} + + {showDevtools && } diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx index b69a220550958..42759889fd1eb 100644 --- a/site/src/components/CodeExample/CodeExample.tsx +++ b/site/src/components/CodeExample/CodeExample.tsx @@ -3,7 +3,6 @@ import { Button } from "components/Button/Button"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { EyeIcon, EyeOffIcon } from "lucide-react"; @@ -77,21 +76,19 @@ export const CodeExample: FC = ({
{showRevealButton && redactPattern && !secret && ( - - - - - - {showButtonLabel} - - + + + + + {showButtonLabel} + )}
diff --git a/site/src/components/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx index 2d522d6e6397c..7793107544eed 100644 --- a/site/src/components/Combobox/Combobox.tsx +++ b/site/src/components/Combobox/Combobox.tsx @@ -15,7 +15,6 @@ import { import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { Check, ChevronDown, CornerDownLeft, Info } from "lucide-react"; @@ -138,21 +137,19 @@ export const Combobox: FC = ({ )} {option.description && ( - - - - e.stopPropagation()} - > - - - - - {option.description} - - - + + + e.stopPropagation()} + > + + + + + {option.description} + + )} diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx index ab1b8d0dc6561..52f8cfa9e10de 100644 --- a/site/src/components/CopyButton/CopyButton.tsx +++ b/site/src/components/CopyButton/CopyButton.tsx @@ -2,7 +2,6 @@ import { Button, type ButtonProps } from "components/Button/Button"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useClipboard } from "hooks/useClipboard"; @@ -22,21 +21,19 @@ export const CopyButton: FC = ({ const { showCopiedSuccess, copyToClipboard } = useClipboard(); return ( - - - - - - {label} - - + + + + + {label} + ); }; diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx index f7ace509ecab0..50e038ad488be 100644 --- a/site/src/components/CopyableValue/CopyableValue.tsx +++ b/site/src/components/CopyableValue/CopyableValue.tsx @@ -1,7 +1,6 @@ import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useClickable } from "hooks/useClickable"; diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx index 78ad6c0311c06..a6f43436b2d78 100644 --- a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx +++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx @@ -2,7 +2,6 @@ import { Link } from "components/Link/Link"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import type { FC, HTMLAttributes, ReactNode } from "react"; @@ -47,40 +46,38 @@ export const FeatureStageBadge: FC = ({ const sizeClasses = badgeSizeClasses[size]; return ( - - - - - (This is a - - {labelText && `${labelText} `} - {featureStageBadgeTypes[contentType]} - - feature) + + + + (This is a + + {labelText && `${labelText} `} + {featureStageBadgeTypes[contentType]} - - -

- This feature has not yet reached general availability (GA). -

+ feature) + + + +

+ This feature has not yet reached general availability (GA). +

- - Learn about feature stages - (link opens in new tab) - - - - + + Learn about feature stages + (link opens in new tab) + + + ); }; diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx index fbdc93e53dea8..7b73aec7067e4 100644 --- a/site/src/components/HelpTooltip/HelpTooltip.tsx +++ b/site/src/components/HelpTooltip/HelpTooltip.tsx @@ -11,7 +11,6 @@ import { TooltipContent, type TooltipContentProps, type TooltipProps, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react"; @@ -33,11 +32,7 @@ export const HelpTooltipTrigger = TooltipTrigger; export const HelpTooltipIcon = CircleHelpIcon; export const HelpTooltip: FC = (props) => { - return ( - - - - ); + return ; }; export const HelpTooltipContent: FC = ({ diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx index ca9332e350641..1976cb790d951 100644 --- a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx +++ b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx @@ -14,7 +14,6 @@ import { import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useDebouncedValue } from "hooks/debounce"; @@ -684,21 +683,19 @@ export const MultiSelectCombobox = forwardRef< )} {option.label} {option.description && ( - - - - - - - - - {option.description} - - - + + + + + + + + {option.description} + + )} diff --git a/site/src/components/StatusPill/StatusPill.tsx b/site/src/components/StatusPill/StatusPill.tsx index d0199317dc2e7..7724dbb3740c0 100644 --- a/site/src/components/StatusPill/StatusPill.tsx +++ b/site/src/components/StatusPill/StatusPill.tsx @@ -2,7 +2,6 @@ import { Pill } from "components/Pill/Pill"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import type { FC } from "react"; @@ -33,11 +32,9 @@ export const StatusPill: FC = ({ return pill; } return ( - - - {pill} - {label} - - + + {pill} + {label} + ); }; diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx index 533357c79bca0..26c77dfb8f6b0 100644 --- a/site/src/modules/dashboard/Navbar/NavbarView.tsx +++ b/site/src/modules/dashboard/Navbar/NavbarView.tsx @@ -7,7 +7,6 @@ import { CoderIcon } from "components/Icons/CoderIcon"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import type { ProxyContextValue } from "contexts/ProxyContext"; @@ -230,21 +229,19 @@ const TasksNavItem: FC = ({ user }) => { > Tasks {idleCount > 0 && ( - - - - - {idleCount} - - - {idleTasksLabel(idleCount)} - - + + + + {idleCount} + + + {idleTasksLabel(idleCount)} + )} ); diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx index 25579c3c7803a..b17cbafec1a9c 100644 --- a/site/src/modules/resources/AgentDevcontainerCard.tsx +++ b/site/src/modules/resources/AgentDevcontainerCard.tsx @@ -14,7 +14,6 @@ import { Stack } from "components/Stack/Stack"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useProxy } from "contexts/ProxyContext"; @@ -346,19 +345,17 @@ export const AgentDevcontainerCard: FC = ({ ) : ""; return ( - - - - - - - {portLabel} - - - - {helperText} - - + + + + + + {portLabel} + + + + {helperText} + ); })} diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.tsx index 6c9ee75d690e5..e71576913219f 100644 --- a/site/src/modules/resources/AgentLogs/AgentLogs.tsx +++ b/site/src/modules/resources/AgentLogs/AgentLogs.tsx @@ -5,7 +5,6 @@ import type { Line } from "components/Logs/LogLine"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { type ComponentProps, forwardRef, type JSX } from "react"; @@ -148,33 +147,31 @@ export const AgentLogs = forwardRef( {overflowed && ( - - - - - Logs overflowed - - - + + -

- Startup logs exceeded the max size of{" "} - 1MB, and will - not continue to be written to the database. Logs will continue - to be written to the{" "} - - /tmp/coder-startup-script.log - {" "} - file in the workspace. -

- - - + Logs overflowed + + + +

+ Startup logs exceeded the max size of{" "} + 1MB, and will + not continue to be written to the database. Logs will continue + to be written to the{" "} + + /tmp/coder-startup-script.log + {" "} + file in the workspace. +

+ + )} ); diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx index 620ab384a7033..419148ed0914a 100644 --- a/site/src/modules/resources/AppLink/AppLink.tsx +++ b/site/src/modules/resources/AppLink/AppLink.tsx @@ -6,7 +6,6 @@ import { Spinner } from "components/Spinner/Spinner"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useProxy } from "contexts/ProxyContext"; @@ -137,20 +136,18 @@ export const AppLink: FC = ({ if (primaryTooltip || app.tooltip) { return ( - - - {button} - - {primaryTooltip ? ( - primaryTooltip - ) : app.tooltip ? ( - - {app.tooltip} - - ) : null} - - - + + {button} + + {primaryTooltip ? ( + primaryTooltip + ) : app.tooltip ? ( + + {app.tooltip} + + ) : null} + + ); } diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx index 78d4e999b340c..b92218993d7e6 100644 --- a/site/src/modules/resources/PortForwardButton.tsx +++ b/site/src/modules/resources/PortForwardButton.tsx @@ -36,7 +36,6 @@ import { Spinner } from "components/Spinner/Spinner"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useFormik } from "formik"; @@ -218,40 +217,36 @@ export const PortForwardPopoverView: FC = ({ : "authenticated"; const disabledPublicMenuItem = ( - - - - {/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */} -
- - Public - -
- - - This workspace template does not allow sharing ports publicly. - - - + + + {/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */} +
+ + Public + +
+ + + This workspace template does not allow sharing ports publicly. + + ); const disabledAuthenticatedMenuItem = ( - - - - {/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */} -
- - Authenticated - -
- - - This workspace template does not allow sharing ports outside of its - organization. - - - + + + {/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */} +
+ + Authenticated + +
+ + + This workspace template does not allow sharing ports outside of its + organization. + + ); return ( @@ -338,19 +333,15 @@ export const PortForwardPopoverView: FC = ({ required css={styles.newPortInput} /> - - - - - - - Connect to port - - - + + + + + Connect to port + @@ -405,30 +396,28 @@ export const PortForwardPopoverView: FC = ({ alignItems="center" > {canSharePorts && ( - - - - - - - Share this port - - - + + + + + + Share this port + + )} diff --git a/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx b/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx index 77e338cd47038..57a567b40366b 100644 --- a/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx +++ b/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx @@ -24,7 +24,6 @@ import { Spinner } from "components/Spinner/Spinner"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useAuthenticated } from "hooks/useAuthenticated"; @@ -414,23 +413,21 @@ const ExternalAuthButtons: FC = ({ {shouldRetry && !auth.authenticated && ( - - - - - - - Retry connecting to {auth.display_name} - - - + + + + + + Retry connecting to {auth.display_name} + + )} ); diff --git a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx index eddbfa6f3f55e..eaa694d8ae056 100644 --- a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx +++ b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx @@ -16,7 +16,6 @@ import { StatusIndicatorDot } from "components/StatusIndicator/StatusIndicator"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useAuthenticated } from "hooks"; @@ -63,50 +62,46 @@ export const TasksSidebar: FC = () => { )} - - - - - - - {isCollapsed ? "Open" : "Close"} Sidebar - - - - - - - New task + {isCollapsed ? "Open" : "Close"} Sidebar - + + + + + + + + New task + + {!isCollapsed && permissions.viewAllUsers && ( = ({ task }) => { const TaskSidebarMenuItemStatus: FC<{ task: Task }> = ({ task }) => { return ( - - - - - - - {task.status} - - - + + +
+ {statusText} +
+ + + {statusText} + + ); }; diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx index a298270e9a65f..7139c5bba25ad 100644 --- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx +++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx @@ -25,7 +25,6 @@ import { Textarea } from "components/Textarea/Textarea"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useDebouncedValue } from "hooks/debounce"; @@ -145,90 +144,80 @@ const ParameterLabel: FC = ({ )} {!parameter.mutable && ( - - - - - - - Immutable - - - - - This value cannot be modified after the workspace has been - created. - - - + + + + + + Immutable + + + + + This value cannot be modified after the workspace has been + created. + + )} {parameter.ephemeral && ( - - - - - - - Ephemeral - - - - - This parameter is ephemeral and will reset to the template - default on workspace restart. - - - + + + + + + Ephemeral + + + + + This parameter is ephemeral and will reset to the template + default on workspace restart. + + )} {isPreset && ( - - - - - - - Preset - - - - - Preset parameters cannot be modified. - - - + + + + + + Preset + + + + + Preset parameters cannot be modified. + + )} {autofill && ( - - - - - - - URL Autofill - - - - - Autofilled from the URL. - - - + + + + + + URL Autofill + + + + + Autofilled from the URL. + + )} {hasRequiredDiagnostic && ( - - - - - - Required - - - - - {hasRequiredDiagnostic.summary || "Required parameter"} - - - + + + + + Required + + + + + {hasRequiredDiagnostic.summary || "Required parameter"} + + )} @@ -637,16 +626,14 @@ const OptionDisplay: FC = ({ option }) => { )} {option.name} {option.description && ( - - - - - - - {option.description} - - - + + + + + + {option.description} + + )} ); diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx index 633a9fcbc1ad8..405e8c11ea2d9 100644 --- a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx +++ b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx @@ -2,7 +2,6 @@ import type { WorkspaceAppStatus as APIWorkspaceAppStatus } from "api/typesGener import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import capitalize from "lodash/capitalize"; @@ -28,23 +27,21 @@ export const WorkspaceAppStatus = ({ const message = status.message || capitalize(status.state); return (
- - - -
- - - {message} - -
- - {message} - - + + +
+ + + {message} + +
+ + {message} + {status.state} diff --git a/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx b/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx index c7e9e53ba8ff5..d8eb82659fe40 100644 --- a/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx +++ b/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx @@ -7,7 +7,6 @@ import { import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import type React from "react"; @@ -60,19 +59,17 @@ export const WorkspaceStatusIndicator: FC = ({ } return ( - - - - - - Workspace status: {text} - {children} - - - - Your workspace is running but some agents are unhealthy. - - - + + + + + Workspace status: {text} + {children} + + + + Your workspace is running but some agents are unhealthy. + + ); }; diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx index 315c8f357db29..94ccf3b980187 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx @@ -14,7 +14,6 @@ import { Switch } from "components/Switch/Switch"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; @@ -386,26 +385,24 @@ export const CreateWorkspacePageViewExperimental: FC<

New workspace

- - - - - - - Dynamic Parameters enhances Coder's existing parameter system - with real-time validation, conditional parameter behavior, and - richer input types. -
- - View docs - - - - + + + + + + Dynamic Parameters enhances Coder's existing parameter system + with real-time validation, conditional parameter behavior, and + richer input types. +
+ + View docs + + + diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx index 65e2de6dce2be..e55fe1a60f13c 100644 --- a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx +++ b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx @@ -6,7 +6,6 @@ import { Spinner } from "components/Spinner/Spinner"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { Check, Redo } from "lucide-react"; @@ -77,19 +76,17 @@ export const ExternalAuthButton: FC = ({ )} {displayRetry && !auth.authenticated && ( - - - - - - - Retry login with {auth.display_name} - - - + + + + + + Retry login with {auth.display_name} + + )}
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index 950fd64f8359a..52f8f690de2e1 100644 --- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -16,7 +16,6 @@ import { import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useFormik } from "formik"; @@ -67,31 +66,29 @@ export const AppearanceSettingsPageView: FC< - - - {isEntitled && !isPremium ? ( - - ) : ( - - - - - - )} + + {isEntitled && !isPremium ? ( + + ) : ( + + + + + + )} - - - - - + + + +
= ({
{idpOrg} {!exists && ( - - - - - - - This value has not be seen in the specified claim field - before. You might want to check your IdP configuration and - ensure that this value is not misspelled. - - - + + + + + + This value has not be seen in the specified claim field before. + You might want to check your IdP configuration and ensure that + this value is not misspelled. + + )}
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx index 3b73d0199a7c1..16c25c5bc8f39 100644 --- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx +++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx @@ -2,7 +2,6 @@ import { Pill } from "components/Pill/Pill"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import type { FC } from "react"; @@ -47,36 +46,34 @@ interface OverflowPillProps { const OverflowPillList: FC = ({ organizations }) => { return ( - - - - - +{organizations.length} - - + + + + +{organizations.length} + + - -
    - {organizations.map((organization) => ( -
  • - - {organization.name} - -
    • - ))} -
- - - + +
    + {organizations.map((organization) => ( +
  • + + {organization.name} + +
    • + ))} +
+ + ); }; diff --git a/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx index 011db7f954912..728efbf33f2e5 100644 --- a/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx @@ -15,7 +15,6 @@ import { Stack } from "components/Stack/Stack"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import type { FC } from "react"; @@ -53,31 +52,29 @@ export const ObservabilitySettingsPageView: FC< - - - {featureAuditLogEnabled && !isPremium ? ( - - ) : ( - - - - - - )} + + {featureAuditLogEnabled && !isPremium ? ( + + ) : ( + + + + + + )} - - - - - + + + + diff --git a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx index 6b87ae2606fda..074019bb95689 100644 --- a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx @@ -12,7 +12,6 @@ import { Spinner } from "components/Spinner/Spinner"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useFormik } from "formik"; @@ -82,29 +81,27 @@ export const CreateOrganizationPageView: FC< )} - - - {isEntitled && ( - - - - - - )} + + {isEntitled && ( + + + + + + )} - - - - - + + + +
diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.tsx index fea0dff643966..9ff1a524a8d1e 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.tsx @@ -5,7 +5,6 @@ import { Pill } from "components/Pill/Pill"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import type { FC } from "react"; @@ -77,34 +76,29 @@ const OverflowPermissionPill: FC = ({ const theme = useTheme(); return ( - - - - - +{resources.length} more - - + + + + +{resources.length} more + + - -
    - {resources.map((resource) => ( -
  • - -
    • - ))} -
- - - + +
    + {resources.map((resource) => ( +
  • + +
    • + ))} +
+ + ); }; diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx index b3840e19a36ad..6f4cd9dc6630a 100644 --- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx +++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx @@ -25,7 +25,6 @@ import { TableCell, TableRow } from "components/Table/Table"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useFormik } from "formik"; @@ -370,23 +369,21 @@ const GroupRow: FC = ({
{idpGroup} {!exists && ( - - - - - - - This value has not be seen in the specified claim field - before. You might want to check your IdP configuration and - ensure that this value is not misspelled. - - - + + + + + + This value has not be seen in the specified claim field before. + You might want to check your IdP configuration and ensure that + this value is not misspelled. + + )}
diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpPillList.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpPillList.tsx index 330cd6bfdc9ac..0269f8872ab7d 100644 --- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpPillList.tsx +++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpPillList.tsx @@ -4,7 +4,6 @@ import { Pill } from "components/Pill/Pill"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import type { FC } from "react"; @@ -36,25 +35,23 @@ interface OverflowPillProps { const OverflowPill: FC = ({ roles }) => { return ( - - - - +{roles.length} more - + + + +{roles.length} more + - -
    - {roles.map((role) => ( -
  • - - {role} - -
    • - ))} -
- - - + +
    + {roles.map((role) => ( +
  • + + {role} + +
    • + ))} +
+ + ); }; diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx index 2efbf6f758393..e304b2d9e04f8 100644 --- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx +++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx @@ -12,7 +12,6 @@ import { TableCell, TableRow } from "components/Table/Table"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useFormik } from "formik"; @@ -285,23 +284,21 @@ const RoleRow: FC = ({
{idpRole} {!exists && ( - - - - - - - This value has not be seen in the specified claim field - before. You might want to check your IdP configuration and - ensure that this value is not misspelled. - - - + + + + + + This value has not be seen in the specified claim field before. + You might want to check your IdP configuration and ensure that + this value is not misspelled. + + )}
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/CancelJobButton.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/CancelJobButton.tsx index 4c024911ee23f..0e0067bcfe37e 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/CancelJobButton.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/CancelJobButton.tsx @@ -3,7 +3,6 @@ import { Button } from "components/Button/Button"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { BanIcon } from "lucide-react"; @@ -22,24 +21,22 @@ export const CancelJobButton: FC = ({ job }) => { return ( <> - - - - - - Cancel job - - + + + + + Cancel job +
- - - - - - Clear ID - - + + + + + Clear ID +
)} diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/LastConnectionHead.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/LastConnectionHead.tsx index 8ca1b66b72d97..081108976ee70 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/LastConnectionHead.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/LastConnectionHead.tsx @@ -1,7 +1,6 @@ import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { InfoIcon } from "lucide-react"; @@ -10,22 +9,20 @@ export const LastConnectionHead: FC = () => { return ( Last connection - - - - - More info - - - - - Last time the provisioner connected to the control plane - - - + + + + More info + + + + + Last time the provisioner connected to the control plane + + ); }; diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx index 386d87d8c1324..0c12110b7ae40 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx @@ -22,7 +22,6 @@ import { import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { XIcon } from "lucide-react"; @@ -75,23 +74,21 @@ export const OrganizationProvisionersPageView: FC< {filter.ids}
- - - - - - Clear ID - - + + + + + Clear ID +
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerKey.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerKey.tsx index 0bccc8c0442fc..e736bcb42037d 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerKey.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerKey.tsx @@ -6,7 +6,6 @@ import { import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { InfoIcon } from "lucide-react"; @@ -63,22 +62,20 @@ export const ProvisionerKey: FC = ({ name }) => { {name} {info && ( - - - - - More info - - - - - {infoByType[type]} - - - + + + + More info + + + + + {infoByType[type]} + + )} ); diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerVersion.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerVersion.tsx index 44d0c1c19fd3e..be8cfc3913ead 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerVersion.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerVersion.tsx @@ -2,7 +2,6 @@ import { StatusIndicator } from "components/StatusIndicator/StatusIndicator"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { TriangleAlertIcon } from "lucide-react"; @@ -22,27 +21,25 @@ export const ProvisionerVersion: FC = ({ Up to date ) : ( - - - - - - Outdated - - - -

- This provisioner is out of date. You may experience issues when - using a provisioner version that doesn't match your Coder - deployment. Please upgrade to a newer version. -

- - - + + + + + Outdated + + + +

+ This provisioner is out of date. You may experience issues when using + a provisioner version that doesn't match your Coder deployment. Please + upgrade to a newer version. +

+ + ); }; diff --git a/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx b/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx index 2f7d378e2b8a9..1549af52dc0c1 100644 --- a/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx +++ b/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx @@ -21,7 +21,6 @@ import { TableCell } from "components/Table/Table"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import type { FC } from "react"; @@ -110,37 +109,35 @@ const OverflowRolePill: FC = ({ roles }) => { const theme = useTheme(); return ( - - - + + + + +{roles.length} more + + + + + {roles.map((role) => ( - +{roles.length} more + {role.global ? ( + + {role.display_name || role.name}* + + ) : ( + role.display_name || role.name + )} - - - - {roles.map((role) => ( - - {role.global ? ( - - {role.display_name || role.name}* - - ) : ( - role.display_name || role.name - )} - - ))} - - - + ))} + + ); }; diff --git a/site/src/pages/TaskPage/TaskTopbar.tsx b/site/src/pages/TaskPage/TaskTopbar.tsx index b5affcbfffe0b..cc9cc961b4ae9 100644 --- a/site/src/pages/TaskPage/TaskTopbar.tsx +++ b/site/src/pages/TaskPage/TaskTopbar.tsx @@ -3,7 +3,6 @@ import { Button } from "components/Button/Button"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useClipboard } from "hooks"; @@ -16,7 +15,7 @@ import { } from "lucide-react"; import type { FC } from "react"; import { Link as RouterLink } from "react-router"; -import { TaskStartupWarningButton } from "./TaskStartupWarningButton"; +import type { TaskStartupWarningButton } from "./TaskStartupWarningButton"; import { TaskStatusLink } from "./TaskStatusLink"; type TaskTopbarProps = { task: Task; workspace: Workspace }; @@ -24,19 +23,17 @@ type TaskTopbarProps = { task: Task; workspace: Workspace }; export const TaskTopbar: FC = ({ task, workspace }) => { return (
- - - - - - Back to tasks - - + + + + + Back to tasks +

{task.name}

@@ -47,26 +44,20 @@ export const TaskTopbar: FC = ({ task, workspace }) => { )}
- - - - - - - - -

- {task.initial_prompt} -

- - - - + + + + + +

+ {task.initial_prompt} +

+ + + - - Delete task - - + + + + + Delete task + diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx index 909c62c26a552..2cd9f83352f58 100644 --- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx +++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx @@ -8,7 +8,6 @@ import { TableCell } from "components/Table/Table"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { UsersIcon } from "lucide-react"; @@ -30,83 +29,81 @@ export const UserGroupsCell: FC = ({ userGroups }) => { // the table UI N/A ) : ( - - - - + + + + + -
- 0 && "opacity-80", - ])} - /> + {userGroups.map((group) => { + const groupName = group.display_name || group.name; + return ( + + - - {userGroups.length} Group{userGroups.length !== 1 && "s"} - -
- - - - - - - {userGroups.map((group) => { - const groupName = group.display_name || group.name; - return ( - - - - - {groupName || N/A} - - - ); - })} - - - - - + {groupName || N/A} + + + ); + })} + + + + )} ); diff --git a/site/src/pages/WorkspacePage/AppStatuses.tsx b/site/src/pages/WorkspacePage/AppStatuses.tsx index 2f1845db37031..48ae63813ea9f 100644 --- a/site/src/pages/WorkspacePage/AppStatuses.tsx +++ b/site/src/pages/WorkspacePage/AppStatuses.tsx @@ -10,7 +10,6 @@ import { ScrollArea } from "components/ScrollArea/ScrollArea"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import capitalize from "lodash/capitalize"; @@ -99,19 +98,17 @@ export const AppStatuses: FC = ({ {latestStatus.uri && (latestStatus.uri.startsWith("file://") ? ( - - - - - - {truncateURI(latestStatus.uri)} - - - - This file is located in your workspace - - - + + + + + {truncateURI(latestStatus.uri)} + + + + This file is located in your workspace + + ) : ( )} - - - - - - - {displayStatuses ? "Hide statuses" : "Show statuses"} - - - + + + + + + {displayStatuses ? "Hide statuses" : "Show statuses"} + +
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx index 308a763716969..5341a3586424b 100644 --- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx @@ -5,7 +5,6 @@ import { Pill } from "components/Pill/Pill"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { type FC, type ReactNode, useState } from "react"; @@ -33,35 +32,33 @@ export const Notifications: FC = ({ const theme = useTheme(); return ( - - - -
- -
- - + +
- {items.map((n) => ( - - ))} - - - + +
+ + + {items.map((n) => ( + + ))} + + ); }; diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx index 8350a35d0135b..9239e5ba4ac04 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx @@ -13,7 +13,6 @@ import { Loader } from "components/Loader/Loader"; import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useEffectEvent } from "hooks/hookPolyfills"; @@ -211,26 +210,24 @@ const WorkspaceParametersPageExperimental: FC = () => {

Workspace parameters

- - - - - - - Dynamic Parameters enhances Coder's existing parameter system - with real-time validation, conditional parameter behavior, and - richer input types. -
- - View docs - - - - + + + + + + Dynamic Parameters enhances Coder's existing parameter system + with real-time validation, conditional parameter behavior, and + richer input types. +
+ + View docs + + +
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 56f1cf9428171..36b360c1d3ca6 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -40,7 +40,6 @@ import { import { Tooltip, TooltipContent, - TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useAuthenticated } from "hooks"; @@ -603,22 +602,20 @@ const PrimaryAction: FC = ({ children, }) => { return ( - - - - - - {label} - - + + + + + {label} + ); }; @@ -809,26 +806,24 @@ const BaseIconLink: FC = ({ onClick, }) => { return ( - - - - - - {label} - - + + + + + {label} + ); }; From 631764aa539992be4db0e0b14090e062500fb056 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 21 Nov 2025 16:33:55 +0000 Subject: [PATCH 3/9] fix: fix merge --- .../CopyableValue/CopyableValue.tsx | 98 +++++++++---------- .../tasks/TasksSidebar/TasksSidebar.tsx | 13 +-- site/src/pages/TaskPage/TaskTopbar.tsx | 6 +- 3 files changed, 58 insertions(+), 59 deletions(-) diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx index 50e038ad488be..7c0373b8ddbae 100644 --- a/site/src/components/CopyableValue/CopyableValue.tsx +++ b/site/src/components/CopyableValue/CopyableValue.tsx @@ -36,55 +36,53 @@ export const CopyableValue: FC = ({ }); return ( - - { - // Always keep the tooltip open when in focus to handle issues when onOpenChange is unexpectedly false - if (!shouldBeOpen && isFocused) return; - setTooltipOpen(shouldBeOpen); - }} - > - - { - clickableProps.onClick(event); - onClick?.(event); - }} - onKeyDown={(event) => { - clickableProps.onKeyDown(event); - onKeyDown?.(event); - }} - onKeyUp={(event) => { - clickableProps.onKeyUp(event); - onKeyUp?.(event); - }} - onMouseEnter={() => { - setIsFocused(true); - setTooltipOpen(true); - }} - onMouseLeave={() => { - setTooltipOpen(false); - }} - onFocus={() => { - setIsFocused(true); - }} - onBlur={() => { - setTooltipOpen(false); - }} - > - {children} - - - - {showCopiedSuccess ? "Copied!" : "Click to copy"} - - - + { + // Always keep the tooltip open when in focus to handle issues when onOpenChange is unexpectedly false + if (!shouldBeOpen && isFocused) return; + setTooltipOpen(shouldBeOpen); + }} + > + + { + clickableProps.onClick(event); + onClick?.(event); + }} + onKeyDown={(event) => { + clickableProps.onKeyDown(event); + onKeyDown?.(event); + }} + onKeyUp={(event) => { + clickableProps.onKeyUp(event); + onKeyUp?.(event); + }} + onMouseEnter={() => { + setIsFocused(true); + setTooltipOpen(true); + }} + onMouseLeave={() => { + setTooltipOpen(false); + }} + onFocus={() => { + setIsFocused(true); + }} + onBlur={() => { + setTooltipOpen(false); + }} + > + {children} + + + + {showCopiedSuccess ? "Copied!" : "Click to copy"} + + ); }; diff --git a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx index eaa694d8ae056..a37d65c7e8b9b 100644 --- a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx +++ b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx @@ -256,16 +256,13 @@ const TaskSidebarMenuItemStatus: FC<{ task: Task }> = ({ task }) => { return ( -
- {statusText} -
+ - {statusText} + {task.status} ); diff --git a/site/src/pages/TaskPage/TaskTopbar.tsx b/site/src/pages/TaskPage/TaskTopbar.tsx index cc9cc961b4ae9..253805a5d268d 100644 --- a/site/src/pages/TaskPage/TaskTopbar.tsx +++ b/site/src/pages/TaskPage/TaskTopbar.tsx @@ -15,7 +15,7 @@ import { } from "lucide-react"; import type { FC } from "react"; import { Link as RouterLink } from "react-router"; -import type { TaskStartupWarningButton } from "./TaskStartupWarningButton"; +import { TaskStartupWarningButton } from "./TaskStartupWarningButton"; import { TaskStatusLink } from "./TaskStatusLink"; type TaskTopbarProps = { task: Task; workspace: Workspace }; @@ -44,6 +44,10 @@ export const TaskTopbar: FC = ({ task, workspace }) => { )}
+ + - - Back to tasks - + + + + + + Back to tasks + +

{task.name}

@@ -48,20 +51,22 @@ export const TaskTopbar: FC = ({ task, workspace }) => { lifecycleState={task.workspace_agent_lifecycle} /> - - - - - -

- {task.initial_prompt} -

- - - + + + + + + +

+ {task.initial_prompt} +

+ + + + - - Delete task - + + + + + + Delete task + + diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx index 9239e5ba4ac04..8350a35d0135b 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx @@ -13,6 +13,7 @@ import { Loader } from "components/Loader/Loader"; import { Tooltip, TooltipContent, + TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useEffectEvent } from "hooks/hookPolyfills"; @@ -210,24 +211,26 @@ const WorkspaceParametersPageExperimental: FC = () => {

Workspace parameters

- - - - - - Dynamic Parameters enhances Coder's existing parameter system - with real-time validation, conditional parameter behavior, and - richer input types. -
- - View docs - - - + + + + + + + Dynamic Parameters enhances Coder's existing parameter system + with real-time validation, conditional parameter behavior, and + richer input types. +
+ + View docs + + + +
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 36b360c1d3ca6..56f1cf9428171 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -40,6 +40,7 @@ import { import { Tooltip, TooltipContent, + TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useAuthenticated } from "hooks"; @@ -602,20 +603,22 @@ const PrimaryAction: FC = ({ children, }) => { return ( - - - - - {label} - + + + + + + {label} + + ); }; @@ -806,24 +809,26 @@ const BaseIconLink: FC = ({ onClick, }) => { return ( - - - - - {label} - + + + + + + {label} + + ); }; From b328fc9453de13fbe5f561a24656fb5c88cff88a Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 21 Nov 2025 17:05:41 +0000 Subject: [PATCH 5/9] chore: cleanup --- site/src/pages/TasksPage/TasksTable.tsx | 2 +- .../UsersPage/UsersTable/UserGroupsCell.tsx | 139 +++++++++--------- .../WorkspaceNotifications/Notifications.tsx | 55 +++---- 3 files changed, 101 insertions(+), 95 deletions(-) diff --git a/site/src/pages/TasksPage/TasksTable.tsx b/site/src/pages/TasksPage/TasksTable.tsx index b678284c1a01a..028386d243e38 100644 --- a/site/src/pages/TasksPage/TasksTable.tsx +++ b/site/src/pages/TasksPage/TasksTable.tsx @@ -169,7 +169,7 @@ const TaskRow: FC = ({ task }) => { /> - + - - - - - + + + + + + + + + {userGroups.map((group) => { + const groupName = group.display_name || group.name; + return ( + - {groupName || N/A} - - - ); - })} - - - - + + + + {groupName || N/A} + + + ); + })} + + + + + )} ); diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx index 5341a3586424b..308a763716969 100644 --- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx @@ -5,6 +5,7 @@ import { Pill } from "components/Pill/Pill"; import { Tooltip, TooltipContent, + TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { type FC, type ReactNode, useState } from "react"; @@ -32,33 +33,35 @@ export const Notifications: FC = ({ const theme = useTheme(); return ( - - -
+ + +
+ +
+ + - -
- - - {items.map((n) => ( - - ))} - - + {items.map((n) => ( + + ))} + + + ); }; From 0e46eb06d4c7514af7b7c19861c5328e4043dbdb Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 21 Nov 2025 17:08:38 +0000 Subject: [PATCH 6/9] chore: cleanup --- .../UserTable/UserRoleCell.tsx | 55 ++++++++++--------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx b/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx index 1549af52dc0c1..2f7d378e2b8a9 100644 --- a/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx +++ b/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx @@ -21,6 +21,7 @@ import { TableCell } from "components/Table/Table"; import { Tooltip, TooltipContent, + TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import type { FC } from "react"; @@ -109,35 +110,37 @@ const OverflowRolePill: FC = ({ roles }) => { const theme = useTheme(); return ( - - - - +{roles.length} more - - - - - {roles.map((role) => ( + + + - {role.global ? ( - - {role.display_name || role.name}* - - ) : ( - role.display_name || role.name - )} + +{roles.length} more - ))} - - + + + + {roles.map((role) => ( + + {role.global ? ( + + {role.display_name || role.name}* + + ) : ( + role.display_name || role.name + )} + + ))} + + + ); }; From 964e7d0b41ba462cd30d9d13482ae67b56ec2af1 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 21 Nov 2025 17:10:47 +0000 Subject: [PATCH 7/9] chore: cleanup --- .../tasks/TasksSidebar/TasksSidebar.tsx | 91 ++++++++++--------- 1 file changed, 49 insertions(+), 42 deletions(-) diff --git a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx index a37d65c7e8b9b..eddbfa6f3f55e 100644 --- a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx +++ b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx @@ -16,6 +16,7 @@ import { StatusIndicatorDot } from "components/StatusIndicator/StatusIndicator"; import { Tooltip, TooltipContent, + TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useAuthenticated } from "hooks"; @@ -62,46 +63,50 @@ export const TasksSidebar: FC = () => { )} + + + + + + + {isCollapsed ? "Open" : "Close"} Sidebar + + + + + + - {isCollapsed ? "Open" : "Close"} Sidebar + New task - - - - - - - - New task - - + {!isCollapsed && permissions.viewAllUsers && ( = ({ task }) => { const TaskSidebarMenuItemStatus: FC<{ task: Task }> = ({ task }) => { return ( - - - - - - {task.status} - - + + + + + + + {task.status} + + + ); }; From 313733b9792e6e64dc8a3497cfad26f5990810bb Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 21 Nov 2025 17:12:10 +0000 Subject: [PATCH 8/9] chore: cleanup --- .../DynamicParameter/DynamicParameter.tsx | 161 ++++++++++-------- 1 file changed, 87 insertions(+), 74 deletions(-) diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx index 7139c5bba25ad..a298270e9a65f 100644 --- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx +++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx @@ -25,6 +25,7 @@ import { Textarea } from "components/Textarea/Textarea"; import { Tooltip, TooltipContent, + TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useDebouncedValue } from "hooks/debounce"; @@ -144,80 +145,90 @@ const ParameterLabel: FC = ({ )} {!parameter.mutable && ( - - - - - - Immutable - - - - - This value cannot be modified after the workspace has been - created. - - + + + + + + + Immutable + + + + + This value cannot be modified after the workspace has been + created. + + + )} {parameter.ephemeral && ( - - - - - - Ephemeral - - - - - This parameter is ephemeral and will reset to the template - default on workspace restart. - - + + + + + + + Ephemeral + + + + + This parameter is ephemeral and will reset to the template + default on workspace restart. + + + )} {isPreset && ( - - - - - - Preset - - - - - Preset parameters cannot be modified. - - + + + + + + + Preset + + + + + Preset parameters cannot be modified. + + + )} {autofill && ( - - - - - - URL Autofill - - - - - Autofilled from the URL. - - + + + + + + + URL Autofill + + + + + Autofilled from the URL. + + + )} {hasRequiredDiagnostic && ( - - - - - Required - - - - - {hasRequiredDiagnostic.summary || "Required parameter"} - - + + + + + + Required + + + + + {hasRequiredDiagnostic.summary || "Required parameter"} + + + )} @@ -626,14 +637,16 @@ const OptionDisplay: FC = ({ option }) => { )} {option.name} {option.description && ( - - - - - - {option.description} - - + + + + + + + {option.description} + + + )} ); From 03e3f4908579d408dfa14579cdfaf6192c584f0e Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 21 Nov 2025 17:58:27 +0000 Subject: [PATCH 9/9] fix: add tooltipprovider to render helpers --- site/src/testHelpers/renderHelpers.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/src/testHelpers/renderHelpers.tsx b/site/src/testHelpers/renderHelpers.tsx index 8e20fef5d3e0d..660a8933c68cd 100644 --- a/site/src/testHelpers/renderHelpers.tsx +++ b/site/src/testHelpers/renderHelpers.tsx @@ -4,6 +4,7 @@ import { render as testingLibraryRender, waitFor, } from "@testing-library/react"; +import { TooltipProvider } from "components/Tooltip/Tooltip"; import { RequireAuth } from "contexts/auth/RequireAuth"; import type { ProxyProvider } from "contexts/ProxyContext"; import { ThemeOverride } from "contexts/ThemeProvider"; @@ -239,7 +240,9 @@ export const waitForLoaderToBeRemoved = async (): Promise => { export const renderComponent = (component: React.ReactNode) => { return testingLibraryRender(component, { wrapper: ({ children }) => ( - {children} + + {children} + ), }); };