Merge branch '39455-clone-dropdown-should-not-have-a-tooltip' into 'master'

Resolve "Clone dropdown should not have a tooltip"

Closes #39455

See merge request gitlab-org/gitlab-ce!15334

app/assets/javascripts/project.js

@@ -17,13 +17,14 @@ export default class Project {
     $('a', $cloneOptions).on('click', (e) => {
       const $this = $(e.currentTarget);
       const url = $this.attr('href');
+      const activeText = $this.find('.dropdown-menu-inner-title').text();
 
       e.preventDefault();
 
       $('.is-active', $cloneOptions).not($this).removeClass('is-active');
       $this.toggleClass('is-active');
       $projectCloneField.val(url);
-      $cloneBtnText.text($this.text());
+      $cloneBtnText.text(activeText);
 
       return $('.clone').text(url);
     });

app/assets/stylesheets/pages/projects.scss

@@ -395,6 +395,18 @@
       }
     }
   }
+
+  .clone-dropdown-btn {
+    background-color: $white-light;
+  }
+
+  .clone-options-dropdown {
+    min-width: 240px;
+
+    .dropdown-menu-inner-content {
+      min-width: 320px;
+    }
+  }
 }
 
 .project-repo-buttons {

app/helpers/application_settings_helper.rb

@@ -30,9 +30,9 @@ module ApplicationSettingsHelper
   def enabled_project_button(project, protocol)
     case protocol
     when 'ssh'
-      ssh_clone_button(project, 'bottom', append_link: false)
+      ssh_clone_button(project, append_link: false)
     else
-      http_clone_button(project, 'bottom', append_link: false)
+      http_clone_button(project, append_link: false)
     end
   end
 

app/helpers/button_helper.rb

@@ -56,42 +56,36 @@ module ButtonHelper
     end
   end
 
-  def http_clone_button(project, placement = 'right', append_link: true)
-    klass = 'http-selector'
-    klass << ' has-tooltip' if current_user.try(:require_extra_setup_for_git_auth?)
-
+  def http_clone_button(project, append_link: true)
     protocol = gitlab_config.protocol.upcase
+    dropdown_description = http_dropdown_description(protocol)
+    append_url = project.http_url_to_repo if append_link
+
+    dropdown_item_with_description(protocol, dropdown_description, href: append_url)
+  end
 
-    tooltip_title =
+  def http_dropdown_description(protocol)
     if current_user.try(:require_password_creation_for_git?)
       _("Set a password on your account to pull or push via %{protocol}.") % { protocol: protocol }
     else
       _("Create a personal access token on your account to pull or push via %{protocol}.") % { protocol: protocol }
     end
+  end
 
-    content_tag (append_link ? :a : :span), protocol,
-      class: klass,
-      href: (project.http_url_to_repo if append_link),
-      data: {
-        html: true,
-        placement: placement,
-        container: 'body',
-        title: tooltip_title
-      }
+  def ssh_clone_button(project, append_link: true)
+    dropdown_description = _("You won't be able to pull or push project code via SSH until you add an SSH key to your profile") if current_user.try(:require_ssh_key?)
+    append_url = project.ssh_url_to_repo if append_link
+
+    dropdown_item_with_description('SSH', dropdown_description, href: append_url)
   end
 
-  def ssh_clone_button(project, placement = 'right', append_link: true)
-    klass = 'ssh-selector'
-    klass << ' has-tooltip' if current_user.try(:require_ssh_key?)
+  def dropdown_item_with_description(title, description, href: nil)
+    button_content = content_tag(:strong, title, class: 'dropdown-menu-inner-title')
+    button_content << content_tag(:span, description, class: 'dropdown-menu-inner-content') if description
 
-    content_tag (append_link ? :a : :span), 'SSH',
-      class: klass,
-      href: (project.ssh_url_to_repo if append_link),
-      data: {
-        html: true,
-        placement: placement,
-        container: 'body',
-        title: _('Add an SSH key to your profile to pull or push via SSH.')
-      }
+    content_tag (href ? :a : :span),
+      button_content,
+      class: "#{title.downcase}-selector",
+      href: (href if href)
   end
 end

app/views/shared/_clone_panel.html.haml

@@ -7,7 +7,7 @@
         %span
           = enabled_project_button(project, enabled_protocol)
     - else
-      %a#clone-dropdown.clone-dropdown-btn.btn{ href: '#', data: { toggle: 'dropdown' } }
+      %a#clone-dropdown.btn.clone-dropdown-btn{ href: '#', data: { toggle: 'dropdown' } }
         %span
           = default_clone_protocol.upcase
         = icon('caret-down')

changelogs/unreleased/39455-clone-dropdown-should-not-have-a-tooltip.yml

+---
+title: Removed tooltip from clone dropdown
+merge_request: 15334
+author:
+type: other

spec/helpers/button_helper_spec.rb

@@ -26,9 +26,10 @@ describe ButtonHelper do
       context 'when user has password automatically set' do
         let(:user) { create(:user, password_automatically_set: true) }
 
-        it 'shows a password tooltip' do
-          expect(element.attr('class')).to include(has_tooltip_class)
-          expect(element.attr('data-title')).to eq('Set a password on your account to pull or push via HTTP.')
+        it 'shows the password text on the dropdown' do
+          description = element.search('.dropdown-menu-inner-content').first
+
+          expect(description.inner_text).to eq 'Set a password on your account to pull or push via HTTP.'
         end
       end
     end
@@ -39,17 +40,10 @@ describe ButtonHelper do
       end
 
       context 'when user has no personal access tokens' do
-        it 'has a personal access token tooltip ' do
-          expect(element.attr('class')).to include(has_tooltip_class)
-          expect(element.attr('data-title')).to eq('Create a personal access token on your account to pull or push via HTTP.')
-        end
-      end
-
-      context 'when user has a personal access token' do
-        it 'shows no tooltip' do
-          create(:personal_access_token, user: user)
+        it 'has a personal access token text on the dropdown description ' do
+          description = element.search('.dropdown-menu-inner-content').first
 
-          expect(element.attr('class')).not_to include(has_tooltip_class)
+          expect(description.inner_text).to eq 'Create a personal access token on your account to pull or push via HTTP.'
         end
       end
     end
@@ -63,6 +57,41 @@ describe ButtonHelper do
     end
   end
 
+  describe 'ssh_button' do
+    let(:user) { create(:user) }
+    let(:project) { build_stubbed(:project) }
+
+    def element
+      element = helper.ssh_clone_button(project)
+
+      Nokogiri::HTML::DocumentFragment.parse(element).first_element_child
+    end
+
+    before do
+      allow(helper).to receive(:current_user).and_return(user)
+    end
+
+    context 'without an ssh key on the user' do
+      it 'shows a warning on the dropdown description' do
+        description = element.search('.dropdown-menu-inner-content').first
+
+        expect(description.inner_text).to eq "You won't be able to pull or push project code via SSH until you add an SSH key to your profile"
+      end
+    end
+
+    context 'with an ssh key on the user' do
+      before do
+        create(:key, user: user)
+      end
+
+      it 'there is no warning on the dropdown description' do
+        description = element.search('.dropdown-menu-inner-content').first
+
+        expect(description).to eq nil
+      end
+    end
+  end
+
   describe 'clipboard_button' do
     let(:user) { create(:user) }
     let(:project) { build_stubbed(:project) }