From e9dd53c0f6e090d1994864b2fdcc6dd151c930b1 Mon Sep 17 00:00:00 2001
From: Sahil Budhwar <sahilbudhwar143@gmail.com>
Date: Mon, 30 Dec 2024 08:42:44 +0530
Subject: [PATCH] fix: unblock component list loading from pipeline runs

---
 .../ComponentsListView/ComponentListView.tsx  | 26 +++++++++++--------
 .../ComponentsListView/ComponentsListRow.tsx  | 10 ++++---
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/Components/ComponentsListView/ComponentListView.tsx b/src/components/Components/ComponentsListView/ComponentListView.tsx
index 636222a8..9a9f7ed8 100644
--- a/src/components/Components/ComponentsListView/ComponentListView.tsx
+++ b/src/components/Components/ComponentsListView/ComponentListView.tsx
@@ -79,23 +79,16 @@ const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps
   const componentPACStates = usePACStatesForComponents(components);
 
   const componentsWithLatestBuild = React.useMemo(() => {
-    if (!componentsLoaded || componentsError || !pipelineRunsLoaded || pipelineRunsError) {
+    if (!componentsLoaded || componentsError) {
       return [];
     }
     return components.map((c) => ({
       ...c,
-      latestBuildPipelineRun: pipelineRuns.find(
+      latestBuildPipelineRun: pipelineRuns?.find(
         (plr) => plr.metadata?.labels?.[PipelineRunLabel.COMPONENT] === c.metadata.name,
       ),
     }));
-  }, [
-    components,
-    componentsError,
-    componentsLoaded,
-    pipelineRuns,
-    pipelineRunsError,
-    pipelineRunsLoaded,
-  ]);
+  }, [components, componentsError, componentsLoaded, pipelineRuns]);
 
   const statusFilters = React.useMemo(
     () => (statusFiltersParam ? statusFiltersParam.split(',') : []),
@@ -207,6 +200,16 @@ const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps
           that run together form an application.
         </Text>
       </TextContent>
+      {pipelineRunsLoaded && pipelineRunsError ? (
+        <Alert
+          className="pf-v5-u-mt-md"
+          variant={AlertVariant.warning}
+          isInline
+          title="Error while fetching pipeline runs"
+        >
+          {(pipelineRunsError as { message: string })?.message}{' '}
+        </Alert>
+      ) : null}
       {gettingStartedCard}
       {componentsLoaded && pipelineRunsLoaded && pendingCount > 0 && !mergeAlertHidden ? (
         <Alert
@@ -253,7 +256,8 @@ const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps
           aria-label="Components List"
           Header={ComponentsListHeader}
           Row={ComponentsListRow}
-          loaded={componentsLoaded && pipelineRunsLoaded}
+          loaded={componentsLoaded}
+          customData={{ pipelineRunsLoaded }}
           getRowProps={(obj: ComponentKind) => ({
             id: `${obj.metadata.name}-component-list-item`,
             'aria-label': obj.metadata.name,
diff --git a/src/components/Components/ComponentsListView/ComponentsListRow.tsx b/src/components/Components/ComponentsListView/ComponentsListRow.tsx
index 0926cc2d..13f98ad9 100644
--- a/src/components/Components/ComponentsListView/ComponentsListRow.tsx
+++ b/src/components/Components/ComponentsListView/ComponentsListRow.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, Skeleton } from '@patternfly/react-core';
 import { PacStatesForComponents } from '../../../hooks/usePACStatesForComponents';
 import { RowFunctionArgs, TableData } from '../../../shared';
 import ActionMenu from '../../../shared/components/action-menu/ActionMenu';
@@ -27,7 +27,7 @@ export const getContainerImageLink = (url: string) => {
 
 const ComponentsListRow: React.FC<
   RowFunctionArgs<ComponentWithLatestBuildPipeline, PacStatesForComponents>
-> = ({ obj: component }) => {
+> = ({ obj: component, customData }) => {
   const { workspace } = useWorkspaceInfo();
   const applicationName = component.spec.application;
   const name = component.metadata.name;
@@ -81,7 +81,11 @@ const ComponentsListRow: React.FC<
       </TableData>
       <TableData className={componentsTableColumnClasses.latestBuild}>
         <div className="component-list-view__build-completion">
-          <PipelineRunStatus pipelineRun={component.latestBuildPipelineRun} />
+          {component.latestBuildPipelineRun || customData.pipelineRunsLoaded ? (
+            <PipelineRunStatus pipelineRun={component.latestBuildPipelineRun} />
+          ) : (
+            <Skeleton />
+          )}
           <div>
             {commit ? (
               <>