Merge branch 'top-navigation-concept' into 'master'

Implement top navigation for profile area

Main idea is to keep left sidebar static so user is not confused by
changing context. Instead we put changing navigation with changing
content in one main block. I used profile area as a simplest way to 
implement and test this concept. Your feedback is welcome in comments

For https://gitlab.com/gitlab-org/gitlab-ce/issues/14354#note_4878536


Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

See merge request !3824

app/helpers/page_layout_helper.rb

@@ -84,6 +84,14 @@ module PageLayoutHelper
     end
   end
 
+  def nav(name = nil)
+    if name
+      @nav = name
+    else
+      @nav
+    end
+  end
+
   def fluid_layout(enabled = false)
     if @fluid_layout.nil?
       @fluid_layout = (current_user && current_user.layout == "fluid") || enabled

app/helpers/tab_helper.rb

@@ -110,4 +110,12 @@ module TabHelper
       'active'
     end
   end
+
+  def profile_tab_class
+    if controller.controller_path =~ /\Aprofiles/
+      return 'active'
+    end
+
+    'active' if current_controller?('oauth/applications')
+  end
 end

app/views/doorkeeper/applications/index.html.haml

@@ -1,5 +1,4 @@
 - page_title "Applications"
-- header_title page_title, applications_profile_path
 
 .row.prepend-top-default
   .col-lg-3.profile-settings-sidebar

app/views/layouts/_page.html.haml

@@ -25,6 +25,10 @@
   .content-wrapper
     = render "layouts/flash"
     = yield :flash_message
+    - if defined?(nav) && nav
+      .layout-nav
+        %div{ class: container_class }
+          = render "layouts/nav/#{nav}"
     %div{ class: (container_class unless @no_container) }
       .content
         .clearfix

app/views/layouts/application.html.haml

@@ -6,6 +6,6 @@
     = yield :scripts_body_top
 
     = render "layouts/header/default", title: header_title
-    = render 'layouts/page', sidebar: sidebar
+    = render 'layouts/page', sidebar: sidebar, nav: nav
 
     = yield :scripts_body

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

@@ -48,8 +48,7 @@
       %span
         Help
 
-  %li.separate-item
-  = nav_link(controller: :profile) do
+  = nav_link(html_options: {class: profile_tab_class}) do
     = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do
       = icon('user fw')
       %span

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

@@ -1,17 +1,9 @@
-%ul.nav.nav-sidebar
-  = nav_link do
-    = link_to root_path, title: 'Go to dashboard', class: 'back-link' do
-      = icon('caret-square-o-left fw')
-      %span
-        Go to dashboard
-
-  %li.separate-item
-
+%ul.nav-links
   = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
     = link_to profile_path, title: 'Profile Settings' do
       = icon('user fw')
       %span
-        Profile Settings
+        Profile
   = nav_link(controller: [:accounts, :two_factor_auths]) do
     = link_to profile_account_path, title: 'Account' do
       = icon('gear fw')
@@ -27,7 +19,6 @@
       = icon('envelope-o fw')
       %span
         Emails
-        %span.count= number_with_delimiter(current_user.emails.count + 1)
   - unless current_user.ldap_user?
     = nav_link(controller: :passwords) do
       = link_to edit_profile_password_path, title: 'Password' do
@@ -45,7 +36,6 @@
       = icon('key fw')
       %span
         SSH Keys
-        %span.count= number_with_delimiter(current_user.keys.count)
   = nav_link(controller: :preferences) do
     = link_to profile_preferences_path, title: 'Preferences' do
       -# TODO (rspeicher): Better icon?

app/views/layouts/profile.html.haml

@@ -1,5 +1,6 @@
 - page_title    "Profile Settings"
 - header_title  "Profile Settings", profile_path unless header_title
-- sidebar       "profile"
+- sidebar       "dashboard"
+- nav           "profile"
 
 = render template: "layouts/application"

app/views/profiles/accounts/show.html.haml

@@ -1,5 +1,4 @@
 - page_title "Account"
-- header_title page_title, profile_account_path
 
 - if current_user.ldap_user?
   .alert.alert-info

app/views/profiles/audit_log.html.haml

@@ -1,5 +1,4 @@
 - page_title "Audit Log"
-- header_title page_title, audit_log_profile_path
 
 .row.prepend-top-default
   .col-lg-3.profile-settings-sidebar

app/views/profiles/emails/index.html.haml

@@ -1,5 +1,4 @@
 - page_title "Emails"
-- header_title page_title, profile_emails_path
 
 .row.prepend-top-default
   .col-lg-3.profile-settings-sidebar

app/views/profiles/keys/index.html.haml

@@ -1,5 +1,4 @@
 - page_title "SSH Keys"
-- header_title page_title, profile_keys_path
 
 .row.prepend-top-default
   .col-lg-3.profile-settings-sidebar

app/views/profiles/notifications/show.html.haml

@@ -1,5 +1,4 @@
 - page_title "Notifications"
-- header_title page_title, profile_notifications_path
 
 %div
   - if @user.errors.any?

app/views/profiles/passwords/edit.html.haml

@@ -1,5 +1,4 @@
 - page_title "Password"
-- header_title page_title, edit_profile_password_path
 
 .row.prepend-top-default
   .col-lg-3.profile-settings-sidebar

app/views/profiles/preferences/show.html.haml

@@ -1,5 +1,4 @@
 - page_title 'Preferences'
-- header_title page_title, profile_preferences_path
 
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: {class: 'row prepend-top-default js-preferences-form'} do |f|
   .col-lg-3.profile-settings-sidebar

features/steps/profile/active_tab.rb

@@ -22,4 +22,8 @@ class Spinach::Features::ProfileActiveTab < Spinach::FeatureSteps
   step 'the active main tab should be Audit Log' do
     ensure_active_main_tab('Audit Log')
   end
+
+  def ensure_active_main_tab(content)
+    expect(find('.layout-nav li.active')).to have_content(content)
+  end
 end