Merge branch '235888-gitlab-for-jira-app-should-display-who-is-logged-in' into 'master'

Add user sign in indicator to Jira connect app

See merge request gitlab-org/gitlab!42628

app/assets/javascripts/jira_connect.js

@@ -18,6 +18,13 @@ function onLoaded() {
     alert(res.responseJSON.error);
   };
 
+  AP.getLocation(function(location) {
+    $('.js-jira-connect-sign-in').each(function() {
+      var updatedLink = `${$(this).attr('href')}?return_to=${location}`;
+      $(this).attr('href', updatedLink);
+    });
+  });
+
   $('#add-subscription-form').on('submit', function(e) {
     var actionUrl = $(this).attr('action');
     e.preventDefault();

app/assets/stylesheets/page_bundles/jira_connect.scss

@@ -13,6 +13,7 @@ $atlaskit-border-color: #dfe1e6;
       padding-top: $gl-padding-4;
 
       .ak-button {
+        align-items: center;
         height: auto;
         margin-left: $btn-margin-5;
       }
@@ -20,6 +21,74 @@ $atlaskit-border-color: #dfe1e6;
   }
 }
 
+$header-height: 40px;
+
+.jira-connect-header {
+  border-bottom: 1px solid $gray-100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: $header-height;
+  padding-left: 16px;
+  padding-right: 16px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.jira-connect-user {
+  float: right;
+  position: relative;
+  top: -30px;
+}
+
+.jira-connect-app {
+  margin-top: $header-height;
+  max-width: 600px;
+  padding-top: 48px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.gl-mt-5 {
+  margin-top: 16px;
+}
+
+.heading-with-border {
+  border-bottom: 1px solid $gray-100;
+  display: inline-block;
+  padding-bottom: 16px;
+}
+
+svg {
+  fill: currentColor;
+
+  &.s16 {
+    height: 16px;
+    width: 16px;
+  }
+}
+
+.ak-field-group label {
+  text-align: left;
+}
+
+.ak-button__appearance-primary {
+  &:hover {
+    color: $white;
+    text-decoration: none;
+  }
+
+  svg {
+    align-self: center;
+    margin-left: 4px;
+  }
+}
+
 .subscriptions {
   tbody {
     tr {
@@ -31,3 +100,11 @@ $atlaskit-border-color: #dfe1e6;
     }
   }
 }
+
+.empty-subscriptions {
+  color: $gray-900;
+}
+
+.browser-limitations-notice {
+  margin-top: 32px;
+}

app/assets/stylesheets/page_bundles/jira_connect_users.scss

+@import 'mixins_and_variables_and_functions';
+
+.jira-connect-users-container {
+  margin-left: auto;
+  margin-right: auto;
+  width: px-to-rem(350px);
+}
+
+.devise-layout-html body .navless-container {
+  @include media-breakpoint-down(xs) {
+    padding-top: 65px;
+  }
+}

app/controllers/jira_connect/users_controller.rb

+# frozen_string_literal: true
+
+class JiraConnect::UsersController < ApplicationController
+  feature_category :integrations
+
+  layout 'devise_experimental_onboarding_issues'
+
+  def show
+    @jira_app_link = params.delete(:return_to)
+  end
+end

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} #{icon('external-link')}".html_safe
+      "#{body} #{sprite_icon('external-link')}".html_safe
     end
   end
 end

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

-%h1
-  GitLab for Jira Configuration
-
-%form#add-subscription-form.subscription-form{ action: jira_connect_subscriptions_path }
-  .ak-field-group
-    %label
-      Namespace
-
-  .ak-field-group.field-group-input
-    %input#namespace-input.ak-field-text{ type: 'text', required: true }
-    %button.ak-button.ak-button__appearance-primary{ type: 'submit' }
-      Link namespace to Jira
-
-%table.subscriptions
-  %thead
-    %tr
-      %th Namespace
-      %th Added
-      %th
-  %tbody
-    - @subscriptions.each do |subscription|
-      %tr
-        %td= subscription.namespace.full_path
-        %td= subscription.created_at
-        %td= link_to 'Remove', jira_connect_subscription_path(subscription), class: 'remove-subscription'
-
-%p
-  %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
+%header.jira-connect-header
+  = brand_header_logo
+
+.jira-connect-user
+  - if current_user
+    - user_link = link_to(current_user.to_reference, user_path(current_user), target: '_blank', rel: 'noopener noreferrer')
+    = _('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
+  %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
+      = external_link _('Sign in to GitLab'), jira_connect_users_path, class: 'ak-button ak-button__appearance-primary js-jira-connect-sign-in'
+
+    .gl-mt-5
+      %p Note: this integration only works with accounts on GitLab.com (SaaS).
+  - else
+    %form#add-subscription-form.subscription-form{ action: jira_connect_subscriptions_path }
+      .ak-field-group
+        %label
+          GitLab namespace
+
+      .ak-field-group.field-group-input
+        %input#namespace-input.ak-field-text{ type: 'text', required: true, placeholder: 'e.g. "MyCompany" or "MyCompany/GroupName"' }
+        %button.ak-button.ak-button__appearance-primary{ type: 'submit' }
+          Link namespace to Jira
+
+    - if @subscriptions.present?
+      %table.subscriptions
+        %thead
+          %tr
+            %th Namespace
+            %th Added
+            %th
+        %tbody
+          - @subscriptions.each do |subscription|
+            %tr
+              %td= subscription.namespace.full_path
+              %td= subscription.created_at
+              %td= link_to 'Remove', jira_connect_subscription_path(subscription), class: 'remove-subscription'
+    - else
+      %h4.empty-subscriptions
+        No linked namespaces
+
+  %p.browser-limitations-notice
+    %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
 
 = page_specific_javascript_tag('jira_connect.js')
 - add_page_specific_style 'page_bundles/jira_connect'

app/views/jira_connect/users/show.html.haml

+.jira-connect-users-container.gl-text-center
+  - user_link = link_to(current_user.to_reference, user_path(current_user), target: '_blank', rel: 'noopener noreferrer')
+  %h2= _('You are signed into GitLab as %{user_link}').html_safe % { user_link: user_link }
+
+  %p= s_('Integrations|You can now close this window and return to the GitLab for Jira application.')
+
+  - if @jira_app_link
+    %p= external_link s_('Integrations|Return to GitLab for Jira'), @jira_app_link, class: 'btn btn-success'
+
+  %p= link_to _('Sign out'), destroy_user_session_path, method: :post
+
+- add_page_specific_style 'page_bundles/jira_connect_users'

changelogs/unreleased/235888-gitlab-for-jira-app-should-display-who-is-logged-in.yml

+---
+title: Add user sign in indicator to Jira connect app
+merge_request: 42628
+author:
+type: changed

config/application.rb

@@ -182,6 +182,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/ide.css"
     config.assets.precompile << "page_bundles/issues_list.css"
     config.assets.precompile << "page_bundles/jira_connect.css"
+    config.assets.precompile << "page_bundles/jira_connect_users.css"
     config.assets.precompile << "page_bundles/merge_conflicts.css"
     config.assets.precompile << "page_bundles/merge_requests.css"
     config.assets.precompile << "page_bundles/milestone.css"

config/routes/jira_connect.rb

@@ -5,6 +5,7 @@ namespace :jira_connect do
   root to: proc { [404, {}, ['']] }, as: 'base'
 
   get 'app_descriptor' => 'app_descriptor#show'
+  get :users, to: 'users#show'
 
   namespace :events do
     post 'installed'

locale/gitlab.pot

@@ -14149,6 +14149,9 @@ msgstr ""
 msgid "Integrations|Projects using custom settings will not be impacted unless the project owner chooses to use instance-level defaults."
 msgstr ""
 
+msgid "Integrations|Return to GitLab for Jira"
+msgstr ""
+
 msgid "Integrations|Save settings?"
 msgstr ""
 
@@ -14173,6 +14176,9 @@ msgstr ""
 msgid "Integrations|When a Jira issue is mentioned in a commit or merge request a remote link and comment (if enabled) will be created."
 msgstr ""
 
+msgid "Integrations|You can now close this window and return to the GitLab for Jira application."
+msgstr ""
+
 msgid "Interested parties can even contribute by pushing commits if they want to."
 msgstr ""
 
@@ -24241,6 +24247,9 @@ msgstr ""
 msgid "Sign in to \"%{group_name}\""
 msgstr ""
 
+msgid "Sign in to GitLab"
+msgstr ""
+
 msgid "Sign in using smart card"
 msgstr ""
 
@@ -24286,6 +24295,9 @@ msgstr ""
 msgid "Signed in"
 msgstr ""
 
+msgid "Signed in to GitLab as %{user_link}"
+msgstr ""
+
 msgid "Signed in with %{authentication} authentication"
 msgstr ""
 
@@ -29859,6 +29871,9 @@ msgstr ""
 msgid "You are receiving this message because you are a GitLab administrator for %{url}."
 msgstr ""
 
+msgid "You are signed into GitLab as %{user_link}"
+msgstr ""
+
 msgid "You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico."
 msgstr ""
 

spec/helpers/external_link_helper_spec.rb

@@ -6,12 +6,15 @@ RSpec.describe ExternalLinkHelper do
   include IconsHelper
 
   it 'returns external link with icon' do
-    expect(external_link('https://gitlab.com', 'https://gitlab.com').to_s)
-      .to eq('<a target="_blank" rel="noopener noreferrer" href="https://gitlab.com">https://gitlab.com <i aria-hidden="true" data-hidden="true" class="fa fa-external-link"></i></a>')
+    link = external_link('https://gitlab.com', 'https://gitlab.com').to_s
+    expect(link).to start_with('<a target="_blank" rel="noopener noreferrer" href="https://gitlab.com">https://gitlab.com')
+    expect(link).to include('data-testid="external-link-icon"')
   end
 
   it 'allows options when creating external link with icon' do
-    expect(external_link('https://gitlab.com', 'https://gitlab.com', { "data-foo": "bar", class: "externalLink" }).to_s)
-      .to eq('<a target="_blank" rel="noopener noreferrer" data-foo="bar" class="externalLink" href="https://gitlab.com">https://gitlab.com <i aria-hidden="true" data-hidden="true" class="fa fa-external-link"></i></a>')
+    link = external_link('https://gitlab.com', 'https://gitlab.com', { "data-foo": "bar", class: "externalLink" }).to_s
+
+    expect(link).to start_with('<a target="_blank" rel="noopener noreferrer" data-foo="bar" class="externalLink" href="https://gitlab.com">https://gitlab.com')
+    expect(link).to include('data-testid="external-link-icon"')
   end
 end

spec/views/jira_connect/subscriptions/index.html.haml_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'jira_connect/subscriptions/index.html.haml' do
+  let(:user) { build_stubbed(:user) }
+
+  before do
+    allow(view).to receive(:current_user).and_return(user)
+    assign(:subscriptions, [])
+  end
+
+  context 'when the user is signed in' do
+    it 'shows link to user profile' do
+      render
+
+      expect(rendered).to have_link(user.to_reference)
+    end
+  end
+
+  context 'when the user is not signed in' do
+    let(:user) { nil }
+
+    it 'shows "Sign in" link' do
+      render
+
+      expect(rendered).to have_link('Sign in to GitLab')
+    end
+  end
+end