Clean up UI elements

Add functionality to Unlink button

app/assets/javascripts/jira_connect/components/app.vue

@@ -92,13 +92,9 @@ export default {
 
     <h2 class="gl-text-center">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
 
-    <div class="jira-connect-app-body">
-      <div
-        class="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>
+    <div class="jira-connect-app-body gl-my-7 gl-pb-4">
+      <div class="gl-display-flex gl-justify-content-space-between">
+        <h5 class="" data-testid="new-jira-connect-ui-heading"></h5>
         <gl-button
           v-if="usersPath"
           category="primary"

app/assets/javascripts/jira_connect/components/groups_list_item.vue

 <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';
@@ -8,9 +8,7 @@ import GroupItemName from './group_item_name.vue';
 
 export default {
   components: {
-    GlAvatar,
     GlButton,
-    GlIcon,
     GroupItemName,
   },
   inject: {

app/assets/javascripts/jira_connect/components/subscriptions_list.vue

 <script>
 import { GlButton, GlTable } from '@gitlab/ui';
+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';
@@ -33,6 +35,11 @@ export default {
   ],
   methods: {
     onClick(item) {
+      removeSubscription(item.unlink_path)
+        .then(() => {
+          reloadPage();
+        })
+        .catch(() => {});
       return item;
     },
   },

app/assets/javascripts/jira_connect/index.js

 import setConfigs from '@gitlab/ui/dist/config';
 import Vue from 'vue';
-import { addSubscription, removeSubscription, getLocation } from '~/jira_connect/api';
-import { reloadPage, sizeToParent } from '~/jira_connect/utils';
+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';
 

app/assets/stylesheets/page_bundles/jira_connect.scss

@@ -15,6 +15,7 @@
 @import '@gitlab/ui/src/components/base/loading_icon/loading_icon';
 @import '@gitlab/ui/src/components/base/modal/modal';
 @import '@gitlab/ui/src/components/base/pagination/pagination';
+@import '@gitlab/ui/src/components/base/table/table';
 @import '@gitlab/ui/src/components/base/tooltip/tooltip';
 @import '@gitlab/ui/src/components/base/search_box_by_type/search_box_by_type';