show commit status in commit list row

src/components/Commits/CommitDetailsView.tsx

@@ -27,6 +27,7 @@ import { PipelineRunKind } from '../../types';
 import { createCommitObjectFromPLR, getCommitShortName, statuses } from '../../utils/commits-utils';
 import { useNamespace } from '../../utils/namespace-context-utils';
 import DetailsPage from '../ApplicationDetails/DetailsPage';
+import { useCommitStatus } from './commit-status';
 import CommitsGettingStartedModal from './CommitsGettingStartedModal';
 import CommitSidePanel from './CommitSidePanel';
 import { SortedPLRList } from './CommitSidePanelHeader';
@@ -99,7 +100,7 @@ const CommitDetailsView: React.FC<CommitDetailsViewProps> = ({ commitName, appli
       return null;
     }
 
-    const runs = {};
+    const runs: SortedPLRList = {};
     pipelineruns.forEach((plr) => {
       // sort plr into respective status array
       const plrStatus = pipelineRunFilterReducer(plr);
@@ -117,25 +118,28 @@ const CommitDetailsView: React.FC<CommitDetailsViewProps> = ({ commitName, appli
     // sort each status array
     statuses.forEach((status) => {
       if (runs[status] && Array.isArray(runs[status])) {
-        runs[status].sort((a, b) => parseInt(a.startTime, 10) - parseInt(b.startTime, 10));
+        runs[status].sort(
+          (a, b) => parseInt(a.status?.startTime, 10) - parseInt(b.status?.startTime, 10),
+        );
       }
     });
 
     return runs;
   }, [pipelineruns, loaded, loadErr]);
 
-  const commitStatus = React.useMemo(() => {
+  React.useEffect(() => {
     if (sortedPLRList) {
-      for (const s in sortedPLRList) {
-        if (sortedPLRList[s]?.length > 0) {
-          setSelectedPipelineRun(sortedPLRList[s][0]);
-          return s;
+      Object.values(sortedPLRList).some((s) => {
+        if (s?.length > 0) {
+          setSelectedPipelineRun(s[0]);
+          return true;
         }
-      }
+      });
     }
-    return '-';
   }, [sortedPLRList]);
 
+  const [commitStatus] = useCommitStatus(applicationName, commitName);
+
   const commitDisplayName = getCommitShortName(commitName);
 
   if (loadErr || (loaded && !commit)) {

src/components/Commits/CommitSidePanelHeader.tsx

@@ -14,13 +14,8 @@ import { runStatus } from '../../shared';
 import { PipelineRunKind } from '../../types';
 import { statuses } from '../../utils/commits-utils';
 
-export interface SortedPLRList {
-  [runStatus.Running]?: PipelineRunKind[];
-  [runStatus.Cancelled]?: PipelineRunKind[];
-  [runStatus.Failed]?: PipelineRunKind[];
-  [runStatus.Pending]?: PipelineRunKind[];
-  [runStatus.Succeeded]?: PipelineRunKind[];
-}
+export type SortedPLRList = Partial<Record<runStatus, PipelineRunKind[]>>;
+
 interface CommitSidePanelHeaderProps {
   drawerRef: React.Ref<HTMLElement>;
   currentStatus: string;

src/components/Commits/CommitsListRow.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { Skeleton } from '@patternfly/react-core';
 import { GithubIcon } from '@patternfly/react-icons/dist/js/icons/github-icon';
 import ActionMenu from '../../shared/components/action-menu/ActionMenu';
 import ExternalLink from '../../shared/components/links/ExternalLink';
 import { RowFunctionArgs, TableData } from '../../shared/components/table';
 import { Timestamp } from '../../shared/components/timestamp/Timestamp';
 import { Commit } from '../../types';
 import { useCommitActions } from './commit-actions';
+import { useCommitStatus } from './commit-status';
 import { commitsTableColumnClasses } from './CommitsListHeader';
 
 const CommitsListRow: React.FC<RowFunctionArgs<Commit>> = ({ obj }) => {
   const actions = useCommitActions(obj);
+  const [status, statusLoaded] = useCommitStatus(obj.application, obj.sha);
   return (
     <>
       <TableData className={commitsTableColumnClasses.name}>
@@ -41,7 +44,9 @@ const CommitsListRow: React.FC<RowFunctionArgs<Commit>> = ({ obj }) => {
       <TableData className={commitsTableColumnClasses.committedAt}>
         <Timestamp timestamp={obj.creationTime} />
       </TableData>
-      <TableData className={commitsTableColumnClasses.status}>-</TableData>
+      <TableData className={commitsTableColumnClasses.status}>
+        {statusLoaded ? status : <Skeleton width="50%" screenreaderText="Loading commit status" />}
+      </TableData>
       <TableData className={commitsTableColumnClasses.kebab}>
         <ActionMenu actions={actions} />
       </TableData>

src/components/Commits/__data__/pipeline-with-commits.ts

@@ -552,6 +552,17 @@ export const pipelineWithCommits: PipelineRunKind[] = [
       },
     },
     spec: {},
+    status: {
+      pipelineSpec: null,
+      conditions: [
+        {
+          reason: 'Failed',
+          status: 'False',
+          type: 'Succeeded',
+        },
+      ],
+      startTime: '2022-08-20T12:47:26Z',
+    },
   },
   {
     apiVersion: 'tekton.dev/v1beta1',

src/components/Commits/__tests__/CommitsListRow.spec.tsx

@@ -14,6 +14,10 @@ jest.mock('react-router-dom', () => ({
   Link: (props) => <a href={props.to}>{props.children}</a>,
 }));
 
+jest.mock('../commit-status', () => ({
+  useCommitStatus: () => ['-', true],
+}));
+
 const commits = getCommitsFromPLRs(pipelineWithCommits);
 
 describe('CommitsListRow', () => {

src/components/Commits/__tests__/CommitsListView.spec.tsx

@@ -14,6 +14,10 @@ jest.mock('react-router-dom', () => ({
   Link: (props) => <a href={props.to}>{props.children}</a>,
 }));
 
+jest.mock('../commit-status', () => ({
+  useCommitStatus: () => ['-', true],
+}));
+
 const commits = getCommitsFromPLRs(pipelineWithCommits);
 
 describe('CommitsListView', () => {

src/components/Commits/__tests__/commit-status.spec.ts

@@ -0,0 +1,37 @@
+import { useK8sWatchResource } from '@openshift/dynamic-plugin-sdk-utils';
+import '@testing-library/jest-dom';
+import { renderHook } from '@testing-library/react-hooks';
+import { pipelineWithCommits } from '../__data__/pipeline-with-commits';
+import { useCommitStatus } from '../commit-status';
+
+jest.mock('@openshift/dynamic-plugin-sdk-utils', () => ({
+  useK8sWatchResource: jest.fn(),
+}));
+
+const watchResourceMock = useK8sWatchResource as jest.Mock;
+
+describe('useCommitStatus', () => {
+  it('returns empty status if pipelineruns are not loaded', () => {
+    watchResourceMock.mockReturnValue([null, false]);
+    const { result } = renderHook(() => useCommitStatus('app', 'commit'));
+    expect(result.current).toEqual(['-', false, undefined]);
+  });
+
+  it('returns empty status if pipelineruns for given commit are not found', () => {
+    watchResourceMock.mockReturnValue([pipelineWithCommits, true]);
+    const { result } = renderHook(() => useCommitStatus('app', 'commit123'));
+    expect(result.current).toEqual(['-', true, undefined]);
+  });
+
+  it('returns correct status if pipelineruns are loaded', () => {
+    watchResourceMock.mockReturnValue([pipelineWithCommits, true]);
+    const { result } = renderHook(() => useCommitStatus('purple-mermaid-app', 'commit14rt'));
+    expect(result.current).toEqual(['Succeeded', true, undefined]);
+  });
+
+  it('returns status from the latest started pipelinerun', () => {
+    watchResourceMock.mockReturnValue([pipelineWithCommits, true]);
+    const { result } = renderHook(() => useCommitStatus('purple-mermaid-app', 'commit123'));
+    expect(result.current).toEqual(['Failed', true, undefined]);
+  });
+});

src/components/Commits/commit-status.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useK8sWatchResource } from '@openshift/dynamic-plugin-sdk-utils';
+import { PipelineRunLabel } from '../../consts/pipelinerun';
+import { PipelineRunGroupVersionKind } from '../../models';
+import { pipelineRunFilterReducer } from '../../shared';
+import { PipelineRunKind } from '../../types';
+import { statuses } from '../../utils/commits-utils';
+import { useNamespace } from '../../utils/namespace-context-utils';
+
+export const useCommitStatus = (
+  application: string,
+  commit: string,
+): [string, boolean, unknown] => {
+  const namespace = useNamespace();
+  const [pipelineruns, loaded, loadErr] = useK8sWatchResource<PipelineRunKind[]>({
+    groupVersionKind: PipelineRunGroupVersionKind,
+    isList: true,
+    namespace,
+  });
+
+  const plrsForCommit = React.useMemo(
+    () =>
+      pipelineruns
+        ?.filter(
+          (plr) =>
+            plr.metadata.labels[PipelineRunLabel.APPLICATION] === application &&
+            plr.metadata.labels[PipelineRunLabel.COMMIT_LABEL] === commit,
+        )
+        .sort((a, b) => parseInt(a.status?.startTime, 10) - parseInt(b.status?.startTime, 10)),
+    [application, commit, pipelineruns],
+  );
+
+  const commitStatus = React.useMemo(() => {
+    if (!loaded || loadErr) {
+      return '-';
+    }
+
+    const plrStatus = pipelineRunFilterReducer(plrsForCommit[plrsForCommit.length - 1]);
+    if (statuses.includes(plrStatus)) {
+      return plrStatus;
+    }
+    return '-';
+  }, [loaded, loadErr, plrsForCommit]);
+
+  return [commitStatus, loaded, loadErr];
+};