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, 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); }, }); } |