Merge branch 'consolidate-jira-connect-js' into 'master'

Move jira_connect.js code to Vue App

See merge request gitlab-org/gitlab!48744

app/assets/javascripts/jira_connect.js

-/* eslint-disable func-names, no-var, no-alert */
-/* global $ */
-/* global AP */
-
-/**
- * This script is not going through Webpack bundling
- * as it is only included in `app/views/jira_connect/subscriptions/index.html.haml`
- * which is going to be rendered within iframe on Jira app dashboard
- * hence any code written here needs to be IE11+ compatible (no fully ES6)
- */
-
-function onLoaded() {
-  var reqComplete = function() {
-    AP.navigator.reload();
-  };
-
-  var reqFailed = function(res) {
-    alert(res.responseJSON.error);
-  };
-
-  AP.getLocation(function(location) {
-    $('.js-jira-connect-sign-in').each(function() {
-      var updatedLink = `${$(this).attr('href')}?return_to=${location}`;
-      $(this).attr('href', updatedLink);
-    });
-  });
-
-  $('#add-subscription-form').on('submit', function(e) {
-    var actionUrl = $(this).attr('action');
-    e.preventDefault();
-
-    AP.context.getToken(function(token) {
-      // eslint-disable-next-line no-jquery/no-ajax
-      $.post(actionUrl, {
-        jwt: token,
-        namespace_path: $('#namespace-input').val(),
-        format: 'json',
-      })
-        .done(reqComplete)
-        .fail(reqFailed);
-    });
-  });
-
-  $('.remove-subscription').on('click', function(e) {
-    var href = $(this).attr('href');
-    e.preventDefault();
-
-    AP.context.getToken(function(token) {
-      // eslint-disable-next-line no-jquery/no-ajax
-      $.ajax({
-        url: href,
-        method: 'DELETE',
-        data: {
-          jwt: token,
-          format: 'json',
-        },
-      })
-        .done(reqComplete)
-        .fail(reqFailed);
-    });
-  });
-}
-document.addEventListener('DOMContentLoaded', onLoaded);

app/assets/javascripts/jira_connect/index.js

 import Vue from 'vue';
+import $ from 'jquery';
 import App from './components/app.vue';
 
+/**
+ * Initialize necessary form handlers for the Jira Connect app
+ */
+const initJiraFormHandlers = () => {
+  const reqComplete = () => {
+    AP.navigator.reload();
+  };
+
+  const reqFailed = res => {
+    // eslint-disable-next-line no-alert
+    alert(res.responseJSON.error);
+  };
+
+  AP.getLocation(location => {
+    $('.js-jira-connect-sign-in').each(() => {
+      const updatedLink = `${$(this).attr('href')}?return_to=${location}`;
+      $(this).attr('href', updatedLink);
+    });
+  });
+
+  $('#add-subscription-form').on('submit', e => {
+    const actionUrl = $(this).attr('action');
+    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(reqFailed);
+    });
+  });
+
+  $('.remove-subscription').on('click', e => {
+    const href = $(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(reqFailed);
+    });
+  });
+};
+
 function initJiraConnect() {
   const el = document.querySelector('.js-jira-connect-app');
 
+  initJiraFormHandlers();
+
   return new Vue({
     el,
     render(createElement) {

app/views/jira_connect/subscriptions/index.html.haml

@@ -62,5 +62,4 @@
 = webpack_bundle_tag 'performance_bar' if performance_bar_enabled?
 = webpack_bundle_tag 'jira_connect_app'
 
-= page_specific_javascript_tag('jira_connect.js')
 - add_page_specific_style 'page_bundles/jira_connect', defer: false