ConfirmModal: Ignore case for confirmation text (#69000)

* ignore case for confirmation text, add a couple of unit tests

* just have 1 test

* fix related unit tests

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(
+      <ConfirmModal
+        title="Some Title"
+        body="Some Body"
+        confirmText="Please Confirm"
+        alternativeText="Alternative Text"
+        dismissText="Dismiss Text"
+        isOpen={true}
+        confirmationText="My confirmation text"
+        onConfirm={() => {}}
+        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(
+      <ConfirmModal
+        title="Some Title"
+        body="Some Body"
+        confirmText="Please Confirm"
+        alternativeText="Alternative Text"
+        dismissText="Dismiss Text"
+        isOpen={true}
+        confirmationText="My confirmation text"
+        onConfirm={() => {}}
+        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();
+  });
 });

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx

@@ -67,7 +67,7 @@ export const ConfirmModal = ({
   const styles = useStyles2(getStyles);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const onConfirmationTextChange = (event: React.FormEvent<HTMLInputElement>) => {
-    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 ? (
           <div className={styles.modalConfirmationInput}>
             <HorizontalGroup>
-              <Input placeholder={`Type ${confirmationText} to confirm`} onChange={onConfirmationTextChange} />
+              <Input placeholder={`Type "${confirmationText}" to confirm`} onChange={onConfirmationTextChange} />
             </HorizontalGroup>
           </div>
         ) : null}

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(<DeleteModal {...defaultProps} />);
 
-    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(<DeleteModal {...defaultProps} />);
 
-    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' }));

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(<ConfirmDeleteModal onDeleteItems={() => {}} results={selectedItems} onDismiss={() => {}} />);
 
-      expect(screen.getByPlaceholderText('Type delete to confirm')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Type "delete" to confirm')).toBeInTheDocument();
     });
   });
 });