8000 feat: add early access badges for dynamic parameters by jaaydenh · Pull Request #18114 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

feat: add early access badges for dynamic parameters #18114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 30, 2025
Merged

feat: add early access badges for dynamic parameters #18114

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
86c49ce
feat: add early access badges for dynamic parameters
jaaydenh May 29, 2025
588d600
fix: design improvements
jaaydenh May 30, 2025
92cb5b5
fix: cleanup
jaaydenh May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: design improvements
  • Loading branch information
@jaaydenh
jaaydenh committed May 30, 2025
commit 588d6000a431af9cd633feeb5b28daa7a637ba19
11 changes: 5 additions & 6 deletions site/src/components/FeatureStageBadge/FeatureStageBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -51,9 +50,9 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<button
<span
className={cn(
"block max-w-fit cursor-default flex-shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent",
"block max-w-fit cursor-default flex-shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent border-solid border-transparent",
sizeClasses,
colorClasses,
className,
Expand All @@ -66,7 +65,7 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
{featureStageBadgeTypes[contentType]}
</span>
<span className="sr-only"> feature)</span>
</button>
</span>
</TooltipTrigger>
<TooltipContent align="start" className="max-w-xs text-sm">
<p className="m-0">
Expand Down
67 changes: 36 additions & 31 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -353,26 +353,39 @@ export const CreateWorkspacePageViewExperimental: FC<
</div>
<div className="flex flex-col gap-6 max-w-screen-md mx-auto">
<header className="flex flex-col items-start gap-3 mt-10">
<div className="flex items-center gap-2">
<Avatar
variant="icon"
size="md"
src={template.icon}
fallback={template.name}
/>
<p className="text-base font-medium m-0">
{template.display_name.length > 0
? template.display_name
: template.name}
</p>
<div className="flex items-center gap-2 justify-between w-full">
<span className="flex items-center gap-2">
<Avatar
variant="icon"
size="md"
src={template.icon}
fallback={template.name}
/>
<p className="text-base font-medium m-0">
{template.display_name.length > 0
? template.display_name
: template.name}
</p>
{template.deprecated && (
<Badge variant="warning" size="sm">
Deprecated
</Badge>
)}
</span>
{experimentalFormContext && (
<Button
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
<Undo2 />
Classic workspace creation
</Button>
)}
</div>
<span className="flex flex-row items-center gap-2">
<h1 className="text-3xl font-semibold m-0">New workspace</h1>
<FeatureStageBadge
contentType={"early_access"}
size="sm"
labelText="Dynamic parameters"
/>

<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
Expand All @@ -394,19 +407,11 @@ export const CreateWorkspacePageViewExperimental: FC<
</Tooltip>
</TooltipProvider>
</span>

{template.deprecated && <Pill type="warning">Deprecated</Pill>}

{experimentalFormContext && (
<Button
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
<Undo2 />
Use the classic workspace creation flow
</Button>
)}
<FeatureStageBadge
contentType={"early_access"}
size="sm"
labelText="Dynamic parameters"
/>
</header>

<form
Expand Down
20 changes: 10 additions & 10 deletions site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,18 +117,18 @@ export const WorkspaceParametersPageView: FC<
return (
<div className="flex flex-col gap-10">
<header className="flex flex-col items-start gap-2">
<span className="flex flex-row justify-between items-center gap-2">
<span className="flex flex-row justify-between w-full items-center gap-2">
<h1 className="text-3xl m-0">Workspace parameters</h1>
{experimentalFormContext && (
<ShadcnButton
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
Try out the new workspace parameters ✨
</ShadcnButton>
)}
</span>
{experimentalFormContext && (
<ShadcnButton
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
Try out the new workspace parameters ✨
</ShadcnButton>
)}
</header>

{submitError && !isApiValidationError(submitError) ? (
Expand Down
25 changes: 14 additions & 11 deletions ...ges/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,8 +204,21 @@ const WorkspaceParametersPageExperimental: FC = () => {
</Helmet>

<header className="flex flex-col items-start gap-2">
<span className="flex flex-row items-center gap-2">
<span className="flex flex-row items-center gap-2 justify-between w-full">
<h1 className="text-3xl m-0">Workspace parameters</h1>

{experimentalFormContext && (
<Button
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
<Undo2 />
Classic workspace parameters
</Button>
)}
</span>
<span className="flex flex-row items-center gap-2">
<FeatureStageBadge
contentType={"early_access"}
size="sm"
Expand All @@ -232,16 +245,6 @@ const WorkspaceParametersPageExperimental: FC = () => {
</Tooltip>
</TooltipProvider>
</span>
{experimentalFormContext && (
<Button
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
<Undo2 />
Use the classic workspace parameters
</Button>
)}
</header>

{Boolean(error) && <ErrorAlert error={error} />}
Expand Down
Loading
0