1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
index cd4bc35e74e..9513f42d9c9 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
+import PipelineSchedulesTakeOwnershipModal from '~/pipeline_schedules/components/take_ownership_modal.vue';
 import PipelineSchedulesCallout from '../shared/components/pipeline_schedules_callout.vue';
 
 function initPipelineSchedules() {
@@ -23,4 +25,43 @@ function initPipelineSchedules() {
   });
 }
 
+function initTakeownershipModal() {
+  const modalId = 'pipeline-take-ownership-modal';
+  const buttonSelector = 'js-take-ownership-button';
+  const el = document.getElementById(modalId);
+  const takeOwnershipButtons = document.querySelectorAll(`.${buttonSelector}`);
+
+  if (!el) {
+    return;
+  }
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    data() {
+      return {
+        url: '',
+      };
+    },
+    mounted() {
+      takeOwnershipButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+          const { url } = button.dataset;
+
+          this.url = url;
+          this.$root.$emit(BV_SHOW_MODAL, modalId, `.${buttonSelector}`);
+        });
+      });
+    },
+    render(createElement) {
+      return createElement(PipelineSchedulesTakeOwnershipModal, {
+        props: {
+          ownershipUrl: this.url,
+        },
+      });
+    },
+  });
+}
+
 initPipelineSchedules();
+initTakeownershipModal();