Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

15 files changed, 90 insertions, 65 deletions

diff --git a/app/views/profiles/active_sessions/index.html.haml b/app/views/profiles/active_sessions/index.html.haml
index be835233528..e9e6ca3ecce 100644
--- a/app/views/profiles/active_sessions/index.html.haml
+++ b/app/views/profiles/active_sessions/index.html.haml
@@ -1,7 +1,7 @@
 - page_title _('Active Sessions')
 - @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
diff --git a/app/views/profiles/audit_log.html.haml b/app/views/profiles/audit_log.html.haml
index 4bbb4a21b39..9997c8c4b4c 100644
--- a/app/views/profiles/audit_log.html.haml
+++ b/app/views/profiles/audit_log.html.haml
@@ -1,7 +1,7 @@
 - page_title _('Authentication log')
 - @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
diff --git a/app/views/profiles/chat_names/index.html.haml b/app/views/profiles/chat_names/index.html.haml
index 54c34228800..41bd81d0250 100644
--- a/app/views/profiles/chat_names/index.html.haml
+++ b/app/views/profiles/chat_names/index.html.haml
@@ -1,7 +1,7 @@
 - page_title _('Chat')
 - @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
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index 1b8f0328a04..f4513d15a30 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -1,7 +1,7 @@
 - page_title _('Emails')
 - @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
@@ -10,12 +10,12 @@
   .col-lg-8
     %h4.gl-mt-0
       = _('Add email address')
-    = form_for 'email', url: profile_emails_path do |f|
+    = gitlab_ui_form_for 'email', url: profile_emails_path do |f|
       .form-group
         = f.label :email, _('Email'), class: 'label-bold'
         = f.text_field :email, class: 'form-control gl-form-input', data: { qa_selector: 'email_address_field' }
       .gl-mt-3
-        = f.submit _('Add email address'), class: 'gl-button btn btn-confirm', data: { qa_selector: 'add_email_address_button' }
+        = f.submit _('Add email address'), data: { qa_selector: 'add_email_address_button' }, pajamas_button: true
     %hr
     %h4.gl-mt-0
       = _('Linked emails (%{email_count})') % { email_count: @emails.load.size }
diff --git a/app/views/profiles/gpg_keys/_form.html.haml b/app/views/profiles/gpg_keys/_form.html.haml
index 9804a3b7735..ffd8bc3de27 100644
--- a/app/views/profiles/gpg_keys/_form.html.haml
+++ b/app/views/profiles/gpg_keys/_form.html.haml
@@ -1,5 +1,5 @@
 %div
-  = form_for [:profile, @gpg_key], html: { class: 'js-requires-input' } do |f|
+  = gitlab_ui_form_for [:profile, @gpg_key], html: { class: 'js-requires-input' } do |f|
     = form_errors(@gpg_key)
 
     .form-group
@@ -7,4 +7,4 @@
       = f.text_area :key, class: "form-control gl-form-input", rows: 8, required: true, placeholder: _("Don't paste the private part of the GPG key. Paste the public part which begins with '-----BEGIN PGP PUBLIC KEY BLOCK-----'.")
 
     .gl-mt-3
-      = f.submit s_('Profiles|Add key'), class: "gl-button btn btn-confirm"
+      = f.submit s_('Profiles|Add key'), pajamas_button: true
diff --git a/app/views/profiles/gpg_keys/index.html.haml b/app/views/profiles/gpg_keys/index.html.haml
index 91af6953ee1..539a0cd1f0e 100644
--- a/app/views/profiles/gpg_keys/index.html.haml
+++ b/app/views/profiles/gpg_keys/index.html.haml
@@ -1,7 +1,8 @@
 - page_title _('GPG Keys')
+- add_page_specific_style 'page_bundles/profile'
 - @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
diff --git a/app/views/profiles/keys/_form.html.haml b/app/views/profiles/keys/_form.html.haml
index 6f7eb21b7e0..b37a0d9cc1a 100644
--- a/app/views/profiles/keys/_form.html.haml
+++ b/app/views/profiles/keys/_form.html.haml
@@ -1,6 +1,6 @@
 - max_date = ::Gitlab::CurrentSettings.max_ssh_key_lifetime_from_now.to_date if ssh_key_expiration_policy_enabled?
 %div
-  = form_for [:profile, @key], html: { class: 'js-requires-input' } do |f|
+  = gitlab_ui_form_for [:profile, @key], html: { class: 'js-requires-input' } do |f|
     = form_errors(@key)
 
     .form-group
@@ -29,4 +29,4 @@
         button_options: { class: 'js-add-ssh-key-validation-confirm-submit' }) do
         = _("Yes, add it")
     .gl-mt-3
-      = f.submit s_('Profiles|Add key'), class: "gl-button btn btn-confirm js-add-ssh-key-validation-original-submit qa-add-key-button"
+      = f.submit s_('Profiles|Add key'), class: "js-add-ssh-key-validation-original-submit qa-add-key-button", pajamas_button: true
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index 8016d989ff1..04fa1d96204 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -1,39 +1,40 @@
 - is_admin = defined?(admin) ? true : false
 .row.gl-mt-3
   .col-md-4
-    .card
-      .card-header
+    = render Pajamas::CardComponent.new(body_options: { class: 'gl-py-0'}) do |c|
+      - c.header do
         = _('SSH Key')
-      %ul.content-list
-        %li
-          %span.light= _('Title:')
-          %strong= @key.title
-        %li
-          %span.light= _('Created on:')
-          %strong= @key.created_at.to_s(:medium)
-        %li
-          %span.light= _('Expires:')
-          %strong= @key.expires_at.try(:to_s, :medium) || _('Never')
-        %li
-          %span.light= _('Last used on:')
-          %strong= @key.last_used_at.try(:to_s, :medium) || _('Never')
+      - c.body do
+        %ul.content-list
+          %li
+            %span.light= _('Title:')
+            %strong= @key.title
+          %li
+            %span.light= _('Created on:')
+            %strong= @key.created_at.to_s(:medium)
+          %li
+            %span.light= _('Expires:')
+            %strong= @key.expires_at.try(:to_s, :medium) || _('Never')
+          %li
+            %span.light= _('Last used on:')
+            %strong= @key.last_used_at.try(:to_s, :medium) || _('Never')
 
   .col-md-8
     = form_errors(@key, type: 'key') unless @key.valid?
     %pre.well-pre
       = @key.key
-    .card
-      .card-header
+    = render Pajamas::CardComponent.new(body_options: { class: 'gl-py-0'}) do |c|
+      - c.header do
         = _('Fingerprints')
-      %ul.content-list
-        %li
-          %span.light= 'MD5:'
-          %code.key-fingerprint= @key.fingerprint
-        - if @key.fingerprint_sha256.present?
+      - c.body do
+        %ul.content-list
           %li
-            %span.light= 'SHA256:'
-            %code.key-fingerprint= @key.fingerprint_sha256
-
+            %span.light= 'MD5:'
+            %code.key-fingerprint= @key.fingerprint
+          - if @key.fingerprint_sha256.present?
+            %li
+              %span.light= 'SHA256:'
+              %code.key-fingerprint= @key.fingerprint_sha256
 
   .col-md-12
     .float-right
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index 35bf7d81502..69e92b9e508 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -1,7 +1,8 @@
 - page_title _('SSH Keys')
+- add_page_specific_style 'page_bundles/profile'
 - @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
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index 0f4b130a774..23a0d824bfe 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -10,7 +10,7 @@
             %li= msg
 
   = hidden_field_tag :notification_type, 'global'
-  .row.gl-mt-3
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = page_title
diff --git a/app/views/profiles/passwords/edit.html.haml b/app/views/profiles/passwords/edit.html.haml
index 257255eb4d7..99c89dcebb4 100644
--- a/app/views/profiles/passwords/edit.html.haml
+++ b/app/views/profiles/passwords/edit.html.haml
@@ -2,7 +2,7 @@
 - page_title _('Password')
 - @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
@@ -14,7 +14,7 @@
         = _('Change your password')
       - else
         = _('Change your password or recover your current one')
-    = form_for @user, url: profile_password_path, method: :put, html: {class: "update-password"} do |f|
+    = gitlab_ui_form_for @user, url: profile_password_path, method: :put, html: {class: "update-password"} do |f|
       = form_errors(@user)
 
       - unless @user.password_automatically_set?
@@ -31,6 +31,7 @@
         = f.label :password_confirmation, _('Password confirmation'), class: 'label-bold'
         = f.password_field :password_confirmation, required: true, autocomplete: 'new-password', class: 'form-control gl-form-input', data: { qa_selector: 'confirm_password_field' }
       .gl-mt-3.gl-mb-3
-        = f.submit _('Save password'), class: "gl-button btn btn-confirm gl-mr-3", data: { qa_selector: 'save_password_button' }
+        = f.submit _('Save password'), class: "gl-mr-3", data: { qa_selector: 'save_password_button' }, pajamas_button: true
         - unless @user.password_automatically_set?
-          = link_to _('I forgot my password'), reset_profile_password_path, method: :put
+          = render Pajamas::ButtonComponent.new(href: reset_profile_password_path, variant: :link, method: :put) do
+            = _('I forgot my password')
diff --git a/app/views/profiles/passwords/new.html.haml b/app/views/profiles/passwords/new.html.haml
index 6f260eb4cc0..a0a9077afe4 100644
--- a/app/views/profiles/passwords/new.html.haml
+++ b/app/views/profiles/passwords/new.html.haml
@@ -3,7 +3,7 @@
 
 %h1.page-title.gl-font-size-h-display= _('Set up new password')
 %hr
-= form_for @user, url: profile_password_path, method: :post do |f|
+= gitlab_ui_form_for @user, url: profile_password_path, method: :post do |f|
   %p.slead
     = _('Please set a new password before proceeding.')
     %br
@@ -29,4 +29,4 @@
     .col-sm-10
       = f.password_field :password_confirmation, required: true, autocomplete: 'new-password', class: 'form-control gl-form-input', data: { qa_selector: 'confirm_password_field' }
   .form-actions
-    = f.submit _('Set new password'), class: 'gl-button btn btn-confirm', data: { qa_selector: 'set_new_password_button' }
+    = f.submit _('Set new password'), data: { qa_selector: 'set_new_password_button' }, pajamas_button: true
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index e16108c5c22..a1d6ef3fec5 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -104,6 +104,10 @@
         = f.gitlab_ui_checkbox_component :markdown_surround_selection,
           s_('Preferences|Surround text selection when typing quotes or brackets'),
           help_text: sprintf(s_( "Preferences|When you type in a description or comment box, selected text is surrounded by the corresponding character after typing one of the following characters: %{supported_characters}."), { supported_characters: supported_characters }).html_safe
+      .form-group
+        = f.gitlab_ui_checkbox_component :markdown_automatic_lists,
+          s_('Preferences|Automatically add new list items'),
+          help_text: html_escape(s_('Preferences|When you type in a description or comment box, pressing %{kbdOpen}Enter%{kbdClose} in a list adds a new item below.')) % { kbdOpen: '<kbd>'.html_safe, kbdClose: '</kbd>'.html_safe }
 
       .form-group
         = f.label :tab_width, s_('Preferences|Tab width'), class: 'label-bold'
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index f38d6021b18..dfaa4c31cdf 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -1,5 +1,6 @@
 - breadcrumb_title s_("Profiles|Edit Profile")
 - page_title s_("Profiles|Edit Profile")
+- add_page_specific_style 'page_bundles/profile'
 - @content_class = "limit-container-width" unless fluid_layout
 - gravatar_link = link_to Gitlab.config.gravatar.host, 'https://' + Gitlab.config.gravatar.host
 
@@ -25,15 +26,21 @@
     .col-lg-8
       .avatar-image
         = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
-          = image_tag avatar_icon_for_user(@user, 96), alt: '', class: 'avatar s96'
+          = render Pajamas::AvatarComponent.new(@user, size: 96, alt: "", class: 'gl-float-left gl-mr-5')
       %h5.gl-mt-0= s_("Profiles|Upload new avatar")
-      .gl-my-3
-        %button.gl-button.btn.btn-default.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
-        %span.avatar-file-name.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen.")
+      .gl-display-flex.gl-align-items-center.gl-my-3
+        = render Pajamas::ButtonComponent.new(button_options: { class: 'js-choose-user-avatar-button' }) do
+          = s_("Profiles|Choose file...")
+        %span.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen.")
         = f.file_field :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
       .gl-text-gray-500= s_("Profiles|The maximum file size allowed is 200KB.")
       - if @user.avatar?
-        = 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-secondary btn-sm gl-mt-5'
+        = render Pajamas::ButtonComponent.new(variant: :danger,
+          category: :secondary,
+          href: profile_avatar_path,
+          button_options: { class: 'gl-mt-3', data: { confirm: s_("Profiles|Avatar will be removed. Are you sure?") } },
+          method: :delete) do
+          = s_("Profiles|Remove avatar")
     .col-lg-12
       %hr
   .row.js-search-settings-section
@@ -54,9 +61,8 @@
       %h4.gl-mt-0= s_("Profiles|Time settings")
       %p= s_("Profiles|Set your local time zone.")
     .col-lg-8
-      %h5= _("Time zone")
-      = dropdown_tag(_("Select a time zone"), options: { toggle_class: 'gl-button btn js-timezone-dropdown input-lg gl-w-full!', title: _("Select a time zone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
-      %input.hidden{ :type => 'hidden', :id => 'user_timezone', :name => 'user[timezone]', value: @user.timezone }
+      = f.label :user_timezone, _("Time zone")
+      .js-timezone-dropdown{ data: { timezone_data: timezone_data.to_json, initial_value: @user.timezone } }
     .col-lg-12
       %hr
   .row.js-search-settings-section
@@ -134,9 +140,12 @@
         = f.gitlab_ui_checkbox_component :include_private_contributions,
           s_('Profiles|Include private contributions on my profile'),
           help_text: s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information.")
-  %hr
-  = f.submit s_("Profiles|Update profile settings"), class: 'gl-button btn btn-confirm gl-mr-3 js-password-prompt-btn'
-  = link_to _("Cancel"), user_path(current_user), class: 'gl-button btn btn-default btn-cancel'
+  .row.js-hide-when-nothing-matches-search
+    .col-lg-12
+      %hr
+      = f.submit s_("Profiles|Update profile settings"), class: 'gl-mr-3 js-password-prompt-btn', pajamas_button: true
+      = render Pajamas::ButtonComponent.new(href: user_path(current_user)) do
+        = s_('TagsPage|Cancel')
 
 #password-prompt-modal
 
@@ -146,19 +155,19 @@
       .modal-header
         %h4.modal-title
           = s_("Profiles|Position and size your new avatar")
-        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _("Close") }
-          %span{ "aria-hidden": "true" } &times;
+        = render Pajamas::ButtonComponent.new(category: :tertiary,
+          icon: 'close',
+          button_options: { class: 'close', "data-dismiss": "modal", "aria-label" => _("Close") })
       .modal-body
         .profile-crop-image-container
           %img.modal-profile-crop-image{ alt: s_("Profiles|Avatar cropper") }
-        .crop-controls
+        .gl-text-center.gl-mt-4
           .btn-group
-            %button.btn.gl-button.btn-default{ data: { method: 'zoom', option: '-0.1' } }
-              %span
-                = sprite_icon('search-minus')
-            %button.btn.gl-button.btn-default{ data: { method: 'zoom', option: '0.1' } }
-              %span
-                = sprite_icon('search-plus')
+            = render Pajamas::ButtonComponent.new(icon: 'search-minus',
+              button_options: {data: { method: 'zoom', option: '-0.1' }})
+            = render Pajamas::ButtonComponent.new(icon: 'search-plus',
+              button_options: {data: { method: 'zoom', option: '0.1' }})
       .modal-footer
-        %button.btn.gl-button.btn-confirm.js-upload-user-avatar{ type: 'button' }
+        = render Pajamas::ButtonComponent.new(variant: :confirm,
+          button_options: { class: 'js-upload-user-avatar'}) do
           = s_("Profiles|Set new profile picture")
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 855c73fd323..4c045574834 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -17,6 +17,13 @@
           = _("You've already enabled two-factor authentication using one time password authenticators. In order to register a different device, you must first disable two-factor authentication.")
         %p
           = _('If you lose your recovery codes you can generate new ones, invalidating all previous codes.')
+        - if @error
+          = render Pajamas::AlertComponent.new(title: @error[:message],
+            variant: :danger,
+            alert_options: { class: 'gl-mb-3' },
+            dismissible: false) do |c|
+            = c.body do
+              = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
         .js-manage-two-factor-form{ data: { webauthn_enabled: webauthn_enabled, current_password_required: current_password_required?.to_s, profile_two_factor_auth_path: profile_two_factor_auth_path, profile_two_factor_auth_method: 'delete', codes_profile_two_factor_auth_path: codes_profile_two_factor_auth_path, codes_profile_two_factor_auth_method: 'post' } }
 
       - else
@@ -46,6 +53,7 @@
           - if @error
             = render Pajamas::AlertComponent.new(title: @error[:message],
               variant: :danger,
+              alert_options: { class: 'gl-mb-3' },
               dismissible: false) do |c|
               = c.body do
                 = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'