diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx index 7cd0cf04d9f..553714c16a3 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx @@ -1,4 +1,5 @@ import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import React from 'react'; import { ConfirmModal } from './ConfirmModal'; @@ -44,4 +45,47 @@ describe('ConfirmModal', () => { expect(screen.queryByRole('button', { name: 'Alternative Text' })).not.toBeInTheDocument(); expect(screen.queryByRole('button', { name: 'Confirm' })).not.toBeInTheDocument(); }); + + it('disables the confirm button initially when confirmation text is present', () => { + render( + {}} + onDismiss={() => {}} + onAlternative={() => {}} + /> + ); + + expect(screen.getByRole('button', { name: 'Please Confirm' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Please Confirm' })).toBeDisabled(); + }); + + it('typing the confirmation text should enable the confirm button regardless of case', async () => { + render( + {}} + onDismiss={() => {}} + onAlternative={() => {}} + /> + ); + + expect(screen.getByRole('button', { name: 'Please Confirm' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Please Confirm' })).toBeDisabled(); + + await userEvent.type(screen.getByPlaceholderText('Type "My confirmation text" to confirm'), 'mY CoNfIrMaTiOn TeXt'); + expect(screen.getByRole('button', { name: 'Please Confirm' })).not.toBeDisabled(); + }); }); diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx index b18d608b818..d4c4bc995dd 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx @@ -67,7 +67,7 @@ export const ConfirmModal = ({ const styles = useStyles2(getStyles); const buttonRef = useRef(null); const onConfirmationTextChange = (event: React.FormEvent) => { - setDisabled(confirmationText?.localeCompare(event.currentTarget.value) !== 0); + setDisabled(confirmationText?.toLowerCase().localeCompare(event.currentTarget.value.toLowerCase()) !== 0); }; useEffect(() => { @@ -91,7 +91,7 @@ export const ConfirmModal = ({ {confirmationText ? (
- +
) : null} diff --git a/public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.test.tsx b/public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.test.tsx index 570af0c60cf..e660a51c350 100644 --- a/public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.test.tsx +++ b/public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.test.tsx @@ -46,7 +46,7 @@ describe('browse-dashboards DeleteModal', () => { it('only enables the `Delete` button if the confirmation text is typed', async () => { render(); - const confirmationInput = await screen.findByPlaceholderText('Type Delete to confirm'); + const confirmationInput = await screen.findByPlaceholderText('Type "Delete" to confirm'); await userEvent.type(confirmationInput, 'Delete'); expect(await screen.findByRole('button', { name: 'Delete' })).toBeEnabled(); @@ -55,7 +55,7 @@ describe('browse-dashboards DeleteModal', () => { it('calls onConfirm when clicking the `Delete` button', async () => { render(); - const confirmationInput = await screen.findByPlaceholderText('Type Delete to confirm'); + const confirmationInput = await screen.findByPlaceholderText('Type "Delete" to confirm'); await userEvent.type(confirmationInput, 'Delete'); await userEvent.click(await screen.findByRole('button', { name: 'Delete' })); diff --git a/public/app/features/search/page/components/ConfirmDeleteModal.test.tsx b/public/app/features/search/page/components/ConfirmDeleteModal.test.tsx index 46ba8c50910..a782e526a7a 100644 --- a/public/app/features/search/page/components/ConfirmDeleteModal.test.tsx +++ b/public/app/features/search/page/components/ConfirmDeleteModal.test.tsx @@ -16,7 +16,7 @@ describe('ConfirmModal', () => { expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument(); - expect(screen.queryByPlaceholderText('Type delete to confirm')).not.toBeInTheDocument(); + expect(screen.queryByPlaceholderText('Type "delete" to confirm')).not.toBeInTheDocument(); }); describe('with nestedFolders feature flag', () => { @@ -39,7 +39,7 @@ describe('ConfirmModal', () => { render( {}} results={selectedItems} onDismiss={() => {}} />); - expect(screen.getByPlaceholderText('Type delete to confirm')).toBeInTheDocument(); + expect(screen.getByPlaceholderText('Type "delete" to confirm')).toBeInTheDocument(); }); }); });