Implement new active state for project sidebar context menu

In this commit we're changing the behavior of the scope or
context menu. Before, this menu only allowed us to click
on it and it'd redirect as to the `Project overview` submenu
in an active state.

That is going to change and, when we click the overview menu
it will change its state to active instead of the `Project
overview`.

app/views/shared/nav/_scope_menu.html.haml

-.context-header
-  = link_to scope_menu.link, **scope_menu.container_html_options do
-    %span.avatar-container.rect-avatar.s40.project-avatar
-      = source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s40 avatar-tile', width: 40, height: 40)
-    %span.sidebar-context-title
-      = scope_menu.title
+- if sidebar_refactor_enabled?
+  = nav_link(**scope_menu.active_routes, html_options: scope_menu.nav_link_html_options) do
+    = render 'shared/nav/scope_menu_body', scope_menu: scope_menu
+- else
+  .context-header
+    = render 'shared/nav/scope_menu_body', scope_menu: scope_menu

app/views/shared/nav/_scope_menu_body.html.haml

+= link_to scope_menu.link, **scope_menu.container_html_options do
+  %span.avatar-container.rect-avatar.s40.project-avatar
+    = source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s40 avatar-tile', width: 40, height: 40)
+  %span.sidebar-context-title
+    = scope_menu.title

app/views/shared/nav/_sidebar.html.haml

 %aside.nav-sidebar{ class: ('sidebar-collapsed-desktop' if collapsed_sidebar?), **sidebar_tracking_attributes_by_object(sidebar.container), 'aria-label': sidebar.aria_label }
   .nav-sidebar-inner-scroll
-    - if sidebar.scope_menu
+    - if sidebar.scope_menu && sidebar_refactor_disabled?
       = render partial: 'shared/nav/scope_menu', object: sidebar.scope_menu
     - elsif sidebar.render_raw_scope_menu_partial
       = render sidebar.render_raw_scope_menu_partial
 
     %ul.sidebar-top-level-items.qa-project-sidebar
+      - if sidebar.scope_menu && sidebar_refactor_enabled?
+        = render partial: 'shared/nav/scope_menu', object: sidebar.scope_menu
       - if sidebar.renderable_menus.any?
         = render partial: 'shared/nav/sidebar_menu', collection: sidebar.renderable_menus
       - if sidebar.render_raw_menus_partial

ee/spec/features/projects/navbar_spec.rb

@@ -16,6 +16,10 @@ RSpec.describe 'Project navbar' do
   end
 
   context 'when sidebar refactor feature flag is disabled' do
+    let(:project_context_nav_item) do
+      nil
+    end
+
     before do
       stub_feature_flags(sidebar_refactor: false)
       insert_package_nav(_('Operations'))

lib/sidebars/projects/menus/project_information_menu.rb

@@ -17,14 +17,16 @@ module Sidebars
 
         override :link
         def link
-          project_path(context.project)
+          renderable_items.first.link
         end
 
         override :extra_container_html_options
         def extra_container_html_options
-          {
-            class: 'shortcuts-project rspec-project-link'
-          }
+          if Feature.enabled?(:sidebar_refactor, context.current_user, default_enabled: :yaml)
+            { class: 'shortcuts-project-information' }
+          else
+            { class: 'shortcuts-project rspec-project-link' }
+          end
         end
 
         override :nav_link_html_options
@@ -50,13 +52,6 @@ module Sidebars
           end
         end
 
-        override :active_routes
-        def active_routes
-          return {} if Feature.disabled?(:sidebar_refactor, context.current_user, default_enabled: :yaml)
-
-          { path: 'projects#show' }
-        end
-
         private
 
         def details_menu_item

lib/sidebars/projects/menus/scope_menu.rb

@@ -13,6 +13,27 @@ module Sidebars
         def title
           context.project.name
         end
+
+        override :active_routes
+        def active_routes
+          { path: 'projects#show' }
+        end
+
+        override :extra_container_html_options
+        def extra_container_html_options
+          return {} if Feature.disabled?(:sidebar_refactor, context.current_user, default_enabled: :yaml)
+
+          {
+            class: 'shortcuts-project rspec-project-link'
+          }
+        end
+
+        override :nav_link_html_options
+        def nav_link_html_options
+          return {} if Feature.disabled?(:sidebar_refactor, context.current_user, default_enabled: :yaml)
+
+          { class: 'context-header' }
+        end
       end
     end
   end

spec/features/contextual_sidebar_spec.rb

@@ -3,17 +3,17 @@
 require 'spec_helper'
 
 RSpec.describe 'Contextual sidebar', :js do
-  let(:user) { create(:user) }
-  let(:project) { create(:project) }
+  let_it_be(:project) { create(:project) }
+
+  let(:user) { project.owner }
 
   before do
-    project.add_maintainer(user)
     sign_in(user)
 
     visit project_path(project)
   end
 
-  it 'shows flyout navs when collapsed or expanded apart from on the active item when expanded' do
+  it 'shows flyout navs when collapsed or expanded apart from on the active item when expanded', :aggregate_failures do
     expect(page).not_to have_selector('.js-sidebar-collapsed')
 
     find('.rspec-link-pipelines').hover

spec/features/projects/active_tabs_spec.rb

@@ -18,12 +18,11 @@ RSpec.describe 'Project active tab' do
   end
 
   context 'on project Home' do
-    context 'when feature flag :sidebar_refactor is enabled' do
-      before do
-        visit project_path(project)
-      end
+    it 'activates Project scope menu' do
+      visit project_path(project)
 
-      it_behaves_like 'page has active tab', 'Project'
+      expect(page).to have_selector('.sidebar-top-level-items > li.active', count: 1)
+      expect(find('.sidebar-top-level-items > li.active')).to have_content(project.name)
     end
 
     context 'when feature flag :sidebar_refactor is disabled' do
@@ -36,11 +35,23 @@ RSpec.describe 'Project active tab' do
       it_behaves_like 'page has active tab', 'Project'
       it_behaves_like 'page has active sub tab', 'Details'
     end
+  end
 
-    context 'on project Home/Activity' do
+  context 'on Project information' do
+    context 'default link' do
       before do
         visit project_path(project)
-        click_tab('Activity')
+
+        click_link('Project information', match: :first)
+      end
+
+      it_behaves_like 'page has active tab', 'Project'
+      it_behaves_like 'page has active sub tab', 'Activity'
+    end
+
+    context 'on Project information/Activity' do
+      before do
+        visit activity_project_path(project)
       end
 
       it_behaves_like 'page has active tab', 'Project'

spec/features/projects/members/user_requests_access_spec.rb

@@ -3,8 +3,9 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Members > User requests access', :js do
-  let(:user) { create(:user) }
-  let(:project) { create(:project, :public, :repository) }
+  let_it_be(:user) { create(:user) }
+  let_it_be(:project) { create(:project, :public, :repository) }
+
   let(:maintainer) { project.owner }
 
   before do
@@ -47,6 +48,8 @@ RSpec.describe 'Projects > Members > User requests access', :js do
 
     expect(project.requesters.exists?(user_id: user)).to be_truthy
 
+    click_link 'Project information'
+
     page.within('.nav-sidebar') do
       click_link('Members')
     end

spec/features/projects/navbar_spec.rb

@@ -17,6 +17,10 @@ RSpec.describe 'Project navbar' do
   end
 
   context 'when sidebar refactor feature flag is disabled' do
+    let(:project_context_nav_item) do
+      nil
+    end
+
     before do
       stub_feature_flags(sidebar_refactor: false)
       insert_package_nav(_('Operations'))

spec/features/projects/user_uses_shortcuts_spec.rb

@@ -3,11 +3,11 @@
 require 'spec_helper'
 
 RSpec.describe 'User uses shortcuts', :js do
-  let(:project) { create(:project, :repository) }
-  let(:user) { create(:user) }
+  let_it_be(:project) { create(:project, :repository) }
+
+  let(:user) { project.owner }
 
   before do
-    project.add_maintainer(user)
     sign_in(user)
 
     visit(project_path(project))
@@ -74,7 +74,7 @@ RSpec.describe 'User uses shortcuts', :js do
       find('body').native.send_key('g')
       find('body').native.send_key('p')
 
-      expect(page).to have_active_navigation('Project')
+      expect(page).to have_active_navigation(project.name)
     end
 
     context 'when feature flag :sidebar_refactor is disabled' do

spec/lib/sidebars/projects/menus/project_information_menu_spec.rb

@@ -8,6 +8,20 @@ RSpec.describe Sidebars::Projects::Menus::ProjectInformationMenu do
   let(:user) { project.owner }
   let(:context) { Sidebars::Projects::Context.new(current_user: user, container: project) }
 
+  describe '#container_html_options' do
+    subject { described_class.new(context).container_html_options }
+
+    specify { is_expected.to match(hash_including(class: 'shortcuts-project-information')) }
+
+    context 'when feature flag :sidebar_refactor is disabled' do
+      before do
+        stub_feature_flags(sidebar_refactor: false)
+      end
+
+      specify { is_expected.to match(hash_including(class: 'shortcuts-project rspec-project-link')) }
+    end
+  end
+
   describe 'Menu Items' do
     subject { described_class.new(context).renderable_items.index { |e| e.item_id == item_id } }
 

spec/lib/sidebars/projects/menus/scope_menu_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Sidebars::Projects::Menus::ScopeMenu do
+  let(:project) { build(:project) }
+  let(:user) { project.owner }
+  let(:context) { Sidebars::Projects::Context.new(current_user: user, container: project) }
+
+  describe '#container_html_options' do
+    subject { described_class.new(context).container_html_options }
+
+    specify { is_expected.to match(hash_including(class: 'shortcuts-project rspec-project-link')) }
+
+    context 'when feature flag :sidebar_refactor is disabled' do
+      before do
+        stub_feature_flags(sidebar_refactor: false)
+      end
+
+      specify { is_expected.to eq(aria: { label: project.name }) }
+    end
+  end
+end

spec/support/shared_contexts/navbar_structure_context.rb

@@ -71,8 +71,16 @@ RSpec.shared_context 'project navbar structure' do
     ]
   end
 
+  let(:project_context_nav_item) do
+    {
+      nav_item: "#{project.name[0, 1].upcase} #{project.name}",
+      nav_sub_items: []
+    }
+  end
+
   let(:structure) do
     [
+      project_context_nav_item,
       project_information_nav_item,
       {
         nav_item: _('Repository'),

spec/views/layouts/nav/sidebar/_project.html.haml_spec.rb

@@ -19,21 +19,32 @@ RSpec.describe 'layouts/nav/sidebar/_project' do
 
   it_behaves_like 'has nav sidebar'
 
-  describe 'Project information' do
+  describe 'Project context' do
     it 'has a link to the project path' do
       render
 
-      expect(rendered).to have_link('Project information', href: project_path(project), class: %w(shortcuts-project rspec-project-link))
+      expect(rendered).to have_link(project.name, href: project_path(project), class: %w(shortcuts-project rspec-project-link))
+      expect(rendered).to have_selector("[aria-label=\"#{project.name}\"]")
+    end
+  end
+
+  describe 'Project information' do
+    it 'has a link to the project activity path' do
+      render
+
+      expect(rendered).to have_link('Project information', href: activity_project_path(project), class: %w(shortcuts-project-information))
       expect(rendered).to have_selector('[aria-label="Project information"]')
     end
 
     context 'when feature flag :sidebar_refactor is disabled' do
-      it 'has a link to the project path' do
+      before do
         stub_feature_flags(sidebar_refactor: false)
+      end
 
+      it 'has a link to the project path' do
         render
 
-        expect(rendered).to have_link('Project overview', href: project_path(project), class: %w(shortcuts-project rspec-project-link))
+        expect(rendered).to have_link('Project overview', href: project_path(project), class: %w(shortcuts-project))
         expect(rendered).to have_selector('[aria-label="Project overview"]')
       end
     end
@@ -89,7 +100,7 @@ RSpec.describe 'layouts/nav/sidebar/_project' do
       it 'has a link to the labels path' do
         render
 
-        expect(page.at_css('.shortcuts-project').parent.css('[aria-label="Labels"]')).not_to be_empty
+        expect(page.at_css('.shortcuts-project-information').parent.css('[aria-label="Labels"]')).not_to be_empty
         expect(rendered).to have_link('Labels', href: project_labels_path(project))
       end
 
@@ -110,7 +121,7 @@ RSpec.describe 'layouts/nav/sidebar/_project' do
       it 'has a link to the members page' do
         render
 
-        expect(page.at_css('.shortcuts-project').parent.css('[aria-label="Members"]')).not_to be_empty
+        expect(page.at_css('.shortcuts-project-information').parent.css('[aria-label="Members"]')).not_to be_empty
         expect(rendered).to have_link('Members', href: project_project_members_path(project))
       end