Fleet Desktop: Update component level error states (#28816)

changes/28929-fleet-desktop-errors

@@ -0,0 +1 @@
+- Fleet Desktop: Added device user API error state to replace generic Fleet UI error state

frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/AppInstallDetails.tsx

@@ -3,6 +3,7 @@
 
 import React from "react";
 import { useQuery } from "react-query";
+import { AxiosError } from "axios";
 
 import { SoftwareInstallStatus } from "interfaces/software";
 import mdmApi from "services/entities/mdm";
@@ -13,6 +14,7 @@ import Button from "components/buttons/Button";
 import Icon from "components/Icon";
 import Textarea from "components/Textarea";
 import DataError from "components/DataError/DataError";
+import DeviceUserError from "components/DeviceUserError";
 import Spinner from "components/Spinner/Spinner";
 import { IMdmCommandResult } from "interfaces/mdm";
 import { IActivityDetails } from "interfaces/activity";
@@ -43,9 +45,9 @@ export const AppInstallDetails = ({
   software_title = "",
   deviceAuthToken,
 }: IAppInstallDetails) => {
-  const { data: result, isLoading, isError } = useQuery<
+  const { data: result, isLoading, isError, error } = useQuery<
     IMdmCommandResult,
-    Error
+    AxiosError
   >(
     ["mdm_command_results", command_uuid],
     async () => {
@@ -74,8 +76,27 @@ export const AppInstallDetails = ({
 
   if (isLoading) {
     return <Spinner />;
-  } else if (isError) {
-    return <DataError description="Close this modal and try again." />;
+  }
+
+  if (isError) {
+    if (error?.status === 404) {
+      return deviceAuthToken ? (
+        <DeviceUserError />
+      ) : (
+        <DataError
+          description="Install details are no longer available for this activity."
+          excludeIssueLink
+        />
+      );
+    }
+
+    if (error?.status === 401) {
+      return deviceAuthToken ? (
+        <DeviceUserError />
+      ) : (
+        <DataError description="Close this modal and try again." />
+      );
+    }
   } else if (!result) {
     // FIXME: It's currently possible that the command results API response is empty for pending
     // commands. As a temporary workaround to handle this case, we'll ignore the empty response and

frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/SoftwareInstallDetails.tsx

@@ -19,6 +19,7 @@ import Button from "components/buttons/Button";
 import Icon from "components/Icon";
 import Textarea from "components/Textarea";
 import DataError from "components/DataError/DataError";
+import DeviceUserError from "components/DeviceUserError";
 import Spinner from "components/Spinner/Spinner";
 import {
   INSTALL_DETAILS_STATUS_ICONS,
@@ -121,18 +122,36 @@ export const SoftwareInstallDetails = ({
 
   if (isLoading) {
     return <Spinner />;
-  } else if (isError && error?.status === 404) {
-    return (
-      <DataError
-        description="Install details are no longer available for this activity."
-        excludeIssueLink
-      />
-    );
-  } else if (isError) {
-    return <DataError description="Close this modal and try again." />;
-  } else if (!result) {
+  }
+
+  if (isError) {
+    if (error?.status === 404) {
+      return deviceAuthToken ? (
+        <DeviceUserError />
+      ) : (
+        <DataError
+          description="Install details are no longer available for this activity."
+          excludeIssueLink
+        />
+      );
+    }
+
+    if (error?.status === 401) {
+      return deviceAuthToken ? (
+        <DeviceUserError />
+      ) : (
+        <DataError description="Close this modal and try again." />
+      );
+    }
+  }
+
+  if (!result) {
     // FIXME: Find a better solution for this.
-    return <DataError description="No data returned." />;
+    return deviceAuthToken ? (
+      <DeviceUserError />
+    ) : (
+      <DataError description="No data returned." />
+    );
   }
 
   return (

frontend/components/DataError/DataError.tsx

@@ -88,7 +88,9 @@ const DataError = ({
           <>
             {children || (
               <>
-                <span className="info__data">{description}</span>
+                {description && (
+                  <span className="info__data">{description}</span>
+                )}
                 {!excludeIssueLink && (
                   <span className="info__data">
                     If this keeps happening, please&nbsp;

frontend/components/DeviceUserError/DeviceUserError.tsx

@@ -14,8 +14,8 @@ const DeviceUserError = (): JSX.Element => {
             This URL is invalid or expired.
           </span>
           <span className="info__data">
-            To access your device information, please click “My Device” from the
-            Fleet Desktop menu icon.
+            To access your device information, please click <br />
+            “My Device” from the Fleet Desktop menu icon.
           </span>
         </div>
       </div>

frontend/pages/ManageControlsPage/SetupExperience/cards/InstallSoftware/components/SelectSoftwareModal/SelectSoftwareModal.tsx

@@ -56,7 +56,6 @@ const SelectSoftwareModal = ({
         selectedSoftwareIds
       );
     } catch (e) {
-      console.log("error");
       renderFlash("error", "Couldn't save software. Please try again.");
     }
     setIsSaving(false);

frontend/pages/hosts/details/cards/Certificates/Certificates.tsx

@@ -10,6 +10,7 @@ import { HostPlatform } from "interfaces/platform";
 import Card from "components/Card";
 import CardHeader from "components/CardHeader";
 import DataError from "components/DataError";
+import DeviceUserError from "components/DeviceUserError";
 
 import CertificatesTable from "./CertificatesTable";
 
@@ -47,7 +48,13 @@ const CertificatesCard = ({
   onSortChange,
 }: ICertificatesProps) => {
   const renderContent = () => {
-    if (isError) return <DataError verticalPaddingSize="pad-large" />;
+    if (isError) {
+      return isMyDevicePage ? (
+        <DeviceUserError />
+      ) : (
+        <DataError verticalPaddingSize="pad-large" />
+      );
+    }
 
     return (
       <CertificatesTable

frontend/pages/hosts/details/cards/Software/HostSoftware.tsx

@@ -24,6 +24,7 @@ import { AppContext } from "context/app";
 import Card from "components/Card/Card";
 import CardHeader from "components/CardHeader";
 import DataError from "components/DataError";
+import DeviceUserError from "components/DeviceUserError";
 import Spinner from "components/Spinner";
 import SoftwareFiltersModal from "pages/SoftwarePage/components/modals/SoftwareFiltersModal";
 
@@ -381,7 +382,12 @@ const HostSoftware = ({
     }
     return (
       <>
-        {isError && <DataError verticalPaddingSize="pad-xxxlarge" />}
+        {isError &&
+          (isMyDevicePage ? (
+            <DeviceUserError />
+          ) : (
+            <DataError verticalPaddingSize="pad-xxxlarge" />
+          ))}
         {!isError && (
           <HostSoftwareTable
             isLoading={

frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx

@@ -27,7 +27,7 @@ import EmptySoftwareTable from "pages/SoftwarePage/components/tables/EmptySoftwa
 import Card from "components/Card";
 import CardHeader from "components/CardHeader";
 import CustomLink from "components/CustomLink";
-import DataError from "components/DataError";
+import DeviceUserError from "components/DeviceUserError";
 import EmptyTable from "components/EmptyTable";
 import Spinner from "components/Spinner";
 import SearchField from "components/forms/fields/SearchField";
@@ -311,7 +311,7 @@ const SoftwareSelfService = ({
     }
 
     if (isError) {
-      return <DataError verticalPaddingSize="pad-xxxlarge" />;
+      return <DeviceUserError />; // Only shown on DeviceUserPage not HostDetailsPage
     }
 
     if (isEmpty || !selfServiceData) {