Add inline search to project and group settings

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

@@ -6,6 +6,7 @@ import TransferDropdown from '~/groups/transfer_dropdown';
 import groupsSelect from '~/groups_select';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import projectSelect from '~/project_select';
+import initSearchSettings from '~/search_settings';
 import initSettingsPanels from '~/settings_panels';
 import setupTransferEdit from '~/transfer_edit';
 
@@ -24,5 +25,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   projectSelect();
 
+  initSearchSettings();
+
   return new TransferDropdown();
 });

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

@@ -4,6 +4,7 @@ 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';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -21,4 +22,6 @@ document.addEventListener('DOMContentLoaded', () => {
   initVariableList();
 
   initInstallRunner();
+
+  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';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -6,4 +7,6 @@ document.addEventListener('DOMContentLoaded', () => {
   initSettingsPanels();
 
   new DueDateSelectors(); // eslint-disable-line no-new
+
+  initSearchSettings();
 });

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

@@ -6,6 +6,7 @@ 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', () => {
@@ -42,4 +43,6 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   initInstallRunner();
+
+  initSearchSettings();
 });

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

@@ -3,6 +3,7 @@ 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();
@@ -13,3 +14,7 @@ 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', () => {
@@ -6,4 +7,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const mirrorReposContainer = document.querySelector('.js-mirror-settings');
   if (mirrorReposContainer) new MirrorRepos(mirrorReposContainer).init();
+
+  initSearchSettings();
 });

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,6 +4,8 @@
 - 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,4 +2,6 @@
 - 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/projects/settings/ci_cd/show.html.haml

@@ -5,6 +5,8 @@
 - 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

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

@@ -2,6 +2,8 @@
 - 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,6 +3,8 @@
 - @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"

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

@@ -10,6 +10,7 @@ import ProtectedBranchCreate from '~/protected_branches/protected_branch_create'
 import CEProtectedBranchEditList from '~/protected_branches/protected_branch_edit_list';
 import CEProtectedTagCreate from '~/protected_tags/protected_tag_create';
 import CEProtectedTagEditList from '~/protected_tags/protected_tag_edit_list';
+import initSearchSettings from '~/search_settings';
 import initSettingsPanels from '~/settings_panels';
 import UserCallout from '~/user_callout';
 import UsersSelect from '~/users_select';
@@ -41,3 +42,7 @@ if (pushPullContainer) new EEMirrorRepos(pushPullContainer).init();
 new DueDateSelectors();
 
 fileUpload('.js-choose-file', '.js-object-map-input');
+
+document.addEventListener('DOMContentLoaded', () => {
+  initSearchSettings();
+});

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) }
+  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
+    let(:visit_path) { edit_group_path(group) }
+
+    it_behaves_like 'can search settings with feature flag check', 'Naming', 'Permissions'
+  end
+
+  context 'in Repository page' do
+    before do
+      visit group_settings_repository_path(group)
+    end
+
+    it_behaves_like 'can search settings', 'Deploy tokens', 'Default initial branch name'
+  end
+
+  context 'in CI/CD page' do
+    before do
+      visit group_settings_ci_cd_path(group)
+    end
+
+    it_behaves_like 'can search settings', 'Variables', 'Runners'
+  end
+end

spec/features/projects/settings/user_searches_in_settings_spec.rb

+# frozen_string_literal: true
+
+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) }
+
+  before do
+    sign_in(user)
+  end
+
+  context 'in general settings page' do
+    let(:visit_path) { edit_project_path(project) }
+
+    it_behaves_like 'can search settings with feature flag check', 'Naming', 'Visibility'
+  end
+
+  context 'in Repository page' do
+    before do
+      visit project_settings_repository_path(project)
+    end
+
+    it_behaves_like 'can search settings', 'Deploy keys', 'Mirroring repositories'
+  end
+
+  context 'in CI/CD page' do
+    before do
+      visit project_settings_ci_cd_path(project)
+    end
+
+    it_behaves_like 'can search settings', 'General pipelines', 'Auto DevOps'
+  end
+
+  context 'in Operations page' do
+    before do
+      visit project_settings_operations_path(project)
+    end
+
+    it_behaves_like 'can search settings', 'Alerts', 'Incidents'
+  end
+end