From 0474d72e9a4f27ab9008f65b9a542de6f507135f Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Tue, 23 Apr 2024 17:54:54 +0100
Subject: [PATCH] fix downloading manual enrollment profile (#18487)

relates to #18483

This fixes an issue with downloading a manual enrollment profile on the
device user page. This changes how we download the file to use an anchor
tag and default browser behaviour instead of doing it in JS with the
FileSaver library.

We will probably want to remove all FileSaver library implementations in
the future
---
 .../issue-18483-fix-download-enroll-profile   |  1 +
 .../ManualEnrollMdmModal.tsx                  | 88 +++----------------
 .../ManualEnrollMdmModal/_styles.scss         | 18 +++-
 frontend/services/entities/mdm.ts             |  4 -
 4 files changed, 31 insertions(+), 80 deletions(-)
 create mode 100644 changes/issue-18483-fix-download-enroll-profile

diff --git a/changes/issue-18483-fix-download-enroll-profile b/changes/issue-18483-fix-download-enroll-profile
new file mode 100644
index 0000000000..9a5ce3f685
--- /dev/null
+++ b/changes/issue-18483-fix-download-enroll-profile
@@ -0,0 +1 @@
+- fix issue with downloading manual enrollment profile on the my device page
diff --git a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx
index 363ed9100c..0e75c54958 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx
@@ -1,15 +1,11 @@
-import React, { useContext, useState } from "react";
-import { useQuery } from "react-query";
-import FileSaver from "file-saver";
+import React from "react";
 
-import { NotificationContext } from "context/notification";
+import endpoints from "utilities/endpoints";
 
-import DataError from "components/DataError";
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
-import Spinner from "components/Spinner";
 
-import mdmAPI from "services/entities/mdm";
+const { DEVICE_USER_MDM_ENROLLMENT_PROFILE } = endpoints;
 
 interface IManualEnrollMdmModalProps {
   onCancel: () => void;
@@ -22,54 +18,8 @@ const ManualEnrollMdmModal = ({
   onCancel,
   token = "",
 }: IManualEnrollMdmModalProps): JSX.Element => {
-  const { renderFlash } = useContext(NotificationContext);
-
-  const [isDownloadingProfile, setIsDownloadingProfile] = useState(false);
-
-  const {
-    data: enrollmentProfile,
-    error: fetchMdmProfileError,
-    isFetching: isFetchingMdmProfile,
-  } = useQuery<string, Error>(
-    ["enrollment profile"],
-    () => mdmAPI.downloadDeviceUserEnrollmentProfile(token),
-    {
-      refetchOnWindowFocus: false,
-      retry: false,
-    }
-  );
-
-  const onDownloadProfile = (evt: React.MouseEvent) => {
-    evt.preventDefault();
-    setIsDownloadingProfile(true);
-
-    setTimeout(() => setIsDownloadingProfile(false), 1000);
-
-    if (enrollmentProfile) {
-      const filename = "fleet-mdm-enrollment-profile.mobileconfig";
-      const file = new global.window.File([enrollmentProfile], filename, {
-        type: "application/x-apple-aspen-config",
-      });
-
-      FileSaver.saveAs(file);
-    } else {
-      renderFlash(
-        "error",
-        "Your enrollment profile could not be downloaded. Please try again."
-      );
-    }
-
-    return false;
-  };
-
   const renderModalBody = () => {
-    if (isFetchingMdmProfile) {
-      return <Spinner />;
-    }
-
-    if (fetchMdmProfileError) {
-      return <DataError card />;
-    }
+    const downloadUrl = `/api${DEVICE_USER_MDM_ENROLLMENT_PROFILE(token)}`;
 
     return (
       <div>
@@ -79,26 +29,16 @@ const ManualEnrollMdmModal = ({
         </p>
         <ol>
           <li>
-            {!isFetchingMdmProfile && (
-              <>
-                <span>Download your profile.</span>
-              </>
-            )}
-            {fetchMdmProfileError ? (
-              <span className={`${baseClass}__error`}>
-                {fetchMdmProfileError}
-              </span>
-            ) : (
-              <Button
-                type="button"
-                onClick={onDownloadProfile}
-                variant="brand"
-                isLoading={isDownloadingProfile}
-                className={`${baseClass}__download-button`}
-              >
-                Download
-              </Button>
-            )}
+            <span>Download your profile.</span>
+            <br />
+            {/* TODO: make a link component that appears as a button. */}
+            <a
+              className={`${baseClass}__download-link`}
+              href={downloadUrl}
+              download
+            >
+              Download
+            </a>
           </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 beffa8375e..f1858034a3 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss
@@ -1,7 +1,21 @@
 .manual-enroll-mdm-modal {
   @include enroll-mdm-modal;
 
-  &__error-message {
-    margin: $pad-xxxlarge;
+  // TODO: make a link component that appears as a button.
+  &__download-link {
+    display: inline-block;
+    border-radius: 6px;
+    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 eb580d06f6..826ea9f7fb 100644
--- a/frontend/services/entities/mdm.ts
+++ b/frontend/services/entities/mdm.ts
@@ -66,10 +66,6 @@ export interface IAppleSetupEnrollmentProfileResponse {
 }
 
 const mdmService = {
-  downloadDeviceUserEnrollmentProfile: (token: string) => {
-    const { DEVICE_USER_MDM_ENROLLMENT_PROFILE } = endpoints;
-    return sendRequest("GET", DEVICE_USER_MDM_ENROLLMENT_PROFILE(token));
-  },
   resetEncryptionKey: (token: string) => {
     const { DEVICE_USER_RESET_ENCRYPTION_KEY } = endpoints;
     return sendRequest("POST", DEVICE_USER_RESET_ENCRYPTION_KEY(token));