Fix pipeline list page loader

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

@@ -1,9 +1,9 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { ListPageWrapper_ as ListPageWrapper } from '@console/internal/components/factory';
-import { Firehose } from '@console/internal/components/utils';
+import { Firehose, LoadingBox } from '@console/internal/components/utils';
 import { Resource, getResources } from '../../../utils/pipeline-augment';
-import { PipelineModel } from '../../../models';
 import PipelineAugmentRuns, { filters } from './PipelineAugmentRuns';
 import PipelineList from './PipelineList';
 
@@ -14,11 +14,17 @@ interface PipelineAugmentRunsWrapperProps {
 }
 
 const PipelineAugmentRunsWrapper: React.FC<PipelineAugmentRunsWrapperProps> = (props) => {
+  const { t } = useTranslation();
   const pipelineData = _.get(props.pipeline, 'data', []);
-  if (pipelineData.length < 1) {
+
+  if (!props.pipeline.loaded) {
+    return <LoadingBox />;
+  }
+
+  if (pipelineData.length === 0) {
     return (
       <div className="cos-status-box">
-        <div className="text-center">No {PipelineModel.labelPlural} Found</div>
+        <div className="text-center">{t('No Pipelines Found')}</div>
       </div>
     );
   }

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { LoadingBox } 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';
+
+const mockData = pipelineTestData[PipelineExampleNames.WORKSPACE_PIPELINE];
+const { pipeline } = mockData;
+
+type PipelineAugmentRunsWrapperProps = React.ComponentProps<typeof PipelineAugmentRunsWrapper>;
+
+jest.mock('react-i18next', () => {
+  const reactI18next = require.requireActual('react-i18next');
+  return {
+    ...reactI18next,
+    useTranslation: () => ({ t: (key) => key }),
+  };
+});
+
+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.find(LoadingBox).exists()).toBeTruthy();
+  });
+
+  it('Should not render the listPageWrapper if the data is empty', () => {
+    wrapper.setProps({ pipeline: { data: [], loaded: true } });
+    expect(wrapper.find(ListPageWrapper).exists()).toBeFalsy();
+  });
+
+  it('Should render firehose if the pipeline data is loaded and available', () => {
+    wrapper.setProps({ pipeline: { data: [pipeline], loaded: true } });
+    expect(wrapper.find(ListPageWrapper).exists()).toBeTruthy();
+  });
+});

frontend/public/locales/en/public.json

@@ -13,5 +13,6 @@
   "Pause": "Pause",
   "Warning": "Warning",
   "Not available": "Not available",
-  "Resource": "Resource"
+  "Resource": "Resource",
+  "No Pipelines Found": "No Pipelines Found"
 }