From fb76123b169cc35f88e952339aa7ff868663fd2a Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 26 Jul 2022 06:36:33 -0400
Subject: [PATCH] Fleet Desktop UI: Add device user error for invalid token
 (#6850)

---
 changes/issue-6349-device-user-error-state    |  1 +
 frontend/components/DataError/DataError.tsx   |  3 --
 .../DeviceUserError/DeviceUserError.tsx       | 26 +++++++++++
 .../components/DeviceUserError/_styles.scss   | 43 +++++++++++++++++++
 frontend/components/DeviceUserError/index.ts  |  1 +
 .../details/DeviceUserPage/DeviceUserPage.tsx |  7 +--
 6 files changed, 73 insertions(+), 8 deletions(-)
 create mode 100644 changes/issue-6349-device-user-error-state
 create mode 100644 frontend/components/DeviceUserError/DeviceUserError.tsx
 create mode 100644 frontend/components/DeviceUserError/_styles.scss
 create mode 100644 frontend/components/DeviceUserError/index.ts

diff --git a/changes/issue-6349-device-user-error-state b/changes/issue-6349-device-user-error-state
new file mode 100644
index 0000000000..6218a64a5d
--- /dev/null
+++ b/changes/issue-6349-device-user-error-state
@@ -0,0 +1 @@
+* Convert uptime column to last restarted on the Manage hosts page
\ No newline at end of file
diff --git a/frontend/components/DataError/DataError.tsx b/frontend/components/DataError/DataError.tsx
index bc5ceb619b..38322daf63 100644
--- a/frontend/components/DataError/DataError.tsx
+++ b/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";
diff --git a/frontend/components/DeviceUserError/DeviceUserError.tsx b/frontend/components/DeviceUserError/DeviceUserError.tsx
new file mode 100644
index 0000000000..a204d2b7d7
--- /dev/null
+++ b/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;
diff --git a/frontend/components/DeviceUserError/_styles.scss b/frontend/components/DeviceUserError/_styles.scss
new file mode 100644
index 0000000000..c0b1c3462c
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/frontend/components/DeviceUserError/index.ts b/frontend/components/DeviceUserError/index.ts
new file mode 100644
index 0000000000..3d8ee5d8eb
--- /dev/null
+++ b/frontend/components/DeviceUserError/index.ts
@@ -0,0 +1 @@
+export { default } from "./DeviceUserError";
diff --git a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
index febc070086..f33d1f7721 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
+++ b/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>
   );
 };