From 6c5d75e2e0ab04bdca5fc8ada99faefd9122631a Mon Sep 17 00:00:00 2001
From: Lucas Manuel Rodriguez <lucas@fleetdm.com>
Date: Fri, 26 Sep 2025 13:02:52 -0300
Subject: [PATCH] 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   |  1 +
 .../ConditionalAccess/ConditionalAccess.tsx   | 43 +++++++++++--------
 2 files changed, 26 insertions(+), 18 deletions(-)
 create mode 100644 changes/32419-fix-conditional-access-delete

diff --git a/changes/32419-fix-conditional-access-delete b/changes/32419-fix-conditional-access-delete
new file mode 100644
index 0000000000..2e027f5603
--- /dev/null
+++ b/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.
diff --git a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx
index 99ee47e82a..116251988d 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx
+++ b/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>