Fix pipeline list page loader

frontend/packages/pipelines-plugin/src/components/pipelines/list-page/PipelineAugmentRunsWrapper.tsx

@@ -15,7 +15,10 @@ interface PipelineAugmentRunsWrapperProps {
 
 const PipelineAugmentRunsWrapper: React.FC<PipelineAugmentRunsWrapperProps> = (props) => {
   const pipelineData = _.get(props.pipeline, 'data', []);
-  if (pipelineData.length < 1) {
+  if (!props.pipeline.loaded) {
+    return null;
+  }
+  if (props.pipeline.loaded && pipelineData.length < 1) {
     return (
       <div className="cos-status-box">
         <div className="text-center">No {PipelineModel.labelPlural} Found</div>

frontend/packages/pipelines-plugin/src/components/pipelines/list-page/__tests__/PipelineAugmentRunsWrapper.spec.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Firehose } from '@console/internal/components/utils';
+import { ListPageWrapper_ as ListPageWrapper } from '@console/internal/components/factory';
+import { PipelineExampleNames, pipelineTestData } from '../../../../test-data/pipeline-data';
+import PipelineAugmentRunsWrapper from '../PipelineAugmentRunsWrapper';
+import PipelineAugmentRuns from '../PipelineAugmentRuns';
+
+const mockData = pipelineTestData[PipelineExampleNames.WORKSPACE_PIPELINE];
+const { pipeline } = mockData;
+
+type PipelineAugmentRunsWrapperProps = React.ComponentProps<typeof PipelineAugmentRunsWrapper>;
+
+describe('Pipeline Augment Run Wrapper', () => {
+  let pipelineAugmentRunsWrapperProps: PipelineAugmentRunsWrapperProps;
+  let wrapper: ShallowWrapper;
+  beforeEach(() => {
+    pipelineAugmentRunsWrapperProps = {
+      pipeline: {
+        data: [pipeline],
+        loaded: false,
+      },
+    };
+    wrapper = shallow(<PipelineAugmentRunsWrapper {...pipelineAugmentRunsWrapperProps} />);
+  });
+
+  it('Should not render if the firehose call is not yet loaded', () => {
+    expect(wrapper.html()).toBeNull();
+  });
+
+  it('Should render No Pipelines found text if the data is empty', () => {
+    wrapper.setProps({ pipeline: { data: [], loaded: true } });
+    expect(wrapper.find('div.text-center').text()).toBe('No Pipelines Found');
+  });
+
+  it('Should render firehose if the pipeline data is loaded and available', () => {
+    wrapper.setProps({ pipeline: { data: [pipeline], loaded: true } });
+    const firehoseComponent = wrapper.find(Firehose);
+
+    expect(firehoseComponent.exists()).toBeTruthy();
+    expect(firehoseComponent.find(PipelineAugmentRuns).exists()).toBeTruthy();
+    expect(firehoseComponent.find(ListPageWrapper).exists()).toBeTruthy();
+  });
+});