Merge branch '18338-change-admin-navigation-to-match-new-ui' into 'master'

Resolve "Change admin navigation to match new UI"

## What does this MR do?
Moves admin navigation to layout nav to match Project, Groups, and Profile navigation

## Are there points in the code the reviewer needs to double check?

## Why was this MR needed?

## What are the relevant issue numbers?
Closes #18338

## Screenshots (if relevant)
![Screen_Shot_2016-06-14_at_10.26.40_AM](/uploads/f0b8c8b259da16d929be2b36e8eeafb8/Screen_Shot_2016-06-14_at_10.26.40_AM.png)
![Screen_Shot_2016-06-14_at_10.26.44_AM](/uploads/07d9ece2063dfcfec1f0f2647d8ee782/Screen_Shot_2016-06-14_at_10.26.44_AM.png)
## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- [ ] Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !4650

app/views/admin/background_jobs/_head.html.haml

+.nav-links.sub-nav
+  %ul{ class: (container_class) }
+    = nav_link(controller: :background_jobs) do
+      = link_to admin_background_jobs_path, title: 'Background Jobs' do
+        %span
+          Background Jobs
+    = nav_link(controller: :logs) do
+      = link_to admin_logs_path, title: 'Logs' do
+        %span
+          Logs
+    = nav_link(controller: :health_check) do
+      = link_to admin_health_check_path, title: 'Health Check' do
+        %span
+          Health Check

app/views/admin/background_jobs/show.html.haml

+- @no_container = true
 - page_title "Background Jobs"
-%h3.page-title Background Jobs
-%p.light GitLab uses #{link_to "sidekiq", "http://sidekiq.org/"} library for async job processing
+= render 'admin/background_jobs/head'
 
-%hr
+%div{ class: (container_class) }
+  %h3.page-title Background Jobs
+  %p.light GitLab uses #{link_to "sidekiq", "http://sidekiq.org/"} library for async job processing
 
-.panel.panel-default
+  %hr
+
+  .panel.panel-default
     .panel-heading Sidekiq running processes
     .panel-body
       - if @sidekiq_processes.empty?
@@ -42,5 +46,5 @@
 
 
 
-.panel.panel-default
+  .panel.panel-default
     %iframe{src: sidekiq_path, width: '100%', height: 970, style: "border: none"}

app/views/admin/builds/index.html.haml

-.top-area
+- @no_container = true
+= render "admin/dashboard/head"
+
+%div{ class: (container_class) }
+
+  .top-area
     %ul.nav-links
       %li{class: ('active' if @scope.nil?)}
         = link_to admin_builds_path do
@@ -19,10 +24,10 @@
       - 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
 
-.row-content-block.second-block
+  .row-content-block.second-block
     #{(@scope || 'all').capitalize} builds
 
-%ul.content-list
+  %ul.content-list
     - if @builds.blank?
       %li
         .nothing-here-block No builds to show

app/views/admin/dashboard/_head.html.haml

+.nav-links.sub-nav
+  %ul{ class: (container_class) }
+    = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
+      = link_to admin_root_path, title: 'Overview' do
+        %span
+          Overview
+    = nav_link(controller: [:admin, :projects]) do
+      = link_to admin_namespaces_projects_path, title: 'Projects' do
+        %span
+          Projects
+    = nav_link(controller: :users) do
+      = link_to admin_users_path, title: 'Users' do
+        %span
+          Users
+    = nav_link(controller: :groups) do
+      = link_to admin_groups_path, title: 'Groups' do
+        %span
+          Groups
+    = nav_link path: 'builds#index' do
+      = link_to admin_builds_path, title: 'Builds' do
+        %span
+          Builds

app/views/admin/dashboard/index.html.haml

-.admin-dashboard.prepend-top-default
+- @no_container = true
+= render "admin/dashboard/head"
+
+%div{ class: (container_class) }
+  .admin-dashboard.prepend-top-default
     .row
       .col-md-4
         %h4 Statistics

app/views/admin/groups/index.html.haml

+- @no_container = true
 - page_title "Groups"
-%h3.page-title
+= render "admin/dashboard/head"
+
+%div{ class: (container_class) }
+  %h3.page-title
     Groups (#{number_with_delimiter(@groups.total_count)})
 
-%p.light
+  %p.light
     Group allows you to keep projects organized.
     Use groups for uniting related projects.
 
-.top-area
+  .top-area
     .nav-search
       = form_tag admin_groups_path, method: :get, class: 'form-inline' do
         = hidden_field_tag :sort, @sort
@@ -34,8 +38,8 @@
               = sort_title_oldest_updated
       = link_to 'New Group', new_admin_group_path, class: "btn btn-new"
 
-%ul.content-list
+  %ul.content-list
     - @groups.each do |group|
       = render 'group', group: group
 
-= paginate @groups, theme: "gitlab"
+  = paginate @groups, theme: "gitlab"

app/views/admin/health_check/show.html.haml

+- @no_container = true
 - page_title "Health Check"
+= render 'admin/background_jobs/head'
 
-%h3.page-title
+%div{ class: (container_class) }
+  %h3.page-title
     Health Check
-.bs-callout.clearfix
+  .bs-callout.clearfix
     .pull-left
       %p
     Access token is
@@ -12,7 +15,7 @@
       data: { confirm: 'Are you sure you want to reset the health check token?' } do
       = icon('refresh')
       Reset health check access token
-%p.light
+  %p.light
     Health information can be retrieved as plain text, JSON, or XML using:
     %ul
       %li
@@ -22,7 +25,7 @@
       %li
         %code= health_check_url(token: current_application_settings.health_check_access_token, format: :xml)
 
-%p.light
+  %p.light
     You can also ask for the status of specific services:
     %ul
       %li
@@ -32,8 +35,8 @@
       %li
         %code= health_check_url(token: current_application_settings.health_check_access_token, checks: :migrations)
 
-%hr
-.panel.panel-default
+  %hr
+  .panel.panel-default
     .panel-heading
       Current Status:
       - if @errors.blank?

app/views/admin/logs/show.html.haml

+- @no_container = true
 - page_title "Logs"
 - loggers = [Gitlab::GitLogger, Gitlab::AppLogger,
              Gitlab::ProductionLogger, Gitlab::SidekiqLogger,
              Gitlab::RepositoryCheckLogger]
-%ul.nav-links.log-tabs
+= render 'admin/background_jobs/head'
+
+%div{ class: (container_class) }
+  %ul.nav-links.log-tabs
     - loggers.each do |klass|
       %li{ class: (klass == Gitlab::GitLogger ? 'active' : '') }
         = link_to klass::file_name, "##{klass::file_name_noext}",
             'data-toggle' => 'tab'
-.row-content-block
+  .row-content-block
     To prevent performance issues admin logs output the last 2000 lines
-.tab-content
+  .tab-content
     - loggers.each do |klass|
       .tab-pane{ class: (klass == Gitlab::GitLogger ? 'active' : ''),
           id: klass::file_name_noext }

app/views/admin/projects/index.html.haml

+- @no_container = true
 - page_title "Projects"
 = render 'shared/show_aside'
+= render "admin/dashboard/head"
 
-.row.prepend-top-default
+%div{ class: (container_class) }
+  .row.prepend-top-default
     %aside.col-md-3
       .panel.admin-filter
         = form_tag admin_namespaces_projects_path, method: :get, class: '' do

app/views/admin/users/index.html.haml

+- @no_container = true
 - page_title "Users"
 = render 'shared/show_aside'
+= render "admin/dashboard/head"
 
-.admin-filter
+%div{ class: (container_class) }
+  .admin-filter
     %ul.nav-links
       %li{class: "#{'active' unless params[:filter]}"}
         = link_to admin_users_path do
@@ -68,7 +71,7 @@
           %i.fa.fa-search
 
 
-.panel.panel-default
+  .panel.panel-default
     %ul.well-list
       - @users.each do |user|
         %li
@@ -104,4 +107,4 @@
                   = link_to 'Unlock', unlock_admin_user_path(user), method: :put, class: 'btn-grouped btn btn-xs btn-success', data: { confirm: 'Are you sure?' }
                 - if user.can_be_removed?
                   = link_to 'Destroy', [:admin, user], data: { confirm: "USER #{user.name} WILL BE REMOVED! All issues, merge requests and groups linked to this user will also be removed! Maybe block the user instead? Are you sure?" }, method: :delete, class: 'btn-grouped btn btn-xs btn-remove'
-= paginate @users, theme: "gitlab"
+  = paginate @users, theme: "gitlab"

app/views/layouts/admin.html.haml

 - page_title    "Admin Area"
 - header_title  "Admin Area", admin_root_path
-- sidebar       "admin"
+- nav           "admin"
 
 = render template: "layouts/application"

app/views/layouts/nav/_admin.html.haml

-%ul.nav.nav-sidebar
-  = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
-    = link_to admin_root_path, title: 'Overview' do
-      = icon('dashboard fw')
+%ul.nav-links.scrolling-tabs
+  .fade-left
+  = nav_link(controller: %w(dashboard admin projects users groups builds), html_options: {class: 'home'}) do
+    = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
       %span
         Overview
-  = nav_link(controller: [:admin, :projects]) do
-    = link_to admin_namespaces_projects_path, title: 'Projects' do
-      = icon('cube fw')
+  = nav_link(controller: %w(background_jobs logs health_check)) do
+    = link_to admin_background_jobs_path, title: 'Monitoring' do
       %span
-        Projects
-  = nav_link(controller: :users) do
-    = link_to admin_users_path, title: 'Users' do
-      = icon('user fw')
-      %span
-        Users
-  = nav_link(controller: :groups) do
-    = link_to admin_groups_path, title: 'Groups' do
-      = icon('group fw')
-      %span
-        Groups
+        Monitoring
   = nav_link(controller: :deploy_keys) do
     = link_to admin_deploy_keys_path, title: 'Deploy Keys' do
-      = icon('key fw')
       %span
         Deploy Keys
   = nav_link path: ['runners#index', 'runners#show'] do
     = link_to admin_runners_path, title: 'Runners' do
-      = icon('cog fw')
       %span
         Runners
-        %span.count= number_with_delimiter(Ci::Runner.count(:all))
-  = nav_link path: 'builds#index' do
-    = link_to admin_builds_path, title: 'Builds' do
-      = icon('link fw')
-      %span
-        Builds
-        %span.count= number_with_delimiter(Ci::Build.count(:all))
-  = nav_link(controller: :logs) do
-    = link_to admin_logs_path, title: 'Logs' do
-      = icon('file-text fw')
-      %span
-        Logs
-  = nav_link(controller: :health_check) do
-    = link_to admin_health_check_path, title: 'Health Check' do
-      = icon('medkit fw')
-      %span
-        Health Check
   = nav_link(controller: :broadcast_messages) do
     = link_to admin_broadcast_messages_path, title: 'Messages' do
-      = icon('bullhorn fw')
       %span
         Messages
   = nav_link(controller: :hooks) do
     = link_to admin_hooks_path, title: 'Hooks' do
-      = icon('external-link fw')
       %span
         Hooks
-  = nav_link(controller: :background_jobs) do
-    = link_to admin_background_jobs_path, title: 'Background Jobs' do
-      = icon('cog fw')
-      %span
-        Background Jobs
+
   = nav_link(controller: :appearances) do
     = link_to admin_appearances_path, title: 'Appearances' do
-      = icon('image')
       %span
         Appearance
 
   = nav_link(controller: :applications) do
     = link_to admin_applications_path, title: 'Applications' do
-      = icon('cloud fw')
       %span
         Applications
 
   = nav_link(controller: :services) do
     = link_to admin_application_settings_services_path, title: 'Service Templates' do
-      = icon('copy fw')
       %span
         Service Templates
 
   = nav_link(controller: :labels) do
     = link_to admin_labels_path, title: 'Labels' do
-      = icon('tags fw')
       %span
         Labels
 
   = nav_link(controller: :abuse_reports) do
     = link_to admin_abuse_reports_path, title: "Abuse Reports" do
-      = icon('exclamation-circle fw')
       %span
         Abuse Reports
-        %span.count= number_with_delimiter(AbuseReport.count(:all))
+        %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
 
   - if askimet_enabled?
     = nav_link(controller: :spam_logs) do
       = link_to admin_spam_logs_path, title: "Spam Logs" do
-        = icon('exclamation-triangle fw')
         %span
           Spam Logs
-          %span.count= number_with_delimiter(SpamLog.count(:all))
 
   = nav_link(controller: :application_settings, html_options: { class: 'separate-item'}) do
     = link_to admin_application_settings_path, title: 'Settings' do
-      = icon('cogs fw')
       %span
         Settings
+  .fade-right

features/admin/active_tab.feature

@@ -5,28 +5,36 @@ Feature: Admin Active Tab
 
   Scenario: On Admin Home
     Given I visit admin page
-    Then the active main tab should be Home
+    Then the active main tab should be Overview
     And no other main tabs should be active
 
   Scenario: On Admin Projects
     Given I visit admin projects page
-    Then the active main tab should be Projects
+    Then the active main tab should be Overview
+    And the active sub tab should be Projects
     And no other main tabs should be active
+    And no other sub tabs should be active
 
   Scenario: On Admin Groups
     Given I visit admin groups page
-    Then the active main tab should be Groups
+    Then the active main tab should be Overview
+    And the active sub tab should be Groups
     And no other main tabs should be active
+    And no other sub tabs should be active
 
   Scenario: On Admin Users
     Given I visit admin users page
-    Then the active main tab should be Users
+    Then the active main tab should be Overview
+    And the active sub tab should be Users
     And no other main tabs should be active
+    And no other sub tabs should be active
 
   Scenario: On Admin Logs
     Given I visit admin logs page
-    Then the active main tab should be Logs
+    Then the active main tab should be Monitoring
+    And the active sub tab should be Logs
     And no other main tabs should be active
+    And no other sub tabs should be active
 
   Scenario: On Admin Messages
     Given I visit admin messages page
@@ -40,5 +48,7 @@ Feature: Admin Active Tab
 
   Scenario: On Admin Resque
     Given I visit admin Resque page
-    Then the active main tab should be Resque
+    Then the active main tab should be Monitoring
+    And the active sub tab should be Resque
     And no other main tabs should be active
+    And no other sub tabs should be active

features/steps/admin/active_tab.rb

 class Spinach::Features::AdminActiveTab < Spinach::FeatureSteps
   include SharedAuthentication
   include SharedPaths
-  include SharedSidebarActiveTab
+  include SharedActiveTab
 
-  step 'the active main tab should be Home' do
+  step 'the active main tab should be Overview' do
     ensure_active_main_tab('Overview')
   end
 
-  step 'the active main tab should be Projects' do
-    ensure_active_main_tab('Projects')
+  step 'the active sub tab should be Projects' do
+    ensure_active_sub_tab('Projects')
   end
 
-  step 'the active main tab should be Groups' do
-    ensure_active_main_tab('Groups')
+  step 'the active sub tab should be Groups' do
+    ensure_active_sub_tab('Groups')
   end
 
-  step 'the active main tab should be Users' do
-    ensure_active_main_tab('Users')
-  end
-
-  step 'the active main tab should be Logs' do
-    ensure_active_main_tab('Logs')
+  step 'the active sub tab should be Users' do
+    ensure_active_sub_tab('Users')
   end
 
   step 'the active main tab should be Hooks' do
     ensure_active_main_tab('Hooks')
   end
 
-  step 'the active main tab should be Resque' do
-    ensure_active_main_tab('Background Jobs')
+  step 'the active main tab should be Monitoring' do
+    ensure_active_main_tab('Monitoring')
   end
 
-  step 'the active main tab should be Messages' do
-    ensure_active_main_tab('Messages')
+  step 'the active sub tab should be Resque' do
+    ensure_active_sub_tab('Background Jobs')
   end
 
-  step 'no other main tabs should be active' do
-    expect(page).to have_selector('.nav-sidebar > li.active', count: 1)
+  step 'the active sub tab should be Logs' do
+    ensure_active_sub_tab('Logs')
   end
 
-  def ensure_active_main_tab(content)
-    expect(find('.nav-sidebar > li.active')).to have_content(content)
+  step 'the active main tab should be Messages' do
+    ensure_active_main_tab('Messages')
   end
 end

spec/features/admin/admin_hooks_spec.rb

@@ -12,9 +12,11 @@ describe "Admin::Hooks", feature: true do
   describe "GET /admin/hooks" do
     it "should be ok" do
       visit admin_root_path
-      page.within ".sidebar-wrapper" do
+
+      page.within ".layout-nav" do
         click_on "Hooks"
       end
+
       expect(current_path).to eq(admin_hooks_path)
     end