feat: add beta labels for dynamic params

jaaydenh · jaaydenh · commit 8126fbb87db0 · 2025-05-22T10:52:05.000Z
diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx
@@ -18,13 +18,15 @@ export const featureStageBadgeTypes = {
 type FeatureStageBadgeProps = Readonly<
 	Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
 		contentType: keyof typeof featureStageBadgeTypes;
+		labelText?: string;
 		size?: "sm" | "md" | "lg";
 		showTooltip?: boolean;
 	}
 >;
 
 export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
 	contentType,
+	labelText = "",
 	size = "md",
 	showTooltip = true, // This is a temporary until the deprecated popover is removed
 	...delegatedProps
@@ -43,7 +45,8 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
 						{...delegatedProps}
 					>
 						<span style={visuallyHidden}> (This is a</span>
-						<span css={styles.badgeLabel}>
+						<span className="first-letter:uppercase">
+							{labelText && `${labelText} `}
 							{featureStageBadgeTypes[contentType]}
 						</span>
 						<span style={visuallyHidden}> feature)</span>
@@ -105,13 +108,6 @@ 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",
 	},
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -8,6 +8,7 @@ import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadg
 import { Input } from "components/Input/Input";
 import { Label } from "components/Label/Label";
 import { Pill } from "components/Pill/Pill";
+import { docs } from "utils/docs";
 import {
 	Select,
 	SelectContent,
@@ -19,7 +20,8 @@ import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { type FormikContextType, useFormik } from "formik";
-import { ArrowLeft, CircleAlert, TriangleAlert } from "lucide-react";
+import { ArrowLeft, CircleAlert, TriangleAlert, Undo2 } from "lucide-react";
+import { Link } from "components/Link/Link";
 import { useSyncFormParameters } from "modules/hooks/useSyncFormParameters";
 import {
 	DynamicParameter,
@@ -337,7 +339,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 				</button>
 			</div>
 			<div className="flex flex-col gap-6 max-w-screen-md mx-auto">
-				<header className="flex flex-col items-start gap-2 mt-10">
+				<header className="flex flex-col items-start gap-3 mt-10">
 					<div className="flex items-center gap-2">
 						<Avatar
 							variant="icon"
@@ -351,17 +353,23 @@ export const CreateWorkspacePageViewExperimental: FC<
 								: template.name}
 						</p>
 					</div>
-					<h1 className="text-3xl font-semibold m-0">New workspace</h1>
+					<span className="flex flex-row items-center gap-3">
+						<h1 className="text-3xl font-semibold m-0">New workspace</h1>
+						{/* <FeatureStageBadge
+							contentType={"beta"}
+							labelText="Dynamic parameters"
+						/> */}
+					</span>
 
 					{template.deprecated && <Pill type="warning">Deprecated</Pill>}
 
 					{experimentalFormContext && (
 						<Button
 							size="sm"
-							variant="subtle"
+							variant="outline"
 							onClick={experimentalFormContext.toggleOptedOut}
 						>
-							Go back to the classic workspace creation flow
+							<Undo2 />Go back to the classic workspace creation flow
 						</Button>
 					)}
 				</header>
@@ -497,10 +505,15 @@ export const CreateWorkspacePageViewExperimental: FC<
 					{parameters.length > 0 && (
 						<section className="flex flex-col gap-9">
 							<hgroup>
-								<h2 className="text-xl font-semibold m-0">Parameters</h2>
+								<span className="flex flex-row items-center gap-2"><h2 className="text-xl font-semibold m-0">Parameters</h2>
+								<FeatureStageBadge
+									contentType={"beta"}
+									labelText="Dynamic parameters"
+								/></span>
 								<p className="text-sm text-content-secondary m-0">
 									These are the settings used by your template. Immutable
 									parameters cannot be modified once the workspace is created.
+									<Link href={docs("/admin/templates/extending-templates/parameters#enable-dynamic-parameters-early-access")}>View docs</Link>
 								</p>
 							</hgroup>
 							{diagnostics.length > 0 && (
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx
@@ -169,7 +169,10 @@ const WorkspaceParametersPageExperimental: FC = () => {
 			<header className="flex flex-col items-start gap-2">
 				<span className="flex flex-row items-center gap-2">
 					<h1 className="text-3xl m-0">Workspace parameters</h1>
-					<FeatureStageBadge contentType={"beta"} />
+					<FeatureStageBadge
+						contentType={"beta"}
+						labelText="Dynamic parameters"
+					/>
 				</span>
 				{experimentalFormContext && (
 					<Button
