Skip to content

feat(WarningModal): add text confirmation option #540

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
InsaneZein merged 8 commits into from
Jan 14, 2025
Merged

feat(WarningModal): add text confirmation option #540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a29469c
feat(WarningModal): add text confirmation option
InsaneZein Jan 7, 2025
786aa67
chore: clarify wording and clean up code
InsaneZein Jan 9, 2025
50cdc8c
chore: merge master
InsaneZein Jan 9, 2025
5b964f5
test: update WarningModal snapshot
InsaneZein Jan 9, 2025
ea656c3
fix(WarningModal): add default props to TextInput
InsaneZein Jan 10, 2025
6f5df57
change confirmInputLabel to ReactNode
InsaneZein Jan 10, 2025
ed1afe1
fix(WarningModal): reword default confirmationInputLabel
InsaneZein Jan 13, 2025
b62f2b2
chore: merge master
InsaneZein Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 35 additions & 7 deletions cypress/component/WarningModal.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,29 +37,57 @@ const CheckboxModal: React.FunctionComponent = () => {
</>
};

const TextConfirmationModal: React.FunctionComponent = () => {
const [ isOpen, setIsOpen ] = React.useState(false);
return <>
<Button onClick={() => setIsOpen(true)}>Open modal</Button>
<WarningModal
isOpen={isOpen}
title='Delete item?'
confirmButtonLabel='Yes'
cancelButtonLabel='No'
onClose={() => setIsOpen(false)}
onConfirm={() => setIsOpen(false)}
textConfirmation={{ type: 'text', isRequired: true }}
Copy link
Contributor

@fhlavac fhlavac Jan 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe these two props could be set as default and made overwritable using custom input props

Copy link
Collaborator Author

@InsaneZein InsaneZein Jan 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we wanted to do this, I think we'd have to add something like a withTextConfirmation boolean prop for this to work.

deleteName='Item1'>
The item will be deleted.
</WarningModal>
</>
};

describe('WarningModal', () => {
it('renders WarningModal', () => {
cy.mount(<BasicModal />)
cy.mount(<BasicModal />);
cy.get('button').click();
cy.get('[data-ouia-component-id="WarningModal"]').should('exist');
cy.get('[data-ouia-component-id="WarningModal"]').contains('Unsaved changes');
cy.get('[data-ouia-component-id="WarningModal"]').contains('Your page contains unsaved changes. Do you want to leave?');
});

it('confirm button should be disabled if checkbox is not checked', () => {
cy.mount(<CheckboxModal />)
cy.mount(<CheckboxModal />);
cy.get('button').click();
cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled')
cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled');
cy.get('[data-ouia-component-id="WarningModal-confirm-checkbox"').click();
cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('not.have.attr', 'disabled')
cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('not.have.attr', 'disabled');
});

it('should reset the confirmation checkbox once reopened', () => {
cy.mount(<CheckboxModal />)
cy.mount(<CheckboxModal />);
cy.get('button').click();
cy.get('[data-ouia-component-id="WarningModal-confirm-checkbox"').click();
cy.get('[data-ouia-component-id="WarningModal-confirm-button"').click();
cy.get('button').click();
cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled')
})
cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled');
});

it('confirm button should be enabled only when confirmation text matches the item name', () => {
cy.mount(<TextConfirmationModal />);
cy.get('button').click();
cy.get('[data-ouia-component-id="WarningModal-confirmation-text-input"').type('abcd');
cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled');
cy.get('[data-ouia-component-id="WarningModal-confirmation-text-input"').clear();
cy.get('[data-ouia-component-id="WarningModal-confirmation-text-input"').type('Item1');
cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('not.have.attr', 'disabled');
});
});
Loading
Loading