1 files changed, 91 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue
new file mode 100644
index 00000000000..a7737d33285
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue
@@ -0,0 +1,91 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
+import { mapActions, mapGetters, mapState } from 'vuex';
+import EmptyState from './empty_state.vue';
+import TestSuiteTable from './test_suite_table.vue';
+import TestSummary from './test_summary.vue';
+import TestSummaryTable from './test_summary_table.vue';
+
+export default {
+  name: 'TestReports',
+  components: {
+    EmptyState,
+    GlLoadingIcon,
+    TestSuiteTable,
+    TestSummary,
+    TestSummaryTable,
+  },
+  inject: ['blobPath', 'summaryEndpoint', 'suiteEndpoint'],
+  computed: {
+    ...mapState('testReports', ['isLoading', 'selectedSuiteIndex', 'testReports']),
+    ...mapGetters('testReports', ['getSelectedSuite']),
+    showSuite() {
+      return this.selectedSuiteIndex !== null;
+    },
+    showTests() {
+      const { test_suites: testSuites = [] } = this.testReports;
+      return testSuites.length > 0;
+    },
+  },
+  created() {
+    this.fetchSummary();
+  },
+  methods: {
+    ...mapActions('testReports', [
+      'fetchTestSuite',
+      'fetchSummary',
+      'setSelectedSuiteIndex',
+      'removeSelectedSuiteIndex',
+    ]),
+    summaryBackClick() {
+      this.removeSelectedSuiteIndex();
+    },
+    summaryTableRowClick(index) {
+      this.setSelectedSuiteIndex(index);
+
+      // Fetch the test suite when the user clicks to see more details
+      this.fetchTestSuite(index);
+    },
+    beforeEnterTransition() {
+      document.documentElement.style.overflowX = 'hidden';
+    },
+    afterLeaveTransition() {
+      document.documentElement.style.overflowX = '';
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="isLoading">
+    <gl-loading-icon size="lg" class="gl-mt-3" />
+  </div>
+
+  <div
+    v-else-if="!isLoading && showTests"
+    ref="container"
+    class="gl-relative"
+    data-testid="tests-detail"
+  >
+    <transition
+      name="slide"
+      @before-enter="beforeEnterTransition"
+      @after-leave="afterLeaveTransition"
+    >
+      <div v-if="showSuite" key="detail" class="gl-w-full slide-enter-to-element">
+        <test-summary :report="getSelectedSuite" show-back @on-back-click="summaryBackClick" />
+
+        <test-suite-table />
+      </div>
+
+      <div v-else key="summary" class="gl-w-full slide-enter-from-element">
+        <test-summary :report="testReports" />
+
+        <test-summary-table @row-click="summaryTableRowClick" />
+      </div>
+    </transition>
+  </div>
+
+  <empty-state v-else />
+</template>