Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

12 files changed, 42 insertions, 43 deletions

diff --git a/app/views/profiles/_email_settings.html.haml b/app/views/profiles/_email_settings.html.haml
index 35cad79b6fd..457d6690a78 100644
--- a/app/views/profiles/_email_settings.html.haml
+++ b/app/views/profiles/_email_settings.html.haml
@@ -7,7 +7,7 @@
 
 .form-group.gl-form-group
   = form.label :email, _('Email')
-  = form.text_field :email, required: true, class: 'gl-form-input form-control gl-form-input-lg', value: (@user.email unless @user.temp_oauth_email?), readonly: readonly || email_change_disabled
+  = form.text_field :email, required: true, class: 'gl-form-input form-control gl-md-form-input-lg', value: (@user.email unless @user.temp_oauth_email?), readonly: readonly || email_change_disabled
   %small.form-text.text-gl-muted
     = help_text.html_safe
 
@@ -16,7 +16,7 @@
 
 .form-group.gl-form-group
   = form.label :public_email, s_('Profiles|Public email')
-  .gl-form-input-lg
+  .gl-md-form-input-lg
     = form.select :public_email,
       options_for_select(@user.public_verified_emails, selected: @user.public_email),
       { include_blank: s_("Profiles|Do not show on profile") },
@@ -29,7 +29,7 @@
   - commit_email_link_start = '<a href="%{url}">'.html_safe % { url: commit_email_link_url }
   - commit_email_docs_link = s_('Profiles|This email will be used for web based operations, such as edits and merges. %{commit_email_link_start}Learn more%{commit_email_link_end}').html_safe % { commit_email_link_start: commit_email_link_start, commit_email_link_end: '</a>'.html_safe }
   = form.label :commit_email, s_('Profiles|Commit email')
-  .gl-form-input-lg
+  .gl-md-form-input-lg
     = form.select :commit_email,
       options_for_select(commit_email_select_options(@user), selected: @user.commit_email),
       {},
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index bbbb8154c51..745d3c62c5d 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -2,15 +2,15 @@
 - @content_class = "limit-container-width" unless fluid_layout
 
 - if current_user.ldap_user?
-  = render Pajamas::AlertComponent.new(alert_class: 'gl-my-5',
+  = render Pajamas::AlertComponent.new(alert_options: { class: 'gl-my-5' },
     dismissible: false) do |c|
     = c.body do
       = s_('Profiles|Some options are unavailable for LDAP accounts')
 
 - if params[:two_factor_auth_enabled_successfully]
   = render Pajamas::AlertComponent.new(variant: :success,
-    alert_class: 'gl-my-5',
-    close_button_class: 'js-close-2fa-enabled-success-alert') do |c|
+    alert_options: { class: 'gl-my-5' },
+    close_button_options: { class: 'js-close-2fa-enabled-success-alert' }) do |c|
     = c.body do
       = html_escape(_('You have set up 2FA for your account! If you lose access to your 2FA device, you can use your recovery codes to access your account. Alternatively, if you upload an SSH key, you can %{anchorOpen}use that key to generate additional recovery codes%{anchorClose}.')) % { anchorOpen: '<a href="%{href}">'.html_safe % { href: help_page_path('user/profile/account/two_factor_authentication', anchor: 'generate-new-recovery-codes-using-ssh') }, anchorClose: '</a>'.html_safe }
 
@@ -85,7 +85,7 @@
         %p
           = s_('Profiles|GitLab is unable to verify your identity automatically. For security purposes, you must set a password by %{openingTag}resetting your password%{closingTag} to delete your account.').html_safe % { openingTag: "<a href='#{reset_profile_password_path}' rel=\"nofollow\" data-method=\"put\">".html_safe, closingTag: '</a>'.html_safe}
         %p
-          = s_('Profiles|If after setting a password, the option to delete your account is still not available, please email %{data_request} to begin the account deletion process.').html_safe % { data_request: mail_to('personal-data-request@gitlab.com') }
+          = s_('Profiles|If after setting a password, the option to delete your account is still not available, please %{link_start}submit a request%{link_end} to begin the account deletion process.').html_safe % { link_start: '<a href="https://support.gitlab.io/account-deletion/" rel="nofollow noreferrer noopener" target="_blank">'.html_safe, link_end: '</a>'.html_safe}
       - else
         %p
           = s_("Profiles|You don't have access to delete this user.")
diff --git a/app/views/profiles/chat_names/_chat_name.html.haml b/app/views/profiles/chat_names/_chat_name.html.haml
index 8f80c9fdc6c..0b45869bdf9 100644
--- a/app/views/profiles/chat_names/_chat_name.html.haml
+++ b/app/views/profiles/chat_names/_chat_name.html.haml
@@ -6,11 +6,11 @@
       - if can?(current_user, :read_project, project)
         = link_to project.full_name, project_path(project)
       - else
-        .light= _('N/A')
+        .light= _('Not applicable.')
   %td
     %strong
       - if can?(current_user, :admin_project, project)
-        = link_to integration.title, edit_project_integration_path(project, integration)
+        = link_to integration.title, edit_project_settings_integration_path(project, integration)
       - else
         = integration.title
   %td
diff --git a/app/views/profiles/chat_names/new.html.haml b/app/views/profiles/chat_names/new.html.haml
index f008abf376d..303b8b10027 100644
--- a/app/views/profiles/chat_names/new.html.haml
+++ b/app/views/profiles/chat_names/new.html.haml
@@ -1,4 +1,4 @@
-%h3.page-title
+%h1.page-title.gl-font-size-h-display
   = _("Authorization required")
 %main{ :role => "main" }
   %p.h4
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index fef55f5d384..69f765ee163 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -56,7 +56,7 @@
               = gl_badge_tag s_('Profiles|Notification email'), variant: :info
             - unless email.confirmed?
               - confirm_title = "#{email.confirmation_sent_at ? _('Resend confirmation email') : _('Send confirmation email')}"
-              = link_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, class: 'gl-button btn btn-sm btn-warning gl-ml-3'
+              = link_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, class: 'gl-button btn btn-sm btn-default gl-ml-3'
 
             = link_to profile_email_path(email), data: { confirm: _('Are you sure?'), qa_selector: 'delete_email_link'}, method: :delete, class: 'gl-button btn btn-sm btn-danger gl-ml-3' do
               %span.sr-only= _('Remove')
diff --git a/app/views/profiles/keys/_form.html.haml b/app/views/profiles/keys/_form.html.haml
index 941b8545745..a749fbd1eec 100644
--- a/app/views/profiles/keys/_form.html.haml
+++ b/app/views/profiles/keys/_form.html.haml
@@ -1,7 +1,7 @@
 - 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|
-    = form_errors(@key)
+    = form_errors(@key, pajamas_alert: true)
 
     .form-group
       = f.label :key, s_('Profiles|Key'), class: 'label-bold'
@@ -23,7 +23,8 @@
         %strong= _('Oops, are you sure?')
         %p= s_("Profiles|Publicly visible private SSH keys can compromise your system.")
 
-      %button.btn.gl-button.btn-confirm.js-add-ssh-key-validation-confirm-submit= _("Yes, add it")
-
+      = render Pajamas::ButtonComponent.new(variant: :confirm,
+        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"
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index 8016d989ff1..8f7ccadd108 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -19,7 +19,7 @@
           %strong= @key.last_used_at.try(:to_s, :medium) || _('Never')
 
   .col-md-8
-    = form_errors(@key, type: 'key') unless @key.valid?
+    = form_errors(@key, type: 'key', pajamas_alert: true) unless @key.valid?
     %pre.well-pre
       = @key.key
     .card
diff --git a/app/views/profiles/passwords/new.html.haml b/app/views/profiles/passwords/new.html.haml
index 9154c94abb6..a2180dc68a6 100644
--- a/app/views/profiles/passwords/new.html.haml
+++ b/app/views/profiles/passwords/new.html.haml
@@ -1,7 +1,7 @@
 - page_title _('New Password')
 - breadcrumb_title _('New Password')
 
-%h3.page-title= _('Set up new password')
+%h1.page-title.gl-font-size-h-display= _('Set up new password')
 %hr
 = form_for @user, url: profile_password_path, method: :post do |f|
   %p.slead
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 887d07f7a20..636defb3f10 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -15,22 +15,16 @@
       = s_('AccessTokens|They are the only accepted password when you have Two-Factor Authentication (2FA) enabled.')
 
   .col-lg-8
-    - if @new_personal_access_token
-      = render 'shared/access_tokens/created_container',
-        type: type,
-        new_token_value: @new_personal_access_token
+    #js-new-access-token-app{ data: { access_token_type: type } }
 
     = render 'shared/access_tokens/form',
+        ajax: true,
         type: type,
         path: profile_personal_access_tokens_path,
         token: @personal_access_token,
         scopes: @scopes,
         help_path: help_page_path('user/profile/personal_access_tokens.md', anchor: 'personal-access-token-scopes')
 
-    = render 'shared/access_tokens/table',
-        type: type,
-        type_plural: type_plural,
-        active_tokens: @active_personal_access_tokens,
-        revoke_route_helper: ->(token) { revoke_profile_personal_access_token_path(token) }
+    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_personal_access_tokens.to_json } }
 
 #js-tokens-app{ data: { tokens_data: tokens_app_data } }
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 8c799a5e3fe..a63e02fca1d 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -1,6 +1,7 @@
 - page_title _('Preferences')
 - @content_class = "limit-container-width" unless fluid_layout
 - user_theme_id = Gitlab::Themes.for_user(@user).id
+- user_color_schema_id = Gitlab::ColorSchemes.for_user(@user).id
 - user_fields = { theme: user_theme_id, gitpod_enabled: @user.gitpod_enabled, sourcegraph_enabled: @user.sourcegraph_enabled }.to_json
 - @themes = Gitlab::Themes::available_themes.to_json
 - data_attributes = { themes: @themes, integration_views: integration_views.to_json, user_fields: user_fields, body_classes: Gitlab::Themes.body_classes, profile_preferences_path: profile_preferences_path }
@@ -12,16 +13,17 @@
   .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')
+        = s_('Preferences|Color theme')
       %p
-        = s_('Preferences|Customize the appearance of the application header and navigation sidebar.')
+        = s_('Preferences|Customize the color of GitLab.')
     .col-lg-8.application-theme
       .row
         - Gitlab::Themes.each do |theme|
           %label.col-6.col-sm-4.col-md-3.gl-mb-5.gl-text-center
             .preview{ class: theme.css_class }
-            = f.radio_button :theme_id, theme.id, checked: user_theme_id == theme.id
-            = theme.name
+            = f.gitlab_ui_radio_component :theme_id, theme.id,
+              theme.name,
+              radio_options: { checked: user_theme_id == theme.id }
 
     .col-sm-12
       %hr
@@ -38,8 +40,9 @@
       - Gitlab::ColorSchemes.each do |scheme|
         = label_tag do
           .preview= image_tag "#{scheme.css_class}-scheme-preview.png"
-          = f.radio_button :color_scheme_id, scheme.id
-          = scheme.name
+          = f.gitlab_ui_radio_component :color_scheme_id, scheme.id,
+             scheme.name,
+             radio_options: { checked: user_color_schema_id == scheme.id }
 
     .col-sm-12
       %hr
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 107c7cebc61..d1f1ff892d5 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -109,44 +109,44 @@
           = f.text_field :id, class: 'gl-form-input form-control', readonly: true
       .form-group.gl-form-group
         = f.label :pronouns, s_('Profiles|Pronouns')
-        = f.text_field :pronouns, class: 'gl-form-input form-control gl-form-input-lg'
+        = f.text_field :pronouns, class: 'gl-form-input form-control gl-md-form-input-lg'
         %small.form-text.text-gl-muted
           = s_("Profiles|Enter your pronouns to let people know how to refer to you")
       .form-group.gl-form-group
         = f.label :pronunciation, s_('Profiles|Pronunciation')
-        = f.text_field :pronunciation, class: 'gl-form-input form-control gl-form-input-lg'
+        = f.text_field :pronunciation, class: 'gl-form-input form-control gl-md-form-input-lg'
         %small.form-text.text-gl-muted
           = s_("Profiles|Enter how your name is pronounced to help people address you correctly")
       = render_if_exists 'profiles/extra_settings', form: f
       = render_if_exists 'profiles/email_settings', form: f
       .form-group.gl-form-group
         = f.label :skype
-        = f.text_field :skype, class: 'gl-form-input form-control gl-form-input-lg', placeholder: s_("Profiles|username")
+        = f.text_field :skype, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|username")
       .form-group.gl-form-group
         = f.label :linkedin
-        = f.text_field :linkedin, class: 'gl-form-input form-control gl-form-input-lg'
+        = f.text_field :linkedin, class: 'gl-form-input form-control gl-md-form-input-lg'
         %small.form-text.text-gl-muted
           = s_("Profiles|Your LinkedIn profile name from linkedin.com/in/profilename")
       .form-group.gl-form-group
         = f.label :twitter
-        = f.text_field :twitter, class: 'gl-form-input form-control gl-form-input-lg', placeholder: s_("Profiles|@username")
+        = f.text_field :twitter, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|@username")
       .form-group.gl-form-group
         = f.label :website_url, s_('Profiles|Website url')
-        = f.text_field :website_url, class: 'gl-form-input form-control gl-form-input-lg', placeholder: s_("Profiles|https://website.com")
+        = f.text_field :website_url, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|https://website.com")
       .form-group.gl-form-group
         = f.label :location, s_('Profiles|Location')
         - if @user.read_only_attribute?(:location)
-          = f.text_field :location, class: 'gl-form-input form-control gl-form-input-lg', readonly: true
+          = f.text_field :location, class: 'gl-form-input form-control gl-md-form-input-lg', readonly: true
           %small.form-text.text-gl-muted
             = s_("Profiles|Your location was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:location) }
         - else
-          = f.text_field :location, class: 'gl-form-input form-control gl-form-input-lg', placeholder: s_("Profiles|City, country")
+          = f.text_field :location, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|City, country")
       .form-group.gl-form-group
         = f.label :job_title, s_('Profiles|Job title')
-        = f.text_field :job_title, class: 'gl-form-input form-control gl-form-input-lg'
+        = f.text_field :job_title, class: 'gl-form-input form-control gl-md-form-input-lg'
       .form-group.gl-form-group
         = f.label :organization, s_('Profiles|Organization')
-        = f.text_field :organization, class: 'gl-form-input form-control gl-form-input-lg'
+        = f.text_field :organization, class: 'gl-form-input form-control gl-md-form-input-lg'
         %small.form-text.text-gl-muted
           = s_("Profiles|Who you represent or work for")
       .form-group.gl-form-group
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index ace644a493b..845baae3bb2 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -24,8 +24,9 @@
           - register_2fa_token = _('We recommend cloud-based mobile authenticator apps such as Authy, Duo Mobile, and LastPass. They can restore access if you lose your hardware device.')
           = register_2fa_token.html_safe
         .row.gl-mb-3
-          .col-md-4.gl-pt-2{ style: 'background: #fff' }
-            = raw @qr_code
+          .col-md-4.gl-min-w-fit-content
+            .gl-p-2.gl-mb-3{ style: 'background: #fff' }
+              = raw @qr_code
           .col-md-8
             .account-well
               %p.gl-mt-0.gl-mb-0