diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
index 8541297819b99..3a4ca5d163c9c 100644
--- a/site/src/components/ActiveUserChart/ActiveUserChart.tsx
+++ b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -17,6 +17,8 @@ import {
HelpTooltip,
HelpTooltipTitle,
HelpTooltipText,
+ HelpTooltipContent,
+ HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import dayjs from "dayjs";
import { useTheme } from "@emotion/react";
@@ -139,12 +141,15 @@ export const ActiveUsersTitle: FC = () => {
return (
Active Users
-
- How do we calculate active users?
-
- When a connection is initiated to a user's workspace they are
- considered an active user. e.g. apps, web terminal, SSH
-
+
+
+ How do we calculate active users?
+
+ When a connection is initiated to a user's workspace they are
+ considered an active user. e.g. apps, web terminal, SSH
+
+
);
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index e5d06d67b6490..76144ca608ab5 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -1,170 +1,107 @@
import Link from "@mui/material/Link";
-// This is used as base for the main HelpTooltip component
-// eslint-disable-next-line no-restricted-imports -- Read above
-import Popover, { type PopoverProps } from "@mui/material/Popover";
import HelpIcon from "@mui/icons-material/HelpOutline";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import {
- createContext,
- useContext,
- useRef,
- useState,
type FC,
type PropsWithChildren,
type HTMLAttributes,
type ReactNode,
+ forwardRef,
+ ComponentProps,
} from "react";
import { Stack } from "components/Stack/Stack";
-import type { CSSObject } from "@emotion/css";
+import { type CSSObject } from "@emotion/css";
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
-import { type ClassName, useClassName } from "hooks/useClassName";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+ usePopover,
+} from "components/Popover/Popover";
type Icon = typeof HelpIcon;
type Size = "small" | "medium";
-export const HelpTooltipContext = createContext<
- { open: boolean; onClose: () => void } | undefined
->(undefined);
-
-const useHelpTooltip = () => {
- const helpTooltipContext = useContext(HelpTooltipContext);
+export const HelpTooltipIcon = HelpIcon;
- if (!helpTooltipContext) {
- throw new Error(
- "This hook should be used in side of the HelpTooltipContext.",
- );
- }
-
- return helpTooltipContext;
+export const HelpTooltip: FC> = (props) => {
+ return = ({
- onOpen,
- onClose,
- children,
- ...props
-}) => {
- const popover = useClassName(classNames.popover, []);
- const paper = useClassName(classNames.paper, []);
+export const HelpTooltipContent = (
+ props: ComponentProps,
+) => {
+ const theme = useTheme();
return (
-
- {children}
-
+ css={{
+ "& .MuiPaper-root": {
+ fontSize: 14,
+ width: 304,
+ padding: 20,
+ color: theme.palette.text.secondary,
+ },
+ }}
+ />
);
};
-export interface HelpTooltipProps {
- // Useful to test on storybook
- open?: boolean;
+type HelpTooltipTriggerProps = HTMLAttributes & {
size?: Size;
- icon?: Icon;
- buttonStyles?: Interpolation;
- iconStyles?: Interpolation;
- children?: ReactNode;
-}
-
-export const HelpTooltip: FC = ({
- children,
- open = false,
- size = "medium",
- icon: Icon = HelpIcon,
- buttonStyles,
- iconStyles,
-}) => {
- const theme = useTheme();
- const anchorRef = useRef(null);
- const [isOpen, setIsOpen] = useState(open);
- const id = isOpen ? "help-popover" : undefined;
+ hoverEffect?: boolean;
+};
- const onClose = () => {
- setIsOpen(false);
- };
+export const HelpTooltipTrigger = forwardRef<
+ HTMLButtonElement,
+ HelpTooltipTriggerProps
+>((props, ref) => {
+ const {
+ size = "medium",
+ children =
{
- event.stopPropagation();
- setIsOpen(true);
- }}
- onMouseEnter={() => {
- setIsOpen(true);
- }}
- onMouseLeave={() => {
- setIsOpen(false);
- }}
- aria-label="More info"
>
-
- setIsOpen(true)}
- onClose={() => setIsOpen(false)}
- >
-
- {children}
-
-
-
+
);
-};
+});
export const HelpTooltipTitle: FC> = ({
children,
@@ -213,7 +150,7 @@ export const HelpTooltipAction: FC = ({
onClick,
ariaLabel,
}) => {
- const tooltip = useHelpTooltip();
+ const popover = usePopover();
return (
= ({
onClick={(event) => {
event.stopPropagation();
onClick();
- tooltip.onClose();
+ popover.setIsOpen(false);
}}
>
= ({ children }) => {
);
};
-const getButtonSpacingFromSize = (size?: Size): number => {
- switch (size) {
- case "small":
- return 2.5;
- case "medium":
- default:
- return 3;
- }
-};
-
const getIconSpacingFromSize = (size?: Size): number => {
switch (size) {
case "small":
- return 1.5;
+ return 12;
case "medium":
default:
- return 2;
+ return 16;
}
};
-const classNames = {
- popover: (css) => css`
- pointer-events: none;
- `,
-
- paper: (css, theme) => css`
- ${theme.typography.body2 as CSSObject}
-
- margin-top: 4px;
- width: 304px;
- padding: 20px;
- color: ${theme.palette.text.secondary};
- pointer-events: auto;
- `,
-} satisfies Record;
-
const styles = {
title: (theme) => ({
marginTop: 0,
diff --git a/site/src/components/InfoTooltip/InfoTooltip.tsx b/site/src/components/InfoTooltip/InfoTooltip.tsx
index 1939c12382c66..ebef8bc66949f 100644
--- a/site/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/site/src/components/InfoTooltip/InfoTooltip.tsx
@@ -1,10 +1,12 @@
import { type FC, type ReactNode } from "react";
import {
HelpTooltip,
+ HelpTooltipContent,
+ HelpTooltipIcon,
HelpTooltipText,
HelpTooltipTitle,
+ HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
-import InfoIcon from "@mui/icons-material/InfoOutlined";
import { Interpolation, Theme, css, useTheme } from "@emotion/react";
interface InfoTooltipProps {
@@ -22,14 +24,16 @@ export const InfoTooltip: FC = ({
const theme = useTheme();
return (
-
- {title}
- {message}
+
+
+
+
+ {title}
+ {message}
+
);
};
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
index 489d3d85dcb8c..f67cf4612cbb8 100644
--- a/site/src/components/Popover/Popover.tsx
+++ b/site/src/components/Popover/Popover.tsx
@@ -9,6 +9,7 @@ import {
useId,
useRef,
useState,
+ HTMLAttributes,
} from "react";
// This is used as base for the main Popover component
// eslint-disable-next-line no-restricted-imports -- Read above
@@ -79,8 +80,11 @@ export const usePopover = () => {
return context;
};
-export const PopoverTrigger = (props: { children: TriggerElement }) => {
+export const PopoverTrigger = (
+ props: HTMLAttributes & { children: TriggerElement },
+) => {
const popover = usePopover();
+ const { children, ...elementProps } = props;
const clickProps = {
onClick: () => {
@@ -98,6 +102,7 @@ export const PopoverTrigger = (props: { children: TriggerElement }) => {
};
return cloneElement(props.children, {
+ ...elementProps,
...(popover.mode === "click" ? clickProps : hoverProps),
"aria-haspopup": true,
"aria-owns": popover.isOpen ? popover.id : undefined,
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
index a6ee1757f67e6..c6042da53120c 100644
--- a/site/src/components/Resources/AgentLatency.tsx
+++ b/site/src/components/Resources/AgentLatency.tsx
@@ -1,14 +1,16 @@
-import { type FC, useRef, useState } from "react";
+import { type FC } from "react";
import { useTheme } from "@emotion/react";
import { Theme } from "@mui/material/styles";
import type { WorkspaceAgent, DERPRegion } from "api/typesGenerated";
import {
HelpTooltipText,
- HelpPopover,
+ HelpTooltip,
HelpTooltipTitle,
+ HelpTooltipContent,
} from "components/HelpTooltip/HelpTooltip";
import { Stack } from "components/Stack/Stack";
import { getLatencyColor } from "utils/latency";
+import { PopoverTrigger } from "components/Popover/Popover";
const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
// Find the right latency to display
@@ -31,9 +33,6 @@ const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
const theme = useTheme();
- const anchorRef = useRef(null);
- const [isOpen, setIsOpen] = useState(false);
- const id = isOpen ? "latency-popover" : undefined;
const latency = getDisplayLatency(theme, agent);
if (!latency || !agent.latency) {
@@ -41,24 +40,17 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
}
return (
- <>
- setIsOpen(true)}
- onMouseLeave={() => setIsOpen(false)}
- css={{ cursor: "pointer", color: latency.color }}
- >
- {Math.round(Math.round(latency.latency_ms))}ms
-
- setIsOpen(true)}
- onClose={() => setIsOpen(false)}
- >
+
+
+
+ {Math.round(latency.latency_ms)}ms
+
+
+
Latency
This is the latency overhead on non peer to peer connections. The
@@ -86,7 +78,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
))}
-
-
+
+
);
};
diff --git a/site/src/components/Resources/AgentOutdatedTooltip.tsx b/site/src/components/Resources/AgentOutdatedTooltip.tsx
index 8901b22385a56..e2432ed279665 100644
--- a/site/src/components/Resources/AgentOutdatedTooltip.tsx
+++ b/site/src/components/Resources/AgentOutdatedTooltip.tsx
@@ -1,10 +1,10 @@
-import { type ComponentProps, type FC } from "react";
+import { type FC } from "react";
import { useTheme } from "@emotion/react";
import RefreshIcon from "@mui/icons-material/RefreshOutlined";
import {
- HelpPopover,
+ HelpTooltip,
HelpTooltipAction,
- HelpTooltipContext,
+ HelpTooltipContent,
HelpTooltipLinksGroup,
HelpTooltipText,
HelpTooltipTitle,
@@ -12,8 +12,9 @@ import {
import type { WorkspaceAgent } from "api/typesGenerated";
import { Stack } from "components/Stack/Stack";
import { agentVersionStatus } from "../../utils/workspace";
+import { PopoverTrigger } from "components/Popover/Popover";
-type AgentOutdatedTooltipProps = ComponentProps & {
+type AgentOutdatedTooltipProps = {
agent: WorkspaceAgent;
serverVersion: string;
status: agentVersionStatus;
@@ -25,11 +26,6 @@ export const AgentOutdatedTooltip: FC = ({
serverVersion,
status,
onUpdate,
- onOpen,
- id,
- open,
- onClose,
- anchorEl,
}) => {
const theme = useTheme();
const versionLabelStyles = {
@@ -50,14 +46,13 @@ export const AgentOutdatedTooltip: FC = ({
"To fix this, you can stop and start the workspace.";
return (
-
-
+
+
+
+ {status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
+
+
+
{title}
@@ -84,7 +79,7 @@ export const AgentOutdatedTooltip: FC
= ({
-
-
+
+
);
};
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
index 12280f8406f0d..706aa5edcdce7 100644
--- a/site/src/components/Resources/AgentStatus.tsx
+++ b/site/src/components/Resources/AgentStatus.tsx
@@ -4,12 +4,13 @@ import { WorkspaceAgent } from "api/typesGenerated";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import WarningRounded from "@mui/icons-material/WarningRounded";
import {
- HelpPopover,
+ HelpTooltip,
+ HelpTooltipContent,
HelpTooltipText,
HelpTooltipTitle,
} from "components/HelpTooltip/HelpTooltip";
-import { useRef, useState } from "react";
import Link from "@mui/material/Link";
+import { PopoverTrigger } from "components/Popover/Popover";
// If we think in the agent status and lifecycle into a single enum/state I’d
// say we would have: connecting, timeout, disconnected, connected:created,
@@ -43,27 +44,13 @@ const StartingLifecycle: React.FC = () => {
const StartTimeoutLifecycle: React.FC<{
agent: WorkspaceAgent;
}> = ({ agent }) => {
- const anchorRef = useRef(null);
- const [isOpen, setIsOpen] = useState(false);
- const id = isOpen ? "timeout-popover" : undefined;
-
return (
- <>
- setIsOpen(true)}
- onMouseLeave={() => setIsOpen(false)}
- role="status"
- aria-label="Start timeout"
- css={styles.timeoutWarning}
- />
- setIsOpen(true)}
- onClose={() => setIsOpen(false)}
- >
+
+
+
+
+
Agent is taking too long to start
We noticed this agent is taking longer than expected to start.{" "}
@@ -76,35 +63,20 @@ const StartTimeoutLifecycle: React.FC<{
.
-
-
+
+
);
};
const StartErrorLifecycle: React.FC<{
agent: WorkspaceAgent;
}> = ({ agent }) => {
- const anchorRef = useRef(null);
- const [isOpen, setIsOpen] = useState(false);
- const id = isOpen ? "timeout-popover" : undefined;
-
return (
- <>
- setIsOpen(true)}
- onMouseLeave={() => setIsOpen(false)}
- role="status"
- aria-label="Start error"
- css={styles.errorWarning}
- />
- setIsOpen(true)}
- onClose={() => setIsOpen(false)}
- >
+
+
+
+
Error starting the agent
Something went wrong during the agent startup.{" "}
@@ -117,8 +89,8 @@ const StartErrorLifecycle: React.FC<{
.
-
-
+
+
);
};
@@ -137,27 +109,12 @@ const ShuttingDownLifecycle: React.FC = () => {
const ShutdownTimeoutLifecycle: React.FC<{
agent: WorkspaceAgent;
}> = ({ agent }) => {
- const anchorRef = useRef(null);
- const [isOpen, setIsOpen] = useState(false);
- const id = isOpen ? "timeout-popover" : undefined;
-
return (
- <>
- setIsOpen(true)}
- onMouseLeave={() => setIsOpen(false)}
- role="status"
- aria-label="Stop timeout"
- css={styles.timeoutWarning}
- />
- setIsOpen(true)}
- onClose={() => setIsOpen(false)}
- >
+
+
+
+
Agent is taking too long to stop
We noticed this agent is taking longer than expected to stop.{" "}
@@ -170,35 +127,20 @@ const ShutdownTimeoutLifecycle: React.FC<{
.
-
-
+
+
);
};
const ShutdownErrorLifecycle: React.FC<{
agent: WorkspaceAgent;
}> = ({ agent }) => {
- const anchorRef = useRef(null);
- const [isOpen, setIsOpen] = useState(false);
- const id = isOpen ? "timeout-popover" : undefined;
-
return (
- <>
- setIsOpen(true)}
- onMouseLeave={() => setIsOpen(false)}
- role="status"
- aria-label="Stop error"
- css={styles.errorWarning}
- />
- setIsOpen(true)}
- onClose={() => setIsOpen(false)}
- >
+
+
+
+
Error stopping the agent
Something went wrong while trying to stop the agent.{" "}
@@ -211,8 +153,8 @@ const ShutdownErrorLifecycle: React.FC<{
.
-
-
+
+
);
};
@@ -293,27 +235,12 @@ const ConnectingStatus: React.FC = () => {
const TimeoutStatus: React.FC<{
agent: WorkspaceAgent;
}> = ({ agent }) => {
- const anchorRef = useRef(null);
- const [isOpen, setIsOpen] = useState(false);
- const id = isOpen ? "timeout-popover" : undefined;
-
return (
- <>
- setIsOpen(true)}
- onMouseLeave={() => setIsOpen(false)}
- role="status"
- aria-label="Timeout"
- css={styles.timeoutWarning}
- />
- setIsOpen(true)}
- onClose={() => setIsOpen(false)}
- >
+
+
+
+
Agent is taking too long to connect
We noticed this agent is taking longer than expected to connect.{" "}
@@ -326,8 +253,8 @@ const TimeoutStatus: React.FC<{
.
-
-
+
+
);
};
diff --git a/site/src/components/Resources/AgentVersion.tsx b/site/src/components/Resources/AgentVersion.tsx
index e353802145d34..ca4195965b57f 100644
--- a/site/src/components/Resources/AgentVersion.tsx
+++ b/site/src/components/Resources/AgentVersion.tsx
@@ -1,4 +1,4 @@
-import { type FC, useRef, useState } from "react";
+import { type FC } from "react";
import type { WorkspaceAgent } from "api/typesGenerated";
import { agentVersionStatus, getDisplayVersionStatus } from "utils/workspace";
import { AgentOutdatedTooltip } from "./AgentOutdatedTooltip";
@@ -9,9 +9,6 @@ export const AgentVersion: FC<{
serverAPIVersion: string;
onUpdate: () => void;
}> = ({ agent, serverVersion, serverAPIVersion, onUpdate }) => {
- const anchorRef = useRef(null);
- const [isOpen, setIsOpen] = useState(false);
- const id = isOpen ? "version-outdated-popover" : undefined;
const { status } = getDisplayVersionStatus(
agent.version,
serverVersion,
@@ -24,28 +21,11 @@ export const AgentVersion: FC<{
}
return (
- <>
- setIsOpen(true)}
- onMouseLeave={() => setIsOpen(false)}
- css={{ cursor: "pointer" }}
- >
- {status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
-
- setIsOpen(true)}
- onClose={() => setIsOpen(false)}
- agent={agent}
- serverVersion={serverVersion}
- status={status}
- onUpdate={onUpdate}
- />
-
+ = ({
- onUpdateVersion,
- ariaLabel,
- latestVersionId,
- templateName,
-}) => {
- const { data: activeVersion } = useQuery(templateVersion(latestVersionId));
+export const WorkspaceOutdatedTooltip: FC = (props) => {
+ return (
+
+
+
+
+
+ );
+};
+
+const OutdatedTooltipContent = (props: TooltipProps) => {
+ const popover = usePopover();
+ const { onUpdateVersion, ariaLabel, latestVersionId, templateName } = props;
+ const { data: activeVersion } = useQuery({
+ ...templateVersion(latestVersionId),
+ enabled: popover.isOpen,
+ });
const theme = useTheme();
return (
-
+
{Language.outdatedLabel}
{Language.versionTooltipText}
@@ -90,7 +104,7 @@ export const WorkspaceOutdatedTooltip: FC = ({
{Language.updateVersionLabel}
-
+
);
};
@@ -99,14 +113,6 @@ const styles = {
color: theme.experimental.roles.notice.outline,
}),
- button: css`
- opacity: 1;
-
- &:hover {
- opacity: 1;
- }
- `,
-
container: {
display: "flex",
flexDirection: "column",
diff --git a/site/src/pages/AuditPage/AuditHelpTooltip.tsx b/site/src/pages/AuditPage/AuditHelpTooltip.tsx
index 597402adb78a6..7118bdd2390d6 100644
--- a/site/src/pages/AuditPage/AuditHelpTooltip.tsx
+++ b/site/src/pages/AuditPage/AuditHelpTooltip.tsx
@@ -1,10 +1,12 @@
import { FC } from "react";
import {
HelpTooltip,
+ HelpTooltipContent,
HelpTooltipLink,
HelpTooltipLinksGroup,
HelpTooltipText,
HelpTooltipTitle,
+ HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { docs } from "utils/docs";
@@ -17,13 +19,17 @@ export const Language = {
export const AuditHelpTooltip: FC = () => {
return (
- {Language.title}
- {Language.body}
-
-
- {Language.docs}
-
-
+
+ {Language.title}
+ {Language.body}
+
+
+ {Language.docs}
+
+
+
);
};
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
index be2d80b23e5bb..c87d9cefe3936 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -23,7 +23,9 @@ import * as Yup from "yup";
import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs";
import {
HelpTooltip,
+ HelpTooltipContent,
HelpTooltipText,
+ HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { LazyIconField } from "components/IconField/LazyIconField";
import Link from "@mui/material/Link";
@@ -572,10 +574,13 @@ export const CreateTemplateForm: FC = (props) => {
-
- If checked, users may be able to corrupt their
- workspace.
-
+
+
+ If checked, users may be able to corrupt their
+ workspace.
+
+
@@ -608,16 +613,21 @@ export const CreateTemplateForm: FC = (props) => {
Allow everyone to use the template
-
- If unchecked, only users with the 'template
- admin' and 'owner' role can use this
- template until the permissions are updated. Navigate to{" "}
-
- Templates > Select a template > Settings >
- Permissions
- {" "}
- to update permissions.
-
+
+
+ If unchecked, only users with the 'template
+ admin' and 'owner' role can use this
+ template until the permissions are updated. Navigate
+ to{" "}
+
+ Templates {" "}
+ to update permissions.
+
+
@@ -684,6 +694,10 @@ export const CreateTemplateForm: FC = (props) => {
);
};
+const MenuPath = () => {
+ return > ;
+};
+
const fillNameAndDisplayWithFilename = async (
filename: string,
form: ReturnType>,
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index a2300cb06161d..af96ee7b913b5 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -46,6 +46,8 @@ import {
HelpTooltip,
HelpTooltipTitle,
HelpTooltipText,
+ HelpTooltipContent,
+ HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { UserAvatar } from "components/UserAvatar/UserAvatar";
import { getLatencyColor } from "utils/latency";
@@ -281,14 +283,18 @@ const UsersLatencyPanel: FC = ({
Latency by user
-
- How is latency calculated?
-
- The median round trip time of user connections to workspaces.
-
+
+
+ How is latency calculated?
+
+ The median round trip time of user connections to workspaces.
+
+
+
{!data && = ({
Activity by user
-
- How is activity calculated?
-
- When a connection is initiated to a user's workspace they are
- considered an active user. e.g. apps, web terminal, SSH
-
+
+
+ How is activity calculated?
+
+ When a connection is initiated to a user's workspace they
+ are considered an active user. e.g. apps, web terminal, SSH
+
+
diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
index 6e5878eba5490..eab1957c7c486 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -22,7 +22,9 @@ import { Stack } from "components/Stack/Stack";
import Checkbox from "@mui/material/Checkbox";
import {
HelpTooltip,
+ HelpTooltipContent,
HelpTooltipText,
+ HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { EnterpriseBadge } from "components/Badges/Badges";
@@ -161,9 +163,13 @@ export const TemplateSettingsForm: FC = ({
>
Allow users to cancel in-progress workspace jobs.
-
- If checked, users may be able to corrupt their workspace.
-
+
+
+ If checked, users may be able to corrupt their
+ workspace.
+
+
@@ -193,9 +199,12 @@ export const TemplateSettingsForm: FC = ({
>
Require workspaces automatically update when started.
-
- This setting is not enforced for template admins.
-
+
+
+ This setting is not enforced for template admins.
+
+
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index e9aef584fc0fa..273990e4afbe8 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -28,10 +28,12 @@ import {
} from "components/TableLoader/TableLoader";
import {
HelpTooltip,
+ HelpTooltipContent,
HelpTooltipLink,
HelpTooltipLinksGroup,
HelpTooltipText,
HelpTooltipTitle,
+ HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { EmptyTemplates } from "./EmptyTemplates";
import { useClickableTableRow } from "hooks/useClickableTableRow";
@@ -63,13 +65,16 @@ export const Language = {
const TemplateHelpTooltip: FC = () => {
return (
- {Language.templateTooltipTitle}
- {Language.templateTooltipText}
-
-
- {Language.templateTooltipLink}
-
-
+
+ {Language.templateTooltipTitle}
+ {Language.templateTooltipText}
+
+
+ {Language.templateTooltipLink}
+
+
+
);
};
diff --git a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
index e99548825cc2d..9221cb2339c41 100644
--- a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
+++ b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
@@ -8,8 +8,10 @@ import UserIcon from "@mui/icons-material/PersonOutline";
import { Role } from "api/typesGenerated";
import {
HelpTooltip,
+ HelpTooltipContent,
HelpTooltipText,
HelpTooltipTitle,
+ HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import {
Popover,
@@ -101,11 +103,14 @@ export const EditRolesButton: FC = ({
if (!canSetRoles) {
return (
-
- Externally controlled
-
- Roles for this user are controlled by the OIDC identity provider.
-
+
+
+ Externally controlled
+
+ Roles for this user are controlled by the OIDC identity provider.
+
+
);
}
diff --git a/site/src/pages/UsersPage/UsersTable/TableColumnHelpTooltip.tsx b/site/src/pages/UsersPage/UsersTable/TableColumnHelpTooltip.tsx
index 2f8109b9bedfc..d26d4a64a969c 100644
--- a/site/src/pages/UsersPage/UsersTable/TableColumnHelpTooltip.tsx
+++ b/site/src/pages/UsersPage/UsersTable/TableColumnHelpTooltip.tsx
@@ -1,10 +1,12 @@
import { FC } from "react";
import {
HelpTooltip,
+ HelpTooltipContent,
HelpTooltipLink,
HelpTooltipLinksGroup,
HelpTooltipText,
HelpTooltipTitle,
+ HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { docs } from "utils/docs";
@@ -42,17 +44,19 @@ export const TableColumnHelpTooltip: FC = ({ variant }) => {
const variantLang = Language[variant];
return (
-
- {variantLang.title}
- {variantLang.text}
-
-
- {variantLang.links.map((link) => (
-
- {link.text}
-
- ))}
-
+
+
+ {variantLang.title}
+ {variantLang.text}
+
+ {variantLang.links.map((link) => (
+
+ {link.text}
+
+ ))}
+
+
);
};
diff --git a/site/src/pages/WorkspacePage/WorkspaceStats.tsx b/site/src/pages/WorkspacePage/WorkspaceStats.tsx
index 923f9aa44facb..866c26da71809 100644
--- a/site/src/pages/WorkspacePage/WorkspaceStats.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceStats.tsx
@@ -87,7 +87,7 @@ export const WorkspaceStats: FC = ({
css={styles.statsItem}
label="Version"
value={
- <>
+
}
/>
diff --git a/site/src/pages/WorkspacesPage/WorkspaceHelpTooltip.tsx b/site/src/pages/WorkspacesPage/WorkspaceHelpTooltip.tsx
index 7db515e3e20fd..e5b1db60b683e 100644
--- a/site/src/pages/WorkspacesPage/WorkspaceHelpTooltip.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspaceHelpTooltip.tsx
@@ -1,10 +1,12 @@
import { FC } from "react";
import {
HelpTooltip,
+ HelpTooltipContent,
HelpTooltipLink,
HelpTooltipLinksGroup,
HelpTooltipText,
HelpTooltipTitle,
+ HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { docs } from "utils/docs";
@@ -20,16 +22,19 @@ const Language = {
export const WorkspaceHelpTooltip: FC = () => {
return (
- {Language.workspaceTooltipTitle}
- {Language.workspaceTooltipText}
-
-
- {Language.workspaceTooltipLink1}
-
-
- {Language.workspaceTooltipLink2}
-
-
+
+ {Language.workspaceTooltipTitle}
+ {Language.workspaceTooltipText}
+
+
+ {Language.workspaceTooltipLink1}
+
+
+ {Language.workspaceTooltipLink2}
+
+
+
);
};
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 4e1dfa099d6ff..afe6372b16042 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -146,7 +146,7 @@ export const WorkspacesTable: FC = ({
title={
{workspace.name}