Use same layout for all group settings pages

Change layout of the following controllers to
use the group_settings layout

- group_controllers
- ci_cd_controller
- integrations_controller
- packages_and_registries_controller
- repository_controller

app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js

@@ -4,7 +4,6 @@ import initSharedRunnersForm from '~/group_settings/mount_shared_runners';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
-import initSearchSettings from '~/search_settings';
 import initSettingsPanels from '~/settings_panels';
 
 // Initialize expandable settings panels
@@ -21,5 +20,3 @@ initSharedRunnersForm();
 initVariableList();
 
 initInstallRunner();
-
-initSearchSettings();

app/assets/javascripts/pages/groups/settings/index.js

+import initSearchSettings from '~/search_settings';
+
+initSearchSettings();

app/assets/javascripts/pages/groups/settings/packages_and_registries/index.js

 import bundle from '~/packages_and_registries/settings/group/bundle';
-import initSearchSettings from '~/search_settings';
 
 bundle();
-
-document.addEventListener('DOMContentLoaded', initSearchSettings);

app/assets/javascripts/pages/groups/settings/repository/show/index.js

 import DueDateSelectors from '~/due_date_select';
-import initSearchSettings from '~/search_settings';
 import initSettingsPanels from '~/settings_panels';
 
 // Initialize expandable settings panels
 initSettingsPanels();
 
 new DueDateSelectors(); // eslint-disable-line no-new
-
-initSearchSettings();

app/controllers/groups/settings/ci_cd_controller.rb

@@ -5,6 +5,7 @@ module Groups
     class CiCdController < Groups::ApplicationController
       include RunnerSetupScripts
 
+      layout 'group_settings'
       skip_cross_project_access_check :show
       before_action :authorize_admin_group!
       before_action :authorize_update_max_artifacts_size!, only: [:update]

app/controllers/groups/settings/integrations_controller.rb

@@ -9,6 +9,8 @@ module Groups
 
       feature_category :integrations
 
+      layout 'group_settings'
+
       def index
         @integrations = Service.find_or_initialize_all_non_project_specific(Service.for_group(group)).sort_by(&:title)
       end

app/controllers/groups/settings/packages_and_registries_controller.rb

@@ -3,6 +3,7 @@
 module Groups
   module Settings
     class PackagesAndRegistriesController < Groups::ApplicationController
+      layout 'group_settings'
       before_action :authorize_admin_group!
       before_action :verify_packages_enabled!
 

app/controllers/groups/settings/repository_controller.rb

@@ -3,6 +3,7 @@
 module Groups
   module Settings
     class RepositoryController < Groups::ApplicationController
+      layout 'group_settings'
       skip_cross_project_access_check :show
       before_action :authorize_create_deploy_token!
       before_action :define_deploy_token_variables

app/views/groups/settings/_general.html.haml

-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 = form_for @group, html: { multipart: true, class: 'gl-show-field-errors js-general-settings-form' }, authenticity_token: true do |f|
   %input{ type: 'hidden', name: 'update_section', value: 'js-general-settings' }
   = form_errors(@group)

app/views/groups/settings/ci_cd/show.html.haml

@@ -4,8 +4,6 @@
 - expanded = expanded_by_default?
 - general_expanded = @group.errors.empty? ? expanded : true
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 -# Given we only have one field in this form which is also admin-only,
 -# we don't want to show an empty section to non-admin users,
 - if can?(current_user, :update_max_artifacts_size, @group)

app/views/groups/settings/packages_and_registries/index.html.haml

@@ -2,6 +2,4 @@
 - page_title _('Packages & Registries')
 - @content_class = 'limit-container-width' unless fluid_layout
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 %section#js-packages-and-registries-settings{ data: { default_expanded: expanded_by_default?.to_s, group_path: @group.full_path } }

app/views/groups/settings/repository/show.html.haml

 - breadcrumb_title _('Repository Settings')
 - page_title _('Repository')
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 - deploy_token_description = s_('DeployTokens|Group deploy tokens allow access to the packages, repositories, and registry images within the group.')
 
 = render "shared/deploy_tokens/index", group_or_project: @group, description: deploy_token_description

app/views/layouts/group_settings.html.haml

 - page_title _("Settings")
 - nav "group"
 
+- enable_search_settings locals: { container_class: 'gl-my-5' }
 = render template: "layouts/group"

ee/app/assets/javascripts/pages/groups/hooks/index.js

+import initSearchSettings from '~/search_settings';
+
+initSearchSettings();

ee/app/assets/javascripts/pages/groups/projects/index.js

+import initSearchSettings from '~/search_settings';
+
+initSearchSettings();

ee/app/assets/javascripts/pages/groups/usage_quotas/index.js

 import storageCounter from 'ee/storage_counter';
 import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
+import initSearchSettings from '~/search_settings';
 
 if (document.querySelector('#js-storage-counter-app')) {
   storageCounter();
@@ -11,3 +12,5 @@ if (document.querySelector('#js-storage-counter-app')) {
     hashedTabs: true,
   });
 }
+
+initSearchSettings();

ee/spec/features/groups/settings/user_searches_in_settings_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'User searches group settings', :js do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) { create(:group) }
+
+  before do
+    group.add_owner(user)
+    sign_in(user)
+  end
+
+  context 'in Webhooks page' do
+    before do
+      visit group_hooks_path(group)
+    end
+
+    it_behaves_like 'can highlight results', 'Group Hooks'
+  end
+
+  context 'in Usage Quotas page' do
+    before do
+      visit group_usage_quotas_path(group)
+    end
+
+    it_behaves_like 'can highlight results', 'Usage of group'
+  end
+end

spec/features/groups/settings/user_searches_in_settings_spec.rb

@@ -5,19 +5,26 @@ require 'spec_helper'
 RSpec.describe 'User searches group settings', :js do
   let_it_be(:user) { create(:user) }
   let_it_be(:group) { create(:group) }
-  let_it_be(:project) { create(:project, :repository, namespace: group) }
 
   before do
     group.add_owner(user)
     sign_in(user)
   end
 
-  context 'in general settings page' do
+  context 'in General settings page' do
     let(:visit_path) { edit_group_path(group) }
 
     it_behaves_like 'can search settings with feature flag check', 'Naming', 'Permissions'
   end
 
+  context 'in Integrations page' do
+    before do
+      visit group_settings_integrations_path(group)
+    end
+
+    it_behaves_like 'can highlight results', 'integration settings'
+  end
+
   context 'in Repository page' do
     before do
       visit group_settings_repository_path(group)
@@ -33,4 +40,12 @@ RSpec.describe 'User searches group settings', :js do
 
     it_behaves_like 'can search settings', 'Variables', 'Runners'
   end
+
+  context 'in Packages & Registries page' do
+    before do
+      visit group_settings_packages_and_registries_path(group)
+    end
+
+    it_behaves_like 'can highlight results', 'GitLab Packages'
+  end
 end

spec/support/shared_examples/features/search_settings_shared_examples.rb

@@ -7,9 +7,7 @@ RSpec.shared_examples 'cannot search settings' do
 end
 
 RSpec.shared_examples 'can search settings' do |search_term, non_match_section|
-  it 'has search settings field' do
-    expect(page).to have_field(placeholder: SearchHelpers::INPUT_PLACEHOLDER)
-  end
+  it_behaves_like 'can highlight results', search_term
 
   it 'hides unmatching sections on search' do
     expect(page).to have_content(non_match_section)
@@ -21,6 +19,23 @@ RSpec.shared_examples 'can search settings' do |search_term, non_match_section|
   end
 end
 
+RSpec.shared_examples 'can highlight results' do |search_term|
+  it 'has search settings field' do
+    expect(page).to have_field(placeholder: SearchHelpers::INPUT_PLACEHOLDER)
+  end
+
+  it 'highlights the search terms' do
+    selector = '.gl-bg-orange-50'
+    fill_in SearchHelpers::INPUT_PLACEHOLDER, with: search_term
+
+    expect(page).to have_css(selector)
+
+    page.find_all(selector) do |element|
+      expect(element).to have_content(search_term)
+    end
+  end
+end
+
 RSpec.shared_examples 'can search settings with feature flag check' do |search_term, non_match_section|
   let(:flag) { true }