coder · BrunoQuaresma · Nov 3, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
diff --git a/site/src/api/queries/files.ts b/site/src/api/queries/files.ts
@@ -5,3 +5,10 @@ export const uploadFile = () => {
     mutationFn: API.uploadFile,
   };
 };
+
+export const file = (fileId: string) => {
+  return {
+    queryKey: ["files", fileId],
+    queryFn: () => API.getFile(fileId),
+  };
+};
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -129,6 +129,15 @@ export const templateVersionVariables = (versionId: string) => {
   };
 };
 
+export const createTemplateVersion = (orgId: string) => {
+  return {
+    mutationFn: async (request: CreateTemplateVersionRequest) => {
+      const newVersion = await API.createTemplateVersion(orgId, request);
+      return newVersion;
+    },
+  };
+};
+
 export const createAndBuildTemplateVersion = (orgId: string) => {
   return {
     mutationFn: async (request: CreateTemplateVersionRequest) => {
@@ -216,6 +225,13 @@ export const richParameters = (versionId: string) => {
   };
 };
 
+export const resources = (versionId: string) => {
+  return {
+    queryKey: ["templateVersion", versionId, "resources"],
+    queryFn: () => API.getTemplateVersionResources(versionId),
+  };
+};
+
 const waitBuildToBeFinished = async (version: TemplateVersion) => {
   let data: TemplateVersion;
   let jobStatus: ProvisionerJobStatus;

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
@@ -36,7 +36,6 @@ export const Example: Story = {};
 
 export const Logs = {
   args: {
-    isBuildingNewVersion: true,
     buildLogs: MockWorkspaceBuildLogs,
     templateVersion: {
       ...MockTemplateVersion,
@@ -47,7 +46,6 @@ export const Logs = {
 
 export const Resources: Story = {
   args: {
-    isBuildingNewVersion: true,
     buildLogs: MockWorkspaceBuildLogs,
     resources: [
       MockWorkspaceResource,
@@ -62,7 +60,6 @@ export const Resources: Story = {
 
 export const ManyLogs = {
   args: {
-    isBuildingNewVersion: true,
     templateVersion: {
       ...MockTemplateVersion,
       job: {

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -52,7 +52,6 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 export interface TemplateVersionEditorProps {
   template: Template;
   templateVersion: TemplateVersion;
-  isBuildingNewVersion: boolean;
   defaultFileTree: FileTree;
   buildLogs?: ProvisionerJobLog[];
   resources?: WorkspaceResource[];
@@ -92,7 +91,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   disableUpdate,
   template,
   templateVersion,
-  isBuildingNewVersion,
   defaultFileTree,
   onPreview,
   onPublish,
@@ -111,9 +109,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   onCancelSubmitMissingVariableValues,
 }) => {
   const theme = useTheme();
-  // If resources are provided, show them by default!
-  // This is for Storybook!
-  const [selectedTab, setSelectedTab] = useState(() => (resources ? 1 : 0));
+  const [selectedTab, setSelectedTab] = useState<
+    "logs" | "resources" | undefined // Undefined is to hide the tab
+  >();
   const [fileTree, setFileTree] = useState(defaultFileTree);
   const [createFileOpen, setCreateFileOpen] = useState(false);
   const [deleteFileOpen, setDeleteFileOpen] = useState<string>();
@@ -126,7 +124,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   const triggerPreview = useCallback(() => {
     onPreview(fileTree);
     // Switch to the build log!
-    setSelectedTab(0);
+    setSelectedTab("logs");
   }, [fileTree, onPreview]);
 
   // Stop ctrl+s from saving files and make ctrl+enter trigger a preview.
@@ -159,11 +157,12 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
       previousVersion.current = templateVersion;
       return;
     }
+
     if (
       ["running", "pending"].includes(previousVersion.current.job.status) &&
       templateVersion.job.status === "succeeded"
     ) {
-      setSelectedTab(1);
+      setSelectedTab("resources");
       setDirty(false);
     }
     previousVersion.current = templateVersion;
@@ -218,7 +217,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
           )}
 
           <div css={styles.topbarSides}>
-            {isBuildingNewVersion && (
+            {buildLogs && (
               <TemplateVersionStatusBadge version={templateVersion} />
             )}
 
@@ -358,9 +357,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               <div css={styles.tabs}>
                 <button
                   css={styles.tab}
-                  className={selectedTab === 0 ? "active" : ""}
+                  className={selectedTab === "logs" ? "active" : ""}
                   onClick={() => {
-                    setSelectedTab(0);
+                    setSelectedTab("logs");
                   }}
                 >
                   {templateVersion.job.status !== "succeeded" ? (
@@ -374,9 +373,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 {!disableUpdate && (
                   <button
                     css={styles.tab}
-                    className={selectedTab === 1 ? "active" : ""}
+                    className={selectedTab === "resources" ? "active" : ""}
                     onClick={() => {
-                      setSelectedTab(1);
+                      setSelectedTab("resources");
                     }}
                   >
                     <PreviewIcon />
@@ -389,7 +388,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 css={[
                   styles.panel,
                   {
-                    display: selectedTab !== 0 ? "none" : "flex",
+                    display: selectedTab !== "logs" ? "none" : "flex",
                     flexDirection: "column",
                   },
                 ]}
@@ -427,7 +426,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                   styles.panel,
                   {
                     paddingBottom: theme.spacing(2),
-                    display: selectedTab !== 1 ? "none" : undefined,
+                    display: selectedTab !== "resources" ? "none" : undefined,
                   },
                 ]}
               >

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx
@@ -4,6 +4,7 @@ import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as api from "api/api";
 import {
+  MockTemplate,
   MockTemplateVersion,
   MockWorkspaceBuildLogs,
 } from "testHelpers/entities";
@@ -17,26 +18,37 @@ jest.mock("components/TemplateResourcesTable/TemplateResourcesTable", () => {
   };
 });
 
-test("Use custom name, message and set it as active when publishing", async () => {
-  const user = userEvent.setup();
+const renderTemplateEditorPage = () => {
   renderWithAuth(<TemplateVersionEditorPage />, {
+    route: `/templates/${MockTemplate.name}/versions/${MockTemplateVersion.name}/edit`,
+    path: "/templates/:template/versions/:version/edit",
     extraRoutes: [
       {
         path: "/templates/:templateId",
         element: <div />,
       },
     ],
   });
+};
+
+test("Use custom name, message and set it as active when publishing", async () => {
+  const user = userEvent.setup();
+  renderTemplateEditorPage();
   const topbar = await screen.findByTestId("topbar");
 
   // Build Template
   jest.spyOn(api, "uploadFile").mockResolvedValueOnce({ hash: "hash" });
+  const newTemplateVersion = {
+    ...MockTemplateVersion,
+    id: "new-version-id",
+    name: "new-version",
+  };
   jest
     .spyOn(api, "createTemplateVersion")
-    .mockResolvedValueOnce(MockTemplateVersion);
+    .mockResolvedValue(newTemplateVersion);
   jest
-    .spyOn(api, "getTemplateVersion")
-    .mockResolvedValue({ ...MockTemplateVersion, id: "new-version-id" });
+    .spyOn(api, "getTemplateVersionByName")
+    .mockResolvedValue(newTemplateVersion);
   jest
     .spyOn(api, "watchBuildLogsByTemplateVersionId")
     .mockImplementation((_, options) => {
@@ -52,7 +64,7 @@ test("Use custom name, message and set it as active when publishing", async () =
   // Publish
   const patchTemplateVersion = jest
     .spyOn(api, "patchTemplateVersion")
-    .mockResolvedValue(MockTemplateVersion);
+    .mockResolvedValue(newTemplateVersion);
   const updateActiveTemplateVersion = jest
     .spyOn(api, "updateActiveTemplateVersion")
     .mockResolvedValue({ message: "" });
@@ -84,24 +96,22 @@ test("Use custom name, message and set it as active when publishing", async () =
 
 test("Do not mark as active if promote is not checked", async () => {
   const user = userEvent.setup();
-  renderWithAuth(<TemplateVersionEditorPage />, {
-    extraRoutes: [
-      {
-        path: "/templates/:templateId",
-        element: <div />,
-      },
-    ],
-  });
+  renderTemplateEditorPage();
   const topbar = await screen.findByTestId("topbar");
 
   // Build Template
   jest.spyOn(api, "uploadFile").mockResolvedValueOnce({ hash: "hash" });
+  const newTemplateVersion = {
+    ...MockTemplateVersion,
+    id: "new-version-id",
+    name: "new-version",
+  };
   jest
     .spyOn(api, "createTemplateVersion")
-    .mockResolvedValueOnce(MockTemplateVersion);
+    .mockResolvedValue(newTemplateVersion);
   jest
-    .spyOn(api, "getTemplateVersion")
-    .mockResolvedValue({ ...MockTemplateVersion, id: "new-version-id" });
+    .spyOn(api, "getTemplateVersionByName")
+    .mockResolvedValue(newTemplateVersion);
   jest
     .spyOn(api, "watchBuildLogsByTemplateVersionId")
     .mockImplementation((_, options) => {
@@ -117,7 +127,7 @@ test("Do not mark as active if promote is not checked", async () => {
   // Publish
   const patchTemplateVersion = jest
     .spyOn(api, "patchTemplateVersion")
-    .mockResolvedValue(MockTemplateVersion);
+    .mockResolvedValue(newTemplateVersion);
   const updateActiveTemplateVersion = jest
     .spyOn(api, "updateActiveTemplateVersion")
     .mockResolvedValue({ message: "" });
@@ -146,30 +156,27 @@ test("Do not mark as active if promote is not checked", async () => {
 });
 
 test("Patch request is not send when there are no changes", async () => {
-  const MockTemplateVersionWithEmptyMessage = {
+  const newTemplateVersion = {
     ...MockTemplateVersion,
+    id: "new-version-id",
+    name: "new-version",
+  };
+  const MockTemplateVersionWithEmptyMessage = {
+    ...newTemplateVersion,
     message: "",
   };
   const user = userEvent.setup();
-  renderWithAuth(<TemplateVersionEditorPage />, {
-    extraRoutes: [
-      {
-        path: "/templates/:templateId",
-        element: <div />,
-      },
-    ],
-  });
+  renderTemplateEditorPage();
   const topbar = await screen.findByTestId("topbar");
 
   // Build Template
   jest.spyOn(api, "uploadFile").mockResolvedValueOnce({ hash: "hash" });
   jest
     .spyOn(api, "createTemplateVersion")
-    .mockResolvedValueOnce(MockTemplateVersionWithEmptyMessage);
-  jest.spyOn(api, "getTemplateVersion").mockResolvedValue({
-    ...MockTemplateVersionWithEmptyMessage,
-    id: "new-version-id",
-  });
+    .mockResolvedValue(MockTemplateVersionWithEmptyMessage);
+  jest
+    .spyOn(api, "getTemplateVersionByName")
+    .mockResolvedValue(MockTemplateVersionWithEmptyMessage);
   jest
     .spyOn(api, "watchBuildLogsByTemplateVersionId")
     .mockImplementation((_, options) => {