Add UI elements for subscriptions list

- Extract group item name to separate component to be
reused in the subscriptions list.
- Use time ago tooltip for created_at

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

+<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>

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

@@ -4,12 +4,14 @@ import { helpPagePath } from '~/helpers/help_page_helper';
 import { addSubscription } from '~/jira_connect/api';
 import { s__ } from '~/locale';
 import { persistAlert } from '../utils';
+import GroupItemName from './group_item_name.vue';
 
 export default {
   components: {
     GlAvatar,
     GlButton,
     GlIcon,
+    GroupItemName,
   },
   inject: {
     subscriptionsPath: {
@@ -67,23 +69,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

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

 <script>
+import { GlButton, GlTable } from '@gitlab/ui';
+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,
+    GlTable,
+    GroupItemName,
+    TimeagoTooltip,
+  },
   inject: {
     subscriptions: {
       default: [],
     },
   },
+  fields: [
+    {
+      key: 'name',
+      label: s__('Integrations|Linked namespaces'),
+    },
+    {
+      key: 'created_at',
+      label: __('Added'),
+      tdClass: 'gl-vertical-align-middle!',
+    },
+    {
+      key: 'actions',
+      label: '',
+    },
+  ],
+  methods: {
+    onClick(item) {
+      return item;
+    },
+  },
 };
 </script>
 
 <template>
-  <div>{{ subscriptions }}</div>
+  <gl-table :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 category="secondary" :loading="false" @click.prevent="onClick(item)">{{
+        __('Unlink')
+      }}</gl-button>
+    </template>
+  </gl-table>
 </template>

app/assets/stylesheets/page_bundles/jira_connect.scss

@@ -55,7 +55,9 @@ $header-height: 40px;
 }
 
 .jira-connect-app-body {
-  max-width: 600px;
+  max-width: 768px;
+  padding-left: 15px;
+  padding-right: 15px;
   margin-left: auto;
   margin-right: auto;
 }