Add basic structure for subscriptions table

- Pass data directly from helpers
- Use data as props on the frontend

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

 <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 { __ } from '~/locale';
@@ -7,16 +7,18 @@ 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 +93,41 @@ 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
+    <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"
       >
-      <template v-else>
+        <h5 class="gl-align-self-center gl-mb-0" data-testid="new-jira-connect-ui-heading">
+          {{ s__('Integrations|Linked namespaces') }}
+        </h5>
         <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>

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

+<script>
+export default {
+  inject: {
+    subscriptions: {
+      default: [],
+    },
+  },
+};
+</script>
+
+<template>
+  <div>{{ subscriptions }}</div>
+</template>

app/assets/javascripts/jira_connect/index.js

@@ -76,7 +76,7 @@ export async function initJiraConnect() {
   Vue.use(Translate);
   Vue.use(GlFeatureFlagsPlugin);
 
-  const { groupsPath, subscriptionsPath, usersPath } = el.dataset;
+  const { groupsPath, subscriptions, subscriptionsPath, usersPath } = el.dataset;
   AP.sizeToParent();
 
   return new Vue({
@@ -84,6 +84,7 @@ export async function initJiraConnect() {
     store,
     provide: {
       groupsPath,
+      subscriptions: JSON.parse(subscriptions),
       subscriptionsPath,
       usersPath,
     },

app/helpers/jira_connect_helper.rb

@@ -6,8 +6,24 @@ module JiraConnectHelper
 
     {
       groups_path: api_v4_groups_path(params: { min_access_level: Gitlab::Access::MAINTAINER, skip_groups: skip_groups }),
+      subscriptions: subscriptions.map { |s| serialize_subscription(s) }.to_json,
       subscriptions_path: jira_connect_subscriptions_path,
       users_path: current_user ? nil : jira_connect_users_path
     }
   end
+
+  private
+
+  def serialize_subscription(subscription)
+    {
+      group: {
+        name: subscription.namespace.name,
+        avatar_url: subscription.namespace.avatar_url,
+        full_name: subscription.namespace.full_name,
+        description: subscription.namespace.description
+      },
+      created_at: subscription.created_at,
+      unlink_path: jira_connect_subscription_path(subscription)
+    }
+  end
 end