fix(upgrade-service): allow no preflights and no config

web/src/components/upgrade_service/PreflightChecks.tsx

@@ -8,7 +8,7 @@ import SkipPreflightsModal from "@components/shared/modals/SkipPreflightsModal";
 import PreflightsProgress from "@components/troubleshoot/PreflightsProgress";
 import "../../scss/components/PreflightCheckPage.scss";
 
-import { useGetPrelightResults, useRerunPreflights } from "./hooks/index";
+import { useGetPrelightResults, useRunPreflights } from "./hooks/index";
 
 import { KotsParams } from "@types";
 import { useUpgradeServiceContext } from "./UpgradeServiceContext";
@@ -35,10 +35,13 @@ const PreflightCheck = ({
 
   const { sequence = "0", slug } = useParams<keyof KotsParams>() as KotsParams;
 
+  const {
+    mutate: runPreflights,
+    error: runPreflightsError,
+    isSuccess: runPreflightsSuccess,
+  } = useRunPreflights({ slug, sequence });
   const { data: preflightCheck, error: getPreflightResultsError } =
-    useGetPrelightResults({ slug, sequence });
-  const { mutate: rerunPreflights, error: rerunPreflightsError } =
-    useRerunPreflights({ slug, sequence });
+    useGetPrelightResults({ slug, sequence, enabled: runPreflightsSuccess });
 
   if (!preflightCheck?.showPreflightCheckPending) {
     if (showConfirmIgnorePreflightsModal) {
@@ -48,12 +51,17 @@ const PreflightCheck = ({
 
   useEffect(() => {
     setCurrentStep(1);
-
+    // Config changed so we'll re-run the preflights
+    if (!isEqual(prevConfig, config)) {
+      runPreflights();
+      return;
+    }
+    // No preflight results means we haven't run them yet,  let's do that
     if (
-      !isEqual(prevConfig, config) &&
-      preflightCheck?.preflightResults.length > 0
+      !preflightCheck?.preflightResults ||
+      preflightCheck.preflightResults.length === 0
     ) {
-      rerunPreflights();
+      runPreflights();
     }
   }, []);
 
@@ -82,12 +90,12 @@ const PreflightCheck = ({
             </div>
           )}
 
-          {rerunPreflightsError?.message && (
+          {runPreflightsError?.message && (
             <div className="ErrorWrapper flex-auto flex alignItems--center u-marginBottom--20">
               <div className="icon redWarningIcon u-marginRight--10" />
               <div>
                 <p className="title">Encountered an error</p>
-                <p className="error">{rerunPreflightsError.message}</p>
+                <p className="error">{runPreflightsError.message}</p>
               </div>
             </div>
           )}
@@ -126,7 +134,7 @@ const PreflightCheck = ({
                   <button
                     type="button"
                     className="btn primary blue"
-                    onClick={() => rerunPreflights()}
+                    onClick={() => runPreflights()}
                   >
                     Re-run
                   </button>

web/src/components/upgrade_service/UpgradeService.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes, Navigate } from "react-router-dom";
+import { Route, Routes, Navigate, useMatch } from "react-router-dom";
 import { Helmet } from "react-helmet";
 import NotFound from "@components/static/NotFound";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -8,12 +8,13 @@ import AppConfig from "@components/upgrade_service/AppConfig";
 // types
 import { ToastProvider } from "@src/context/ToastContext";
 import StepIndicator from "./StepIndicator";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import PreflightChecks from "./PreflightChecks";
 import ConfirmAndDeploy from "./ConfirmAndDeploy";
 import { KotsPageTitle } from "@components/Head";
 import { UpgradeServiceProvider } from "./UpgradeServiceContext";
+import Loader from "@components/shared/Loader";
 // react-query client
 const queryClient = new QueryClient();
 
@@ -22,6 +23,39 @@ const UpgradeService = () => {
     throw new Error("Crashz!");
   };
   const [currentStep, setCurrentStep] = useState(0);
+  const [isConfigurable, setIsConfigurable] = useState(false);
+  const [hasPreflight, setHasPreflight] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const { params } = useMatch("/upgrade-service/app/:slug/*");
+
+  useEffect(() => {
+    fetch(`${process.env.API_ENDPOINT}/upgrade-service/app/${params.slug}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          const res = await response.json();
+          throw new Error(res.error);
+        }
+        const data = (await response.json()) as {
+          isConfigurable: boolean;
+          hasPreflight: boolean;
+        };
+        console.log("Configuration check");
+        console.log(data);
+        setHasPreflight(data.hasPreflight);
+        setIsConfigurable(data.isConfigurable);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        // TODO handle error
+      });
+  }, []);
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -42,25 +76,48 @@ const UpgradeService = () => {
               value={currentStep}
               className="tw-my-8"
             />
-            <Routes>
-              <Route path="/crashz" element={<Crashz />} />{" "}
-              <Route path="/app/:slug/*">
-                <Route index element={<Navigate to="config" />} />
-                <Route
-                  path="config"
-                  element={<AppConfig setCurrentStep={setCurrentStep} />}
-                />
-                <Route
-                  path="preflight"
-                  element={<PreflightChecks setCurrentStep={setCurrentStep} />}
-                />
-                <Route
-                  path="deploy"
-                  element={<ConfirmAndDeploy setCurrentStep={setCurrentStep} />}
-                />
-              </Route>
-              <Route path="*" element={<NotFound />} />
-            </Routes>
+            {isLoading ? (
+              <div className="tw-absolute tw-top-[44.3%] tw-w-full flex-column flex1 alignItems--center justifyContent--center tw-gap-4">
+                <span className="u-fontWeight--bold">
+                  Checking required steps...
+                </span>
+                <Loader size="60" />
+              </div>
+            ) : (
+              <Routes>
+                <Route path="/crashz" element={<Crashz />} />
+                <Route path="/app/:slug/*">
+                  <Route index element={<Navigate to="config" />} />
+                  <Route
+                    path="config"
+                    element={
+                      isConfigurable ? (
+                        <AppConfig setCurrentStep={setCurrentStep} />
+                      ) : (
+                        <Navigate to="../preflight" />
+                      )
+                    }
+                  />
+                  <Route
+                    path="preflight"
+                    element={
+                      hasPreflight ? (
+                        <PreflightChecks setCurrentStep={setCurrentStep} />
+                      ) : (
+                        <Navigate to="../deploy" />
+                      )
+                    }
+                  />
+                  <Route
+                    path="deploy"
+                    element={
+                      <ConfirmAndDeploy setCurrentStep={setCurrentStep} />
+                    }
+                  />
+                </Route>
+                <Route path="*" element={<NotFound />} />
+              </Routes>
+            )}
           </div>
         </ToastProvider>
       </UpgradeServiceProvider>

web/src/components/upgrade_service/hooks/getPreflightResult.tsx

@@ -8,9 +8,7 @@ import { useState } from "react";
 async function getPreflightResult({
   slug,
 }: {
-  apiEndpoint?: string;
   slug: string;
-  sequence?: string;
 }): Promise<PreflightResponse> {
   const jsonResponse = await fetch(
     `${process.env.API_ENDPOINT}/upgrade-service/app/${slug}/preflight/result`,
@@ -170,9 +168,11 @@ function makeRefetchInterval(preflightCheck: PreflightCheck): number | false {
 function useGetPrelightResults({
   slug,
   sequence,
+  enabled = true,
 }: {
   slug: string;
   sequence?: string;
+  enabled?: boolean;
 }) {
   // this is for the progress bar
   const [refetchCount, setRefetchCount] = useState(0);
@@ -181,8 +181,9 @@ function useGetPrelightResults({
     queryFn: () => {
       setRefetchCount(refetchCount + 1);
 
-      return getPreflightResult({ slug, sequence });
+      return getPreflightResult({ slug });
     },
+    enabled,
     queryKey: ["preflight-results", sequence, slug],
     onError: (err: Error) => {
       console.log(err);

web/src/components/upgrade_service/hooks/index.ts

@@ -1,5 +1,5 @@
 import { useGetPrelightResults } from "./getPreflightResult";
-import { useRerunPreflights } from "./postPreflightRun";
+import { useRunPreflights } from "./postPreflightRun";
 import { useDeployAppVersion } from "./postDeployAppVersion";
 
-export { useGetPrelightResults, useRerunPreflights, useDeployAppVersion };
+export { useGetPrelightResults, useRunPreflights, useDeployAppVersion };

web/src/components/upgrade_service/hooks/postPreflightRun.tsx

@@ -1,12 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-async function postPreflightRun({
-  slug,
-}: {
-  apiEndpoint?: string;
-  slug: string;
-  sequence: string;
-}) {
+async function postPreflightRun({ slug }: { slug: string }) {
   const response = await fetch(
     `${process.env.API_ENDPOINT}/upgrade-service/app/${slug}/preflight/run`,
     {
@@ -26,7 +20,7 @@ async function postPreflightRun({
   }
 }
 
-function useRerunPreflights({
+function useRunPreflights({
   slug,
   sequence,
 }: {
@@ -36,7 +30,7 @@ function useRerunPreflights({
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: () => postPreflightRun({ slug, sequence }),
+    mutationFn: () => postPreflightRun({ slug }),
     onError: (err: Error) => {
       console.log(err);
       throw new Error(err.message || "Error running preflight checks");
@@ -49,4 +43,4 @@ function useRerunPreflights({
   });
 }
 
-export { useRerunPreflights };
+export { useRunPreflights };