fix: OPTIC-137: Preview should not block navigation due to draft savi…

…ng (#4835) * fix: OPTIC-137: Preview should not block navigation due to draft saving * ci: Build frontend Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/6329001581 * fix navigation on submit and exit of annotation * ci: Build frontend Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/6332976455 --------- Co-authored-by: robot-ci-heartex <robot-ci-heartex@users.noreply.github.com>
HumanSignal · Sep 28, 2023 · 78b6fa1 · 78b6fa1
1 parent fe44b28
commit 78b6fa1
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/label_studio/frontend/dist/react-app/index.js b/label_studio/frontend/dist/react-app/index.js
diff --git a/label_studio/frontend/dist/react-app/index.js.map b/label_studio/frontend/dist/react-app/index.js.map
diff --git a/label_studio/frontend/src/components/DraftGuard/DraftGuard.js b/label_studio/frontend/src/components/DraftGuard/DraftGuard.js
@@ -15,7 +15,21 @@ export const DraftGuard = () => {
 
   useEffect(() => {
     if (isFF(FF_OPTIC_2)) {
-      const unblock = history.block(() => {
+      const unblock = () => {
+        draftGuardCallback.current?.(true);
+        draftGuardCallback.current = null;
+      };
+
+      /**
+       * The version of Router History that is in use does not currently support
+       * the `block` method fully. This is a workaround to allow us to block navigation
+       * when there are unsaved changes. The draftGuardCallback allows the unblock callback to be captured from the
+       * history callback `getUserConfirmation` that is triggered by returning a string message from history.block, allowing the user to
+       * confirm they want to leave the page. Here we send through a constant message
+       * to signify that we aren't looking for user confirmation but to utilize this to enable navigation blocking based on 
+       * unsuccessful draft saves.
+       */
+      const unsubscribe = history.block(() => {
         const selected = window.Htx?.annotationStore?.selected;
         const submissionInProgress = !!selected?.submissionStarted;
         const hasChanges = !!selected?.history.undoIdx && !submissionInProgress;
@@ -26,10 +40,11 @@ export const DraftGuard = () => {
 
             if (status === 200 || status === 201) {
               toast.show({ message: "Draft saved successfully",  type: "info" });
-              draftGuardCallback.current?.(true);
-              draftGuardCallback.current = null;
+              unblock();
             } else if (status !== undefined) {
               toast.show({ message: "There was an error saving your draft", type: "error" });
+            } else {
+              unblock();
             }
           });
 
@@ -38,8 +53,8 @@ export const DraftGuard = () => {
       });
 
       return () => {
-        draftGuardCallback.current = null;
         unblock();
+        unsubscribe();
       };
     }
   }, []);

diff --git a/label_studio/frontend/src/pages/DataManager/DataManager.js b/label_studio/frontend/src/pages/DataManager/DataManager.js
@@ -119,6 +119,12 @@ export const DataManagerPage = ({ ...props }) => {
       toast.show({ message, type });
     });
 
+    dataManager.on("navigate", (route) => {
+      const target = route.replace(/^projects/, "");
+
+      history.push(buildLink(target, { id: params.id }));
+    });
+
     if (interactiveBacked) {
       dataManager.on("lsf:regionFinishedDrawing", (reg, group) => {
         const { lsf, task, currentAnnotation: annotation } = dataManager.lsf;