add storybook

f0ssel · f0ssel · commit b62fd65352a5 · 2024-01-17T20:21:52.000Z
diff --git a/site/package.json b/site/package.json
@@ -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",
     "@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/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx
@@ -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: "pages/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 = {};
diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
@@ -40,13 +40,13 @@ const validationSchema = Yup.object({
     }),
 });
 
-interface ProviderTagsPopoverProps {
+interface ProvisionerTagsPopoverProps {
   tags: Record<string, string>;
   onSubmit: (values: typeof initialValues) => void;
   onDelete: (key: string) => void;
 }
 
-export const ProviderTagsPopover: FC<ProviderTagsPopoverProps> = ({
+export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
   tags,
   onSubmit,
   onDelete,
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -54,7 +54,7 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { Sidebar } from "components/FullPageLayout/Sidebar";
 import ButtonGroup from "@mui/material/ButtonGroup";
-import { ProviderTagsPopover } from "./ProvisionerTagsPopover";
+import { ProvisionerTagsPopover } from "./ProvisionerTagsPopover";
 
 type Tab = "logs" | "resources" | undefined; // Undefined is to hide the tab
 
@@ -266,7 +266,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               >
                 Build
               </TopbarButton>
-              <ProviderTagsPopover
+              <ProvisionerTagsPopover
                 tags={provisionerTags}
                 onSubmit={({ key, value }) => {
                   onUpdateProvisionerTags({
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -355,7 +355,14 @@ export const MockProvisionerJob: TypesGen.ProvisionerJob = {
   status: "succeeded",
   file_id: MockOrganization.id,
   completed_at: "2022-05-17T17:39:01.382927298Z",
-  tags: {},
+  tags: {
+    scope: "organization",
+    owner: "",
+    wowzers: "whatatag",
+    isCapable: "false",
+    department: "engineering",
+    dreaming: "true",
+  },
   queue_position: 0,
   queue_size: 0,
 };
