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..b0d98a48a5e71 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx @@ -7,6 +7,7 @@ import { Button } from "components/Button/Button"; import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge"; import { Input } from "components/Input/Input"; import { Label } from "components/Label/Label"; +import { Link } from "components/Link/Link"; import { Pill } from "components/Pill/Pill"; import { Select, @@ -17,9 +18,21 @@ import { } from "components/Select/Select"; import { Spinner } from "components/Spinner/Spinner"; import { Switch } from "components/Switch/Switch"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; import { type FormikContextType, useFormik } from "formik"; -import { ArrowLeft, CircleAlert, TriangleAlert } from "lucide-react"; +import { + ArrowLeft, + CircleAlert, + CircleHelp, + TriangleAlert, + Undo2, +} from "lucide-react"; import { useSyncFormParameters } from "modules/hooks/useSyncFormParameters"; import { DynamicParameter, @@ -36,6 +49,7 @@ import { useRef, useState, } from "react"; +import { docs } from "utils/docs"; import { nameValidator } from "utils/formUtils"; import type { AutofillBuildParameter } from "utils/richParameters"; import * as Yup from "yup"; @@ -337,7 +351,7 @@ export const CreateWorkspacePageViewExperimental: FC<
-
+
-

New workspace

+ +

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} {experimentalFormContext && ( )}
@@ -501,6 +543,13 @@ export const CreateWorkspacePageViewExperimental: FC<

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..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")} @@ -169,7 +176,31 @@ 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) => {