refactor(admin): use AlertDialog for destructive confirmation dialogs

web/sdk/admin/views/organizations/details/members/remove-member.tsx

@@ -5,7 +5,7 @@ import {
 } from "@raystack/proton/frontier";
 import { create } from "@bufbuild/protobuf";
 import { useMutation } from "@connectrpc/connect-query";
-import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara";
+import { AlertDialog, Button, toastManager } from "@raystack/apsara";
 import { handleConnectError } from "~/utils/error";
 import { useTerminology } from "../../../../hooks/useTerminology";
 
@@ -60,31 +60,24 @@ export const RemoveMember = ({
   }
 
   return (
-    <Dialog open onOpenChange={onClose}>
-      <Dialog.Content>
-        <Dialog.Header>
-          <Dialog.Title>Remove {t.member({ case: "capital" })}</Dialog.Title>
-          <Dialog.CloseButton data-test-id="remove-member-close-button" />
-        </Dialog.Header>
-        <Dialog.Body>
-          <Flex direction="column" gap={7}>
-            <Text variant="secondary">
-              Removing this {t.member({ case: "lower" })} will revoke all their access to the{" "}
-              {t.organization({ case: "lower" })}. This action cannot be undone. The {t.member({ case: "lower" })} will lose
-              all assigned roles and permissions immediately.
-            </Text>
-            <Text variant="secondary">
-              Are you sure you want to remove this {t.member({ case: "lower" })}?
-            </Text>
-          </Flex>
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Dialog.Close
+    <AlertDialog open onOpenChange={onClose}>
+      <AlertDialog.Content>
+        <AlertDialog.Header>
+          <AlertDialog.Title>Remove {t.member({ case: "capital" })}</AlertDialog.Title>
+          <AlertDialog.Description>
+            Removing this {t.member({ case: "lower" })} will revoke all their access to the{" "}
+            {t.organization({ case: "lower" })}. This action cannot be undone. The {t.member({ case: "lower" })} will lose
+            all assigned roles and permissions immediately. Are you sure you want to remove this {t.member({ case: "lower" })}?
+          </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+          <AlertDialog.Close
             render={
               <Button
                 type="button"
                 variant="outline"
                 color="neutral"
+                disabled={isPending}
                 data-test-id="remove-member-cancel-button"
               >
                 Cancel
@@ -101,8 +94,8 @@ export const RemoveMember = ({
           >
             Remove
           </Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog>
+        </AlertDialog.Footer>
+      </AlertDialog.Content>
+    </AlertDialog>
   );
 };

web/sdk/admin/views/users/details/layout/suspend-user.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara";
+import { AlertDialog, Button, toastManager } from "@raystack/apsara";
 import { useTerminology } from "../../../../hooks/useTerminology";
 
 interface SuspendDropdownProps {
@@ -29,25 +29,24 @@ export const SuspendUser = ({
   };
 
   return (
-    <Dialog open onOpenChange={onClose}>
-      <Dialog.Content>
-        <Dialog.Body>
-          <Flex direction="column" gap={3}>
-            <Dialog.Title>Suspend {t.user({ case: "capital" })}</Dialog.Title>
-            <Text variant="secondary">
-              Suspending this {t.user({ case: "lower" })} will permanently restrict access to its
-              content, disable communication, and prevent any future
-              interactions. Are you sure you want to proceed?
-            </Text>
-          </Flex>
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Dialog.Close
+    <AlertDialog open onOpenChange={onClose}>
+      <AlertDialog.Content>
+        <AlertDialog.Header>
+          <AlertDialog.Title>Suspend {t.user({ case: "capital" })}</AlertDialog.Title>
+          <AlertDialog.Description>
+            Suspending this {t.user({ case: "lower" })} will permanently restrict access to its
+            content, disable communication, and prevent any future
+            interactions. Are you sure you want to proceed?
+          </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+          <AlertDialog.Close
             render={
               <Button
                 type="button"
                 variant="outline"
                 color="neutral"
+                disabled={isSubmitting}
                 data-test-id="admin-user-details-suspend-cancel"
               >
                 Cancel
@@ -65,8 +64,8 @@ export const SuspendUser = ({
           >
             Suspend
           </Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog>
+        </AlertDialog.Footer>
+      </AlertDialog.Content>
+    </AlertDialog>
   );
 };

web/sdk/admin/views/users/details/security/sessions/revoke-session-confirm.tsx

@@ -1,10 +1,8 @@
 import { useState } from 'react';
 import {
-  Button,
   Dialog,
-  Flex,
-  List,
-  Text
+  Button,
+  List
 } from '@raystack/apsara';
 import { RevokeSessionFinalConfirm } from './revoke-session-final-confirm';
 import { formatDeviceDisplay } from './index';
@@ -39,16 +37,11 @@ export const RevokeSessionConfirm = ({ isOpen, onOpenChange, sessionInfo, onRevo
   return (
     <>
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <Dialog.Content
-        style={{ padding: 0, maxWidth: '400px', width: '100%' }}
-      >
+      <Dialog.Content showCloseButton={false}>
         <Dialog.Header className={styles.revokeSessionConfirmHeader}>
-          <Flex justify="between" align="center" width="full">
-            <Text size="regular">
+          <Dialog.Title>
             {sessionInfo ? formatDeviceDisplay(sessionInfo.browser, sessionInfo.operatingSystem) : "Unknown browser and OS"}
-            </Text>
-            <Dialog.CloseButton data-test-id="frontier-sdk-close-revoke-session-dialog" />
-          </Flex>
+          </Dialog.Title>
         </Dialog.Header>
 
         <Dialog.Body className={styles.revokeSessionConfirmBody}>
@@ -73,27 +66,28 @@ export const RevokeSessionConfirm = ({ isOpen, onOpenChange, sessionInfo, onRevo
         </Dialog.Body>
 
         <Dialog.Footer>
-          <Flex justify="end" gap={5}>
-            <Button
-              variant="outline"
-              color="neutral"
-              onClick={() => onOpenChange(false)}
-              disabled={isLoading}
-              data-test-id="frontier-ui-cancel-revoke-session-dialog"
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="solid"
-              color="danger"
-              onClick={handleRevoke}
-              loading={isLoading}
-              loaderText="Revoking..."
-              data-test-id="frontier-ui-confirm-revoke-session-dialog"
-            >
-              Revoke
-            </Button>
-          </Flex>
+          <Dialog.Close
+            render={
+              <Button
+                variant="outline"
+                color="neutral"
+                disabled={isLoading}
+                data-test-id="frontier-ui-cancel-revoke-session-dialog"
+              >
+                Cancel
+              </Button>
+            }
+          />
+          <Button
+            variant="solid"
+            color="danger"
+            onClick={handleRevoke}
+            loading={isLoading}
+            loaderText="Revoking..."
+            data-test-id="frontier-ui-confirm-revoke-session-dialog"
+          >
+            Revoke
+          </Button>
         </Dialog.Footer>
       </Dialog.Content>
     </Dialog>

web/sdk/admin/views/users/details/security/sessions/revoke-session-final-confirm.tsx

@@ -1,12 +1,9 @@
 import {
+  AlertDialog,
   Button,
-  toastManager,
-  Dialog,
-  Flex,
-  Text
+  toastManager
 } from '@raystack/apsara';
 import { handleConnectError } from '~/utils/error';
-import styles from './sessions.module.css';
 
 interface RevokeSessionFinalConfirmProps {
   isOpen: boolean;
@@ -43,48 +40,41 @@ export const RevokeSessionFinalConfirm = ({
   };
 
   return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <Dialog.Content
-        style={{ padding: 0, maxWidth: '400px', width: '100%' }}
-      >
-        <Dialog.Header className={styles.revokeSessionConfirmHeader}>
-          <Dialog.Title>Revoke</Dialog.Title>
-          <Dialog.CloseButton data-test-id="frontier-ui-close-final-revoke-dialog" />
-        </Dialog.Header>
+    <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Content>
+        <AlertDialog.Header>
+          <AlertDialog.Title>Revoke</AlertDialog.Title>
+          <AlertDialog.Description>
+            Are you sure you want to revoke this session? This action cannot be undone.
+          </AlertDialog.Description>
+        </AlertDialog.Header>
 
-        <Dialog.Body className={styles.revokeSessionFinalConfirmBody}>
-          <Flex direction="column" gap={4}>
-            <Text size="small" variant="secondary">
-              Are you sure you want to revoke this session? This action cannot be undone.
-            </Text>
-          </Flex>
-        </Dialog.Body>
-
-        <Dialog.Footer>
-          <Flex justify="end" gap={5}>
-            <Button
-              variant="outline"
-              color="neutral"
-              onClick={() => onOpenChange(false)}
-              data-test-id="frontier-ui-cancel-final-revoke-dialog"
-              disabled={isLoading}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="solid"
-              color="danger"
-              onClick={handleConfirm}
-              data-test-id="frontier-ui-confirm-final-revoke-dialog"
-              disabled={isLoading}
-              loading={isLoading}
-              loaderText="Revoking..."
-            >
-              Revoke
-            </Button>
-          </Flex>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog>
+        <AlertDialog.Footer>
+          <AlertDialog.Close
+            render={
+              <Button
+                variant="outline"
+                color="neutral"
+                data-test-id="frontier-ui-cancel-final-revoke-dialog"
+                disabled={isLoading}
+              >
+                Cancel
+              </Button>
+            }
+          />
+          <Button
+            variant="solid"
+            color="danger"
+            onClick={handleConfirm}
+            data-test-id="frontier-ui-confirm-final-revoke-dialog"
+            disabled={isLoading}
+            loading={isLoading}
+            loaderText="Revoking..."
+          >
+            Revoke
+          </Button>
+        </AlertDialog.Footer>
+      </AlertDialog.Content>
+    </AlertDialog>
   );
 };

web/sdk/admin/views/users/details/security/sessions/sessions.module.css

@@ -40,9 +40,4 @@
   border-bottom: 1px solid var(--rs-color-border-base-primary);
 }
 
-.revokeSessionFinalConfirmBody {
-  padding: 0 var(--rs-space-7) var(--rs-space-6) var(--rs-space-7);
-  border-bottom: 1px solid var(--rs-color-border-base-primary);
-}
-
 /* Revoke Session Confirm END */