Request encryption key change from API and update modal copy (#10495)

## Addresses the updated specs of #9414

Update the behavior and copy of the DiskEncryptionKeyResetRequired
banner and ResetKeyModal per new specs.
* Note that this feature working correctly depends on the completion of
the API speced in #9496

![Screenshot 2023-03-14 at 4 55 46
PM](https://user-images.githubusercontent.com/61553566/225168712-d5f62b7b-ca90-4876-9c77-f7c1d1436789.png)
![Screenshot 2023-03-14 at 4 56 44
PM](https://user-images.githubusercontent.com/61553566/225168730-7d0cb9ff-81ea-4ee6-92b4-14326f3b549e.png)
![Screenshot 2023-03-14 at 4 55 50
PM](https://user-images.githubusercontent.com/61553566/225168744-13368cc2-12ab-4b5f-9be5-03247529154f.png)

## Checklist for submitter
- [x] Manual QA for all new/changed functionality

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

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

@@ -416,7 +416,10 @@ const DeviceUserPage = ({
             {showInfoModal && <InfoModal onCancel={toggleInfoModal} />}
             {showEnrollMdmModal && renderEnrollMdmModal()}
             {showResetKeyModal && (
-              <ResetKeyModal onCancel={toggleResetKeyModal} />
+              <ResetKeyModal
+                onClose={toggleResetKeyModal}
+                deviceAuthToken={deviceAuthToken}
+              />
             )}
           </div>
         )}

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

@@ -1,45 +1,45 @@
-import React, { useState } from "react";
+import React from "react";
 
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
+import mdmAPI from "services/entities/mdm";
+import { useQuery } from "react-query";
+import Spinner from "components/Spinner";
+import DataError from "components/DataError";
 
 interface IResetKeyModalProps {
-  onCancel: () => void;
+  onClose: () => void;
+  deviceAuthToken: string;
 }
 
 const baseClass = "reset-key-modal";
 
-const ResetKeyModal = ({ onCancel }: IResetKeyModalProps): JSX.Element => {
-  const [success, setSuccess] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+const ResetKeyModal = ({
+  onClose,
+  deviceAuthToken,
+}: IResetKeyModalProps): JSX.Element => {
+  const { isLoading: isLoadingResetDEKey, error: errorResetDEKey } = useQuery(
+    ["resetDEkey"],
+    () => mdmAPI.resetEncryptionKey(deviceAuthToken)
+  );
 
-  //  TODO: actually make this work: https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/%F0%9F%9A%A7-Fleet-EE-(dev-ready%2C-scratchpad)?node-id=11728%3A323033&t=GbmGwTkgjENhmJmO-1
-  const startNativeKeyReset = () => {
-    setIsLoading(true);
-    setTimeout(() => {
-      setSuccess(true);
-    }, 1000);
-  };
+  const renderModalBody = () => {
+    if (isLoadingResetDEKey) {
+      return <Spinner />;
+    }
+    if (errorResetDEKey) {
+      return <DataError />;
+    }
 
-  return (
-    <Modal title="Reset key" onExit={onCancel} className={baseClass}>
+    return (
       <div>
         <ol>
           <li>
-            Click <b>Start</b> and enter your username and password.
-            {success ? (
-              <div className={`${baseClass}__success`}>Success!</div>
-            ) : (
-              <Button
-                type="button"
-                onClick={startNativeKeyReset}
-                variant="brand"
-                className={`${baseClass}__start-button`}
-                isLoading={isLoading}
-              >
-                Start
-              </Button>
-            )}
+            Wait 30 seconds for the <b>Reset disk encryption key</b> pop up to
+            open.
+          </li>
+          <li>
+            In the popup, enter the password you use to login to your Mac.
           </li>
           <li>
             Close this window and select <b>Refetch</b> on your My device page.
@@ -47,11 +47,16 @@ const ResetKeyModal = ({ onCancel }: IResetKeyModalProps): JSX.Element => {
           </li>
         </ol>
         <div className="modal-cta-wrap">
-          <Button type="button" onClick={onCancel} variant="brand">
+          <Button type="button" onClick={onClose} variant="brand">
             Done
           </Button>
         </div>
       </div>
+    );
+  };
+  return (
+    <Modal title="Reset key" onExit={onClose} className={baseClass}>
+      {renderModalBody()}
     </Modal>
   );
 };

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

@@ -1,14 +1,4 @@
 .reset-key-modal {
-  &__start-button {
-    margin-top: 12px;
-  }
-
-  &__success {
-    margin-top: 12px;
-    padding: $pad-small;
-    height: 22px;
-  }
-
   ol {
     padding-left: 0;
   }

frontend/services/entities/mdm.ts

@@ -8,6 +8,10 @@ export default {
     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));
+  },
   unenrollHostFromMdm: (hostId: number, timeout?: number) => {
     const { HOST_MDM_UNENROLL } = endpoints;
     return sendRequest(

frontend/utilities/endpoints.ts

@@ -11,6 +11,9 @@ export default {
   DEVICE_USER_MDM_ENROLLMENT_PROFILE: (token: string): string => {
     return `/${API_VERSION}/fleet/device/${token}/mdm/apple/manual_enrollment_profile`;
   },
+  DEVICE_USER_RESET_ENCRYPTION_KEY: (token: string): string => {
+    return `/${API_VERSION}/fleet/device/${token}/rotate_encryption_key`;
+  },
   DOWNLOAD_INSTALLER: `/${API_VERSION}/fleet/download_installer`,
   ENABLE_USER: (id: number): string => {
     return `/${API_VERSION}/fleet/users/${id}/enable`;