From ce556518bd87409fb70229b5530b0ae1fa8efc8c Mon Sep 17 00:00:00 2001
From: Le Roux Bodenstein <leroux.bodenstein@mongodb.com>
Date: Thu, 11 Sep 2025 12:26:08 +0100
Subject: [PATCH] add warning banner to the delete confirmation modal

---
 .../src/hooks/use-confirmation.tsx                 | 14 +++++++++++++-
 packages/compass-crud/src/stores/crud-store.ts     |  2 ++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/compass-components/src/hooks/use-confirmation.tsx b/packages/compass-components/src/hooks/use-confirmation.tsx
index 1bef9b7e924..71991c226c4 100644
--- a/packages/compass-components/src/hooks/use-confirmation.tsx
+++ b/packages/compass-components/src/hooks/use-confirmation.tsx
@@ -10,7 +10,8 @@ import ConfirmationModal from '../components/modals/confirmation-modal';
 import { css } from '@leafygreen-ui/emotion';
 import type { ButtonProps } from '@leafygreen-ui/button';
 import FormFieldContainer from '../components/form-field-container';
-import { TextInput } from '../components/leafygreen';
+import { Banner, TextInput } from '../components/leafygreen';
+import { spacing } from '@leafygreen-ui/tokens';
 
 export { ConfirmationModalVariant };
 
@@ -24,6 +25,7 @@ type ConfirmationProperties = Partial<
   hideConfirmButton?: boolean;
   hideCancelButton?: boolean;
   description?: React.ReactNode;
+  warning?: React.ReactNode;
   signal?: AbortSignal;
   'data-testid'?: string;
 };
@@ -93,6 +95,7 @@ const confirmationModalState = new GlobalConfirmationModalState();
  *
  * @param props ConfirmationModal rendering properties
  */
+
 export const showConfirmation = confirmationModalState.showConfirmation.bind(
   confirmationModalState
 );
@@ -101,6 +104,10 @@ const hideButtonStyles = css({
   display: 'none !important',
 });
 
+const warningBannerStyles = css({
+  marginTop: spacing[400],
+});
+
 const ConfirmationModalStateHandler: React.FunctionComponent = ({
   children,
 }) => {
@@ -191,6 +198,11 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({
         requiredInputText={confirmationProps.requiredInputText ?? undefined}
       >
         {confirmationProps.description}
+        {confirmationProps.warning && (
+          <Banner variant="warning" className={warningBannerStyles}>
+            {confirmationProps.warning}
+          </Banner>
+        )}
       </ConfirmationModal>
     </>
   );
diff --git a/packages/compass-crud/src/stores/crud-store.ts b/packages/compass-crud/src/stores/crud-store.ts
index 8f489cb2dd5..02ab3ee5e56 100644
--- a/packages/compass-crud/src/stores/crud-store.ts
+++ b/packages/compass-crud/src/stores/crud-store.ts
@@ -1955,6 +1955,8 @@ class CrudStoreImpl
       description: `This action can not be undone. This will permanently delete ${
         affected ?? 'an unknown number of'
       } document${affected !== 1 ? 's' : ''}.`,
+      warning:
+        'The document list and count may not always reflect the latest updates in real time. This action will apply to all relevant documents, including those not currently visible, so please ensure they are handled safely.',
       variant: 'danger',
     });