Merge branch '270104-mr-analytics-error-message-hiding-below-the-fold' into 'master'

[MR Analytics] Error message "hiding" below the fold

See merge request gitlab-org/gitlab!45686

ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_chart.vue

@@ -92,7 +92,7 @@ export default {
       return !this.hasError && this.$apollo.queries.throughputChartData.loading;
     },
     chartDataAvailable() {
-      return this.formattedThroughputChartData[0]?.data.length;
+      return this.formattedThroughputChartData[0]?.data?.some(entry => Boolean(entry[1]));
     },
     alertDetails() {
       return {

ee/spec/frontend/analytics/merge_request_analytics/components/throughput_chart_spec.js

@@ -6,7 +6,13 @@ import store from 'ee/analytics/merge_request_analytics/store';
 import ThroughputChart from 'ee/analytics/merge_request_analytics/components/throughput_chart.vue';
 import { THROUGHPUT_CHART_STRINGS } from 'ee/analytics/merge_request_analytics/constants';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
-import { throughputChartData, startDate, endDate, fullPath } from '../mock_data';
+import {
+  throughputChartData,
+  throughputChartNoData,
+  startDate,
+  endDate,
+  fullPath,
+} from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -134,6 +140,28 @@ describe('ThroughputChart', () => {
     });
   });
 
+  describe('with no data in the response', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+      wrapper.setData({ throughputChartData: throughputChartNoData });
+    });
+
+    it('does not display a skeleton loader', () => {
+      displaysComponent(ChartSkeletonLoader, false);
+    });
+
+    it('does not display the chart', () => {
+      displaysComponent(GlAreaChart, false);
+    });
+
+    it('displays an empty state message when there is no data', () => {
+      const alert = wrapper.find(GlAlert);
+
+      expect(alert.exists()).toBe(true);
+      expect(alert.text()).toBe(THROUGHPUT_CHART_STRINGS.NO_DATA);
+    });
+  });
+
   describe('with errors', () => {
     beforeEach(() => {
       wrapper = createComponent();

ee/spec/frontend/analytics/merge_request_analytics/mock_data.js

@@ -5,6 +5,8 @@ export const endDate = new Date('2020-08-01');
 
 export const fullPath = 'gitlab-org/gitlab';
 
+// We should update our tests to use fixtures instead of hardcoded mock data.
+// https://gitlab.com/gitlab-org/gitlab/-/issues/270544
 export const throughputChartData = {
   May_2020: { count: 2, __typename: 'MergeRequestConnection' },
   Jun_2020: { count: 4, __typename: 'MergeRequestConnection' },
@@ -12,6 +14,13 @@ export const throughputChartData = {
   __typename: 'Project',
 };
 
+export const throughputChartNoData = {
+  May_2020: { count: 0, __typename: 'MergeRequestConnection' },
+  Jun_2020: { count: 0, __typename: 'MergeRequestConnection' },
+  Jul_2020: { count: 0, __typename: 'MergeRequestConnection' },
+  __typename: 'Project',
+};
+
 export const formattedThroughputChartData = [
   {
     data: [['May 2020', 2], ['Jun 2020', 4], ['Jul 2020', 3]],