Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9b53e69

Browse files
authored
feat: add early access badges for dynamic parameters (#18114)
Workspace creation page<img width="1438" alt="Screenshot 2025-05-30 at 13 38 22"src="https://github.com/user-attachments/assets/bac94f3a-b695-4662-9a89-7777d03d8f74"/>Workspace parameter settings<img width="1432" alt="Screenshot 2025-05-30 at 13 37 19"src="https://github.com/user-attachments/assets/f1f803a6-b99a-416c-a085-38bafc2ef4e4"/><img width="1429" alt="Screenshot 2025-05-30 at 13 43 27"src="https://github.com/user-attachments/assets/cb1d37a4-8b79-4858-846e-3b1deb0a63cf"/>
1 parent9db114d commit9b53e69

File tree

6 files changed

+142
-177
lines changed

6 files changed

+142
-177
lines changed

‎site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,30 @@ const meta: Meta<typeof FeatureStageBadge> = {
1212
exportdefaultmeta;
1313
typeStory=StoryObj<typeofFeatureStageBadge>;
1414

15-
exportconstMediumBeta:Story={
15+
exportconstSmallBeta:Story={
1616
args:{
17-
size:"md",
17+
size:"sm",
18+
contentType:"beta",
1819
},
1920
};
2021

21-
exportconstSmallBeta:Story={
22+
exportconstMediumBeta:Story={
2223
args:{
23-
size:"sm",
24+
size:"md",
25+
contentType:"beta",
2426
},
2527
};
2628

27-
exportconstLargeBeta:Story={
29+
exportconstSmallEarlyAccess:Story={
2830
args:{
29-
size:"lg",
31+
size:"sm",
32+
contentType:"early_access",
3033
},
3134
};
3235

33-
exportconstMediumExperimental:Story={
36+
exportconstMediumEarlyAccess:Story={
3437
args:{
3538
size:"md",
36-
contentType:"experimental",
39+
contentType:"early_access",
3740
},
3841
};
Lines changed: 43 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,86 @@
1-
importtype{Interpolation,Theme}from"@emotion/react";
2-
importLinkfrom"@mui/material/Link";
3-
import{visuallyHidden}from"@mui/utils";
4-
import{HelpTooltipContent}from"components/HelpTooltip/HelpTooltip";
5-
import{Popover,PopoverTrigger}from"components/deprecated/Popover/Popover";
1+
import{Link}from"components/Link/Link";
2+
import{
3+
Tooltip,
4+
TooltipContent,
5+
TooltipProvider,
6+
TooltipTrigger,
7+
}from"components/Tooltip/Tooltip";
68
importtype{FC,HTMLAttributes,ReactNode}from"react";
9+
import{cn}from"utils/cn";
710
import{docs}from"utils/docs";
811

912
/**
1013
* All types of feature that we are currently supporting. Defined as record to
1114
* ensure that we can't accidentally make typos when writing the badge text.
1215
*/
1316
exportconstfeatureStageBadgeTypes={
17+
early_access:"early access",
1418
beta:"beta",
15-
experimental:"experimental",
1619
}asconstsatisfiesRecord<string,ReactNode>;
1720

1821
typeFeatureStageBadgeProps=Readonly<
1922
Omit<HTMLAttributes<HTMLSpanElement>,"children">&{
2023
contentType:keyoftypeoffeatureStageBadgeTypes;
2124
labelText?:string;
22-
size?:"sm"|"md"|"lg";
23-
showTooltip?:boolean;
25+
size?:"sm"|"md";
2426
}
2527
>;
2628

29+
constbadgeColorClasses={
30+
early_access:"bg-surface-orange text-content-warning",
31+
beta:"bg-surface-sky text-highlight-sky",
32+
}asconst;
33+
34+
constbadgeSizeClasses={
35+
sm:"text-xs font-medium px-2 py-1",
36+
md:"text-base px-2 py-1",
37+
}asconst;
38+
2739
exportconstFeatureStageBadge:FC<FeatureStageBadgeProps>=({
2840
contentType,
2941
labelText="",
3042
size="md",
31-
showTooltip=true,// This is a temporary until the deprecated popover is removed
43+
className,
3244
...delegatedProps
3345
})=>{
46+
constcolorClasses=badgeColorClasses[contentType];
47+
constsizeClasses=badgeSizeClasses[size];
48+
3449
return(
35-
<Popovermode="hover">
36-
<PopoverTrigger>
37-
{({ isOpen})=>(
50+
<TooltipProviderdelayDuration={100}>
51+
<Tooltip>
52+
<TooltipTriggerasChild>
3853
<span
39-
css={[
40-
styles.badge,
41-
size==="sm"&&styles.badgeSmallText,
42-
size==="lg"&&styles.badgeLargeText,
43-
isOpen&&styles.badgeHover,
44-
]}
54+
className={cn(
55+
"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",
56+
sizeClasses,
57+
colorClasses,
58+
className,
59+
)}
4560
{...delegatedProps}
4661
>
47-
<spanstyle={visuallyHidden}> (This is a</span>
62+
<spanclassName="sr-only"> (This is a</span>
4863
<spanclassName="first-letter:uppercase">
4964
{labelText&&`${labelText} `}
5065
{featureStageBadgeTypes[contentType]}
5166
</span>
52-
<spanstyle={visuallyHidden}> feature)</span>
67+
<spanclassName="sr-only"> feature)</span>
5368
</span>
54-
)}
55-
</PopoverTrigger>
56-
57-
{showTooltip&&(
58-
<HelpTooltipContent
59-
anchorOrigin={{vertical:"bottom",horizontal:"center"}}
60-
transformOrigin={{vertical:"top",horizontal:"center"}}
61-
>
62-
<pcss={styles.tooltipDescription}>
69+
</TooltipTrigger>
70+
<TooltipContentalign="start"className="max-w-xs text-sm">
71+
<pclassName="m-0">
6372
This feature has not yet reached general availability (GA).
6473
</p>
6574

6675
<Link
6776
href={docs("/install/releases/feature-stages")}
68-
target="_blank"
69-
rel="noreferrer"
70-
css={styles.tooltipLink}
77+
className="font-semibold"
7178
>
7279
Learn about feature stages
73-
<spanstyle={visuallyHidden}> (link opens in new tab)</span>
80+
<spanclassName="sr-only"> (link opens in new tab)</span>
7481
</Link>
75-
</HelpTooltipContent>
76-
)}
77-
</Popover>
82+
</TooltipContent>
83+
</Tooltip>
84+
</TooltipProvider>
7885
);
7986
};
80-
81-
conststyles={
82-
badge:(theme)=>({
83-
// Base type is based on a span so that the element can be placed inside
84-
// more types of HTML elements without creating invalid markdown, but we
85-
// still want the default display behavior to be div-like
86-
display:"block",
87-
maxWidth:"fit-content",
88-
89-
// Base style assumes that medium badges will be the default
90-
fontSize:"0.75rem",
91-
92-
cursor:"default",
93-
flexShrink:0,
94-
padding:"4px 8px",
95-
lineHeight:1,
96-
whiteSpace:"nowrap",
97-
border:`1px solid${theme.branding.featureStage.border}`,
98-
color:theme.branding.featureStage.text,
99-
backgroundColor:theme.branding.featureStage.background,
100-
borderRadius:"6px",
101-
transition:
102-
"color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out",
103-
}),
104-
105-
badgeHover:(theme)=>({
106-
color:theme.branding.featureStage.hover.text,
107-
borderColor:theme.branding.featureStage.hover.border,
108-
backgroundColor:theme.branding.featureStage.hover.background,
109-
}),
110-
111-
badgeLargeText:{
112-
fontSize:"1rem",
113-
},
114-
115-
badgeSmallText:{
116-
// Have to beef up font weight so that the letters still maintain the
117-
// same relative thickness as all our other main UI text
118-
fontWeight:500,
119-
fontSize:"0.625rem",
120-
},
121-
122-
tooltipTitle:(theme)=>({
123-
color:theme.palette.text.primary,
124-
fontWeight:600,
125-
fontFamily:"inherit",
126-
fontSize:18,
127-
margin:0,
128-
lineHeight:1,
129-
paddingBottom:"8px",
130-
}),
131-
132-
tooltipDescription:{
133-
margin:0,
134-
lineHeight:1.4,
135-
paddingBottom:"8px",
136-
},
137-
138-
tooltipLink:{
139-
fontWeight:600,
140-
lineHeight:1.2,
141-
},
142-
}asconstsatisfiesRecord<string,Interpolation<Theme>>;

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

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import type { FriendlyDiagnostic, PreviewParameter } from "api/typesGenerated";
33
import{Alert}from"components/Alert/Alert";
44
import{ErrorAlert}from"components/Alert/ErrorAlert";
55
import{Avatar}from"components/Avatar/Avatar";
6+
import{Badge}from"components/Badge/Badge";
67
import{Button}from"components/Button/Button";
78
import{FeatureStageBadge}from"components/FeatureStageBadge/FeatureStageBadge";
89
import{Input}from"components/Input/Input";
910
import{Label}from"components/Label/Label";
1011
import{Link}from"components/Link/Link";
11-
import{Pill}from"components/Pill/Pill";
1212
import{
1313
Select,
1414
SelectContent,
@@ -353,21 +353,39 @@ export const CreateWorkspacePageViewExperimental: FC<
353353
</div>
354354
<divclassName="flex flex-col gap-6 max-w-screen-md mx-auto">
355355
<headerclassName="flex flex-col items-start gap-3 mt-10">
356-
<divclassName="flex items-center gap-2">
357-
<Avatar
358-
variant="icon"
359-
size="md"
360-
src={template.icon}
361-
fallback={template.name}
362-
/>
363-
<pclassName="text-base font-medium m-0">
364-
{template.display_name.length>0
365-
?template.display_name
366-
:template.name}
367-
</p>
356+
<divclassName="flex items-center gap-2 justify-between w-full">
357+
<spanclassName="flex items-center gap-2">
358+
<Avatar
359+
variant="icon"
360+
size="md"
361+
src={template.icon}
362+
fallback={template.name}
363+
/>
364+
<pclassName="text-base font-medium m-0">
365+
{template.display_name.length>0
366+
?template.display_name
367+
:template.name}
368+
</p>
369+
{template.deprecated&&(
370+
<Badgevariant="warning"size="sm">
371+
Deprecated
372+
</Badge>
373+
)}
374+
</span>
375+
{experimentalFormContext&&(
376+
<Button
377+
size="sm"
378+
variant="outline"
379+
onClick={experimentalFormContext.toggleOptedOut}
380+
>
381+
<Undo2/>
382+
Classic workspace creation
383+
</Button>
384+
)}
368385
</div>
369386
<spanclassName="flex flex-row items-center gap-2">
370387
<h1className="text-3xl font-semibold m-0">New workspace</h1>
388+
371389
<TooltipProviderdelayDuration={100}>
372390
<Tooltip>
373391
<TooltipTriggerasChild>
@@ -389,19 +407,11 @@ export const CreateWorkspacePageViewExperimental: FC<
389407
</Tooltip>
390408
</TooltipProvider>
391409
</span>
392-
393-
{template.deprecated&&<Pilltype="warning">Deprecated</Pill>}
394-
395-
{experimentalFormContext&&(
396-
<Button
397-
size="sm"
398-
variant="outline"
399-
onClick={experimentalFormContext.toggleOptedOut}
400-
>
401-
<Undo2/>
402-
Use the classic workspace creation flow
403-
</Button>
404-
)}
410+
<FeatureStageBadge
411+
contentType={"early_access"}
412+
size="sm"
413+
labelText="Dynamic parameters"
414+
/>
405415
</header>
406416

407417
<form
@@ -555,7 +565,7 @@ export const CreateWorkspacePageViewExperimental: FC<
555565
<divclassName="flex flex-col gap-2">
556566
<divclassName="flex gap-2 items-center">
557567
<LabelclassName="text-sm">Preset</Label>
558-
<FeatureStageBadgecontentType={"beta"}size="md"/>
568+
<FeatureStageBadgecontentType={"beta"}size="sm"/>
559569
</div>
560570
<divclassName="flex flex-col gap-4">
561571
<divclassName="max-w-lg">

‎site/src/pages/UserSettingsPage/Section.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const Section: FC<SectionProps> = ({
5353
{featureStage&&(
5454
<FeatureStageBadge
5555
contentType={featureStage}
56-
size="lg"
56+
size="md"
5757
css={{marginBottom:"5px"}}
5858
/>
5959
)}

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -117,18 +117,18 @@ export const WorkspaceParametersPageView: FC<
117117
return(
118118
<divclassName="flex flex-col gap-10">
119119
<headerclassName="flex flex-col items-start gap-2">
120-
<spanclassName="flex flex-row justify-between items-center gap-2">
120+
<spanclassName="flex flex-row justify-betweenw-fullitems-center gap-2">
121121
<h1className="text-3xl m-0">Workspace parameters</h1>
122+
{experimentalFormContext&&(
123+
<ShadcnButton
124+
size="sm"
125+
variant="outline"
126+
onClick={experimentalFormContext.toggleOptedOut}
127+
>
128+
Try out the new workspace parameters ✨
129+
</ShadcnButton>
130+
)}
122131
</span>
123-
{experimentalFormContext&&(
124-
<ShadcnButton
125-
size="sm"
126-
variant="outline"
127-
onClick={experimentalFormContext.toggleOptedOut}
128-
>
129-
Try out the new workspace parameters ✨
130-
</ShadcnButton>
131-
)}
132132
</header>
133133

134134
{submitError&&!isApiValidationError(submitError) ?(

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp