Fleet UI: Center empty/error states (#42736)

frontend/components/DeviceUserError/DeviceUserError.tsx

@@ -1,6 +1,8 @@
 import React from "react";
-import Icon from "components/Icon/Icon";
+
 import classNames from "classnames";
+import Icon from "components/Icon/Icon";
+import DataError from "components/DataError";
 
 const baseClass = "device-user-error";
 
@@ -10,28 +12,38 @@ interface IDeviceUserErrorProps {
   /** Modifies error message for iPhone/iPad/Android */
   isMobileDevice?: boolean;
   isAuthenticationError?: boolean;
-  platform?: string;
+  isErrorSetupSteps?: boolean;
 }
 
 const DeviceUserError = ({
   isMobileView = false,
   isMobileDevice = false,
   isAuthenticationError = false,
-  platform,
+  isErrorSetupSteps = false,
 }: IDeviceUserErrorProps): JSX.Element => {
   const wrapperClassnames = classNames(baseClass, {
     [`${baseClass}__mobile-view`]: isMobileView,
   });
 
-  const isIOSIPadOS = platform === "ios" || platform === "ipados";
-
   // Default: "Something went wrong"
   let headerContent: React.ReactNode = (
     <>
       <Icon name="error" /> Something went wrong
     </>
   );
-  let bodyContent: React.ReactNode = <>Please contact your IT admin.</>;
+
+  let descriptionContent: React.ReactNode = <>Please contact your IT admin.</>;
+
+  if (isErrorSetupSteps) {
+    // Use generic UI error component
+    return (
+      <div className={wrapperClassnames}>
+        <div className={`${baseClass}__inner`}>
+          <DataError description="Could not get software setup status." />
+        </div>
+      </div>
+    );
+  }
 
   if (isAuthenticationError) {
     headerContent = (
@@ -42,7 +54,7 @@ const DeviceUserError = ({
           : "This URL is invalid or expired."}
       </>
     );
-    bodyContent = isMobileDevice ? (
+    descriptionContent = isMobileDevice ? (
       "Couldn't authenticate this device. Please contact your IT admin."
     ) : (
       <>
@@ -55,9 +67,11 @@ const DeviceUserError = ({
   return (
     <div className={wrapperClassnames}>
       <div className={`${baseClass}__inner`}>
-        <div className="info">
-          <span className="info__header">{headerContent}</span>
-          <span className="info__data">{bodyContent}</span>
+        <div className={`${baseClass}__content`}>
+          <span className={`${baseClass}__header`}>{headerContent}</span>
+          <span className={`${baseClass}__description`}>
+            {descriptionContent}
+          </span>
         </div>
       </div>
     </div>

frontend/components/DeviceUserError/_styles.scss

@@ -16,35 +16,34 @@
     margin: $pad-xxxlarge 0;
   }
 
-  .info {
+  &__content {
     display: flex;
     flex-direction: column;
     gap: $pad-large;
     max-width: 333px;
     padding: $pad-small;
+  }
+  &__header {
+    display: block;
+    gap: $pad-large;
+    color: $core-fleet-black;
+    font-weight: $bold;
+    font-size: $x-small;
+    text-align: center;
 
-    &__header {
-      display: block;
-      gap: $pad-large;
-      color: $core-fleet-black;
-      font-weight: $bold;
-      font-size: $x-small;
-      text-align: center;
-
-      .icon {
-        vertical-align: sub;
-        margin-right: $pad-small;
-        position: relative;
-        bottom: 1px;
-      }
-    }
-    &__data {
-      display: block;
-      color: $core-fleet-black;
-      font-weight: normal;
-      font-size: $x-small;
-      text-align: center;
-      line-height: 21px; // Matches design
+    .icon {
+      vertical-align: sub;
+      margin-right: $pad-small;
+      position: relative;
+      bottom: 1px;
     }
   }
+  &__description {
+    display: block;
+    color: $core-fleet-black;
+    font-weight: normal;
+    font-size: $x-small;
+    text-align: center;
+    line-height: 21px; // Matches design
+  }
 }