Merge branch 'bug_fix_for_ca_error_handling' into 'master'

Fix testing and error bug on CA

See merge request gitlab-org/gitlab!17809

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();