1 files changed, 24 insertions, 12 deletions
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
index 06ab45adf80..8746784aa57 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
@@ -1,10 +1,9 @@
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import TestSuiteTable from './test_suite_table.vue';
 import TestSummary from './test_summary.vue';
 import TestSummaryTable from './test_summary_table.vue';
-import store from '~/pipelines/stores/test_reports';
 
 export default {
   name: 'TestReports',
@@ -14,24 +13,37 @@ export default {
     TestSummary,
     TestSummaryTable,
   },
-  store,
   computed: {
-    ...mapState(['isLoading', 'selectedSuite', 'testReports']),
+    ...mapState(['hasFullReport', 'isLoading', 'selectedSuiteIndex', 'testReports']),
+    ...mapGetters(['getSelectedSuite']),
     showSuite() {
-      return this.selectedSuite.total_count > 0;
+      return this.selectedSuiteIndex !== null;
     },
     showTests() {
       const { test_suites: testSuites = [] } = this.testReports;
       return testSuites.length > 0;
     },
   },
+  created() {
+    this.fetchSummary();
+  },
   methods: {
-    ...mapActions(['setSelectedSuite', 'removeSelectedSuite']),
+    ...mapActions([
+      'fetchFullReport',
+      'fetchSummary',
+      'setSelectedSuiteIndex',
+      'removeSelectedSuiteIndex',
+    ]),
     summaryBackClick() {
-      this.removeSelectedSuite();
+      this.removeSelectedSuiteIndex();
     },
-    summaryTableRowClick(suite) {
-      this.setSelectedSuite(suite);
+    summaryTableRowClick(index) {
+      this.setSelectedSuiteIndex(index);
+
+      // Fetch the full report when the user clicks to see more details
+      if (!this.hasFullReport) {
+        this.fetchFullReport();
+      }
     },
     beforeEnterTransition() {
       document.documentElement.style.overflowX = 'hidden';
@@ -45,7 +57,7 @@ export default {
 
 <template>
   <div v-if="isLoading">
-    <gl-loading-icon size="lg" class="prepend-top-default js-loading-spinner" />
+    <gl-loading-icon size="lg" class="gl-mt-3 js-loading-spinner" />
   </div>
 
   <div
@@ -59,7 +71,7 @@ export default {
       @after-leave="afterLeaveTransition"
     >
       <div v-if="showSuite" key="detail" class="w-100 position-absolute slide-enter-to-element">
-        <test-summary :report="selectedSuite" show-back @on-back-click="summaryBackClick" />
+        <test-summary :report="getSelectedSuite" show-back @on-back-click="summaryBackClick" />
 
         <test-suite-table />
       </div>
@@ -73,7 +85,7 @@ export default {
   </div>
 
   <div v-else>
-    <div class="row prepend-top-default">
+    <div class="row gl-mt-3">
       <div class="col-12">
         <p class="js-no-tests-to-show">{{ s__('TestReports|There are no tests to show.') }}</p>
       </div>