refactor(TriggerLink): Split link and text

This splits the linking from the text in the TriggerLink component so that it now can be used in a more versatile way, such as setting internal Packit dashboard links with the display of TriggerLink. As UX is going to be more refined in the future, this also helps pay the way of changing external links to be more uniform without having to change the TriggerLink once again. For what is being worked on at the moment with getting Pipeline details this change would be most welcome when it comes to linking internally but having the text from TriggerLink.
packit · Mar 22, 2024 · 00cc93b · 00cc93b
1 parent a52c280
commit 00cc93b
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 62 deletions.
diff --git a/frontend/src/app/Jobs/BodhiUpdatesTable.tsx b/frontend/src/app/Jobs/BodhiUpdatesTable.tsx
@@ -11,7 +11,7 @@ import {
 } from "@patternfly/react-table/deprecated";
 
 import { Button } from "@patternfly/react-core";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { ErrorConnection } from "../Errors/ErrorConnection";
 import { Preloader } from "../Preloader/Preloader";
 import { ForgeIcon } from "../Forge/ForgeIcon";
@@ -74,7 +74,9 @@ const BodhiUpdatesTable = () => {
           {
             title: (
               <strong>
-                <TriggerLink builds={bodhi_update} />
+                <TriggerLink trigger={bodhi_update}>
+                  <TriggerSuffix trigger={bodhi_update} />
+                </TriggerLink>
               </strong>
             ),
           },

diff --git a/frontend/src/app/Jobs/CoprBuildsTable.tsx b/frontend/src/app/Jobs/CoprBuildsTable.tsx
@@ -11,7 +11,7 @@ import {
 } from "@patternfly/react-table/deprecated";
 
 import { Button } from "@patternfly/react-core";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { ErrorConnection } from "../Errors/ErrorConnection";
 import { Preloader } from "../Preloader/Preloader";
 import { ForgeIcon } from "../Forge/ForgeIcon";
@@ -112,7 +112,9 @@ const CoprBuildsTable = () => {
           {
             title: (
               <strong>
-                <TriggerLink builds={copr_build} />
+                <TriggerLink trigger={copr_build}>
+                  <TriggerSuffix trigger={copr_build} />
+                </TriggerLink>
               </strong>
             ),
           },

diff --git a/frontend/src/app/Jobs/KojiBuildsTable.tsx b/frontend/src/app/Jobs/KojiBuildsTable.tsx
@@ -11,7 +11,7 @@ import {
 } from "@patternfly/react-table/deprecated";
 
 import { Button } from "@patternfly/react-core";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { ErrorConnection } from "../Errors/ErrorConnection";
 import { Preloader } from "../Preloader/Preloader";
 import { ForgeIcon } from "../Forge/ForgeIcon";
@@ -79,7 +79,9 @@ const KojiBuildsTable: React.FC<KojiBuildTableProps> = ({ scratch }) => {
           {
             title: (
               <strong>
-                <TriggerLink builds={koji_build} />
+                <TriggerLink trigger={koji_build}>
+                  <TriggerSuffix trigger={koji_build} />
+                </TriggerLink>
               </strong>
             ),
           },

diff --git a/frontend/src/app/Jobs/SRPMBuildsTable.tsx b/frontend/src/app/Jobs/SRPMBuildsTable.tsx
@@ -13,7 +13,7 @@ import {
 import { Button } from "@patternfly/react-core";
 
 import { ErrorConnection } from "../Errors/ErrorConnection";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { Preloader } from "../Preloader/Preloader";
 import { ForgeIcon } from "../Forge/ForgeIcon";
 import { StatusLabel } from "../StatusLabel/StatusLabel";
@@ -73,7 +73,9 @@ const SRPMBuildsTable = () => {
           {
             title: (
               <strong>
-                <TriggerLink builds={srpm_build} />
+                <TriggerLink trigger={srpm_build}>
+                  <TriggerSuffix trigger={srpm_build} />
+                </TriggerLink>
               </strong>
             ),
           },

diff --git a/frontend/src/app/Jobs/SyncReleaseStatuses.tsx b/frontend/src/app/Jobs/SyncReleaseStatuses.tsx
@@ -11,7 +11,7 @@ import {
 } from "@patternfly/react-table/deprecated";
 
 import { Button } from "@patternfly/react-core";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { ErrorConnection } from "../Errors/ErrorConnection";
 import { Preloader } from "../Preloader/Preloader";
 import { ForgeIcon } from "../Forge/ForgeIcon";
@@ -106,7 +106,9 @@ const SyncReleaseTable: React.FC<SyncReleaseTableProps> = ({ job }) => {
           {
             title: (
               <strong>
-                <TriggerLink builds={upstream_downstream_job} />
+                <TriggerLink trigger={upstream_downstream_job}>
+                  <TriggerSuffix trigger={upstream_downstream_job} />
+                </TriggerLink>
               </strong>
             ),
           },

diff --git a/frontend/src/app/Jobs/TestingFarmResultsTable.tsx b/frontend/src/app/Jobs/TestingFarmResultsTable.tsx
@@ -14,7 +14,7 @@ import { Button } from "@patternfly/react-core";
 
 import { ErrorConnection } from "../Errors/ErrorConnection";
 import { Preloader } from "../Preloader/Preloader";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { ForgeIcon } from "../Forge/ForgeIcon";
 import { StatusLabel } from "../StatusLabel/StatusLabel";
 import { Timestamp } from "../utils/Timestamp";
@@ -69,7 +69,9 @@ const TestingFarmResultsTable = () => {
           {
             title: (
               <strong>
-                <TriggerLink builds={test_result} />
+                <TriggerLink trigger={test_result}>
+                  <TriggerSuffix trigger={test_result} />
+                </TriggerLink>
               </strong>
             ),
           },

diff --git a/frontend/src/app/Results/ResultsPageBodhiUpdate.tsx b/frontend/src/app/Results/ResultsPageBodhiUpdate.tsx
@@ -20,7 +20,7 @@ import { TableHeader, TableBody } from "@patternfly/react-table/deprecated";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { ErrorConnection } from "../Errors/ErrorConnection";
 import { Preloader } from "../Preloader/Preloader";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { StatusLabel } from "../StatusLabel/StatusLabel";
 import { Timestamp } from "../utils/Timestamp";
 import { useParams } from "react-router-dom";
@@ -93,7 +93,9 @@ const ResultsPageBodhiUpdate = () => {
           <Text component="h1">Bodhi Update Results</Text>
           <Text component="p">
             <strong>
-              <TriggerLink builds={data} />
+              <TriggerLink trigger={data}>
+                <TriggerSuffix trigger={data} />
+              </TriggerLink>
               <SHACopy git_repo={data.git_repo} commit_sha={data.commit_sha} />
             </strong>
             <br />

diff --git a/frontend/src/app/Results/ResultsPageCopr.tsx b/frontend/src/app/Results/ResultsPageCopr.tsx
@@ -15,7 +15,7 @@ import {
 
 import { ErrorConnection } from "../Errors/ErrorConnection";
 import { Preloader } from "../Preloader/Preloader";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { StatusLabel } from "../StatusLabel/StatusLabel";
 import { Timestamp } from "../utils/Timestamp";
 import { useParams } from "react-router-dom";
@@ -127,7 +127,9 @@ const ResultsPageCopr = () => {
           <Text component="h1">Copr Build Results</Text>
           <Text component="p">
             <strong>
-              <TriggerLink builds={data} />
+              <TriggerLink trigger={data}>
+                <TriggerSuffix trigger={data} />
+              </TriggerLink>
               <SHACopy git_repo={data.git_repo} commit_sha={data.commit_sha} />
             </strong>
           </Text>

diff --git a/frontend/src/app/Results/ResultsPageKoji.tsx b/frontend/src/app/Results/ResultsPageKoji.tsx
@@ -20,7 +20,7 @@ import { TableHeader, TableBody } from "@patternfly/react-table/deprecated";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { ErrorConnection } from "../Errors/ErrorConnection";
 import { Preloader } from "../Preloader/Preloader";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { StatusLabel } from "../StatusLabel/StatusLabel";
 import { Timestamp } from "../utils/Timestamp";
 import { useParams } from "react-router-dom";
@@ -99,7 +99,9 @@ const ResultsPageKoji = () => {
           <Text component="h1">Koji Build Results</Text>
           <Text component="p">
             <strong>
-              <TriggerLink builds={data} />
+              <TriggerLink trigger={data}>
+                <TriggerSuffix trigger={data} />
+              </TriggerLink>
               <SHACopy git_repo={data.git_repo} commit_sha={data.commit_sha} />
             </strong>
             <br />

diff --git a/frontend/src/app/Results/ResultsPageSRPM.tsx b/frontend/src/app/Results/ResultsPageSRPM.tsx
@@ -23,7 +23,7 @@ import { LogViewer, LogViewerSearch } from "@patternfly/react-log-viewer";
 
 import { ErrorConnection } from "../Errors/ErrorConnection";
 import { Preloader } from "../Preloader/Preloader";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { StatusLabel } from "../StatusLabel/StatusLabel";
 import { Timestamp } from "../utils/Timestamp";
 import { useParams } from "react-router-dom";
@@ -150,7 +150,9 @@ const ResultsPageSRPM = () => {
 
           <Text component="p">
             <strong>
-              <TriggerLink builds={data} />
+              <TriggerLink trigger={data}>
+                <TriggerSuffix trigger={data} />
+              </TriggerLink>
             </strong>
           </Text>
         </TextContent>

diff --git a/frontend/src/app/Results/ResultsPageSyncReleaseRuns.tsx b/frontend/src/app/Results/ResultsPageSyncReleaseRuns.tsx
@@ -25,7 +25,7 @@ import {
 
 import { ErrorConnection } from "../Errors/ErrorConnection";
 import { Preloader } from "../Preloader/Preloader";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { SyncReleaseTargetStatusLabel } from "../StatusLabel/SyncReleaseTargetStatusLabel";
 import { Timestamp } from "../utils/Timestamp";
 import { LogViewer, LogViewerSearch } from "@patternfly/react-log-viewer";
@@ -249,7 +249,9 @@ const ResultsPageSyncReleaseRuns: React.FC<ResultsPageSyncReleaseRunsProps> = ({
           <Text component="h1">{displayText}</Text>
           <Text component="p">
             <strong>
-              <TriggerLink builds={data} />
+              <TriggerLink trigger={data}>
+                <TriggerSuffix trigger={data} />
+              </TriggerLink>
             </strong>
             <br />
           </Text>

diff --git a/frontend/src/app/Results/ResultsPageTestingFarm.tsx b/frontend/src/app/Results/ResultsPageTestingFarm.tsx
@@ -25,7 +25,7 @@ import {
 } from "@patternfly/react-core";
 
 import { ErrorConnection } from "../Errors/ErrorConnection";
-import { TriggerLink } from "../Trigger/TriggerLink";
+import { TriggerLink, TriggerSuffix } from "../Trigger/TriggerLink";
 import { StatusLabel } from "../StatusLabel/StatusLabel";
 import { NavLink, useParams } from "react-router-dom";
 import { useTitle } from "../utils/useTitle";
@@ -202,7 +202,9 @@ const ResultsPageTestingFarm = () => {
             <strong>
               {data ? (
                 <>
-                  <TriggerLink builds={data} />
+                  <TriggerLink trigger={data}>
+                    <TriggerSuffix trigger={data} />
+                  </TriggerLink>
                   <SHACopy
                     git_repo={data.git_repo}
                     commit_sha={data.commit_sha}

diff --git a/frontend/src/app/Trigger/TriggerLink.tsx b/frontend/src/app/Trigger/TriggerLink.tsx
@@ -10,64 +10,78 @@ import {
 } from "../utils/forgeUrls";
 
 interface TriggerLinkProps {
-  builds: {
+  trigger: {
     project_url?: string | null;
-    repo_namespace: string;
-    repo_name: string;
     git_repo?: string | null;
     pr_id?: number | null;
     issue_id?: number | null;
     branch_name?: string | null;
     release?: string | null;
   };
+  children?: React.ReactNode;
 }
 
-const TriggerLink: React.FC<TriggerLinkProps> = (props) => {
+const TriggerLink: React.FC<TriggerLinkProps> = ({ trigger, children }) => {
   let link = "";
-  // set suffix to be either PR ID or Branch Name depending on trigger
-  let jobSuffix = "";
-
   // different endpoints use "git_repo" or "project_url" to refer to the same thing
   let gitRepo = "";
-  if (props.builds.project_url) {
-    gitRepo = props.builds.project_url;
-  } else if (props.builds.git_repo) {
-    gitRepo = props.builds.git_repo;
+  if (trigger.project_url) {
+    gitRepo = trigger.project_url;
+  } else if (trigger.git_repo) {
+    gitRepo = trigger.git_repo;
   }
 
-  if (props.builds.pr_id) {
-    jobSuffix = `#${props.builds.pr_id}`;
-
-    link = getPRLink(gitRepo, props.builds.pr_id);
-  } else if (props.builds.issue_id) {
-    jobSuffix = `#${props.builds.issue_id}`;
-
-    link = getIssueLink(gitRepo, props.builds.issue_id);
-  } else if (props.builds.branch_name) {
-    jobSuffix = `:${props.builds.branch_name}`;
-
-    link = getBranchLink(gitRepo, props.builds.branch_name);
-  } else if (props.builds.release) {
-    jobSuffix = `#release:${props.builds.release}`;
-
-    link = getReleaseLink(gitRepo, props.builds.release);
+  if (trigger.pr_id) {
+    link = getPRLink(gitRepo, trigger.pr_id);
+  } else if (trigger.issue_id) {
+    link = getIssueLink(gitRepo, trigger.issue_id);
+  } else if (trigger.branch_name) {
+    link = getBranchLink(gitRepo, trigger.branch_name);
+  } else if (trigger.release) {
+    link = getReleaseLink(gitRepo, trigger.release);
   }
 
-  if (link !== "") {
+  if (link) {
     return (
       <a target="_blank" href={link} rel="noreferrer">
-        {props.builds.repo_namespace}/{props.builds.repo_name}
-        {jobSuffix}
+        {children}
       </a>
     );
-  } else {
-    return (
-      <>
-        {props.builds.repo_namespace}/{props.builds.repo_name}
-        {jobSuffix}
-      </>
-    );
   }
+  return children;
+};
+
+interface TriggerSuffixProps {
+  trigger: {
+    repo_namespace: string;
+    repo_name: string;
+    pr_id?: number | null;
+    issue_id?: number | null;
+    branch_name?: string | null;
+    release?: string | null;
+  };
+}
+
+const TriggerSuffix: React.FC<TriggerSuffixProps> = ({ trigger }) => {
+  // set suffix to be either PR ID or Branch Name depending on trigger
+  let jobSuffix = "";
+
+  if (trigger.pr_id) {
+    jobSuffix = `#${trigger.pr_id}`;
+  } else if (trigger.issue_id) {
+    jobSuffix = `#${trigger.issue_id}`;
+  } else if (trigger.branch_name) {
+    jobSuffix = `:${trigger.branch_name}`;
+  } else if (trigger.release) {
+    jobSuffix = `#release:${trigger.release}`;
+  }
+
+  return (
+    <>
+      {trigger.repo_namespace}/{trigger.repo_name}
+      {jobSuffix}
+    </>
+  );
 };
 
-export { TriggerLink };
+export { TriggerLink, TriggerSuffix };