1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/pipeline_details_header.js b/app/assets/javascripts/pipelines/pipeline_details_header.js
new file mode 100644
index 00000000000..27fe9ba3f19
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipeline_details_header.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import pipelineHeader from './components/header_component.vue';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
+export const createPipelineHeaderApp = elSelector => {
+  const el = document.querySelector(elSelector);
+
+  if (!el) {
+    return;
+  }
+
+  const { cancelPath, deletePath, fullPath, pipelineId, pipelineIid, retryPath } = el?.dataset;
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    components: {
+      pipelineHeader,
+    },
+    apolloProvider,
+    provide: {
+      paths: {
+        cancel: cancelPath,
+        delete: deletePath,
+        fullProject: fullPath,
+        retry: retryPath,
+      },
+      pipelineId,
+      pipelineIid,
+    },
+    render(createElement) {
+      return createElement('pipeline-header', {});
+    },
+  });
+};