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]
-  %hr
+    .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 }
-  %hr
+    .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
-  %hr
-  .row.gl-mt-3
+  .col-lg-12
+    %hr
+  .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?
-  %hr
-  .row.gl-mt-3
+  .col-lg-12
+    %hr
+  .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?
-  %hr
-  .row.gl-mt-3
+  .col-lg-12
+    %hr
+  .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'
-
-  %hr
-  .row
+    .col-lg-12
+      %hr
+  .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.")
@@ -74,21 +74,22 @@
           .checkbox-icon-inline-wrapper
             = 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)
-    %hr
-    .row.user-time-preferences
-      .col-lg-4.profile-settings-sidebar
-        %h4.gl-mt-0= s_("Profiles|Time settings")
-        %p= s_("Profiles|You can set your current timezone here")
-      .col-lg-8
-        -# TODO: might need an entry in user/profile.md to describe some of these settings
-        -# https://gitlab.com/gitlab-org/gitlab-foss/issues/60070
-        %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 }
-
-  %hr
-  .row
+    - if Feature.enabled?(:user_time_settings)
+      .col-lg-12
+        %hr
+  .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")
+    .col-lg-8
+      -# TODO: might need an entry in user/profile.md to describe some of these settings
+      -# https://gitlab.com/gitlab-org/gitlab-foss/issues/60070
+      %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.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_("Profiles|Main settings")
@@ -124,9 +125,10 @@
       = 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
-        = 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'
+  .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'
 
 .modal.modal-profile-crop{ data: { cropper_css_path: ActionController::Base.helpers.stylesheet_path('lazy_bundles/cropper.css') } }
   .modal-dialog