add better error for manual enroll modal (#11845)

relates to #11376 

adds improved UI for error state of manual enroll mdm modal


![image](https://github.com/fleetdm/fleet/assets/1153709/b7d25661-4049-4f6a-b44b-b8c6558dd046)


- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality

changes/issue-11376-add-better-error-for-manual-modal

@@ -0,0 +1 @@
+- add better UI error for manual enroll mdm modal

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

@@ -7,7 +7,7 @@ interface IAutoEnrollMdmModalProps {
   onCancel: () => void;
 }
 
-const baseClass = "auto-enroll-mdm-modal enroll-mdm-modal";
+const baseClass = "auto-enroll-mdm-modal";
 
 const AutoEnrollMdmModal = ({
   onCancel,

frontend/pages/hosts/details/DeviceUserPage/AutoEnrollMdmModal/_styles.scss

@@ -0,0 +1,3 @@
+.auto-enroll-mdm-modal {
+  @include enroll-mdm-modal;
+}

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

@@ -16,7 +16,7 @@ interface IManualEnrollMdmModalProps {
   token?: string;
 }
 
-const baseClass = "manual-enroll-mdm-modal enroll-mdm-modal";
+const baseClass = "manual-enroll-mdm-modal";
 
 const ManualEnrollMdmModal = ({
   onCancel,
@@ -35,6 +35,7 @@ const ManualEnrollMdmModal = ({
     () => mdmAPI.downloadDeviceUserEnrollmentProfile(token),
     {
       refetchOnWindowFocus: false,
+      retry: false,
     }
   );
 
@@ -60,20 +61,17 @@ const ManualEnrollMdmModal = ({
 
     return false;
   };
-  if (isFetchingMdmProfile) {
-    return <Spinner />;
-  }
-  if (fetchMdmProfileError) {
-    return <DataError card />;
-  }
 
-  return (
-    <Modal
-      title="Turn on MDM"
-      onExit={onCancel}
-      className={baseClass}
-      width="xlarge"
-    >
+  const renderModalBody = () => {
+    if (isFetchingMdmProfile) {
+      return <Spinner />;
+    }
+
+    if (fetchMdmProfileError) {
+      return <DataError card />;
+    }
+
+    return (
       <div>
         <p className={`${baseClass}__description`}>
           To turn on MDM, Apple Inc. requires that you download and install a
@@ -125,6 +123,17 @@ const ManualEnrollMdmModal = ({
           </Button>
         </div>
       </div>
+    );
+  };
+
+  return (
+    <Modal
+      title="Turn on MDM"
+      onExit={onCancel}
+      className={baseClass}
+      width="xlarge"
+    >
+      {renderModalBody()}
     </Modal>
   );
 };

frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss

@@ -0,0 +1,7 @@
+.manual-enroll-mdm-modal {
+  @include enroll-mdm-modal;
+
+  &__error-message {
+    margin: $pad-xxxlarge;
+  }
+}

frontend/pages/hosts/details/DeviceUserPage/_styles.scss

@@ -3,24 +3,7 @@
     height: 50px;
   }
 }
-.enroll-mdm-modal {
-  &__description {
-    margin: $pad-large 0;
-  }
 
-  &__download-button {
-    margin-top: 12px;
-  }
-
-  ol {
-    padding-left: 0;
-  }
-
-  li {
-    margin-bottom: $pad-large;
-    list-style-position: inside;
-  }
-}
 .device-user {
   display: flex;
   flex-direction: column;

frontend/styles/var/mixins.scss

@@ -88,3 +88,23 @@ $max-width: 2560px;
     margin-right: $pad-medium;
   }
 }
+
+// used to share styles across the manual enroll mdm modal and the auto enroll mdm modal.
+@mixin enroll-mdm-modal {
+  &__description {
+    margin: $pad-large 0;
+  }
+
+  &__download-button {
+    margin-top: 12px;
+  }
+
+  ol {
+    padding-left: 0;
+  }
+
+  li {
+    margin-bottom: $pad-large;
+    list-style-position: inside;
+  }
+}