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

Commit38ad8d1

Browse files
feat: add provisioner tags field on template creation (#16656)
Close#15426Demo:https://github.com/user-attachments/assets/a7901908-8714-4a55-8d4f-c27bf7743111
1 parent6498464 commit38ad8d1

14 files changed

+393
-260
lines changed

‎site/src/components/Input/Input.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Input = forwardRef<
1818
file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-content-primary
1919
placeholder:text-content-secondary
2020
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
21-
disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`,
21+
disabled:cursor-not-allowed disabled:opacity-50 md:text-sm text-inherit`,
2222
className,
2323
)}
2424
ref={ref}

‎site/src/modules/provisioners/ProvisionerAlert.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,13 @@ export const ProvisionerAlert: FC<ProvisionerAlertProps> = ({
5252
<AlertTitle>{title}</AlertTitle>
5353
<AlertDetail>
5454
<div>{detail}</div>
55-
<Stackdirection="row"spacing={1}wrap="wrap">
55+
<divclassName="flex items-center gap-2 flex-wrap mt-2">
5656
{Object.entries(tags??{})
5757
.filter(([key])=>key!=="owner")
5858
.map(([key,value])=>(
5959
<ProvisionerTagkey={key}tagName={key}tagValue={value}/>
6060
))}
61-
</Stack>
61+
</div>
6262
</AlertDetail>
6363
</Alert>
6464
);

‎site/src/modules/provisioners/ProvisionerTag.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,14 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
4545
<>
4646
{kv}
4747
<IconButton
48-
aria-label={`delete-${tagName}`}
4948
size="small"
5049
color="secondary"
5150
onClick={()=>{
5251
onDelete(tagName);
5352
}}
5453
>
5554
<CloseIconfontSize="inherit"css={{width:14,height:14}}/>
55+
<spanclassName="sr-only">Delete{tagName}</span>
5656
</IconButton>
5757
</>
5858
) :(
@@ -62,7 +62,7 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
6262
return<BooleanPillvalue={boolValue}>{content}</BooleanPill>;
6363
}
6464
return(
65-
<Pillsize="lg"icon={<Sell/>}>
65+
<Pillsize="lg"icon={<Sell/>}data-testid={`tag-${tagName}`}>
6666
{content}
6767
</Pill>
6868
);
Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{expect,userEvent,within}from"@storybook/test";
3+
importtype{ProvisionerDaemon}from"api/typesGenerated";
4+
import{typeFC,useState}from"react";
5+
import{ProvisionerTagsField}from"./ProvisionerTagsField";
6+
7+
constmeta:Meta<typeofProvisionerTagsField>={
8+
title:"modules/provisioners/ProvisionerTagsField",
9+
component:ProvisionerTagsField,
10+
args:{
11+
value:{},
12+
},
13+
};
14+
15+
exportdefaultmeta;
16+
typeStory=StoryObj<typeofProvisionerTagsField>;
17+
18+
exportconstEmpty:Story={
19+
args:{
20+
value:{},
21+
},
22+
};
23+
24+
exportconstWithInitialValue:Story={
25+
args:{
26+
value:{
27+
cluster:"dogfood-2",
28+
env:"gke",
29+
scope:"organization",
30+
},
31+
},
32+
};
33+
34+
typeStatefulProvisionerTagsFieldProps={
35+
initialValue?:ProvisionerDaemon["tags"];
36+
};
37+
38+
constStatefulProvisionerTagsField:FC<StatefulProvisionerTagsFieldProps>=({
39+
initialValue={},
40+
})=>{
41+
const[value,setValue]=useState<ProvisionerDaemon["tags"]>(initialValue);
42+
return<ProvisionerTagsFieldvalue={value}onChange={setValue}/>;
43+
};
44+
45+
exportconstOnOverwriteOwner:Story={
46+
play:async({ canvasElement})=>{
47+
constuser=userEvent.setup();
48+
constcanvas=within(canvasElement);
49+
constkeyInput=canvas.getByLabelText("Tag key");
50+
constvalueInput=canvas.getByLabelText("Tag value");
51+
constaddButton=canvas.getByRole("button",{name:"Add tag"});
52+
53+
awaituser.type(keyInput,"owner");
54+
awaituser.type(valueInput,"dogfood-2");
55+
awaituser.click(addButton);
56+
57+
awaitcanvas.findByText("Cannot override owner tag");
58+
},
59+
};
60+
61+
exportconstOnInvalidScope:Story={
62+
play:async({ canvasElement})=>{
63+
constuser=userEvent.setup();
64+
constcanvas=within(canvasElement);
65+
constkeyInput=canvas.getByLabelText("Tag key");
66+
constvalueInput=canvas.getByLabelText("Tag value");
67+
constaddButton=canvas.getByRole("button",{name:"Add tag"});
68+
69+
awaituser.type(keyInput,"scope");
70+
awaituser.type(valueInput,"invalid");
71+
awaituser.click(addButton);
72+
73+
awaitcanvas.findByText("Scope value must be 'organization' or 'user'");
74+
},
75+
};
76+
77+
exportconstOnAddTag:Story={
78+
render:()=><StatefulProvisionerTagsField/>,
79+
play:async({ canvasElement})=>{
80+
constuser=userEvent.setup();
81+
constcanvas=within(canvasElement);
82+
constkeyInput=canvas.getByLabelText("Tag key");
83+
constvalueInput=canvas.getByLabelText("Tag value");
84+
constaddButton=canvas.getByRole("button",{name:"Add tag"});
85+
86+
awaituser.type(keyInput,"cluster");
87+
awaituser.type(valueInput,"dogfood-2");
88+
awaituser.click(addButton);
89+
90+
constaddedTag=awaitcanvas.findByTestId("tag-cluster");
91+
awaitexpect(addedTag).toHaveTextContent("cluster dogfood-2");
92+
},
93+
};
94+
95+
exportconstOnRemoveTag:Story={
96+
render:()=>(
97+
<StatefulProvisionerTagsFieldinitialValue={{cluster:"dogfood-2"}}/>
98+
),
99+
play:async({ canvasElement})=>{
100+
constuser=userEvent.setup();
101+
constcanvas=within(canvasElement);
102+
constremoveButton=canvas.getByRole("button",{name:"Delete cluster"});
103+
104+
awaituser.click(removeButton);
105+
106+
awaitexpect(canvas.queryByTestId("tag-cluster")).toBeNull();
107+
},
108+
};
Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
importTextFieldfrom"@mui/material/TextField";
2+
importtype{ProvisionerDaemon}from"api/typesGenerated";
3+
import{Button}from"components/Button/Button";
4+
import{Input}from"components/Input/Input";
5+
import{PlusIcon}from"lucide-react";
6+
import{ProvisionerTag}from"modules/provisioners/ProvisionerTag";
7+
import{typeFC,useRef,useState}from"react";
8+
import*asYupfrom"yup";
9+
10+
// Users can't delete these tags
11+
constREQUIRED_TAGS=["scope","organization","user"];
12+
13+
// Users can't override these tags
14+
constIMMUTABLE_TAGS=["owner"];
15+
16+
typeProvisionerTagsFieldProps={
17+
value:ProvisionerDaemon["tags"];
18+
onChange:(value:ProvisionerDaemon["tags"])=>void;
19+
};
20+
21+
exportconstProvisionerTagsField:FC<ProvisionerTagsFieldProps>=({
22+
value:fieldValue,
23+
onChange,
24+
})=>{
25+
return(
26+
<divclassName="flex flex-col gap-3">
27+
<divclassName="flex items-center gap-2 flex-wrap">
28+
{Object.entries(fieldValue)
29+
// Filter out since users cannot override it
30+
.filter(([key])=>!IMMUTABLE_TAGS.includes(key))
31+
.map(([key,value])=>{
32+
constonDelete=(key:string)=>{
33+
const{[key]:_, ...newFieldValue}=fieldValue;
34+
onChange(newFieldValue);
35+
};
36+
37+
return(
38+
<ProvisionerTag
39+
key={key}
40+
tagName={key}
41+
tagValue={value}
42+
// Required tags can't be deleted
43+
onDelete={REQUIRED_TAGS.includes(key) ?undefined :onDelete}
44+
/>
45+
);
46+
})}
47+
</div>
48+
49+
<NewTagControl
50+
onAdd={(tag)=>{
51+
onChange({ ...fieldValue,[tag.key]:tag.value});
52+
}}
53+
/>
54+
</div>
55+
);
56+
};
57+
58+
constnewTagSchema=Yup.object({
59+
key:Yup.string()
60+
.required("Key is required")
61+
.notOneOf(["owner"],"Cannot override owner tag"),
62+
value:Yup.string()
63+
.required("Value is required")
64+
.when("key",([key],schema)=>{
65+
if(key==="scope"){
66+
returnschema.oneOf(
67+
["organization","scope"],
68+
"Scope value must be 'organization' or 'user'",
69+
);
70+
}
71+
72+
returnschema;
73+
}),
74+
});
75+
76+
typeTag={key:string;value:string};
77+
78+
typeNewTagControlProps={
79+
onAdd:(tag:Tag)=>void;
80+
};
81+
82+
constNewTagControl:FC<NewTagControlProps>=({ onAdd})=>{
83+
constkeyInputRef=useRef<HTMLInputElement>(null);
84+
const[error,setError]=useState<string>();
85+
const[newTag,setNewTag]=useState<Tag>({
86+
key:"",
87+
value:"",
88+
});
89+
90+
constaddNewTag=async()=>{
91+
try{
92+
awaitnewTagSchema.validate(newTag);
93+
onAdd(newTag);
94+
setNewTag({key:"",value:""});
95+
keyInputRef.current?.focus();
96+
}catch(e){
97+
constisValidationError=einstanceofYup.ValidationError;
98+
99+
if(!isValidationError){
100+
throwe;
101+
}
102+
103+
if(einstanceofYup.ValidationError){
104+
setError(e.errors[0]);
105+
}
106+
}
107+
};
108+
109+
constaddNewTagOnEnter=(e:React.KeyboardEvent<HTMLInputElement>)=>{
110+
if(e.key==="Enter"){
111+
e.preventDefault();
112+
e.stopPropagation();
113+
addNewTag();
114+
}
115+
};
116+
117+
return(
118+
<divclassName="flex flex-col gap-1 max-w-72">
119+
<divclassName="flex items-center gap-2">
120+
<labelclassName="sr-only"htmlFor="tag-key-input">
121+
Tag key
122+
</label>
123+
<TextField
124+
inputRef={keyInputRef}
125+
size="small"
126+
id="tag-key-input"
127+
name="key"
128+
placeholder="Key"
129+
value={newTag.key}
130+
onChange={(e)=>setNewTag({ ...newTag,key:e.target.value.trim()})}
131+
onKeyDown={addNewTagOnEnter}
132+
/>
133+
134+
<labelclassName="sr-only"htmlFor="tag-value-input">
135+
Tag value
136+
</label>
137+
<TextField
138+
size="small"
139+
id="tag-value-input"
140+
name="value"
141+
placeholder="Value"
142+
value={newTag.value}
143+
onChange={(e)=>
144+
setNewTag({ ...newTag,value:e.target.value.trim()})
145+
}
146+
onKeyDown={addNewTagOnEnter}
147+
/>
148+
149+
<Button
150+
className="flex-shrink-0"
151+
size="icon"
152+
type="button"
153+
onClick={addNewTag}
154+
>
155+
<PlusIcon/>
156+
<spanclassName="sr-only">Add tag</span>
157+
</Button>
158+
</div>
159+
{error&&(
160+
<spanclassName="text-xs text-content-destructive">{error}</span>
161+
)}
162+
</div>
163+
);
164+
};

0 commit comments

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