Merge branch 'add-search-to-user-settings' into 'master'

Add search to user settings

See merge request gitlab-org/gitlab!52838

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

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

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

 import $ from 'jquery';
 import '~/profile/gl_crop';
 import Profile from '~/profile/profile';
+import initSearchSettings from '~/search_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
   // eslint-disable-next-line func-names
@@ -17,4 +18,6 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   new Profile(); // eslint-disable-line no-new
+
+  initSearchSettings();
 });

app/assets/javascripts/search_settings/mount.js

@@ -11,7 +11,7 @@ const mountSearch = ({ el }) =>
         ref: 'searchSettings',
         props: {
           searchRoot: document.querySelector('#content-body'),
-          sectionSelector: 'section.settings',
+          sectionSelector: '.js-search-settings-section, section.settings',
         },
         on: {
           collapse: (section) => closeSection($(section)),

app/views/layouts/profile.html.haml

@@ -4,4 +4,5 @@
 - nav           "profile"
 - @left_sidebar = true
 
+- enable_search_settings locals: { container_class: 'gl-my-5' }
 = render template: "layouts/application"

spec/features/profiles/user_search_settings_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'User searches their settings', :js do
+  let(:user) { create(:user) }
+  let(:search_input_placeholder) { 'Search settings' }
+
+  before do
+    sign_in(user)
+  end
+
+  context 'when search_settings_in_page feature flag is on' do
+    it 'allows searching in the user profile page' do
+      search_term = 'Public Avatar'
+      hidden_section_name = 'Main settings'
+
+      visit profile_path
+      fill_in search_input_placeholder, with: search_term
+
+      expect(page).to have_content(search_term)
+      expect(page).not_to have_content(hidden_section_name)
+    end
+
+    it 'allows searching in the user applications page' do
+      visit applications_profile_path
+
+      expect(page.find_field(placeholder: search_input_placeholder)).not_to be_disabled
+    end
+
+    it 'allows searching in the user preferences page' do
+      search_term = 'Syntax highlighting theme'
+      hidden_section_name = 'Behavior'
+
+      visit profile_preferences_path
+      fill_in search_input_placeholder, with: search_term
+
+      expect(page).to have_content(search_term)
+      expect(page).not_to have_content(hidden_section_name)
+    end
+  end
+
+  context 'when search_settings_in_page feature flag is off' do
+    before do
+      stub_feature_flags(search_settings_in_page: false)
+      visit(profile_path)
+    end
+
+    it 'does not allow searching in the user settings pages' do
+      expect(page).not_to have_content(search_input_placeholder)
+    end
+  end
+end

spec/views/layouts/profile.html.haml_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'layouts/profile' do
+  let(:user) { create(:user) }
+
+  before do
+    allow(view).to receive(:session).and_return({})
+    allow(view).to receive(:current_user).and_return(user)
+    allow(view).to receive(:current_user_mode).and_return(Gitlab::Auth::CurrentUserMode.new(user))
+    allow(view).to receive(:experiment_enabled?).and_return(false)
+    allow(view).to receive(:enable_search_settings).and_call_original
+  end
+
+  it 'calls enable_search_settings helper with a custom container class' do
+    render
+    expect(view).to have_received(:enable_search_settings)
+                      .with({ locals: { container_class: 'gl-my-5' } })
+  end
+
+  context 'when search_settings_in_page feature flag is on' do
+    it 'displays the search settings entry point' do
+      render
+      expect(rendered).to include('js-search-settings-app')
+    end
+  end
+
+  context 'when search_settings_in_page feature flag is off' do
+    before do
+      stub_feature_flags(search_settings_in_page: false)
+    end
+
+    it 'does not display the search settings entry point' do
+      render
+      expect(rendered).not_to include('js-search-settings-app')
+    end
+  end
+end