Performer/Studio/Tag/Gallery Create compnent has default name as search query (#2701)

* feat: Closes #2618
fix: New button is now available even if pathname ends with '/'

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx

@@ -1,10 +1,19 @@
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useLocation } from "react-router-dom";
 import { GalleryEditPanel } from "./GalleryEditPanel";
 
 const GalleryCreate: React.FC = () => {
   const intl = useIntl();
 
+  function useQuery() {
+    const { search } = useLocation();
+    return React.useMemo(() => new URLSearchParams(search), [search]);
+  }
+
+  const query = useQuery();
+  const nameQuery = query.get("name");
+
   return (
     <div className="row new-view">
       <div className="col-md-6">
@@ -16,7 +25,7 @@ const GalleryCreate: React.FC = () => {
         </h2>
         <GalleryEditPanel
           isNew
-          gallery={undefined}
+          gallery={{ title: nameQuery ?? "" }}
           isVisible
           onDelete={() => {}}
         />

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx

@@ -44,7 +44,7 @@ interface IProps {
 
 interface INewProps {
   isNew: true;
-  gallery: undefined;
+  gallery?: Partial<GQL.GalleryDataFragment>;
 }
 
 interface IExistingProps {
@@ -240,7 +240,7 @@ export const GalleryEditPanel: React.FC<
   }
 
   async function onScrapeClicked(scraper: GQL.Scraper) {
-    if (!gallery) return;
+    if (!gallery || !gallery.id) return;
 
     setIsLoading(true);
     try {

ui/v2.5/src/components/MainNavbar.tsx

@@ -217,8 +217,14 @@ export const MainNavbar: React.FC = () => {
     [history]
   );
 
-  const { pathname } = location;
+  const pathname = location.pathname.replace(/\/$/, "");
-  const newPath = newPathsList.includes(pathname) ? `${pathname}/new` : null;
+  let newPath = newPathsList.includes(pathname) ? `${pathname}/new` : null;
+  if (newPath != null) {
+    let queryParam = new URLSearchParams(location.search).get("q");
+    if (queryParam != null) {
+      newPath += "?name=" + encodeURIComponent(queryParam);
+    }
+  }
 
   // set up hotkeys
   useEffect(() => {
@@ -230,7 +236,7 @@ export const MainNavbar: React.FC = () => {
     );
 
     if (newPath) {
-      Mousetrap.bind("n", () => history.push(newPath));
+      Mousetrap.bind("n", () => history.push(String(newPath)));
     }
 
     return () => {

ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx

@@ -2,11 +2,20 @@ import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { LoadingIndicator } from "src/components/Shared";
 import { PerformerEditPanel } from "./PerformerEditPanel";
+import { useLocation } from "react-router-dom";
 
 const PerformerCreate: React.FC = () => {
   const [imagePreview, setImagePreview] = useState<string | null>();
   const [imageEncoding, setImageEncoding] = useState<boolean>(false);
 
+  function useQuery() {
+    const { search } = useLocation();
+    return React.useMemo(() => new URLSearchParams(search), [search]);
+  }
+
+  const query = useQuery();
+  const nameQuery = query.get("name");
+
   const activeImage = imagePreview ?? "";
   const intl = useIntl();
 
@@ -41,7 +50,7 @@ const PerformerCreate: React.FC = () => {
           />
         </h2>
         <PerformerEditPanel
-          performer={{}}
+          performer={{ name: nameQuery ?? "" }}
           isVisible
           isNew
           onImageChange={onImageChange}

ui/v2.5/src/components/Studios/StudioDetails/StudioCreate.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { useIntl } from "react-intl";
 
 import * as GQL from "src/core/generated-graphql";
@@ -12,6 +12,15 @@ import { StudioEditPanel } from "./StudioEditPanel";
 const StudioCreate: React.FC = () => {
   const history = useHistory();
   const Toast = useToast();
+
+  function useQuery() {
+    const { search } = useLocation();
+    return React.useMemo(() => new URLSearchParams(search), [search]);
+  }
+
+  const query = useQuery();
+  const nameQuery = query.get("name");
+
   const intl = useIntl();
 
   // Studio state
@@ -65,7 +74,7 @@ const StudioCreate: React.FC = () => {
           )}
         </div>
         <StudioEditPanel
-          studio={{}}
+          studio={{ name: nameQuery ?? "" }}
           onSubmit={onSave}
           onImageChange={setImage}
           onCancel={() => history.push("/studios")}

ui/v2.5/src/components/Tags/TagDetails/TagCreate.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 
 import * as GQL from "src/core/generated-graphql";
 import { useTagCreate } from "src/core/StashService";
@@ -13,6 +13,14 @@ const TagCreate: React.FC = () => {
   const history = useHistory();
   const Toast = useToast();
 
+  function useQuery() {
+    const { search } = useLocation();
+    return React.useMemo(() => new URLSearchParams(search), [search]);
+  }
+
+  const query = useQuery();
+  const nameQuery = query.get("name");
+
   // Editing tag state
   const [image, setImage] = useState<string | null>();
 
@@ -78,6 +86,7 @@ const TagCreate: React.FC = () => {
           )}
         </div>
         <TagEditPanel
+          tag={{ name: nameQuery ?? "" }}
           onSubmit={onSave}
           onCancel={() => history.push("/tags")}
           onDelete={() => {}}

ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx

@@ -6,7 +6,7 @@ import { DetailsEditNavbar, TagSelect } from "src/components/Shared";
 import { Form, Col, Row } from "react-bootstrap";
 import { FormUtils, ImageUtils } from "src/utils";
 import { useFormik } from "formik";
-import { Prompt, useHistory } from "react-router-dom";
+import { Prompt, useHistory, useParams } from "react-router-dom";
 import Mousetrap from "mousetrap";
 import { StringListInput } from "src/components/Shared/StringListInput";
 
@@ -21,6 +21,10 @@ interface ITagEditPanel {
   setImage: (image?: string | null) => void;
 }
 
+interface ITagEditPanelParams {
+  id?: string;
+}
+
 export const TagEditPanel: React.FC<ITagEditPanel> = ({
   tag,
   onSubmit,
@@ -31,7 +35,10 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
   const intl = useIntl();
   const history = useHistory();
 
-  const isNew = tag === undefined;
+  const params = useParams<ITagEditPanelParams>();
+  const idParam = params.id;
+
+  const isNew = idParam === undefined;
 
   const labelXS = 3;
   const labelXL = 3;

ui/v2.5/src/docs/en/Changelog/v0170.md

@@ -4,15 +4,8 @@ After migrating, please run a scan on your entire library to populate missing da
 * Missing covers are not currently regenerated.
 * Import/export schema has changed and is incompatible with the previous version.
 
-### 🐛 Bug fixes
-* Fix continue queue checkbox value not persisting. ([#2895](https://github.com/stashapp/stash/pull/2895))
-* Fix `autostartVideoOnPlaySelected` option not applying when navigating from scene queue. ([#2896](https://github.com/stashapp/stash/pull/2896))
-* Fix incorrect gallery value in Scene edit tab after navigating from scene queue. ([#2897](https://github.com/stashapp/stash/pull/2897))
-* Fix https schema not being used over some https connections. ([#2900](https://github.com/stashapp/stash/pull/2900))
-* Fix scene files not deleting correctly when streaming over https. ([#2900](https://github.com/stashapp/stash/pull/2900))
-* Fix panic when custom performer image location is invalid. ([#2894](https://github.com/stashapp/stash/pull/2894))
-
 ### ✨ New Features
+* Populate name from query field when creating new performer/studio/tag/gallery. ([#2701](https://github.com/stashapp/stash/pull/2701))
 * Added support for identical files. Identical files are assigned to the same scene/gallery/image and can be viewed in File Info. ([#2676](https://github.com/stashapp/stash/pull/2676))
 * Added support for filtering and sorting by file count. ([#2744](https://github.com/stashapp/stash/pull/2744))
 * Added release notes dialog. ([#2726](https://github.com/stashapp/stash/pull/2726))
@@ -21,3 +14,11 @@ After migrating, please run a scan on your entire library to populate missing da
 * Object titles are now displayed as the file basename if the title is not explicitly set. The `Don't include file extension as part of the title` scan flag is no longer supported.
 * `Set name, date, details from embedded file metadata` scan flag is no longer supported. This functionality may be implemented as a built-in scraper in the future.
 * Moved Changelogs to Settings page. ([#2726](https://github.com/stashapp/stash/pull/2726))
+
+### 🐛 Bug fixes
+* Fix continue queue checkbox value not persisting. ([#2895](https://github.com/stashapp/stash/pull/2895))
+* Fix `autostartVideoOnPlaySelected` option not applying when navigating from scene queue. ([#2896](https://github.com/stashapp/stash/pull/2896))
+* Fix incorrect gallery value in Scene edit tab after navigating from scene queue. ([#2897](https://github.com/stashapp/stash/pull/2897))
+* Fix https schema not being used over some https connections. ([#2900](https://github.com/stashapp/stash/pull/2900))
+* Fix scene files not deleting correctly when streaming over https. ([#2900](https://github.com/stashapp/stash/pull/2900))
+* Fix panic when custom performer image location is invalid. ([#2894](https://github.com/stashapp/stash/pull/2894))