Jan 18, 2024 · Jan 12, 2024 · Jan 16, 2024 · Jan 17, 2024 · Jan 17, 2024 · Jan 17, 2024
diff --git a/site/package.json b/site/package.json
    "@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",
    "@storybook/react": "7.5.2",
    "@storybook/react-vite": "7.5.2",
    "@swc/core": "1.3.38",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
        border: `1px solid ${theme.palette.divider}`,
        fontSize: 12,
        fontWeight: 500,
        padding:"8px 16px 8px 8px",
        padding:8,
        gap: 8,
        cursor: "default",
      }}
  );
 });

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

diff --git a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
 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>();
                      </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>

  }
 };

 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;
diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx
 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) {
    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 = {};
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 BrunoQuaresmaJan 18, 2024 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 ContributorAuthor f0sselJan 18, 2024 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
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
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 DownExpand 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 DownExpand 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;
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 BrunoQuaresmaJan 18, 2024 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 ContributorAuthor f0sselJan 18, 2024 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 = {};