Fix testing and error bug on CA

The error handling test was not actually catching the error we were
trying to test. In addition to this, we have now made the UX
for displaying the error more intuitive.

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -59,6 +59,7 @@ export default {
       'labels',
       'currentStageEvents',
       'customStageFormEvents',
+      'errorCode',
     ]),
     ...mapGetters(['currentStage', 'defaultStage', 'hasNoAccessError', 'currentGroupPath']),
     shouldRenderEmptyState() {
@@ -67,6 +68,9 @@ export default {
     hasCustomizableCycleAnalytics() {
       return Boolean(this.glFeatures.customizableCycleAnalytics);
     },
+    shouldDisplayFilters() {
+      return this.selectedGroup && !this.errorCode;
+    },
   },
   methods: {
     ...mapActions([
@@ -123,7 +127,7 @@ export default {
           @selected="onGroupSelect"
         />
         <projects-dropdown-filter
-          v-if="selectedGroup"
+          v-if="shouldDisplayFilters"
           :key="selectedGroup.id"
           class="js-projects-dropdown-filter ml-md-1 mt-1 mt-md-0 dropdown-select"
           :group-id="selectedGroup.id"
@@ -131,7 +135,7 @@ export default {
           @selected="onProjectsSelect"
         />
         <div
-          v-if="selectedGroup"
+          v-if="shouldDisplayFilters"
           class="ml-0 ml-md-auto mt-2 mt-md-0 d-flex flex-column flex-md-row align-items-md-center justify-content-md-end"
         >
           <label class="text-bold mb-0 mr-1">{{ __('Timeframe') }}</label>
@@ -166,7 +170,7 @@ export default {
           )
         "
       />
-      <div v-else>
+      <div v-else-if="!errorCode">
         <summary-table class="js-summary-table" :items="summary" />
         <stage-table
           v-if="currentStage"

ee/app/assets/javascripts/analytics/cycle_analytics/store/actions.js

-import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import Api from '~/api';
+import httpStatus from '~/lib/utils/http_status';
+import * as types from './mutation_types';
 
 export const setCycleAnalyticsDataEndpoint = ({ commit }, groupPath) =>
   commit(types.SET_CYCLE_ANALYTICS_DATA_ENDPOINT, groupPath);
@@ -56,7 +57,9 @@ export const receiveCycleAnalyticsDataSuccess = ({ state, commit, dispatch }, da
 export const receiveCycleAnalyticsDataError = ({ commit }, { response }) => {
   const { status } = response;
   commit(types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR, status);
-  createFlash(__('There was an error while fetching cycle analytics data.'));
+
+  if (status !== httpStatus.FORBIDDEN)
+    createFlash(__('There was an error while fetching cycle analytics data.'));
 };
 
 export const fetchCycleAnalyticsData = ({ state, dispatch }) => {

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -62,6 +62,22 @@ describe('Cycle Analytics component', () => {
       .findAll('.stage-nav-item')
       .at(index);
 
+  const displaysProjectsDropdownFilter = flag => {
+    expect(wrapper.find(ProjectsDropdownFilter).exists()).toBe(flag);
+  };
+
+  const displaysDateRangeDropdown = flag => {
+    expect(wrapper.find(DateRangeDropdown).exists()).toBe(flag);
+  };
+
+  const displaysSummaryTable = flag => {
+    expect(wrapper.find(SummaryTable).exists()).toBe(flag);
+  };
+
+  const displaysStageTable = flag => {
+    expect(wrapper.find(StageTable).exists()).toBe(flag);
+  };
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
     wrapper = createComponent();
@@ -85,9 +101,20 @@ describe('Cycle Analytics component', () => {
         expect(wrapper.find(GroupsDropdownFilter).exists()).toBe(true);
       });
 
-      it('does not display the projects or timeframe filters', () => {
-        expect(wrapper.find(ProjectsDropdownFilter).exists()).toBe(false);
-        expect(wrapper.find(DateRangeDropdown).exists()).toBe(false);
+      it('does not display the projects filter', () => {
+        displaysProjectsDropdownFilter(false);
+      });
+
+      it('does not display the date range dropdown', () => {
+        displaysDateRangeDropdown(false);
+      });
+
+      it('does not display the summary table', () => {
+        displaysSummaryTable(false);
+      });
+
+      it('does not display the stage table', () => {
+        displaysStageTable(false);
       });
     });
 
@@ -101,13 +128,20 @@ describe('Cycle Analytics component', () => {
           expect(wrapper.find(GlEmptyState).exists()).toBe(false);
         });
 
-        it('displays the projects and timeframe filters', () => {
-          expect(wrapper.find(ProjectsDropdownFilter).exists()).toBe(true);
-          expect(wrapper.find(DateRangeDropdown).exists()).toBe(true);
+        it('displays the projects filter', () => {
+          displaysProjectsDropdownFilter(true);
         });
 
-        it('displays summary table', () => {
-          expect(wrapper.find(SummaryTable).exists()).toBe(true);
+        it('displays the date range dropdown', () => {
+          displaysDateRangeDropdown(true);
+        });
+
+        it('displays the summary table', () => {
+          displaysSummaryTable(true);
+        });
+
+        it('displays the stage table', () => {
+          displaysStageTable(true);
         });
 
         it('does not display the add stage button', () => {
@@ -136,10 +170,6 @@ describe('Cycle Analytics component', () => {
             mock.restore();
           });
 
-          it('displays the stage table', () => {
-            expect(wrapper.find(StageTable).exists()).toBe(true);
-          });
-
           it('has the first stage selected by default', () => {
             const first = selectStageNavItem(0);
             const second = selectStageNavItem(1);
@@ -179,12 +209,20 @@ describe('Cycle Analytics component', () => {
           expect(emptyState.props('svgPath')).toBe(noAccessSvgPath);
         });
 
-        it('will not render the summary table', () => {
-          expect(wrapper.find('.js-summary-table').exists()).toBe(false);
+        it('does not display the projects filter', () => {
+          displaysProjectsDropdownFilter(false);
+        });
+
+        it('does not display the date range dropdown', () => {
+          displaysDateRangeDropdown(false);
+        });
+
+        it('does not display the summary table', () => {
+          displaysSummaryTable(false);
         });
 
-        it('will not render the stage table', () => {
-          expect(wrapper.find('.js-stage-table').exists()).toBe(false);
+        it('does not display the stage table', () => {
+          displaysStageTable(false);
         });
 
         it('does not display the add stage button', () => {

ee/spec/frontend/analytics/cycle_analytics/store/actions_spec.js

@@ -323,14 +323,16 @@ describe('Cycle analytics actions', () => {
     beforeEach(() => {
       setFixtures('<div class="flash-container"></div>');
     });
-    it(`commits the ${types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR} mutation`, done => {
+    it(`commits the ${types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR} mutation on a 403 response`, done => {
+      const response = { status: 403 };
       testAction(
         actions.receiveCycleAnalyticsDataError,
-        { response: 403 },
+        { response },
         state,
         [
           {
             type: types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR,
+            payload: response.status,
           },
         ],
         [],
@@ -338,12 +340,30 @@ describe('Cycle analytics actions', () => {
       );
     });
 
-    it('will flash an error', () => {
+    it(`commits the ${types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR} mutation on a non 403 error response`, done => {
+      const response = { status: 500 };
+      testAction(
+        actions.receiveCycleAnalyticsDataError,
+        { response },
+        state,
+        [
+          {
+            type: types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR,
+            payload: response.status,
+          },
+        ],
+        [],
+        done,
+      );
+    });
+
+    it('will flash an error when the response is not 403', () => {
+      const response = { status: 500 };
       actions.receiveCycleAnalyticsDataError(
         {
           commit: () => {},
         },
-        { response: 403 },
+        { response },
       );
 
       shouldFlashAnError();