2 files changed, 83 insertions, 0 deletions
diff --git a/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in.vue b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in.vue
new file mode 100644
index 00000000000..2bce5afc72b
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in.vue
@@ -0,0 +1,40 @@
+<script>
+import { s__ } from '~/locale';
+import SubscriptionsList from '../components/subscriptions_list.vue';
+import SignInButton from '../components/sign_in_button.vue';
+
+export default {
+  name: 'SignInPage',
+  components: {
+    SubscriptionsList,
+    SignInButton,
+  },
+  inject: ['usersPath'],
+  props: {
+    hasSubscriptions: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  i18n: {
+    signinButtonTextWithSubscriptions: s__('Integrations|Sign in to add namespaces'),
+    signInText: s__('JiraService|Sign in to GitLab.com to get started.'),
+  },
+};
+</script>
+
+<template>
+  <div v-if="hasSubscriptions">
+    <div class="gl-display-flex gl-justify-content-end">
+      <sign-in-button :users-path="usersPath">
+        {{ $options.i18n.signinButtonTextWithSubscriptions }}
+      </sign-in-button>
+    </div>
+
+    <subscriptions-list />
+  </div>
+  <div v-else class="gl-text-center">
+    <p class="gl-mb-7">{{ $options.i18n.signInText }}</p>
+    <sign-in-button class="gl-mb-7" :users-path="usersPath" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/pages/subscriptions.vue b/app/assets/javascripts/jira_connect/subscriptions/pages/subscriptions.vue
new file mode 100644
index 00000000000..426f2999370
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/pages/subscriptions.vue
@@ -0,0 +1,43 @@
+<script>
+import { GlEmptyState } from '@gitlab/ui';
+import SubscriptionsList from '../components/subscriptions_list.vue';
+import AddNamespaceButton from '../components/add_namespace_button.vue';
+
+export default {
+  name: 'SubscriptionsPage',
+  components: {
+    GlEmptyState,
+    SubscriptionsList,
+    AddNamespaceButton,
+  },
+  props: {
+    hasSubscriptions: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="hasSubscriptions">
+    <div class="gl-display-flex gl-justify-content-end">
+      <add-namespace-button />
+    </div>
+
+    <subscriptions-list />
+  </div>
+  <gl-empty-state
+    v-else
+    :title="s__('Integrations|No linked namespaces')"
+    :description="
+      s__(
+        'Integrations|Namespaces are the GitLab groups and subgroups you link to this Jira instance.',
+      )
+    "
+  >
+    <template #actions>
+      <add-namespace-button />
+    </template>
+  </gl-empty-state>
+</template>