Skip to content

Commit

Permalink
fix: ConfirmModal should not include form
Browse files Browse the repository at this point in the history 
ConfirmModal uses the OpenCloseModal, which includes a form when onSave
is passed. Asking for a confirmation is only a yes or no question, so
there is no need for a form.

Changed ConfirmModal to use Modal instead of OpenCloseModal.
  • Loading branch information
Gido Manders committed Jul 12, 2023
1 parent 8e1eeb3 commit 5fb6fb2
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 144 deletions.
8 changes: 4 additions & 4 deletions src/core/ConfirmModal/ConfirmModal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ describe('Component: ConfirmModal', () => {
expect(
screen.queryByText('Perform dangerous action')
).toBeInTheDocument();
expect(screen.getAllByRole('button')[1]).toHaveTextContent('cancelNO');
expect(screen.getAllByRole('button')[2]).toHaveTextContent('saveYES');
expect(screen.getAllByRole('button')[1]).toHaveTextContent('closeNO');
expect(screen.getAllByRole('button')[2]).toHaveTextContent('checkYES');
expect(document.body.lastChild).toMatchSnapshot();
});
});
Expand Down Expand Up @@ -98,7 +98,7 @@ describe('Component: ConfirmModal', () => {
isOpen: true
});

fireEvent.click(screen.getByText('cancel'));
fireEvent.click(screen.getByText('close'));

expect(onCloseSpy).toHaveBeenCalledTimes(1);
expect(onSaveSpy).toHaveBeenCalledTimes(0);
Expand All @@ -110,7 +110,7 @@ describe('Component: ConfirmModal', () => {
isOpen: true
});

fireEvent.click(screen.getByText('save'));
fireEvent.click(screen.getByText('check'));

expect(onCloseSpy).toHaveBeenCalledTimes(0);
expect(onSaveSpy).toHaveBeenCalledTimes(1);
Expand Down
56 changes: 36 additions & 20 deletions src/core/ConfirmModal/ConfirmModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { FormEventHandler } from 'react';
import { OpenCloseModal } from '../OpenCloseModal/OpenCloseModal';
import React from 'react';
import { t } from '../../utilities/translation/translation';
import { Modal } from '../Modal/Modal';
import { Button } from '../Button/Button';

type Props = {
/**
Expand Down Expand Up @@ -33,7 +34,7 @@ type Props = {
/**
* Function that gets called when the user clicks the save button
*/
onSave: FormEventHandler;
onSave: () => void;

/**
* Text which is rendered inside the modal
Expand Down Expand Up @@ -66,29 +67,44 @@ export function ConfirmModal({
className
}: Props) {
return (
<OpenCloseModal
<Modal
onClose={onClose}
onSave={onSave}
label={t({
className={className}
header={t({
overrideText: label,
key: 'ConfirmButton.MODAL_HEADER',
fallback: 'Confirmation'
})}
text={{
cancel: t({
overrideText: cancelText,
key: 'ConfirmButton.CANCEL',
fallback: 'Cancel'
}),
save: t({
overrideText: confirmText,
key: 'ConfirmButton.CONFIRM',
fallback: 'Confirm'
})
}}
className={className}
footer={
<>
<Button
className="ms-1"
color="secondary"
icon="close"
onClick={onClose}
>
{t({
overrideText: cancelText,
key: 'ConfirmButton.CANCEL',
fallback: 'Cancel'
})}
</Button>
<Button
className="ms-1"
color="primary"
icon="check"
onClick={onSave}
>
{t({
overrideText: confirmText,
key: 'ConfirmButton.CONFIRM',
fallback: 'Confirm'
})}
</Button>
</>
}
>
{modalText}
</OpenCloseModal>
</Modal>
);
}
236 changes: 116 additions & 120 deletions src/core/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,75 +22,73 @@ exports[`Component: ConfirmModal ui custom texts 1`] = `
<div
class="modal-content"
>
<form>
<div
class="modal-header"
<div
class="modal-header"
>
<h5
class="modal-title"
>
Perform dangerous action
</h5>
<button
aria-label="Close"
class="btn-close"
type="button"
/>
</div>
<div
class="modal-body"
>
<p>
Are you sure you want to
<strong>
delete
</strong>
all users in the database?
</p>
</div>
<div
class="modal-footer"
>
<span
class="button d-inline-block ms-1 secondary"
>
<h5
class="modal-title"
>
Perform dangerous action
</h5>
<button
aria-label="Close"
class="btn-close"
class="btn btn-secondary btn-md"
type="button"
/>
</div>
<div
class="modal-body"
>
<p>
Are you sure you want to
<strong>
delete
</strong>
all users in the database?
</p>
</div>
<div
class="modal-footer"
>
<span
class="button d-inline-block ms-1 secondary"
>
<button
class="btn btn-secondary btn-md"
type="button"
<div
class="d-flex justify-content-center align-items-center"
>
<div
class="d-flex justify-content-center align-items-center"
<i
class="icon button-icon me-2 material-icons"
>
<i
class="icon button-icon me-2 material-icons"
>
cancel
</i>
NO
</div>
</button>
</span>
<span
class="button d-inline-block ms-1 primary"
close
</i>
NO
</div>
</button>
</span>
<span
class="button d-inline-block ms-1 primary"
>
<button
class="btn btn-primary btn-md"
type="button"
>
<button
class="btn btn-primary btn-md"
type="submit"
<div
class="d-flex justify-content-center align-items-center"
>
<div
class="d-flex justify-content-center align-items-center"
<i
class="icon button-icon me-2 material-icons"
>
<i
class="icon button-icon me-2 material-icons"
>
save
</i>
YES
</div>
</button>
</span>
</div>
</form>
check
</i>
YES
</div>
</button>
</span>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -123,75 +121,73 @@ exports[`Component: ConfirmModal ui default texts 1`] = `
<div
class="modal-content"
>
<form>
<div
class="modal-header"
<div
class="modal-header"
>
<h5
class="modal-title"
>
Confirmation
</h5>
<button
aria-label="Close"
class="btn-close"
type="button"
/>
</div>
<div
class="modal-body"
>
<p>
Are you sure you want to
<strong>
delete
</strong>
the user?
</p>
</div>
<div
class="modal-footer"
>
<span
class="button d-inline-block ms-1 secondary"
>
<h5
class="modal-title"
>
Confirmation
</h5>
<button
aria-label="Close"
class="btn-close"
class="btn btn-secondary btn-md"
type="button"
/>
</div>
<div
class="modal-body"
>
<p>
Are you sure you want to
<strong>
delete
</strong>
the user?
</p>
</div>
<div
class="modal-footer"
>
<span
class="button d-inline-block ms-1 secondary"
>
<button
class="btn btn-secondary btn-md"
type="button"
<div
class="d-flex justify-content-center align-items-center"
>
<div
class="d-flex justify-content-center align-items-center"
<i
class="icon button-icon me-2 material-icons"
>
<i
class="icon button-icon me-2 material-icons"
>
cancel
</i>
Cancel
</div>
</button>
</span>
<span
class="button d-inline-block ms-1 primary"
close
</i>
Cancel
</div>
</button>
</span>
<span
class="button d-inline-block ms-1 primary"
>
<button
class="btn btn-primary btn-md"
type="button"
>
<button
class="btn btn-primary btn-md"
type="submit"
<div
class="d-flex justify-content-center align-items-center"
>
<div
class="d-flex justify-content-center align-items-center"
<i
class="icon button-icon me-2 material-icons"
>
<i
class="icon button-icon me-2 material-icons"
>
save
</i>
Confirm
</div>
</button>
</span>
</div>
</form>
check
</i>
Confirm
</div>
</button>
</span>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 5fb6fb2

Please sign in to comment.