feedback

coder · aslilac · Sep 19, 2023 · Sep 18, 2023 · Sep 19, 2023 · Sep 19, 2023
commit a4032d091a4d89960b5d2963c16cce29172ffb91
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -3,8 +3,11 @@ import {
   type Template,
   type AuthorizationResponse,
   type CreateTemplateVersionRequest,
+  type ProvisionerJobStatus,
+  type TemplateVersion,
 } from "api/typesGenerated";
 import { type QueryClient, type QueryOptions } from "@tanstack/react-query";
+import { delay } from "utils/delay";
 
 export const templateByNameKey = (orgId: string, name: string) => [
   orgId,
@@ -75,13 +78,28 @@ export const templateVersionVariables = (versionId: string) => {
   };
 };
 
-export const createTemplateVersion = (
-  orgId: string,
-  queryClient: QueryClient,
-) => {
+export const createAndBuildTemplateVersion = (orgId: string) => {
   return {
-    mutationFn: (request: CreateTemplateVersionRequest) =>
-      API.createTemplateVersion(orgId, request),
+    mutationFn: async (
+      request: CreateTemplateVersionRequest,
+    ): Promise<string> => {
+      const newVersion = await API.createTemplateVersion(orgId, request);
+
+      let data: TemplateVersion;
+      let jobStatus: ProvisionerJobStatus;
+      do {
+        await delay(1000);
+        data = await API.getTemplateVersion(newVersion.id);
+        jobStatus = data.job.status;
+
+        if (jobStatus === "succeeded") {
+          return newVersion.id;
+        }
+      } while (jobStatus === "pending" || jobStatus === "running");
+
+      // No longer pending/running, but didn't succeed
+      throw data.job.error;
+    },
   };
 };
 

diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx
@@ -1,19 +1,18 @@
-import { useMachine } from "@xstate/react";
 import {
   CreateTemplateVersionRequest,
   TemplateVersionVariable,
   VariableValue,
 } from "api/typesGenerated";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { useOrganizationId } from "hooks/useOrganizationId";
-import { useEffect, type FC, useState } from "react";
+import { useCallback, type FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useNavigate, useParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
 import { useTemplateSettings } from "../TemplateSettingsLayout";
 import { TemplateVariablesPageView } from "./TemplateVariablesPageView";
 import {
-  createTemplateVersion,
+  createAndBuildTemplateVersion,
   templateVersion,
   templateVersionVariables,
   updateActiveTemplateVersion,
@@ -33,8 +32,6 @@ export const TemplateVariablesPage: FC = () => {
   const queryClient = useQueryClient();
   const versionId = template.active_version_id;
 
-  const [newVersionId, setNewVersionId] = useState<string | null>(null);
-
   const {
     data: version,
     error: versionError,
@@ -49,51 +46,34 @@ export const TemplateVariablesPage: FC = () => {
     keepPreviousData: true,
   });
 
-  const createVersionMutation = createTemplateVersion(orgId, queryClient);
-  const { mutate: sendCreateTemplateVersion, error: createVersionError } =
-    useMutation({
-      ...createVersionMutation,
-      onSuccess: (data) => {
-        setNewVersionId(data.id);
-      },
-    });
-  const publishMutation = updateActiveTemplateVersion(template, queryClient);
-  const { mutate: publishVersion, error: publishError } = useMutation({
-    ...publishMutation,
-    onSuccess: () => {
-      publishMutation.onSuccess();
+  const {
+    mutateAsync: sendCreateAndBuildTemplateVersion,
+    error: buildError,
+    isLoading: isBuilding,
+  } = useMutation(createAndBuildTemplateVersion(orgId));
+  const {
+    mutateAsync: sendUpdateActiveTemplateVersion,
+    error: publishError,
+    isLoading: isPublishing,
+  } = useMutation(updateActiveTemplateVersion(template, queryClient));
+
+  const publishVersion = useCallback(
+    async (versionId: string) => {
+      await sendUpdateActiveTemplateVersion(versionId);
       displaySuccess("Template updated successfully");
     },
-    onSettled: () => {
-      setNewVersionId(null);
-    },
-  });
-
-  const {
-    data: status,
-    error: statusError,
-    refetch: refetchStatus,
-    isRefetching,
-  } = useQuery(
-    newVersionId ? templateVersion(newVersionId) : { enabled: false },
+    [sendUpdateActiveTemplateVersion],
   );
 
-  const isSubmitting = Boolean(newVersionId && !statusError);
-
-  // Poll build status while we're updating the template
-  useEffect(() => {
-    if (!newVersionId || !status || isRefetching) {
-      return;
-    }
-
-    const jobStatus = status.job.status;
-    if (jobStatus === "pending" || jobStatus === "running") {
-      setTimeout(() => refetchStatus(), 2_000);
-      return;
-    }
+  const buildVersion = useCallback(
+    async (req: CreateTemplateVersionRequest) => {
+      const newVersionId = await sendCreateAndBuildTemplateVersion(req);
+      await publishVersion(newVersionId);
+    },
+    [sendCreateAndBuildTemplateVersion, publishVersion],
+  );
 
-    publishVersion(newVersionId);
-  }, [newVersionId, status, isRefetching]);
+  const isSubmitting = Boolean(isBuilding || isPublishing);
 
   const error = versionError ?? variablesError;
   if (error) {
@@ -115,17 +95,15 @@ export const TemplateVariablesPage: FC = () => {
         templateVersion={version}
         templateVariables={variables}
         errors={{
-          createVersionError,
-          statusError,
-          jobError: status?.job.error,
+          buildError,
           publishError,
         }}
         onCancel={() => {
           navigate(`/templates/${templateName}`);
         }}
-        onSubmit={(formData) => {
+        onSubmit={async (formData) => {
           const request = filterEmptySensitiveVariables(formData, variables);
-          sendCreateTemplateVersion(request);
+          await buildVersion(request);
         }}
       />
     </>

diff --git a/...rc/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.stories.tsx b/...rc/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.stories.tsx
@@ -59,10 +59,7 @@ export const WithErrors: Story = {
       MockTemplateVersionVariable4,
     ],
     errors: {
-      createVersionError: mockApiError({
-        message: "createVersionError",
-      }),
-      statusError: mockApiError({
+      buildError: mockApiError({
         message: "statusError",
         validations: [
           {
@@ -71,7 +68,6 @@ export const WithErrors: Story = {
           },
         ],
       }),
-      jobError: "jobError",
       publishError: mockApiError({ message: "publishError" }),
     },
 

diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
@@ -19,17 +19,9 @@ export interface TemplateVariablesPageViewProps {
   isSubmitting: boolean;
   errors?: {
     /**
-     * Failed to create a new template version
+     * Failed to build a new template version
      */
-    createVersionError?: unknown;
-    /**
-     * Failed to poll job status of new template version
-     */
-    statusError?: unknown;
-    /**
-     * Job for new template version failed
-     */
-    jobError?: TemplateVersion["job"]["error"];
+    buildError?: unknown;
     /**
      * New version was created successfully, but publishing it failed
      */
@@ -52,22 +44,16 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
   const classes = useStyles();
   const hasError = Object.values(errors).some((error) => Boolean(error));
 
-  console.log("LOOK AT ME", errors);
-
   return (
     <>
       <PageHeader className={classes.pageHeader}>
         <PageHeaderTitle>Template variables</PageHeaderTitle>
       </PageHeader>
       {hasError && (
         <Stack className={classes.errorContainer}>
-          {Boolean(errors.createVersionError) && (
-            <ErrorAlert error={errors.createVersionError} />
-          )}
-          {Boolean(errors.statusError) && (
-            <ErrorAlert error={errors.statusError} />
+          {Boolean(errors.buildError) && (
+            <ErrorAlert error={errors.buildError} />
           )}
-          {Boolean(errors.jobError) && <ErrorAlert error={errors.jobError} />}
           {Boolean(errors.publishError) && (
             <ErrorAlert error={errors.publishError} />
           )}
@@ -81,7 +67,7 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
           templateVariables={templateVariables}
           onSubmit={onSubmit}
           onCancel={onCancel}
-          error={errors.statusError}
+          error={errors.buildError}
         />
       )}
       {templateVariables && templateVariables.length === 0 && (