Skip to content

Commit 77d27cd

Browse files
f0sself0ssel
committed
before form
1 parent 58532a5 commit 77d27cd

File tree

3 files changed

+81
-20
lines changed

3 files changed

+81
-20
lines changed

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

+2-4
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: "8px 8px 8px 8px",
174174
gap: 8,
175175
cursor: "default",
176176
}}
@@ -183,10 +183,8 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
183183
});
184184

185185
type BooleanPillProps = Omit<
186-
ComponentProps<typeof Pill>,
187-
"children" | "icon" | "value"
186+
ComponentProps<typeof Pill>, "icon" | "value"
188187
> & {
189-
children: string;
190188
value: boolean;
191189
};
192190

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

+22-3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import Tooltip from "@mui/material/Tooltip";
2323
import Sell from "@mui/icons-material/Sell";
2424
import { FC } from "react";
2525
import { additionalTags } from "utils/provisionertags";
26+
import CloseIcon from '@mui/icons-material/Close';
27+
import IconButton from "@mui/material/IconButton";
2628

2729
export const ProvisionerDaemonsPage = () => {
2830
const healthStatus = useOutletContext<HealthcheckReport>();
@@ -188,13 +190,30 @@ interface ProvisionerTagProps {
188190
onDelete?: () => void;
189191
}
190192

191-
export const ProvisionerTag : FC<ProvisionerTagProps> = ({ k, v }) => {
193+
export const ProvisionerTag : FC<ProvisionerTagProps> = ({ k, v, onDelete}) => {
192194
const { valid, value: boolValue } = parseBool(v);
193195
const kv = `${k}: ${v}`;
196+
const content = (
197+
<>
198+
{onDelete ? (
199+
<>
200+
{kv}
201+
<IconButton aria-label="delete" size="small" color="secondary">
202+
<CloseIcon fontSize="inherit" css={{
203+
width: 14,
204+
height: 14,
205+
}}/>
206+
</IconButton>
207+
</>
208+
) : (
209+
<>{kv}</>
210+
)}
211+
</>
212+
)
194213
if (valid) {
195-
return <BooleanPill value={boolValue}>{kv}</BooleanPill>;
214+
return <BooleanPill value={boolValue}>{content}</BooleanPill>;
196215
}
197-
return <Pill icon={<Sell />}>{kv}</Pill>;
216+
return <Pill icon={<Sell />}>{content}</Pill>;
198217
};
199218

200219
export default ProvisionerDaemonsPage;

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

+57-13
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,13 @@ import {
5959
PopoverContent,
6060
PopoverTrigger,
6161
} from "components/Popover/Popover";
62-
import { HelpTooltipTitle, HelpTooltipText, HelpTooltipLinksGroup, HelpTooltipLink } from "components/HelpTooltip/HelpTooltip";
63-
import { docs } from "utils/docs";
62+
import { HelpTooltipTitle, HelpTooltipText, } from "components/HelpTooltip/HelpTooltip";
6463
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
6564
import { ProvisionerTag } from "pages/HealthPage/ProvisionerDaemonsPage";
6665
import { Stack } from "components/Stack/Stack";
6766
import { additionalTags } from "utils/provisionertags";
67+
import TextField from "@mui/material/TextField";
68+
import AddIcon from '@mui/icons-material/Add';
6869

6970
type Tab = "logs" | "resources" | undefined; // Undefined is to hide the tab
7071

@@ -194,8 +195,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
194195
}, [buildLogs]);
195196

196197
const disabled = false;
197-
const extraTags = additionalTags(templateVersion.job.tags);
198-
// const extraTags = {
198+
const [extraTags, setExtraTags] = useState(additionalTags(templateVersion.job.tags));
199+
const [keyInput, setKeyInput] = useState("");
200+
const [valueInput, setValueInput] = useState("");
201+
// extraTags = {
199202
// "key1": "value1",
200203
// "1": "2",
201204
// "3": "true",
@@ -306,16 +309,57 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
306309
>
307310
<HelpTooltipTitle>Provisioner Tags</HelpTooltipTitle>
308311
<HelpTooltipText>
309-
{Object.keys(extraTags).length > 0 ? (
310-
<Stack direction="row" spacing={1} wrap="wrap">
311-
{Object.keys(extraTags).map((k) =>
312-
<ProvisionerTag key={k} k={k} v={extraTags[k]} />
313-
)}
312+
<Stack>
313+
{Object.keys(extraTags).length > 0 ? (
314+
<Stack direction="row" spacing={1} wrap="wrap">
315+
{Object.keys(extraTags).map((k) =>
316+
<ProvisionerTag key={k} k={k} v={extraTags[k]} onDelete={() => {
317+
return
318+
}}/>
319+
)}
320+
</Stack>
321+
) : ("No tags")}
322+
323+
<Stack direction="row">
324+
<TextField
325+
size="small"
326+
name="key-input"
327+
autoComplete="off"
328+
id="key-input"
329+
value={keyInput}
330+
onChange={(event) => {
331+
setKeyInput(event.target.value);
332+
}}
333+
label="Key"
334+
/>
335+
<TextField
336+
size="small"
337+
name="value-input"
338+
autoComplete="off"
339+
id="value-input"
340+
value={valueInput}
341+
onChange={(event) => {
342+
setValueInput(event.target.value);
343+
}}
344+
label="Value"
345+
/>
346+
<Button
347+
onClick={() => {
348+
if (keyInput && valueInput) {
349+
const newTags = {...extraTags};
350+
newTags[keyInput] = valueInput;
351+
setExtraTags(newTags);
352+
setKeyInput("");
353+
setValueInput("");
354+
}
355+
}}
356+
variant="contained"
357+
color="secondary"
358+
>
359+
<AddIcon/>
360+
</Button>
361+
</Stack>
314362
</Stack>
315-
) : (
316-
"No tags"
317-
)}
318-
319363
</HelpTooltipText>
320364
</div>
321365
</PopoverContent>

0 commit comments

Comments
 (0)