Use StashIDPill to show stash IDs in the tagger view (stashapp#5879)

* Use StashIDPill to show stash IDs in the tagger view

This is visually nicer, but more importantly, lets you see easily which stash-boxes are already associated with this scene.

* Move into separate component. Add key
---------
Co-authored-by: WithoutPants <[email protected]>

Author: 2 people

ui/v2.5/src/components/Tagger/scenes/TaggerScene.tsx

@@ -7,6 +7,7 @@ import { FormattedMessage } from "react-intl";
 import { sortPerformers } from "src/core/performers";
 import { Icon } from "src/components/Shared/Icon";
 import { OperationButton } from "src/components/Shared/OperationButton";
+import { StashIDPill } from "src/components/Shared/StashID";
 import { PerformerLink, TagLink } from "src/components/Shared/TagLink";
 import { TruncatedText } from "src/components/Shared/TruncatedText";
 import { parsePath, prepareQueryString } from "src/components/Tagger/utils";
@@ -18,7 +19,6 @@ import {
   faImage,
 } from "@fortawesome/free-solid-svg-icons";
 import { objectPath, objectTitle } from "src/core/files";
-import { ExternalLink } from "src/components/Shared/ExternalLink";
 import { ConfigurationContext } from "src/hooks/Config";
 import { SceneQueue } from "src/models/sceneQueue";
 
@@ -85,6 +85,27 @@ const TaggerSceneDetails: React.FC<ITaggerSceneDetails> = ({ scene }) => {
   );
 };
 
+type StashID = Pick<GQL.StashId, "endpoint" | "stash_id">;
+
+const StashIDs: React.FC<{ stashIDs: StashID[] }> = ({ stashIDs }) => {
+  if (!stashIDs.length) {
+    return null;
+  }
+
+  const stashLinks = stashIDs.map((stashID) => {
+    const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
+    const link = base ? (
+      <StashIDPill stashID={stashID} linkType="scenes" />
+    ) : (
+      <span className="small">{stashID.stash_id}</span>
+    );
+
+    return <div key={stashID.stash_id}>{link}</div>;
+  });
+
+  return <div className="mt-2 sub-content text-right">{stashLinks}</div>;
+};
+
 interface ITaggerScene {
   scene: GQL.SlimSceneDataFragment;
   url: string;
@@ -181,28 +202,6 @@ export const TaggerScene: React.FC<PropsWithChildren<ITaggerScene>> = ({
     );
   }
 
-  function maybeRenderStashLinks() {
-    if (scene.stash_ids.length > 0) {
-      const stashLinks = scene.stash_ids.map((stashID) => {
-        const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
-        const link = base ? (
-          <ExternalLink
-            key={`${stashID.endpoint}${stashID.stash_id}`}
-            className="small d-block"
-            href={`${base}scenes/${stashID.stash_id}`}
-          >
-            {stashID.stash_id}
-          </ExternalLink>
-        ) : (
-          <div className="small">{stashID.stash_id}</div>
-        );
-
-        return link;
-      });
-      return <div className="mt-2 sub-content text-right">{stashLinks}</div>;
-    }
-  }
-
   function onSpriteClick(ev: React.MouseEvent<HTMLElement>) {
     ev.preventDefault();
     showLightboxImage(scene.paths.sprite ?? "");
@@ -276,7 +275,7 @@ export const TaggerScene: React.FC<PropsWithChildren<ITaggerScene>> = ({
           {errorMessage ? (
             <div className="text-danger font-weight-bold">{errorMessage}</div>
           ) : undefined}
-          {maybeRenderStashLinks()}
+          <StashIDs stashIDs={scene.stash_ids} />
         </div>
         <TaggerSceneDetails scene={scene} />
       </div>