From 86c49ce0908e32ff0593b88df17806774b475783 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Thu, 29 May 2025 17:04:21 +0000 Subject: [PATCH 1/3] feat: add early access badges for dynamic parameters --- .../FeatureStageBadge.stories.tsx | 19 ++- .../FeatureStageBadge/FeatureStageBadge.tsx | 147 ++++++------------ .../CreateWorkspacePageViewExperimental.tsx | 7 +- site/src/pages/UserSettingsPage/Section.tsx | 2 +- .../WorkspaceParametersPageExperimental.tsx | 6 + 5 files changed, 70 insertions(+), 111 deletions(-) diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx index 330b3c9a41105..c0f3aad774473 100644 --- a/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx +++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx @@ -12,27 +12,30 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const MediumBeta: Story = { +export const SmallBeta: Story = { args: { - size: "md", + size: "sm", + contentType: "beta", }, }; -export const SmallBeta: Story = { +export const MediumBeta: Story = { args: { - size: "sm", + size: "md", + contentType: "beta", }, }; -export const LargeBeta: Story = { +export const SmallEarlyAccess: Story = { args: { - size: "lg", + size: "sm", + contentType: "early_access", }, }; -export const MediumExperimental: Story = { +export const MediumEarlyAccess: Story = { args: { size: "md", - contentType: "experimental", + contentType: "early_access", }, }; diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx index 18b03b2e93661..2b71208975d72 100644 --- a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx +++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx @@ -1,9 +1,12 @@ -import type { Interpolation, Theme } from "@emotion/react"; -import Link from "@mui/material/Link"; -import { visuallyHidden } from "@mui/utils"; -import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip"; -import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover"; +import { Link } from "components/Link/Link"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import type { FC, HTMLAttributes, ReactNode } from "react"; +import { cn } from "utils/cn"; import { docs } from "utils/docs"; /** @@ -11,132 +14,74 @@ import { docs } from "utils/docs"; * ensure that we can't accidentally make typos when writing the badge text. */ export const featureStageBadgeTypes = { + early_access: "early access", beta: "beta", - experimental: "experimental", } as const satisfies Record; type FeatureStageBadgeProps = Readonly< Omit, "children"> & { contentType: keyof typeof featureStageBadgeTypes; labelText?: string; - size?: "sm" | "md" | "lg"; - showTooltip?: boolean; + size?: "sm" | "md"; } >; +const badgeColorClasses = { + early_access: + "border-solid border-border-warning bg-surface-orange text-content-warning hover:bg-transparent", + beta: "border-solid border-highlight-sky bg-surface-sky text-highlight-sky hover:bg-transparent", +} as const; + +const badgeSizeClasses = { + sm: "text-xs font-medium px-2 py-1", + md: "text-base px-2 py-1", +} as const; + export const FeatureStageBadge: FC = ({ contentType, labelText = "", size = "md", - showTooltip = true, // This is a temporary until the deprecated popover is removed + className, ...delegatedProps }) => { + const colorClasses = badgeColorClasses[contentType]; + const sizeClasses = badgeSizeClasses[size]; + return ( - - - {({ isOpen }) => ( - + + + + + +

This feature has not yet reached general availability (GA).

Learn about feature stages - (link opens in new tab) + (link opens in new tab) - - )} - + + + ); }; - -const styles = { - badge: (theme) => ({ - // Base type is based on a span so that the element can be placed inside - // more types of HTML elements without creating invalid markdown, but we - // still want the default display behavior to be div-like - display: "block", - maxWidth: "fit-content", - - // Base style assumes that medium badges will be the default - fontSize: "0.75rem", - - cursor: "default", - flexShrink: 0, - padding: "4px 8px", - lineHeight: 1, - whiteSpace: "nowrap", - border: `1px solid ${theme.branding.featureStage.border}`, - color: theme.branding.featureStage.text, - backgroundColor: theme.branding.featureStage.background, - borderRadius: "6px", - transition: - "color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out", - }), - - badgeHover: (theme) => ({ - color: theme.branding.featureStage.hover.text, - borderColor: theme.branding.featureStage.hover.border, - backgroundColor: theme.branding.featureStage.hover.background, - }), - - badgeLargeText: { - fontSize: "1rem", - }, - - badgeSmallText: { - // Have to beef up font weight so that the letters still maintain the - // same relative thickness as all our other main UI text - fontWeight: 500, - fontSize: "0.625rem", - }, - - tooltipTitle: (theme) => ({ - color: theme.palette.text.primary, - fontWeight: 600, - fontFamily: "inherit", - fontSize: 18, - margin: 0, - lineHeight: 1, - paddingBottom: "8px", - }), - - tooltipDescription: { - margin: 0, - lineHeight: 1.4, - paddingBottom: "8px", - }, - - tooltipLink: { - fontWeight: 600, - lineHeight: 1.2, - }, -} as const satisfies Record>; diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx index 817a7abfccb09..ba43989ac6cd3 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx @@ -368,6 +368,11 @@ export const CreateWorkspacePageViewExperimental: FC<

New workspace

+ @@ -555,7 +560,7 @@ export const CreateWorkspacePageViewExperimental: FC<
- +
diff --git a/site/src/pages/UserSettingsPage/Section.tsx b/site/src/pages/UserSettingsPage/Section.tsx index 0d162b73a7f6b..2227dcd9cdbf8 100644 --- a/site/src/pages/UserSettingsPage/Section.tsx +++ b/site/src/pages/UserSettingsPage/Section.tsx @@ -53,7 +53,7 @@ export const Section: FC = ({ {featureStage && ( )} diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx index 2d8e17a60d6ac..37bc671777c51 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx @@ -9,6 +9,7 @@ import type { import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Button } from "components/Button/Button"; 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 { @@ -205,6 +206,11 @@ const WorkspaceParametersPageExperimental: FC = () => {

Workspace parameters

+ From 588d6000a431af9cd633feeb5b28daa7a637ba19 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 30 May 2025 12:40:00 +0000 Subject: [PATCH 2/3] fix: design improvements --- .../FeatureStageBadge/FeatureStageBadge.tsx | 11 ++- .../CreateWorkspacePageViewExperimental.tsx | 67 ++++++++++--------- .../WorkspaceParametersPage.tsx | 20 +++--- .../WorkspaceParametersPageExperimental.tsx | 25 ++++--- 4 files changed, 65 insertions(+), 58 deletions(-) diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx index 2b71208975d72..78ad6c0311c06 100644 --- a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx +++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx @@ -27,9 +27,8 @@ type FeatureStageBadgeProps = Readonly< >; const badgeColorClasses = { - early_access: - "border-solid border-border-warning bg-surface-orange text-content-warning hover:bg-transparent", - beta: "border-solid border-highlight-sky bg-surface-sky text-highlight-sky hover:bg-transparent", + early_access: "bg-surface-orange text-content-warning", + beta: "bg-surface-sky text-highlight-sky", } as const; const badgeSizeClasses = { @@ -51,9 +50,9 @@ export const FeatureStageBadge: FC = ({ - +

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx index ba43989ac6cd3..55b507e219c56 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx @@ -3,12 +3,12 @@ import type { FriendlyDiagnostic, PreviewParameter } from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Avatar } from "components/Avatar/Avatar"; +import { Badge } from "components/Badge/Badge"; 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, SelectContent, @@ -353,26 +353,39 @@ export const CreateWorkspacePageViewExperimental: FC<

-
- -

- {template.display_name.length > 0 - ? template.display_name - : template.name} -

+
+ + +

+ {template.display_name.length > 0 + ? template.display_name + : template.name} +

+ {template.deprecated && ( + + Deprecated + + )} + + {experimentalFormContext && ( + + )}

New workspace

- + @@ -394,19 +407,11 @@ export const CreateWorkspacePageViewExperimental: FC< - - {template.deprecated && Deprecated} - - {experimentalFormContext && ( - - )} +
- +

Workspace parameters

+ {experimentalFormContext && ( + + Try out the new workspace parameters ✨ + + )} - {experimentalFormContext && ( - - Try out the new workspace parameters ✨ - - )}
{submitError && !isApiValidationError(submitError) ? ( diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx index 37bc671777c51..2927756b7a9e1 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx @@ -204,8 +204,21 @@ const WorkspaceParametersPageExperimental: FC = () => {
- +

Workspace parameters

+ + {experimentalFormContext && ( + + )} + + { - {experimentalFormContext && ( - - )}
{Boolean(error) && } From 92cb5b5be096ad6171bdc15d1dda6717ae623496 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 30 May 2025 12:43:38 +0000 Subject: [PATCH 3/3] fix: cleanup --- .../WorkspaceParametersPageExperimental.tsx | 57 +++++++++---------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx index 2927756b7a9e1..6ba4ab6c3d6b4 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx @@ -205,8 +205,29 @@ const WorkspaceParametersPageExperimental: FC = () => {
-

Workspace parameters

- + +

Workspace parameters

+ + + + + + + Dynamic Parameters enhances Coder's existing parameter system + with real-time validation, conditional parameter behavior, and + richer input types. +
+ + View docs + + + + + {experimentalFormContext && ( )} - - - - - - - - - Dynamic Parameters enhances Coder's existing parameter system - with real-time validation, conditional parameter behavior, and - richer input types. -
- - View docs - - - - - +
{Boolean(error) && }