From 14e5370fcf4314eb30902df80632635c4e1a0d4a Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 16 Aug 2024 14:36:56 +0000 Subject: [PATCH 1/4] fix: re-add original create template context menu --- .../CreateTemplateButton.stories.tsx | 22 ++++++++ .../TemplatesPage/CreateTemplateButton.tsx | 56 +++++++++++++++++++ .../pages/TemplatesPage/TemplatesPageView.tsx | 38 +++++++------ 3 files changed, 100 insertions(+), 16 deletions(-) create mode 100644 site/src/pages/TemplatesPage/CreateTemplateButton.stories.tsx create mode 100644 site/src/pages/TemplatesPage/CreateTemplateButton.tsx 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..9678b988e3ac4 --- /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 type { FC } from "react"; +import { + MoreMenu, + MoreMenuContent, + MoreMenuItem, + MoreMenuTrigger, +} from "components/MoreMenu/MoreMenu"; + +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/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 6e922c0044d33..aaf2eba931472 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"); + console.log("multiOrgExperimentEnabled", multiOrgExperimentEnabled); + 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} - + From 15334f24dab6a71a554bdd1fd1f27e54811e9ea8 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 16 Aug 2024 14:47:43 +0000 Subject: [PATCH 2/4] fix: format --- site/src/pages/TemplatesPage/CreateTemplateButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplatesPage/CreateTemplateButton.tsx b/site/src/pages/TemplatesPage/CreateTemplateButton.tsx index 9678b988e3ac4..c0ba5e2734643 100644 --- a/site/src/pages/TemplatesPage/CreateTemplateButton.tsx +++ b/site/src/pages/TemplatesPage/CreateTemplateButton.tsx @@ -3,13 +3,13 @@ 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 type { FC } from "react"; import { MoreMenu, MoreMenuContent, MoreMenuItem, MoreMenuTrigger, } from "components/MoreMenu/MoreMenu"; +import type { FC } from "react"; type CreateTemplateButtonProps = { onNavigate: (path: string) => void; From 707c48565aabae75236bfb4b04f14ad9b6b1b09f Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 16 Aug 2024 14:55:50 +0000 Subject: [PATCH 3/4] fix: fix test --- site/src/pages/TemplatesPage/TemplatesPage.test.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) 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"); }); From f9779c97124ea4449c4a6b5973786461d3e21e45 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 16 Aug 2024 15:42:00 +0000 Subject: [PATCH 4/4] fix: remove console.log --- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index aaf2eba931472..f61dd1ceb1991 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -197,7 +197,7 @@ export const TemplatesPageView: FC = ({ const isEmpty = templates && templates.length === 0; const navigate = useNavigate(); const multiOrgExperimentEnabled = experiments.includes("multi-organization"); - console.log("multiOrgExperimentEnabled", multiOrgExperimentEnabled); + const createTemplateAction = () => { return multiOrgExperimentEnabled ? (