Add styles for branch & tags boxes

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

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 {

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)

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

app/views/projects/commit/_limit_exceeded_message.html.haml

+.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"

app/views/projects/commit/branches.html.haml

 - 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)

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