Add search settings to all user profile pages

Initializes the search settings Vue app
in the layout file that is common to all pages
in the user settings

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
-  $(document).on('input.ssh_key', '#key_key', function () {
-    const $title = $('#key_title');
-    const comment = $(this)
-      .val()
-      .match(/^\S+ \S+ (.+)\n?$/);
+// eslint-disable-next-line func-names
+$(document).on('input.ssh_key', '#key_key', function () {
+  const $title = $('#key_title');
+  const comment = $(this)
+    .val()
+    .match(/^\S+ \S+ (.+)\n?$/);
 
-    // Extract the SSH Key title from its comment
-    if (comment && comment.length > 1) {
-      $title.val(comment[1]).change();
-    }
-  });
-
-  new Profile(); // eslint-disable-line no-new
+  // Extract the SSH Key title from its comment
+  if (comment && comment.length > 1) {
+    $title.val(comment[1]).change();
+  }
 });
+
+new Profile(); // eslint-disable-line no-new
+
+initSearchSettings();

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 edit profile', :js do
+  include Spec::Support::Helpers::Features::NotesHelpers
+
+  let(:user) { create(:user) }
+  let(:search_input_placeholder) { 'Search settings' }
+
+  before do
+    sign_in(user)
+  end
+
+  context 'when seach_settings_in_page feature flag is on' do
+    before do
+      stub_feature_flags(search_settings_in_page: true)
+    end
+
+    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 seach_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)
+  end
+
+  context 'when seach_settings_in_page feature flag is on' do
+    before do
+      stub_feature_flags(search_settings_in_page: true)
+    end
+
+    it 'displays the search settings entry point' do
+      render
+      expect(rendered).to include('js-search-settings-app')
+      have_received(:enable_search_settings)
+                            .with({ locals: { container_class: 'gl-my-5' } })
+    end
+  end
+
+  context 'when seach_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')
+      have_not_received(:enable_search_settings)
+    end
+  end
+end