From de69ee38773b7d74e8ccabb4256f4f15a3e18102 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Tue, 11 Mar 2025 14:06:24 +0000 Subject: [PATCH 01/19] fix: migrate deployment workspace proxies page to new header style --- .../WorkspaceProxyPage/WorkspaceProxyPage.tsx | 35 +++++-------------- .../WorkspaceProxyPage/WorkspaceProxyView.tsx | 5 +++ 2 files changed, 13 insertions(+), 27 deletions(-) diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx index 6d37c58e5dc40..f0d69975f8c1e 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx @@ -1,12 +1,8 @@ import { useProxy } from "contexts/ProxyContext"; import type { FC } from "react"; -import { Section } from "../Section"; import { WorkspaceProxyView } from "./WorkspaceProxyView"; export const WorkspaceProxyPage: FC = () => { - const description = - "Workspace proxies improve terminal and web app connections to workspaces."; - const { proxyLatencies, proxies, @@ -17,29 +13,14 @@ export const WorkspaceProxyPage: FC = () => { } = useProxy(); return ( -
({ - "& code": { - background: theme.palette.divider, - fontSize: 12, - padding: "2px 4px", - color: theme.palette.text.primary, - borderRadius: 2, - }, - })} - description={description} - layout="fluid" - > - -
+ ); }; diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx index 08f5b4620be3e..08661279f2db8 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx @@ -13,6 +13,7 @@ import { TableLoader } from "components/TableLoader/TableLoader"; import type { ProxyLatencyReport } from "contexts/useProxyLatency"; import type { FC } from "react"; import { ProxyRow } from "./WorkspaceProxyRow"; +import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; export interface WorkspaceProxyViewProps { proxies?: readonly Region[]; @@ -34,6 +35,10 @@ export const WorkspaceProxyView: FC = ({ }) => { return ( + {Boolean(getWorkspaceProxiesError) && ( )} From a1da1c1532d8524678b64ccd3257fb8a4a7d1736 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Tue, 11 Mar 2025 14:06:43 +0000 Subject: [PATCH 02/19] fix: update other proxy page to use proper render key values --- site/src/pages/HealthPage/WorkspaceProxyPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx index 69ff49e1ca283..00db9f91ef385 100644 --- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx +++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx @@ -154,12 +154,12 @@ export const WorkspaceProxyPage: FC = () => { OK ) : (
- {[...errors, ...warnings].map((msg, i) => ( + {[...errors, ...warnings].map((msg) => ( {msg} From e5d581b1832d61c21f9be0048c58c1402af6fb81 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Tue, 11 Mar 2025 14:24:53 +0000 Subject: [PATCH 03/19] fix: make secondary styling more obvious --- .../components/SettingsHeader/SettingsHeader.tsx | 13 +++++++------ .../NetworkSettingsPage/NetworkSettingsPageView.tsx | 2 +- .../ObservabilitySettingsPageView.tsx | 4 ++-- .../SecuritySettingsPageView.tsx | 4 ++-- .../UserAuthSettingsPageView.tsx | 4 ++-- 5 files changed, 14 insertions(+), 13 deletions(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index edd06a6957815..147556ca0823b 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -4,20 +4,22 @@ import { Stack } from "components/Stack/Stack"; import { SquareArrowOutUpRightIcon } from "lucide-react"; import type { FC, ReactNode } from "react"; -interface HeaderProps { +type HeaderHierarchy = "primary" | "secondary"; + +type HeaderProps = Readonly<{ title: ReactNode; description?: ReactNode; - secondary?: boolean; + hierarchy?: HeaderHierarchy; docsHref?: string; tooltip?: ReactNode; -} +}>; export const SettingsHeader: FC = ({ title, description, docsHref, - secondary, tooltip, + hierarchy = "primary", }) => { const theme = useTheme(); @@ -37,7 +39,7 @@ export const SettingsHeader: FC = ({ marginBottom: 4, gap: 8, }, - secondary && { + hierarchy === "secondary" && { fontSize: 24, fontWeight: 500, }, @@ -60,7 +62,6 @@ export const SettingsHeader: FC = ({ )}
- {docsHref && ( )} - + ); }; From a35a9aeafd02af06b18c7d178501e0658961627a Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Tue, 11 Mar 2025 15:05:26 +0000 Subject: [PATCH 05/19] fix: resolve header level bugs --- .../components/SettingsHeader/SettingsHeader.tsx | 14 +++++++++----- .../NetworkSettingsPageView.tsx | 3 ++- .../ObservabilitySettingsPageView.tsx | 7 +++++-- .../SecuritySettingsPageView.tsx | 6 ++++-- .../UserAuthSettingsPageView.tsx | 6 ++++-- 5 files changed, 24 insertions(+), 12 deletions(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 716565ea0e387..9de2fd538fafe 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -4,11 +4,13 @@ import type { FC, ReactNode } from "react"; import { twMerge } from "tailwind-merge"; type HeaderHierarchy = "primary" | "secondary"; +type HeaderLevel = `h${1 | 2 | 3 | 4 | 5 | 6}`; type HeaderProps = Readonly<{ title: ReactNode; description?: ReactNode; - hierarchy?: HeaderHierarchy; + titleVisualHierarchy?: HeaderHierarchy; + titleHeaderLevel?: HeaderLevel; docsHref?: string; tooltip?: ReactNode; }>; @@ -18,20 +20,22 @@ export const SettingsHeader: FC = ({ description, docsHref, tooltip, - hierarchy = "primary", + titleHeaderLevel = "h1", + titleVisualHierarchy = "primary", }) => { + const Header = titleHeaderLevel; return (
-

{title} -

+ {tooltip}
diff --git a/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx index e1613bb6bad54..f0aa45d7cfec6 100644 --- a/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx @@ -34,7 +34,8 @@ export const NetworkSettingsPageView: FC = ({
diff --git a/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx index 3dcab54cd96c5..5634b404d4794 100644 --- a/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx @@ -31,9 +31,11 @@ export const ObservabilitySettingsPageView: FC<
+ @@ -64,7 +66,8 @@ export const ObservabilitySettingsPageView: FC<
diff --git a/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx index 25c468f665d10..fc2637fb69d32 100644 --- a/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx @@ -49,7 +49,8 @@ export const SecuritySettingsPageView: FC = ({
@@ -64,7 +65,8 @@ export const SecuritySettingsPageView: FC = ({
diff --git a/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx index 0bac4103d14a2..7af8cf9acc038 100644 --- a/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx @@ -31,7 +31,8 @@ export const UserAuthSettingsPageView = ({ @@ -50,7 +51,8 @@ export const UserAuthSettingsPageView = ({
From 9872c5d2b07402738cce01e20d19034a161b2c68 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Tue, 11 Mar 2025 15:18:25 +0000 Subject: [PATCH 06/19] fix: constrain max width --- site/src/components/SettingsHeader/SettingsHeader.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 9de2fd538fafe..6f07fe373a7ec 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -26,7 +26,13 @@ export const SettingsHeader: FC = ({ const Header = titleHeaderLevel; return (
-
+ {/* + * The text-sm class only adjusts the size of the description, but + * we need to apply it here so that it combines with the max-w-prose + * class and makes sure we have a predictable max width for the + * entire section of text. + */} +
= ({
{description && ( -

+

{description}

)} From 1fe002225211c19646aa09baec58aa455099f1aa Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Thu, 13 Mar 2025 17:37:59 +0000 Subject: [PATCH 07/19] fix: apply formatting --- .../UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx index 08661279f2db8..fddcfecdec54e 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx @@ -7,13 +7,13 @@ import TableRow from "@mui/material/TableRow"; import type { Region } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; +import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { TableEmpty } from "components/TableEmpty/TableEmpty"; import { TableLoader } from "components/TableLoader/TableLoader"; import type { ProxyLatencyReport } from "contexts/useProxyLatency"; import type { FC } from "react"; import { ProxyRow } from "./WorkspaceProxyRow"; -import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; export interface WorkspaceProxyViewProps { proxies?: readonly Region[]; From 7d0903a439f74df82ae7d14f08e8add9b44006a6 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Thu, 13 Mar 2025 17:43:58 +0000 Subject: [PATCH 08/19] fix: update HTML semantics --- site/src/components/SettingsHeader/SettingsHeader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 6f07fe373a7ec..eb8b23e302664 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -25,7 +25,7 @@ export const SettingsHeader: FC = ({ }) => { const Header = titleHeaderLevel; return ( -
+
{/* * The text-sm class only adjusts the size of the description, but * we need to apply it here so that it combines with the max-w-prose @@ -61,6 +61,6 @@ export const SettingsHeader: FC = ({ )} -
+ ); }; From a512bf5a35b86b5c41845fb479852791a53d6474 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Thu, 13 Mar 2025 17:44:57 +0000 Subject: [PATCH 09/19] fix: flush semantics fix --- site/src/components/SettingsHeader/SettingsHeader.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index eb8b23e302664..6c351e1ba2444 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -23,7 +23,7 @@ export const SettingsHeader: FC = ({ titleHeaderLevel = "h1", titleVisualHierarchy = "primary", }) => { - const Header = titleHeaderLevel; + const HeaderTitle = titleHeaderLevel; return (
{/* @@ -34,14 +34,14 @@ export const SettingsHeader: FC = ({ */}
-
{title} -
+ {tooltip}
From 734f59d2b220251f04eae6d04833bd57be5c4c46 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Thu, 13 Mar 2025 19:30:48 +0000 Subject: [PATCH 10/19] fix: update leading --- site/src/components/SettingsHeader/SettingsHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 6c351e1ba2444..6d938a03bd132 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -36,7 +36,7 @@ export const SettingsHeader: FC = ({
From 49b9dfeb4a4b443d6529a36bc45cd51e00a8810e Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Thu, 13 Mar 2025 20:10:19 +0000 Subject: [PATCH 11/19] fix: resolve styling edge case for beta badge --- site/src/components/SettingsHeader/SettingsHeader.tsx | 2 +- .../NotificationsPage/NotificationsPage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 6d938a03bd132..89c0077fd98f5 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -36,7 +36,7 @@ export const SettingsHeader: FC = ({
diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx index 1a38cd1de9c84..0cf4933d17d3a 100644 --- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx @@ -47,7 +47,7 @@ export const NotificationsPage: FC = () => { title={ <> Notifications - + Date: Thu, 13 Mar 2025 21:00:25 +0000 Subject: [PATCH 12/19] fix: set correct font size --- site/src/components/SettingsHeader/SettingsHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 89c0077fd98f5..dd9f3511c7b7d 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -46,7 +46,7 @@ export const SettingsHeader: FC = ({
{description && ( -

+

{description}

)} From f169c4e9951bd4126a0fbff23e3565b101118f86 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Mon, 17 Mar 2025 13:39:46 +0000 Subject: [PATCH 13/19] fix: remove redundant class --- site/src/components/SettingsHeader/SettingsHeader.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index dd9f3511c7b7d..7bcc3966e4fb5 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -27,10 +27,10 @@ export const SettingsHeader: FC = ({ return (
{/* - * The text-sm class only adjusts the size of the description, but - * we need to apply it here so that it combines with the max-w-prose - * class and makes sure we have a predictable max width for the - * entire section of text. + * The text-sm class only adjusts the font size of the description, + * but we need to apply it here and not on the

tag itself. That + * way, text-sm combines with the max-w-prose class and makes sure + * we have a predictable max width for the header + description. */}

@@ -46,7 +46,7 @@ export const SettingsHeader: FC = ({
{description && ( -

+

{description}

)} From 99c2dbce486ea53750cf3d81ad210b09e8427109 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Fri, 28 Mar 2025 15:27:26 +0000 Subject: [PATCH 14/19] refactor: switch to CVA --- .../SettingsHeader/SettingsHeader.tsx | 31 +++++++++++++------ 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 7bcc3966e4fb5..ce1c611152fa9 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -1,19 +1,32 @@ +import { cva, type VariantProps } from "class-variance-authority"; import { Button } from "components/Button/Button"; import { SquareArrowOutUpRightIcon } from "lucide-react"; import type { FC, ReactNode } from "react"; import { twMerge } from "tailwind-merge"; -type HeaderHierarchy = "primary" | "secondary"; +const headerVariants = cva("m-0 pb-1 flex items-center gap-2 leading-tight", { + variants: { + titleVisualHierarchy: { + primary: "text-3xl font-bold", + secondary: "text-2xl font-medium", + }, + }, + defaultVariants: { + titleVisualHierarchy: "primary", + }, +}); + type HeaderLevel = `h${1 | 2 | 3 | 4 | 5 | 6}`; -type HeaderProps = Readonly<{ - title: ReactNode; - description?: ReactNode; - titleVisualHierarchy?: HeaderHierarchy; - titleHeaderLevel?: HeaderLevel; - docsHref?: string; - tooltip?: ReactNode; -}>; +type HeaderProps = Readonly< + VariantProps & { + title: ReactNode; + description?: ReactNode; + titleHeaderLevel?: HeaderLevel; + docsHref?: string; + tooltip?: ReactNode; + } +>; export const SettingsHeader: FC = ({ title, From 50eddd01ef0d45ce21cfdfd0212849dcccbe0727 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Fri, 28 Mar 2025 16:48:26 +0000 Subject: [PATCH 15/19] refactor: update API design of SettingsHeader --- .../SettingsHeader/SettingsHeader.tsx | 150 +++++++++++------- .../AppearanceSettingsPageView.tsx | 16 +- .../ExternalAuthSettingsPageView.tsx | 19 ++- .../AddNewLicensePageView.tsx | 17 +- .../LicensesSettingsPageView.tsx | 16 +- .../NetworkSettingsPageView.tsx | 39 +++-- .../NotificationsPage/NotificationsPage.tsx | 37 +++-- .../CreateOAuth2AppPageView.tsx | 17 +- .../EditOAuth2AppPageView.tsx | 17 +- .../OAuth2AppsSettingsPageView.tsx | 16 +- .../ObservabilitySettingsPageView.tsx | 44 +++-- .../OverviewPage/OverviewPageView.tsx | 19 ++- .../SecuritySettingsPageView.tsx | 51 ++++-- .../UserAuthSettingsPageView.tsx | 47 ++++-- .../pages/GroupsPage/CreateGroupPageView.tsx | 16 +- site/src/pages/GroupsPage/GroupPage.tsx | 19 ++- site/src/pages/GroupsPage/GroupsPage.tsx | 18 ++- .../CreateEditRolePageView.tsx | 19 ++- .../CustomRolesPage/CustomRolesPage.tsx | 16 +- .../OrganizationMembersPageView.tsx | 10 +- .../OrganizationProvisionersPageView.tsx | 10 +- .../OrganizationSettingsPageView.tsx | 10 +- .../WorkspaceProxyPage/WorkspaceProxyView.tsx | 18 ++- site/src/pages/UsersPage/UsersPageView.tsx | 39 ++--- 24 files changed, 459 insertions(+), 221 deletions(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index ce1c611152fa9..fea776333fdfc 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -1,79 +1,109 @@ import { cva, type VariantProps } from "class-variance-authority"; import { Button } from "components/Button/Button"; import { SquareArrowOutUpRightIcon } from "lucide-react"; -import type { FC, ReactNode } from "react"; -import { twMerge } from "tailwind-merge"; +import type { FC, PropsWithChildren, ReactNode } from "react"; +import { cn } from "utils/cn"; -const headerVariants = cva("m-0 pb-1 flex items-center gap-2 leading-tight", { +type SettingsHeaderProps = Readonly< + PropsWithChildren<{ + actions?: ReactNode; + className?: string; + }> +>; +export const SettingsHeader: FC = ({ + children, + actions, + className, +}) => { + return ( +
+ {/* + * The text-sm class is only meant to adjust the font size of + * SettingsDescription, but we need to apply it here. That way, + * text-sm combines with the max-w-prose class and makes sure + * we have a predictable max width for the header + description by + * default. + */} +
+ {children} +
+ {actions} +
+ ); +}; + +type SettingsHeaderDocsLinkProps = Readonly< + PropsWithChildren<{ href: string }> +>; +export const SettingsHeaderDocsLink: FC = ({ + href, + children = "Read the docs", +}) => { + return ( + + ); +}; + +const titleVariants = cva("m-0 pb-1 flex items-center gap-2 leading-tight", { variants: { - titleVisualHierarchy: { + hierarchy: { primary: "text-3xl font-bold", secondary: "text-2xl font-medium", }, }, defaultVariants: { - titleVisualHierarchy: "primary", + hierarchy: "primary", }, }); - -type HeaderLevel = `h${1 | 2 | 3 | 4 | 5 | 6}`; - -type HeaderProps = Readonly< - VariantProps & { - title: ReactNode; - description?: ReactNode; - titleHeaderLevel?: HeaderLevel; - docsHref?: string; - tooltip?: ReactNode; - } +type SettingsHeaderTitleProps = Readonly< + PropsWithChildren< + VariantProps & { + level?: `h${1 | 2 | 3 | 4 | 5 | 6}`; + tooltip?: ReactNode; + className?: string; + } + > >; - -export const SettingsHeader: FC = ({ - title, - description, - docsHref, +export const SettingsHeaderTitle: FC = ({ + children, tooltip, - titleHeaderLevel = "h1", - titleVisualHierarchy = "primary", + className, + level = "h1", + hierarchy = "primary", }) => { - const HeaderTitle = titleHeaderLevel; + // Explicitly not using Radix's Slot component, because we don't want to + // allow any arbitrary element to be composed into this. We specifically + // only want to allow the six HTML headers. Anything else will likely result + // in invalid markup + const Title = level; return ( -
- {/* - * The text-sm class only adjusts the font size of the description, - * but we need to apply it here and not on the

tag itself. That - * way, text-sm combines with the max-w-prose class and makes sure - * we have a predictable max width for the header + description. - */} -

-
- - {title} - - {tooltip} -
- - {description && ( -

- {description} -

- )} -
+
+ + {children} + + {tooltip} +
+ ); +}; - {docsHref && ( - - )} -
+type SettingsHeaderDescriptionProps = Readonly< + PropsWithChildren<{ + className?: string; + }> +>; +export const SettingsHeaderDescription: FC = ({ + children, + className, +}) => { + return ( +

+ {children} +

); }; diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index 6509153694f6d..4f72c67d02fb3 100644 --- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -8,7 +8,11 @@ import { } from "components/Badges/Badges"; import { Button } from "components/Button/Button"; import { PopoverPaywall } from "components/Paywall/PopoverPaywall"; -import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; +import { + SettingsHeader, + SettingsHeaderDescription, + SettingsHeaderTitle, +} from "components/SettingsHeader/SettingsHeader"; import { Popover, PopoverContent, @@ -54,10 +58,12 @@ export const AppearanceSettingsPageView: FC< return ( <> - + + Appearance + + Customize the look and feel of your Coder deployment. + + diff --git a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx index e64986c5788fc..d2a916823f56e 100644 --- a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx @@ -8,7 +8,12 @@ import TableRow from "@mui/material/TableRow"; import type { DeploymentValues, ExternalAuthConfig } from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; import { PremiumBadge } from "components/Badges/Badges"; -import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; +import { + SettingsHeader, + SettingsHeaderDescription, + SettingsHeaderDocsLink, + SettingsHeaderTitle, +} from "components/SettingsHeader/SettingsHeader"; import type { FC } from "react"; import { docs } from "utils/docs"; @@ -22,10 +27,14 @@ export const ExternalAuthSettingsPageView: FC< return ( <> + actions={} + > + External Authentication + + Coder integrates with GitHub, GitLab, BitBucket, Azure Repos, and + OpenID Connect to authenticate developers with external services. + +