Add styles for branch & tags boxes

- Create a partial for limit exceeded message
- Modifies specs to adjust new scenarios

6 files changed, 55 insertions, 23 deletions

diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index 5f9756bf58a..556485c2f3b 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -52,6 +52,47 @@
   .label.label-gray {
     background-color: $well-expand-item;
   }
+
+  .limit-box-branch {
+    width: 160px;
+  }
+
+  .limit-box-tag {
+    width: 125px;
+  }
+
+  .branches {
+    display: inline;
+  }
+
+  .limit-box {
+    background: $blue-100;
+    border-radius: 3px;
+    display: inline-block;
+    margin-left: 5px;
+    padding: 1px 1px 0.5px 0;
+    text-align: center;
+    vertical-align: bottom;
+
+    &:hover {
+      background: $blue-200;
+    }
+
+    .limit-icon {
+      float: left;
+      width: 15%;
+    }
+
+    .limit-message {
+      background: $white-light;
+      border-radius: 0 3px 3px 0;
+      font-family: $regular_font;
+      font-size: 12px;
+      float: right;
+      margin-top: 1px;
+      width: 85%;
+    }
+  }
 }
 
 .light-well {
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index 2ba84e55fe0..95fc50a476a 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -81,18 +81,6 @@ module CommitsHelper
     end
   end
 
-  def branches_unavailable_message
-    link_to('#', class: 'label label-gray ref-name', title: 'Project has too many branches to search') do
-      icon('tag') + ' Branches unavailable'
-    end
-  end
-
-  def tags_unavailable_message
-    link_to('#', class: 'label label-gray ref-name', title: 'Project has too many tags to search') do
-      icon('tag') + ' Tags unavailable'
-    end
-  end
-
   # Returns the sorted links to tags, separated by a comma
   def commit_tags_links(project, tags)
     sorted = VersionSorter.rsort(tags)
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 09bcd187e59..cd93886bb24 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -61,7 +61,7 @@
     %span.cgray= n_('parent', 'parents', @commit.parents.count)
     - @commit.parents.each do |parent|
       = link_to parent.short_id, project_commit_path(@project, parent), class: "commit-sha"
-    %span.commit-info.branches
+    %div.commit-info.branches
       %i.fa.fa-spinner.fa-spin
 
   - if @commit.last_pipeline
diff --git a/app/views/projects/commit/_limit_exceeded_message.html.haml b/app/views/projects/commit/_limit_exceeded_message.html.haml
new file mode 100644
index 00000000000..b3372108321
--- /dev/null
+++ b/app/views/projects/commit/_limit_exceeded_message.html.haml
@@ -0,0 +1,8 @@
+.has-tooltip{class: "limit-box limit-box-#{objects.singularize}", data: { title: "Project has too many #{objects} to search"} }
+  .limit-icon
+    - if objects == "branches"
+      = icon('code-fork')
+    - else
+      = icon('tag')
+  .limit-message
+    %span= "#{objects.capitalize} unavailable"
diff --git a/app/views/projects/commit/branches.html.haml b/app/views/projects/commit/branches.html.haml
index 8c7a303adbf..d282eb47914 100644
--- a/app/views/projects/commit/branches.html.haml
+++ b/app/views/projects/commit/branches.html.haml
@@ -1,12 +1,9 @@
 - if @branches_limit_exceeded
-  = branches_unavailable_message
+  = render 'limit_exceeded_message', objects: 'branches'
 - elsif @branches.any?
-  - branch = commit_default_branch(@project, @branches)
-  = commit_branch_link(project_ref_path(@project, branch), branch)
+  = commit_branches_links(@project, @branches)
 
--# `commit_default_branch` deletes the default branch from `@branches`,
-  -# so only render this if we have more branches or tags left
 - if @tags_limit_exceeded
-  = tags_unavailable_message
+  = render 'limit_exceeded_message', objects: 'tags'
 - elsif @tags.any?
   = commit_tags_links(@project, @tags)
diff --git a/spec/views/projects/commit/branches.html.haml_spec.rb b/spec/views/projects/commit/branches.html.haml_spec.rb
index 4199d2fd962..c9112ede334 100644
--- a/spec/views/projects/commit/branches.html.haml_spec.rb
+++ b/spec/views/projects/commit/branches.html.haml_spec.rb
@@ -18,7 +18,6 @@ describe 'projects/commit/branches.html.haml' do
     end
 
     it 'shows branch and tag links' do
-      expect(rendered).to have_selector('.js-details-expand')
       expect(rendered).to have_link('master')
       expect(rendered).to have_link('test-branch')
       expect(rendered).to have_link('tag1')
@@ -36,9 +35,8 @@ describe 'projects/commit/branches.html.haml' do
     end
 
     it 'shows too many to search' do
-      expect(rendered).to have_selector('.js-details-expand')
-      expect(rendered).to have_link('Too many branches to search', href: '#')
-      expect(rendered).to have_link('Too many tags to search', href: '#')
+      expect(rendered).to have_text('Branches unavailable')
+      expect(rendered).to have_text('Tags unavailable')
     end
   end
 end