fix(compass-crud): add warning banner to the delete confirmation modal COMPASS-9839 (#7311)

add warning banner to the delete confirmation modal

Author: lerouxb

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>
     </>
   );

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',
     });