Separate sections in user settings pages layout

Wrap user settings sections in different containers

app/views/profiles/accounts/show.html.haml

@@ -15,7 +15,7 @@
     .gl-alert-body
       = _('Congratulations! You have enabled Two-factor Authentication!')
 
-.row.gl-mt-3
+.row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = s_('Profiles|Two-Factor Authentication')
@@ -29,10 +29,11 @@
     - else
       .gl-mb-3
         = link_to _('Enable two-factor authentication'), profile_two_factor_auth_path, class: 'gl-button btn btn-success', data: { qa_selector: 'enable_2fa_button' }
+  .col-lg-12
+    %hr
 
-%hr
 - if display_providers_on_profile?
-  .row.gl-mt-3
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_('Profiles|Social sign-in')
@@ -40,9 +41,10 @@
         = s_('Profiles|Activate signin with one of the following services')
     .col-lg-8
       = render 'providers', providers: button_based_providers, group_saml_identities: local_assigns[:group_saml_identities]
+    .col-lg-12
       %hr
 - if current_user.can_change_username?
-  .row.gl-mt-3
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0.warning-title
         = s_('Profiles|Change username')
@@ -53,9 +55,10 @@
     .col-lg-8
       - data = { initial_username: current_user.username, root_url: root_url, action_url: update_username_profile_path(format: :json) }
       #update-username{ data: data }
+    .col-lg-12
       %hr
 
-.row.gl-mt-3
+.row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0.danger-title
       = s_('Profiles|Delete account')

app/views/profiles/personal_access_tokens/index.html.haml

@@ -4,7 +4,7 @@
 - type_plural = _('personal access tokens')
 - @content_class = 'limit-container-width' unless fluid_layout
 
-.row.gl-mt-3
+.row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title
@@ -33,8 +33,9 @@
         revoke_route_helper: ->(token) { revoke_profile_personal_access_token_path(token) }
 
 - unless Gitlab::CurrentSettings.disable_feed_token
+  .col-lg-12
     %hr
-  .row.gl-mt-3
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_('AccessTokens|Feed token')
@@ -51,8 +52,9 @@
         = reset_message.html_safe
 
 - if incoming_email_token_enabled?
+  .col-lg-12
     %hr
-  .row.gl-mt-3
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_('AccessTokens|Incoming email token')
@@ -69,8 +71,9 @@
         = reset_message.html_safe
 
 - if static_objects_external_storage_enabled?
+  .col-lg-12
     %hr
-  .row.gl-mt-3
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4
       %h4.gl-mt-0
         = s_('AccessTokens|Static object token')

app/views/profiles/preferences/show.html.haml

@@ -8,7 +8,7 @@
   = stylesheet_link_tag "themes/#{theme.css_filename}" if theme.css_filename
 
 = form_for @user, url: profile_preferences_path, remote: true, method: :put do |f|
-  .row.gl-mt-3.js-preferences-form
+  .row.gl-mt-3.js-preferences-form.js-search-settings-section
     .col-lg-4.application-theme#navigation-theme
       %h4.gl-mt-0
         = s_('Preferences|Navigation theme')
@@ -25,6 +25,7 @@
     .col-sm-12
       %hr
 
+  .row.js-preferences-form.js-search-settings-section
     .col-lg-4.profile-settings-sidebar#syntax-highlighting-theme
       %h4.gl-mt-0
         = s_('Preferences|Syntax highlighting theme')
@@ -42,6 +43,7 @@
     .col-sm-12
       %hr
 
+  .row.js-preferences-form.js-search-settings-section
     .col-lg-4.profile-settings-sidebar#behavior
       %h4.gl-mt-0
         = s_('Preferences|Behavior')
@@ -97,7 +99,7 @@
 
     .col-sm-12
       %hr
-
+  .row.js-preferences-form.js-search-settings-section
     .col-lg-4.profile-settings-sidebar#localization
       %h4.gl-mt-0
         = _('Localization')

app/views/profiles/show.html.haml

@@ -8,7 +8,7 @@
 = bootstrap_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user gl-mt-3 js-quick-submit gl-show-field-errors' }, authenticity_token: true do |f|
   = form_errors(@user)
 
-  .row
+  .row.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_("Profiles|Public Avatar")
@@ -39,9 +39,9 @@
       - if @user.avatar?
         %hr
         = link_to s_("Profiles|Remove avatar"), profile_avatar_path, data: { confirm: s_("Profiles|Avatar will be removed. Are you sure?") }, method: :delete, class: 'gl-button btn btn-danger btn-inverted'
-
+    .col-lg-12
       %hr
-  .row
+  .row.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0= s_("Profiles|Current status")
       %p= s_("Profiles|This emoji and message will appear on your profile and throughout the interface.")
@@ -75,8 +75,9 @@
             = status_form.check_box :availability, { data: { testid: "user-availability-checkbox" }, label: s_("Profiles|Busy"), wrapper_class: 'gl-mr-0 gl-font-weight-bold' }, availability["busy"], availability["not_set"]
             .gl-text-gray-600.gl-ml-5= s_('Profiles|"Busy" will be shown next to your name')
     - if Feature.enabled?(:user_time_settings)
+      .col-lg-12
         %hr
-    .row.user-time-preferences
+  .row.user-time-preferences.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0= s_("Profiles|Time settings")
       %p= s_("Profiles|You can set your current timezone here")
@@ -86,9 +87,9 @@
       %h5= ("Time zone")
       = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'gl-button btn js-timezone-dropdown input-lg', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
       %input.hidden{ :type => 'hidden', :id => 'user_timezone', :name => 'user[timezone]', value: @user.timezone }
-
+    .col-lg-12
       %hr
-  .row
+  .row.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_("Profiles|Main settings")
@@ -124,7 +125,8 @@
       = f.check_box :include_private_contributions, label: s_('Profiles|Include private contributions on my profile'), wrapper_class: 'mb-2', inline: true
       .help-block
         = s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")
-      .gl-mt-3.gl-mb-3
+  .row.gl-mt-3.gl-mb-3.gl-justify-content-end
+    .col-lg-8
       = f.submit s_("Profiles|Update profile settings"), class: 'gl-button btn btn-success'
       = link_to _("Cancel"), user_path(current_user), class: 'gl-button btn btn-cancel'