Fix conditional access deletion (#33481)

Resolves #32419.

I took a stab at it while fixing #32420.

Sorry, missed to record with audio:
- I test with the proxy being down (to simulate failure when deleting)
and that the delete modal is not closed.
- Spinner during the delete API request.
- Cancel button disabled during the delete API request/.
- Tenant ID is cleared after successful deletion.


https://github.com/user-attachments/assets/dbad0613-a8bd-455d-8741-83c626328437

- [X] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.

## Testing

- [X] QA'd all new/changed functionality manually

changes/32419-fix-conditional-access-delete

@@ -0,0 +1 @@
+* Fixed deletion of conditional access integration by adding a spinner and clearing the tenant ID after the deletion.

frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx

@@ -40,14 +40,31 @@ const MSETID = "microsoft_entra_tenant_id";
 interface IDeleteConditionalAccessModal {
   toggleDeleteConditionalAccessModal: () => void;
   onDelete: () => void;
-  isUpdating: boolean;
 }
 
 const DeleteConditionalAccessModal = ({
   toggleDeleteConditionalAccessModal,
   onDelete,
-  isUpdating,
 }: IDeleteConditionalAccessModal) => {
+  const { renderFlash } = useContext(NotificationContext);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await conditionalAccessAPI.deleteMicrosoftConditionalAccess();
+      renderFlash("success", "Successfully disconnected from Microsoft Entra.");
+      toggleDeleteConditionalAccessModal();
+      onDelete();
+    } catch {
+      renderFlash(
+        "error",
+        "Could not disconnect from Microsoft Entra, please try again."
+      );
+    }
+    setIsDeleting(false);
+  };
+
   return (
     <Modal
       title="Delete"
@@ -63,14 +80,16 @@ const DeleteConditionalAccessModal = ({
           <Button
             type="button"
             variant="alert"
-            onClick={onDelete}
-            isLoading={isUpdating}
+            onClick={handleDelete}
+            isLoading={isDeleting}
+            disabled={isDeleting}
           >
             Delete
           </Button>
           <Button
             onClick={toggleDeleteConditionalAccessModal}
             variant="inverse-alert"
+            disabled={isDeleting}
           >
             Cancel
           </Button>
@@ -282,19 +301,8 @@ const ConditionalAccess = () => {
   };
 
   const onDeleteConditionalAccess = async () => {
-    setIsUpdating(true);
-    try {
-      await conditionalAccessAPI.deleteMicrosoftConditionalAccess();
-      renderFlash("success", "Successfully disconnected from Microsoft Entra.");
-      toggleDeleteConditionalAccessModal();
-      refetchConfig();
-    } catch {
-      renderFlash(
-        "error",
-        "Could not disconnect from Microsoft Entra, please try again."
-      );
-      setIsUpdating(false);
-    }
+    setFormData({ [MSETID]: "" });
+    refetchConfig();
   };
 
   const onInputChange = ({ name, value }: IInputFieldParseTarget) => {
@@ -401,7 +409,6 @@ const ConditionalAccess = () => {
           toggleDeleteConditionalAccessModal={
             toggleDeleteConditionalAccessModal
           }
-          isUpdating={isUpdating}
         />
       )}
     </div>