Move the sub-section to gl-card in advanced search settings in admin

changelogs/unreleased/gl-card-advanced-search.yml

+---
+title: Move the sub-section to gl-card in advanced search settings in admin
+merge_request: 52585
+author: Yogi (@yo)
+type: changed

ee/app/views/admin/application_settings/_elasticsearch_form.html.haml

@@ -17,7 +17,8 @@
       = form_errors(@application_setting)
 
       %fieldset
-        .sub-section
+        .gl-card.gl-bg-gray-10.gl-mb-6
+          .gl-card-body
             - halted_migrations = elasticsearch_available && Elastic::DataMigrationService.halted_migrations?
             - if halted_migrations
               .gl-alert.gl-alert-warning.gl-mt-3.gl-mb-3{ role: 'alert' }
@@ -45,7 +46,7 @@
                     = link_to _('Index all projects'), admin_elasticsearch_enqueue_index_path,
                         class: ['btn', 'btn-success'], method: :post
 
-          .card-body
+            .gl-card-body
               .form-group
                 .form-check
                 - pending_migrations = elasticsearch_available && Elastic::DataMigrationService.pending_migrations? && Gitlab::CurrentSettings.elasticsearch_pause_indexing?
@@ -118,7 +119,8 @@
                 = _('Elasticsearch HTTP client timeout value in seconds.')
                 = _('Setting this to 0 means using the system default timeout value.')
 
-        .sub-section
+        .gl-card.gl-bg-gray-10.gl-mb-6
+          .gl-card-body
             %h4= _('Elasticsearch zero-downtime reindexing')
             = link_to _('Trigger cluster reindexing'), admin_elasticsearch_trigger_reindexing_path, class: "gl-button btn btn-info", disabled: @elasticsearch_reindexing_task&.in_progress?, data: { confirm: _('Are you sure you want to reindex?') }, method: :post
             .form-text.gl-text-gray-600
@@ -132,7 +134,7 @@
               - if @elasticsearch_reindexing_task.error_message
                 %p= _('Error: %{error_message}') % { error_message: @elasticsearch_reindexing_task.error_message }
               - @elasticsearch_reindexing_task.subtasks.each do |subtask|
-              .card-body.form-group
+                .gl-card-body.form-group
                   %h5= subtask.alias_name
                   - expected_documents = subtask.documents_count
                   - if subtask.elastic_task
@@ -146,7 +148,8 @@
                       .progress
                         .progress-bar{ "aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => percentage, :role => "progressbar", :style => "width: #{percentage}%" }
 
-        .sub-section
+        .gl-card.gl-bg-gray-10.gl-mb-6
+          .gl-card-body
             %h4= _('Elasticsearch indexing restrictions')
             .form-group
               .form-check
@@ -168,7 +171,8 @@
               - else
                 = f.text_field :elasticsearch_project_ids, class: 'js-elasticsearch-projects', value: elasticsearch_project_ids, data: { selected: elasticsearch_objects_options(@application_setting.elasticsearch_limited_projects(true)).to_json }
 
-        .sub-section
+        .gl-card.gl-bg-gray-10.gl-mb-6
+          .gl-card-body
             %h4= _('Custom analyzers: language support')
             %h5
               = _('Chinese language support using')
@@ -203,7 +207,8 @@
                 .form-text.gl-text-gray-600
                   = _('Please only enable search after installing the plugin, enabling indexing and recreating the index')
 
-        .sub-section
+        .gl-card.gl-bg-gray-10.gl-mb-6
+          .gl-card-body
             %h4= _('Elasticsearch AWS IAM credentials')
             .form-group
               .form-check