Link improvements and fixes (stashapp#4501)

* Add ExternalLink * Replace <a> with <Link>
halkeye · Sep 1, 2024 · eb6f24f · eb6f24f
1 parent 41e5374
commit eb6f24f
Show file tree

Hide file tree

Showing 28 changed files with 292 additions and 325 deletions.
diff --git a/ui/v2.5/src/components/Dialogs/SubmitDraft.tsx b/ui/v2.5/src/components/Dialogs/SubmitDraft.tsx
@@ -9,6 +9,7 @@ import { ModalComponent } from "src/components/Shared/Modal";
 import { getStashboxBase } from "src/utils/stashbox";
 import { FormattedMessage, useIntl } from "react-intl";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
+import { ExternalLink } from "../Shared/ExternalLink";
 
 interface IProps {
   type: "scene" | "performer";
@@ -108,12 +109,12 @@ export const SubmitStashBoxDraft: React.FC<IProps> = ({
             <FormattedMessage id="stashbox.submission_successful" />
           </h6>
           <div>
-            <a target="_blank" rel="noreferrer noopener" href={reviewUrl}>
+            <ExternalLink href={reviewUrl}>
               <FormattedMessage
                 id="stashbox.go_review_draft"
                 values={{ endpoint_name: selectedBox?.name }}
               />
-            </a>
+            </ExternalLink>
           </div>
         </>
       );

diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
@@ -38,6 +38,7 @@ import { DetailImage } from "src/components/Shared/DetailImage";
 import { useRatingKeybinds } from "src/hooks/keybinds";
 import { useLoadStickyHeader } from "src/hooks/detailsPanel";
 import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
+import { ExternalLink } from "src/components/Shared/ExternalLink";
 
 interface IProps {
   movie: GQL.MovieDataFragment;
@@ -274,15 +275,13 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
   const renderClickableIcons = () => (
     <span className="name-icons">
       {movie.url && (
-        <Button className="minimal icon-link" title={movie.url}>
-          <a
-            href={TextUtils.sanitiseURL(movie.url)}
-            className="link"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Icon icon={faLink} />
-          </a>
+        <Button
+          as={ExternalLink}
+          href={TextUtils.sanitiseURL(movie.url)}
+          className="minimal link"
+          title={movie.url}
+        >
+          <Icon icon={faLink} />
         </Button>
       )}
     </span>

diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx
@@ -3,6 +3,7 @@ import { useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import TextUtils from "src/utils/text";
 import { DetailItem } from "src/components/Shared/DetailItem";
+import { Link } from "react-router-dom";
 
 interface IMovieDetailsPanel {
   movie: GQL.MovieDataFragment;
@@ -34,9 +35,9 @@ export const MovieDetailsPanel: React.FC<IMovieDetailsPanel> = ({
         id="studio"
         value={
           movie.studio?.id ? (
-            <a href={`/studios/${movie.studio?.id}`} target="_self">
+            <Link to={`/studios/${movie.studio?.id}`}>
               {movie.studio?.name}
-            </a>
+            </Link>
           ) : (
             ""
           )

diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
@@ -45,6 +45,7 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
 import { DetailImage } from "src/components/Shared/DetailImage";
 import { useLoadStickyHeader } from "src/hooks/detailsPanel";
 import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
+import { ExternalLink } from "src/components/Shared/ExternalLink";
 
 interface IProps {
   performer: GQL.PerformerDataFragment;
@@ -493,57 +494,50 @@ const PerformerPage: React.FC<IProps> = ({ performer, tabKey }) => {
           <Icon icon={faHeart} />
         </Button>
         {performer.url && (
-          <Button className="minimal icon-link" title={performer.url}>
-            <a
-              href={TextUtils.sanitiseURL(performer.url)}
-              className="link"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Icon icon={faLink} />
-            </a>
+          <Button
+            as={ExternalLink}
+            href={TextUtils.sanitiseURL(performer.url)}
+            className="minimal link"
+            title={performer.url}
+          >
+            <Icon icon={faLink} />
           </Button>
         )}
         {(urls ?? []).map((url, index) => (
-          <Button key={index} className="minimal icon-link" title={url}>
-            <a
-              href={TextUtils.sanitiseURL(url)}
-              className={`detail-link ${index}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Icon icon={faLink} />
-            </a>
+          <Button
+            key={index}
+            as={ExternalLink}
+            href={TextUtils.sanitiseURL(url)}
+            className={`minimal link detail-link detail-link-${index}`}
+            title={url}
+          >
+            <Icon icon={faLink} />
           </Button>
         ))}
         {performer.twitter && (
-          <Button className="minimal icon-link" title={performer.twitter}>
-            <a
-              href={TextUtils.sanitiseURL(
-                performer.twitter,
-                TextUtils.twitterURL
-              )}
-              className="twitter"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Icon icon={faTwitter} />
-            </a>
+          <Button
+            as={ExternalLink}
+            href={TextUtils.sanitiseURL(
+              performer.twitter,
+              TextUtils.twitterURL
+            )}
+            className="minimal link twitter"
+            title={performer.twitter}
+          >
+            <Icon icon={faTwitter} />
           </Button>
         )}
         {performer.instagram && (
-          <Button className="minimal icon-link" title={performer.instagram}>
-            <a
-              href={TextUtils.sanitiseURL(
-                performer.instagram,
-                TextUtils.instagramURL
-              )}
-              className="instagram"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Icon icon={faInstagram} />
-            </a>
+          <Button
+            as={ExternalLink}
+            href={TextUtils.sanitiseURL(
+              performer.instagram,
+              TextUtils.instagramURL
+            )}
+            className="minimal link instagram"
+            title={performer.instagram}
+          >
+            <Icon icon={faInstagram} />
           </Button>
         )}
       </span>

diff --git a/ui/v2.5/src/components/Performers/PerformerSelect.tsx b/ui/v2.5/src/components/Performers/PerformerSelect.tsx
@@ -25,6 +25,7 @@ import {
   Option as SelectOption,
 } from "../Shared/FilterSelect";
 import { useCompare } from "src/hooks/state";
+import { Link } from "react-router-dom";
 
 export type SelectObject = {
   id: string;
@@ -86,18 +87,17 @@ export const PerformerSelect: React.FC<
       ...optionProps,
       children: (
         <span className="react-select-image-option">
-          <a
-            href={`/performers/${object.id}`}
+          <Link
+            to={`/performers/${object.id}`}
             target="_blank"
-            rel="noreferrer"
             className="performer-select-image-link"
           >
             <img
               className="performer-select-image"
               src={object.image_path ?? ""}
               loading="lazy"
             />
-          </a>
+          </Link>
           <span>{name}</span>
           {object.disambiguation && (
             <span className="performer-disambiguation">{` (${object.disambiguation})`}</span>

diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
@@ -27,22 +27,9 @@
         color: #ff7373;
       }
 
-      .link {
-        color: rgb(191, 204, 214);
-      }
-
       .instagram {
         color: pink;
       }
-
-      .icon-link {
-        padding: 0;
-
-        a {
-          display: inline-block;
-          padding: $btn-padding-y $btn-padding-x;
-        }
-      }
     }
 
     .rating-number .form-control {

diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneFileInfoPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneFileInfoPanel.tsx
@@ -85,7 +85,7 @@ const FileInfoPanel: React.FC<IFileInfoPanelProps> = (
           url={NavUtils.makeScenesPHashMatchUrl(phash?.value)}
           target="_self"
           truncate
-          trusted
+          internal
         />
         <URLField
           id="path"

diff --git a/ui/v2.5/src/components/Settings/SettingsAboutPanel.tsx b/ui/v2.5/src/components/Settings/SettingsAboutPanel.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Button } from "react-bootstrap";
 import { useIntl } from "react-intl";
 import { useLatestVersion } from "src/core/StashService";
+import { ExternalLink } from "../Shared/ExternalLink";
 import { ConstantSetting, SettingGroup } from "./Inputs";
 import { SettingSection } from "./SettingSection";
 
@@ -115,13 +116,9 @@ export const SettingsAboutPanel: React.FC = () => {
                 { id: "config.about.stash_home" },
                 {
                   url: (
-                    <a
-                      href="https://github.com/stashapp/stash"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
+                    <ExternalLink href="https://github.com/stashapp/stash">
                       GitHub
-                    </a>
+                    </ExternalLink>
                   ),
                 }
               )}
@@ -131,13 +128,9 @@ export const SettingsAboutPanel: React.FC = () => {
                 { id: "config.about.stash_wiki" },
                 {
                   url: (
-                    <a
-                      href="https://docs.stashapp.cc"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
+                    <ExternalLink href="https://docs.stashapp.cc">
                       Documentation
-                    </a>
+                    </ExternalLink>
                   ),
                 }
               )}
@@ -147,13 +140,9 @@ export const SettingsAboutPanel: React.FC = () => {
                 { id: "config.about.stash_discord" },
                 {
                   url: (
-                    <a
-                      href="https://discord.gg/2TsNFKt"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
+                    <ExternalLink href="https://discord.gg/2TsNFKt">
                       Discord
-                    </a>
+                    </ExternalLink>
                   ),
                 }
               )}
@@ -163,13 +152,9 @@ export const SettingsAboutPanel: React.FC = () => {
                 { id: "config.about.stash_open_collective" },
                 {
                   url: (
-                    <a
-                      href="https://opencollective.com/stashapp"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
+                    <ExternalLink href="https://opencollective.com/stashapp">
                       Open Collective
-                    </a>
+                    </ExternalLink>
                   ),
                 }
               )}

diff --git a/ui/v2.5/src/components/Settings/SettingsLibraryPanel.tsx b/ui/v2.5/src/components/Settings/SettingsLibraryPanel.tsx
@@ -7,6 +7,7 @@ import { BooleanSetting, StringListSetting, StringSetting } from "./Inputs";
 import { useSettings } from "./context";
 import { useIntl } from "react-intl";
 import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { ExternalLink } from "../Shared/ExternalLink";
 
 export const SettingsLibraryPanel: React.FC = () => {
   const intl = useIntl();
@@ -76,13 +77,9 @@ export const SettingsLibraryPanel: React.FC = () => {
               {intl.formatMessage({
                 id: "config.general.excluded_video_patterns_desc",
               })}
-              <a
-                href="https://docs.stashapp.cc/beginner-guides/exclude-file-configuration"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
+              <ExternalLink href="https://docs.stashapp.cc/beginner-guides/exclude-file-configuration">
                 <Icon icon={faQuestionCircle} />
-              </a>
+              </ExternalLink>
             </span>
           }
           value={general.excludes ?? undefined}
@@ -98,13 +95,9 @@ export const SettingsLibraryPanel: React.FC = () => {
               {intl.formatMessage({
                 id: "config.general.excluded_image_gallery_patterns_desc",
               })}
-              <a
-                href="https://docs.stashapp.cc/beginner-guides/exclude-file-configuration"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
+              <ExternalLink href="https://docs.stashapp.cc/beginner-guides/exclude-file-configuration">
                 <Icon icon={faQuestionCircle} />
-              </a>
+              </ExternalLink>
             </span>
           }
           value={general.imageExcludes ?? undefined}

diff --git a/ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx b/ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx
@@ -26,6 +26,7 @@ import {
   AvailablePluginPackages,
   InstalledPluginPackages,
 } from "./PluginPackageManager";
+import { ExternalLink } from "../Shared/ExternalLink";
 
 interface IPluginSettingProps {
   pluginID: string;
@@ -97,15 +98,12 @@ export const SettingsPluginsPanel: React.FC = () => {
     function renderLink(url?: string) {
       if (url) {
         return (
-          <Button className="minimal">
-            <a
-              href={TextUtils.sanitiseURL(url)}
-              className="link"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Icon icon={faLink} />
-            </a>
+          <Button
+            as={ExternalLink}
+            href={TextUtils.sanitiseURL(url)}
+            className="minimal link"
+          >
+            <Icon icon={faLink} />
           </Button>
         );
       }