Use a common layout for settings controllers

Make sure all the settings controllers use the `project_settings` layout

app/assets/javascripts/pages/projects/hooks/index.js

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

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

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

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

@@ -6,7 +6,6 @@ import initDeployFreeze from '~/deploy_freeze';
 import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 import initSharedRunnersToggle from '~/projects/settings/mount_shared_runners_toggle';
 import registrySettingsApp from '~/registry/settings/registry_settings_bundle';
-import initSearchSettings from '~/search_settings';
 import initSettingsPanels from '~/settings_panels';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -43,6 +42,4 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   initInstallRunner();
-
-  initSearchSettings();
 });

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

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

app/assets/javascripts/pages/projects/settings/operations/show/index.js

@@ -3,7 +3,6 @@ import mountErrorTrackingForm from '~/error_tracking_settings';
 import mountGrafanaIntegration from '~/grafana_integration';
 import initIncidentsSettings from '~/incidents_settings';
 import mountOperationSettings from '~/operation_settings';
-import initSearchSettings from '~/search_settings';
 import initSettingsPanels from '~/settings_panels';
 
 initIncidentsSettings();
@@ -14,7 +13,3 @@ if (!IS_EE) {
   initSettingsPanels();
 }
 mountAlertsSettings(document.querySelector('.js-alerts-settings'));
-
-document.addEventListener('DOMContentLoaded', () => {
-  initSearchSettings();
-});

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

 import MirrorRepos from '~/mirrors/mirror_repos';
-import initSearchSettings from '~/search_settings';
 import initForm from '../form';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -7,6 +6,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const mirrorReposContainer = document.querySelector('.js-mirror-settings');
   if (mirrorReposContainer) new MirrorRepos(mirrorReposContainer).init();
-
-  initSearchSettings();
 });

app/controllers/projects/settings/access_tokens_controller.rb

@@ -5,6 +5,7 @@ module Projects
     class AccessTokensController < Projects::ApplicationController
       include ProjectsHelper
 
+      layout 'project_settings'
       before_action :check_feature_availability
 
       feature_category :authentication_and_authorization

app/controllers/projects/settings/ci_cd_controller.rb

@@ -7,6 +7,7 @@ module Projects
 
       NUMBER_OF_RUNNERS_PER_PAGE = 20
 
+      layout 'project_settings'
       before_action :authorize_admin_pipeline!
       before_action :define_variables
       before_action do

app/controllers/projects/settings/operations_controller.rb

@@ -3,6 +3,7 @@
 module Projects
   module Settings
     class OperationsController < Projects::ApplicationController
+      layout 'project_settings'
       before_action :authorize_admin_operations!
       before_action :authorize_read_prometheus_alerts!, only: [:reset_alerting_token]
 

app/controllers/projects/settings/repository_controller.rb

@@ -3,6 +3,7 @@
 module Projects
   module Settings
     class RepositoryController < Projects::ApplicationController
+      layout 'project_settings'
       before_action :authorize_admin_project!
       before_action :define_variables, only: [:create_deploy_token]
       before_action do

app/views/layouts/project_settings.html.haml

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

app/views/projects/edit.html.haml

@@ -3,8 +3,6 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - expanded = expanded_by_default?
 
-- enable_search_settings
-
 %section.settings.general-settings.no-animate.expanded#js-general-settings
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Naming, topics, avatar')

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

@@ -5,8 +5,6 @@
 - expanded = expanded_by_default?
 - general_expanded = @project.errors.empty? ? expanded : true
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 %section.settings#js-general-pipeline-settings.no-animate{ class: ('expanded' if general_expanded), data: { qa_selector: 'general_pipelines_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only

app/views/projects/settings/operations/show.html.haml

@@ -2,8 +2,6 @@
 - page_title _('Operations Settings')
 - breadcrumb_title _('Operations Settings')
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 = render 'projects/settings/operations/alert_management'
 = render 'projects/settings/operations/incidents'
 = render 'projects/settings/operations/error_tracking'

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

@@ -3,8 +3,6 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - deploy_token_description = s_('DeployTokens|Deploy tokens allow access to packages, your repository, and registry images.')
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 = render "projects/default_branch/show"
 = render_if_exists "projects/push_rules/index"
 = render "projects/mirrors/mirror_repos"

app/views/shared/wikis/pages.html.haml

@@ -5,8 +5,6 @@
 - add_page_specific_style 'page_bundles/wiki'
 
 .wiki-page-header.top-area.flex-column.flex-lg-row
-
-
   %h3.page-title.gl-flex-fill-1
     = s_("Wiki|Wiki Pages")
 

spec/features/projects/settings/user_searches_in_settings_spec.rb

@@ -4,7 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'User searches project settings', :js do
   let_it_be(:user) { create(:user) }
-  let_it_be(:project) { create(:project, :repository, namespace: user.namespace) }
+  let_it_be(:project) { create(:project, :repository, namespace: user.namespace, pages_https_only: false) }
 
   before do
     sign_in(user)
@@ -16,6 +16,30 @@ RSpec.describe 'User searches project settings', :js do
     it_behaves_like 'can search settings with feature flag check', 'Naming', 'Visibility'
   end
 
+  context 'in Integrations page' do
+    before do
+      visit project_settings_integrations_path(project)
+    end
+
+    it_behaves_like 'can highlight results', 'third-party applications'
+  end
+
+  context 'in Webhooks page' do
+    before do
+      visit project_hooks_path(project)
+    end
+
+    it_behaves_like 'can highlight results', 'Secret token'
+  end
+
+  context 'in Access Tokens page' do
+    before do
+      visit project_settings_access_tokens_path(project)
+    end
+
+    it_behaves_like 'can highlight results', 'Expires at'
+  end
+
   context 'in Repository page' do
     before do
       visit project_settings_repository_path(project)
@@ -39,4 +63,14 @@ RSpec.describe 'User searches project settings', :js do
 
     it_behaves_like 'can search settings', 'Alerts', 'Error tracking'
   end
+
+  context 'in Pages page' do
+    before do
+      allow(Gitlab.config.pages).to receive(:enabled).and_return(true)
+
+      visit project_pages_path(project)
+    end
+
+    it_behaves_like 'can highlight results', 'static websites'
+  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 }