From 8126fbb87db0a8fe510bdc453f83a00a1faa4048 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Thu, 22 May 2025 10:52:05 +0000 Subject: [PATCH 1/2] feat: add beta labels for dynamic params --- .../FeatureStageBadge/FeatureStageBadge.tsx | 12 +++------ .../CreateWorkspacePageViewExperimental.tsx | 25 ++++++++++++++----- .../WorkspaceParametersPageExperimental.tsx | 5 +++- 3 files changed, 27 insertions(+), 15 deletions(-) diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx index 25339d3120778..18b03b2e93661 100644 --- a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx +++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx @@ -18,6 +18,7 @@ export const featureStageBadgeTypes = { type FeatureStageBadgeProps = Readonly< Omit, "children"> & { contentType: keyof typeof featureStageBadgeTypes; + labelText?: string; size?: "sm" | "md" | "lg"; showTooltip?: boolean; } @@ -25,6 +26,7 @@ type FeatureStageBadgeProps = Readonly< export const FeatureStageBadge: FC = ({ 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 = ({ {...delegatedProps} > (This is a - + + {labelText && `${labelText} `} {featureStageBadgeTypes[contentType]} feature) @@ -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 index db629e813415e..406b7bc43b54f 100644 --- 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<
-
+
-

New workspace

+ +

New workspace

+ {/* */} + {template.deprecated && Deprecated} {experimentalFormContext && ( )}
@@ -497,10 +505,15 @@ export const CreateWorkspacePageViewExperimental: FC< {parameters.length > 0 && (
-

Parameters

+

Parameters

+

These are the settings used by your template. Immutable parameters cannot be modified once the workspace is created. + View docs

{diagnostics.length > 0 && ( diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx index 156298be26e13..d0f0f5a91827a 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx @@ -169,7 +169,10 @@ const WorkspaceParametersPageExperimental: FC = () => {

Workspace parameters

- + {experimentalFormContext && (
- +

New workspace

- {/* */} + /> + + + + + + + Dynamic Parameters enhances Coder's existing parameter system + with real-time validation, conditional parameter behavior, and + richer input types. +
+ + View docs + + + + {template.deprecated && Deprecated} @@ -369,7 +402,8 @@ export const CreateWorkspacePageViewExperimental: FC< variant="outline" onClick={experimentalFormContext.toggleOptedOut} > - Go back to the classic workspace creation flow + + Use the classic workspace creation flow )} @@ -505,15 +539,17 @@ export const CreateWorkspacePageViewExperimental: FC< {parameters.length > 0 && (
-

Parameters

- +

Parameters

These are the settings used by your template. Immutable parameters cannot be modified once the workspace is created. - View docs + + View docs +

{diagnostics.length > 0 && ( diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx index d0f0f5a91827a..fb684c3d1a388 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx @@ -12,7 +12,14 @@ import { EmptyState } from "components/EmptyState/EmptyState"; import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge"; import { Link } from "components/Link/Link"; import { Loader } from "components/Loader/Loader"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import { useEffectEvent } from "hooks/hookPolyfills"; +import { CircleHelp, Undo2 } from "lucide-react"; import type { FC } from "react"; import { useCallback, @@ -161,7 +168,7 @@ const WorkspaceParametersPageExperimental: FC = () => { } return ( -
+
{pageTitle(workspace.name, "Parameters")} @@ -170,9 +177,30 @@ const WorkspaceParametersPageExperimental: FC = () => {

Workspace parameters

+ + + + + + + Dynamic Parameters enhances Coder's existing parameter system + with real-time validation, conditional parameter behavior, and + richer input types. +
+ + View docs + + + + {experimentalFormContext && ( )} diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx index 0fcae58c5ffe6..db408ba8f4ea9 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx @@ -5,6 +5,7 @@ import type { } from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; import { Button } from "components/Button/Button"; +import { Link } from "components/Link/Link"; import { Spinner } from "components/Spinner/Spinner"; import { useFormik } from "formik"; import { useSyncFormParameters } from "modules/hooks/useSyncFormParameters"; @@ -14,6 +15,7 @@ import { useValidationSchemaForDynamicParameters, } from "modules/workspaces/DynamicParameter/DynamicParameter"; import type { FC } from "react"; +import { docs } from "utils/docs"; export type WorkspaceParametersPageViewExperimentalProps = { workspace: Workspace; parameters: PreviewParameter[]; @@ -139,6 +141,13 @@ export const WorkspaceParametersPageViewExperimental: FC<

These are the settings used by your template. Immutable parameters cannot be modified once the workspace is created. + + View docs +

{standardParameters.map((parameter, index) => {