Merge branch '321904-enable-combined-menu-ff-by-default' into 'master'

Enable combined_menu ff by default

See merge request gitlab-org/gitlab!61816

app/assets/javascripts/nav/components/top_nav_app.vue

@@ -22,6 +22,8 @@ export default {
   <gl-nav class="navbar-sub-nav">
     <gl-nav-item-dropdown
       :text="navData.activeTitle"
+      data-qa-selector="navbar_dropdown"
+      :data-qa-title="navData.activeTitle"
       icon="hamburger"
       menu-class="gl-mt-3! gl-max-w-none! gl-max-h-none! gl-sm-w-auto! js-top-nav-dropdown-menu"
       toggle-class="top-nav-toggle js-top-nav-dropdown-toggle gl-px-3!"

app/assets/javascripts/nav/components/top_nav_dropdown_menu.vue

@@ -83,6 +83,7 @@ export default {
       :slot-key="activeView"
       class="gl-w-grid-size-40 gl-overflow-hidden gl-py-3 gl-px-5"
       data-testid="menu-subview"
+      data-qa-selector="menu_subview_container"
     >
       <template #projects>
         <top-nav-container-view

app/helpers/nav/top_nav_helper.rb

@@ -276,7 +276,7 @@ module Nav
       builder = ::Gitlab::Nav::TopNavMenuBuilder.new
       builder.add_primary_menu_item(id: 'your', title: _('Your groups'), href: dashboard_groups_path)
       builder.add_primary_menu_item(id: 'explore', title: _('Explore groups'), href: explore_groups_path)
-      builder.add_secondary_menu_item(id: 'create', title: _('Create group'), href: new_group_path(anchor: 'create-group-pane'))
+      builder.add_secondary_menu_item(id: 'create', title: _('Create group'), href: new_group_path)
       builder.build
     end
   end

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

@@ -4,7 +4,7 @@
 -# [1]: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/56587
 %ul.list-unstyled.navbar-sub-nav
   - if dashboard_nav_link?(:projects)
-    = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects qa-projects-dropdown", data: { track_label: "projects_dropdown", track_event: "click_dropdown", track_experiment: "new_repo" } }) do
+    = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects", data: { track_label: "projects_dropdown", track_event: "click_dropdown", track_experiment: "new_repo" } }) do
       %button{ type: 'button', data: { toggle: "dropdown" } }
         = _('Projects')
         = sprite_icon('chevron-down', css_class: 'caret-down')
@@ -12,7 +12,7 @@
         = render "layouts/nav/projects_dropdown/show"
 
   - if dashboard_nav_link?(:groups)
-    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { id: 'nav-groups-dropdown', class: "d-none d-md-block home dropdown header-groups qa-groups-dropdown", data: { track_label: "groups_dropdown", track_event: "click_dropdown" } }) do
+    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { id: 'nav-groups-dropdown', class: "d-none d-md-block home dropdown header-groups", data: { track_label: "groups_dropdown", track_event: "click_dropdown" } }) do
       %button{ type: 'button', data: { toggle: "dropdown" } }
         = _('Groups')
         = sprite_icon('chevron-down', css_class: 'caret-down')
@@ -21,28 +21,28 @@
 
   - if any_dashboard_nav_link?([:groups, :milestones, :activity, :snippets])
     = nav_link(html_options: { id: 'nav-more-dropdown', class: "header-more dropdown", data: { track_label: "more_dropdown", track_event: "click_more_link" } }) do
-      %a{ href: "#", data: { toggle: "dropdown", qa_selector: 'more_dropdown' } }
+      %a{ href: "#", data: { toggle: "dropdown" } }
         = _('More')
         = sprite_icon('chevron-down', css_class: 'caret-down')
       .dropdown-menu
         %ul
           - if dashboard_nav_link?(:groups)
             %li.d-md-none
-              = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups', data: { qa_selector: 'groups_link' } do
+              = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups' do
                 = _('Groups')
           - if dashboard_nav_link?(:activity)
             = nav_link(path: 'dashboard#activity') do
-              = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', data: { qa_selector: 'activity_link' } do
+              = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity' do
                 = _('Activity')
 
           - if dashboard_nav_link?(:milestones)
             = nav_link(controller: 'dashboard/milestones') do
-              = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones', data: { qa_selector: 'milestones_link' } do
+              = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones' do
                 = _('Milestones')
 
           - if dashboard_nav_link?(:snippets)
             = nav_link(controller: 'dashboard/snippets') do
-              = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', data: { qa_selector: 'snippets_link' } do
+              = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets' do
                 = _('Snippets')
 
           %li.dropdown
@@ -50,7 +50,7 @@
 
           - if current_user.admin?
             = nav_link(controller: 'admin/dashboard') do
-              = link_to admin_root_path, class: 'admin-icon qa-admin-area-link d-xl-none' do
+              = link_to admin_root_path, class: 'admin-icon d-xl-none' do
                 = _('Admin Area')
           - if Gitlab::CurrentSettings.admin_mode
             - if header_link?(:admin_mode)
@@ -68,7 +68,7 @@
 
   - if current_user.admin?
     = nav_link(controller: 'admin/dashboard', html_options: { class: "d-none d-xl-block"}) do
-      = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: _('Admin Area'), aria: { label: _('Admin Area') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+      = link_to admin_root_path, class: 'admin-icon', title: _('Admin Area'), aria: { label: _('Admin Area') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
         = sprite_icon('admin', size: 18)
 
   - if Gitlab::CurrentSettings.admin_mode

app/views/layouts/nav/groups_dropdown/_show.html.haml

@@ -4,19 +4,19 @@
 -# [1]: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/56587
 - group_meta = { id: @group.id, name: @group.name, namespace: @group.full_name, web_url: group_path(@group), avatar_url: @group.avatar_url } if @group&.persisted?
 .frequent-items-dropdown-container.with-deprecated-styles
-  .frequent-items-dropdown-sidebar.qa-groups-dropdown-sidebar
+  .frequent-items-dropdown-sidebar
     %ul
       = nav_link(path: 'dashboard/groups#index') do
-        = link_to dashboard_groups_path, class: 'qa-your-groups-link', data: { track_label: "groups_dropdown_your_groups", track_event: "click_link" } do
+        = link_to dashboard_groups_path, data: { track_label: "groups_dropdown_your_groups", track_event: "click_link" } do
           = _('Your groups')
       = nav_link(path: 'groups#explore') do
         = link_to explore_groups_path, data: { track_label: "groups_dropdown_explore_groups", track_event: "click_link" } do
           = _('Explore groups')
       = nav_link(path: 'groups/new#create-group-pane', html_options: { class: 'gl-border-0 gl-border-t-1 gl-border-solid gl-border-gray-100' }) do
-        = link_to new_group_path(anchor: 'create-group-pane'), data: { track_label: "groups_dropdown_create_group", track_event: "click_link", qa_selector: 'create_group_link' } do
+        = link_to new_group_path(anchor: 'create-group-pane'), data: { track_label: "groups_dropdown_create_group", track_event: "click_link" } do
           = _('Create group')
       = nav_link(path: 'groups/new#import-group-pane') do
-        = link_to new_group_path(anchor: 'import-group-pane'), data: { track_label: "groups_dropdown_import_group", track_event: "click_link", qa_selector: 'import_group_link' } do
+        = link_to new_group_path(anchor: 'import-group-pane'), data: { track_label: "groups_dropdown_import_group", track_event: "click_link" } do
           = _('Import group')
   .frequent-items-dropdown-content
     #js-groups-dropdown{ data: { user_name: current_user.username, group: group_meta } }

app/views/layouts/nav/projects_dropdown/_show.html.haml

@@ -4,10 +4,10 @@
 -# [1]: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/56587
 - project_meta = { id: @project.id, name: @project.name, namespace: @project.full_name, web_url: project_path(@project), avatar_url: @project.avatar_url } if @project&.persisted?
 .frequent-items-dropdown-container.with-deprecated-styles
-  .frequent-items-dropdown-sidebar.qa-projects-dropdown-sidebar
+  .frequent-items-dropdown-sidebar
     %ul
       = nav_link(path: 'dashboard/projects#index') do
-        = link_to dashboard_projects_path, class: 'qa-your-projects-link', data: { track_label: "projects_dropdown_your_projects", track_event: "click_link" } do
+        = link_to dashboard_projects_path, data: { track_label: "projects_dropdown_your_projects", track_event: "click_link" } do
           = _('Your projects')
       = nav_link(path: 'projects#starred') do
         = link_to starred_dashboard_projects_path, data: { track_label: "projects_dropdown_starred_projects", track_event: "click_link" } do

config/feature_flags/development/combined_menu.yml

@@ -5,4 +5,4 @@ rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/324086
 milestone: '13.10'
 type: development
 group: group::editor
-default_enabled: false
+default_enabled: true

lib/gitlab/nav/top_nav_menu_item.rb

@@ -8,7 +8,7 @@ module Gitlab
       # this is already :/. We could also take a hash and manually check every
       # entry, but it's much more maintainable to do rely on native Ruby.
       # rubocop: disable Metrics/ParameterLists
-      def self.build(id:, title:, active: false, icon: '', href: '', view: '', css_class: nil, data: {}, emoji: nil)
+      def self.build(id:, title:, active: false, icon: '', href: '', view: '', css_class: nil, data: nil, emoji: nil)
         {
           id: id,
           title: title,
@@ -17,7 +17,7 @@ module Gitlab
           href: href,
           view: view.to_s,
           css_class: css_class,
-          data: data,
+          data: data || { qa_selector: 'menu_item_link', qa_title: title },
           emoji: emoji
         }
       end

qa/qa/page/group/new.rb

@@ -60,6 +60,10 @@ module QA
 
           click_element(:connect_instance_button)
         end
+
+        def switch_to_import_tab
+          click_element("import-group-pane_link")
+        end
       end
     end
   end

qa/qa/page/main/menu.rb

@@ -19,25 +19,23 @@ module QA
           element :todos_shortcut_button, required: true
         end
 
-        view 'app/views/layouts/nav/_dashboard.html.haml' do
-          element :admin_area_link
-          element :projects_dropdown, required: true
-          element :groups_dropdown, required: true
-          element :more_dropdown
-          element :snippets_link
-          element :groups_link
-          element :activity_link
-          element :milestones_link
+        view 'app/assets/javascripts/nav/components/top_nav_app.vue' do
+          element :navbar_dropdown
         end
 
-        view 'app/views/layouts/nav/projects_dropdown/_show.html.haml' do
-          element :projects_dropdown_sidebar
-          element :your_projects_link
+        view 'app/assets/javascripts/nav/components/top_nav_dropdown_menu.vue' do
+          element :menu_subview_container
         end
 
-        view 'app/views/layouts/nav/groups_dropdown/_show.html.haml' do
-          element :create_group_link
-          element :import_group_link
+        view 'lib/gitlab/nav/top_nav_menu_item.rb' do
+          element :menu_item_link
+        end
+
+        view 'app/helpers/nav/top_nav_helper.rb' do
+          element :admin_area_link
+          element :projects_dropdown
+          element :groups_dropdown
+          element :snippets_link
         end
 
         view 'app/views/layouts/_search.html.haml' do
@@ -46,30 +44,28 @@ module QA
 
         def go_to_groups
           within_groups_menu do
-            click_element :your_groups_link
+            click_element(:menu_item_link, title: 'Your groups')
           end
         end
 
-        def go_to_import_group
+        def go_to_create_group
           within_groups_menu do
-            click_element :import_group_link
+            click_element(:menu_item_link, title: 'Create group')
           end
         end
 
         def go_to_projects
-          within_top_menu do
-            click_element :projects_dropdown
-          end
+          go_to_menu_dropdown_option(:projects_dropdown)
 
-          page.within('.qa-projects-dropdown-sidebar') do
-            click_element :your_projects_link
+          within_element(:menu_subview_container) do
+            click_element(:menu_item_link, title: 'Your projects')
           end
         end
 
-        def go_to_more_dropdown_option(option_name)
+        def go_to_menu_dropdown_option(option_name)
           within_top_menu do
-            click_element :more_dropdown
-            click_element option_name
+            click_element(:navbar_dropdown, title: 'Menu')
+            click_element(option_name)
           end
         end
 
@@ -151,11 +147,17 @@ module QA
         end
 
         def has_admin_area_link?(wait: Capybara.default_max_wait_time)
-          has_element?(:admin_area_link, wait: wait)
+          within_top_menu do
+            click_element(:navbar_dropdown, title: 'Menu')
+            has_element?(:admin_area_link, wait: wait)
+          end
         end
 
         def has_no_admin_area_link?(wait: Capybara.default_max_wait_time)
-          has_no_element?(:admin_area_link, wait: wait)
+          within_top_menu do
+            click_element(:navbar_dropdown, title: 'Menu')
+            has_no_element?(:admin_area_link, wait: wait)
+          end
         end
 
         def click_stop_impersonation_link
@@ -181,15 +183,13 @@ module QA
         end
 
         def within_groups_menu(&block)
-          within_top_menu do
-            click_element :groups_dropdown
-          end
+          go_to_menu_dropdown_option(:groups_dropdown)
 
-          page.within('.qa-groups-dropdown-sidebar', &block)
+          within_element(:menu_subview_container, &block)
         end
 
         def click_admin_area
-          within_top_menu { click_element :admin_area_link }
+          go_to_menu_dropdown_option(:admin_area_link)
         end
       end
     end

qa/qa/specs/features/browser_ui/1_manage/group/bulk_import_group_spec.rb

@@ -64,8 +64,11 @@ module QA
         sandbox.add_member(user, Resource::Members::AccessLevel::MAINTAINER)
 
         Flow::Login.sign_in(as: user)
-        Page::Main::Menu.new.go_to_import_group
-        Page::Group::New.new.connect_gitlab_instance(Runtime::Scenario.gitlab_address, personal_access_token)
+        Page::Main::Menu.perform(&:go_to_create_group)
+        Page::Group::New.perform do |group|
+          group.switch_to_import_tab
+          group.connect_gitlab_instance(Runtime::Scenario.gitlab_address, personal_access_token)
+        end
       end
 
       # Non blocking issues:

qa/qa/specs/features/browser_ui/3_create/snippet/create_personal_snippet_spec.rb

@@ -7,7 +7,7 @@ module QA
         Flow::Login.sign_in
 
         Page::Main::Menu.perform do |menu|
-          menu.go_to_more_dropdown_option(:snippets_link)
+          menu.go_to_menu_dropdown_option(:snippets_link)
         end
 
         Resource::Snippet.fabricate_via_browser_ui! do |snippet|

qa/qa/specs/features/browser_ui/3_create/snippet/create_personal_snippet_with_multiple_files_spec.rb

@@ -7,7 +7,7 @@ module QA
         Flow::Login.sign_in
 
         Page::Main::Menu.perform do |menu|
-          menu.go_to_more_dropdown_option(:snippets_link)
+          menu.go_to_menu_dropdown_option(:snippets_link)
         end
 
         Resource::Snippet.fabricate_via_browser_ui! do |snippet|

qa/qa/specs/features/browser_ui/3_create/snippet/snippet_index_page_spec.rb

@@ -60,7 +60,7 @@ module QA
         it "shows correct details of #{snippet_type} including file number" do
           send(snippet_type)
           Page::Main::Menu.perform do |menu|
-            menu.go_to_more_dropdown_option(:snippets_link)
+            menu.go_to_menu_dropdown_option(:snippets_link)
           end
 
           Page::Dashboard::Snippet::Index.perform do |snippet|

qa/qa/specs/features/ee/browser_ui/4_verify/pipeline_status_on_operation_dashboard_spec.rb

@@ -45,7 +45,7 @@ module QA
         Flow::Login.sign_in
         setup_projects
         Page::Main::Menu.perform do |menu|
-          menu.go_to_more_dropdown_option(:operations_link)
+          menu.go_to_menu_dropdown_option(:operations_link)
         end
       end
 

spec/features/admin/admin_mode_spec.rb

@@ -97,17 +97,17 @@ RSpec.describe 'Admin mode' do
         end
 
         it 'can leave admin mode using dropdown menu on smaller screens', :js do
-          skip('pending responsive development under :combined_menu feature flag') if Feature.enabled?(:combined_menu)
+          skip('pending responsive development under :combined_menu feature flag') if Feature.enabled?(:combined_menu, default_enabled: :yaml)
 
           resize_screen_xs
           visit root_dashboard_path
 
-          find('.header-more').click unless Feature.enabled?(:combined_menu)
+          find('.header-more').click unless Feature.enabled?(:combined_menu, default_enabled: :yaml)
 
           gitlab_disable_admin_mode
 
           open_top_nav
-          find('.header-more').click unless Feature.enabled?(:combined_menu)
+          find('.header-more').click unless Feature.enabled?(:combined_menu, default_enabled: :yaml)
 
           expect(page).to have_link(href: new_admin_session_path)
         end
@@ -127,13 +127,13 @@ RSpec.describe 'Admin mode' do
             visit root_dashboard_path
             open_top_nav
 
-            link_text = Feature.enabled?(:combined_menu) ? 'Admin' : 'Admin Area'
+            link_text = Feature.enabled?(:combined_menu, default_enabled: :yaml) ? 'Admin' : 'Admin Area'
             expect(page).to have_link(text: link_text, href: admin_root_path, visible: true)
             expect(page).to have_link(text: 'Leave Admin Mode', href: destroy_admin_session_path, visible: true)
           end
 
           it 'relocates admin dashboard links to dropdown list on smaller screen', :js do
-            skip('pending responsive development under :combined_menu feature flag') if Feature.enabled?(:combined_menu)
+            skip('pending responsive development under :combined_menu feature flag') if Feature.enabled?(:combined_menu, default_enabled: :yaml)
 
             resize_screen_xs
             visit root_dashboard_path

spec/features/projects/new_project_spec.rb

@@ -53,7 +53,7 @@ RSpec.describe 'New project', :js do
           open_top_nav_projects
 
           within_top_nav do
-            if Feature.enabled?(:combined_menu)
+            if Feature.enabled?(:combined_menu, default_enabled: :yaml)
               expect(page).to have_selector('a', text: 'Create new project')
               expect(page).to have_no_selector('a', text: 'Create blank project/repository')
             else
@@ -73,7 +73,7 @@ RSpec.describe 'New project', :js do
           open_top_nav_projects
 
           within_top_nav do
-            if Feature.enabled?(:combined_menu)
+            if Feature.enabled?(:combined_menu, default_enabled: :yaml)
               expect(page).to have_selector('a', text: 'Create new project')
             else
               expect(page).to have_selector('a', text: 'Create blank project/repository')

spec/helpers/nav/top_nav_helper_spec.rb

@@ -297,7 +297,7 @@ RSpec.describe Nav::TopNavHelper do
           it 'has expected :linksSecondary' do
             expected_links_secondary = [
               ::Gitlab::Nav::TopNavMenuItem.build(
-                href: '/groups/new#create-group-pane',
+                href: '/groups/new',
                 id: 'create',
                 title: 'Create group'
               )

spec/support/helpers/features/top_nav_spec_helpers.rb

@@ -8,13 +8,13 @@ module Spec
       module Features
         module TopNavSpecHelpers
           def open_top_nav
-            return unless Feature.enabled?(:combined_menu)
+            return unless Feature.enabled?(:combined_menu, default_enabled: :yaml)
 
             find('.js-top-nav-dropdown-toggle').click
           end
 
           def within_top_nav
-            if Feature.enabled?(:combined_menu)
+            if Feature.enabled?(:combined_menu, default_enabled: :yaml)
               within('.js-top-nav-dropdown-menu') do
                 yield
               end
@@ -26,7 +26,7 @@ module Spec
           end
 
           def open_top_nav_projects
-            if Feature.enabled?(:combined_menu)
+            if Feature.enabled?(:combined_menu, default_enabled: :yaml)
               open_top_nav
 
               within_top_nav do
@@ -38,7 +38,7 @@ module Spec
           end
 
           def open_top_nav_groups
-            return unless Feature.enabled?(:combined_menu)
+            return unless Feature.enabled?(:combined_menu, default_enabled: :yaml)
 
             open_top_nav