1 files changed, 36 insertions, 3 deletions
diff --git a/app/assets/javascripts/jobs/index.js b/app/assets/javascripts/jobs/index.js
index 1fb6a6f9850..e078a6c2319 100644
--- a/app/assets/javascripts/jobs/index.js
+++ b/app/assets/javascripts/jobs/index.js
@@ -1,10 +1,11 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import BridgeApp from './bridge/app.vue';
 import JobApp from './components/job_app.vue';
 import createStore from './store';
 
-export default () => {
-  const element = document.getElementById('js-job-vue-app');
-
+const initializeJobPage = (element) => {
   const store = createStore();
 
   // Let's start initializing the store (i.e. fetching data) right away
@@ -51,3 +52,35 @@ export default () => {
     },
   });
 };
+
+const initializeBridgePage = (el) => {
+  const { buildName, emptyStateIllustrationPath } = el.dataset;
+
+  Vue.use(VueApollo);
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      buildName,
+      emptyStateIllustrationPath,
+    },
+    render(h) {
+      return h(BridgeApp);
+    },
+  });
+};
+
+export default () => {
+  const jobElement = document.getElementById('js-job-page');
+  const bridgeElement = document.getElementById('js-bridge-page');
+
+  if (jobElement) {
+    initializeJobPage(jobElement);
+  } else {
+    initializeBridgePage(bridgeElement);
+  }
+};