Merge branch 'improve-nav-controls' into 'master'

Improve reuse of existing UI components

* Re-use top-are css component for issues/mr pages
* Add support for inline form in nav-controls component

cc @jschatz1 

See merge request !2722

13 files changed, 94 insertions, 107 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index e6c59f5a291..252a586358c 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -85,6 +85,10 @@
       display: inline-block;
     }
 
+    > form {
+      display: inline-block;
+    }
+
     input {
       height: 34px;
       display: inline-block;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 3bfbd9e17b7..e5026489167 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -29,17 +29,6 @@
   }
 }
 
-.project-issuable-filter {
-  .controls {
-    float: right;
-    margin-top: 11px;
-  }
-
-  .nav-links {
-    text-align: left;
-  }
-}
-
 .issuable-details {
   section {
     .issuable-discussion {
@@ -72,7 +61,7 @@
     @include clearfix;
     padding:  $gl-padding 0;
     border-bottom: 1px solid $border-gray-light;
-    // This prevents the mess when resizing the sidebar 
+    // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
     width: $gutter_inner_width;
     overflow-x: hidden;
@@ -206,7 +195,7 @@
   }
 
   &.right-sidebar-collapsed {
-    .issuable-count, 
+    .issuable-count,
     .issuable-nav,
     .assignee > *,
     .milestone > *,
@@ -243,4 +232,4 @@
       display: none;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/views/admin/builds/index.html.haml b/app/views/admin/builds/index.html.haml
index ebf2b7b60e7..5931efdefe6 100644
--- a/app/views/admin/builds/index.html.haml
+++ b/app/views/admin/builds/index.html.haml
@@ -1,9 +1,4 @@
-.project-issuable-filter
-  .controls
-    .pull-left.hidden-xs
-      - if @all_builds.running_or_pending.any?
-        = link_to 'Cancel all', cancel_all_admin_builds_path, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
-
+.top-area
   %ul.nav-links
     %li{class: ('active' if @scope.nil?)}
       = link_to admin_builds_path do
@@ -20,7 +15,11 @@
         Finished
         %span.badge.js-running-count= number_with_delimiter(@all_builds.finished.count(:id))
 
-.gray-content-block
+  .nav-controls
+    - if @all_builds.running_or_pending.any?
+      = link_to 'Cancel all', cancel_all_admin_builds_path, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
+
+.gray-content-block.second-block
   #{(@scope || 'running').capitalize} builds
 
 %ul.content-list
diff --git a/app/views/dashboard/issues.html.haml b/app/views/dashboard/issues.html.haml
index f363f035974..dfa5f80eef8 100644
--- a/app/views/dashboard/issues.html.haml
+++ b/app/views/dashboard/issues.html.haml
@@ -4,17 +4,15 @@
   - if current_user
     = auto_discovery_link_tag(:atom, issues_dashboard_url(format: :atom, private_token: current_user.private_token), title: "#{current_user.name} issues")
 
-.project-issuable-filter
-  .controls
-    .pull-left
-      - if current_user
-        .hidden-xs.pull-left
-          = link_to issues_dashboard_url(format: :atom, private_token: current_user.private_token), class: 'btn' do
-            %i.fa.fa-rss
-
+.top-area
+  = render 'shared/issuable/nav', type: :issues
+  .nav-controls
+    - if current_user
+      = link_to issues_dashboard_url(format: :atom, private_token: current_user.private_token), class: 'btn' do
+        = icon('rss')
     = render 'shared/new_project_item_select', path: 'issues/new', label: "New Issue"
 
-  = render 'shared/issuable/filter', type: :issues
+= render 'shared/issuable/filter', type: :issues
 
 .prepend-top-default
   = render 'shared/issues'
diff --git a/app/views/dashboard/merge_requests.html.haml b/app/views/dashboard/merge_requests.html.haml
index bbe4cc1f824..fb016599fef 100644
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@@ -1,11 +1,12 @@
 - page_title "Merge Requests"
 - header_title  "Merge Requests", merge_requests_dashboard_path(assignee_id: current_user.id)
 
-.project-issuable-filter
-  .controls
+.top-area
+  = render 'shared/issuable/nav', type: :merge_requests
+  .nav-controls
     = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New Merge Request"
 
-  = render 'shared/issuable/filter', type: :merge_requests
+= render 'shared/issuable/filter', type: :merge_requests
 
 .prepend-top-default
   = render 'shared/merge_requests'
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index 90ade1e1680..b0805593fdc 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -4,17 +4,15 @@
   - if current_user
     = auto_discovery_link_tag(:atom, issues_group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} issues")
 
-.project-issuable-filter
-  .controls
-    .pull-left
-      - if current_user
-        .hidden-xs.pull-left
-          = link_to issues_group_url(@group, format: :atom, private_token: current_user.private_token), class: 'btn' do
-            %i.fa.fa-rss
-
+.top-area
+  = render 'shared/issuable/nav', type: :issues
+  .nav-controls
+    - if current_user
+      = link_to issues_group_url(@group, format: :atom, private_token: current_user.private_token), class: 'btn' do
+        = icon('rss')
     = render 'shared/new_project_item_select', path: 'issues/new', label: "New Issue"
 
-  = render 'shared/issuable/filter', type: :issues
+= render 'shared/issuable/filter', type: :issues
 
 .gray-content-block.second-block
   Only issues from
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index f662f5a8c17..e1c9dd931ee 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/app/views/groups/merge_requests.html.haml
@@ -1,11 +1,12 @@
 - page_title "Merge Requests"
 - header_title group_title(@group, "Merge Requests", merge_requests_group_path(@group))
 
-.project-issuable-filter
-  .controls
+.top-area
+  = render 'shared/issuable/nav', type: :merge_requests
+  .nav-controls
     = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New Merge Request"
 
-  = render 'shared/issuable/filter', type: :merge_requests
+= render 'shared/issuable/filter', type: :merge_requests
 
 .gray-content-block.second-block
   Only merge requests from
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index d6260ab2900..fde9304c0f8 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -5,22 +5,19 @@
   - if current_user
     = auto_discovery_link_tag(:atom, namespace_project_issues_url(@project.namespace, @project, :atom, private_token: current_user.private_token), title: "#{@project.name} issues")
 
-.project-issuable-filter
-  .controls
-    .pull-left
-      - if current_user
-        .hidden-xs.pull-left
-          = link_to namespace_project_issues_path(@project.namespace, @project, :atom, { private_token: current_user.private_token }), class: 'btn append-right-10' do
-            %i.fa.fa-rss
-
+.top-area
+  = render 'shared/issuable/nav', type: :issues
+  .nav-controls
+    - if current_user
+      = link_to namespace_project_issues_path(@project.namespace, @project, :atom, { private_token: current_user.private_token }), class: 'btn append-right-10' do
+        = icon('rss')
       = render 'shared/issuable/search_form', path: namespace_project_issues_path(@project.namespace, @project)
-
     - if can? current_user, :create_issue, @project
-      = link_to new_namespace_project_issue_path(@project.namespace, @project, issue: { assignee_id: @issuable_finder.assignee.try(:id), milestone_id: @issuable_finder.milestones.try(:first).try(:id) }), class: "btn btn-new pull-left", title: "New Issue", id: "new_issue_link" do
-        %i.fa.fa-plus
+      = link_to new_namespace_project_issue_path(@project.namespace, @project, issue: { assignee_id: @issuable_finder.assignee.try(:id), milestone_id: @issuable_finder.milestones.try(:first).try(:id) }), class: "btn btn-new", title: "New Issue", id: "new_issue_link" do
+        = icon('plus')
         New Issue
 
-  = render 'shared/issuable/filter', type: :issues
+= render 'shared/issuable/filter', type: :issues
 
 .issues-holder
   = render "issues"
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 8d5d0394a82..e56a44e0a79 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -2,16 +2,19 @@
 = render "header_title"
 
 = render 'projects/last_push'
-.project-issuable-filter
-  .controls
+
+.top-area
+  = render 'shared/issuable/nav', type: :merge_requests
+  .nav-controls
     = render 'shared/issuable/search_form', path: namespace_project_merge_requests_path(@project.namespace, @project)
 
     - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
     - if merge_project
-      .pull-left.hidden-xs
-        = link_to new_namespace_project_merge_request_path(merge_project.namespace, merge_project), class: "btn btn-new", title: "New Merge Request" do
-          %i.fa.fa-plus
-          New Merge Request
-  = render 'shared/issuable/filter', type: :merge_requests
+      = link_to new_namespace_project_merge_request_path(merge_project.namespace, merge_project), class: "btn btn-new", title: "New Merge Request" do
+        = icon('plus')
+        New Merge Request
+
+= render 'shared/issuable/filter', type: :merge_requests
+
 .merge-requests-holder
   = render 'merge_requests'
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index 8d6f47b38ef..b7e350d27af 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -1,32 +1,5 @@
 .issues-filters
-  .issues-state-filters
-    %ul.nav-links
-      - if defined?(type) && type == :merge_requests
-        - page_context_word = 'merge requests'
-      - else
-        - page_context_word = 'issues'
-      %li{class: ("active" if params[:state] == 'opened')}
-        = link_to page_filter_path(state: 'opened'), title: "Filter by #{page_context_word} that are currently opened." do
-          #{state_filters_text_for(:opened, @project)}
-
-      - if defined?(type) && type == :merge_requests
-        %li{class: ("active" if params[:state] == 'merged')}
-          = link_to page_filter_path(state: 'merged'), title: 'Filter by merge requests that are currently merged.' do
-            #{state_filters_text_for(:merged, @project)}
-
-        %li{class: ("active" if params[:state] == 'closed')}
-          = link_to page_filter_path(state: 'closed'), title: 'Filter by merge requests that are currently closed and unmerged.' do
-            #{state_filters_text_for(:closed, @project)}
-      - else
-        %li{class: ("active" if params[:state] == 'closed')}
-          = link_to page_filter_path(state: 'closed'), title: 'Filter by issues that are currently closed.' do
-            #{state_filters_text_for(:closed, @project)}
-
-      %li{class: ("active" if params[:state] == 'all')}
-        = link_to page_filter_path(state: 'all'), title: "Show all #{page_context_word}." do
-          #{state_filters_text_for(:all, @project)}
-
-  .issues-details-filters.gray-content-block
+  .issues-details-filters.gray-content-block.second-block
     = form_tag page_filter_path(without: [:assignee_id, :author_id, :milestone_title, :label_name]), method: :get, class: 'filter-form' do
       - if controller.controller_name == 'issues' && can?(current_user, :admin_issue, @project)
         .check-all-holder
diff --git a/app/views/shared/issuable/_nav.html.haml b/app/views/shared/issuable/_nav.html.haml
new file mode 100644
index 00000000000..a6970b7eebb
--- /dev/null
+++ b/app/views/shared/issuable/_nav.html.haml
@@ -0,0 +1,25 @@
+%ul.nav-links.issues-state-filters
+  - if defined?(type) && type == :merge_requests
+    - page_context_word = 'merge requests'
+  - else
+    - page_context_word = 'issues'
+  %li{class: ("active" if params[:state] == 'opened')}
+    = link_to page_filter_path(state: 'opened'), title: "Filter by #{page_context_word} that are currently opened." do
+      #{state_filters_text_for(:opened, @project)}
+
+  - if defined?(type) && type == :merge_requests
+    %li{class: ("active" if params[:state] == 'merged')}
+      = link_to page_filter_path(state: 'merged'), title: 'Filter by merge requests that are currently merged.' do
+        #{state_filters_text_for(:merged, @project)}
+
+    %li{class: ("active" if params[:state] == 'closed')}
+      = link_to page_filter_path(state: 'closed'), title: 'Filter by merge requests that are currently closed and unmerged.' do
+        #{state_filters_text_for(:closed, @project)}
+  - else
+    %li{class: ("active" if params[:state] == 'closed')}
+      = link_to page_filter_path(state: 'closed'), title: 'Filter by issues that are currently closed.' do
+        #{state_filters_text_for(:closed, @project)}
+
+  %li{class: ("active" if params[:state] == 'all')}
+    = link_to page_filter_path(state: 'all'), title: "Show all #{page_context_word}." do
+      #{state_filters_text_for(:all, @project)}
diff --git a/app/views/shared/issuable/_search_form.html.haml b/app/views/shared/issuable/_search_form.html.haml
index 6672ea79629..afad48499b7 100644
--- a/app/views/shared/issuable/_search_form.html.haml
+++ b/app/views/shared/issuable/_search_form.html.haml
@@ -1,9 +1,8 @@
-= form_tag(path, method: :get, id: "issue_search_form", class: 'pull-left issue-search-form') do
-  .append-right-10.hidden-xs.hidden-sm
-    = search_field_tag :issue_search, params[:issue_search], { placeholder: 'Filter by name ...', class: 'form-control issue_search search-text-input', spellcheck: false }
-    = hidden_field_tag :state, params['state']
-    = hidden_field_tag :scope, params['scope']
-    = hidden_field_tag :assignee_id, params['assignee_id']
-    = hidden_field_tag :author_id, params['author_id']
-    = hidden_field_tag :milestone_id, params['milestone_id']
-    = hidden_field_tag :label_id, params['label_id']
+= form_tag(path, method: :get, id: "issue_search_form", class: 'issue-search-form') do
+  = search_field_tag :issue_search, params[:issue_search], { placeholder: 'Filter by name ...', class: 'form-control issue_search search-text-input input-short', spellcheck: false }
+  = hidden_field_tag :state, params['state']
+  = hidden_field_tag :scope, params['scope']
+  = hidden_field_tag :assignee_id, params['assignee_id']
+  = hidden_field_tag :author_id, params['author_id']
+  = hidden_field_tag :milestone_id, params['milestone_id']
+  = hidden_field_tag :label_id, params['label_id']
diff --git a/spec/features/admin/admin_builds_spec.rb b/spec/features/admin/admin_builds_spec.rb
index b955d0b0c46..2e9851fb442 100644
--- a/spec/features/admin/admin_builds_spec.rb
+++ b/spec/features/admin/admin_builds_spec.rb
@@ -18,7 +18,7 @@ describe 'Admin Builds' do
 
           visit admin_builds_path
 
-          expect(page).to have_selector('.project-issuable-filter li.active', text: 'All')
+          expect(page).to have_selector('.nav-links li.active', text: 'All')
           expect(page.all('.build-link').size).to eq(4)
           expect(page).to have_link 'Cancel all'
         end
@@ -28,7 +28,7 @@ describe 'Admin Builds' do
         it 'shows a message' do
           visit admin_builds_path
 
-          expect(page).to have_selector('.project-issuable-filter li.active', text: 'All')
+          expect(page).to have_selector('.nav-links li.active', text: 'All')
           expect(page).to have_content 'No builds to show'
           expect(page).not_to have_link 'Cancel all'
         end
@@ -44,7 +44,7 @@ describe 'Admin Builds' do
 
           visit admin_builds_path(scope: :running)
 
-          expect(page).to have_selector('.project-issuable-filter li.active', text: 'Running')
+          expect(page).to have_selector('.nav-links li.active', text: 'Running')
           expect(page.find('.build-link')).to have_content(build1.id)
           expect(page.find('.build-link')).not_to have_content(build2.id)
           expect(page.find('.build-link')).not_to have_content(build3.id)
@@ -58,7 +58,7 @@ describe 'Admin Builds' do
 
           visit admin_builds_path(scope: :running)
 
-          expect(page).to have_selector('.project-issuable-filter li.active', text: 'Running')
+          expect(page).to have_selector('.nav-links li.active', text: 'Running')
           expect(page).to have_content 'No builds to show'
           expect(page).not_to have_link 'Cancel all'
         end
@@ -74,7 +74,7 @@ describe 'Admin Builds' do
 
           visit admin_builds_path(scope: :finished)
 
-          expect(page).to have_selector('.project-issuable-filter li.active', text: 'Finished')
+          expect(page).to have_selector('.nav-links li.active', text: 'Finished')
           expect(page.find('.build-link')).not_to have_content(build1.id)
           expect(page.find('.build-link')).not_to have_content(build2.id)
           expect(page.find('.build-link')).to have_content(build3.id)
@@ -88,7 +88,7 @@ describe 'Admin Builds' do
 
           visit admin_builds_path(scope: :finished)
 
-          expect(page).to have_selector('.project-issuable-filter li.active', text: 'Finished')
+          expect(page).to have_selector('.nav-links li.active', text: 'Finished')
           expect(page).to have_content 'No builds to show'
           expect(page).to have_link 'Cancel all'
         end