1 files changed, 41 insertions, 36 deletions
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index 801f71cb364..338de65e795 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -13,6 +13,7 @@ const SELECTORS = {
   PIPELINE_GRAPH: '#js-pipeline-graph-vue',
   PIPELINE_HEADER: '#js-pipeline-header-vue',
   PIPELINE_NOTIFICATION: '#js-pipeline-notification',
+  PIPELINE_TABS: '#js-pipeline-tabs',
   PIPELINE_TESTS: '#js-pipeline-tests-detail',
   PIPELINE_JOBS: '#js-pipeline-jobs-vue',
 };
@@ -29,22 +30,6 @@ export default async function initPipelineDetailsBundle() {
   }
 
   try {
-    createPipelinesDetailApp(SELECTORS.PIPELINE_GRAPH, apolloProvider, dataset);
-  } catch {
-    createFlash({
-      message: __('An error occurred while loading the pipeline.'),
-    });
-  }
-
-  try {
-    createPipelineHeaderApp(SELECTORS.PIPELINE_HEADER, apolloProvider, dataset.graphqlResourceEtag);
-  } catch {
-    createFlash({
-      message: __('An error occurred while loading a section of this page.'),
-    });
-  }
-
-  try {
     createPipelineNotificationApp(SELECTORS.PIPELINE_NOTIFICATION, apolloProvider);
   } catch {
     createFlash({
@@ -52,27 +37,47 @@ export default async function initPipelineDetailsBundle() {
     });
   }
 
-  try {
-    createDagApp(apolloProvider);
-  } catch {
-    createFlash({
-      message: __('An error occurred while loading the Needs tab.'),
-    });
-  }
+  if (gon.features?.pipelineTabsVue) {
+    const { createPipelineTabs } = await import('./pipeline_tabs');
 
-  try {
-    createTestDetails(SELECTORS.PIPELINE_TESTS);
-  } catch {
-    createFlash({
-      message: __('An error occurred while loading the Test Reports tab.'),
-    });
-  }
+    try {
+      createPipelineTabs(SELECTORS.PIPELINE_TABS, apolloProvider);
+    } catch {
+      createFlash({
+        message: __('An error occurred while loading a section of this page.'),
+      });
+    }
+  } else {
+    try {
+      createPipelinesDetailApp(SELECTORS.PIPELINE_GRAPH, apolloProvider, dataset);
+    } catch {
+      createFlash({
+        message: __('An error occurred while loading the pipeline.'),
+      });
+    }
 
-  try {
-    createPipelineJobsApp(SELECTORS.PIPELINE_JOBS);
-  } catch {
-    createFlash({
-      message: __('An error occurred while loading the Jobs tab.'),
-    });
+    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.'),
+      });
+    }
+
+    try {
+      createPipelineJobsApp(SELECTORS.PIPELINE_JOBS);
+    } catch {
+      createFlash({
+        message: __('An error occurred while loading the Jobs tab.'),
+      });
+    }
   }
 }