fix: update presentation of beta badges for organizations UI (#14806)

* fix: make badges capitalized

* fix: remove beta badges from all headers for organizations

site/src/components/FeatureStageBadge/FeatureStageBadge.tsx

@@ -41,7 +41,9 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
 						{...delegatedProps}
 					>
 						<span style={visuallyHidden}> (This is a</span>
-						{featureStageBadgeTypes[contentType]}
+						<span css={styles.badgeLabel}>
+							{featureStageBadgeTypes[contentType]}
+						</span>
 						<span style={visuallyHidden}> feature)</span>
 					</span>
 				)}
@@ -99,6 +101,13 @@ const styles = {
 		backgroundColor: theme.branding.featureStage.hover.background,
 	}),
 
+	badgeLabel: {
+		// Have to set display mode to anything other than inline, or else the
+		// CSS capitalization algorithm won't capitalize the element
+		display: "inline-block",
+		textTransform: "capitalize",
+	},
+
 	badgeLargeText: {
 		fontSize: "1rem",
 	},

site/src/components/SettingsHeader/SettingsHeader.tsx

@@ -10,7 +10,6 @@ interface HeaderProps {
 	secondary?: boolean;
 	docsHref?: string;
 	tooltip?: ReactNode;
-	badges?: ReactNode;
 }
 
 export const SettingsHeader: FC<HeaderProps> = ({
@@ -19,38 +18,34 @@ 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={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 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>
 
 				{description && (

site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx

@@ -5,7 +5,6 @@ import { organizationPermissions } from "api/queries/organizations";
 import { deleteOrganizationRole, organizationRoles } from "api/queries/roles";
 import type { Role } from "api/typesGenerated";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
-import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
@@ -67,7 +66,6 @@ export const CustomRolesPage: FC = () => {
 				<SettingsHeader
 					title="Custom Roles"
 					description="Manage custom roles for this organization."
-					badges={<FeatureStageBadge contentType="beta" size="lg" />}
 				/>
 				{permissions.assignOrgRole && isCustomRolesEnabled && (
 					<Button component={RouterLink} startIcon={<AddIcon />} to="create">

site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx

@@ -5,7 +5,6 @@ import { groupsByOrganization } from "api/queries/groups";
 import { organizationPermissions } from "api/queries/organizations";
 import type { Organization } from "api/typesGenerated";
 import { EmptyState } from "components/EmptyState/EmptyState";
-import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
@@ -81,7 +80,6 @@ export const GroupsPage: FC = () => {
 				<SettingsHeader
 					title="Groups"
 					description="Manage groups for this organization."
-					badges={<FeatureStageBadge contentType="beta" size="lg" />}
 				/>
 				{permissions.createGroup && feats.template_rbac && (
 					<Button component={RouterLink} startIcon={<GroupAdd />} to="create">

site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx

@@ -7,7 +7,6 @@ import {
 } from "api/queries/organizations";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { EmptyState } from "components/EmptyState/EmptyState";
-import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import { Loader } from "components/Loader/Loader";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
@@ -84,7 +83,6 @@ export const IdpSyncPage: FC = () => {
 					title="IdP Sync"
 					description="Group and role sync mappings (configured using Coder CLI)."
 					tooltip={<IdpSyncHelpTooltip />}
-					badges={<FeatureStageBadge contentType="beta" size="lg" />}
 				/>
 				<Stack direction="row" spacing={2}>
 					<Button

site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx

@@ -17,7 +17,6 @@ import type {
 } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { AvatarData } from "components/AvatarData/AvatarData";
-import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import {
 	MoreMenu,
@@ -61,11 +60,7 @@ export const OrganizationMembersPageView: FC<
 > = (props) => {
 	return (
 		<div>
-			<SettingsHeader
-				title="Members"
-				badges={<FeatureStageBadge contentType="beta" size="lg" />}
-			/>
-
+			<SettingsHeader title="Members" />
 			<Stack>
 				{Boolean(props.error) && <ErrorAlert error={props.error} />}
 

site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.tsx

@@ -6,7 +6,6 @@ import type {
 	ProvisionerKeyDaemons,
 } from "api/typesGenerated";
 import { EmptyState } from "components/EmptyState/EmptyState";
-import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { ProvisionerGroup } from "modules/provisioners/ProvisionerGroup";
@@ -39,10 +38,7 @@ export const OrganizationProvisionersPageView: FC<
 				direction="row"
 				justifyContent="space-between"
 			>
-				<SettingsHeader
-					title="Provisioners"
-					badges={<FeatureStageBadge contentType="beta" size="lg" />}
-				/>
+				<SettingsHeader title="Provisioners" />
 				<Button
 					endIcon={<OpenInNewIcon />}
 					target="_blank"

site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx

@@ -8,7 +8,6 @@ import type {
 } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
-import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import {
 	FormFields,
 	FormFooter,
@@ -67,11 +66,7 @@ export const OrganizationSettingsPageView: FC<
 
 	return (
 		<div>
-			<SettingsHeader
-				title="Settings"
-				badges={<FeatureStageBadge contentType="beta" size="lg" />}
-			/>
-
+			<SettingsHeader title="Settings" />
 			{Boolean(error) && !isApiValidationError(error) && (
 				<div css={{ marginBottom: 32 }}>
 					<ErrorAlert error={error} />