fix: turn badges and tooltips into separate concerns

Parkreiner · Parkreiner · commit 66389420f59c · 2024-09-18T15:59:10.000Z
diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx
@@ -10,6 +10,7 @@ interface HeaderProps {
 	secondary?: boolean;
 	docsHref?: string;
 	tooltip?: ReactNode;
+	badges?: ReactNode;
 }
 
 export const SettingsHeader: FC<HeaderProps> = ({
@@ -18,34 +19,38 @@ export const SettingsHeader: FC<HeaderProps> = ({
 	docsHref,
 	secondary,
 	tooltip,
+	badges,
 }) => {
 	const theme = useTheme();
 
 	return (
 		<Stack alignItems="baseline" direction="row" justifyContent="space-between">
 			<div css={{ maxWidth: 420, marginBottom: 24 }}>
-				<Stack direction="row" spacing={1.5} alignItems="center">
-					<h1
-						css={[
-							{
-								fontSize: 32,
-								fontWeight: 700,
-								display: "flex",
-								alignItems: "baseline",
-								lineHeight: "initial",
-								margin: 0,
-								marginBottom: 4,
-								gap: 8,
-							},
-							secondary && {
-								fontSize: 24,
-								fontWeight: 500,
-							},
-						]}
-					>
-						{title}
-					</h1>
-					{tooltip}
+				<Stack direction="row" spacing={2} alignItems="center">
+					<Stack direction="row" spacing={1} alignItems="center">
+						<h1
+							css={[
+								{
+									fontSize: 32,
+									fontWeight: 700,
+									display: "flex",
+									alignItems: "baseline",
+									lineHeight: "initial",
+									margin: 0,
+									marginBottom: 4,
+									gap: 8,
+								},
+								secondary && {
+									fontSize: 24,
+									fontWeight: 500,
+								},
+							]}
+						>
+							{title}
+						</h1>
+						{tooltip}
+					</Stack>
+					{badges}
 				</Stack>
 
 				{description && (
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx
@@ -67,7 +67,7 @@ export const CustomRolesPage: FC = () => {
 				<SettingsHeader
 					title="Custom Roles"
 					description="Manage custom roles for this organization."
-					tooltip={<FeatureBadge type="beta" variant="interactive" size="lg" />}
+					badges={<FeatureBadge type="beta" variant="interactive" size="lg" />}
 				/>
 				{permissions.assignOrgRole && isCustomRolesEnabled && (
 					<Button component={RouterLink} startIcon={<AddIcon />} to="create">
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx
@@ -81,7 +81,7 @@ export const GroupsPage: FC = () => {
 				<SettingsHeader
 					title="Groups"
 					description="Manage groups for this organization."
-					tooltip={<FeatureBadge type="beta" variant="interactive" size="lg" />}
+					badges={<FeatureBadge type="beta" variant="interactive" size="lg" />}
 				/>
 				{permissions.createGroup && feats.template_rbac && (
 					<Button component={RouterLink} startIcon={<GroupAdd />} to="create">
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx
@@ -73,12 +73,8 @@ export const IdpSyncPage: FC = () => {
 				<SettingsHeader
 					title="IdP Sync"
 					description="Group and role sync mappings (configured outside Coder)."
-					tooltip={
-						<>
-							<IdpSyncHelpTooltip />
-							<FeatureBadge type="beta" size="lg" variant="interactive" />
-						</>
-					}
+					tooltip={<IdpSyncHelpTooltip />}
+					badges={<FeatureBadge type="beta" size="lg" variant="interactive" />}
 				/>
 				<Stack direction="row" spacing={2}>
 					<Button
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
@@ -63,7 +63,7 @@ export const OrganizationMembersPageView: FC<
 		<div>
 			<SettingsHeader
 				title="Members"
-				tooltip={<FeatureBadge type="beta" size="lg" variant="interactive" />}
+				badges={<FeatureBadge type="beta" size="lg" variant="interactive" />}
 			/>
 
 			<Stack>
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.tsx
@@ -32,7 +32,7 @@ export const OrganizationProvisionersPageView: FC<
 			>
 				<SettingsHeader
 					title="Provisioners"
-					tooltip={<FeatureBadge type="beta" variant="interactive" size="lg" />}
+					badges={<FeatureBadge type="beta" variant="interactive" size="lg" />}
 				/>
 				<Button
 					endIcon={<OpenInNewIcon />}
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
@@ -69,7 +69,7 @@ export const OrganizationSettingsPageView: FC<
 		<div>
 			<SettingsHeader
 				title="Settings"
-				tooltip={<FeatureBadge type="beta" variant="interactive" size="lg" />}
+				badges={<FeatureBadge type="beta" variant="interactive" size="lg" />}
 			/>
 
 			{Boolean(error) && !isApiValidationError(error) && (

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export const OrganizationProvisionersPageView: FC<`
`32`	`32`	`>`
`33`	`33`	`<SettingsHeader`
`34`	`34`	`title="Provisioners"`
`35`		`- tooltip={<FeatureBadge type="beta" variant="interactive" size="lg" />}`
	`35`	`+ badges={<FeatureBadge type="beta" variant="interactive" size="lg" />}`
`36`	`36`	`/>`
`37`	`37`	`<Button`
`38`	`38`	`endIcon={<OpenInNewIcon />}`