1 files changed, 36 insertions, 12 deletions
diff --git a/app/assets/javascripts/jira_connect/components/app.vue b/app/assets/javascripts/jira_connect/components/app.vue
index a4ba86dc6a1..fe5ad8b67d7 100644
--- a/app/assets/javascripts/jira_connect/components/app.vue
+++ b/app/assets/javascripts/jira_connect/components/app.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlAlert, GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
-import { mapState } from 'vuex';
+import { GlAlert, GlButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui';
+import { mapState, mapMutations } from 'vuex';
 import { getLocation } from '~/jira_connect/api';
 import { __ } from '~/locale';
 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';
 
 export default {
@@ -14,6 +15,8 @@ export default {
     GlButton,
     GlModal,
     GroupsList,
+    GlLink,
+    GlSprintf,
   },
   directives: {
     GlModalDirective,
@@ -30,10 +33,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(['errorMessage']),
-    showNewUI() {
-      return this.glFeatures.newJiraConnectUi;
-    },
+    ...mapState(['alert']),
     usersPathWithReturnTo() {
       if (this.location) {
         return `${this.usersPath}?return_to=${this.location}`;
@@ -41,6 +41,9 @@ export default {
 
       return this.usersPath;
     },
+    shouldShowAlert() {
+      return Boolean(this.alert?.message);
+    },
   },
   modal: {
     cancelProps: {
@@ -48,27 +51,48 @@ export default {
     },
   },
   created() {
+    this.setInitialAlert();
     this.setLocation();
   },
   methods: {
+    ...mapMutations({
+      setAlert: SET_ALERT,
+    }),
     async setLocation() {
       this.location = await getLocation();
     },
+    setInitialAlert() {
+      const { linkUrl, title, message, variant } = retrieveAlert() || {};
+      this.setAlert({ linkUrl, title, message, variant });
+    },
   },
 };
 </script>
 
 <template>
   <div>
-    <gl-alert v-if="errorMessage" class="gl-mb-6" variant="danger" :dismissible="false">
-      {{ errorMessage }}
+    <gl-alert
+      v-if="shouldShowAlert"
+      class="gl-mb-7"
+      :variant="alert.variant"
+      :title="alert.title"
+      @dismiss="setAlert"
+    >
+      <gl-sprintf v-if="alert.linkUrl" :message="alert.message">
+        <template #link="{ content }">
+          <gl-link :href="alert.linkUrl" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+
+      <template v-else>
+        {{ alert.message }}
+      </template>
     </gl-alert>
 
-    <h2>{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
+    <h2 class="gl-text-center">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
 
     <div
-      v-if="showNewUI"
-      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"
+      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') }}