1 files changed, 71 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/pipeline_details_header.js b/app/assets/javascripts/pipelines/pipeline_details_header.js
index c9e60756407..807ef225edd 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_header.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_header.js
@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import PipelineHeader from './components/header_component.vue';
+import PipelineDetailsHeader from './components/pipeline_details_header.vue';
 
 Vue.use(VueApollo);
 
@@ -33,3 +35,72 @@ export const createPipelineHeaderApp = (elSelector, apolloProvider, graphqlResou
     },
   });
 };
+
+export const createPipelineDetailsHeaderApp = (elSelector, apolloProvider, graphqlResourceEtag) => {
+  const el = document.querySelector(elSelector);
+
+  if (!el) {
+    return;
+  }
+
+  const {
+    fullPath,
+    pipelineIid,
+    pipelinesPath,
+    name,
+    totalJobs,
+    computeCredits,
+    yamlErrors,
+    failureReason,
+    triggeredByPath,
+    schedule,
+    child,
+    latest,
+    mergeTrainPipeline,
+    invalid,
+    failed,
+    autoDevops,
+    detached,
+    stuck,
+    refText,
+  } = el.dataset;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    name: 'PipelineDetailsHeaderApp',
+    apolloProvider,
+    provide: {
+      paths: {
+        fullProject: fullPath,
+        graphqlResourceEtag,
+        pipelinesPath,
+        triggeredByPath,
+      },
+      pipelineIid,
+    },
+    render(createElement) {
+      return createElement(PipelineDetailsHeader, {
+        props: {
+          name,
+          totalJobs,
+          computeCredits,
+          yamlErrors,
+          failureReason,
+          refText,
+          badges: {
+            schedule: parseBoolean(schedule),
+            child: parseBoolean(child),
+            latest: parseBoolean(latest),
+            mergeTrainPipeline: parseBoolean(mergeTrainPipeline),
+            invalid: parseBoolean(invalid),
+            failed: parseBoolean(failed),
+            autoDevops: parseBoolean(autoDevops),
+            detached: parseBoolean(detached),
+            stuck: parseBoolean(stuck),
+          },
+        },
+      });
+    },
+  });
+};