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

Commitbf0a6fc

Browse files
authored
feat: manage provisioner tags in template editor (#11600)
1 parent9ed3487 commitbf0a6fc

File tree

10 files changed

+495
-43
lines changed

10 files changed

+495
-43
lines changed

‎site/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@
106106
"@storybook/addon-links":"7.5.2",
107107
"@storybook/addon-mdx-gfm":"7.5.2",
108108
"@storybook/addon-themes":"7.6.4",
109+
"@storybook/preview-api":"7.6.9",
109110
"@storybook/react":"7.5.2",
110111
"@storybook/react-vite":"7.5.2",
111112
"@swc/core":"1.3.38",

‎site/pnpm-lock.yaml‎

Lines changed: 71 additions & 17 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎site/src/pages/HealthPage/Content.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
170170
border:`1px solid${theme.palette.divider}`,
171171
fontSize:12,
172172
fontWeight:500,
173-
padding:"8px 16px 8px 8px",
173+
padding:8,
174174
gap:8,
175175
cursor:"default",
176176
}}
@@ -182,11 +182,7 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
182182
);
183183
});
184184

185-
typeBooleanPillProps=Omit<
186-
ComponentProps<typeofPill>,
187-
"children"|"icon"|"value"
188-
>&{
189-
children:string;
185+
typeBooleanPillProps=Omit<ComponentProps<typeofPill>,"icon"|"value">&{
190186
value:boolean;
191187
};
192188

‎site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx‎

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ import Person from "@mui/icons-material/Person";
2121
importSwapHorizfrom"@mui/icons-material/SwapHoriz";
2222
importTooltipfrom"@mui/material/Tooltip";
2323
importSellfrom"@mui/icons-material/Sell";
24+
import{FC}from"react";
25+
importCloseIconfrom"@mui/icons-material/Close";
26+
importIconButtonfrom"@mui/material/IconButton";
2427

2528
exportconstProvisionerDaemonsPage=()=>{
2629
consthealthStatus=useOutletContext<HealthcheckReport>();
@@ -129,9 +132,9 @@ export const ProvisionerDaemonsPage = () => {
129132
</span>
130133
</Pill>
131134
</Tooltip>
132-
{Object.keys(extraTags).map((k)=>
133-
renderTag(k,extraTags[k]),
134-
)}
135+
{Object.keys(extraTags).map((k)=>(
136+
<ProvisionerTagkey={k}k={k}v={extraTags[k]}/>
137+
))}
135138
</div>
136139
</header>
137140

@@ -188,13 +191,42 @@ const parseBool = (s: string): { valid: boolean; value: boolean } => {
188191
}
189192
};
190193

191-
constrenderTag=(k:string,v:string)=>{
194+
interfaceProvisionerTagProps{
195+
k:string;
196+
v:string;
197+
onDelete?:(key:string)=>void;
198+
}
199+
200+
exportconstProvisionerTag:FC<ProvisionerTagProps>=({ k, v, onDelete})=>{
192201
const{ valid,value:boolValue}=parseBool(v);
193202
constkv=`${k}:${v}`;
203+
constcontent=onDelete ?(
204+
<>
205+
{kv}
206+
<IconButton
207+
aria-label={"delete-"+k}
208+
size="small"
209+
color="secondary"
210+
onClick={()=>{
211+
onDelete(k);
212+
}}
213+
>
214+
<CloseIcon
215+
fontSize="inherit"
216+
css={{
217+
width:14,
218+
height:14,
219+
}}
220+
/>
221+
</IconButton>
222+
</>
223+
) :(
224+
kv
225+
);
194226
if(valid){
195-
return<BooleanPillvalue={boolValue}>{kv}</BooleanPill>;
227+
return<BooleanPillvalue={boolValue}>{content}</BooleanPill>;
196228
}
197-
return<Pillicon={<Sell/>}>{kv}</Pill>;
229+
return<Pillicon={<Sell/>}>{content}</Pill>;
198230
};
199231

200232
exportdefaultProvisionerDaemonsPage;
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{chromatic}from"testHelpers/chromatic";
3+
import{MockTemplateVersion}from"testHelpers/entities";
4+
import{ProvisionerTagsPopover}from"./ProvisionerTagsPopover";
5+
import{useArgs}from"@storybook/preview-api";
6+
7+
constmeta:Meta<typeofProvisionerTagsPopover>={
8+
title:"component/ProvisionerTagsPopover",
9+
parameters:{
10+
chromatic,
11+
layout:"centered",
12+
},
13+
component:ProvisionerTagsPopover,
14+
args:{
15+
tags:MockTemplateVersion.job.tags,
16+
},
17+
render:functionRender(args){
18+
const[{ tags},updateArgs]=useArgs();
19+
20+
return(
21+
<ProvisionerTagsPopover
22+
{...args}
23+
tags={tags}
24+
onSubmit={({ key, value})=>{
25+
updateArgs({tags:{ ...tags,[key]:value}});
26+
}}
27+
onDelete={(key)=>{
28+
constnewTags={ ...tags};
29+
deletenewTags[key];
30+
updateArgs({tags:newTags});
31+
}}
32+
/>
33+
);
34+
},
35+
};
36+
37+
exportdefaultmeta;
38+
typeStory=StoryObj<typeofProvisionerTagsPopover>;
39+
40+
exportconstExample:Story={};

0 commit comments

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