Skip to content

feat: manage provisioner tags in template editor #11600

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 11 commits into from
Jan 18, 2024
Merged

feat: manage provisioner tags in template editor #11600

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
58532a5
feat: manage provisioner tags in template editor
f0ssel Jan 12, 2024
77d27cd
before form
f0ssel Jan 16, 2024
9de069f
get mvp working
f0ssel Jan 17, 2024
07b2241
pr comments
f0ssel Jan 17, 2024
94fecc5
fmt
f0ssel Jan 17, 2024
95159b9
remove file
f0ssel Jan 17, 2024
b62fd65
add storybook
f0ssel Jan 17, 2024
c7d327d
Add jest tests
f0ssel Jan 18, 2024
6d0c615
fmt
f0ssel Jan 18, 2024
4b28359
fix comment
f0ssel Jan 18, 2024
cad35c7
rename
f0ssel Jan 18, 2024
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
before form
  • Loading branch information
@f0ssel
f0ssel committed Jan 16, 2024
commit 77d27cd4f7571fc3d44ea2de16de4d8a35c54e33
6 changes: 2 additions & 4 deletions site/src/pages/HealthPage/Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
border: `1px solid ${theme.palette.divider}`,
fontSize: 12,
fontWeight: 500,
padding: "8px 16px 8px 8px",
padding: "8px 8px 8px 8px",
gap: 8,
cursor: "default",
}}
Expand All @@ -183,10 +183,8 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
});

type BooleanPillProps = Omit<
ComponentProps<typeof Pill>,
"children" | "icon" | "value"
ComponentProps<typeof Pill>, "icon" | "value"
> & {
children: string;
value: boolean;
};

Expand Down
25 changes: 22 additions & 3 deletions site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ import Tooltip from "@mui/material/Tooltip";
import Sell from "@mui/icons-material/Sell";
import { FC } from "react";
import { additionalTags } from "utils/provisionertags";
import CloseIcon from '@mui/icons-material/Close';
import IconButton from "@mui/material/IconButton";

export const ProvisionerDaemonsPage = () => {
const healthStatus = useOutletContext<HealthcheckReport>();
Expand Down Expand Up @@ -188,13 +190,30 @@ interface ProvisionerTagProps {
onDelete?: () => void;
}

export const ProvisionerTag : FC<ProvisionerTagProps> = ({ k, v }) => {
export const ProvisionerTag : FC<ProvisionerTagProps> = ({ k, v, onDelete}) => {
const { valid, value: boolValue } = parseBool(v);
const kv = `${k}: ${v}`;
const content = (
<>
{onDelete ? (
<>
{kv}
<IconButton aria-label="delete" size="small" color="secondary">
<CloseIcon fontSize="inherit" css={{
width: 14,
height: 14,
}}/>
</IconButton>
</>
) : (
<>{kv}</>
)}
</>
)
if (valid) {
return <BooleanPill value={boolValue}>{kv}</BooleanPill>;
return <BooleanPill value={boolValue}>{content}</BooleanPill>;
}
return <Pill icon={<Sell />}>{kv}</Pill>;
return <Pill icon={<Sell />}>{content}</Pill>;
};

export default ProvisionerDaemonsPage;
70 changes: 57 additions & 13 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,13 @@ import {
PopoverContent,
PopoverTrigger,
} from "components/Popover/Popover";
import { HelpTooltipTitle, HelpTooltipText, HelpTooltipLinksGroup, HelpTooltipLink } from "components/HelpTooltip/HelpTooltip";
import { docs } from "utils/docs";
import { HelpTooltipTitle, HelpTooltipText, } from "components/HelpTooltip/HelpTooltip";
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
import { ProvisionerTag } from "pages/HealthPage/ProvisionerDaemonsPage";
import { Stack } from "components/Stack/Stack";
import { additionalTags } from "utils/provisionertags";
import TextField from "@mui/material/TextField";
import AddIcon from '@mui/icons-material/Add';

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

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

const disabled = false;
const extraTags = additionalTags(templateVersion.job.tags);
// const extraTags = {
const [extraTags, setExtraTags] = useState(additionalTags(templateVersion.job.tags));
const [keyInput, setKeyInput] = useState("");
const [valueInput, setValueInput] = useState("");
// extraTags = {
// "key1": "value1",
// "1": "2",
// "3": "true",
Expand Down Expand Up @@ -306,16 +309,57 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
>
<HelpTooltipTitle>Provisioner Tags</HelpTooltipTitle>
<HelpTooltipText>
{Object.keys(extraTags).length > 0 ? (
<Stack direction="row" spacing={1} wrap="wrap">
{Object.keys(extraTags).map((k) =>
<ProvisionerTag key={k} k={k} v={extraTags[k]} />
)}
<Stack>
{Object.keys(extraTags).length > 0 ? (
<Stack direction="row" spacing={1} wrap="wrap">
{Object.keys(extraTags).map((k) =>
<ProvisionerTag key={k} k={k} v={extraTags[k]} onDelete={() => {
return
}}/>
)}
</Stack>
) : ("No tags")}

<Stack direction="row">
<TextField
size="small"
name="key-input"
autoComplete="off"
id="key-input"
value={keyInput}
onChange={(event) => {
setKeyInput(event.target.value);
}}
label="Key"
/>
<TextField
size="small"
name="value-input"
autoComplete="off"
id="value-input"
value={valueInput}
onChange={(event) => {
setValueInput(event.target.value);
}}
label="Value"
/>
<Button
onClick={() => {
if (keyInput && valueInput) {
const newTags = {...extraTags};
newTags[keyInput] = valueInput;
setExtraTags(newTags);
setKeyInput("");
setValueInput("");
}
}}
variant="contained"
color="secondary"
>
<AddIcon/>
</Button>
</Stack>
</Stack>
) : (
"No tags"
)}

</HelpTooltipText>
</div>
</PopoverContent>
Expand Down