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 all commits
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
1 change: 1 addition & 0 deletions site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@
"@storybook/addon-links": "7.5.2",
"@storybook/addon-mdx-gfm": "7.5.2",
"@storybook/addon-themes": "7.6.4",
"@storybook/preview-api": "7.6.9",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does it do?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for the useArgs hook I'm using to update state of a rendered component in storybook.

"@storybook/react": "7.5.2",
"@storybook/react-vite": "7.5.2",
"@swc/core": "1.3.38",
Expand Down
88 changes: 71 additions & 17 deletions site/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 2 additions & 6 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: 8,
gap: 8,
cursor: "default",
}}
Expand All @@ -182,11 +182,7 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
);
});

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

Expand Down
44 changes: 38 additions & 6 deletions site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ import Person from "@mui/icons-material/Person";
import SwapHoriz from "@mui/icons-material/SwapHoriz";
import Tooltip from "@mui/material/Tooltip";
import Sell from "@mui/icons-material/Sell";
import { FC } from "react";
import CloseIcon from "@mui/icons-material/Close";
import IconButton from "@mui/material/IconButton";

export const ProvisionerDaemonsPage = () => {
const healthStatus = useOutletContext<HealthcheckReport>();
Expand Down Expand Up @@ -129,9 +132,9 @@ export const ProvisionerDaemonsPage = () => {
</span>
</Pill>
</Tooltip>
{Object.keys(extraTags).map((k) =>
renderTag(k, extraTags[k]),
)}
{Object.keys(extraTags).map((k) => (
<ProvisionerTag key={k} k={k} v={extraTags[k]} />
))}
</div>
</header>

Expand Down Expand Up @@ -188,13 +191,42 @@ const parseBool = (s: string): { valid: boolean; value: boolean } => {
}
};

const renderTag = (k: string, v: string) => {
interface ProvisionerTagProps {
k: string;
v: string;
onDelete?: (key: string) => void;
}

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-" + k}
size="small"
color="secondary"
onClick={() => {
onDelete(k);
}}
>
<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;
40 changes: 40 additions & 0 deletions site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import type { Meta, StoryObj } from "@storybook/react";
import { chromatic } from "testHelpers/chromatic";
import { MockTemplateVersion } from "testHelpers/entities";
import { ProvisionerTagsPopover } from "./ProvisionerTagsPopover";
import { useArgs } from "@storybook/preview-api";

const meta: Meta<typeof ProvisionerTagsPopover> = {
title: "component/ProvisionerTagsPopover",
parameters: {
chromatic,
layout: "centered",
},
component: ProvisionerTagsPopover,
args: {
tags: MockTemplateVersion.job.tags,
},
render: function Render(args) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you are passing the component you don't need this render function at all. At least if you are using it just to test with Chromatic.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted this to function in Storybook live, and my understanding was that this was the way to manipulate args getting passed into the component with useArgs().

const [{ tags }, updateArgs] = useArgs();

return (
<ProvisionerTagsPopover
{...args}
tags={tags}
onSubmit={({ key, value }) => {
updateArgs({ tags: { ...tags, [key]: value } });
}}
onDelete={(key) => {
const newTags = { ...tags };
delete newTags[key];
updateArgs({ tags: newTags });
}}
/>
);
},
};

export default meta;
type Story = StoryObj<typeof ProvisionerTagsPopover>;

export const Example: Story = {};
Loading