From f66b41ef379c63b2c20eb378e97007d1f4f380b1 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Fri, 18 Oct 2024 14:43:05 +0100
Subject: [PATCH] fix for downloading manual enrolment profile when device
 token is expired (#23004)

relates to #22322

Makes a fix in the UI so that we show an error message when the device
token is expired and the user tried to download the mdm enrollment
profile.

**Showing error when device token is expired and tried to download mdm
enrollment profile**
https://www.loom.com/share/6306dcf851c24d5f8916ecb2498288cb


- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [x] Manual QA for all new/changed functionality
---
 changes/22322-fix-issue-man-enrollment-device |  2 ++
 .../details/DeviceUserPage/DeviceUserPage.tsx | 11 +++++-
 .../ManualEnrollMdmModal.tsx                  | 36 +++++++++++++------
 .../ManualEnrollMdmModal/_styles.scss         | 16 +--------
 frontend/services/entities/mdm.ts             |  5 +++
 5 files changed, 43 insertions(+), 27 deletions(-)
 create mode 100644 changes/22322-fix-issue-man-enrollment-device

diff --git a/changes/22322-fix-issue-man-enrollment-device b/changes/22322-fix-issue-man-enrollment-device
new file mode 100644
index 0000000000..c6caafb1b3
--- /dev/null
+++ b/changes/22322-fix-issue-man-enrollment-device
@@ -0,0 +1,2 @@
+- fix issue when trying to download the manual enrollment profile when device token is expired. We
+  now show an error for this case.
diff --git a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
index e75d125a91..53db103db7 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
@@ -23,6 +23,8 @@ import Spinner from "components/Spinner";
 import Button from "components/buttons/Button";
 import TabsWrapper from "components/TabsWrapper";
 import Icon from "components/Icon/Icon";
+import FlashMessage from "components/FlashMessage";
+
 import { normalizeEmptyValues } from "utilities/helpers";
 import PATHS from "router/paths";
 import {
@@ -87,7 +89,9 @@ const DeviceUserPage = ({
 }: IDeviceUserPageProps): JSX.Element => {
   const deviceAuthToken = device_auth_token;
 
-  const { renderFlash } = useContext(NotificationContext);
+  const { renderFlash, notification, hideFlash } = useContext(
+    NotificationContext
+  );
 
   const [isPremiumTier, setIsPremiumTier] = useState(false);
   const [showInfoModal, setShowInfoModal] = useState(false);
@@ -477,6 +481,11 @@ const DeviceUserPage = ({
   return (
     <div className="app-wrap">
       <UnsupportedScreenSize />
+      <FlashMessage
+        fullWidth
+        notification={notification}
+        onRemoveFlash={hideFlash}
+      />
       <nav className="site-nav-container">
         <div className="site-nav-content">
           <ul className="site-nav-list">
diff --git a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx
index c1c2877e13..02c46585ad 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
+import FileSaver from "file-saver";
 
-import endpoints from "utilities/endpoints";
+import mdmAPI from "services/entities/mdm";
 
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
-
-const { DEVICE_USER_MDM_ENROLLMENT_PROFILE } = endpoints;
+import { NotificationContext } from "context/notification";
 
 interface IManualEnrollMdmModalProps {
   onCancel: () => void;
@@ -18,9 +18,24 @@ const ManualEnrollMdmModal = ({
   onCancel,
   token = "",
 }: IManualEnrollMdmModalProps): JSX.Element => {
-  const renderModalBody = () => {
-    const downloadUrl = `/api${DEVICE_USER_MDM_ENROLLMENT_PROFILE(token)}`;
+  const { renderFlash } = useContext(NotificationContext);
 
+  const onDownload = async () => {
+    try {
+      const profileContent = await mdmAPI.downloadManualEnrollmentProfile(
+        token
+      );
+      const file = new File(
+        [profileContent],
+        "fleet-mdm-enrollment-profile.mobileconfig"
+      );
+      FileSaver.saveAs(file);
+    } catch (e) {
+      renderFlash("error", "Failed to download the profile. Please try again.");
+    }
+  };
+
+  const renderModalBody = () => {
     return (
       <div>
         <p className={`${baseClass}__description`}>
@@ -32,13 +47,12 @@ const ManualEnrollMdmModal = ({
             <span>Download your profile.</span>
             <br />
             {/* TODO: make a link component that appears as a button. */}
-            <a
-              className={`${baseClass}__download-link`}
-              href={downloadUrl}
-              download
+            <Button
+              className={`${baseClass}__download-button`}
+              onClick={onDownload}
             >
               Download
-            </a>
+            </Button>
           </li>
           <li>Open the profile you just downloaded.</li>
           <li>
diff --git a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss
index f1858034a3..db3410b270 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss
@@ -1,21 +1,7 @@
 .manual-enroll-mdm-modal {
   @include enroll-mdm-modal;
 
-  // TODO: make a link component that appears as a button.
-  &__download-link {
-    display: inline-block;
-    border-radius: 6px;
+  &__download-button {
     margin-top: 12px;
-    background-color: $core-vibrant-blue;
-    color: $core-white;
-    padding: $pad-small $pad-medium;
-
-    &:hover {
-      background-color: $core-vibrant-blue-over;
-    }
-
-    &:active {
-      background-color: $core-vibrant-blue-down;
-    }
   }
 }
diff --git a/frontend/services/entities/mdm.ts b/frontend/services/entities/mdm.ts
index f8cae4461f..7a4efca932 100644
--- a/frontend/services/entities/mdm.ts
+++ b/frontend/services/entities/mdm.ts
@@ -331,6 +331,11 @@ const mdmService = {
     const url = `${MDM_COMMANDS_RESULTS}?command_uuid=${command_uuid}`;
     return sendRequest("GET", url);
   },
+
+  downloadManualEnrollmentProfile: (token: string) => {
+    const { DEVICE_USER_MDM_ENROLLMENT_PROFILE } = endpoints;
+    return sendRequest("GET", DEVICE_USER_MDM_ENROLLMENT_PROFILE(token));
+  },
 };
 
 export default mdmService;