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

1 files changed, 12 insertions, 10 deletions

diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
index d2e72e72421..0fc84b4552a 100644
--- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
@@ -1,5 +1,5 @@
 <script>
-  import { mapActions, mapGetters } from 'vuex';
+  import { mapActions, mapGetters, mapState } from 'vuex';
   import { s__ } from '~/locale';
   import { componentNames } from '~/vue_shared/components/reports/issue_body';
   import ReportSection from '~/vue_shared/components/reports/report_section.vue';
@@ -26,27 +26,29 @@
     },
     componentNames,
     computed: {
-      ...mapGetters([
+      ...mapState([
         'reports',
-        'summaryStatus',
         'isLoading',
         'hasError',
-        'summaryCounts',
-        'modalTitle',
-        'modalData',
-        'isCreatingNewIssue',
+        'summary',
+      ]),
+      ...mapState({
+        modalTitle: state => state.modal.title || '',
+        modalData: state => state.modal.data || {},
+      }),
+      ...mapGetters([
+        'summaryStatus',
       ]),
-
       groupedSummaryText() {
         if (this.isLoading) {
           return s__('Reports|Test summary results are being parsed');
         }
 
-        if (this.hasError || !this.summaryCounts) {
+        if (this.hasError) {
           return s__('Reports|Test summary failed loading results');
         }
 
-        return summaryTextBuilder(s__('Reports|Test summary'), this.summaryCounts);
+        return summaryTextBuilder(s__('Reports|Test summary'), this.summary);
       },
     },
     created() {