Add option to remove studio stash ids (#1378)

* Add option to remove studio stash ids
* Add v0.8 changelog

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

@@ -10,8 +10,12 @@ import V040 from "./versions/v040.md";
 import V050 from "./versions/v050.md";
 import V060 from "./versions/v060.md";
 import V070 from "./versions/v070.md";
+import V080 from "./versions/v080.md";
 import { MarkdownPage } from "../Shared/MarkdownPage";
 
+// to avoid use of explicit any
+type Module = typeof V010;
+
 const Changelog: React.FC = () => {
   const [{ data, loading }, setOpenState] = useChangelogStorage();
 
@@ -35,82 +39,89 @@ const Changelog: React.FC = () => {
       },
     });
 
+  interface IStashRelease {
+    version: string;
+    date?: string;
+    page: Module;
+    defaultOpen?: boolean;
+  }
+
+  // after new release:
+  // add entry to releases, using the current* fields
+  // then update the current fields.
+  const currentVersion = stashVersion || "v0.8.0";
+  const currentDate = buildDate;
+  const currentPage = V080;
+
+  const releases: IStashRelease[] = [
+    {
+      version: currentVersion,
+      date: currentDate,
+      page: currentPage,
+      defaultOpen: true,
+    },
+    {
+      version: "v0.7.0",
+      date: "2021-05-15",
+      page: V070,
+    },
+    {
+      version: "v0.6.0",
+      date: "2021-03-29",
+      page: V060,
+    },
+    {
+      version: "v0.5.0",
+      date: "2021-02-23",
+      page: V050,
+    },
+    {
+      version: "v0.4.0",
+      date: "2020-11-24",
+      page: V040,
+    },
+    {
+      version: "v0.3.0",
+      date: "2020-09-02",
+      page: V030,
+    },
+    {
+      version: "v0.2.1",
+      date: "2020-06-10",
+      page: V021,
+    },
+    {
+      version: "v0.2.0",
+      date: "2020-06-06",
+      page: V020,
+    },
+    {
+      version: "v0.1.1",
+      date: "2020-02-25",
+      page: V011,
+    },
+    {
+      version: "v0.1.0",
+      date: "2020-02-24",
+      page: V010,
+    },
+  ];
+
   return (
     <>
       <h1 className="mb-4">Changelog:</h1>
-      <Version
+      {releases.map((r) => (
-        version={stashVersion || "v0.7.0"}
+        <Version
-        date={buildDate}
+          key={r.version}
-        openState={openState}
+          version={r.version}
-        setOpenState={setVersionOpenState}
+          date={r.date}
-        defaultOpen
+          openState={openState}
-      >
+          setOpenState={setVersionOpenState}
-        <MarkdownPage page={V070} />
+          defaultOpen={r.defaultOpen}
-      </Version>
+        >
-      <Version
+          <MarkdownPage page={r.page} />
-        version="v0.6.0"
+        </Version>
-        date="2021-03-29"
+      ))}
-        openState={openState}
-        setOpenState={setVersionOpenState}
-      >
-        <MarkdownPage page={V060} />
-      </Version>
-      <Version
-        version="v0.5.0"
-        date="2021-02-23"
-        openState={openState}
-        setOpenState={setVersionOpenState}
-      >
-        <MarkdownPage page={V050} />
-      </Version>
-      <Version
-        version="v0.4.0"
-        date="2020-11-24"
-        openState={openState}
-        setOpenState={setVersionOpenState}
-      >
-        <MarkdownPage page={V040} />
-      </Version>
-      <Version
-        version="v0.3.0"
-        date="2020-09-02"
-        openState={openState}
-        setOpenState={setVersionOpenState}
-      >
-        <MarkdownPage page={V030} />
-      </Version>
-      <Version
-        version="v0.2.1"
-        date="2020-06-10"
-        openState={openState}
-        setOpenState={setVersionOpenState}
-      >
-        <MarkdownPage page={V021} />
-      </Version>
-      <Version
-        version="v0.2.0"
-        date="2020-06-06"
-        openState={openState}
-        setOpenState={setVersionOpenState}
-      >
-        <MarkdownPage page={V020} />
-      </Version>
-      <Version
-        version="v0.1.1"
-        date="2020-02-25"
-        openState={openState}
-        setOpenState={setVersionOpenState}
-      >
-        <MarkdownPage page={V011} />
-      </Version>
-      <Version
-        version="v0.1.0"
-        date="2020-02-24"
-        openState={openState}
-        setOpenState={setVersionOpenState}
-      >
-        <MarkdownPage page={V010} />
-      </Version>
     </>
   );
 };

ui/v2.5/src/components/Changelog/versions/v080.md

@@ -0,0 +1,2 @@
+### 🎨 Improvements
+* Add button to remove studio stash ID. ([#1378](https://github.com/stashapp/stash/pull/1378))

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

@@ -1,4 +1,4 @@
-import { Table, Tabs, Tab } from "react-bootstrap";
+import { Button, Table, Tabs, Tab } from "react-bootstrap";
 import React, { useEffect, useState } from "react";
 import { useParams, useHistory, Link } from "react-router-dom";
 import cx from "classnames";
@@ -14,6 +14,7 @@ import {
 } from "src/core/StashService";
 import { ImageUtils, TableUtils } from "src/utils";
 import {
+  Icon,
   DetailsEditNavbar,
   Modal,
   LoadingIndicator,
@@ -48,6 +49,7 @@ export const Studio: React.FC = () => {
   const [parentStudioId, setParentStudioId] = useState<string>();
   const [rating, setRating] = useState<number | undefined>(undefined);
   const [details, setDetails] = useState<string>();
+  const [stashIDs, setStashIDs] = useState<GQL.StashIdInput[]>([]);
 
   // Studio state
   const [studio, setStudio] = useState<Partial<GQL.StudioDataFragment>>({});
@@ -68,6 +70,7 @@ export const Studio: React.FC = () => {
     setParentStudioId(state?.parent_studio?.id ?? undefined);
     setRating(state.rating ?? undefined);
     setDetails(state.details ?? undefined);
+    setStashIDs(state.stash_ids ?? []);
   }
 
   function updateStudioData(studioData: Partial<GQL.StudioDataFragment>) {
@@ -150,6 +153,10 @@ export const Studio: React.FC = () => {
       details,
       parent_id: parentStudioId ?? null,
       rating: rating ?? null,
+      stash_ids: stashIDs.map((s) => ({
+        stash_id: s.stash_id,
+        endpoint: s.endpoint,
+      })),
     };
 
     if (!isNew) {
@@ -203,6 +210,15 @@ export const Studio: React.FC = () => {
     history.push(`/studios`);
   }
 
+  const removeStashID = (stashID: GQL.StashIdInput) => {
+    setStashIDs(
+      stashIDs.filter(
+        (s) =>
+          !(s.endpoint === stashID.endpoint && s.stash_id === stashID.stash_id)
+      )
+    );
+  };
+
   function onImageChangeHandler(event: React.FormEvent<HTMLInputElement>) {
     ImageUtils.onImageChange(event, onImageLoad);
   }
@@ -230,7 +246,7 @@ export const Studio: React.FC = () => {
         <td>StashIDs</td>
         <td>
           <ul className="pl-0">
-            {studio.stash_ids.map((stashID) => {
+            {stashIDs.map((stashID) => {
               const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
               const link = base ? (
                 <a
@@ -245,6 +261,16 @@ export const Studio: React.FC = () => {
               );
               return (
                 <li key={stashID.stash_id} className="row no-gutters">
+                  {isEditing && (
+                    <Button
+                      variant="danger"
+                      className="mr-2 py-0"
+                      title="Delete StashID"
+                      onClick={() => removeStashID(stashID)}
+                    >
+                      <Icon icon="trash-alt" />
+                    </Button>
+                  )}
                   {link}
                 </li>
               );
@@ -353,7 +379,7 @@ export const Studio: React.FC = () => {
                 />
               </td>
             </tr>
-            {!isEditing && renderStashIDs()}
+            {renderStashIDs()}
           </tbody>
         </Table>
         <DetailsEditNavbar