-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Introduces a better Modal popup for unsaved changes in Forms. (#2285)
* moved block navigation component to a folder and added handlers to discard changes, save changes and close the alert. * Created a custom alert component to cater the requirements of BlockNavigation. * Refactored the test to verify the buttons in the alert to check for the new set of buttons. * Refactored the test to verify the close modal behaviour to use the changed UI * Refactored the test to verify all the use cases of discard chagnes. * Added test to verify the save and continue feature in the BlockNavigation. * Refactored the test UI with real world values for easier readability and expansion. * Removed the unused part of the test. * Replaced the Field component and normal input with FormikInput, added validations and refactored the queries and added one more extra field in the form. * Added test to verify that the navigation is prevented even if save and continue is cled when there's an error in the form. * Removed the unused props from the Alert component.
- Loading branch information
1 parent
2258beb
commit 0a1ea42
Showing
5 changed files
with
205 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
/* eslint-disable @bigbinary/neeto/file-name-and-export-name-standards */ | ||
import React, { useRef } from "react"; | ||
|
||
import { useTranslation } from "react-i18next"; | ||
|
||
import Button from "components/Button"; | ||
import Modal from "components/Modal"; | ||
import Typography from "components/Typography"; | ||
import { getLocale } from "utils"; | ||
|
||
const Alert = ({ | ||
isOpen = false, | ||
isSubmitting = false, | ||
onClose, | ||
onSaveChanges, | ||
onDiscardChanges, | ||
}) => { | ||
const { t, i18n } = useTranslation(); | ||
|
||
const saveChangesButtonRef = useRef(null); | ||
|
||
const cancelButtonLabel = getLocale( | ||
i18n, | ||
t, | ||
"neetoui.blockNavigation.cancelButtonLabel" | ||
); | ||
|
||
const submitButtonLabel = getLocale( | ||
i18n, | ||
t, | ||
"neetoui.blockNavigation.submitButtonLabel" | ||
); | ||
|
||
return ( | ||
<Modal | ||
{...{ isOpen, onClose }} | ||
closeButton | ||
closeOnEsc | ||
closeOnOutsideClick | ||
data-cy="alert-box" | ||
initialFocusRef={saveChangesButtonRef} | ||
size="medium" | ||
> | ||
<Modal.Header> | ||
<Typography data-cy="alert-title" style="h2"> | ||
{getLocale(i18n, t, "neetoui.blockNavigation.alertTitle")} | ||
</Typography> | ||
</Modal.Header> | ||
<Modal.Body> | ||
<Typography data-cy="alert-message" lineHeight="normal" style="body2"> | ||
{getLocale(i18n, t, "neetoui.blockNavigation.alertMessage")} | ||
</Typography> | ||
</Modal.Body> | ||
<Modal.Footer className="neeto-ui-gap-2 neeto-ui-flex neeto-ui-justify-end neeto-ui-items-center"> | ||
<Button | ||
data-cy="alert-cancel-button" | ||
label={cancelButtonLabel} | ||
style="danger" | ||
onClick={onDiscardChanges} | ||
/> | ||
<Button | ||
data-cy="alert-submit-button" | ||
disabled={!isOpen} | ||
label={submitButtonLabel} | ||
loading={isSubmitting} | ||
ref={saveChangesButtonRef} | ||
style="primary" | ||
onClick={onSaveChanges} | ||
/> | ||
</Modal.Footer> | ||
</Modal> | ||
); | ||
}; | ||
|
||
export default Alert; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters