Add stories for create template button

BrunoQuaresma · BrunoQuaresma · commit 2e756c4553bf · 2024-02-09T12:33:09.000Z
diff --git a/site/src/pages/TemplatesPage/CreateTemplateButton.stories.tsx b/site/src/pages/TemplatesPage/CreateTemplateButton.stories.tsx
@@ -0,0 +1,22 @@
+import { CreateTemplateButton } from "./CreateTemplateButton";
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, screen } from "@storybook/test";
+
+const meta: Meta<typeof CreateTemplateButton> = {
+  title: "pages/TemplatesPage/CreateTemplateButton",
+  component: CreateTemplateButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof CreateTemplateButton>;
+
+export const Close: Story = {};
+
+export const Open: Story = {
+  play: async ({ step }) => {
+    const user = userEvent.setup();
+    await step("click on trigger", async () => {
+      await user.click(screen.getByRole("button"));
+    });
+  },
+};
diff --git a/site/src/pages/TemplatesPage/CreateTemplateButton.tsx b/site/src/pages/TemplatesPage/CreateTemplateButton.tsx
@@ -0,0 +1,56 @@
+import Button from "@mui/material/Button";
+import AddIcon from "@mui/icons-material/AddOutlined";
+import {
+  MoreMenu,
+  MoreMenuContent,
+  MoreMenuItem,
+  MoreMenuTrigger,
+} from "components/MoreMenu/MoreMenu";
+import NoteAddOutlined from "@mui/icons-material/NoteAddOutlined";
+import UploadOutlined from "@mui/icons-material/UploadOutlined";
+import Inventory2 from "@mui/icons-material/Inventory2";
+import { FC } from "react";
+
+type CreateTemplateButtonProps = {
+  onNavigate: (path: string) => void;
+};
+
+export const CreateTemplateButton: FC<CreateTemplateButtonProps> = ({
+  onNavigate,
+}) => {
+  return (
+    <MoreMenu>
+      <MoreMenuTrigger>
+        <Button startIcon={<AddIcon />} variant="contained">
+          Create Template
+        </Button>
+      </MoreMenuTrigger>
+      <MoreMenuContent>
+        <MoreMenuItem
+          onClick={() => {
+            onNavigate(`/templates/new?exampleId=scratch`);
+          }}
+        >
+          <NoteAddOutlined />
+          From scratch
+        </MoreMenuItem>
+        <MoreMenuItem
+          onClick={() => {
+            onNavigate("/templates/new");
+          }}
+        >
+          <UploadOutlined />
+          Upload template
+        </MoreMenuItem>
+        <MoreMenuItem
+          onClick={() => {
+            onNavigate("/starter-templates");
+          }}
+        >
+          <Inventory2 />
+          Choose a starter template
+        </MoreMenuItem>
+      </MoreMenuContent>
+    </MoreMenu>
+  );
+};
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -6,7 +6,6 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import AddIcon from "@mui/icons-material/AddOutlined";
 import { type FC } from "react";
 import { useNavigate } from "react-router-dom";
 import { createDayString } from "utils/createDayString";
@@ -45,15 +44,7 @@ import { docs } from "utils/docs";
 import Skeleton from "@mui/material/Skeleton";
 import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
 import { DeprecatedBadge } from "components/Badges/Badges";
-import {
-  MoreMenu,
-  MoreMenuContent,
-  MoreMenuItem,
-  MoreMenuTrigger,
-} from "components/MoreMenu/MoreMenu";
-import NoteAddOutlined from "@mui/icons-material/NoteAddOutlined";
-import UploadOutlined from "@mui/icons-material/UploadOutlined";
-import Inventory2 from "@mui/icons-material/Inventory2";
+import { CreateTemplateButton } from "./CreateTemplateButton";
 
 export const Language = {
   developerCount: (activeCount: number): string => {
@@ -180,41 +171,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
     <Margins>
       <PageHeader
         actions={
-          canCreateTemplates && (
-            <MoreMenu>
-              <MoreMenuTrigger>
-                <Button startIcon={<AddIcon />} variant="contained">
-                  Create Template
-                </Button>
-              </MoreMenuTrigger>
-              <MoreMenuContent>
-                <MoreMenuItem
-                  onClick={() => {
-                    navigate(`/templates/new?exampleId=scratch`);
-                  }}
-                >
-                  <NoteAddOutlined />
-                  From scratch
-                </MoreMenuItem>
-                <MoreMenuItem
-                  onClick={() => {
-                    navigate("/templates/new");
-                  }}
-                >
-                  <UploadOutlined />
-                  Upload template
-                </MoreMenuItem>
-                <MoreMenuItem
-                  onClick={() => {
-                    navigate("/starter-templates");
-                  }}
-                >
-                  <Inventory2 />
-                  Choose a starter template
-                </MoreMenuItem>
-              </MoreMenuContent>
-            </MoreMenu>
-          )
+          canCreateTemplates && <CreateTemplateButton onNavigate={navigate} />
         }
       >
         <PageHeaderTitle>
