Display no data message in MR table if not loading

- It prevents the loading indicator and
the message from being displayed at the same time

ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue

@@ -73,6 +73,9 @@ export default {
     showMergeRequestTable() {
       return !this.isLoadingTable && this.mergeRequests.length;
     },
+    showMergeRequestTableNoData() {
+      return !this.isLoadingTable && !this.mergeRequests.length;
+    },
     showSecondaryCharts() {
       return !this.chartLoading(chartKeys.main) && this.chartHasData(chartKeys.main);
     },
@@ -93,6 +96,8 @@ export default {
     onMainChartItemClicked({ params }) {
       const itemValue = params.data.value[0];
       this.chartItemClicked({ chartKey: this.chartKeys.main, item: itemValue });
+      // let's reset the page on the MR table
+      this.setMergeRequestsPage(0);
     },
     getColumnChartOption(chartKey) {
       return {
@@ -344,7 +349,7 @@ export default {
             @columnMetricChange="setColumnMetric"
             @pageChange="setMergeRequestsPage"
           />
-          <div v-else class="bs-callout bs-callout-info">
+          <div v-if="showMergeRequestTableNoData" class="js-no-data bs-callout bs-callout-info">
             {{ __('There is no data available. Please change your selection.') }}
           </div>
         </div>

ee/spec/frontend/analytics/productivity_analytics/components/app_spec.js

@@ -23,14 +23,13 @@ describe('ProductivityApp component', () => {
 
   const actionSpies = {
     setMetricType: jest.fn(),
+    chartItemClicked: jest.fn(),
     setSortField: jest.fn(),
     setMergeRequestsPage: jest.fn(),
     toggleSortOrder: jest.fn(),
     setColumnMetric: jest.fn(),
   };
 
-  const onMainChartItemClickedMock = jest.fn();
-
   beforeEach(() => {
     wrapper = shallowMount(localVue.extend(ProductivityApp), {
       localVue,
@@ -38,10 +37,11 @@ describe('ProductivityApp component', () => {
       sync: false,
       propsData,
       methods: {
-        onMainChartItemClicked: onMainChartItemClickedMock,
         ...actionSpies,
       },
     });
+
+    jest.spyOn(store, 'dispatch').mockImplementation();
   });
 
   afterEach(() => {
@@ -128,7 +128,8 @@ describe('ProductivityApp component', () => {
                 ).toBe(true);
               });
 
-              it('calls onMainChartItemClicked when chartItemClicked is emitted on the column chart ', () => {
+              describe('when an item on the chart is clicked', () => {
+                beforeEach(() => {
                   const data = {
                     chart: null,
                     params: {
@@ -141,8 +142,18 @@ describe('ProductivityApp component', () => {
                   findTimeToMergeSection()
                     .find(GlColumnChart)
                     .vm.$emit('chartItemClicked', data);
+                });
 
-                expect(onMainChartItemClickedMock).toHaveBeenCalledWith(data);
+                it('dispatches chartItemClicked action', () => {
+                  expect(actionSpies.chartItemClicked).toHaveBeenCalledWith({
+                    chartKey: chartKeys.main,
+                    item: 0,
+                  });
+                });
+
+                it('dispatches setMergeRequestsPage action', () => {
+                  expect(actionSpies.setMergeRequestsPage).toHaveBeenCalledWith(0);
+                });
               });
             });
 
@@ -312,7 +323,7 @@ describe('ProductivityApp component', () => {
             store.state.charts.charts[chartKeys.main].data = { 1: 2, 2: 3 };
           });
 
-          describe('when isLoadingTable is true', () => {
+          describe('when table is loading', () => {
             beforeEach(() => {
               store.state.table.isLoadingTable = true;
             });
@@ -326,9 +337,13 @@ describe('ProductivityApp component', () => {
             });
           });
 
-          describe('when isLoadingTable is false', () => {
+          describe('when table finished loading', () => {
             beforeEach(() => {
               store.state.table.isLoadingTable = false;
+            });
+
+            describe('and the table has data', () => {
+              beforeEach(() => {
                 store.state.table.mergeRequests = [{ id: 1, title: 'This is a test MR' }];
               });
 
@@ -336,6 +351,14 @@ describe('ProductivityApp component', () => {
                 expect(findMrTable().exists()).toBe(true);
               });
 
+              it('doesn’t render a "no data" message', () => {
+                expect(
+                  findMrTableSection()
+                    .find('.js-no-data')
+                    .exists(),
+                ).toBe(false);
+              });
+
               it('should change the column metric', () => {
                 findMrTable().vm.$emit('columnMetricChange', 'time_to_first_comment');
                 expect(actionSpies.setColumnMetric).toHaveBeenCalledWith('time_to_first_comment');
@@ -374,6 +397,30 @@ describe('ProductivityApp component', () => {
                 });
               });
             });
+
+            describe("and the table doesn't have any data", () => {
+              beforeEach(() => {
+                store.state.table.mergeRequests = [];
+              });
+
+              it('renders a "no data" message', () => {
+                expect(
+                  findMrTableSection()
+                    .find('.js-no-data')
+                    .exists(),
+                ).toBe(true);
+              });
+
+              it('doesn`t render the MR table', () => {
+                expect(findMrTable().exists()).not.toBe(true);
+              });
+
+              it('doesn`t render the sort dropdown and button', () => {
+                expect(findSortFieldDropdown().exists()).not.toBe(true);
+                expect(findSortOrderToggle().exists()).not.toBe(true);
+              });
+            });
+          });
         });
       });
     });