1 files changed, 49 insertions, 48 deletions

diff --git a/app/assets/javascripts/jira_connect/index.js b/app/assets/javascripts/jira_connect/index.js
index e7aa4c437bb..dc2a77f4e0c 100644
--- a/app/assets/javascripts/jira_connect/index.js
+++ b/app/assets/javascripts/jira_connect/index.js
@@ -1,18 +1,21 @@
 import Vue from 'vue';
+import Vuex from 'vuex';
 import $ from 'jquery';
-import App from './components/app.vue';
-
-const store = {
-  state: {
-    error: '',
-  },
-  setErrorMessage(errorMessage) {
-    this.state.error = errorMessage;
-  },
-};
+import setConfigs from '@gitlab/ui/dist/config';
+import Translate from '~/vue_shared/translate';
+import GlFeatureFlagsPlugin from '~/vue_shared/gl_feature_flags_plugin';
+
+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 necessary form handlers for the Jira Connect app
+ * Initialize form handlers for the Jira Connect app
  */
 const initJiraFormHandlers = () => {
   const reqComplete = () => {
@@ -20,53 +23,40 @@ const initJiraFormHandlers = () => {
   };
 
   const reqFailed = (res, fallbackErrorMessage) => {
-    const { responseJSON: { error = fallbackErrorMessage } = {} } = res || {};
+    const { error = fallbackErrorMessage } = res || {};
 
-    store.setErrorMessage(error);
-    // eslint-disable-next-line no-alert
-    alert(error);
+    store.commit(SET_ERROR_MESSAGE, error);
   };
 
-  AP.getLocation(location => {
-    $('.js-jira-connect-sign-in').each(function updateSignInLink() {
-      const updatedLink = `${$(this).attr('href')}?return_to=${location}`;
-      $(this).attr('href', updatedLink);
+  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);
+      });
     });
-  });
+  }
 
   $('#add-subscription-form').on('submit', function onAddSubscriptionForm(e) {
-    const actionUrl = $(this).attr('action');
+    const addPath = $(this).attr('action');
+    const namespace = $('#namespace-input').val();
+
     e.preventDefault();
 
-    AP.context.getToken(token => {
-      // eslint-disable-next-line no-jquery/no-ajax
-      $.post(actionUrl, {
-        jwt: token,
-        namespace_path: $('#namespace-input').val(),
-        format: 'json',
-      })
-        .done(reqComplete)
-        .fail(err => reqFailed(err, 'Failed to add namespace. Please try again.'));
-    });
+    addSubscription(addPath, namespace)
+      .then(reqComplete)
+      .catch((err) => reqFailed(err.response.data, 'Failed to add namespace. Please try again.'));
   });
 
   $('.remove-subscription').on('click', function onRemoveSubscriptionClick(e) {
-    const href = $(this).attr('href');
+    const removePath = $(this).attr('href');
     e.preventDefault();
 
-    AP.context.getToken(token => {
-      // eslint-disable-next-line no-jquery/no-ajax
-      $.ajax({
-        url: href,
-        method: 'DELETE',
-        data: {
-          jwt: token,
-          format: 'json',
-        },
-      })
-        .done(reqComplete)
-        .fail(err => reqFailed(err, 'Failed to remove namespace. Please try again.'));
-    });
+    removeSubscription(removePath)
+      .then(reqComplete)
+      .catch((err) =>
+        reqFailed(err.response.data, 'Failed to remove namespace. Please try again.'),
+      );
   });
 };
 
@@ -75,13 +65,24 @@ function initJiraConnect() {
 
   initJiraFormHandlers();
 
+  if (!el) {
+    return null;
+  }
+
+  setConfigs();
+  Vue.use(Translate);
+  Vue.use(GlFeatureFlagsPlugin);
+
+  const { groupsPath } = el.dataset;
+
   return new Vue({
     el,
-    data: {
-      state: store.state,
+    store,
+    provide: {
+      groupsPath,
     },
     render(createElement) {
-      return createElement(App, {});
+      return createElement(JiraConnectApp);
     },
   });
 }