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,21 +128,32 @@ describe('ProductivityApp component', () => {
                 ).toBe(true);
               });
 
-              it('calls onMainChartItemClicked when chartItemClicked is emitted on the column chart ', () => {
-                const data = {
-                  chart: null,
-                  params: {
-                    data: {
-                      value: [0, 1],
+              describe('when an item on the chart is clicked', () => {
+                beforeEach(() => {
+                  const data = {
+                    chart: null,
+                    params: {
+                      data: {
+                        value: [0, 1],
+                      },
                     },
-                  },
-                };
+                  };
 
-                findTimeToMergeSection()
-                  .find(GlColumnChart)
-                  .vm.$emit('chartItemClicked', data);
+                  findTimeToMergeSection()
+                    .find(GlColumnChart)
+                    .vm.$emit('chartItemClicked', data);
+                });
+
+                it('dispatches chartItemClicked action', () => {
+                  expect(actionSpies.chartItemClicked).toHaveBeenCalledWith({
+                    chartKey: chartKeys.main,
+                    item: 0,
+                  });
+                });
 
-                expect(onMainChartItemClickedMock).toHaveBeenCalledWith(data);
+                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,53 +337,89 @@ describe('ProductivityApp component', () => {
             });
           });
 
-          describe('when isLoadingTable is false', () => {
+          describe('when table finished loading', () => {
             beforeEach(() => {
               store.state.table.isLoadingTable = false;
-              store.state.table.mergeRequests = [{ id: 1, title: 'This is a test MR' }];
             });
 
-            it('renders the MR table', () => {
-              expect(findMrTable().exists()).toBe(true);
-            });
-
-            it('should change the column metric', () => {
-              findMrTable().vm.$emit('columnMetricChange', 'time_to_first_comment');
-              expect(actionSpies.setColumnMetric).toHaveBeenCalledWith('time_to_first_comment');
-            });
+            describe('and the table has data', () => {
+              beforeEach(() => {
+                store.state.table.mergeRequests = [{ id: 1, title: 'This is a test MR' }];
+              });
 
-            it('should change the page', () => {
-              const page = 2;
-              findMrTable().vm.$emit('pageChange', page);
-              expect(actionSpies.setMergeRequestsPage).toHaveBeenCalledWith(page);
-            });
+              it('renders the MR table', () => {
+                expect(findMrTable().exists()).toBe(true);
+              });
 
-            describe('and there are merge requests available', () => {
-              beforeEach(() => {
-                store.state.table.mergeRequests = [{ id: 1 }];
+              it('doesn’t render a "no data" message', () => {
+                expect(
+                  findMrTableSection()
+                    .find('.js-no-data')
+                    .exists(),
+                ).toBe(false);
               });
 
-              describe('sort controls', () => {
-                it('renders the sort dropdown and button', () => {
-                  expect(findSortFieldDropdown().exists()).toBe(true);
-                  expect(findSortOrderToggle().exists()).toBe(true);
-                });
+              it('should change the column metric', () => {
+                findMrTable().vm.$emit('columnMetricChange', 'time_to_first_comment');
+                expect(actionSpies.setColumnMetric).toHaveBeenCalledWith('time_to_first_comment');
+              });
 
-                it('should change the sort field', () => {
-                  findSortFieldDropdown()
-                    .findAll(GlDropdownItem)
-                    .at(0)
-                    .vm.$emit('click');
+              it('should change the page', () => {
+                const page = 2;
+                findMrTable().vm.$emit('pageChange', page);
+                expect(actionSpies.setMergeRequestsPage).toHaveBeenCalledWith(page);
+              });
 
-                  expect(actionSpies.setSortField).toHaveBeenCalled();
+              describe('and there are merge requests available', () => {
+                beforeEach(() => {
+                  store.state.table.mergeRequests = [{ id: 1 }];
                 });
 
-                it('should toggle the sort order', () => {
-                  findSortOrderToggle().vm.$emit('click');
-                  expect(actionSpies.toggleSortOrder).toHaveBeenCalled();
+                describe('sort controls', () => {
+                  it('renders the sort dropdown and button', () => {
+                    expect(findSortFieldDropdown().exists()).toBe(true);
+                    expect(findSortOrderToggle().exists()).toBe(true);
+                  });
+
+                  it('should change the sort field', () => {
+                    findSortFieldDropdown()
+                      .findAll(GlDropdownItem)
+                      .at(0)
+                      .vm.$emit('click');
+
+                    expect(actionSpies.setSortField).toHaveBeenCalled();
+                  });
+
+                  it('should toggle the sort order', () => {
+                    findSortOrderToggle().vm.$emit('click');
+                    expect(actionSpies.toggleSortOrder).toHaveBeenCalled();
+                  });
                 });
               });
             });
+
+            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);
+              });
+            });
           });
         });
       });