Add top level items to fly-out navigation

This only appears when in the collapsed sidebar. If the sidebar is expanded, then these items are hidden & no fly-out navigation is displayed.

Closes #36294

5 files changed, 33 insertions, 9 deletions

diff --git a/spec/features/admin/admin_active_tab_spec.rb b/spec/features/admin/admin_active_tab_spec.rb
index 5ff791fc36a..1215908f5ea 100644
--- a/spec/features/admin/admin_active_tab_spec.rb
+++ b/spec/features/admin/admin_active_tab_spec.rb
@@ -14,8 +14,8 @@ RSpec.describe 'admin active tab' do
 
   shared_examples 'page has active sub tab' do |title|
     it "activates #{title} sub tab" do
-      expect(page).to have_selector('.sidebar-sub-level-items li.active', count: 1)
-      expect(page.find('.sidebar-sub-level-items li.active')).to have_content(title)
+      expect(page).to have_selector('.sidebar-sub-level-items > li.active', count: 2)
+      expect(page.all('.sidebar-sub-level-items > li.active')[1]).to have_content(title)
     end
   end
 
diff --git a/spec/features/admin/admin_settings_spec.rb b/spec/features/admin/admin_settings_spec.rb
index 563818e8761..c490dce7ab0 100644
--- a/spec/features/admin/admin_settings_spec.rb
+++ b/spec/features/admin/admin_settings_spec.rb
@@ -48,7 +48,7 @@ feature 'Admin updates settings' do
   end
 
   scenario 'Change Slack Notifications Service template settings' do
-    click_link 'Service Templates'
+    first(:link, 'Service Templates').click
     click_link 'Slack notifications'
     fill_in 'Webhook', with: 'http://localhost'
     fill_in 'Username', with: 'test_user'
diff --git a/spec/features/groups/members/request_access_spec.rb b/spec/features/groups/members/request_access_spec.rb
index 1f3c7fd3859..10389a74703 100644
--- a/spec/features/groups/members/request_access_spec.rb
+++ b/spec/features/groups/members/request_access_spec.rb
@@ -51,7 +51,7 @@ feature 'Groups > Members > Request access' do
 
     expect(group.requesters.exists?(user_id: user)).to be_truthy
 
-    click_link 'Members'
+    first(:link, 'Members').click
 
     page.within('.content') do
       expect(page).not_to have_content(user.name)
diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js
index 4588bf3d971..f8b37c0edde 100644
--- a/spec/javascripts/fly_out_nav_spec.js
+++ b/spec/javascripts/fly_out_nav_spec.js
@@ -34,6 +34,8 @@ describe('Fly out sidebar navigation', () => {
     document.body.innerHTML = '';
     breakpointSize = 'lg';
     mousePos.length = 0;
+
+    setSidebar(null);
   });
 
   describe('calculateTop', () => {
@@ -242,6 +244,32 @@ describe('Fly out sidebar navigation', () => {
       ).toBe('block');
     });
 
+    it('shows collapsed only sub-items if icon only sidebar', () => {
+      const subItems = el.querySelector('.sidebar-sub-level-items');
+      const sidebar = document.createElement('div');
+      sidebar.classList.add('sidebar-icons-only');
+      subItems.classList.add('is-fly-out-only');
+
+      setSidebar(sidebar);
+
+      showSubLevelItems(el);
+
+      expect(
+        el.querySelector('.sidebar-sub-level-items').style.display,
+      ).toBe('block');
+    });
+
+    it('does not show collapsed only sub-items if icon only sidebar', () => {
+      const subItems = el.querySelector('.sidebar-sub-level-items');
+      subItems.classList.add('is-fly-out-only');
+
+      showSubLevelItems(el);
+
+      expect(
+        subItems.style.display,
+      ).not.toBe('block');
+    });
+
     it('sets transform of sub-items', () => {
       const subItems = el.querySelector('.sidebar-sub-level-items');
       showSubLevelItems(el);
@@ -283,10 +311,6 @@ describe('Fly out sidebar navigation', () => {
   });
 
   describe('canShowActiveSubItems', () => {
-    afterEach(() => {
-      setSidebar(null);
-    });
-
     it('returns true by default', () => {
       expect(
         canShowActiveSubItems(el),
diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index 0c8c4d2cea6..60a452f2223 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -118,7 +118,7 @@ describe('Issue', function() {
 
         this.$triggeredButton = $btn;
 
-        this.$projectIssuesCounter = $('.issue_counter');
+        this.$projectIssuesCounter = $('.issue_counter').first();
         this.$projectIssuesCounter.text('1,001');
 
         this.issueStateDeferred = new jQuery.Deferred();