Remove experiment reference & show beta badge in frontend

dannykopping · dannykopping · commit 0107ad16dc7c · 2024-10-01T12:04:20.000+02:00
Signed-off-by: Danny Kopping &lt;danny@coder.com&gt;
diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx
@@ -10,7 +10,7 @@ import { docs } from "utils/docs";
  * All types of feature that we are currently supporting. Defined as record to
  * ensure that we can't accidentally make typos when writing the badge text.
  */
-const featureStageBadgeTypes = {
+export const featureStageBadgeTypes = {
 	beta: "beta",
 	experimental: "experimental",
 } as const satisfies Record<string, ReactNode>;
diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -43,6 +43,7 @@ export const NotificationsPage: FC = () => {
 				title="Notifications"
 				description="Control delivery methods for notifications on this deployment."
 				layout="fluid"
+				featureStage={"beta"}
 			>
 				<Tabs active={tab}>
 					<TabsList>
diff --git a/site/src/pages/DeploySettingsPage/Sidebar.tsx b/site/src/pages/DeploySettingsPage/Sidebar.tsx
@@ -14,6 +14,7 @@ import {
 } from "components/Sidebar/Sidebar";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import type { FC } from "react";
+import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 
 export const Sidebar: FC = () => {
 	const { experiments } = useDashboard();
@@ -51,11 +52,9 @@ export const Sidebar: FC = () => {
 			<SidebarNavItem href="observability" icon={InsertChartIcon}>
 				Observability
 			</SidebarNavItem>
-			{experiments.includes("notifications") && (
-				<SidebarNavItem href="notifications" icon={NotificationsIcon}>
-					Notifications
-				</SidebarNavItem>
-			)}
+			<SidebarNavItem href="notifications" icon={NotificationsIcon}>
+				Notifications <FeatureStageBadge contentType="beta" size="sm" />
+			</SidebarNavItem>
 		</BaseSidebar>
 	);
 };
diff --git a/site/src/pages/ManagementSettingsPage/SidebarView.tsx b/site/src/pages/ManagementSettingsPage/SidebarView.tsx
@@ -148,11 +148,12 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
 							Users
 						</SidebarNavSubItem>
 					)}
-					{experiments.includes("notifications") && (
+					<Stack direction={"row"} alignItems={"center"} css={{ gap: 0 }}>
 						<SidebarNavSubItem href="notifications">
 							Notifications
 						</SidebarNavSubItem>
-					)}
+						<FeatureStageBadge contentType="beta" size="sm" />
+					</Stack>
 				</Stack>
 			)}
 		</div>
diff --git a/site/src/pages/UserSettingsPage/Section.tsx b/site/src/pages/UserSettingsPage/Section.tsx
@@ -1,4 +1,9 @@
 import type { Interpolation, Theme } from "@emotion/react";
+import {
+	FeatureStageBadge,
+	type featureStageBadgeTypes,
+} from "components/FeatureStageBadge/FeatureStageBadge";
+import { Stack } from "components/Stack/Stack";
 import type { FC, ReactNode } from "react";
 
 type SectionLayout = "fixed" | "fluid";
@@ -13,6 +18,7 @@ export interface SectionProps {
 	layout?: SectionLayout;
 	className?: string;
 	children?: ReactNode;
+	featureStage?: keyof typeof featureStageBadgeTypes;
 }
 
 export const Section: FC<SectionProps> = ({
@@ -24,6 +30,7 @@ export const Section: FC<SectionProps> = ({
 	className = "",
 	children,
 	layout = "fixed",
+	featureStage,
 }) => {
 	return (
 		<section className={className} id={id} data-testid={id}>
@@ -32,16 +39,25 @@ export const Section: FC<SectionProps> = ({
 					<div css={styles.header}>
 						<div>
 							{title && (
-								<h4
-									css={{
-										fontSize: 24,
-										fontWeight: 500,
-										margin: 0,
-										marginBottom: 8,
-									}}
-								>
-									{title}
-								</h4>
+								<Stack direction={"row"} alignItems="center">
+									<h4
+										css={{
+											fontSize: 24,
+											fontWeight: 500,
+											margin: 0,
+											marginBottom: 8,
+										}}
+									>
+										{title}
+									</h4>
+									{featureStage && (
+										<FeatureStageBadge
+											contentType={featureStage}
+											size="lg"
+											css={{ marginBottom: "5px" }}
+										/>
+									)}
+								</Stack>
 							)}
 							{description && typeof description === "string" && (
 								<p css={styles.description}>{description}</p>
diff --git a/site/src/pages/UserSettingsPage/Sidebar.tsx b/site/src/pages/UserSettingsPage/Sidebar.tsx
@@ -57,11 +57,9 @@ export const Sidebar: FC<SidebarProps> = ({ user }) => {
 			<SidebarNavItem href="tokens" icon={VpnKeyOutlined}>
 				Tokens
 			</SidebarNavItem>
-			{experiments.includes("notifications") && (
-				<SidebarNavItem href="notifications" icon={NotificationsIcon}>
-					Notifications
-				</SidebarNavItem>
-			)}
+			<SidebarNavItem href="notifications" icon={NotificationsIcon}>
+				Notifications
+			</SidebarNavItem>
 		</BaseSidebar>
 	);
 };

Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,7 @@ export const NotificationsPage: FC = () => {`
`43`	`43`	`title="Notifications"`
`44`	`44`	`description="Control delivery methods for notifications on this deployment."`
`45`	`45`	`layout="fluid"`
	`46`	`+ featureStage={"beta"}`
`46`	`47`	`>`
`47`	`48`	`<Tabs active={tab}>`
`48`	`49`	`<TabsList>`