Merge branch '297685-jira-connect-app-ui-polish' into 'master'

Jira Connect app UI polish and improvements

See merge request gitlab-org/gitlab!52212

app/assets/javascripts/jira_connect/api.js

@@ -8,6 +8,14 @@ export const getJwt = () => {
   });
 };
 
+export const getLocation = () => {
+  return new Promise((resolve) => {
+    AP.getLocation((location) => {
+      resolve(location);
+    });
+  });
+};
+
 export const addSubscription = async (addPath, namespace) => {
   const jwt = await getJwt();
 

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

@@ -3,6 +3,8 @@ import { mapState } from 'vuex';
 import { GlAlert, GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+
+import { getLocation } from '~/jira_connect/api';
 import GroupsList from './groups_list.vue';
 
 export default {
@@ -17,17 +19,42 @@ export default {
     GlModalDirective,
   },
   mixins: [glFeatureFlagsMixin()],
+  inject: {
+    usersPath: {
+      default: '',
+    },
+  },
+  data() {
+    return {
+      location: '',
+    };
+  },
   computed: {
     ...mapState(['errorMessage']),
     showNewUI() {
       return this.glFeatures.newJiraConnectUi;
     },
+    usersPathWithReturnTo() {
+      if (this.location) {
+        return `${this.usersPath}?return_to=${this.location}`;
+      }
+
+      return this.usersPath;
+    },
   },
   modal: {
     cancelProps: {
       text: __('Cancel'),
     },
   },
+  created() {
+    this.setLocation();
+  },
+  methods: {
+    async setLocation() {
+      this.location = await getLocation();
+    },
+  },
 };
 </script>
 
@@ -37,27 +64,40 @@ export default {
       {{ errorMessage }}
     </gl-alert>
 
-    <h1>GitLab for Jira Configuration</h1>
+    <h2>{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
 
     <div
       v-if="showNewUI"
-      class="gl-display-flex gl-justify-content-space-between gl-my-5 gl-pb-4 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200"
+      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"
     >
-      <h3 data-testid="new-jira-connect-ui-heading">{{ s__('Integrations|Linked namespaces') }}</h3>
+      <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 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>
   </div>
 </template>

app/assets/javascripts/jira_connect/index.js

@@ -70,7 +70,7 @@ function initJiraConnect() {
   Vue.use(Translate);
   Vue.use(GlFeatureFlagsPlugin);
 
-  const { groupsPath, subscriptionsPath } = el.dataset;
+  const { groupsPath, subscriptionsPath, usersPath } = el.dataset;
 
   return new Vue({
     el,
@@ -78,6 +78,7 @@ function initJiraConnect() {
     provide: {
       groupsPath,
       subscriptionsPath,
+      usersPath,
     },
     render(createElement) {
       return createElement(JiraConnectApp);

app/assets/stylesheets/page_bundles/jira_connect.scss

@@ -79,12 +79,6 @@ $header-height: 40px;
   margin-top: 16px;
 }
 
-.heading-with-border {
-  border-bottom: 1px solid $gray-100;
-  display: inline-block;
-  padding-bottom: 16px;
-}
-
 svg {
   fill: currentColor;
 

app/helpers/external_link_helper.rb

@@ -3,7 +3,7 @@
 module ExternalLinkHelper
   def external_link(body, url, options = {})
     link_to url, { target: '_blank', rel: 'noopener noreferrer' }.merge(options) do
-      "#{body} #{sprite_icon('external-link')}".html_safe
+      "#{body}#{sprite_icon('external-link', css_class: 'gl-ml-1')}".html_safe
     end
   end
 end

app/helpers/jira_connect_helper.rb

@@ -12,7 +12,8 @@ module JiraConnectHelper
 
     {
       groups_path: api_v4_groups_path(params: { min_access_level: Gitlab::Access::MAINTAINER, skip_groups: skip_groups }),
-      subscriptions_path: jira_connect_subscriptions_path
+      subscriptions_path: jira_connect_subscriptions_path,
+      users_path: current_user ? nil : jira_connect_users_path
     }
   end
 end

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

@@ -3,21 +3,21 @@
 
 .jira-connect-user
   - if current_user
-    - user_link = link_to(current_user.to_reference, user_path(current_user), target: '_blank', rel: 'noopener noreferrer')
+    - user_link = link_to(current_user.to_reference, jira_connect_users_path, target: '_blank', rel: 'noopener noreferrer', class: 'js-jira-connect-sign-in')
     = _('Signed in to GitLab as %{user_link}').html_safe % { user_link: user_link }
   - elsif @subscriptions.present?
     = 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
-    %h2.heading-with-border Sign in to GitLab.com to get started.
+    %h2= s_('JiraService|GitLab for Jira Configuration')
+    %p= s_('JiraService|Sign in to GitLab.com to get started.')
 
-    .gl-mt-5
-      = external_link _('Sign in to GitLab'), jira_connect_users_path, class: 'ak-button ak-button__appearance-primary js-jira-connect-sign-in'
+    .gl-mt-7
+      - sign_in_button_class = new_jira_connect_ui? ? 'btn gl-button btn-confirm' : 'ak-button ak-button__appearance-primary'
+      = external_link _('Sign in to GitLab'), jira_connect_users_path, class: "#{sign_in_button_class} js-jira-connect-sign-in"
 
-    .gl-mt-5
+    .gl-mt-7
       %p Note: this integration only works with accounts on GitLab.com (SaaS).
   - else
     .js-jira-connect-app{ data: jira_connect_app_data(@subscriptions) }
@@ -55,10 +55,8 @@
     %strong Browser limitations:
     Adding a namespace currently works only in browsers that allow cross‑site cookies. Please make sure to use
     %a{ href: 'https://www.mozilla.org/en-US/firefox/', target: '_blank', rel: 'noopener noreferrer' } Firefox
-    or
-    %a{ href: 'https://www.google.com/chrome/index.html', target: '_blank', rel: 'noopener noreferrer' } Google Chrome
     or enable cross‑site cookies in your browser when adding a namespace.
-    %a{ href: 'https://gitlab.com/gitlab-org/gitlab/-/issues/263509', target: '_blank', rel: 'noopener noreferrer' } Learn more
+    = link_to _('Learn more'), 'https://gitlab.com/gitlab-org/gitlab/-/issues/284211', target: '_blank', rel: 'noopener noreferrer'
 
 = webpack_bundle_tag 'performance_bar' if performance_bar_enabled?
 = webpack_bundle_tag 'jira_connect_app'

locale/gitlab.pot

@@ -15482,6 +15482,9 @@ msgstr ""
 msgid "Integrations|Search Jira issues"
 msgstr ""
 
+msgid "Integrations|Sign in to add namespaces"
+msgstr ""
+
 msgid "Integrations|Standard"
 msgstr ""
 
@@ -16148,6 +16151,9 @@ msgstr ""
 msgid "JiraService|For example, 12, 24"
 msgstr ""
 
+msgid "JiraService|GitLab for Jira Configuration"
+msgstr ""
+
 msgid "JiraService|If different from Web URL"
 msgstr ""
 
@@ -16199,6 +16205,9 @@ msgstr ""
 msgid "JiraService|Set transition IDs for Jira workflow transitions. %{link_start}Learn more%{link_end}"
 msgstr ""
 
+msgid "JiraService|Sign in to GitLab.com to get started."
+msgstr ""
+
 msgid "JiraService|This feature requires a Premium plan."
 msgstr ""
 

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 { GlAlert, GlButton, GlModal } 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);
+jest.mock('~/jira_connect/api');
 
 describe('JiraConnectApp', () => {
   let wrapper;
   let store;
 
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findGlButton = () => wrapper.findComponent(GlButton);
+  const findGlModal = () => wrapper.findComponent(GlModal);
   const findHeader = () => wrapper.findByTestId('new-jira-connect-ui-heading');
   const findHeaderText = () => findHeader().text();
 
@@ -44,6 +45,33 @@ describe('JiraConnectApp', () => {
       expect(findHeaderText()).toBe('Linked namespaces');
     });
 
+    describe('when user is not logged in', () => {
+      beforeEach(() => {
+        createComponent({
+          provide: {
+            glFeatures: { newJiraConnectUi: true },
+            usersPath: '/users',
+          },
+        });
+      });
+
+      it('renders "Sign in" button', () => {
+        expect(findGlButton().text()).toBe('Sign in to add namespaces');
+        expect(findGlModal().exists()).toBe(false);
+      });
+    });
+
+    describe('when user is logged in', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders "Add" button and modal', () => {
+        expect(findGlButton().text()).toBe('Add namespace');
+        expect(findGlModal().exists()).toBe(true);
+      });
+    });
+
     describe('newJiraConnectUi is false', () => {
       it('does not render new UI', () => {
         createComponent({

spec/helpers/jira_connect_helper_spec.rb

@@ -5,20 +5,42 @@ require 'spec_helper'
 RSpec.describe JiraConnectHelper do
   describe '#jira_connect_app_data' do
     let_it_be(:subscription) { create(:jira_connect_subscription) }
+    let(:user) { create(:user) }
 
     subject { helper.jira_connect_app_data([subscription]) }
 
-    it 'includes Jira Connect app attributes' do
-      is_expected.to include(
-        :groups_path,
-        :subscriptions_path
-      )
+    context 'user is not logged in' do
+      before do
+        allow(view).to receive(:current_user).and_return(nil)
+      end
+
+      it 'includes Jira Connect app attributes' do
+        is_expected.to include(
+          :groups_path,
+          :subscriptions_path,
+          :users_path
+        )
+      end
+
+      it 'assigns users_path with value' do
+        expect(subject[:users_path]).to eq(jira_connect_users_path)
+      end
+
+      it 'passes group as "skip_groups" param' do
+        skip_groups_param = CGI.escape('skip_groups[]')
+
+        expect(subject[:groups_path]).to include("#{skip_groups_param}=#{subscription.namespace.id}")
+      end
     end
 
-    it 'passes group as "skip_groups" param' do
-      skip_groups_param = CGI.escape('skip_groups[]')
+    context 'user is logged in' do
+      before do
+        allow(view).to receive(:current_user).and_return(user)
+      end
 
-      expect(subject[:groups_path]).to include("#{skip_groups_param}=#{subscription.namespace.id}")
+      it 'assigns users_path to nil' do
+        expect(subject[:users_path]).to be_nil
+      end
     end
   end
 end