diff --git a/site/src/pages/TemplatesPage/CreateTemplateButton.stories.tsx b/site/src/pages/TemplatesPage/CreateTemplateButton.stories.tsx new file mode 100644 index 0000000000000..e6146d48162f9 --- /dev/null +++ b/site/src/pages/TemplatesPage/CreateTemplateButton.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { screen, userEvent } from "@storybook/test"; +import { CreateTemplateButton } from "./CreateTemplateButton"; + +const meta: Meta = { + title: "pages/TemplatesPage/CreateTemplateButton", + component: CreateTemplateButton, +}; + +export default meta; +type Story = StoryObj; + +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 new file mode 100644 index 0000000000000..c0ba5e2734643 --- /dev/null +++ b/site/src/pages/TemplatesPage/CreateTemplateButton.tsx @@ -0,0 +1,56 @@ +import AddIcon from "@mui/icons-material/AddOutlined"; +import Inventory2 from "@mui/icons-material/Inventory2"; +import NoteAddOutlined from "@mui/icons-material/NoteAddOutlined"; +import UploadOutlined from "@mui/icons-material/UploadOutlined"; +import Button from "@mui/material/Button"; +import { + MoreMenu, + MoreMenuContent, + MoreMenuItem, + MoreMenuTrigger, +} from "components/MoreMenu/MoreMenu"; +import type { FC } from "react"; + +type CreateTemplateButtonProps = { + onNavigate: (path: string) => void; +}; + +export const CreateTemplateButton: FC = ({ + onNavigate, +}) => { + return ( + + + + + + { + onNavigate("/templates/new?exampleId=scratch"); + }} + > + + From scratch + + { + onNavigate("/templates/new"); + }} + > + + Upload template + + { + onNavigate("/starter-templates"); + }} + > + + Choose a starter template + + + + ); +}; diff --git a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx index 83336ce14ac19..a2da34e127fa9 100644 --- a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx @@ -17,7 +17,7 @@ test("create template from scratch", async () => { element: , }, { - path: "/starter-templates", + path: "/templates/new", element:
, }, ], @@ -34,6 +34,9 @@ test("create template from scratch", async () => { name: "Create Template", }); await user.click(createTemplateButton); + const fromScratchMenuItem = await screen.findByText("From scratch"); + await user.click(fromScratchMenuItem); await screen.findByTestId("new-template-page"); - expect(router.state.location.pathname).toBe("/starter-templates"); + expect(router.state.location.pathname).toBe("/templates/new"); + expect(router.state.location.search).toBe("?exampleId=scratch"); }); diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 6e922c0044d33..f61dd1ceb1991 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -37,6 +37,7 @@ import { TableRowSkeleton, } from "components/TableLoader/TableLoader"; import { useClickableTableRow } from "hooks/useClickableTableRow"; +import { useDashboard } from "modules/dashboard/useDashboard"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; import { useNavigate } from "react-router-dom"; @@ -46,6 +47,7 @@ import { formatTemplateActiveDevelopers, formatTemplateBuildTime, } from "utils/templates"; +import { CreateTemplateButton } from "./CreateTemplateButton"; import { EmptyTemplates } from "./EmptyTemplates"; import { TemplatesFilter } from "./TemplatesFilter"; @@ -190,27 +192,31 @@ export const TemplatesPageView: FC = ({ examples, templates, }) => { + const { experiments } = useDashboard(); const isLoading = !templates; const isEmpty = templates && templates.length === 0; const navigate = useNavigate(); + const multiOrgExperimentEnabled = experiments.includes("multi-organization"); + + const createTemplateAction = () => { + return multiOrgExperimentEnabled ? ( + + ) : ( + + ); + }; return ( - } - variant="contained" - onClick={() => { - navigate("/starter-templates"); - }} - > - Create Template - - ) - } - > + Templates @@ -237,7 +243,7 @@ export const TemplatesPageView: FC = ({ {Language.buildTimeLabel} {Language.lastUpdatedLabel} - +