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 && ( + + {confirmationProps.warning} + + )} ); 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', });