coder · BrunoQuaresma · Oct 18, 2023 · Oct 17, 2023 · Oct 17, 2023 · Oct 17, 2023
diff --git a/site/src/api/queries/templateVersions.ts b/site/src/api/queries/templateVersions.ts
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -50,6 +50,18 @@ export const templateVersion = (versionId: string) => {
   };
 };
 
+export const templateVersionByName = (
+  orgId: string,
+  templateName: string,
+  versionName: string,
+) => {
+  return {
+    queryKey: ["templateVersion", orgId, templateName, versionName],
+    queryFn: () =>
+      API.getTemplateVersionByName(orgId, templateName, versionName),
+  };
+};
+
 export const templateVersions = (templateId: string) => {
   return {
     queryKey: ["templateVersions", templateId],
@@ -127,6 +139,20 @@ const createTemplateFn = async (options: {
   });
 };
 
+export const templateVersionLogs = (versionId: string) => {
+  return {
+    queryKey: ["templateVersion", versionId, "logs"],
+    queryFn: () => API.getTemplateVersionLogs(versionId),
+  };
+};
+
+export const richParameters = (versionId: string) => {
+  return {
+    queryKey: ["templateVersion", versionId, "richParameters"],
+    queryFn: () => API.getTemplateVersionRichParameters(versionId),
+  };
+};
+
 const waitBuildToBeFinished = async (version: TemplateVersion) => {
   let data: TemplateVersion;
   let jobStatus: ProvisionerJobStatus;

diff --git a/site/src/components/TemplateFiles/hooks.ts b/site/src/components/TemplateFiles/hooks.ts
@@ -0,0 +1,68 @@
+import { TemplateVersion } from "api/typesGenerated";
+import { useTab } from "hooks/useTab";
+import { useEffect } from "react";
+import { useQuery } from "react-query";
+import {
+  TemplateVersionFiles,
+  getTemplateVersionFiles,
+} from "utils/templateVersion";
+import * as API from "api/api";
+
+export const useFileTab = (templateFiles: TemplateVersionFiles | undefined) => {
+  // Tabs The default tab is the tab that has main.tf but until we loads the
+  // files and check if main.tf exists we don't know which tab is the default
+  // one so we just use empty string
+  const tab = useTab("file", "");
+  const isLoaded = tab.value !== "";
+  useEffect(() => {
+    if (templateFiles && !isLoaded) {
+      const terraformFileIndex = Object.keys(templateFiles).indexOf("main.tf");
+      // If main.tf exists use the index if not just use the first tab
+      tab.set(terraformFileIndex !== -1 ? terraformFileIndex.toString() : "0");
+    }
+  }, [isLoaded, tab, templateFiles]);
+
+  return {
+    ...tab,
+    isLoaded,
+  };
+};
+
+export const useTemplateFiles = (
+  templateName: string,
+  version: TemplateVersion | undefined,
+) => {
+  return useQuery({
+    queryKey: ["templateFiles", templateName, version],
+    queryFn: () => {
+      if (!version) {
+        return;
+      }
+      return getTemplateFilesWithDiff(templateName, version);
+    },
+    enabled: version !== undefined,
+  });
+};
+
+const getTemplateFilesWithDiff = async (
+  templateName: string,
+  version: TemplateVersion,
+) => {
+  const previousVersion = await API.getPreviousTemplateVersionByName(
+    version.organization_id!,
+    templateName,
+    version.name,
+  );
+  const loadFilesPromises: ReturnType<typeof getTemplateVersionFiles>[] = [];
+  loadFilesPromises.push(getTemplateVersionFiles(version.job.file_id));
+  if (previousVersion) {
+    loadFilesPromises.push(
+      getTemplateVersionFiles(previousVersion.job.file_id),
+    );
+  }
+  const [currentFiles, previousFiles] = await Promise.all(loadFilesPromises);
+  return {
+    currentFiles,
+    previousFiles,
+  };
+};
diff --git a/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx b/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx
@@ -1,6 +1,6 @@
 import { useQuery, useMutation } from "react-query";
-import { templateVersionLogs } from "api/queries/templateVersions";
 import {
+  templateVersionLogs,
   templateByName,
   templateVersion,
   templateVersionVariables,

diff --git a/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx b/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
@@ -1,6 +1,6 @@
 import { useQuery, useMutation } from "react-query";
-import { templateVersionLogs } from "api/queries/templateVersions";
 import {
+  templateVersionLogs,
   JobError,
   createTemplate,
   templateExamples,

diff --git a/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx b/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
@@ -1,6 +1,6 @@
 import { useQuery, useMutation } from "react-query";
-import { templateVersionLogs } from "api/queries/templateVersions";
 import {
+  templateVersionLogs,
   JobError,
   createTemplate,
   templateVersionVariables,

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -22,11 +22,11 @@ import { useMutation, useQuery, useQueryClient } from "react-query";
 import {
   templateByName,
   templateVersionExternalAuth,
+  richParameters,
 } from "api/queries/templates";
 import { autoCreateWorkspace, createWorkspace } from "api/queries/workspaces";
 import { checkAuthorization } from "api/queries/authCheck";
 import { CreateWSPermissions, createWorkspaceChecks } from "./permissions";
-import { richParameters } from "api/queries/templateVersions";
 import { paramsUsedToCreateWorkspace } from "utils/workspace";
 import { useEffectEvent } from "hooks/hookPolyfills";
 

diff --git a/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx b/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
@@ -1,77 +1,14 @@
-import { useQuery } from "react-query";
-import { getPreviousTemplateVersionByName } from "api/api";
-import { TemplateVersion } from "api/typesGenerated";
 import { Loader } from "components/Loader/Loader";
 import { TemplateFiles } from "components/TemplateFiles/TemplateFiles";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
-import { useOrganizationId } from "hooks/useOrganizationId";
-import { useTab } from "hooks/useTab";
-import { FC, useEffect } from "react";
+import { FC } from "react";
 import { Helmet } from "react-helmet-async";
-import {
-  getTemplateVersionFiles,
-  TemplateVersionFiles,
-} from "utils/templateVersion";
 import { getTemplatePageTitle } from "../utils";
-
-const fetchTemplateFiles = async (
-  organizationId: string,
-  templateName: string,
-  activeVersion: TemplateVersion,
-) => {
-  const previousVersion = await getPreviousTemplateVersionByName(
-    organizationId,
-    templateName,
-    activeVersion.name,
-  );
-  const loadFilesPromises: ReturnType<typeof getTemplateVersionFiles>[] = [];
-  loadFilesPromises.push(getTemplateVersionFiles(activeVersion));
-  if (previousVersion) {
-    loadFilesPromises.push(getTemplateVersionFiles(previousVersion));
-  }
-  const [currentFiles, previousFiles] = await Promise.all(loadFilesPromises);
-  return {
-    currentFiles,
-    previousFiles,
-  };
-};
-
-const useTemplateFiles = (
-  organizationId: string,
-  templateName: string,
-  activeVersion: TemplateVersion,
-) =>
-  useQuery({
-    queryKey: ["templateFiles", templateName],
-    queryFn: () =>
-      fetchTemplateFiles(organizationId, templateName, activeVersion),
-  });
-
-const useFileTab = (templateFiles: TemplateVersionFiles | undefined) => {
-  // Tabs The default tab is the tab that has main.tf but until we loads the
-  // files and check if main.tf exists we don't know which tab is the default
-  // one so we just use empty string
-  const tab = useTab("file", "");
-  const isLoaded = tab.value !== "";
-  useEffect(() => {
-    if (templateFiles && !isLoaded) {
-      const terraformFileIndex = Object.keys(templateFiles).indexOf("main.tf");
-      // If main.tf exists use the index if not just use the first tab
-      tab.set(terraformFileIndex !== -1 ? terraformFileIndex.toString() : "0");
-    }
-  }, [isLoaded, tab, templateFiles]);
-
-  return {
-    ...tab,
-    isLoaded,
-  };
-};
+import { useFileTab, useTemplateFiles } from "components/TemplateFiles/hooks";
 
 const TemplateFilesPage: FC = () => {
   const { template, activeVersion } = useTemplateLayoutContext();
-  const orgId = useOrganizationId();
   const { data: templateFiles } = useTemplateFiles(
-    orgId,
     template.name,
     activeVersion,
   );

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPage.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPage.tsx
@@ -1,13 +1,13 @@
-import { useMachine } from "@xstate/react";
 import { usePermissions } from "hooks/usePermissions";
 import { useOrganizationId } from "hooks/useOrganizationId";
-import { useTab } from "hooks/useTab";
 import { type FC, useMemo } from "react";
 import { Helmet } from "react-helmet-async";
 import { useParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
-import { templateVersionMachine } from "xServices/templateVersion/templateVersionXService";
 import TemplateVersionPageView from "./TemplateVersionPageView";
+import { useQuery } from "react-query";
+import { templateVersionByName } from "api/queries/templates";
+import { useFileTab, useTemplateFiles } from "components/TemplateFiles/hooks";
 
 type Params = {
   version: string;
@@ -18,13 +18,16 @@ export const TemplateVersionPage: FC = () => {
   const { version: versionName, template: templateName } =
     useParams() as Params;
   const orgId = useOrganizationId();
-  const [state] = useMachine(templateVersionMachine, {
-    context: { templateName, versionName, orgId },
-  });
-  const tab = useTab("file", "0");
+  const templateVersionQuery = useQuery(
+    templateVersionByName(orgId, templateName, versionName),
+  );
+  const { data: templateFiles, error: templateFilesError } = useTemplateFiles(
+    templateName,
+    templateVersionQuery.data,
+  );
+  const tab = useFileTab(templateFiles?.currentFiles);
   const permissions = usePermissions();
-
-  const versionId = state.context.currentVersion?.id;
+  const versionId = templateVersionQuery.data?.id;
   const createWorkspaceUrl = useMemo(() => {
     const params = new URLSearchParams();
     if (versionId) {
@@ -41,7 +44,10 @@ export const TemplateVersionPage: FC = () => {
       </Helmet>
 
       <TemplateVersionPageView
-        context={state.context}
+        error={templateVersionQuery.error || templateFilesError}
+        currentVersion={templateVersionQuery.data}
+        currentFiles={templateFiles?.currentFiles}
+        previousFiles={templateFiles?.previousFiles}
         versionName={versionName}
         templateName={templateName}
         tab={tab}

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx
@@ -2,7 +2,6 @@ import { action } from "@storybook/addon-actions";
 import { UseTabResult } from "hooks/useTab";
 import {
   mockApiError,
-  MockOrganization,
   MockTemplate,
   MockTemplateVersion,
 } from "testHelpers/entities";
@@ -32,18 +31,15 @@ const defaultArgs: TemplateVersionPageViewProps = {
   tab,
   templateName: MockTemplate.name,
   versionName: MockTemplateVersion.name,
-  context: {
-    templateName: MockTemplate.name,
-    orgId: MockOrganization.id,
-    versionName: MockTemplateVersion.name,
-    currentVersion: MockTemplateVersion,
-    currentFiles: {
-      "README.md": readmeContent,
-      "main.tf": `{}`,
-      "some.tpl": `{{.Name}}`,
-      "some.sh": `echo "Hello world"`,
-    },
+  currentVersion: MockTemplateVersion,
+  currentFiles: {
+    "README.md": readmeContent,
+    "main.tf": `{}`,
+    "some.tpl": `{{.Name}}`,
+    "some.sh": `echo "Hello world"`,
   },
+  previousFiles: undefined,
+  error: undefined,
 };
 
 const meta: Meta<typeof TemplateVersionPageView> = {
@@ -59,13 +55,11 @@ export const Default: Story = {};
 
 export const Error: Story = {
   args: {
-    context: {
-      ...defaultArgs.context,
-      currentVersion: undefined,
-      currentFiles: undefined,
-      error: mockApiError({
-        message: "Error on loading the template version",
-      }),
-    },
+    ...defaultArgs,
+    currentVersion: undefined,
+    currentFiles: undefined,
+    error: mockApiError({
+      message: "Error on loading the template version",
+    }),
   },
 };
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
@@ -16,29 +16,31 @@ import { UseTabResult } from "hooks/useTab";
 import { type FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { createDayString } from "utils/createDayString";
-import { TemplateVersionMachineContext } from "xServices/templateVersion/templateVersionXService";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { TemplateVersion } from "api/typesGenerated";
+import { TemplateVersionFiles } from "utils/templateVersion";
 
 export interface TemplateVersionPageViewProps {
-  /**
-   * Used to display the version name before loading the version in the API
-   */
   versionName: string;
   templateName: string;
   tab: UseTabResult;
-  context: TemplateVersionMachineContext;
   createWorkspaceUrl?: string;
+  error: unknown;
+  currentVersion: TemplateVersion | undefined;
+  currentFiles: TemplateVersionFiles | undefined;
+  previousFiles: TemplateVersionFiles | undefined;
 }
 
 export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
-  context,
   tab,
   versionName,
   templateName,
   createWorkspaceUrl,
+  currentVersion,
+  currentFiles,
+  previousFiles,
+  error,
 }) => {
-  const { currentFiles, error, currentVersion, previousFiles } = context;
-
   return (
     <Margins>
       <PageHeader