refactor: get rid of templateVariablesXService

coder · aslilac · Sep 19, 2023 · Sep 18, 2023 · Sep 19, 2023 · Sep 19, 2023
commit fa39cc691a8d9a7eb0ed7bf7b4e5e183d5f5007a
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
@@ -61,12 +61,18 @@ export const mapApiErrorToFieldErrors = (
 export const getErrorMessage = (
   error: unknown,
   defaultMessage: string,
-): string =>
-  isApiError(error)
-    ? error.response.data.message
-    : error instanceof Error
-    ? error.message
-    : defaultMessage;
+): string => {
+  if (isApiError(error)) {
+    return error.response.data.message;
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === "string") {
+    return error;
+  }
+  return defaultMessage;
+};
 
 /**
  *

diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -1,6 +1,10 @@
 import * as API from "api/api";
-import { type Template, type AuthorizationResponse } from "api/typesGenerated";
-import { type QueryOptions } from "@tanstack/react-query";
+import {
+  type Template,
+  type AuthorizationResponse,
+  type CreateTemplateVersionRequest,
+} from "api/typesGenerated";
+import { type QueryClient, type QueryOptions } from "@tanstack/react-query";
 
 export const templateByNameKey = (orgId: string, name: string) => [
   orgId,
@@ -63,3 +67,38 @@ export const templateVersions = (templateId: string) => {
     queryFn: () => API.getTemplateVersions(templateId),
   };
 };
+
+export const templateVersionVariables = (versionId: string) => {
+  return {
+    queryKey: ["templateVersionVariables", versionId],
+    queryFn: () => API.getTemplateVersionVariables(versionId),
+  };
+};
+
+export const createTemplateVersion = (
+  orgId: string,
+  queryClient: QueryClient,
+) => {
+  return {
+    mutationFn: (request: CreateTemplateVersionRequest) =>
+      API.createTemplateVersion(orgId, request),
+  };
+};
+
+export const updateActiveTemplateVersion = (
+  template: Template,
+  queryClient: QueryClient,
+) => {
+  return {
+    mutationFn: (versionId: string) =>
+      API.updateActiveTemplateVersion(template.id, {
+        id: versionId,
+      }),
+    onSuccess: async () => {
+      // invalidated because of `active_version_id`
+      await queryClient.invalidateQueries(
+        templateByNameKey(template.organization_id, template.name),
+      );
+    },
+  };
+};
diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx
@@ -6,40 +6,103 @@ import {
 } from "api/typesGenerated";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { useOrganizationId } from "hooks/useOrganizationId";
-import { FC } from "react";
+import { useEffect, type FC, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useNavigate, useParams } from "react-router-dom";
-import { templateVariablesMachine } from "xServices/template/templateVariablesXService";
-import { pageTitle } from "../../../utils/page";
+import { pageTitle } from "utils/page";
 import { useTemplateSettings } from "../TemplateSettingsLayout";
 import { TemplateVariablesPageView } from "./TemplateVariablesPageView";
+import {
+  createTemplateVersion,
+  templateVersion,
+  templateVersionVariables,
+  updateActiveTemplateVersion,
+} from "api/queries/templates";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Loader } from "components/Loader/Loader";
 
 export const TemplateVariablesPage: FC = () => {
   const { template: templateName } = useParams() as {
     organization: string;
     template: string;
   };
-  const organizationId = useOrganizationId();
+  const orgId = useOrganizationId();
   const { template } = useTemplateSettings();
   const navigate = useNavigate();
-  const [state, send] = useMachine(templateVariablesMachine, {
-    context: {
-      organizationId,
-      template,
-    },
-    actions: {
-      onUpdateTemplate: () => {
-        displaySuccess("Template updated successfully");
+  const queryClient = useQueryClient();
+  const versionId = template.active_version_id;
+
+  const [newVersionId, setNewVersionId] = useState<string | null>(null);
+
+  const {
+    data: version,
+    error: versionError,
+    isLoading: isVersionLoading,
+  } = useQuery({ ...templateVersion(versionId), keepPreviousData: true });
+  const {
+    data: variables,
+    error: variablesError,
+    isLoading: isVariablesLoading,
+  } = useQuery({
+    ...templateVersionVariables(versionId),
+    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();
+      displaySuccess("Template updated successfully");
+    },
+    onSettled: () => {
+      setNewVersionId(null);
     },
   });
+
   const {
-    activeTemplateVersion,
-    templateVariables,
-    getTemplateDataError,
-    updateTemplateError,
-    jobError,
-  } = state.context;
+    data: status,
+    error: statusError,
+    refetch: refetchStatus,
+    isRefetching,
+  } = useQuery(
+    newVersionId ? templateVersion(newVersionId) : { enabled: false },
+  );
+
+  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;
+    }
+
+    publishVersion(newVersionId);
+  }, [newVersionId, status, isRefetching]);
+
+  const error = versionError ?? variablesError;
+  if (error) {
+    return <ErrorAlert error={error} />;
+  }
+
+  if (isVersionLoading || isVariablesLoading) {
+    return <Loader />;
+  }
 
   return (
     <>
@@ -48,23 +111,21 @@ export const TemplateVariablesPage: FC = () => {
       </Helmet>
 
       <TemplateVariablesPageView
-        isSubmitting={state.hasTag("submitting")}
-        templateVersion={activeTemplateVersion}
-        templateVariables={templateVariables}
+        isSubmitting={isSubmitting}
+        templateVersion={version}
+        templateVariables={variables}
         errors={{
-          getTemplateDataError,
-          updateTemplateError,
-          jobError,
+          createVersionError,
+          statusError,
+          jobError: status?.job.error,
+          publishError,
         }}
         onCancel={() => {
           navigate(`/templates/${templateName}`);
         }}
         onSubmit={(formData) => {
-          const request = filterEmptySensitiveVariables(
-            formData,
-            templateVariables,
-          );
-          send({ type: "UPDATE_TEMPLATE_EVENT", request: request });
+          const request = filterEmptySensitiveVariables(formData, variables);
+          sendCreateTemplateVersion(request);
         }}
       />
     </>

diff --git a/...rc/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.stories.tsx b/...rc/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.stories.tsx
@@ -49,7 +49,7 @@ export const RequiredVariable: Story = {
   },
 };
 
-export const WithUpdateTemplateError: Story = {
+export const WithErrors: Story = {
   args: {
     templateVersion: MockTemplateVersion,
     templateVariables: [
@@ -59,25 +59,24 @@ export const WithUpdateTemplateError: Story = {
       MockTemplateVersionVariable4,
     ],
     errors: {
-      updateTemplateError: mockApiError({
-        message: "Something went wrong.",
+      createVersionError: mockApiError({
+        message: "createVersionError",
       }),
+      statusError: mockApiError({
+        message: "statusError",
+        validations: [
+          {
+            field: `user_variable_values[0].value`,
+            detail: "Variable is required.",
+          },
+        ],
+      }),
+      jobError: "jobError",
+      publishError: mockApiError({ message: "publishError" }),
     },
-  },
-};
 
-export const WithJobError: Story = {
-  args: {
-    templateVersion: MockTemplateVersion,
-    templateVariables: [
-      MockTemplateVersionVariable1,
-      MockTemplateVersionVariable2,
-      MockTemplateVersionVariable3,
-      MockTemplateVersionVariable4,
-    ],
-    errors: {
-      jobError:
-        "template import provision for start: recv import provision: plan terraform: terraform plan: exit status 1",
+    initialTouched: {
+      user_variable_values: true,
     },
   },
 };
diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
@@ -4,12 +4,12 @@ import {
   TemplateVersionVariable,
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
-import { Loader } from "components/Loader/Loader";
 import { ComponentProps, FC } from "react";
 import { TemplateVariablesForm } from "./TemplateVariablesForm";
 import { makeStyles } from "@mui/styles";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Stack } from "components/Stack/Stack";
 
 export interface TemplateVariablesPageViewProps {
   templateVersion?: TemplateVersion;
@@ -18,9 +18,22 @@ export interface TemplateVariablesPageViewProps {
   onCancel: () => void;
   isSubmitting: boolean;
   errors?: {
-    getTemplateDataError?: unknown;
-    updateTemplateError?: unknown;
+    /**
+     * Failed to create 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"];
+    /**
+     * New version was created successfully, but publishing it failed
+     */
+    publishError?: unknown;
   };
   initialTouched?: ComponentProps<
     typeof TemplateVariablesForm
@@ -37,29 +50,29 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
   initialTouched,
 }) => {
   const classes = useStyles();
-  const isLoading =
-    !templateVersion &&
-    !templateVariables &&
-    !errors.getTemplateDataError &&
-    !errors.updateTemplateError;
   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 && (
-        <div className={classes.errorContainer}>
-          {Boolean(errors.getTemplateDataError) && (
-            <ErrorAlert error={errors.getTemplateDataError} />
+        <Stack className={classes.errorContainer}>
+          {Boolean(errors.createVersionError) && (
+            <ErrorAlert error={errors.createVersionError} />
           )}
-          {Boolean(errors.updateTemplateError) && (
-            <ErrorAlert error={errors.updateTemplateError} />
+          {Boolean(errors.statusError) && (
+            <ErrorAlert error={errors.statusError} />
           )}
           {Boolean(errors.jobError) && <ErrorAlert error={errors.jobError} />}
-        </div>
+          {Boolean(errors.publishError) && (
+            <ErrorAlert error={errors.publishError} />
+          )}
+        </Stack>
       )}
-      {isLoading && <Loader />}
       {templateVersion && templateVariables && templateVariables.length > 0 && (
         <TemplateVariablesForm
           initialTouched={initialTouched}
@@ -68,7 +81,7 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
           templateVariables={templateVariables}
           onSubmit={onSubmit}
           onCancel={onCancel}
-          error={errors.updateTemplateError}
+          error={errors.statusError}
         />
       )}
       {templateVariables && templateVariables.length === 0 && (