Removes the save functionality from the BlockNavigtion component. (#2326

)

* Updated the button labels and the message content in the block navigation alert.

* Removed the save and discard functionality of the submit button label

* Removed the irrelevant test case, modified the test to verify the built functionality and updated the label values used in the test.

src/formik/BlockNavigation/Alert.jsx

@@ -8,16 +8,10 @@ import Modal from "components/Modal";
 import Typography from "components/Typography";
 import { getLocale } from "utils";
 
-const Alert = ({
-  isOpen = false,
-  isSubmitting = false,
-  onClose,
-  onSaveChanges,
-  onDiscardChanges,
-}) => {
+const Alert = ({ isOpen = false, onClose, onSubmit, onDiscardChanges }) => {
   const { t, i18n } = useTranslation();
 
-  const saveChangesButtonRef = useRef(null);
+  const submitButtonRef = useRef(null);
 
   const cancelButtonLabel = getLocale(
     i18n,
@@ -38,7 +32,7 @@ const Alert = ({
       closeOnEsc
       closeOnOutsideClick
       data-cy="alert-box"
-      initialFocusRef={saveChangesButtonRef}
+      initialFocusRef={submitButtonRef}
       size="medium"
     >
       <Modal.Header>
@@ -60,12 +54,10 @@ const Alert = ({
         />
         <Button
           data-cy="alert-submit-button"
-          disabled={!isOpen}
           label={submitButtonLabel}
-          loading={isSubmitting}
-          ref={saveChangesButtonRef}
+          ref={submitButtonRef}
           style="primary"
-          onClick={onSaveChanges}
+          onClick={onSubmit}
         />
       </Modal.Footer>
     </Modal>

src/formik/BlockNavigation/index.jsx

@@ -23,21 +23,12 @@ const BlockNavigation = ({ isDirty = false, ...otherProps }) => {
     continueNavigation();
   };
 
-  const handleSaveChanges = () => {
-    if (formikContext?.isValid) {
-      formikContext.submitForm();
-      continueNavigation();
-    } else formikContext?.setTouched(formikContext.errors);
-
-    hidePrompt();
-  };
-
   return (
     <Alert
       isOpen={isBlocked}
       onClose={hidePrompt}
       onDiscardChanges={handleDiscardChanges}
-      onSaveChanges={handleSaveChanges}
+      onSubmit={hidePrompt}
       {...otherProps}
     />
   );

src/translations/en.json

@@ -1,9 +1,9 @@
 {
   "neetoui": {
     "blockNavigation": {
-      "alertMessage": "All of your unsaved changes will be lost. This can't be undone.",
-      "submitButtonLabel": "Save and continue",
-      "cancelButtonLabel": "Discard changes",
+      "alertMessage": "Leaving this page will discard your unsaved data. This action cannot be undone.",
+      "submitButtonLabel": "Stay on this page",
+      "cancelButtonLabel": "Discard and leave this page",
       "alertTitle": "You have unsaved changes"
     },
     "actionBlock": {

tests/formik/BlockNavigation.test.jsx

@@ -98,11 +98,11 @@ describe("formik/BlockNavigation", () => {
     await userEvent.click(screen.getByRole("link"));
     expect(screen.getByText(/You have unsaved changes/i)).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: "Discard changes" })
+      screen.getByRole("button", { name: "Discard and leave this page" })
     ).toBeInTheDocument();
 
     expect(
-      screen.getByRole("button", { name: "Save and continue" })
+      screen.getByRole("button", { name: "Stay on this page" })
     ).toBeInTheDocument();
   });
 
@@ -122,7 +122,7 @@ describe("formik/BlockNavigation", () => {
     expect(firstNameInput).toBeInTheDocument();
   });
 
-  it("should allow navigation and reset the form if the Discard changes button is clicked", async () => {
+  it("should allow navigation and reset the form if the Discard and leave this page button is clicked", async () => {
     render(<TestBlockNavigation isDirty />);
 
     const firstNameInput = screen.getByPlaceholderText("First name");
@@ -137,7 +137,7 @@ describe("formik/BlockNavigation", () => {
     await userEvent.click(screen.getByRole("link"));
 
     const continueButton = screen.getByRole("button", {
-      name: "Discard changes",
+      name: "Discard and leave this page",
     });
     await userEvent.click(continueButton);
 
@@ -146,7 +146,7 @@ describe("formik/BlockNavigation", () => {
     expect(mockSubmit).not.toHaveBeenCalled();
   });
 
-  it("should allow navigation and save the form if the Save and continue button is clicked", async () => {
+  it("should stay on the page and retain the changes in the form if the `Stay on this page` button is clicked", async () => {
     render(<TestBlockNavigation isDirty />);
 
     const firstNameInput = screen.getByPlaceholderText("First name");
@@ -160,34 +160,12 @@ describe("formik/BlockNavigation", () => {
 
     await userEvent.click(screen.getByRole("link"));
 
-    const saveButton = screen.getByRole("button", {
-      name: "Save and continue",
+    const submitButton = screen.getByRole("button", {
+      name: "Stay on this page",
     });
-    await userEvent.click(saveButton);
+    await userEvent.click(submitButton);
 
-    await waitFor(() => expect(saveButton).not.toBeInTheDocument());
-    expect(screen.getByText(/Home page/i)).toBeInTheDocument();
-    expect(mockSubmit).toBeCalledTimes(1);
-  });
-
-  it("should not allow navigation and save the form if the Save and continue button is clicked and the form has an error", async () => {
-    render(<TestBlockNavigation isDirty />);
-
-    const lastNameInput = screen.getByPlaceholderText("Last name");
-    await userEvent.type(
-      lastNameInput,
-      repeat("{backspace}", lastName.length).join("")
-    );
-    expect(lastNameInput.value).toBe("");
-
-    await userEvent.click(screen.getByRole("link"));
-
-    const saveButton = screen.getByRole("button", {
-      name: "Save and continue",
-    });
-    await userEvent.click(saveButton);
-
-    await waitFor(() => expect(saveButton).not.toBeInTheDocument());
+    await waitFor(() => expect(submitButton).not.toBeInTheDocument());
     expect(screen.queryByText(/Home page/i)).not.toBeInTheDocument();
     expect(mockSubmit).not.toBeCalled();
   });