Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

1 files changed, 24 insertions, 36 deletions

diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index c6e767d5424..ee9560e36c4 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -1,16 +1,10 @@
-import Vue from 'vue';
 import createFlash from '~/flash';
-import { parseBoolean } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-import Translate from '~/vue_shared/translate';
-import TestReports from './components/test_reports/test_reports.vue';
 import createDagApp from './pipeline_details_dag';
 import { createPipelinesDetailApp } from './pipeline_details_graph';
 import { createPipelineHeaderApp } from './pipeline_details_header';
 import { apolloProvider } from './pipeline_shared_client';
-import createTestReportsStore from './stores/test_reports';
-
-Vue.use(Translate);
+import { createTestDetails } from './pipeline_test_details';
 
 const SELECTORS = {
   PIPELINE_DETAILS: '.js-pipeline-details-vue',
@@ -19,33 +13,6 @@ const SELECTORS = {
   PIPELINE_TESTS: '#js-pipeline-tests-detail',
 };
 
-const createTestDetails = () => {
-  const el = document.querySelector(SELECTORS.PIPELINE_TESTS);
-  const { blobPath, emptyStateImagePath, hasTestReport, summaryEndpoint, suiteEndpoint } =
-    el?.dataset || {};
-  const testReportsStore = createTestReportsStore({
-    blobPath,
-    summaryEndpoint,
-    suiteEndpoint,
-  });
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    components: {
-      TestReports,
-    },
-    provide: {
-      emptyStateImagePath,
-      hasTestReport: parseBoolean(hasTestReport),
-    },
-    store: testReportsStore,
-    render(createElement) {
-      return createElement('test-reports');
-    },
-  });
-};
-
 export default async function initPipelineDetailsBundle() {
   const { dataset } = document.querySelector(SELECTORS.PIPELINE_DETAILS);
 
@@ -65,6 +32,27 @@ export default async function initPipelineDetailsBundle() {
     });
   }
 
-  createDagApp(apolloProvider);
-  createTestDetails();
+  try {
+    createPipelineHeaderApp(SELECTORS.PIPELINE_HEADER, apolloProvider, dataset.graphqlResourceEtag);
+  } catch {
+    createFlash({
+      message: __('An error occurred while loading a section of this page.'),
+    });
+  }
+
+  try {
+    createDagApp(apolloProvider);
+  } catch {
+    createFlash({
+      message: __('An error occurred while loading the Needs tab.'),
+    });
+  }
+
+  try {
+    createTestDetails(SELECTORS.PIPELINE_TESTS);
+  } catch {
+    createFlash({
+      message: __('An error occurred while loading the Test Reports tab.'),
+    });
+  }
 }