Changes after review:

- Cleans up CSS to use common classes
- Removes getters to use mapState instead
- Makes the first request even when tab is not visible
- Show loading state in 204

5 files changed, 26 insertions, 21 deletions

diff --git a/app/assets/javascripts/reports/store/actions.js b/app/assets/javascripts/reports/store/actions.js
index edbf860ecc6..e8f6b53cea0 100644
--- a/app/assets/javascripts/reports/store/actions.js
+++ b/app/assets/javascripts/reports/store/actions.js
@@ -3,6 +3,7 @@ import $ from 'jquery';
 import axios from '../../lib/utils/axios_utils';
 import Poll from '../../lib/utils/poll';
 import * as types from './mutation_types';
+import httpStatusCodes from '../../lib/utils/http_status';
 
 export const setEndpoint = ({ commit }, endpoint) => commit(types.SET_ENDPOINT, endpoint);
 
@@ -42,12 +43,17 @@ export const fetchReports = ({ state, dispatch }) => {
     },
     data: state.endpoint,
     method: 'getReports',
-    successCallback: ({ data }) => dispatch('receiveReportsSuccess', data),
+    successCallback: (response) => dispatch('receiveReportsSuccess', response),
     errorCallback: () => dispatch('receiveReportsError'),
   });
 
   if (!Visibility.hidden()) {
     eTagPoll.makeRequest();
+  } else {
+    axios
+      .get(state.endpoint)
+      .then((response) => dispatch('receiveReportsSuccess', response))
+      .catch(() => dispatch('receiveReportsError'));
   }
 
   Visibility.change(() => {
@@ -59,8 +65,12 @@ export const fetchReports = ({ state, dispatch }) => {
   });
 };
 
-export const receiveReportsSuccess = ({ commit }, response) =>
-  commit(types.RECEIVE_REPORTS_SUCCESS, response);
+export const receiveReportsSuccess = ({ commit }, response) => {
+  // With 204 we keep polling and don't update the state
+  if (response.status === httpStatusCodes.OK) {
+    commit(types.RECEIVE_REPORTS_SUCCESS, response.data);
+  }
+};
 
 export const receiveReportsError = ({ commit }) => commit(types.RECEIVE_REPORTS_ERROR);
 
diff --git a/app/assets/javascripts/reports/store/getters.js b/app/assets/javascripts/reports/store/getters.js
index 5fbafa201b5..95266194acb 100644
--- a/app/assets/javascripts/reports/store/getters.js
+++ b/app/assets/javascripts/reports/store/getters.js
@@ -1,19 +1,11 @@
-import { LOADING, ERROR, SUCCESS } from '../constants';
-
-export const reports = state => state.reports;
-export const summaryCounts = state => state.summary;
-export const isLoading = state => state.isLoading;
-export const hasError = state => state.hasError;
-export const modalTitle = state => state.modal.title || '';
-export const modalData = state => state.modal.data || {};
-export const isCreatingNewIssue = state => state.modal.isLoading;
+import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '../constants';
 
 export const summaryStatus = state => {
   if (state.isLoading) {
     return LOADING;
   }
 
-  if (state.hasError) {
+  if (state.hasError || state.status === STATUS_FAILED) {
     return ERROR;
   }
 
diff --git a/app/assets/javascripts/reports/store/mutations.js b/app/assets/javascripts/reports/store/mutations.js
index 6b900356bfc..e806d120b51 100644
--- a/app/assets/javascripts/reports/store/mutations.js
+++ b/app/assets/javascripts/reports/store/mutations.js
@@ -23,11 +23,17 @@ export default {
   [types.RECEIVE_REPORTS_ERROR](state) {
     state.isLoading = false;
     state.hasError = true;
+
     state.reports = [];
+    state.summary = {
+      total: 0,
+      resolved: 0,
+      failed: 0,
+    };
+    state.status = null;
   },
   [types.SET_ISSUE_MODAL_DATA](state, payload) {
     state.modal.title = payload.issue.name;
-    state.modal.status = payload.status;
 
     Object.keys(payload.issue).forEach((key) => {
       if (Object.prototype.hasOwnProperty.call(state.modal.data, key)) {
diff --git a/app/assets/javascripts/reports/store/state.js b/app/assets/javascripts/reports/store/state.js
index fd1819dbfea..4cab2e27a16 100644
--- a/app/assets/javascripts/reports/store/state.js
+++ b/app/assets/javascripts/reports/store/state.js
@@ -34,8 +34,6 @@ export default () => ({
   modal: {
     title: null,
 
-    status: null,
-
     data: {
       class: {
         value: null,
diff --git a/app/assets/javascripts/reports/store/utils.js b/app/assets/javascripts/reports/store/utils.js
index caa4039af72..35632218269 100644
--- a/app/assets/javascripts/reports/store/utils.js
+++ b/app/assets/javascripts/reports/store/utils.js
@@ -17,7 +17,8 @@ const textBuilder = results => {
     ? n__('%d fixed test result', '%d fixed test results', resolved)
     : null;
   const totalString = total ? n__('out of %d total test', 'out of %d total tests', total) : null;
-  let resultsString;
+
+  let resultsString = s__('Reports|no changed test results');
 
   if (failed) {
     if (resolved) {
@@ -30,19 +31,17 @@ const textBuilder = results => {
     }
   } else if (resolved) {
     resultsString = resolvedString;
-  } else {
-    resultsString = s__('Reports|no changed test results');
   }
 
   return `${resultsString} ${totalString}`;
 };
 
-export const summaryTextBuilder = (name = '', results) => {
+export const summaryTextBuilder = (name = '', results = {}) => {
   const resultsString = textBuilder(results);
   return `${name} contained ${resultsString}`;
 };
 
-export const reportTextBuilder = (name = '', results) => {
+export const reportTextBuilder = (name = '', results = {}) => {
   const resultsString = textBuilder(results);
   return `${name} found ${resultsString}`;
 };