fix(site): fix infinity loading when template has no previous version (#12059)

site/src/api/api.ts

@@ -321,7 +321,7 @@ export const getPreviousTemplateVersionByName = async (
   organizationId: string,
   templateName: string,
   versionName: string,
-): Promise<GetPreviousTemplateVersionByNameResponse> => {
+) => {
   try {
     const response = await axios.get<TypesGen.TemplateVersion>(
       `/api/v2/organizations/${organizationId}/templates/${templateName}/versions/${versionName}/previous`,

site/src/api/queries/templates.ts

@@ -266,12 +266,15 @@ export const previousTemplateVersion = (
       versionName,
       "previous",
     ],
-    queryFn: () =>
+    queryFn: async () => {
-      API.getPreviousTemplateVersionByName(
+      const result = await API.getPreviousTemplateVersionByName(
         organizationId,
         templateName,
         versionName,
-      ),
+      );
+
+      return result ?? null;
+    },
   };
 };
 

site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from "@testing-library/react";
+import { AppProviders } from "App";
+import { RequireAuth } from "contexts/auth/RequireAuth";
+import { RouterProvider, createMemoryRouter } from "react-router-dom";
+import { TemplateLayout } from "../TemplateLayout";
+import TemplateFilesPage from "./TemplateFilesPage";
+import { MockTemplate } from "testHelpers/entities";
+import { server } from "testHelpers/server";
+import { rest } from "msw";
+
+// Occasionally, Jest encounters HTML5 canvas errors. As the SyntaxHighlight is
+// not required for these tests, we can safely mock it.
+jest.mock("components/SyntaxHighlighter/SyntaxHighlighter", () => ({
+  SyntaxHighlighter: () => <div data-testid="syntax-highlighter" />,
+}));
+
+test("displays the template files even when there is no previous version", async () => {
+  server.use(
+    rest.get(
+      "/api/v2/organizations/:orgId/templates/:template/versions/:version/previous",
+      (req, res, ctx) => {
+        return res(ctx.status(404));
+      },
+    ),
+  );
+
+  render(
+    <AppProviders>
+      <RouterProvider
+        router={createMemoryRouter(
+          [
+            {
+              element: <RequireAuth />,
+              children: [
+                {
+                  element: <TemplateLayout />,
+                  children: [
+                    {
+                      path: "/templates/:template/files",
+                      element: <TemplateFilesPage />,
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+          {
+            initialEntries: [`/templates/${MockTemplate.name}/files`],
+          },
+        )}
+      />
+    </AppProviders>,
+  );
+
+  await screen.findByTestId("syntax-highlighter");
+});

site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx

@@ -14,13 +14,18 @@ const TemplateFilesPage: FC = () => {
   const { data: currentFiles } = useQuery(
     templateFiles(activeVersion.job.file_id),
   );
-  const { data: previousTemplate } = useQuery(
+  const previousVersionQuery = useQuery(
     previousTemplateVersion(orgId, template.name, activeVersion.name),
   );
+  const previousVersion = previousVersionQuery.data;
+  const hasPreviousVersion =
+    previousVersionQuery.isSuccess && previousVersion !== null;
   const { data: previousFiles } = useQuery({
-    ...templateFiles(previousTemplate?.job.file_id ?? ""),
+    ...templateFiles(previousVersion?.job.file_id ?? ""),
-    enabled: Boolean(previousTemplate),
+    enabled: hasPreviousVersion,
   });
+  const shouldDisplayFiles =
+    currentFiles && (!hasPreviousVersion || previousFiles);
 
   return (
     <>
@@ -28,7 +33,7 @@ const TemplateFilesPage: FC = () => {
         <title>{getTemplatePageTitle("Source Code", template)}</title>
       </Helmet>
 
-      {previousFiles && currentFiles ? (
+      {shouldDisplayFiles ? (
         <TemplateFiles
           currentFiles={currentFiles}
           baseFiles={previousFiles}