1 files changed, 67 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_details/pipeline_details_bundle.js b/app/assets/javascripts/ci/pipeline_details/pipeline_details_bundle.js
new file mode 100644
index 00000000000..da09852a7f4
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_details/pipeline_details_bundle.js
@@ -0,0 +1,67 @@
+import VueRouter from 'vue-router';
+import { createAlert } from '~/alert';
+import { __ } from '~/locale';
+import { pipelineTabName } from './constants';
+import { createPipelineDetailsHeaderApp } from './pipeline_details_header';
+import { apolloProvider } from './pipeline_shared_client';
+
+const SELECTORS = {
+  PIPELINE_DETAILS_HEADER: '#js-pipeline-details-header-vue',
+  PIPELINE_TABS: '#js-pipeline-tabs',
+};
+
+export default async function initPipelineDetailsBundle() {
+  const headerSelector = SELECTORS.PIPELINE_DETAILS_HEADER;
+
+  const headerApp = createPipelineDetailsHeaderApp;
+
+  const headerEl = document.querySelector(headerSelector);
+
+  if (headerEl) {
+    const { dataset: headerDataset } = headerEl;
+
+    try {
+      headerApp(headerSelector, apolloProvider, headerDataset.graphqlResourceEtag);
+    } catch {
+      createAlert({
+        message: __('An error occurred while loading a section of this page.'),
+      });
+    }
+  }
+
+  const tabsEl = document.querySelector(SELECTORS.PIPELINE_TABS);
+
+  if (tabsEl) {
+    const { dataset } = tabsEl;
+    const dismissalDescriptions = JSON.parse(dataset.dismissalDescriptions || '{}');
+    const { createAppOptions } = await import('ee_else_ce/ci/pipeline_details/pipeline_tabs');
+    const { createPipelineTabs } = await import('./pipeline_tabs');
+    const { routes } = await import('ee_else_ce/ci/pipeline_details/routes');
+
+    const securityRoute = routes.find((route) => route.path === '/security');
+    if (securityRoute) {
+      securityRoute.props = { dismissalDescriptions };
+    }
+
+    const router = new VueRouter({
+      mode: 'history',
+      base: dataset.pipelinePath,
+      routes,
+    });
+
+    // We handle the shortcut `pipelines/latest` by forwarding the user to the pipeline graph
+    // tab and changing the route to the correct `pipelines/:id`
+    if (window.location.pathname.endsWith('latest')) {
+      router.replace({ name: pipelineTabName });
+    }
+
+    try {
+      const appOptions = createAppOptions(SELECTORS.PIPELINE_TABS, apolloProvider, router);
+      createPipelineTabs(appOptions);
+    } catch {
+      createAlert({
+        message: __('An error occurred while loading a section of this page.'),
+      });
+    }
+  }
+}