diff options
Diffstat (limited to 'app/assets/javascripts/jira_connect/index.js')
-rw-r--r-- | app/assets/javascripts/jira_connect/index.js | 97 |
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); |