Patchable ExternalLinkButtons component (#5727)

* Patchable ExternalLinkButtons component
* added fontAwesomeBrands
* use ExternalLinkButtons on groups page

ui/v2.5/src/components/Groups/GroupDetails/Group.tsx

@@ -28,7 +28,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 { ExternalLinksButton } from "src/components/Shared/ExternalLinksButton";
+import { ExternalLinkButtons } from "src/components/Shared/ExternalLinksButton";
 import { BackgroundImage } from "src/components/Shared/DetailsPage/BackgroundImage";
 import { DetailTitle } from "src/components/Shared/DetailsPage/DetailTitle";
 import { ExpandCollapseButton } from "src/components/Shared/CollapseButton";
@@ -374,7 +374,7 @@ const GroupPage: React.FC<IProps> = ({ group, tabKey }) => {
                   />
                 )}
                 <span className="name-icons">
-                  <ExternalLinksButton urls={group.urls} />
+                  <ExternalLinkButtons urls={group.urls ?? undefined} />
                 </span>
               </DetailTitle>
 

ui/v2.5/src/components/Shared/ExternalLinksButton.tsx

@@ -6,12 +6,15 @@ import { IconDefinition, faLink } from "@fortawesome/free-solid-svg-icons";
 import { useMemo } from "react";
 import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import ReactDOM from "react-dom";
+import { PatchComponent } from "src/patch";
 
 export const ExternalLinksButton: React.FC<{
   icon?: IconDefinition;
   urls: string[];
   className?: string;
-}> = ({ urls, icon = faLink, className = "" }) => {
+}> = PatchComponent(
+  "ExternalLinksButton",
+  ({ urls, icon = faLink, className = "" }) => {
     if (!urls.length) {
       return null;
     }
@@ -41,11 +44,11 @@ export const ExternalLinksButton: React.FC<{
         <Menu />
       </Dropdown>
     );
-};
+  }
+);
 
-export const ExternalLinkButtons: React.FC<{ urls: string[] | undefined }> = ({
-  urls,
-}) => {
+export const ExternalLinkButtons: React.FC<{ urls: string[] | undefined }> =
+  PatchComponent("ExternalLinkButtons", ({ urls }) => {
     const urlSpecs = useMemo(() => {
       if (!urls?.length) {
         return [];
@@ -75,4 +78,4 @@ export const ExternalLinkButtons: React.FC<{ urls: string[] | undefined }> = ({
         ))}
       </>
     );
-};
+  });

ui/v2.5/src/docs/en/Manual/UIPluginApi.md

@@ -29,6 +29,7 @@ This namespace contains the generated graphql client interface. This is a low-le
 - `Intl`
 - `FontAwesomeRegular`
 - `FontAwesomeSolid`
+- `FontAwesomeBrands`
 - `Mousetrap`
 - `MousetrapPause`
 - `ReactSelect`
@@ -147,6 +148,8 @@ Returns `void`.
 - `ConstantSetting`
 - `CountrySelect`
 - `DateInput`
+- `ExternalLinkButtons`
+- `ExternalLinksButton`
 - `FolderSelect`
 - `FrontPage`
 - `GalleryIDSelect`

ui/v2.5/src/pluginApi.d.ts

@@ -614,6 +614,7 @@ declare namespace PluginApi {
     const Bootstrap: typeof import("react-bootstrap");
     const FontAwesomeRegular: typeof import("@fortawesome/free-regular-svg-icons");
     const FontAwesomeSolid: typeof import("@fortawesome/free-solid-svg-icons");
+    const FontAwesomeBrands: typeof import("@fortawesome/free-brands-svg-icons");
     const Intl: typeof import("react-intl");
     const Mousetrap: typeof import("mousetrap");
     const ReactSelect: typeof import("react-select");
@@ -697,6 +698,8 @@ declare namespace PluginApi {
     PerformerImagesPanel: React.FC<any>;
     TabTitleCounter: React.FC<any>;
     PerformerCard: React.FC<any>;
+    ExternalLinkButtons: React.FC<any>;
+    ExternalLinksButton: React.FC<any>;
     "PerformerCard.Popovers": React.FC<any>;
     "PerformerCard.Details": React.FC<any>;
     "PerformerCard.Overlays": React.FC<any>;

ui/v2.5/src/pluginApi.tsx

@@ -11,6 +11,7 @@ import * as Bootstrap from "react-bootstrap";
 import * as Intl from "react-intl";
 import * as FontAwesomeSolid from "@fortawesome/free-solid-svg-icons";
 import * as FontAwesomeRegular from "@fortawesome/free-regular-svg-icons";
+import * as FontAwesomeBrands from "@fortawesome/free-brands-svg-icons";
 import * as ReactSelect from "react-select";
 import { useSpriteInfo } from "./hooks/sprite";
 import { useToast } from "./hooks/Toast";
@@ -72,6 +73,7 @@ export const PluginApi = {
     Intl,
     FontAwesomeRegular,
     FontAwesomeSolid,
+    FontAwesomeBrands,
     Mousetrap,
     MousetrapPause,
     ReactSelect,