Add latest changes from gitlab-org/gitlab@master

3 files changed, 68 insertions, 31 deletions

diff --git a/app/assets/javascripts/jira_connect/api.js b/app/assets/javascripts/jira_connect/api.js
new file mode 100644
index 00000000000..55f2ef4f820
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/api.js
@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+const getJwt = async () => {
+  return AP.context.getToken();
+};
+
+export const addSubscription = async (addPath, namespace) => {
+  const jwt = await getJwt();
+
+  return axios.post(addPath, {
+    jwt,
+    namespace_path: namespace,
+  });
+};
+
+export const removeSubscription = async (removePath) => {
+  const jwt = await getJwt();
+
+  return axios.delete(removePath, {
+    params: {
+      jwt,
+    },
+  });
+};
diff --git a/app/assets/javascripts/jira_connect/components/app.vue b/app/assets/javascripts/jira_connect/components/app.vue
index 490bf2fdd66..4a58113db1f 100644
--- a/app/assets/javascripts/jira_connect/components/app.vue
+++ b/app/assets/javascripts/jira_connect/components/app.vue
@@ -1,6 +1,9 @@
 <script>
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+
 export default {
   name: 'JiraConnectApp',
+  mixins: [glFeatureFlagsMixin()],
   computed: {
     state() {
       return this.$root.$data.state || {};
@@ -8,9 +11,17 @@ export default {
     error() {
       return this.state.error;
     },
+    showNewUi() {
+      return this.glFeatures.newJiraConnectUi;
+    },
   },
 };
 </script>
+
 <template>
-  <div></div>
+  <div>
+    <div v-if="showNewUi">
+      <h3>{{ s__('Integrations|Linked namespaces') }}</h3>
+    </div>
+  </div>
 </template>
diff --git a/app/assets/javascripts/jira_connect/index.js b/app/assets/javascripts/jira_connect/index.js
index cc18d67aebd..bd261750ccd 100644
--- a/app/assets/javascripts/jira_connect/index.js
+++ b/app/assets/javascripts/jira_connect/index.js
@@ -1,6 +1,11 @@
 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 App from './components/app.vue';
+import { addSubscription, removeSubscription } from '~/jira_connect/api';
 
 const store = {
   state: {
@@ -27,46 +32,35 @@ const initJiraFormHandlers = () => {
     alert(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,6 +69,14 @@ function initJiraConnect() {
 
   initJiraFormHandlers();
 
+  if (!el) {
+    return null;
+  }
+
+  setConfigs();
+  Vue.use(Translate);
+  Vue.use(GlFeatureFlagsPlugin);
+
   return new Vue({
     el,
     data: {