From 6391abb6eed563a33be1e06d8ca97971260fbadb Mon Sep 17 00:00:00 2001
From: Piv94165 <106757110+Piv94165@users.noreply.github.com>
Date: Thu, 11 Apr 2024 10:40:50 +0200
Subject: [PATCH] fix(frontend): Prevent users from navigating to child with
 unsaved changes (#468)

Currently, users can navigate to a child node while editing a parent node without saving changes, resulting in a potential 404 error if the child node is newly created.
Additionally, clicking on a child node before saving changes can lead to the loss of unsaved modifications.

To prevent this, I have disabled the ability to navigate to a child node if this node has been newly created without saving.
Furthermore, I have implemented a warning message to inform users about why they cannot proceed to the child node : "You've just created a new child. To navigate to it, please ensure your changes are saved first."

There is another warning massage when whatever changes have not been saved : "Changes are pending and have not been saved. Please save your changes before navigating to any child node. If you prefer not to save your pending changes but wish to avoid losing them, you can navigate to a child node in a new window."

---------

Co-authored-by: alice.juan <alice.juan@student-cs.fr>
---
 .../editentry/AccumulateAllComponents.tsx     |  4 +++
 .../project/editentry/ListEntryChildren.tsx   | 36 +++++++++++++++++--
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/taxonomy-editor-frontend/src/pages/project/editentry/AccumulateAllComponents.tsx b/taxonomy-editor-frontend/src/pages/project/editentry/AccumulateAllComponents.tsx
index a1d0dbab..cf4b8500 100644
--- a/taxonomy-editor-frontend/src/pages/project/editentry/AccumulateAllComponents.tsx
+++ b/taxonomy-editor-frontend/src/pages/project/editentry/AccumulateAllComponents.tsx
@@ -180,7 +180,11 @@ const AccumulateAllComponents = ({
               <ListEntryChildren
                 url={url + "/children"}
                 urlPrefix={urlPrefix}
+                updateChildren={updateChildren}
                 setUpdateNodeChildren={setUpdateChildren}
+                previousUpdateChildren={previousUpdateChildren}
+                setPreviousUpdateChildren={setPreviousUpdateChildren}
+                hasChanges={hasChanges}
               />
               <ListTranslations
                 originalNodeObject={originalNodeObject}
diff --git a/taxonomy-editor-frontend/src/pages/project/editentry/ListEntryChildren.tsx b/taxonomy-editor-frontend/src/pages/project/editentry/ListEntryChildren.tsx
index b045c3fd..b2a84659 100644
--- a/taxonomy-editor-frontend/src/pages/project/editentry/ListEntryChildren.tsx
+++ b/taxonomy-editor-frontend/src/pages/project/editentry/ListEntryChildren.tsx
@@ -6,6 +6,7 @@ import {
   Button,
   IconButton,
   Box,
+  Alert,
 } from "@mui/material";
 import { Link } from "react-router-dom";
 import { useEffect, useState } from "react";
@@ -20,13 +21,22 @@ import CircularProgress from "@mui/material/CircularProgress";
 import ISO6391 from "iso-639-1";
 import { ENTER_KEYCODE } from "@/constants";
 import { greyHexCode } from "@/constants";
+import equal from "fast-deep-equal";
 
 interface Relations {
   index: string;
   child: string;
 }
 
-const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
+const ListEntryChildren = ({
+  url,
+  urlPrefix,
+  updateChildren,
+  setUpdateNodeChildren,
+  previousUpdateChildren,
+  setPreviousUpdateChildren,
+  hasChanges,
+}) => {
   const [relations, setRelations] = useState<Relations[]>([]);
   const [newChild, setNewChild] = useState("");
   const [newLanguageCode, setNewLanguageCode] = useState("");
@@ -46,6 +56,9 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       setUpdateNodeChildren(incomingData.map((el) => el?.[0]));
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      setPreviousUpdateChildren(incomingData.map((el) => el?.[0]));
       const arrayData: Relations[] = [];
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
@@ -54,7 +67,7 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
       );
       setRelations(arrayData);
     }
-  }, [incomingData, setUpdateNodeChildren]);
+  }, [incomingData, setPreviousUpdateChildren, setUpdateNodeChildren]);
 
   // Helper functions for Dialog component
   const handleCloseDialog = () => {
@@ -122,6 +135,17 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
         </IconButton>
       </Stack>
 
+      {/* Renders warning message to save changes to be able to click on a child node */}
+      {(!equal(updateChildren, previousUpdateChildren) || hasChanges) && (
+        <Alert severity="warning" sx={{ mb: 1, ml: 4, width: "fit-content" }}>
+          {!equal(updateChildren, previousUpdateChildren) &&
+            "You've just created a new child. To navigate to it, please ensure your changes are saved first."}
+          {!equal(updateChildren, previousUpdateChildren) && <br />}
+          {hasChanges &&
+            "Changes are pending and have not been saved. Please save your changes before navigating to any child node. If you prefer not to save your pending changes but wish to avoid losing them, you can navigate to a child node in a new window."}
+        </Alert>
+      )}
+
       {/* Renders parents or children of the node */}
       <Stack direction="row" flexWrap="wrap">
         {relations.map((relationObject) => (
@@ -131,7 +155,13 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
             alignItems="center"
           >
             <Link
-              to={`${urlPrefix}/entry/${relationObject["child"]}`}
+              to={
+                // Is this a newly created child node that hasn't been saved yet?
+                updateChildren.includes(relationObject["child"]) &&
+                !previousUpdateChildren.includes(relationObject["child"])
+                  ? "#"
+                  : `${urlPrefix}/entry/${relationObject["child"]}`
+              }
               style={{ color: "#0064c8", display: "inline-block" }}
             >
               <Typography sx={{ ml: 8 }} variant="h6">