Skip to content

Commit 07b7f9a

Browse files
jaaydenhjaaydenh
committed
chore: improve beta messaging
1 parent 8126fbb commit 07b7f9a

File tree

3 files changed

+89
-15
lines changed

3 files changed

+89
-15
lines changed

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx

Lines changed: 49 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { Button } from "components/Button/Button";
77
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
88
import { Input } from "components/Input/Input";
99
import { Label } from "components/Label/Label";
10+
import { Link } from "components/Link/Link";
1011
import { Pill } from "components/Pill/Pill";
11-
import { docs } from "utils/docs";
1212
import {
1313
Select,
1414
SelectContent,
@@ -18,10 +18,21 @@ import {
1818
} from "components/Select/Select";
1919
import { Spinner } from "components/Spinner/Spinner";
2020
import { Switch } from "components/Switch/Switch";
21+
import {
22+
Tooltip,
23+
TooltipContent,
24+
TooltipProvider,
25+
TooltipTrigger,
26+
} from "components/Tooltip/Tooltip";
2127
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
2228
import { type FormikContextType, useFormik } from "formik";
23-
import { ArrowLeft, CircleAlert, TriangleAlert, Undo2 } from "lucide-react";
24-
import { Link } from "components/Link/Link";
29+
import {
30+
ArrowLeft,
31+
CircleAlert,
32+
CircleHelp,
33+
TriangleAlert,
34+
Undo2,
35+
} from "lucide-react";
2536
import { useSyncFormParameters } from "modules/hooks/useSyncFormParameters";
2637
import {
2738
DynamicParameter,
@@ -38,6 +49,7 @@ import {
3849
useRef,
3950
useState,
4051
} from "react";
52+
import { docs } from "utils/docs";
4153
import { nameValidator } from "utils/formUtils";
4254
import type { AutofillBuildParameter } from "utils/richParameters";
4355
import * as Yup from "yup";
@@ -353,12 +365,33 @@ export const CreateWorkspacePageViewExperimental: FC<
353365
: template.name}
354366
</p>
355367
</div>
356-
<span className="flex flex-row items-center gap-3">
368+
<span className="flex flex-row items-center gap-2">
357369
<h1 className="text-3xl font-semibold m-0">New workspace</h1>
358-
{/* <FeatureStageBadge
370+
<FeatureStageBadge
371+
className="mt-1"
359372
contentType={"beta"}
360373
labelText="Dynamic parameters"
361-
/> */}
374+
/>
375+
<TooltipProvider delayDuration={100}>
376+
<Tooltip>
377+
<TooltipTrigger asChild>
378+
<CircleHelp className="size-icon-xs text-content-secondary" />
379+
</TooltipTrigger>
380+
<TooltipContent className="max-w-xs text-sm">
381+
Dynamic Parameters enhances Coder's existing parameter system
382+
with real-time validation, conditional parameter behavior, and
383+
richer input types.
384+
<br />
385+
<Link
386+
href={docs(
387+
"/admin/templates/extending-templates/parameters#enable-dynamic-parameters-early-access",
388+
)}
389+
>
390+
View docs
391+
</Link>
392+
</TooltipContent>
393+
</Tooltip>
394+
</TooltipProvider>
362395
</span>
363396

364397
{template.deprecated && <Pill type="warning">Deprecated</Pill>}
@@ -369,7 +402,8 @@ export const CreateWorkspacePageViewExperimental: FC<
369402
variant="outline"
370403
onClick={experimentalFormContext.toggleOptedOut}
371404
>
372-
<Undo2 />Go back to the classic workspace creation flow
405+
<Undo2 />
406+
Use the classic workspace creation flow
373407
</Button>
374408
)}
375409
</header>
@@ -505,15 +539,17 @@ export const CreateWorkspacePageViewExperimental: FC<
505539
{parameters.length > 0 && (
506540
<section className="flex flex-col gap-9">
507541
<hgroup>
508-
<span className="flex flex-row items-center gap-2"><h2 className="text-xl font-semibold m-0">Parameters</h2>
509-
<FeatureStageBadge
510-
contentType={"beta"}
511-
labelText="Dynamic parameters"
512-
/></span>
542+
<h2 className="text-xl font-semibold m-0">Parameters</h2>
513543
<p className="text-sm text-content-secondary m-0">
514544
These are the settings used by your template. Immutable
515545
parameters cannot be modified once the workspace is created.
516-
<Link href={docs("/admin/templates/extending-templates/parameters#enable-dynamic-parameters-early-access")}>View docs</Link>
546+
<Link
547+
href={docs(
548+
"/admin/templates/extending-templates/parameters#enable-dynamic-parameters-early-access",
549+
)}
550+
>
551+
View docs
552+
</Link>
517553
</p>
518554
</hgroup>
519555
{diagnostics.length > 0 && (

‎site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,14 @@ import { EmptyState } from "components/EmptyState/EmptyState";
1212
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
1313
import { Link } from "components/Link/Link";
1414
import { Loader } from "components/Loader/Loader";
15+
import {
16+
Tooltip,
17+
TooltipContent,
18+
TooltipProvider,
19+
TooltipTrigger,
20+
} from "components/Tooltip/Tooltip";
1521
import { useEffectEvent } from "hooks/hookPolyfills";
22+
import { CircleHelp, Undo2 } from "lucide-react";
1623
import type { FC } from "react";
1724
import {
1825
useCallback,
@@ -161,7 +168,7 @@ const WorkspaceParametersPageExperimental: FC = () => {
161168
}
162169

163170
return (
164-
<div className="flex flex-col gap-6 max-w-screen-md mx-auto">
171+
<div className="flex flex-col gap-6 max-w-screen-md">
165172
<Helmet>
166173
<title>{pageTitle(workspace.name, "Parameters")}</title>
167174
</Helmet>
@@ -170,17 +177,39 @@ const WorkspaceParametersPageExperimental: FC = () => {
170177
<span className="flex flex-row items-center gap-2">
171178
<h1 className="text-3xl m-0">Workspace parameters</h1>
172179
<FeatureStageBadge
180+
className="mt-1"
173181
contentType={"beta"}
174182
labelText="Dynamic parameters"
175183
/>
184+
<TooltipProvider delayDuration={100}>
185+
<Tooltip>
186+
<TooltipTrigger asChild>
187+
<CircleHelp className="size-icon-xs text-content-secondary" />
188+
</TooltipTrigger>
189+
<TooltipContent className="max-w-xs text-sm">
190+
Dynamic Parameters enhances Coder's existing parameter system
191+
with real-time validation, conditional parameter behavior, and
192+
richer input types.
193+
<br />
194+
<Link
195+
href={docs(
196+
"/admin/templates/extending-templates/parameters#enable-dynamic-parameters-early-access",
197+
)}
198+
>
199+
View docs
200+
</Link>
201+
</TooltipContent>
202+
</Tooltip>
203+
</TooltipProvider>
176204
</span>
177205
{experimentalFormContext && (
178206
<Button
179207
size="sm"
180208
variant="outline"
181209
onClick={experimentalFormContext.toggleOptedOut}
182210
>
183-
Go back to the classic workspace parameters view
211+
<Undo2 />
212+
Use the classic workspace parameters
184213
</Button>
185214
)}
186215
</header>

‎site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {
55
} from "api/typesGenerated";
66
import { Alert } from "components/Alert/Alert";
77
import { Button } from "components/Button/Button";
8+
import { Link } from "components/Link/Link";
89
import { Spinner } from "components/Spinner/Spinner";
910
import { useFormik } from "formik";
1011
import { useSyncFormParameters } from "modules/hooks/useSyncFormParameters";
@@ -14,6 +15,7 @@ import {
1415
useValidationSchemaForDynamicParameters,
1516
} from "modules/workspaces/DynamicParameter/DynamicParameter";
1617
import type { FC } from "react";
18+
import { docs } from "utils/docs";
1719
export type WorkspaceParametersPageViewExperimentalProps = {
1820
workspace: Workspace;
1921
parameters: PreviewParameter[];
@@ -139,6 +141,13 @@ export const WorkspaceParametersPageViewExperimental: FC<
139141
<p className="text-sm text-content-secondary m-0">
140142
These are the settings used by your template. Immutable
141143
parameters cannot be modified once the workspace is created.
144+
<Link
145+
href={docs(
146+
"/admin/templates/extending-templates/parameters#enable-dynamic-parameters-early-access",
147+
)}
148+
>
149+
View docs
150+
</Link>
142151
</p>
143152
</hgroup>
144153
{standardParameters.map((parameter, index) => {

0 commit comments

Comments
 (0)