Add search settings component to project settings

As a proof of concept, allow searching the
Projects general settings page using the search
settings component

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

@@ -10,6 +10,7 @@ import initProjectPermissionsSettings from '../shared/permissions';
 import initProjectDeleteButton from '~/projects/project_delete_button';
 import UserCallout from '~/user_callout';
 import initServiceDesk from '~/projects/settings_service_desk';
+import mountSearchSettings from './mount_search_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
   initFilePickers();
@@ -30,4 +31,6 @@ document.addEventListener('DOMContentLoaded', () => {
       '.js-general-settings-form, .js-mr-settings-form, .js-mr-approvals-form',
     ),
   );
+
+  mountSearchSettings();
 });

app/assets/javascripts/pages/projects/edit/mount_search_settings.js

+import $ from 'jquery';
+import { expandSection, closeSection } from '~/settings_panels';
+
+const mountSearchSettings = async () => {
+  if (!gon.features?.searchSettingsInPage) {
+    return;
+  }
+
+  const { default: initSearch } = await import('~/search_settings');
+
+  initSearch({
+    el: document.querySelector('.js-search-settings-app'),
+    searchRoot: document.querySelector('#content-body'),
+    sectionSelector: 'section.settings',
+    onCollapse(section) {
+      closeSection($(section));
+    },
+    onExpand(section) {
+      expandSection($(section));
+    },
+  });
+};
+
+export default mountSearchSettings;

app/assets/javascripts/settings_panels.js

 import $ from 'jquery';
 import { __ } from './locale';
 
-function expandSection($section) {
+export function expandSection($section) {
   $section.find('.js-settings-toggle:not(.js-settings-toggle-trigger-only)').text(__('Collapse'));
   // eslint-disable-next-line @gitlab/no-global-event-off
   $section.find('.settings-content').off('scroll.expandSection').scrollTop(0);
@@ -13,7 +13,7 @@ function expandSection($section) {
   }
 }
 
-function closeSection($section) {
+export function closeSection($section) {
   $section.find('.js-settings-toggle:not(.js-settings-toggle-trigger-only)').text(__('Expand'));
   $section.find('.settings-content').on('scroll.expandSection', () => expandSection($section));
   $section.removeClass('expanded');
@@ -24,7 +24,7 @@ function closeSection($section) {
   }
 }
 
-function toggleSection($section) {
+export function toggleSection($section) {
   $section.removeClass('no-animate');
   if ($section.hasClass('expanded')) {
     closeSection($section);

app/views/projects/edit.html.haml

@@ -3,8 +3,7 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - expanded = expanded_by_default?
 
-- if Feature.enabled?(:search_settings_in_page, @project, default_enabled: false)
-  = render "shared/search_settings"
+= render "shared/search_settings"
 
 %section.settings.general-settings.no-animate.expanded#js-general-settings
   .settings-header

app/views/shared/_search_settings.html.haml

-.search-box-by-type.gl-mt-5
-  = sprite_icon('search', css_class: 'gl-search-box-by-type-search-icon gl-icon s16')
-  %input#search-settings-input.gl-form-input.gl-w-full.gl-search-box-by-type-input{ type: 'search', placeholder: _('Search settings') }
+- if Feature.enabled?(:search_settings_in_page, @project, default_enabled: false)
+  .js-search-settings-app

spec/frontend/pages/projects/edit/mount_search_settings_spec.js

+import jQuery from 'jquery';
+import waitForPromises from 'helpers/wait_for_promises';
+import { expandSection, closeSection } from '~/settings_panels';
+import initSearch from '~/search_settings';
+import mountSearchSettings from '~/pages/projects/edit/mount_search_settings';
+
+jest.mock('~/settings_panels', () => {
+  return {
+    expandSection: jest.fn(),
+    closeSection: jest.fn(),
+  };
+});
+
+jest.mock('~/search_settings', () => {
+  return jest.fn();
+});
+
+describe('pages/projects/edit/mount_search_settings', () => {
+  beforeEach(() => {
+    window.gon.features = { searchSettingsInPage: true };
+  });
+
+  afterEach(() => {
+    initSearch.mockReset();
+  });
+
+  it('does not initialize search settings when feature flag is off', async () => {
+    window.gon.features.searchSettingsInPage = false;
+    mountSearchSettings();
+
+    await waitForPromises();
+
+    expect(initSearch).not.toHaveBeenCalled();
+  });
+
+  it('calls settingPanels.expandSection when onExpand is invoked', async () => {
+    const section = document.createElement('div');
+
+    mountSearchSettings();
+
+    await waitForPromises();
+
+    const initParams = initSearch.mock.calls[0][0];
+
+    initParams.onExpand(section);
+
+    expect(expandSection).toHaveBeenCalled();
+    expect(expandSection.mock.calls[0][0]).toBeInstanceOf(jQuery);
+    expect(expandSection.mock.calls[0][0].get(0)).toBe(section);
+  });
+
+  it('calls settingPanels.closeSection when onCollapse is invoked', async () => {
+    const section = document.createElement('div');
+
+    mountSearchSettings();
+
+    await waitForPromises();
+
+    const initParams = initSearch.mock.calls[0][0];
+
+    initParams.onCollapse(section);
+
+    expect(closeSection).toHaveBeenCalled();
+    expect(closeSection.mock.calls[0][0]).toBeInstanceOf(jQuery);
+    expect(closeSection.mock.calls[0][0].get(0)).toBe(section);
+  });
+});