Add latest changes from gitlab-org/gitlab@master

7 files changed, 220 insertions, 82 deletions

diff --git a/app/assets/javascripts/jira_connect/api.js b/app/assets/javascripts/jira_connect/api.js
index 8da2ca73f9a..abf2c070e68 100644
--- a/app/assets/javascripts/jira_connect/api.js
+++ b/app/assets/javascripts/jira_connect/api.js
@@ -1,24 +1,5 @@
 import axios from 'axios';
-
-export const getJwt = () => {
-  return new Promise((resolve) => {
-    AP.context.getToken((token) => {
-      resolve(token);
-    });
-  });
-};
-
-export const getLocation = () => {
-  return new Promise((resolve) => {
-    if (typeof AP.getLocation !== 'function') {
-      resolve();
-    }
-
-    AP.getLocation((location) => {
-      resolve(location);
-    });
-  });
-};
+import { getJwt } from '~/jira_connect/utils';
 
 export const addSubscription = async (addPath, namespace) => {
   const jwt = await getJwt();
diff --git a/app/assets/javascripts/jira_connect/components/app.vue b/app/assets/javascripts/jira_connect/components/app.vue
index fe5ad8b67d7..ffc95130783 100644
--- a/app/assets/javascripts/jira_connect/components/app.vue
+++ b/app/assets/javascripts/jira_connect/components/app.vue
@@ -1,22 +1,23 @@
 <script>
-import { GlAlert, GlButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlButton, GlLink, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
 import { mapState, mapMutations } from 'vuex';
-import { getLocation } from '~/jira_connect/api';
+import { retrieveAlert, getLocation } from '~/jira_connect/utils';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { SET_ALERT } from '../store/mutation_types';
-import { retrieveAlert } from '../utils';
 import GroupsList from './groups_list.vue';
+import SubscriptionsList from './subscriptions_list.vue';
 
 export default {
   name: 'JiraConnectApp',
   components: {
     GlAlert,
     GlButton,
-    GlModal,
-    GroupsList,
     GlLink,
+    GlModal,
     GlSprintf,
+    GroupsList,
+    SubscriptionsList,
   },
   directives: {
     GlModalDirective,
@@ -91,37 +92,36 @@ export default {
 
     <h2 class="gl-text-center">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
 
-    <div
-      class="jira-connect-app-body gl-display-flex gl-justify-content-space-between gl-my-7 gl-pb-4 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200"
-    >
-      <h5 class="gl-align-self-center gl-mb-0" data-testid="new-jira-connect-ui-heading">
-        {{ s__('Integrations|Linked namespaces') }}
-      </h5>
-      <gl-button
-        v-if="usersPath"
-        category="primary"
-        variant="info"
-        class="gl-align-self-center"
-        :href="usersPathWithReturnTo"
-        target="_blank"
-        >{{ s__('Integrations|Sign in to add namespaces') }}</gl-button
-      >
-      <template v-else>
+    <div class="jira-connect-app-body gl-my-7 gl-px-5 gl-pb-4">
+      <div class="gl-display-flex gl-justify-content-end">
         <gl-button
-          v-gl-modal-directive="'add-namespace-modal'"
+          v-if="usersPath"
           category="primary"
           variant="info"
           class="gl-align-self-center"
-          >{{ s__('Integrations|Add namespace') }}</gl-button
-        >
-        <gl-modal
-          modal-id="add-namespace-modal"
-          :title="s__('Integrations|Link namespaces')"
-          :action-cancel="$options.modal.cancelProps"
+          :href="usersPathWithReturnTo"
+          target="_blank"
+          >{{ s__('Integrations|Sign in to add namespaces') }}</gl-button
         >
-          <groups-list />
-        </gl-modal>
-      </template>
+        <template v-else>
+          <gl-button
+            v-gl-modal-directive="'add-namespace-modal'"
+            category="primary"
+            variant="info"
+            class="gl-align-self-center"
+            >{{ s__('Integrations|Add namespace') }}</gl-button
+          >
+          <gl-modal
+            modal-id="add-namespace-modal"
+            :title="s__('Integrations|Link namespaces')"
+            :action-cancel="$options.modal.cancelProps"
+          >
+            <groups-list />
+          </gl-modal>
+        </template>
+      </div>
+
+      <subscriptions-list />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/jira_connect/components/group_item_name.vue b/app/assets/javascripts/jira_connect/components/group_item_name.vue
new file mode 100644
index 00000000000..c5ce24b3de3
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/components/group_item_name.vue
@@ -0,0 +1,37 @@
+<script>
+import { GlAvatar, GlIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAvatar,
+    GlIcon,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-center">
+    <gl-icon name="folder-o" class="gl-mr-3" />
+    <div class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3">
+      <gl-avatar :size="32" shape="rect" :entity-name="group.name" :src="group.avatar_url" />
+    </div>
+
+    <div>
+      <span
+        class="gl-mr-3 gl-text-gray-900! gl-font-weight-bold"
+        data-testid="group-list-item-name"
+      >
+        {{ group.full_name }}
+      </span>
+      <div v-if="group.description" data-testid="group-list-item-description">
+        <p class="gl-mt-2! gl-mb-0 gl-text-gray-600" v-text="group.description"></p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/jira_connect/components/groups_list_item.vue b/app/assets/javascripts/jira_connect/components/groups_list_item.vue
index 9c5722c44c7..ad046920dd1 100644
--- a/app/assets/javascripts/jira_connect/components/groups_list_item.vue
+++ b/app/assets/javascripts/jira_connect/components/groups_list_item.vue
@@ -1,15 +1,15 @@
 <script>
-import { GlAvatar, GlButton, GlIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { addSubscription } from '~/jira_connect/api';
+import { persistAlert, reloadPage } from '~/jira_connect/utils';
 import { s__ } from '~/locale';
-import { persistAlert } from '../utils';
+import GroupItemName from './group_item_name.vue';
 
 export default {
   components: {
-    GlAvatar,
     GlButton,
-    GlIcon,
+    GroupItemName,
   },
   inject: {
     subscriptionsPath: {
@@ -47,7 +47,7 @@ export default {
             variant: 'success',
           });
 
-          AP.navigator.reload();
+          reloadPage();
         })
         .catch((error) => {
           this.$emit(
@@ -55,8 +55,6 @@ export default {
             error?.response?.data?.error ||
               s__('Integrations|Failed to link namespace. Please try again.'),
           );
-        })
-        .finally(() => {
           this.isLoading = false;
         });
     },
@@ -67,23 +65,9 @@ export default {
 <template>
   <li class="gl-border-b-1 gl-border-b-solid gl-border-b-gray-100">
     <div class="gl-display-flex gl-align-items-center gl-py-3">
-      <gl-icon name="folder-o" class="gl-mr-3" />
-      <div class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3">
-        <gl-avatar :size="32" shape="rect" :entity-name="group.name" :src="group.avatar_url" />
-      </div>
       <div class="gl-min-w-0 gl-display-flex gl-flex-grow-1 gl-flex-shrink-1 gl-align-items-center">
         <div class="gl-min-w-0 gl-flex-grow-1 flex-shrink-1">
-          <div class="gl-display-flex gl-align-items-center gl-flex-wrap">
-            <span
-              class="gl-mr-3 gl-text-gray-900! gl-font-weight-bold"
-              data-testid="group-list-item-name"
-            >
-              {{ group.full_name }}
-            </span>
-          </div>
-          <div v-if="group.description" data-testid="group-list-item-description">
-            <p class="gl-mt-2! gl-mb-0 gl-text-gray-600" v-text="group.description"></p>
-          </div>
+          <group-item-name :group="group" />
         </div>
 
         <gl-button
diff --git a/app/assets/javascripts/jira_connect/components/subscriptions_list.vue b/app/assets/javascripts/jira_connect/components/subscriptions_list.vue
new file mode 100644
index 00000000000..4b0f9acd6ca
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/components/subscriptions_list.vue
@@ -0,0 +1,98 @@
+<script>
+import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
+import { removeSubscription } from '~/jira_connect/api';
+import { reloadPage } from '~/jira_connect/utils';
+import { __, s__ } from '~/locale';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import GroupItemName from './group_item_name.vue';
+
+export default {
+  components: {
+    GlButton,
+    GlEmptyState,
+    GlTable,
+    GroupItemName,
+    TimeagoTooltip,
+  },
+  inject: {
+    subscriptions: {
+      default: [],
+    },
+  },
+  data() {
+    return {
+      loadingItem: null,
+    };
+  },
+  fields: [
+    {
+      key: 'name',
+      label: s__('Integrations|Linked namespaces'),
+    },
+    {
+      key: 'created_at',
+      label: __('Added'),
+      tdClass: 'gl-vertical-align-middle! gl-w-20p',
+    },
+    {
+      key: 'actions',
+      label: '',
+      tdClass: 'gl-text-right gl-vertical-align-middle! gl-pl-0!',
+    },
+  ],
+  i18n: {
+    emptyTitle: s__('Integrations|No linked namespaces'),
+    emptyDescription: s__(
+      'Integrations|Namespaces are the GitLab groups and subgroups you link to this Jira instance.',
+    ),
+  },
+  methods: {
+    isEmpty,
+    isLoadingItem(item) {
+      return this.loadingItem === item;
+    },
+    unlinkBtnClass(item) {
+      return this.isLoadingItem(item) ? '' : 'gl-ml-6';
+    },
+    onClick(item) {
+      this.loadingItem = item;
+
+      removeSubscription(item.unlink_path)
+        .then(() => {
+          reloadPage();
+        })
+        .catch(() => {
+          this.loadingItem = null;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-empty-state
+      v-if="isEmpty(subscriptions)"
+      :title="$options.i18n.emptyTitle"
+      :description="$options.i18n.emptyDescription"
+    />
+    <gl-table v-else :items="subscriptions" :fields="$options.fields">
+      <template #cell(name)="{ item }">
+        <group-item-name :group="item.group" />
+      </template>
+      <template #cell(created_at)="{ item }">
+        <timeago-tooltip :time="item.created_at" />
+      </template>
+      <template #cell(actions)="{ item }">
+        <gl-button
+          :class="unlinkBtnClass(item)"
+          category="secondary"
+          :loading="isLoadingItem(item)"
+          @click.prevent="onClick(item)"
+          >{{ __('Unlink') }}</gl-button
+        >
+      </template>
+    </gl-table>
+  </div>
+</template>
diff --git a/app/assets/javascripts/jira_connect/index.js b/app/assets/javascripts/jira_connect/index.js
index ecdb41607a4..24828e2f1d1 100644
--- a/app/assets/javascripts/jira_connect/index.js
+++ b/app/assets/javascripts/jira_connect/index.js
@@ -1,6 +1,7 @@
 import setConfigs from '@gitlab/ui/dist/config';
 import Vue from 'vue';
-import { addSubscription, removeSubscription, getLocation } from '~/jira_connect/api';
+import { addSubscription, removeSubscription } from '~/jira_connect/api';
+import { getLocation, reloadPage, sizeToParent } from '~/jira_connect/utils';
 import GlFeatureFlagsPlugin from '~/vue_shared/gl_feature_flags_plugin';
 import Translate from '~/vue_shared/translate';
 
@@ -10,10 +11,6 @@ import { SET_ALERT } from './store/mutation_types';
 
 const store = createStore();
 
-const reqComplete = () => {
-  AP.navigator.reload();
-};
-
 const reqFailed = (res, fallbackErrorMessage) => {
   const { error = fallbackErrorMessage } = res || {};
 
@@ -35,7 +32,7 @@ const initRemoveSubscriptionButtonHandlers = () => {
 
       const removePath = e.target.getAttribute('href');
       removeSubscription(removePath)
-        .then(reqComplete)
+        .then(reloadPage)
         .catch((err) =>
           reqFailed(err.response.data, 'Failed to remove namespace. Please try again.'),
         );
@@ -56,7 +53,7 @@ const initAddSubscriptionFormHandler = () => {
     const namespace = (e.target.querySelector('#namespace-input') || {}).value;
 
     addSubscription(addPath, namespace)
-      .then(reqComplete)
+      .then(reloadPage)
       .catch((err) => reqFailed(err.response.data, 'Failed to add namespace. Please try again.'));
   });
 };
@@ -76,14 +73,15 @@ export async function initJiraConnect() {
   Vue.use(Translate);
   Vue.use(GlFeatureFlagsPlugin);
 
-  const { groupsPath, subscriptionsPath, usersPath } = el.dataset;
-  AP.sizeToParent();
+  const { groupsPath, subscriptions, subscriptionsPath, usersPath } = el.dataset;
+  sizeToParent();
 
   return new Vue({
     el,
     store,
     provide: {
       groupsPath,
+      subscriptions: JSON.parse(subscriptions),
       subscriptionsPath,
       usersPath,
     },
diff --git a/app/assets/javascripts/jira_connect/utils.js b/app/assets/javascripts/jira_connect/utils.js
index 2a6c53ba42c..ecd1a31339a 100644
--- a/app/assets/javascripts/jira_connect/utils.js
+++ b/app/assets/javascripts/jira_connect/utils.js
@@ -1,6 +1,8 @@
 import AccessorUtilities from '~/lib/utils/accessor';
 import { ALERT_LOCALSTORAGE_KEY } from './constants';
 
+const isFunction = (fn) => typeof fn === 'function';
+
 /**
  * Persist alert data to localStorage.
  */
@@ -31,3 +33,41 @@ export const retrieveAlert = () => {
 
   return JSON.parse(initialAlertJSON);
 };
+
+export const getJwt = () => {
+  return new Promise((resolve) => {
+    if (isFunction(AP?.context?.getToken)) {
+      AP.context.getToken((token) => {
+        resolve(token);
+      });
+    } else {
+      resolve();
+    }
+  });
+};
+
+export const getLocation = () => {
+  return new Promise((resolve) => {
+    if (isFunction(AP?.getLocation)) {
+      AP.getLocation((location) => {
+        resolve(location);
+      });
+    } else {
+      resolve();
+    }
+  });
+};
+
+export const reloadPage = () => {
+  if (isFunction(AP?.navigator?.reload)) {
+    AP.navigator.reload();
+  } else {
+    window.location.reload();
+  }
+};
+
+export const sizeToParent = () => {
+  if (isFunction(AP?.sizeToParent)) {
+    AP.sizeToParent();
+  }
+};