Fleet Desktop UI: Add device user error for invalid token (#6850)

changes/issue-6349-device-user-error-state

@@ -0,0 +1 @@
+* Convert uptime column to last restarted on the Manage hosts page

frontend/components/DataError/DataError.tsx

@@ -1,6 +1,3 @@
-/**
- * Component when there is an error retrieving schedule set up in fleet
- */
 import React from "react";
 
 import OpenNewTabIcon from "../../../assets/images/open-new-tab-12x12@2x.png";

frontend/components/DeviceUserError/DeviceUserError.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import ErrorIcon from "../../../assets/images/icon-error-16x16@2x.png";
+
+const baseClass = "device-user-error";
+
+const DeviceUserError = (): JSX.Element => {
+  return (
+    <div className={`${baseClass}`}>
+      <div className={`${baseClass}__inner`}>
+        <div className="info">
+          <span className="info__header">
+            <img src={ErrorIcon} alt="error icon" id="error-icon" />
+            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.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeviceUserError;

frontend/components/DeviceUserError/_styles.scss

@@ -0,0 +1,43 @@
+.device-user-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  #error-icon {
+    height: 12px;
+    width: 12px;
+    margin-right: 8px;
+    margin-bottom: -1px;
+  }
+
+  a {
+    font-size: $x-small;
+    color: $core-vibrant-blue;
+    font-weight: $bold;
+    text-decoration: none;
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: row;
+    margin: $pad-xxxlarge 0;
+  }
+
+  .info {
+    &__header {
+      display: block;
+      color: $core-fleet-black;
+      font-weight: $bold;
+      font-size: $x-small;
+      text-align: center;
+    }
+    &__data {
+      display: block;
+      color: $core-fleet-black;
+      font-weight: normal;
+      font-size: $x-small;
+      text-align: center;
+      margin-top: 10px;
+    }
+  }
+}

frontend/components/DeviceUserError/index.ts

@@ -0,0 +1 @@
+export { default } from "./DeviceUserError";

frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useContext, useCallback } from "react";
 import { Params } from "react-router/lib/Router";
 import { useQuery } from "react-query";
-import { useErrorHandler } from "react-error-boundary";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 
 import classnames from "classnames";
@@ -12,7 +11,7 @@ import deviceUserAPI from "services/entities/device_user";
 import { IHost, IDeviceMappingResponse } from "interfaces/host";
 import { ISoftware } from "interfaces/software";
 import { IHostPolicy } from "interfaces/policy";
-import PageError from "components/DataError";
+import DeviceUserError from "components/DeviceUserError";
 // @ts-ignore
 import OrgLogoIcon from "components/icons/OrgLogoIcon";
 import Spinner from "components/Spinner";
@@ -51,7 +50,6 @@ const DeviceUserPage = ({
 }: IDeviceUserPageProps): JSX.Element => {
   const deviceAuthToken = device_auth_token;
   const { renderFlash } = useContext(NotificationContext);
-  const handlePageError = useErrorHandler();
 
   const [isPremiumTier, setIsPremiumTier] = useState<boolean>(false);
   const [showInfoModal, setShowInfoModal] = useState<boolean>(false);
@@ -150,7 +148,6 @@ const DeviceUserPage = ({
           // exit early because refectch is pending so we can avoid unecessary steps below
         }
       },
-      onError: (error) => handlePageError(error),
     }
   );
 
@@ -316,7 +313,7 @@ const DeviceUserPage = ({
           </ul>
         </div>
       </nav>
-      {loadingDeviceUserError ? <PageError /> : renderDeviceUserPage()}
+      {loadingDeviceUserError ? <DeviceUserError /> : renderDeviceUserPage()}
     </div>
   );
 };