diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx index 1bcdc6a4a81..0ffeb63acd1 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx @@ -105,6 +105,32 @@ describe('ConfirmModal', () => { expect(mockOnConfirm).toHaveBeenCalled(); }); + it('typing the confirmation text and pressing enter should trigger the primary action', async () => { + render( + {}} + onAlternative={() => {}} + /> + ); + + expect(screen.getByRole('button', { name: 'Please Confirm' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Please Confirm' })).toBeDisabled(); + + await user.type(screen.getByPlaceholderText('Type "My confirmation text" to confirm'), 'mY CoNfIrMaTiOn TeXt'); + expect(screen.getByRole('button', { name: 'Please Confirm' })).toBeEnabled(); + + await user.type(screen.getByPlaceholderText('Type "My confirmation text" to confirm'), '{enter}'); + expect(mockOnConfirm).toHaveBeenCalled(); + }); + it('returning a promise in the onConfirm callback disables the button whilst the callback is in progress', async () => { mockOnConfirm.mockImplementation(() => { return new Promise((resolve) => { @@ -136,7 +162,9 @@ describe('ConfirmModal', () => { await user.click(screen.getByRole('button', { name: 'Please Confirm' })); expect(mockOnConfirm).toHaveBeenCalled(); - expect(screen.getByRole('button', { name: 'Please Confirm' })).toBeDisabled(); + await waitFor(() => { + expect(screen.getByRole('button', { name: 'Please Confirm' })).toBeDisabled(); + }); jest.runAllTimers(); await waitFor(() => { diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx index 52cccc03221..80c9b2f41c8 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx @@ -1,5 +1,6 @@ import { css, cx } from '@emotion/css'; import React, { useEffect, useRef, useState } from 'react'; +import { useForm } from 'react-hook-form'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; @@ -8,7 +9,8 @@ import { useStyles2 } from '../../themes'; import { IconName } from '../../types/icon'; import { Button, ButtonVariant } from '../Button'; import { Input } from '../Input/Input'; -import { HorizontalGroup } from '../Layout/Layout'; +import { Box } from '../Layout/Box/Box'; +import { Stack } from '../Layout/Stack/Stack'; import { Modal } from '../Modal/Modal'; export interface ConfirmModalProps { @@ -95,38 +97,44 @@ export const ConfirmModal = ({ } }; + const { handleSubmit } = useForm(); + return ( -
- {body} - {description ?
{description}
: null} - {confirmationText ? ( -
- - - -
- ) : null} -
- - - - {onAlternative ? ( - - ) : null} - + + {onAlternative ? ( + + ) : null} + +
); };