Link Koji builds from TF detail if present

Fixes #512
Assisted-by: Cursor(Claude)

Author: lbarcziova

frontend/src/apiDefinitions.ts

@@ -336,6 +336,7 @@ export interface TestingFarmRun {
   chroot: string;
   commit_sha: string;
   copr_build_ids: number[];
+  koji_build_ids: number[];
   issue_id: number | null;
   non_git_upstream: boolean;
   pipeline_id: string; // UUID

frontend/src/components/testing-farm/KojiDataListItem.tsx

@@ -0,0 +1,47 @@
+// Copyright Contributors to the Packit project.
+// SPDX-License-Identifier: MIT
+
+import {
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+} from "@patternfly/react-core";
+import { queryOptions, useQuery } from "@tanstack/react-query";
+import React from "react";
+import { kojiBuildQueryOptions } from "../../queries/koji/kojiBuildQuery";
+import { StatusLabel } from "../statusLabels/StatusLabel";
+
+interface KojiDataListItemProps {
+  id: number;
+}
+
+export const KojiDataListItem: React.FC<KojiDataListItemProps> = ({ id }) => {
+  const { data, isError } = useQuery(
+    queryOptions({
+      ...kojiBuildQueryOptions({ id: id.toString() }),
+    }),
+  );
+
+  if (isError) {
+    return <></>;
+  }
+
+  return (
+    <DataListItem key={`koji-${id}-item`}>
+      <DataListItemRow key={`koji-${id}-row`}>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key={1}>
+              <StatusLabel
+                target={data?.chroot}
+                status={data ? data.status : "unknown"}
+                link={`/jobs/koji/${id}`}
+              />
+            </DataListCell>,
+          ]}
+        ></DataListItemCells>
+      </DataListItemRow>
+    </DataListItem>
+  );
+};

frontend/src/components/testing-farm/TestingFarmRun.tsx

@@ -26,6 +26,7 @@ import { Timestamp } from "../shared/Timestamp";
 import { StatusLabel } from "../statusLabels/StatusLabel";
 import { TriggerLink, TriggerSuffix } from "../trigger/TriggerLink";
 import { CoprDataListItem } from "./CoprDataListItem";
+import { KojiDataListItem } from "./KojiDataListItem";
 
 export const TestingFarmRun = () => {
   const { id } = TestingFarmRoute.useParams();
@@ -34,11 +35,15 @@ export const TestingFarmRun = () => {
     testingFarmRunQueryOptions({ id }),
   );
   const [coprBuildIds, setCoprBuildIds] = useState<number[]>([]);
+  const [kojiBuildIds, setKojiBuildIds] = useState<number[]>([]);
 
   useEffect(() => {
     if (data && "copr_build_ids" in data) {
       setCoprBuildIds(data?.copr_build_ids.filter((copr) => copr !== null));
     }
+    if (data && "koji_build_ids" in data) {
+      setKojiBuildIds(data?.koji_build_ids.filter((koji) => koji !== null));
+    }
   }, [data]);
 
   // If backend API is down
@@ -129,20 +134,38 @@ export const TestingFarmRun = () => {
                   </DescriptionListGroup>
                 </DescriptionList>
               </CardBody>
-              <CardBody>
-                <DescriptionList>
-                  <DescriptionListGroup>
-                    <DescriptionListTerm>Copr Build(s)</DescriptionListTerm>
-                    <DescriptionListDescription>
-                      <DataList aria-label="Copr builds">
-                        {coprBuildIds.map((coprId) => (
-                          <CoprDataListItem id={coprId} key={coprId} />
-                        ))}
-                      </DataList>
-                    </DescriptionListDescription>
-                  </DescriptionListGroup>
-                </DescriptionList>
-              </CardBody>
+              {coprBuildIds.length > 0 && (
+                <CardBody>
+                  <DescriptionList>
+                    <DescriptionListGroup>
+                      <DescriptionListTerm>Copr Build(s)</DescriptionListTerm>
+                      <DescriptionListDescription>
+                        <DataList aria-label="Copr builds">
+                          {coprBuildIds.map((coprId) => (
+                            <CoprDataListItem id={coprId} key={coprId} />
+                          ))}
+                        </DataList>
+                      </DescriptionListDescription>
+                    </DescriptionListGroup>
+                  </DescriptionList>
+                </CardBody>
+              )}
+              {kojiBuildIds.length > 0 && (
+                <CardBody>
+                  <DescriptionList>
+                    <DescriptionListGroup>
+                      <DescriptionListTerm>Koji build(s)</DescriptionListTerm>
+                      <DescriptionListDescription>
+                        <DataList aria-label="Koji builds">
+                          {kojiBuildIds.map((kojiId) => (
+                            <KojiDataListItem id={kojiId} key={kojiId} />
+                          ))}
+                        </DataList>
+                      </DescriptionListDescription>
+                    </DescriptionListGroup>
+                  </DescriptionList>
+                </CardBody>
+              )}
             </>
           )}
         </Card>