Merge pull request openshift#7547 from karthikjeeyar/pipeline-list-lo…

…ader

Bug 1907888: 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 { EmptyBox, 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,13 +14,15 @@ interface PipelineAugmentRunsWrapperProps {
 }
 
 const PipelineAugmentRunsWrapper: React.FC<PipelineAugmentRunsWrapperProps> = (props) => {
+ const { t } = useTranslation();
  const pipelineData = _.get(props.pipeline, 'data', []);
- if (pipelineData.length < 1) {
- return (
- <div className="cos-status-box">
- <div className="text-center">No {PipelineModel.labelPlural} Found</div>
- </div>
- );
+
+ if (!props.pipeline.loaded) {
+ return <LoadingBox />;
+ }
+
+ if (pipelineData.length === 0) {
+ return <EmptyBox label={t('pipelines-plugin~Pipelines')} />;
  }
  const firehoseResources: Resource = getResources(props.pipeline.data);
  return (

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 { EmptyBox, 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 render loader if data not yet loaded', () => {
+ expect(wrapper.find(LoadingBox).exists()).toBeTruthy();
+ });
+
+ it('Should render the EmptyBox if the data is empty', () => {
+ wrapper.setProps({ pipeline: { data: [], loaded: true } });
+ expect(wrapper.find(EmptyBox).exists()).toBeTruthy();
+ });
+
+ it('Should render ListpageWrapper if the pipeline data is loaded and available', () => {
+ wrapper.setProps({ pipeline: { data: [pipeline], loaded: true } });
+ expect(wrapper.find(ListPageWrapper).exists()).toBeTruthy();
+ });
+});