Merge branch...

Merge branch '13019-improve-error-messages-when-adding-namespaces-in-jira-connect-app' into 'master'

Use GlAlert for errors in Jira Connect app

See merge request gitlab-org/gitlab!48651

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

 <script>
 import { mapState } from 'vuex';
+import { GlAlert } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   name: 'JiraConnectApp',
+  components: {
+    GlAlert,
+  },
   mixins: [glFeatureFlagsMixin()],
   computed: {
     ...mapState(['errorMessage']),
@@ -16,6 +20,12 @@ export default {
 
 <template>
   <div>
+    <gl-alert v-if="errorMessage" class="gl-mb-6" variant="danger" :dismissible="false">
+      {{ errorMessage }}
+    </gl-alert>
+
+    <h1>GitLab for Jira Configuration</h1>
+
     <div v-if="showNewUi">
       <h3 data-testid="new-jira-connect-ui-heading">{{ s__('Integrations|Linked namespaces') }}</h3>
     </div>

app/assets/javascripts/jira_connect/index.js

@@ -23,11 +23,9 @@ const initJiraFormHandlers = () => {
   };
 
   const reqFailed = (res, fallbackErrorMessage) => {
-    const { responseJSON: { error = fallbackErrorMessage } = {} } = res || {};
+    const { error = fallbackErrorMessage } = res || {};
 
     store.commit(SET_ERROR_MESSAGE, error);
-    // eslint-disable-next-line no-alert
-    alert(error);
   };
 
   if (typeof AP.getLocation === 'function') {

app/assets/stylesheets/page_bundles/jira_connect.scss

 @import 'mixins_and_variables_and_functions';
-// We should only import styles that we actually use.
-// @import '@gitlab/ui/src/scss/gitlab_ui';
-
+/**
+NOTE: We should only import styles that we actually use.
+Ex:
+  @import '@gitlab/ui/src/scss/gitlab_ui';
+*/
 @import '@gitlab/ui/src/scss/bootstrap';
 @import 'bootstrap-vue/src/index';
 
 @import '@gitlab/ui/src/scss/utilities';
+@import '@gitlab/ui/src/components/base/alert/alert';
 
 $atlaskit-border-color: #dfe1e6;
 

app/views/jira_connect/subscriptions/index.html.haml

@@ -9,10 +9,9 @@
     = link_to _('Sign in to GitLab'), jira_connect_users_path, target: '_blank', rel: 'noopener noreferrer', class: 'js-jira-connect-sign-in'
 
 .jira-connect-app
+  - if current_user.blank? && @subscriptions.empty?
     %h1
       GitLab for Jira Configuration
-
-  - if current_user.blank? && @subscriptions.empty?
     %h2.heading-with-border Sign in to GitLab.com to get started.
 
     .gl-mt-5

changelogs/unreleased/13019-improve-error-messages-when-adding-namespaces-in-jira-connect-app.yml

+---
+title: Improve error messages when adding namespaces in Jira Connect App
+merge_request: 48651
+author:
+type: changed

spec/frontend/jira_connect/components/app_spec.js

+import Vue from 'vue';
+import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { GlAlert } from '@gitlab/ui';
 import JiraConnectApp from '~/jira_connect/components/app.vue';
+import createStore from '~/jira_connect/store';
+import { SET_ERROR_MESSAGE } from '~/jira_connect/store/mutation_types';
+
+Vue.use(Vuex);
 
 describe('JiraConnectApp', () => {
   let wrapper;
+  let store;
 
+  const findAlert = () => wrapper.findComponent(GlAlert);
   const findHeader = () => wrapper.findByTestId('new-jira-connect-ui-heading');
   const findHeaderText = () => findHeader().text();
 
   const createComponent = (options = {}) => {
+    store = createStore();
+
     wrapper = extendedWrapper(
       shallowMount(JiraConnectApp, {
+        store,
         provide: {
           glFeatures: { newJiraConnectUi: true },
         },
@@ -43,5 +55,26 @@ describe('JiraConnectApp', () => {
         expect(findHeader().exists()).toBe(false);
       });
     });
+
+    it.each`
+      errorMessage    | errorShouldRender
+      ${'Test error'} | ${true}
+      ${''}           | ${false}
+      ${undefined}    | ${false}
+    `(
+      'renders correct alert when errorMessage is `$errorMessage`',
+      async ({ errorMessage, errorShouldRender }) => {
+        createComponent();
+
+        store.commit(SET_ERROR_MESSAGE, errorMessage);
+        await wrapper.vm.$nextTick();
+
+        expect(findAlert().exists()).toBe(errorShouldRender);
+        if (errorShouldRender) {
+          expect(findAlert().isVisible()).toBe(errorShouldRender);
+          expect(findAlert().html()).toContain(errorMessage);
+        }
+      },
+    );
   });
 });