1 files changed, 13 insertions, 45 deletions
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
index 7fd4cc38f11..905e242e977 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
@@ -1,13 +1,13 @@
 <script>
-import { GlAlert, GlLink, GlSprintf, GlEmptyState } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { mapState, mapMutations } from 'vuex';
 import { retrieveAlert } from '~/jira_connect/subscriptions/utils';
 import { SET_ALERT } from '../store/mutation_types';
-import SubscriptionsList from './subscriptions_list.vue';
-import AddNamespaceButton from './add_namespace_button.vue';
-import SignInButton from './sign_in_button.vue';
+import SignInPage from '../pages/sign_in.vue';
+import SubscriptionsPage from '../pages/subscriptions.vue';
 import UserLink from './user_link.vue';
+import CompatibilityAlert from './compatibility_alert.vue';
 
 export default {
   name: 'JiraConnectApp',
@@ -15,11 +15,10 @@ export default {
     GlAlert,
     GlLink,
     GlSprintf,
-    GlEmptyState,
-    SubscriptionsList,
-    AddNamespaceButton,
-    SignInButton,
     UserLink,
+    CompatibilityAlert,
+    SignInPage,
+    SubscriptionsPage,
   },
   inject: {
     usersPath: {
@@ -58,11 +57,14 @@ export default {
 
 <template>
   <div>
+    <compatibility-alert />
+
     <gl-alert
       v-if="shouldShowAlert"
       class="gl-mb-7"
       :variant="alert.variant"
       :title="alert.title"
+      data-testid="jira-connect-persisted-alert"
       @dismiss="setAlert"
     >
       <gl-sprintf v-if="alert.linkUrl" :message="alert.message">
@@ -79,43 +81,9 @@ export default {
     <user-link :user-signed-in="userSignedIn" :has-subscriptions="hasSubscriptions" />
 
     <h2 class="gl-text-center gl-mb-7">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
-    <div class="jira-connect-app-body gl-mx-auto gl-px-5 gl-mb-7">
-      <template v-if="hasSubscriptions">
-        <div class="gl-display-flex gl-justify-content-end">
-          <sign-in-button v-if="!userSignedIn" :users-path="usersPath" />
-          <add-namespace-button v-else />
-        </div>
-
-        <subscriptions-list />
-      </template>
-      <template v-else>
-        <div v-if="!userSignedIn" class="gl-text-center">
-          <p class="gl-mb-7">{{ s__('JiraService|Sign in to GitLab.com to get started.') }}</p>
-          <sign-in-button class="gl-mb-7" :users-path="usersPath">
-            {{ __('Sign in to GitLab') }}
-          </sign-in-button>
-          <p>
-            {{
-              s__(
-                'Integrations|Note: this integration only works with accounts on GitLab.com (SaaS).',
-              )
-            }}
-          </p>
-        </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>
+    <div class="gl-layout-w-limited gl-mx-auto gl-px-5 gl-mb-7">
+      <sign-in-page v-if="!userSignedIn" :has-subscriptions="hasSubscriptions" />
+      <subscriptions-page v-else :has-subscriptions="hasSubscriptions" />
     </div>
   </div>
 </template>