Display error for invalid insights config

- Handle null return from backend
- Display error when null received
- Retain error handling for failed request

ee/app/assets/javascripts/insights/stores/modules/insights/actions.js

@@ -6,20 +6,27 @@ import { __ } from '~/locale';
 export const requestConfig = ({ commit }) => commit(types.REQUEST_CONFIG);
 export const receiveConfigSuccess = ({ commit }, data) =>
   commit(types.RECEIVE_CONFIG_SUCCESS, data);
-export const receiveConfigError = ({ commit }) => commit(types.RECEIVE_CONFIG_ERROR);
+export const receiveConfigError = ({ commit }, errorMessage) => {
+  const error = errorMessage || __('Unknown Error');
+  const message = `${__('There was an error fetching configuration for charts')}: ${error}`;
+  createFlash(message);
+  commit(types.RECEIVE_CONFIG_ERROR);
+};
 
 export const fetchConfigData = ({ dispatch }, endpoint) => {
   dispatch('requestConfig');
 
   return axios
     .get(endpoint)
-    .then(({ data }) => dispatch('receiveConfigSuccess', data))
+    .then(({ data }) => {
+      if (data) {
+        dispatch('receiveConfigSuccess', data);
+      } else {
+        dispatch('receiveConfigError');
+      }
+    })
     .catch(error => {
-      const message = `${__('There was an error fetching configuration for charts')}: ${
-        error.response.data.message
-      }`;
-      createFlash(message);
-      dispatch('receiveConfigError');
+      dispatch('receiveConfigError', error.response.data.message);
     });
 };
 

ee/changelogs/unreleased/32644-insights-config-error-null.yml

+---
+title: Display error for invalid insights config
+merge_request: 17589
+author:
+type: fixed

ee/spec/javascripts/insights/stores/insights/actions_spec.js

 import axios from '~/lib/utils/axios_utils';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'spec/helpers/vuex_action_helper';
-import * as actions from 'ee/insights/stores/modules/insights/actions';
+import actionsModule, * as actions from 'ee/insights/stores/modules/insights/actions';
+
+const ERROR_MESSAGE = 'TEST_ERROR_MESSAGE';
 
 describe('Insights store actions', () => {
   const key = 'bugsPerTeam';
@@ -44,59 +46,105 @@ describe('Insights store actions', () => {
   });
 
   describe('receiveConfigError', () => {
-    it('commits RECEIVE_CONFIG_ERROR', done => {
+    let flashSpy;
+
+    beforeEach(() => {
+      flashSpy = spyOnDependency(actionsModule, 'createFlash');
+    });
+
+    it('commits RECEIVE_CONFIG_ERROR and shows flash message', done => {
       testAction(
         actions.receiveConfigError,
-        null,
+        ERROR_MESSAGE,
         null,
         [{ type: 'RECEIVE_CONFIG_ERROR' }],
         [],
-        done,
+        () => {
+          expect(flashSpy).toHaveBeenCalledWith(
+            `There was an error fetching configuration for charts: ${ERROR_MESSAGE}`,
+          );
+          done();
+        },
+      );
+    });
+
+    it('flashes Unknown Error when error message is falsey', done => {
+      testAction(
+        actions.receiveConfigError,
+        null,
+        null,
+        jasmine.any(Array),
+        jasmine.any(Array),
+        () => {
+          expect(flashSpy).toHaveBeenCalledWith(
+            `There was an error fetching configuration for charts: Unknown Error`,
+          );
+          done();
+        },
       );
     });
   });
 
   describe('fetchConfigData', () => {
     let mock;
-    let dispatch;
 
     beforeEach(() => {
-      dispatch = jasmine.createSpy('dispatch');
       mock = new MockAdapter(axios);
-
-      mock.onGet(gl.TEST_HOST).reply(200, configData);
     });
 
     afterEach(() => {
       mock.restore();
     });
 
-    it('calls requestConfig', done => {
-      const context = {
-        dispatch,
-      };
-
-      actions
-        .fetchConfigData(context, gl.TEST_HOST)
-        .then(() => {
-          expect(dispatch.calls.argsFor(0)).toEqual(['requestConfig']);
-        })
-        .then(done)
-        .catch(done.fail);
+    describe('success calls', () => {
+      beforeEach(() => {
+        mock.onGet(gl.TEST_HOST).reply(200, configData);
+      });
+
+      it('calls requestConfig and receiveConfigSuccess', done => {
+        testAction(
+          actions.fetchConfigData,
+          gl.TEST_HOST,
+          {},
+          [],
+          [{ type: 'requestConfig' }, { type: 'receiveConfigSuccess', payload: configData }],
+          done,
+        );
+      });
+    });
+
+    describe('failed calls', () => {
+      beforeEach(() => {
+        mock.onGet(gl.TEST_HOST).reply(500, { message: ERROR_MESSAGE });
+      });
+
+      it('calls receiveConfigError upon error from service', done => {
+        testAction(
+          actions.fetchConfigData,
+          gl.TEST_HOST,
+          {},
+          [],
+          [{ type: 'requestConfig' }, { type: 'receiveConfigError', payload: ERROR_MESSAGE }],
+          done,
+        );
+      });
     });
 
-    it('calls receiveConfigSuccess with config data', done => {
-      const context = {
-        dispatch,
-      };
-
-      actions
-        .fetchConfigData(context, gl.TEST_HOST)
-        .then(() => {
-          expect(dispatch.calls.argsFor(1)).toEqual(['receiveConfigSuccess', configData]);
-        })
-        .then(done)
-        .catch(done.fail);
+    describe('success calls with null data', () => {
+      beforeEach(() => {
+        mock.onGet(gl.TEST_HOST).reply(200, null);
+      });
+
+      it('calls receiveConfigError upon null config data returned', done => {
+        testAction(
+          actions.fetchConfigData,
+          gl.TEST_HOST,
+          {},
+          [],
+          [{ type: 'requestConfig' }, { type: 'receiveConfigError' }],
+          done,
+        );
+      });
     });
   });
 

locale/gitlab.pot

@@ -17053,6 +17053,9 @@ msgstr ""
 msgid "Unknown"
 msgstr ""
 
+msgid "Unknown Error"
+msgstr ""
+
 msgid "Unknown encryption strategy: %{encrypted_strategy}!"
 msgstr ""