fix: re-add original create template context menu (#14326)

jaaydenh · web-flow · commit bec6a26d0e96 · 2024-08-16T17:16:13.000-04:00
diff --git a/site/src/pages/TemplatesPage/CreateTemplateButton.stories.tsx 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<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 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<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/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx
@@ -17,7 +17,7 @@ test("create template from scratch", async () => {
 						element: <TemplatesPage />,
 					},
 					{
-						path: "/starter-templates",
+						path: "/templates/new",
 						element: <div data-testid="new-template-page" />,
 					},
 				],
@@ -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
@@ -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<TemplatesPageViewProps> = ({
 	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 ? (
+			<Button
+				startIcon={<AddIcon />}
+				variant="contained"
+				onClick={() => {
+					navigate("/starter-templates");
+				}}
+			>
+				Create Template
+			</Button>
+		) : (
+			<CreateTemplateButton onNavigate={navigate} />
+		);
+	};
 
 	return (
 		<Margins>
-			<PageHeader
-				actions={
-					canCreateTemplates && (
-						<Button
-							startIcon={<AddIcon />}
-							variant="contained"
-							onClick={() => {
-								navigate("/starter-templates");
-							}}
-						>
-							Create Template
-						</Button>
-					)
-				}
-			>
+			<PageHeader actions={canCreateTemplates && createTemplateAction()}>
 				<PageHeaderTitle>
 					<Stack spacing={1} direction="row" alignItems="center">
 						Templates
@@ -237,7 +243,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
 								</TableCell>
 								<TableCell width="10%">{Language.buildTimeLabel}</TableCell>
 								<TableCell width="15%">{Language.lastUpdatedLabel}</TableCell>
-								<TableCell width="1%"></TableCell>
+								<TableCell width="1%" />
 							</TableRow>
 						</TableHead>
 						<TableBody>
