diff --git a/src/components/Components/ComponentsListView/ComponentListView.tsx b/src/components/Components/ComponentsListView/ComponentListView.tsx index 636222a..9a9f7ed 100644 --- a/src/components/Components/ComponentsListView/ComponentListView.tsx +++ b/src/components/Components/ComponentsListView/ComponentListView.tsx @@ -79,23 +79,16 @@ const ComponentListView: React.FC { - 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 + {pipelineRunsLoaded && pipelineRunsError ? ( + + {(pipelineRunsError as { message: string })?.message}{' '} + + ) : null} {gettingStartedCard} {componentsLoaded && pipelineRunsLoaded && pendingCount > 0 && !mergeAlertHidden ? ( ({ 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 0926cc2..13f98ad 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 -> = ({ 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<
- + {component.latestBuildPipelineRun || customData.pipelineRunsLoaded ? ( + + ) : ( + + )}
{commit ? ( <>