add confirm action modal

web/src/pages/PlaygroundPage/PlaygroundPage.tsx

@@ -47,12 +47,37 @@ import { formChangeLogic } from '../../shared/formLogic';
 import { openModal } from '../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../shared/hooks/modalControls/modalTypes';
 import { getLicenseInfoQueryOptions } from '../../shared/query';
+import { delay } from '../../shared/utils/delay';
 import { FoldableRadioSection } from '../FoldableRadioSection/FoldableRadioSection';
 import testIconSrc from './assets/actionable-test1.png';
 
 export const PlaygroundPage = () => {
   return (
     <div id="playground-page">
+      <Card>
+        <Button
+          variant="outlined"
+          size="big"
+          text="Open confirm modal"
+          onClick={() => {
+            openModal(ModalName.ConfirmAction, {
+              actionPromise: async () => {
+                await delay(500);
+              },
+              title: 'Test confirm modal',
+              contentMd: `Are you sure you want to delete this thing ? This action can't be undone.`,
+              submitProps: {
+                text: 'Delete',
+                variant: 'critical',
+              },
+              onSuccess: () => {
+                Snackbar.success('Deleted');
+              },
+            });
+          }}
+        />
+      </Card>
+      <Divider spacing={ThemeSpacing.Xl} />
       <Card>
         <SizedBox height={1} width={600} />
         <Skeleton height={250} width={600} />

web/src/routes/_authorized.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
 import { DisplayListModal } from '../shared/components/DisplayListModal/DisplayListModal';
+import { ConfirmActionModal } from '../shared/components/modals/ConfirmActionModal/ConfirmActionModal';
 import { LicenseExpiredModal } from '../shared/components/modals/license/LicenseExpiredModal/LicenseExpiredModal';
 import { LicenseLimitConflictModal } from '../shared/components/modals/license/LicenseLimitConflictModal/LicenseLimitConflictModal';
 import { LimitReachedModal } from '../shared/components/modals/license/LimitReachedModal/LimitReachedModal';
@@ -58,6 +59,7 @@ function RouteComponent() {
         <LicenseExpiredModal />
         <DisplayListModal />
         <SelectionModal />
+        <ConfirmActionModal />
       </AppInfoProvider>
     </AppUserProvider>
   );

web/src/shared/components/modals/ConfirmActionModal/ConfirmActionModal.tsx

@@ -0,0 +1,101 @@
+import './style.scss';
+import { useMutation } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { m } from '../../../../paraglide/messages';
+import { Button } from '../../../defguard-ui/components/Button/Button';
+import { Modal } from '../../../defguard-ui/components/Modal/Modal';
+import { RenderMarkdown } from '../../../defguard-ui/components/RenderMarkdown/RenderMarkdown';
+import { isPresent } from '../../../defguard-ui/utils/isPresent';
+import {
+  closeModal,
+  subscribeCloseModal,
+  subscribeOpenModal,
+} from '../../../hooks/modalControls/modalsSubjects';
+import type { ModalNameValue } from '../../../hooks/modalControls/modalTypes';
+import type { OpenConfirmActionModal } from '../../../hooks/modalControls/types';
+import { Controls } from '../../Controls/Controls';
+
+const modalNameValue: ModalNameValue = 'confirmAction';
+
+type ModalData = OpenConfirmActionModal;
+
+export const ConfirmActionModal = () => {
+  const [isOpen, setOpen] = useState(false);
+  const [modalData, setModalData] = useState<ModalData | null>(null);
+
+  useEffect(() => {
+    const openSub = subscribeOpenModal(modalNameValue, (data) => {
+      setModalData(data);
+      setOpen(true);
+    });
+    const closeSub = subscribeCloseModal(modalNameValue, () => setOpen(false));
+    return () => {
+      openSub.unsubscribe();
+      closeSub.unsubscribe();
+    };
+  }, []);
+  return (
+    <Modal
+      id="action-modal"
+      size="small"
+      title={modalData?.title ?? ''}
+      isOpen={isOpen}
+      onClose={() => {
+        setOpen(false);
+      }}
+      afterClose={() => {
+        setModalData(null);
+      }}
+    >
+      {isPresent(modalData) && <ModalContent data={modalData} />}
+    </Modal>
+  );
+};
+
+const ModalContent = ({ data }: { data: ModalData }) => {
+  const { mutate, isPending } = useMutation({
+    mutationFn: data.actionPromise,
+    meta: {
+      invalidate: data.invalidateKeys,
+    },
+    onSuccess: () => {
+      closeModal(modalNameValue);
+      data.onSuccess?.();
+    },
+    onError: (e) => {
+      data.onError?.();
+      console.error(e);
+    },
+  });
+
+  return (
+    <>
+      <RenderMarkdown
+        containerProps={data.contentContainerProps}
+        content={data.contentMd}
+      />
+      <Controls>
+        <div className="right">
+          <Button
+            text={m.controls_cancel()}
+            variant="secondary"
+            {...data.cancelProps}
+            disabled={isPending}
+            onClick={() => {
+              closeModal(modalNameValue);
+            }}
+          />
+          <Button
+            text={m.controls_submit()}
+            variant="primary"
+            {...data.submitProps}
+            loading={isPending}
+            onClick={() => {
+              mutate();
+            }}
+          />
+        </div>
+      </Controls>
+    </>
+  );
+};

web/src/shared/components/modals/ConfirmActionModal/style.scss

@@ -0,0 +1,25 @@
+#action-modal .markdown-render {
+  display: flex;
+  flex-flow: column;
+  row-gap: var(--spacing-sm);
+
+  p,
+  span,
+  ul,
+  li {
+    font: var(--t-body-sm-400);
+    color: var(--fg-default);
+  }
+
+  ul {
+    margin-left: 0;
+
+    li {
+      margin-left: var(--spacing-md);
+
+      &:not(:last-child) {
+        margin-bottom: var(--spacing-sm);
+      }
+    }
+  }
+}

web/src/shared/hooks/modalControls/modalTypes.ts

@@ -11,6 +11,7 @@ import type {
   OpenCEGroupModal,
   OpenCEOpenIdClientModal,
   OpenCEWebhookModal,
+  OpenConfirmActionModal,
   OpenDeleteAliasDestinationBlockedModal,
   OpenDeleteAliasDestinationConfirmModal,
   OpenDeleteGatewayModal,
@@ -74,6 +75,7 @@ export const ModalName = {
   AddNewDevice: 'addNewDevice',
   AssignUserIP: 'assignUserIP',
   AssignUserDeviceIP: 'assignUserDeviceIP',
+  ConfirmAction: 'confirmAction',
 } as const;
 
 export type ModalNameValue = (typeof ModalName)[keyof typeof ModalName];
@@ -239,6 +241,10 @@ const modalOpenArgsSchema = z.discriminatedUnion('name', [
     name: z.literal(ModalName.AssignUserDeviceIP),
     data: z.custom<OpenAssignUserDeviceIPModal>(),
   }),
+  z.object({
+    name: z.literal(ModalName.ConfirmAction),
+    data: z.custom<OpenConfirmActionModal>(),
+  }),
 ]);
 
 export type ModalOpenEvent = z.infer<typeof modalOpenArgsSchema>;

web/src/shared/hooks/modalControls/types.ts

@@ -1,3 +1,5 @@
+import type { QueryKey } from '@tanstack/react-query';
+import type { HTMLProps } from 'react';
 import type {
   AvailableLocationIpResponse,
   Device,
@@ -13,6 +15,19 @@ import type {
   User,
   Webhook,
 } from '../../api/types';
+import type { ButtonProps } from '../../defguard-ui/components/Button/types';
+
+export interface OpenConfirmActionModal {
+  title: string;
+  contentMd: string;
+  actionPromise: () => Promise<unknown>;
+  invalidateKeys?: QueryKey[];
+  cancelProps?: ButtonProps;
+  submitProps?: ButtonProps;
+  contentContainerProps?: HTMLProps<HTMLDivElement>;
+  onSuccess?: () => void;
+  onError?: () => void;
+}
 
 export interface OpenEditDeviceModal {
   device: Device;