1 files changed, 51 insertions, 46 deletions

diff --git a/app/assets/javascripts/jira_connect/index.js b/app/assets/javascripts/jira_connect/index.js
index dc2a77f4e0c..7191fce3c33 100644
--- a/app/assets/javascripts/jira_connect/index.js
+++ b/app/assets/javascripts/jira_connect/index.js
@@ -1,70 +1,73 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import $ from 'jquery';
 import setConfigs from '@gitlab/ui/dist/config';
-import Translate from '~/vue_shared/translate';
+import Vue from 'vue';
+import { addSubscription, removeSubscription, getLocation } from '~/jira_connect/api';
 import GlFeatureFlagsPlugin from '~/vue_shared/gl_feature_flags_plugin';
+import Translate from '~/vue_shared/translate';
 
 import JiraConnectApp from './components/app.vue';
-import { addSubscription, removeSubscription } from '~/jira_connect/api';
 import createStore from './store';
 import { SET_ERROR_MESSAGE } from './store/mutation_types';
 
-Vue.use(Vuex);
-
 const store = createStore();
 
-/**
- * Initialize form handlers for the Jira Connect app
- */
-const initJiraFormHandlers = () => {
-  const reqComplete = () => {
-    AP.navigator.reload();
-  };
-
-  const reqFailed = (res, fallbackErrorMessage) => {
-    const { error = fallbackErrorMessage } = res || {};
-
-    store.commit(SET_ERROR_MESSAGE, error);
-  };
-
-  if (typeof AP.getLocation === 'function') {
-    AP.getLocation((location) => {
-      $('.js-jira-connect-sign-in').each(function updateSignInLink() {
-        const updatedLink = `${$(this).attr('href')}?return_to=${location}`;
-        $(this).attr('href', updatedLink);
-      });
-    });
-  }
+const reqComplete = () => {
+  AP.navigator.reload();
+};
 
-  $('#add-subscription-form').on('submit', function onAddSubscriptionForm(e) {
-    const addPath = $(this).attr('action');
-    const namespace = $('#namespace-input').val();
+const reqFailed = (res, fallbackErrorMessage) => {
+  const { error = fallbackErrorMessage } = res || {};
 
-    e.preventDefault();
+  store.commit(SET_ERROR_MESSAGE, error);
+};
 
-    addSubscription(addPath, namespace)
-      .then(reqComplete)
-      .catch((err) => reqFailed(err.response.data, 'Failed to add namespace. Please try again.'));
+const updateSignInLinks = async () => {
+  const location = await getLocation();
+  Array.from(document.querySelectorAll('.js-jira-connect-sign-in')).forEach((el) => {
+    const updatedLink = `${el.getAttribute('href')}?return_to=${location}`;
+    el.setAttribute('href', updatedLink);
   });
+};
+
+const initRemoveSubscriptionButtonHandlers = () => {
+  Array.from(document.querySelectorAll('.js-jira-connect-remove-subscription')).forEach((el) => {
+    el.addEventListener('click', function onRemoveSubscriptionClick(e) {
+      e.preventDefault();
+
+      const removePath = e.target.getAttribute('href');
+      removeSubscription(removePath)
+        .then(reqComplete)
+        .catch((err) =>
+          reqFailed(err.response.data, 'Failed to remove namespace. Please try again.'),
+        );
+    });
+  });
+};
+
+const initAddSubscriptionFormHandler = () => {
+  const formEl = document.querySelector('#add-subscription-form');
+  if (!formEl) {
+    return;
+  }
 
-  $('.remove-subscription').on('click', function onRemoveSubscriptionClick(e) {
-    const removePath = $(this).attr('href');
+  formEl.addEventListener('submit', function onAddSubscriptionForm(e) {
     e.preventDefault();
 
-    removeSubscription(removePath)
+    const addPath = e.target.getAttribute('action');
+    const namespace = (e.target.querySelector('#namespace-input') || {}).value;
+
+    addSubscription(addPath, namespace)
       .then(reqComplete)
-      .catch((err) =>
-        reqFailed(err.response.data, 'Failed to remove namespace. Please try again.'),
-      );
+      .catch((err) => reqFailed(err.response.data, 'Failed to add namespace. Please try again.'));
   });
 };
 
-function initJiraConnect() {
-  const el = document.querySelector('.js-jira-connect-app');
+export async function initJiraConnect() {
+  initAddSubscriptionFormHandler();
+  initRemoveSubscriptionButtonHandlers();
 
-  initJiraFormHandlers();
+  await updateSignInLinks();
 
+  const el = document.querySelector('.js-jira-connect-app');
   if (!el) {
     return null;
   }
@@ -73,13 +76,15 @@ function initJiraConnect() {
   Vue.use(Translate);
   Vue.use(GlFeatureFlagsPlugin);
 
-  const { groupsPath } = el.dataset;
+  const { groupsPath, subscriptionsPath, usersPath } = el.dataset;
 
   return new Vue({
     el,
     store,
     provide: {
       groupsPath,
+      subscriptionsPath,
+      usersPath,
     },
     render(createElement) {
       return createElement(JiraConnectApp);