Unsaved data warning

When a user changes some inputs on a page, but does not save it before navigating away, we should show the user a warning that there are unsaved changes on the page. We can do that by using this component, UnsavedDataWarning. This component receives a prop: changed. When changed is true the warning modal will be triggered when the user tries to navigate away.

Usage

const MyForm = () => {  const initialValues = useMemo<MyFormValuesType>(() => ..., []);  const onSubmit = useCallback((values: MyFormValuesType) => ..., []);
  return (    <Formik      initialValues={initialValues}      onSubmit={onSubmit}    >      {({ dirty }) => (        <Form>          <FormikInput name="Name" label="Name" />          <Button type="submit">Submit</Button>          <UnsavedDataWarning changed={dirty} />        </Form>      )}    </FormikInput>  )}

Translations

Add these translations to the module. Make sure there are no duplicates.

{  "generic.warning.unsaved-data": "Warning: unsaved data",  "generic.label.cancel": "Cancel",  "generic.label.confirm": "Confirm",  "generic.unsaved-data.warning-modal.message": "Are you sure you want to leave the page, without saving?"}