Merge branch...

Merge branch '289973-refactor-jquery-to-vanilla-js-app-assets-javascripts-jira_connect-index-js' into 'master'

Refactor jQuery to Vanilla JS: app/assets/javascripts/jira_connect/index.js

See merge request gitlab-org/gitlab!52286

app/assets/javascripts/jira_connect/api.js

@@ -10,6 +10,10 @@ export const getJwt = () => {
 
 export const getLocation = () => {
   return new Promise((resolve) => {
+    if (typeof AP.getLocation !== 'function') {
+      resolve();
+    }
+
     AP.getLocation((location) => {
       resolve(location);
     });

app/assets/javascripts/jira_connect/index.js

 import Vue from 'vue';
-import $ from 'jquery';
 import setConfigs from '@gitlab/ui/dist/config';
 import Translate from '~/vue_shared/translate';
 import GlFeatureFlagsPlugin from '~/vue_shared/gl_feature_flags_plugin';
 
-import { addSubscription, removeSubscription } from '~/jira_connect/api';
+import { addSubscription, removeSubscription, getLocation } from '~/jira_connect/api';
 import JiraConnectApp from './components/app.vue';
 import createStore from './store';
 import { SET_ERROR_MESSAGE } from './store/mutation_types';
 
 const store = createStore();
 
-/**
- * Initialize form handlers for the Jira Connect app
- */
-const initJiraFormHandlers = () => {
-  const reqComplete = () => {
+const reqComplete = () => {
   AP.navigator.reload();
-  };
+};
 
-  const reqFailed = (res, fallbackErrorMessage) => {
+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 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);
   });
-    });
-  }
-
-  $('#add-subscription-form').on('submit', function onAddSubscriptionForm(e) {
-    const addPath = $(this).attr('action');
-    const namespace = $('#namespace-input').val();
+};
 
+const initRemoveSubscriptionButtonHandlers = () => {
+  Array.from(document.querySelectorAll('.js-jira-connect-remove-subscription')).forEach((el) => {
+    el.addEventListener('click', function onRemoveSubscriptionClick(e) {
       e.preventDefault();
 
-    addSubscription(addPath, namespace)
+      const removePath = e.target.getAttribute('href');
+      removeSubscription(removePath)
         .then(reqComplete)
-      .catch((err) => reqFailed(err.response.data, 'Failed to add namespace. Please try again.'));
+        .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;
   }

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

@@ -45,7 +45,7 @@
             %tr
               %td= subscription.namespace.full_path
               %td= subscription.created_at
-              %td= link_to 'Remove', jira_connect_subscription_path(subscription), class: 'remove-subscription'
+              %td= link_to 'Remove', jira_connect_subscription_path(subscription), class: 'js-jira-connect-remove-subscription'
     - else
       %h4.empty-subscriptions
         No linked namespaces

app/views/layouts/jira_connect.html.haml

@@ -9,7 +9,6 @@
     = yield :page_specific_styles
 
     = javascript_include_tag 'https://connect-cdn.atl-paas.net/all.js'
-    = javascript_include_tag 'https://unpkg.com/jquery@3.3.1/dist/jquery.min.js'
     = Gon::Base.render_data(nonce: content_security_policy_nonce)
     = yield :head
   %body

spec/frontend/jira_connect/index_spec.js

+import waitForPromises from 'helpers/wait_for_promises';
+import { initJiraConnect } from '~/jira_connect';
+import { removeSubscription } from '~/jira_connect/api';
+
+jest.mock('~/jira_connect/api', () => ({
+  removeSubscription: jest.fn().mockResolvedValue(),
+  getLocation: jest.fn().mockResolvedValue('test/location'),
+}));
+
+describe('initJiraConnect', () => {
+  window.AP = {
+    navigator: {
+      reload: jest.fn(),
+    },
+  };
+
+  beforeEach(async () => {
+    setFixtures(`
+      <a class="js-jira-connect-sign-in" href="https://gitlab.com">Sign In</a>
+      <a class="js-jira-connect-sign-in" href="https://gitlab.com">Another Sign In</a>
+
+      <a href="https://gitlab.com/sub1" class="js-jira-connect-remove-subscription">Remove</a>
+      <a href="https://gitlab.com/sub2" class="js-jira-connect-remove-subscription">Remove</a>
+      <a href="https://gitlab.com/sub3" class="js-jira-connect-remove-subscription">Remove</a>
+    `);
+
+    await initJiraConnect();
+  });
+
+  describe('Sign in links', () => {
+    it('have `return_to` query parameter', () => {
+      Array.from(document.querySelectorAll('.js-jira-connect-sign-in')).forEach((el) => {
+        expect(el.href).toContain('return_to=test/location');
+      });
+    });
+  });
+
+  describe('`remove subscription` buttons', () => {
+    describe('on click', () => {
+      it('calls `removeSubscription`', () => {
+        Array.from(document.querySelectorAll('.js-jira-connect-remove-subscription')).forEach(
+          (removeSubscriptionButton) => {
+            removeSubscriptionButton.dispatchEvent(new Event('click'));
+
+            waitForPromises();
+
+            expect(removeSubscription).toHaveBeenCalledWith(removeSubscriptionButton.href);
+            expect(removeSubscription).toHaveBeenCalledTimes(1);
+
+            removeSubscription.mockClear();
+          },
+        );
+      });
+    });
+  });
+});