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

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

pkg/upgradeservice/handlers/config.go

@@ -25,7 +25,6 @@ import (
 	"github.com/replicatedhq/kots/pkg/render"
 	rendertypes "github.com/replicatedhq/kots/pkg/render/types"
 	"github.com/replicatedhq/kots/pkg/template"
-	upgradepreflight "github.com/replicatedhq/kots/pkg/upgradeservice/preflight"
 	"github.com/replicatedhq/kots/pkg/util"
 	kotsv1beta1 "github.com/replicatedhq/kotskinds/apis/kots/v1beta1"
 	"github.com/replicatedhq/kotskinds/multitype"
@@ -379,13 +378,6 @@ func (h *Handler) SaveConfig(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 
-	if err := upgradepreflight.Run(params); err != nil {
-		response.Error = "failed to run preflights"
-		logger.Error(errors.Wrap(err, response.Error))
-		JSON(w, http.StatusInternalServerError, response)
-		return
-	}
-
 	response.Success = true
 	JSON(w, http.StatusOK, response)
 }

web/package.json

@@ -94,16 +94,20 @@
     "eslint-plugin-standard": "5.0.0",
     "eslint-webpack-plugin": "^4.2.0",
     "html-webpack-plugin": "^5.6.0",
+    "intersection-observer": "^0.12.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fixed-jsdom": "^0.0.4",
     "mini-css-extract-plugin": "^2.9.1",
+    "msw": "^2.4.10",
     "object-assign": "^4.1.1",
     "os-browserify": "^0.3.0",
     "path": "^0.12.7",
     "postcss-loader": "^6.2.1",
     "prop-types": "^15.7.2",
     "sass": "^1.79.5",
     "sass-loader": "12.4.0",
+    "slugify": "^1.6.6",
     "source-map-loader": "^5.0.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.4",
@@ -192,6 +196,14 @@
     "not dead"
   ],
   "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/jest-setup.ts"
+    ],
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        ""
+      ]
+    },
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(scss|css|less)$": "<rootDir>/__mocks__/styleMock.js",

web/src/components/upgrade_service/AppConfig.tsx

@@ -603,7 +603,7 @@ export const AppConfig = ({
               );
             })}
           </div>
-          <div className="ConfigArea--wrapper">
+          <div data-testid="config-area" className="ConfigArea--wrapper">
             <div
               className={classNames("ConfigOuterWrapper card-bg u-padding--15")}
             >

web/src/components/upgrade_service/ConfirmAndDeploy.tsx

@@ -26,9 +26,46 @@ interface PreflightResultResponse {
   showWarn: boolean;
 }
 
+const BackButton = ({
+  slug,
+  hasPreflight,
+  isConfigurable,
+}: {
+  slug: string;
+  hasPreflight: boolean;
+  isConfigurable: boolean;
+}) => {
+  const navigate = useNavigate();
+
+  if (hasPreflight) {
+    return (
+      <button
+        className="btn secondary blue"
+        onClick={() => navigate(`/upgrade-service/app/${slug}/preflight`)}
+      >
+        Back: Preflight checks
+      </button>
+    );
+  }
+
+  return (
+    <button
+      className="btn secondary blue"
+      onClick={() => navigate(`/upgrade-service/app/${slug}/config`)}
+      disabled={!isConfigurable}
+    >
+      Back: Config
+    </button>
+  );
+};
+
 const ConfirmAndDeploy = ({
   setCurrentStep,
+  hasPreflight,
+  isConfigurable,
 }: {
+  isConfigurable: boolean;
+  hasPreflight: boolean;
   setCurrentStep: (step: number) => void;
 }) => {
   useEffect(() => {
@@ -181,7 +218,10 @@ const ConfirmAndDeploy = ({
   return (
     <div className="flex-column flex1 container">
       <KotsPageTitle pageName="Confirm and Deploy" showAppSlug />
-      <div className="PreflightChecks--wrapper flex-column u-paddingTop--30 flex1 flex tw-max-h-[60%]">
+      <div
+        data-testid="deploy-and-confirm-area"
+        className="PreflightChecks--wrapper flex-column u-paddingTop--30 flex1 flex tw-max-h-[60%]"
+      >
         {location.pathname.includes("version-history") && (
           <div className="u-fontWeight--bold link" onClick={() => navigate(-1)}>
             <Icon
@@ -212,7 +252,7 @@ const ConfirmAndDeploy = ({
             Confirm and Deploy
           </p>
 
-          {preflightCheck?.showPreflightCheckPending && (
+          {hasPreflight && preflightCheck?.showPreflightCheckPending && (
             <div className="flex-column justifyContent--center alignItems--center flex1 u-minWidth--full">
               <PreflightsProgress
                 pendingPreflightCheckName={
@@ -245,7 +285,7 @@ const ConfirmAndDeploy = ({
             </div>
           </div>
 
-          {preflightCheck?.showPreflightResults && (
+          {hasPreflight && preflightCheck?.showPreflightResults && (
             <div className="tw-mt-6">
               <div className="flex flex1 tw-justify-between tw-items-end">
                 <p className="u-fontSize--large u-textColor--primary u-fontWeight--bold">
@@ -258,7 +298,7 @@ const ConfirmAndDeploy = ({
             </div>
           )}
 
-          {preflightCheck?.showIgnorePreflight && (
+          {hasPreflight && preflightCheck?.showIgnorePreflight && (
             <div className="flex flex0 justifyContent--center alignItems--center">
               <span
                 className="u-fontSize--normal u-fontWeight--medium u-textDecoration--underline u-textColor--bodyCopy u-marginTop--15 u-cursor--pointer"
@@ -270,12 +310,11 @@ const ConfirmAndDeploy = ({
           )}
         </div>
         <div className="tw-flex tw-justify-between tw-mt-4">
-          <button
-            className="btn secondary blue"
-            onClick={() => navigate(`/upgrade-service/app/${slug}/preflight`)}
-          >
-            Back: Preflight checks
-          </button>
+          <BackButton
+            slug={slug}
+            isConfigurable={isConfigurable}
+            hasPreflight={hasPreflight}
+          />
           <button
             className="btn primary blue"
             disabled={preflightCheck?.showDeploymentBlocked || isLoading}

web/src/components/upgrade_service/PreflightChecks.tsx

@@ -8,16 +8,18 @@ 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";
 import { isEqual } from "lodash";
 
 const PreflightCheck = ({
   setCurrentStep,
+  isConfigurable,
 }: {
   setCurrentStep: (step: number) => void;
+  isConfigurable: boolean;
 }) => {
   const navigate = useNavigate();
 
@@ -35,10 +37,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 +53,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();
     }
   }, []);
 
@@ -66,7 +76,10 @@ const PreflightCheck = ({
   return (
     <div className="flex-column flex1 container">
       <KotsPageTitle pageName="Preflight Checks" showAppSlug />
-      <div className="PreflightChecks--wrapper flex-column u-paddingTop--30 flex1 flex tw-max-h-[60%]">
+      <div
+        data-testid="preflight-check-area"
+        className="PreflightChecks--wrapper flex-column u-paddingTop--30 flex1 flex tw-max-h-[60%]"
+      >
         <div
           className={`u-maxWidth--full u-marginTop--20 flex-column u-position--relative card-bg ${
             preflightCheck?.showPreflightCheckPending ? "flex1" : ""
@@ -82,12 +95,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 +139,7 @@ const PreflightCheck = ({
                   <button
                     type="button"
                     className="btn primary blue"
-                    onClick={() => rerunPreflights()}
+                    onClick={() => runPreflights()}
                   >
                     Re-run
                   </button>
@@ -156,6 +169,7 @@ const PreflightCheck = ({
           <button
             className="btn secondary blue"
             onClick={() => navigate(`/upgrade-service/app/${slug}/config`)}
+            disabled={!isConfigurable}
           >
             Back: Config
           </button>