update UI errors for secrets on scripts and software

frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/helpers.tsx

@@ -37,7 +37,7 @@ export const getErrorMessage = (err: AxiosResponse<IApiError>) => {
 
   if (
     apiReason.includes(
-      "The configuration profile can’t include BitLocker settings."
+      "The configuration profile can't include BitLocker settings."
     )
   ) {
     return (
@@ -49,7 +49,7 @@ export const getErrorMessage = (err: AxiosResponse<IApiError>) => {
 
   if (
     apiReason.includes(
-      "The configuration profile can’t include Windows update settings."
+      "The configuration profile can't include Windows update settings."
     )
   ) {
     return (
@@ -58,5 +58,10 @@ export const getErrorMessage = (err: AxiosResponse<IApiError>) => {
       </span>
     );
   }
+
+  if (apiReason.includes("Secret variable")) {
+    return apiReason.replace("missing from database", "doesn't exist");
+  }
+
   return apiReason || DEFAULT_ERROR_MESSAGE;
 };

frontend/pages/ManageControlsPage/Scripts/components/ScriptUploader/ScriptUploader.tsx

@@ -1,7 +1,5 @@
 import React, { useContext, useState } from "react";
-import { AxiosResponse } from "axios";
 
-import { IApiError } from "interfaces/errors";
 import { NotificationContext } from "context/notification";
 import scriptAPI from "services/entities/scripts";
 
@@ -36,15 +34,7 @@ const ScriptPackageUploader = ({
       renderFlash("success", "Successfully uploaded!");
       onUpload();
     } catch (e) {
-      const error = e as AxiosResponse<IApiError>;
-      const apiErrMessage = getErrorMessage(error);
-      const renderErrMessage = apiErrMessage.includes(
-        "File type not supported. Only .sh and .ps1 file type is allowed."
-      )
-        ? // per https://github.com/fleetdm/fleet/issues/14752#issuecomment-1809927441
-          "The file should be .sh or .ps1 file."
-        : apiErrMessage;
-      renderFlash("error", `Couldn't upload. ${renderErrMessage}`);
+      renderFlash("error", getErrorMessage(e));
     } finally {
       setShowLoading(false);
     }

frontend/pages/ManageControlsPage/Scripts/components/ScriptUploader/helpers.ts

@@ -1,14 +1,20 @@
-import { AxiosResponse } from "axios";
-import { IApiError } from "interfaces/errors";
+import { getErrorReason } from "interfaces/errors";
 
-const UPLOAD_ERROR_MESSAGES = {
-  default: {
-    message: "Couldn’t upload. Please try again.",
-  },
-};
+const DEFAULT_ERROR_MESSAGE = "Couldn't upload. Please try again.";
 
 // eslint-disable-next-line import/prefer-default-export
-export const getErrorMessage = (err: AxiosResponse<IApiError>) => {
-  const apiReason = err.data.errors[0].reason;
-  return apiReason || UPLOAD_ERROR_MESSAGES.default.message;
+export const getErrorMessage = (err: unknown) => {
+  const apiErrMessage = getErrorReason(err);
+
+  if (
+    apiErrMessage.includes(
+      "File type not supported. Only .sh and .ps1 file type is allowed"
+    )
+  ) {
+    return "Couldn't upload. The file should be .sh or .ps1 file.";
+  } else if (apiErrMessage.includes("Secret variable")) {
+    return apiErrMessage.replace("missing from database", "doesn't exist");
+  }
+
+  return apiErrMessage || DEFAULT_ERROR_MESSAGE;
 };

frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/SoftwareCustomPackage.tsx

@@ -97,7 +97,6 @@ const SoftwareCustomPackage = ({
   };
 
   const onSubmit = async (formData: IPackageFormData) => {
-    console.log("submit", formData);
     if (!formData.software) {
       renderFlash(
         "error",
@@ -150,32 +149,7 @@ const SoftwareCustomPackage = ({
         </>
       );
     } catch (e) {
-      const isTimeout =
-        isAxiosError(e) &&
-        (e.response?.status === 504 || e.response?.status === 408);
-      const reason = getErrorReason(e);
-
-      if (isTimeout) {
-        renderFlash(
-          "error",
-          `Couldn’t upload. Request timeout. Please make sure your server and load balancer timeout is long enough.`
-        );
-      } else if (reason.includes("Fleet couldn't read the version from")) {
-        renderFlash(
-          "error",
-          <>
-            {reason}{" "}
-            <CustomLink
-              newTab
-              url={`${LEARN_MORE_ABOUT_BASE_LINK}/read-package-version`}
-              text="Learn more"
-              iconColor="core-fleet-white"
-            />
-          </>
-        );
-      } else {
-        renderFlash("error", getErrorMessage(e));
-      }
+      renderFlash("error", getErrorMessage(e));
     }
     setUploadDetails(null);
   };

frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/helpers.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { isAxiosError } from "axios";
+
+import { getErrorReason } from "interfaces/errors";
+import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
+
+import CustomLink from "components/CustomLink";
+
+const DEFAULT_ERROR_MESSAGE = "Couldn't add. Please try again.";
+
+// eslint-disable-next-line import/prefer-default-export
+export const getErrorMessage = (err: unknown) => {
+  const isTimeout =
+    isAxiosError(err) &&
+    (err.response?.status === 504 || err.response?.status === 408);
+  const reason = getErrorReason(err);
+
+  if (isTimeout) {
+    return "Couldn't upload. Request timeout. Please make sure your server and load balancer timeout is long enough.";
+  } else if (reason.includes("Fleet couldn't read the version from")) {
+    return (
+      <>
+        {reason}{" "}
+        <CustomLink
+          newTab
+          url={`${LEARN_MORE_ABOUT_BASE_LINK}/read-package-version`}
+          text="Learn more"
+          iconColor="core-fleet-white"
+        />
+      </>
+    );
+  } else if (reason.includes("Secret variable")) {
+    return reason.replace("missing from database", "doesn't exist");
+  }
+
+  return reason || DEFAULT_ERROR_MESSAGE;
+};

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditSoftwareModal/EditSoftwareModal.tsx

@@ -1,9 +1,7 @@
 import React, { useContext, useState, useEffect } from "react";
 import { useQuery } from "react-query";
 import classnames from "classnames";
-import { isAxiosError } from "axios";
 
-import { getErrorReason } from "interfaces/errors";
 import { ILabelSummary } from "interfaces/label";
 import { ISoftwarePackage } from "interfaces/software";
 
@@ -14,14 +12,10 @@ import softwareAPI, {
 } from "services/entities/software";
 import labelsAPI, { getCustomLabels } from "services/entities/labels";
 
-import {
-  DEFAULT_USE_QUERY_OPTIONS,
-  LEARN_MORE_ABOUT_BASE_LINK,
-} from "utilities/constants";
+import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants";
 import deepDifference from "utilities/deep_difference";
 import { getFileDetails } from "utilities/file/fileUtils";
 
-import CustomLink from "components/CustomLink";
 import FileProgressModal from "components/FileProgressModal";
 import Modal from "components/Modal";
 
@@ -167,37 +161,7 @@ const EditSoftwareModal = ({
       onExit();
       refetchSoftwareTitle();
     } catch (e) {
-      const isTimeout =
-        isAxiosError(e) &&
-        (e.response?.status === 504 || e.response?.status === 408);
-      const reason = getErrorReason(e);
-      if (isTimeout) {
-        renderFlash(
-          "error",
-          `Couldn't upload. Request timeout. Please make sure your server and load balancer timeout is long enough.`
-        );
-      } else if (reason.includes("Fleet couldn't read the version from")) {
-        renderFlash(
-          "error",
-          <>
-            Couldn&apos;t edit <b>{software.name}</b>. {reason}.
-            <CustomLink
-              newTab
-              url={`${LEARN_MORE_ABOUT_BASE_LINK}/read-package-version`}
-              text="Learn more"
-            />
-          </>
-        );
-      } else if (reason.includes("selected package is")) {
-        renderFlash(
-          "error",
-          <>
-            Couldn&apos;t edit <b>{software.name}</b>. {reason}
-          </>
-        );
-      } else {
-        renderFlash("error", getErrorMessage(e));
-      }
+      renderFlash("error", getErrorMessage(e, software));
     }
     setIsUpdatingSoftware(false);
   };

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditSoftwareModal/helpers.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { isAxiosError } from "axios";
+
+import { getErrorReason } from "interfaces/errors";
+import { ISoftwarePackage } from "interfaces/software";
+
+import CustomLink from "components/CustomLink";
+import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
+
+const DEFAULT_ERROR_MESSAGE = "Couldn't edit software. Please try again.";
+
+// eslint-disable-next-line import/prefer-default-export
+export const getErrorMessage = (err: unknown, software: ISoftwarePackage) => {
+  const isTimeout =
+    isAxiosError(err) &&
+    (err.response?.status === 504 || err.response?.status === 408);
+  const reason = getErrorReason(err);
+
+  if (isTimeout) {
+    return "Couldn't upload. Request timeout. Please make sure your server and load balancer timeout is long enough.";
+  } else if (reason.includes("Fleet couldn't read the version from")) {
+    return (
+      <>
+        Couldn&apos;t edit <b>{software.name}</b>. {reason}.
+        <CustomLink
+          newTab
+          url={`${LEARN_MORE_ABOUT_BASE_LINK}/read-package-version`}
+          text="Learn more"
+        />
+      </>
+    );
+  } else if (reason.includes("selected package is")) {
+    return (
+      <>
+        Couldn&apos;t edit <b>{software.name}</b>. {reason}
+      </>
+    );
+  } else if (reason.includes("Secret variable")) {
+    return reason
+      .replace("missing from database", "doesn't exist")
+      .replace("Couldn't add", "Couldn't edit");
+  }
+
+  return reason || DEFAULT_ERROR_MESSAGE;
+};