From 6bcf1f8838efd6efbe9ecc404006b34db99ec954 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Fri, 9 Jun 2023 08:22:20 +1000
Subject: [PATCH] Don't prompt for unsaved changes when navigating within main
 page (#3805)

* Don't prompt for changes when navigating in gallery
* Generalise and apply to tags, studios, movies
---
 .../GalleryDetails/GalleryEditPanel.tsx          |  3 ++-
 .../Movies/MovieDetails/MovieEditPanel.tsx       |  4 +++-
 .../Studios/StudioDetails/StudioEditPanel.tsx    |  4 +++-
 .../components/Tags/TagDetails/TagEditPanel.tsx  |  6 ++++--
 ui/v2.5/src/utils/navigation.ts                  | 16 ++++++++++++++++
 5 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
index 27f3fdb78..7208971f0 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
@@ -38,6 +38,7 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
 import { ConfigurationContext } from "src/hooks/Config";
 import isEqual from "lodash-es/isEqual";
 import { DateInput } from "src/components/Shared/DateInput";
+import { handleUnsavedChanges } from "src/utils/navigation";
 
 interface IProps {
   gallery: Partial<GQL.GalleryDataFragment>;
@@ -370,7 +371,7 @@ export const GalleryEditPanel: React.FC<IProps> = ({
     <div id="gallery-edit-details">
       <Prompt
         when={formik.dirty}
-        message={intl.formatMessage({ id: "dialogs.unsaved_changes" })}
+        message={handleUnsavedChanges(intl, "galleries", gallery?.id)}
       />
 
       {maybeRenderScrapeDialog()}
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
index 60f4465ed..561cab69d 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
@@ -25,6 +25,7 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
 import { ConfigurationContext } from "src/hooks/Config";
 import isEqual from "lodash-es/isEqual";
 import { DateInput } from "src/components/Shared/DateInput";
+import { handleUnsavedChanges } from "src/utils/navigation";
 
 interface IMovieEditPanel {
   movie: Partial<GQL.MovieDataFragment>;
@@ -382,7 +383,8 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
           // Check if it's a redirect after movie creation
           if (action === "PUSH" && location.pathname.startsWith("/movies/"))
             return true;
-          return intl.formatMessage({ id: "dialogs.unsaved_changes" });
+
+          return handleUnsavedChanges(intl, "movies", movie.id)(location);
         }}
       />
 
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/StudioEditPanel.tsx b/ui/v2.5/src/components/Studios/StudioDetails/StudioEditPanel.tsx
index 8eb919483..24cfd9649 100644
--- a/ui/v2.5/src/components/Studios/StudioDetails/StudioEditPanel.tsx
+++ b/ui/v2.5/src/components/Studios/StudioDetails/StudioEditPanel.tsx
@@ -20,6 +20,7 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
 import { ConfigurationContext } from "src/hooks/Config";
 import isEqual from "lodash-es/isEqual";
 import { useToast } from "src/hooks/Toast";
+import { handleUnsavedChanges } from "src/utils/navigation";
 
 interface IStudioEditPanel {
   studio: Partial<GQL.StudioDataFragment>;
@@ -227,7 +228,8 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
           // Check if it's a redirect after studio creation
           if (action === "PUSH" && location.pathname.startsWith("/studios/"))
             return true;
-          return intl.formatMessage({ id: "dialogs.unsaved_changes" });
+
+          return handleUnsavedChanges(intl, "studios", studio.id)(location);
         }}
       />
 
diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx
index 8ad847fc9..24dbb952f 100644
--- a/ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx
+++ b/ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx
@@ -14,6 +14,7 @@ import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { StringListInput } from "src/components/Shared/StringListInput";
 import isEqual from "lodash-es/isEqual";
 import { useToast } from "src/hooks/Toast";
+import { handleUnsavedChanges } from "src/utils/navigation";
 
 interface ITagEditPanel {
   tag: Partial<GQL.TagDataFragment>;
@@ -161,11 +162,12 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
       <Prompt
         when={formik.dirty}
         message={(location, action) => {
-          // Check if it's a redirect after movie creation
+          // Check if it's a redirect after tag creation
           if (action === "PUSH" && location.pathname.startsWith("/tags/")) {
             return true;
           }
-          return intl.formatMessage({ id: "dialogs.unsaved_changes" });
+
+          return handleUnsavedChanges(intl, "tags", tag.id)(location);
         }}
       />
 
diff --git a/ui/v2.5/src/utils/navigation.ts b/ui/v2.5/src/utils/navigation.ts
index 7693ddb69..937a1132a 100644
--- a/ui/v2.5/src/utils/navigation.ts
+++ b/ui/v2.5/src/utils/navigation.ts
@@ -20,6 +20,7 @@ import {
 import { GalleriesCriterion } from "src/models/list-filter/criteria/galleries";
 import { PhashCriterion } from "src/models/list-filter/criteria/phash";
 import { ILabeledId } from "src/models/list-filter/types";
+import { IntlShape } from "react-intl";
 
 function addExtraCriteria(
   dest: Criterion<CriterionValue>[],
@@ -346,6 +347,21 @@ const makeGalleryImagesUrl = (
   return `/images?${filter.makeQueryParameters()}`;
 };
 
+export function handleUnsavedChanges(
+  intl: IntlShape,
+  basepath: string,
+  id?: string
+) {
+  return function (location: { pathname: string }) {
+    // #2291 - don't prompt if we're navigating within the gallery being edited
+    if (id !== undefined && location.pathname === `/${basepath}/${id}`) {
+      return true;
+    }
+
+    return intl.formatMessage({ id: "dialogs.unsaved_changes" });
+  };
+}
+
 const NavUtils = {
   makePerformerScenesUrl,
   makePerformerImagesUrl,