Merge branch '322687-fj-new-project-active-state' into 'master'

Implement new active state for project sidebar context menu

See merge request gitlab-org/gitlab!61377

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