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}