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

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()}

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);
         }}
       />
 

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);
         }}
       />
 

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);
         }}
       />
 

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,