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

61 files changed, 439 insertions, 422 deletions

diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml
index c0e42f22119..c091a2180c5 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -17,14 +17,14 @@
 
     .form-group
       = f.label :receive_max_input_size, _('Maximum push size (MB)'), class: 'label-light'
-      = f.number_field :receive_max_input_size, class: 'form-control gl-form-input qa-receive-max-input-size-field', title: _('Maximum size limit for a single commit.'), data: { toggle: 'tooltip', container: 'body' }
+      = f.number_field :receive_max_input_size, class: 'form-control gl-form-input', title: _('Maximum size limit for a single commit.'), data: { toggle: 'tooltip', container: 'body', qa_selector: 'receive_max_input_size_field' }
     .form-group
       = f.label :max_export_size, _('Maximum export size (MB)'), class: 'label-light'
       = f.number_field :max_export_size, class: 'form-control gl-form-input', title: _('Maximum size of export files.'), data: { toggle: 'tooltip', container: 'body' }
       %span.form-text.text-muted= _('Set to 0 for no size limit.')
     .form-group
       = f.label :max_import_size, _('Maximum import size (MB)'), class: 'label-light'
-      = f.number_field :max_import_size, class: 'form-control gl-form-input qa-receive-max-import-size-field', title: _('Maximum size of import files.'), data: { toggle: 'tooltip', container: 'body' }
+      = f.number_field :max_import_size, class: 'form-control gl-form-input', title: _('Maximum size of import files.'), data: { toggle: 'tooltip', container: 'body' }
       %span.form-text.text-muted= _('Only effective when remote storage is enabled. Set to 0 for no size limit.')
     .form-group
       = f.label :session_expire_delay, _('Session duration (minutes)'), class: 'label-light'
@@ -54,10 +54,10 @@
         - dormant_users_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: dormant_users_help_link }
         = f.gitlab_ui_checkbox_component :deactivate_dormant_users, _('Deactivate dormant users after a period of inactivity'), help_text: _('Users can reactivate their account by signing in. %{link_start}Learn more.%{link_end}').html_safe % { link_start: dormant_users_help_link_start, link_end: '</a>'.html_safe }
         .form-group
-          = f.label :deactivate_dormant_users_period, _('Period of inactivity (days)'), class: 'label-light'
-          = f.number_field :deactivate_dormant_users_period, class: 'form-control gl-form-input', min: '1'
+          = f.label :deactivate_dormant_users_period, _('Days of inactivity before deactivation'), class: 'label-light'
+          = f.number_field :deactivate_dormant_users_period, class: 'form-control gl-form-input', min: '90', step: '1'
           .form-text.text-muted
-            = _('Period of inactivity before deactivation.')
+            = _('Must be 90 days or more.')
 
     .form-group
       = f.label :personal_access_token_prefix, _('Personal Access Token prefix'), class: 'label-light'
@@ -67,6 +67,6 @@
       = f.gitlab_ui_checkbox_component :user_show_add_ssh_key_message, _("Inform users without uploaded SSH keys that they can't push over SSH until one is added")
 
     = render 'admin/application_settings/invitation_flow_enforcement', form: f
-    = render_if_exists 'admin/application_settings/updating_name_disabled_for_users', form: f
+    = render 'admin/application_settings/user_restrictions', form: f
     = render_if_exists 'admin/application_settings/availability_on_namespace_setting', form: f
-  = f.submit _('Save changes'), class: 'qa-save-changes-button', pajamas_button: true
+  = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_ci_cd.html.haml b/app/views/admin/application_settings/_ci_cd.html.haml
index 05aea2b343d..f6635ad17ef 100644
--- a/app/views/admin/application_settings/_ci_cd.html.haml
+++ b/app/views/admin/application_settings/_ci_cd.html.haml
@@ -53,8 +53,7 @@
           = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'specify-a-custom-cicd-configuration-file'), target: '_blank', rel: 'noopener noreferrer'
       .form-group
         = f.gitlab_ui_checkbox_component :suggest_pipeline_enabled, s_('AdminSettings|Enable pipeline suggestion banner'), help_text: s_('AdminSettings|Display a banner on merge requests in projects with no pipelines to initiate steps to add a .gitlab-ci.yml file.')
-      - if Feature.enabled?(:enforce_runner_token_expires_at)
-        #js-runner-token-expiration-intervals{ data: runner_token_expiration_interval_attributes }
+      #js-runner-token-expiration-intervals{ data: runner_token_expiration_interval_attributes }
 
     = f.submit _('Save changes'), pajamas_button: true
 
diff --git a/app/views/admin/application_settings/_eks.html.haml b/app/views/admin/application_settings/_eks.html.haml
index 0bb9be497d9..62c61ad356f 100644
--- a/app/views/admin/application_settings/_eks.html.haml
+++ b/app/views/admin/application_settings/_eks.html.haml
@@ -31,4 +31,4 @@
           .form-text.text-muted
             = _('Only required if not using role instance credentials.')
 
-      = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+      = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_email.html.haml b/app/views/admin/application_settings/_email.html.haml
index fd65d4029f5..e0ff1f4be43 100644
--- a/app/views/admin/application_settings/_email.html.haml
+++ b/app/views/admin/application_settings/_email.html.haml
@@ -21,4 +21,4 @@
     .form-group
       = f.gitlab_ui_checkbox_component :user_deactivation_emails_enabled, _('Enable user deactivation emails'), help_text: _('Send emails to users upon account deactivation.')
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_external_authorization_service_form.html.haml b/app/views/admin/application_settings/_external_authorization_service_form.html.haml
index 7919fde631f..a5e10846488 100644
--- a/app/views/admin/application_settings/_external_authorization_service_form.html.haml
+++ b/app/views/admin/application_settings/_external_authorization_service_form.html.haml
@@ -47,4 +47,4 @@
           = f.text_field :external_authorization_service_default_label, class: 'form-control gl-form-input'
           %span.form-text.text-muted
             = external_authorization_client_url_help_text
-      = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+      = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_floc.html.haml b/app/views/admin/application_settings/_floc.html.haml
index e56ba635890..cb8b2d3dfcd 100644
--- a/app/views/admin/application_settings/_floc.html.haml
+++ b/app/views/admin/application_settings/_floc.html.haml
@@ -19,4 +19,4 @@
         .form-group
           = f.gitlab_ui_checkbox_component :floc_enabled,
           s_('FloC|Participate in FLoC')
-      = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
+      = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_gitaly.html.haml b/app/views/admin/application_settings/_gitaly.html.haml
index ade6dac606a..f459ff5abc4 100644
--- a/app/views/admin/application_settings/_gitaly.html.haml
+++ b/app/views/admin/application_settings/_gitaly.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-gitaly-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-gitaly-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
@@ -18,4 +18,4 @@
       .form-text.text-muted
         = _('Timeout for moderately fast Gitaly operations (in seconds). Provide a value between Default timeout and Fast timeout.')
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_gitpod.html.haml b/app/views/admin/application_settings/_gitpod.html.haml
index df534f18bde..09817a9172f 100644
--- a/app/views/admin/application_settings/_gitpod.html.haml
+++ b/app/views/admin/application_settings/_gitpod.html.haml
@@ -26,4 +26,4 @@
             = s_('Gitpod|The URL to your Gitpod instance configured to read your GitLab projects, such as https://gitpod.example.com.')
             - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('integration/gitpod', anchor: 'enable-gitpod-in-your-user-settings') }
             = s_('Gitpod|To use the integration, each user must also enable Gitpod on their GitLab account. %{link_start}How do I enable it?%{link_end} ').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-      = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
+      = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_help_page.html.haml b/app/views/admin/application_settings/_help_page.html.haml
index 21eb4caf579..11ebad07e9a 100644
--- a/app/views/admin/application_settings/_help_page.html.haml
+++ b/app/views/admin/application_settings/_help_page.html.haml
@@ -21,4 +21,4 @@
       - docs_link_url = help_page_path('user/admin_area/settings/help_page', anchor: 'destination-requirements')
       - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: docs_link_url }
       %span.form-text.text-muted#support_help_block= html_escape(_('Requests for pages at %{code_start}%{help_text_url}%{code_end} redirect to the URL. The destination must meet certain requirements. %{docs_link_start}Learn more.%{docs_link_end}')) % { code_start: '<code>'.html_safe, help_text_url: help_url, code_end: '</code>'.html_safe, docs_link_start: docs_link_start, docs_link_end: '</a>'.html_safe }
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_import_export_limits.html.haml b/app/views/admin/application_settings/_import_export_limits.html.haml
index bc4a1577f90..8cb7915f847 100644
--- a/app/views/admin/application_settings/_import_export_limits.html.haml
+++ b/app/views/admin/application_settings/_import_export_limits.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-import-export-limits-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-import-export-limits-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
@@ -35,4 +35,4 @@
       = f.label :group_download_export_limit, _('Maximum group export download requests per minute'), class: 'label-bold'
       = f.number_field :group_download_export_limit, class: 'form-control gl-form-input'
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_ip_limits.html.haml b/app/views/admin/application_settings/_ip_limits.html.haml
index 4362ae9cb9b..01d7bf0af67 100644
--- a/app/views/admin/application_settings/_ip_limits.html.haml
+++ b/app/views/admin/application_settings/_ip_limits.html.haml
@@ -66,4 +66,4 @@
       .form-text.text-muted
         = html_escape(_("If blank, defaults to %{code_open}Retry later%{code_close}.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_issue_limits.html.haml b/app/views/admin/application_settings/_issue_limits.html.haml
index 431e2a64c46..147aab443b2 100644
--- a/app/views/admin/application_settings/_issue_limits.html.haml
+++ b/app/views/admin/application_settings/_issue_limits.html.haml
@@ -6,4 +6,4 @@
       = f.label :issues_create_limit, _('Maximum number of requests per minute')
       = f.number_field :issues_create_limit, class: 'form-control gl-form-input'
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_jira_connect_application_key.html.haml b/app/views/admin/application_settings/_jira_connect_application_key.html.haml
index e3df408cd4c..b67e7680720 100644
--- a/app/views/admin/application_settings/_jira_connect_application_key.html.haml
+++ b/app/views/admin/application_settings/_jira_connect_application_key.html.haml
@@ -18,4 +18,4 @@
         .form-group
           = f.label :jira_connect_application_key, s_('JiraConnect|Jira Connect Application ID'), class: 'label-bold'
           = f.text_field :jira_connect_application_key, class: 'form-control gl-form-input'
-      = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
+      = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_localization.html.haml b/app/views/admin/application_settings/_localization.html.haml
index a6ed48ef4fe..90cb34395d8 100644
--- a/app/views/admin/application_settings/_localization.html.haml
+++ b/app/views/admin/application_settings/_localization.html.haml
@@ -15,5 +15,5 @@
       - time_tracking_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: time_tracking_help_link }
       = f.gitlab_ui_checkbox_component :time_tracking_limit_to_hours, _('Limit display of time tracking units to hours.'), help_text: _('Display time tracking in issues in total hours only. %{link_start}What is time tracking?%{link_end}').html_safe % { link_start: time_tracking_help_link_start, link_end: '</a>'.html_safe }
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
 
diff --git a/app/views/admin/application_settings/_network_rate_limits.html.haml b/app/views/admin/application_settings/_network_rate_limits.html.haml
index f1857a9749a..300180f7b9a 100644
--- a/app/views/admin/application_settings/_network_rate_limits.html.haml
+++ b/app/views/admin/application_settings/_network_rate_limits.html.haml
@@ -30,4 +30,4 @@
       = f.label :"throttle_authenticated_#{setting_fragment}_period_in_seconds", _('Authenticated API rate limit period in seconds'), class: 'label-bold'
       = f.number_field :"throttle_authenticated_#{setting_fragment}_period_in_seconds", class: 'form-control gl-form-input'
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_note_limits.html.haml b/app/views/admin/application_settings/_note_limits.html.haml
index 40760b3c45e..99cf0ebc669 100644
--- a/app/views/admin/application_settings/_note_limits.html.haml
+++ b/app/views/admin/application_settings/_note_limits.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-note-limits-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-note-limits-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
@@ -12,4 +12,4 @@
         = _('List of users who are allowed to exceed the rate limit. Example: username1, username2')
 
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_outbound.html.haml b/app/views/admin/application_settings/_outbound.html.haml
index bacfe056683..3505a3bf3ee 100644
--- a/app/views/admin/application_settings/_outbound.html.haml
+++ b/app/views/admin/application_settings/_outbound.html.haml
@@ -22,4 +22,4 @@
           s_('OutboundRequests|Enforce DNS rebinding attack protection'),
           help_text: _('OutboundRequests|Resolve IP addresses once and uses them to submit requests.')
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_package_registry.html.haml b/app/views/admin/application_settings/_package_registry.html.haml
index 4bdfa5bfe83..3506038ca68 100644
--- a/app/views/admin/application_settings/_package_registry.html.haml
+++ b/app/views/admin/application_settings/_package_registry.html.haml
@@ -20,12 +20,12 @@
           %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs.mb-3
             - @plans.each_with_index do |plan, index|
               %li
-                = link_to admin_plan_limits_path(anchor: 'js-package-settings'), data: { target: "div#plan#{index}", action: "plan#{index}", toggle: 'tab'}, class: index == 0 ? 'active': '' do
+                = link_to admin_plan_limits_path(anchor: 'js-package-settings'), data: { target: "div#plan-package#{index}", action: "plan#{index}", toggle: 'tab'}, class: index == 0 ? 'active': '' do
                   = plan.name.capitalize
         .tab-content
           - @plans.each_with_index do |plan, index|
-            .tab-pane{ :id => "plan#{index}", class: index == 0 ? 'active': '' }
-              = form_for plan.actual_limits, url: admin_plan_limits_path(anchor: 'js-package-settings'), html: { class: 'fieldset-form' }, method: :post do |f|
+            .tab-pane{ :id => "plan-package#{index}", class: index == 0 ? 'active': '' }
+              = gitlab_ui_form_for plan.actual_limits, url: admin_plan_limits_path(anchor: 'js-package-settings'), html: { class: 'fieldset-form' }, method: :post do |f|
                 = form_errors(plan)
                 %fieldset
                   = f.hidden_field(:plan_id, value: plan.id)
@@ -53,4 +53,4 @@
                   .form-group
                     = f.label :generic_packages_max_file_size, _('Generic package file size in bytes'), class: 'label-bold'
                     = f.number_field :generic_packages_max_file_size, class: 'form-control gl-form-input'
-                  = f.submit _('Save %{name} size limits').html_safe % { name: plan.name.capitalize }, class: 'btn gl-button btn-confirm'
+                  = f.submit _('Save %{name} size limits').html_safe % { name: plan.name.capitalize }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_pages.html.haml b/app/views/admin/application_settings/_pages.html.haml
index cf43d3ddeca..97d9426581e 100644
--- a/app/views/admin/application_settings/_pages.html.haml
+++ b/app/views/admin/application_settings/_pages.html.haml
@@ -46,4 +46,4 @@
         = f.gitlab_ui_checkbox_component :lets_encrypt_terms_of_service_accepted,
           s_("AdminSettings|I have read and agree to the Let's Encrypt %{link_start}Terms of Service%{link_end} (PDF).").html_safe % { link_start: terms_of_service_link_start, link_end: '</a>'.html_safe }
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_performance.html.haml b/app/views/admin/application_settings/_performance.html.haml
index e0ba8d93fbd..86a01e1785e 100644
--- a/app/views/admin/application_settings/_performance.html.haml
+++ b/app/views/admin/application_settings/_performance.html.haml
@@ -23,4 +23,4 @@
       .form-text.text-muted
         = _('Threshold number of changes (branches or tags) in a single push above which a bulk push event is created (default is 3).')
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_performance_bar.html.haml b/app/views/admin/application_settings/_performance_bar.html.haml
index 4e37c4c3c98..d4f6d84ea74 100644
--- a/app/views/admin/application_settings/_performance_bar.html.haml
+++ b/app/views/admin/application_settings/_performance_bar.html.haml
@@ -10,4 +10,4 @@
       = f.label :performance_bar_allowed_group_path, _('Allow access to members of the following group'), class: 'label-bold'
       = f.text_field :performance_bar_allowed_group_path, class: 'form-control gl-form-input', placeholder: 'my-org/my-group', value: @application_setting.performance_bar_allowed_group&.full_path
 
-  = f.submit _('Save changes'), class: 'gl-button btn btn-confirm qa-save-changes-button'
+  = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_pipeline_limits.html.haml b/app/views/admin/application_settings/_pipeline_limits.html.haml
index e93823172db..b7dffe63777 100644
--- a/app/views/admin/application_settings/_pipeline_limits.html.haml
+++ b/app/views/admin/application_settings/_pipeline_limits.html.haml
@@ -6,4 +6,4 @@
       = f.label :pipeline_limit_per_project_user_sha,  _('Maximum number of requests per minute')
       = f.number_field :pipeline_limit_per_project_user_sha, class: 'form-control gl-form-input'
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_prometheus.html.haml b/app/views/admin/application_settings/_prometheus.html.haml
index 982531e9a2f..3db1272c77b 100644
--- a/app/views/admin/application_settings/_prometheus.html.haml
+++ b/app/views/admin/application_settings/_prometheus.html.haml
@@ -18,4 +18,4 @@
       .form-text.text-muted
         Only track method calls that take longer to complete than the given duration.
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_protected_paths.html.haml b/app/views/admin/application_settings/_protected_paths.html.haml
index 1f3f67c71c7..3a7a951d137 100644
--- a/app/views/admin/application_settings/_protected_paths.html.haml
+++ b/app/views/admin/application_settings/_protected_paths.html.haml
@@ -21,4 +21,4 @@
         - relative_url_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: relative_url_link }
         = _('All paths are relative to the GitLab URL. Do not include %{relative_url_link_start}relative URLs%{relative_url_link_end}.').html_safe % { relative_url_link_start: relative_url_link_start, relative_url_link_end: '</a>'.html_safe }
 
-  = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_registry.html.haml b/app/views/admin/application_settings/_registry.html.haml
index 856db32e088..6a8ef86a56e 100644
--- a/app/views/admin/application_settings/_registry.html.haml
+++ b/app/views/admin/application_settings/_registry.html.haml
@@ -34,4 +34,4 @@
         = f.gitlab_ui_checkbox_component :container_registry_expiration_policies_caching, _("Enable container expiration caching."),
           help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_repository_mirrors_form.html.haml b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
index dad8d5f3fae..869f26ceb10 100644
--- a/app/views/admin/application_settings/_repository_mirrors_form.html.haml
+++ b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
@@ -9,4 +9,4 @@
 
     = render_if_exists 'admin/application_settings/mirror_settings', form: f
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_repository_storage.html.haml b/app/views/admin/application_settings/_repository_storage.html.haml
index 9e7f2812d64..12dd8816783 100644
--- a/app/views/admin/application_settings/_repository_storage.html.haml
+++ b/app/views/admin/application_settings/_repository_storage.html.haml
@@ -27,4 +27,4 @@
               = storage_form.text_field storage, class: 'form-text-input'
               = storage_form.label storage, storage, class: 'label-bold form-check-label'
               %br
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_sentry.html.haml b/app/views/admin/application_settings/_sentry.html.haml
index cfd34f6ca15..20164cfe88d 100644
--- a/app/views/admin/application_settings/_sentry.html.haml
+++ b/app/views/admin/application_settings/_sentry.html.haml
@@ -17,4 +17,4 @@
       = f.label :sentry_environment, _('Environment'), class: 'label-light'
       = f.text_field :sentry_environment, class: 'form-control gl-form-input', placeholder: Rails.env
 
-  = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_sidekiq_job_limits.html.haml b/app/views/admin/application_settings/_sidekiq_job_limits.html.haml
index eaf4bbf4702..068a8155450 100644
--- a/app/views/admin/application_settings/_sidekiq_job_limits.html.haml
+++ b/app/views/admin/application_settings/_sidekiq_job_limits.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-sidekiq-job-limits-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-sidekiq-job-limits-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
@@ -18,4 +18,4 @@
       .form-text.text-muted
         = _("Threshold in bytes at which to reject Sidekiq jobs. Set this to 0 to if you don't want to limit Sidekiq jobs.")
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml
index 48f0b9b2c31..3e2551d753a 100644
--- a/app/views/admin/application_settings/_signin.html.haml
+++ b/app/views/admin/application_settings/_signin.html.haml
@@ -55,4 +55,4 @@
       = f.label :sign_in_text, _('Sign-in text'), class: 'label-bold'
       = f.text_area :sign_in_text, class: 'form-control gl-form-input', rows: 4
       %span.form-text.text-muted#home_help_block= _("Add text to the sign-in page. Markdown enabled.")
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_snowplow.html.haml b/app/views/admin/application_settings/_snowplow.html.haml
index 8684b909853..4e7d9b8ab21 100644
--- a/app/views/admin/application_settings/_snowplow.html.haml
+++ b/app/views/admin/application_settings/_snowplow.html.haml
@@ -31,4 +31,4 @@
           .form-text.text-muted
             = _('The Snowplow cookie domain.')
 
-      = f.submit _('Save changes'), class: 'gl-button btn btn-confirm', data: { qa_selector: 'save_changes_button' }
+      = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_sourcegraph.html.haml b/app/views/admin/application_settings/_sourcegraph.html.haml
index 9e99b496ad0..b56ca12baec 100644
--- a/app/views/admin/application_settings/_sourcegraph.html.haml
+++ b/app/views/admin/application_settings/_sourcegraph.html.haml
@@ -29,4 +29,4 @@
           = f.text_field :sourcegraph_url, class: 'form-control gl-form-input', placeholder: s_('SourcegraphAdmin|https://sourcegraph.example.com')
           .form-text.text-muted
             = s_('SourcegraphAdmin|Configure the URL to a Sourcegraph instance which can read your GitLab projects.')
-      = f.submit s_('SourcegraphAdmin|Save changes'), class: 'gl-button btn btn-confirm'
+      = f.submit s_('SourcegraphAdmin|Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_terms.html.haml b/app/views/admin/application_settings/_terms.html.haml
index a4b6e061c43..8da441d5245 100644
--- a/app/views/admin/application_settings/_terms.html.haml
+++ b/app/views/admin/application_settings/_terms.html.haml
@@ -11,4 +11,4 @@
       .form-text.text-muted
         = _("Markdown supported.")
         = link_to _('What is Markdown?'), help_page_path('user/markdown.md'), target: '_blank', rel: 'noopener noreferrer'
-  = f.submit _("Save changes"), class: "gl-button btn btn-confirm"
+  = f.submit _("Save changes"), pajamas_button: true
diff --git a/app/views/admin/application_settings/_third_party_offers.html.haml b/app/views/admin/application_settings/_third_party_offers.html.haml
index 20a60ac870a..ed809c6db52 100644
--- a/app/views/admin/application_settings/_third_party_offers.html.haml
+++ b/app/views/admin/application_settings/_third_party_offers.html.haml
@@ -16,4 +16,4 @@
           = f.gitlab_ui_checkbox_component :hide_third_party_offers,
           _('Do not display content for customer experience improvement and offers from third parties')
 
-      = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+      = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index 046b59dbd18..2eda3eab8c7 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -50,4 +50,4 @@
           %li
             = s_('AdminSettings|Restrict group access by IP address. %{link_start}Learn more%{link_end}.').html_safe % { link_start: restrict_ip_link, link_end: link_end }
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_user_restrictions.html.haml b/app/views/admin/application_settings/_user_restrictions.html.haml
new file mode 100644
index 00000000000..de8faa6705f
--- /dev/null
+++ b/app/views/admin/application_settings/_user_restrictions.html.haml
@@ -0,0 +1,6 @@
+- form = local_assigns.fetch(:form)
+
+.form-group
+  = label_tag _('User restrictions')
+  = render_if_exists 'admin/application_settings/updating_name_disabled_for_users', form: form
+  = form.gitlab_ui_checkbox_component :can_create_group, _("Allow users to create top-level groups")
diff --git a/app/views/admin/application_settings/_users_api_limits.html.haml b/app/views/admin/application_settings/_users_api_limits.html.haml
index 3918c76b12c..ca6f1113c4a 100644
--- a/app/views/admin/application_settings/_users_api_limits.html.haml
+++ b/app/views/admin/application_settings/_users_api_limits.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-users-api-limits-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-users-api-limits-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
@@ -11,4 +11,4 @@
       .form-text.text-muted{ id: 'users-api-limit-users-allowlist-field-description' }
         = _('List of users who are allowed to exceed the rate limit. Example: username1, username2')
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_whats_new.html.haml b/app/views/admin/application_settings/_whats_new.html.haml
index 3248969ca16..986402ad5f1 100644
--- a/app/views/admin/application_settings/_whats_new.html.haml
+++ b/app/views/admin/application_settings/_whats_new.html.haml
@@ -5,4 +5,4 @@
     .gl-mb-4
       = f.gitlab_ui_radio_component :whats_new_variant, variant, whats_new_variants_label(variant), help_text: whats_new_variants_description(variant)
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/appearances/preview_sign_in.html.haml b/app/views/admin/application_settings/appearances/preview_sign_in.html.haml
index 2e4ab714048..1c2350e2835 100644
--- a/app/views/admin/application_settings/appearances/preview_sign_in.html.haml
+++ b/app/views/admin/application_settings/appearances/preview_sign_in.html.haml
@@ -9,5 +9,5 @@
       = label_tag :password
       = password_field_tag :password, nil, disabled: true, class: "form-control gl-form-input bottom", title: title
     .form-group
-      = button_tag _("Sign in"), disabled: true, class: "btn gl-button btn-confirm", type: "button", title: title
-
+      = render Pajamas::ButtonComponent.new(variant: :confirm, disabled: true, button_options: { title: title }) do
+        = _("Sign in")
diff --git a/app/views/admin/application_settings/ci_cd.html.haml b/app/views/admin/application_settings/ci_cd.html.haml
index f0f7e6868da..b7244c45871 100644
--- a/app/views/admin/application_settings/ci_cd.html.haml
+++ b/app/views/admin/application_settings/ci_cd.html.haml
@@ -10,7 +10,7 @@
       %p.settings-message.text-center
         - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/index', anchor: 'protected-cicd-variables') }
         = s_('Environment variables on this GitLab instance are configured to be %{link_start}protected%{link_end} by default.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-    #js-instance-variables{ data: { endpoint: admin_ci_variables_path, group: 'true', maskable_regex: ci_variable_maskable_regex, protected_by_default: ci_variable_protected_by_default?.to_s} }
+    #js-instance-variables{ data: { endpoint: admin_ci_variables_path, maskable_regex: ci_variable_maskable_regex, protected_by_default: ci_variable_protected_by_default?.to_s} }
 
 %section.settings.as-ci-cd.no-animate#js-ci-cd-settings{ class: ('expanded' if expanded_by_default?) }
   .settings-header
@@ -38,12 +38,11 @@
     .settings-content
       = render 'registry'
 
-- if Feature.enabled?(:runner_registration_control)
-  %section.settings.as-runner.no-animate#js-runner-settings{ class: ('expanded' if expanded_by_default?) }
-    .settings-header
-      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-        = s_('Runners|Runner registration')
-      = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-        = expanded_by_default? ? 'Collapse' : 'Expand'
-    .settings-content
-      = render 'runner_registrars_form'
+%section.settings.as-runner.no-animate#js-runner-settings{ class: ('expanded' if expanded_by_default?) }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
+      = s_('Runners|Runner registration')
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
+      = expanded_by_default? ? 'Collapse' : 'Expand'
+  .settings-content
+    = render 'runner_registrars_form'
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index cd63873a893..ec5d1ef4a34 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -24,6 +24,8 @@
   .settings-content
     = render 'account_and_limit'
 
+= render_if_exists 'admin/application_settings/free_user_cap'
+
 %section.settings.as-diff-limits.no-animate#js-merge-request-settings{ class: ('expanded' if expanded_by_default?) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
@@ -102,7 +104,7 @@
           = f.gitlab_ui_checkbox_component :web_ide_clientside_preview_enabled,
               s_('IDE|Live Preview'),
               help_text: s_('Preview JavaScript projects in the Web IDE with CodeSandbox Live Preview. %{link_start}Learn more.%{link_end} ').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-      = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+      = f.submit _('Save changes'), pajamas_button: true
 
 = render_if_exists 'admin/application_settings/maintenance_mode_settings_form'
 = render 'admin/application_settings/gitpod'
diff --git a/app/views/admin/application_settings/service_usage_data.html.haml b/app/views/admin/application_settings/service_usage_data.html.haml
index 25c8bd12345..06bb9df84c4 100644
--- a/app/views/admin/application_settings/service_usage_data.html.haml
+++ b/app/views/admin/application_settings/service_usage_data.html.haml
@@ -5,25 +5,26 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - payload_class = 'js-service-ping-payload'
 
-%h3= name
+%section.js-search-settings-section
+  %h3= name
 
-- if @service_ping_data_present
-  = render Pajamas::ButtonComponent.new(button_options: { class: 'js-payload-preview-trigger gl-mr-2', data: { payload_selector: ".#{payload_class}" } } ) do
-    = gl_loading_icon(css_class: 'js-spinner gl-display-none', inline: true)
-    %span.js-text.gl-display-inline= _('Preview payload')
-  = render Pajamas::ButtonComponent.new(button_options: { class: 'js-payload-download-trigger gl-mr-2', data: { endpoint: usage_data_admin_application_settings_path(format: :json) } } ) do
-    = gl_loading_icon(css_class: 'js-spinner gl-display-none', inline: true)
-    %span.js-text.gl-display-inline= _('Download payload')
-  %pre.js-syntax-highlight.code.highlight.gl-mt-2.gl-display-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
-- else
-  = render Pajamas::AlertComponent.new(variant: :warning,
-    dismissible: false,
-    title: _('Service Ping payload not found in the application cache')) do |c|
+  - if @service_ping_data_present
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-payload-preview-trigger gl-mr-2', data: { payload_selector: ".#{payload_class}" } } ) do
+      = gl_loading_icon(css_class: 'js-spinner gl-display-none', inline: true)
+      %span.js-text.gl-display-inline= _('Preview payload')
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-payload-download-trigger gl-mr-2', data: { endpoint: usage_data_admin_application_settings_path(format: :json) } } ) do
+      = gl_loading_icon(css_class: 'js-spinner gl-display-none', inline: true)
+      %span.js-text.gl-display-inline= _('Download payload')
+    %pre.js-syntax-highlight.code.highlight.gl-mt-2.gl-display-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
+  - else
+    = render Pajamas::AlertComponent.new(variant: :warning,
+      dismissible: false,
+      title: _('Service Ping payload not found in the application cache')) do |c|
 
-    = c.body do
-      - enable_service_ping_link_url = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'enable-or-disable-usage-statistics')
-      - enable_service_ping_link = '<a href="%{url}">'.html_safe % { url: enable_service_ping_link_url }
-      - generate_manually_link_url = help_page_path('administration/troubleshooting/gitlab_rails_cheat_sheet', anchor: 'generate-service-ping')
-      - generate_manually_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: generate_manually_link_url }
+      = c.body do
+        - enable_service_ping_link_url = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'enable-or-disable-usage-statistics')
+        - enable_service_ping_link = '<a href="%{url}">'.html_safe % { url: enable_service_ping_link_url }
+        - generate_manually_link_url = help_page_path('administration/troubleshooting/gitlab_rails_cheat_sheet', anchor: 'generate-service-ping')
+        - generate_manually_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: generate_manually_link_url }
 
-      = html_escape(s_('%{enable_service_ping_link_start}Enable%{link_end} or %{generate_manually_link_start}generate%{link_end} Service Ping to preview and download service usage data payload.')) % { enable_service_ping_link_start: enable_service_ping_link, generate_manually_link_start: generate_manually_link, link_end: '</a>'.html_safe }
+        = html_escape(s_('%{enable_service_ping_link_start}Enable%{link_end} or %{generate_manually_link_start}generate%{link_end} Service Ping to preview and download service usage data payload.')) % { enable_service_ping_link_start: enable_service_ping_link, generate_manually_link_start: generate_manually_link, link_end: '</a>'.html_safe }
diff --git a/app/views/admin/applications/_form.html.haml b/app/views/admin/applications/_form.html.haml
index fd73d4c5671..83347034cc5 100644
--- a/app/views/admin/applications/_form.html.haml
+++ b/app/views/admin/applications/_form.html.haml
@@ -36,5 +36,5 @@
       = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes, f: f
 
   .form-actions
-    = f.submit _('Save application'), class: "gl-button btn btn-confirm wide"
+    = f.submit _('Save application'), pajamas_button: true
     = link_to _('Cancel'), admin_applications_path, class: "gl-button btn btn-default btn-cancel"
diff --git a/app/views/admin/background_jobs/show.html.haml b/app/views/admin/background_jobs/show.html.haml
index 6d2cab06010..15ce9b692f0 100644
--- a/app/views/admin/background_jobs/show.html.haml
+++ b/app/views/admin/background_jobs/show.html.haml
@@ -7,5 +7,4 @@
   = html_escape(_('GitLab uses %{linkStart}Sidekiq%{linkEnd} to process background jobs')) % { linkStart: sidekiq_link_start, linkEnd: '</a>'.html_safe }
 
 %hr
-.card.gl-rounded-0
-  %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }
+%iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }
diff --git a/app/views/admin/broadcast_messages/_table.html.haml b/app/views/admin/broadcast_messages/_table.html.haml
new file mode 100644
index 00000000000..c5cd333f9dd
--- /dev/null
+++ b/app/views/admin/broadcast_messages/_table.html.haml
@@ -0,0 +1,38 @@
+- targeted_broadcast_messages_enabled = Feature.enabled?(:role_targeted_broadcast_messages)
+
+- if @broadcast_messages.any?
+  .table-responsive
+    %table.table.b-table.gl-table
+      %thead
+        %tr
+          %th= _('Status')
+          %th= _('Preview')
+          %th= _('Starts')
+          %th= _('Ends')
+          - if targeted_broadcast_messages_enabled
+            %th= _('Target roles')
+          %th= _('Target Path')
+          %th= _('Type')
+          %th &nbsp;
+      %tbody
+        - @broadcast_messages.each do |message|
+          %tr
+            %td
+              = broadcast_message_status(message)
+            %td
+              = broadcast_message(message, preview: true)
+            %td
+              = message.starts_at
+            %td
+              = message.ends_at
+            - if targeted_broadcast_messages_enabled
+              %td
+                = target_access_levels_display(message.target_access_levels)
+            %td
+              = message.target_path
+            %td
+              = message.broadcast_type.capitalize
+            %td.gl-white-space-nowrap<
+              = link_to sprite_icon('pencil', css_class: 'gl-icon'), edit_admin_broadcast_message_path(message), title: _('Edit'), class: 'btn btn-icon gl-button'
+              = link_to sprite_icon('remove', css_class: 'gl-icon'), admin_broadcast_message_path(message), method: :delete, remote: true, title: _('Remove'), class: 'js-remove-tr btn btn-icon gl-button btn-danger gl-ml-3'
+    = paginate @broadcast_messages, theme: 'gitlab'
diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index 46924393a27..7559365e49a 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -1,49 +1,30 @@
 - breadcrumb_title _("Messages")
 - page_title _("Broadcast Messages")
-- targeted_broadcast_messages_enabled = Feature.enabled?(:role_targeted_broadcast_messages)
+- vue_app_enabled = Feature.enabled?(:vue_broadcast_messages, current_user)
 
 %h1.page-title.gl-font-size-h-display
   = _('Broadcast Messages')
 %p.light
   = _('Use banners and notifications to notify your users about scheduled maintenance, recent upgrades, and more.')
 
-= render 'form'
-
-%br.clearfix
-
-- if @broadcast_messages.any?
-  .table-responsive
-    %table.table.b-table.gl-table
-      %thead
-        %tr
-          %th= _('Status')
-          %th= _('Preview')
-          %th= _('Starts')
-          %th= _('Ends')
-          - if targeted_broadcast_messages_enabled
-            %th= _('Target roles')
-          %th= _('Target Path')
-          %th= _('Type')
-          %th &nbsp;
-      %tbody
-        - @broadcast_messages.each do |message|
-          %tr
-            %td
-              = broadcast_message_status(message)
-            %td
-              = broadcast_message(message, preview: true)
-            %td
-              = message.starts_at
-            %td
-              = message.ends_at
-            - if targeted_broadcast_messages_enabled
-              %td
-                = target_access_levels_display(message.target_access_levels)
-            %td
-              = message.target_path
-            %td
-              = message.broadcast_type.capitalize
-            %td.gl-white-space-nowrap<
-              = link_to sprite_icon('pencil', css_class: 'gl-icon'), edit_admin_broadcast_message_path(message), title: _('Edit'), class: 'btn btn-icon gl-button'
-              = link_to sprite_icon('remove', css_class: 'gl-icon'), admin_broadcast_message_path(message), method: :delete, remote: true, title: _('Remove'), class: 'js-remove-tr btn btn-icon gl-button btn-danger gl-ml-3'
-    = paginate @broadcast_messages, theme: 'gitlab'
+- if vue_app_enabled
+  #js-broadcast-messages{ data: {
+    page: params[:page] || 1,
+    messages_count: @broadcast_messages.total_count,
+    messages: @broadcast_messages.map { |message| {
+      id: message.id,
+      status: broadcast_message_status(message),
+      preview: broadcast_message(message, preview: true),
+      starts_at: message.starts_at.to_s,
+      ends_at: message.ends_at.to_s,
+      target_roles: target_access_levels_display(message.target_access_levels),
+      target_path: message.target_path,
+      type: message.broadcast_type.capitalize,
+      edit_path: edit_admin_broadcast_message_path(message),
+      delete_path: admin_broadcast_message_path(message) + '.js'
+    } }.to_json
+  } }
+- else
+  = render 'form'
+  %br.clearfix
+  = render 'table'
diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml
index 271f89a6b08..ccea1714973 100644
--- a/app/views/admin/dashboard/index.html.haml
+++ b/app/views/admin/dashboard/index.html.haml
@@ -35,7 +35,7 @@
           = link_to(s_('AdminArea|New project'), new_project_path, class: "btn gl-button btn-default")
         = c.footer do
           .d-flex.align-items-center
-            = link_to(s_('AdminArea|View latest projects'), admin_projects_path)
+            = link_to(s_('AdminArea|View latest projects'), admin_projects_path(sort: 'created_desc'))
             = sprite_icon('chevron-right', size: 12, css_class: 'gl-text-gray-700 gl-ml-2')
     .col-md-4.gl-mb-6
       = render Pajamas::CardComponent.new(**component_params) do |c|
@@ -71,7 +71,7 @@
           = link_to(s_('AdminArea|New group'), new_admin_group_path, class: "btn gl-button btn-default")
         = c.footer do
           .d-flex.align-items-center
-            = link_to(s_('AdminArea|View latest groups'), admin_groups_path)
+            = link_to(s_('AdminArea|View latest groups'), admin_groups_path(sort: 'created_desc'))
             = sprite_icon('chevron-right', size: 12, css_class: 'gl-text-gray-700 gl-ml-2')
   .row
     .col-md-4.gl-mb-6
diff --git a/app/views/admin/deploy_keys/edit.html.haml b/app/views/admin/deploy_keys/edit.html.haml
index 12a1c0c3de2..acdf503727d 100644
--- a/app/views/admin/deploy_keys/edit.html.haml
+++ b/app/views/admin/deploy_keys/edit.html.haml
@@ -3,8 +3,8 @@
 %hr
 
 %div
-  = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
+  = gitlab_ui_form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
     = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
     .form-actions
-      = f.submit _('Save changes'), class: 'btn gl-button btn-confirm'
+      = f.submit _('Save changes'), pajamas_button: true
       = link_to _('Cancel'), admin_deploy_keys_path, class: 'btn gl-button btn-default btn-cancel'
diff --git a/app/views/admin/deploy_keys/new.html.haml b/app/views/admin/deploy_keys/new.html.haml
index 74882900756..a03d6cb5a94 100644
--- a/app/views/admin/deploy_keys/new.html.haml
+++ b/app/views/admin/deploy_keys/new.html.haml
@@ -3,8 +3,9 @@
 %hr
 
 %div
-  = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
+  = gitlab_ui_form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
     = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
     .form-actions
-      = f.submit 'Create', class: 'btn gl-button btn-confirm', data: { qa_selector: "add_deploy_key_button" }
-      = link_to _('Cancel'), admin_deploy_keys_path, class: 'btn gl-button btn-default btn-cancel'
+      = f.submit 'Create', data: { qa_selector: "add_deploy_key_button" }, pajamas_button: true
+      = render Pajamas::ButtonComponent.new(href: admin_deploy_keys_path) do
+        = _('Cancel')
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index 69e9e4260b4..7adba0d023b 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/app/views/admin/groups/_form.html.haml
@@ -35,10 +35,10 @@
       = c.body do
         = render 'shared/group_tips'
     .gl-mt-5
-      = f.submit _('Create group'), class: "gl-button btn btn-confirm"
+      = f.submit _('Create group'), pajamas_button: true
       = link_to  _('Cancel'), admin_groups_path, class: "gl-button btn btn-default btn-cancel"
 
   - else
     .gl-mt-5
-      = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+      = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
       = link_to  _('Cancel'), admin_group_path(@group), class: "gl-button btn btn-cancel"
diff --git a/app/views/admin/groups/_group.html.haml b/app/views/admin/groups/_group.html.haml
index c27ff348f59..a1afb1ddbfa 100644
--- a/app/views/admin/groups/_group.html.haml
+++ b/app/views/admin/groups/_group.html.haml
@@ -1,7 +1,6 @@
 - group = local_assigns.fetch(:group)
-- css_class = "gl-display-flex!#{' no-description' if group.description.blank?}"
 
-%li.group-row.gl-py-3.gl-align-items-center{ class: css_class, data: { qa_selector: 'group_row_content' } }
+%li.group-row.gl-py-3.gl-align-items-center{ class: 'gl-display-flex!', data: { qa_selector: 'group_row_content' } }
   .avatar-container.rect-avatar.s40.gl-flex-shrink-0
     = group_icon(group, class: "avatar s40")
 
diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index a57d3170cbd..6d370919460 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -13,123 +13,112 @@
 %hr
 .row
   .col-md-6
-    .card
-      .card-header
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-p-0' }) do |c|
+      - c.header do
         = _('Group info:')
-      %ul.content-list
-        %li
-          .avatar-container.rect-avatar.s60
-            = group_icon(@group, class: "avatar s60")
-        %li
-          %span.light= _('Name:')
-          %strong
-            = link_to @group.name, group_path(@group)
-        %li
-          %span.light= _('Path:')
-          %strong
-            = @group.path
-
-        %li
-          %span.light= _('Description:')
-          %strong
-            = @group.description
-
-        %li
-          %span.light= _('Visibility level:')
-          %strong
-            = visibility_level_label(@group.visibility_level)
-
-        %li
-          %span.light= _('Created on:')
-          %strong
-            = @group.created_at.to_s(:medium)
-
-        %li
-          %span.light= _('ID:')
-          %strong
-            = @group.id
-
-        = render_if_exists 'admin/namespace_plan_info', namespace: @group
-
-        %li
-          = render 'shared/storage_counter_statistics', storage_size: @group.storage_size, storage_details: @group
-
-        %li
-          %span.light= _('Group Git LFS status:')
-          %strong
-            = group_lfs_status(@group)
-            = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
-
-        = render_if_exists 'namespaces/shared_runner_status', namespace: @group
-        = render_if_exists 'namespaces/additional_minutes_status', namespace: @group
+      - c.body do
+        %ul.content-list.content-list-items-padding
+          %li
+            .avatar-container.rect-avatar.s60
+              = group_icon(@group, class: "avatar s60")
+          %li
+            %span.light= _('Name:')
+            %strong
+              = link_to @group.name, group_path(@group)
+          %li
+            %span.light= _('Path:')
+            %strong
+              = @group.path
+
+          %li
+            %span.light= _('Description:')
+            %strong
+              = @group.description
+
+          %li
+            %span.light= _('Visibility level:')
+            %strong
+              = visibility_level_label(@group.visibility_level)
+
+          %li
+            %span.light= _('Created on:')
+            %strong
+              = @group.created_at.to_s(:medium)
+
+          %li
+            %span.light= _('ID:')
+            %strong
+              = @group.id
+
+          = render_if_exists 'admin/namespace_plan_info', namespace: @group
+
+          %li
+            = render 'shared/storage_counter_statistics', storage_size: @group.storage_size, storage_details: @group
+
+          %li
+            %span.light= _('Group Git LFS status:')
+            %strong
+              = group_lfs_status(@group)
+              = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
+
+          = render_if_exists 'namespaces/shared_runner_status', namespace: @group
+          = render_if_exists 'namespaces/additional_minutes_status', namespace: @group
 
     = render 'shared/custom_attributes', custom_attributes: @group.custom_attributes
 
     = render_if_exists 'ldap_group_links/ldap_group_links_show', group: @group
 
-    .card
-      .card-header
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-p-0' }) do |c|
+      - c.header do
         = _('Projects')
         = gl_badge_tag @group.projects.count
-      %ul.content-list
-        - @projects.each do |project|
-          %li
-            %strong
-              = link_to project.full_name, [:admin, project]
-              = gl_badge_tag storage_counter(project.statistics.storage_size)
-            %span.float-right.light
-              %span.monospace= project.full_path + '.git'
-      - unless @projects.size < Kaminari.config.default_per_page
-        .card-footer
-          = paginate @projects, param_name: 'projects_page', theme: 'gitlab'
-
-    - shared_projects = @group.shared_projects.sort_by(&:name)
-    - unless shared_projects.empty?
-      .card
-        .card-header
-          = _('Projects shared with %{group_name}') % { group_name: @group.name }
-          = gl_badge_tag shared_projects.size
-        %ul.content-list
-          - shared_projects.each do |project|
+      - c.body do
+        %ul.content-list.content-list-items-padding
+          - @projects.each do |project|
             %li
               %strong
                 = link_to project.full_name, [:admin, project]
                 = gl_badge_tag storage_counter(project.statistics.storage_size)
               %span.float-right.light
                 %span.monospace= project.full_path + '.git'
+        - unless @projects.size < Kaminari.config.default_per_page
+          - c.footer do
+            = paginate @projects, param_name: 'projects_page', theme: 'gitlab'
+
+    - shared_projects = @group.shared_projects.sort_by(&:name)
+    - unless shared_projects.empty?
+      = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-p-0' }) do |c|
+        - c.header do
+          = _('Projects shared with %{group_name}') % { group_name: @group.name }
+          = gl_badge_tag shared_projects.size
+        - c.body do
+          %ul.content-list.content-list-items-padding
+            - shared_projects.each do |project|
+              %li
+                %strong
+                  = link_to project.full_name, [:admin, project]
+                  = gl_badge_tag storage_counter(project.statistics.storage_size)
+                %span.float-right.light
+                  %span.monospace= project.full_path + '.git'
 
   .col-md-6
     = render 'shared/admin/admin_note'
 
     - if can?(current_user, :admin_group_member, @group)
-      .card
-        .card-header
-          = _('Add user(s) to the group:')
-        .card-body.form-holder
-          %p.light
-            - help_link_open = '<strong><a href="%{help_url}">'.html_safe % { help_url: help_page_url("user/permissions") }
-            = html_escape(_('Read more about project permissions %{help_link_open}here%{help_link_close}')) % { help_link_open: help_link_open, help_link_close: '</a></strong>'.html_safe }
-
-          = form_tag admin_group_members_update_path(@group), id: "new_project_member", class: "bulk_import", method: :put do
-            %div
-              = users_select_tag(:user_id, multiple: true, email_user: true, skip_ldap: @group.ldap_synced?, scope: :all)
-            .gl-mt-3
-              = select_tag :access_level, options_for_select(@group.access_level_roles), class: "project-access-select select2"
-            %hr
-            = button_tag _('Add users to group'), class: "gl-button btn btn-confirm"
       = render 'shared/members/requests', membership_source: @group, group: @group, requesters: @requesters, force_mobile_view: true
 
-    .card
-      .card-header
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-p-0' }) do |c|
+      - c.header do
         = html_escape(_("%{group_name} group members")) % { group_name: "<strong>#{html_escape(@group.name)}</strong>".html_safe }
         = gl_badge_tag @group.users_count
         = render 'shared/members/manage_access_button', path: group_group_members_path(@group)
-      %ul.content-list.group-users-list.content-list.members-list
-        = render partial: 'shared/members/member',
-                 collection: @members, as: :member,
-                 locals: { membership_source: @group,
-                           group: @group,
-                           current_user_is_group_owner: current_user_is_group_owner }
+      - c.body do
+        %ul.content-list.group-users-list.members-list
+          = render partial: 'shared/members/member',
+                  collection: @members, as: :member,
+                  locals: { membership_source: @group,
+                            group: @group,
+                            current_user_is_group_owner: current_user_is_group_owner }
       - unless @members.size < Kaminari.config.default_per_page
-        .card-footer
+        - c.footer do
           = paginate @members, param_name: 'members_page', theme: 'gitlab'
diff --git a/app/views/admin/hooks/edit.html.haml b/app/views/admin/hooks/edit.html.haml
index 224afbff39a..14d37b77a41 100644
--- a/app/views/admin/hooks/edit.html.haml
+++ b/app/views/admin/hooks/edit.html.haml
@@ -11,7 +11,7 @@
     = gitlab_ui_form_for @hook, as: :hook, url: admin_hook_path do |f|
       = render partial: 'form', locals: { form: f, hook: @hook }
       .form-actions
-        %span>= f.submit _('Save changes'), class: 'btn gl-button btn-confirm gl-mr-3'
+        %span>= f.submit _('Save changes'), class: 'gl-mr-3', pajamas_button: true
         = render 'shared/web_hooks/test_button', hook: @hook
         = link_to _('Delete'), admin_hook_path(@hook), method: :delete, class: 'btn gl-button btn-danger float-right', aria: { label: s_('Webhooks|Delete webhook') }, data: { confirm: s_('Webhooks|Are you sure you want to delete this webhook?'), confirm_btn_variant: 'danger' }
 
diff --git a/app/views/admin/hooks/index.html.haml b/app/views/admin/hooks/index.html.haml
index f23d77c8da5..d4aeb8dc7e8 100644
--- a/app/views/admin/hooks/index.html.haml
+++ b/app/views/admin/hooks/index.html.haml
@@ -7,7 +7,7 @@
   .col-lg-8.gl-mb-3
     = gitlab_ui_form_for @hook, as: :hook, url: admin_hooks_path do |f|
       = render partial: 'form', locals: { form: f, hook: @hook }
-      = f.submit _('Add system hook'), class: 'btn gl-button btn-confirm'
+      = f.submit _('Add system hook'), pajamas_button: true
 
     = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class
 
diff --git a/app/views/admin/impersonation_tokens/index.html.haml b/app/views/admin/impersonation_tokens/index.html.haml
index 2c526bb38d8..8cf1d8555ce 100644
--- a/app/views/admin/impersonation_tokens/index.html.haml
+++ b/app/views/admin/impersonation_tokens/index.html.haml
@@ -8,12 +8,10 @@
 
 .row.gl-mt-3
   .col-lg-12
-    - if @new_impersonation_token
-      = render 'shared/access_tokens/created_container',
-        type: type,
-        new_token_value: @new_impersonation_token
+    #js-new-access-token-app{ data: { access_token_type: type } }
 
     = render 'shared/access_tokens/form',
+        ajax: true,
         type: type,
         title: _('Add an impersonation token'),
         path: admin_user_impersonation_tokens_path,
@@ -22,9 +20,4 @@
         scopes: @scopes,
         help_path: help_page_path('api/index', anchor: 'impersonation-tokens')
 
-    = render 'shared/access_tokens/table',
-        type: type,
-        type_plural: type_plural,
-        impersonation: true,
-        active_tokens: @active_impersonation_tokens,
-        revoke_route_helper: ->(token) { revoke_admin_user_impersonation_token_path(token.user, token) }
+    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_impersonation_tokens.to_json, information: _("To see all the user's personal access tokens you must impersonate them first.") } }
diff --git a/app/views/admin/projects/_projects.html.haml b/app/views/admin/projects/_projects.html.haml
index f56b77813b5..c7c30673d74 100644
--- a/app/views/admin/projects/_projects.html.haml
+++ b/app/views/admin/projects/_projects.html.haml
@@ -1,32 +1,33 @@
 .js-projects-list-holder
   - if @projects.any?
-    %ul.projects-list.content-list.admin-projects
+    %ul.content-list
       - @projects.each do |project|
-        %li.project-row{ class: ('no-description' if project.description.blank?) }
-          .controls
-            = link_to _('Edit'), edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn gl-button btn-default"
-            %button.delete-project-button.gl-button.btn.btn-danger{ data: { delete_project_url: admin_project_path(project), project_name: project.name } }
-              = s_('AdminProjects|Delete')
+        %li.project-row.gl-align-items-center{ class: 'gl-display-flex!' }
+          .avatar-container.rect-avatar.s40.gl-flex-shrink-0
+            = project_icon(project, alt: '', class: 'avatar project-avatar s40', width: 40, height: 40)
+          .gl-min-w-0.gl-flex-grow-1
+            .title
+              = link_to(admin_project_path(project)) do
+                %span.project-full-name
+                  %span.namespace-name
+                    - if project.namespace
+                      = project.namespace.human_name
+                      \/
+                  %span.project-name
+                    = project.name
 
-          .stats
+            - if project.description.present?
+              .description
+                = markdown_field(project, :description)
+          .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-sm-display-flex
             = gl_badge_tag storage_counter(project.statistics&.storage_size)
             = render_if_exists 'admin/projects/archived', project: project
-          .title
-            = link_to(admin_project_path(project)) do
-              .dash-project-avatar
-                .avatar-container.rect-avatar.s40
-                  = project_icon(project, alt: '', class: 'avatar project-avatar s40', width: 40, height: 40)
-              %span.project-full-name
-                %span.namespace-name
-                  - if project.namespace
-                    = project.namespace.human_name
-                    \/
-                %span.project-name
-                  = project.name
 
-          - if project.description.present?
-            .description
-              = markdown_field(project, :description)
+          .controls.gl-flex-shrink-0.gl-ml-5
+            = render Pajamas::ButtonComponent.new(href: edit_project_path(project), button_options: { id: dom_id(project, :edit) }) do
+              = s_('Edit')
+            = render Pajamas::ButtonComponent.new(variant: :danger, button_options: { class: 'delete-project-button', data: { delete_project_url: admin_project_path(project), project_name: project.name } } ) do
+              = s_('AdminProjects|Delete')
 
     = paginate @projects, theme: 'gitlab'
   - else
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index eabb7e51227..a60c3996cf2 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -2,7 +2,6 @@
 - add_to_breadcrumbs _("Projects"), admin_projects_path
 - breadcrumb_title @project.full_name
 - page_title @project.full_name, _("Projects")
-- @content_class = "admin-projects"
 - current_user_is_group_owner = @group && @group.has_owner?(current_user)
 
 %h1.page-title.gl-font-size-h-display
diff --git a/app/views/admin/users/_projects.html.haml b/app/views/admin/users/_projects.html.haml
index a9f5c560b41..3ccf3ef4f2a 100644
--- a/app/views/admin/users/_projects.html.haml
+++ b/app/views/admin/users/_projects.html.haml
@@ -1,13 +1,17 @@
 - if local_assigns.has_key?(:contributed_projects) && contributed_projects.present?
-  .card.contributed-projects
-    .card-header= _('Projects contributed to')
-    = render 'shared/projects/list',
-      projects: contributed_projects.sort_by(&:star_count).reverse,
-      projects_limit: 5, stars: true, avatar: false
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-0' }) do |c|
+    - c.header do
+      = _('Projects contributed to')
+    - c.body do
+      = render 'shared/projects/list',
+        projects: contributed_projects.sort_by(&:star_count).reverse,
+        projects_limit: 5, stars: true, avatar: false
 
 - if local_assigns.has_key?(:projects) && projects.present?
-  .card
-    .card-header= _('Personal projects')
-    = render 'shared/projects/list',
-      projects: projects.sort_by(&:star_count).reverse,
-      projects_limit: 10, stars: true, avatar: false
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-0' }) do |c|
+    - c.header do
+      = _('Personal projects')
+    - c.body do
+      = render 'shared/projects/list',
+        projects: projects.sort_by(&:star_count).reverse,
+        projects_limit: 10, stars: true, avatar: false
diff --git a/app/views/admin/users/_user_detail_note.html.haml b/app/views/admin/users/_user_detail_note.html.haml
index cc4827327c9..c8625833a70 100644
--- a/app/views/admin/users/_user_detail_note.html.haml
+++ b/app/views/admin/users/_user_detail_note.html.haml
@@ -1,7 +1,7 @@
 - if @user.note.present?
   - text = @user.note
-  .card
-    .card-header
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-pb-0'}) do |c|
+    - c.header do
       = _('Admin Note')
-    .card-body
+    - c.body do
       %p= text
diff --git a/app/views/admin/users/projects.html.haml b/app/views/admin/users/projects.html.haml
index 2f6c08f123e..ff87cf8f866 100644
--- a/app/views/admin/users/projects.html.haml
+++ b/app/views/admin/users/projects.html.haml
@@ -4,20 +4,22 @@
 = render 'admin/users/head'
 
 - if @user.groups.any?
-  .card
-    .card-header= _('Groups')
-    %ul.hover-list
-      - @user.group_members.includes(:source).each do |group_member| # rubocop: disable CodeReuse/ActiveRecord
-        - group = group_member.group
-        %li.group_member
-          %strong= link_to group.name, admin_group_path(group)
-          &ndash; access to
-          #{pluralize(group.projects.count, 'project')}
-          .float-right
-            %span.light.vertical-align-middle= group_member.human_access
-            - unless group_member.owner?
-              = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member), confirm_btn_variant: 'danger', testid: 'remove-user' }, aria: { label: _('Remove') }, method: :delete, remote: true, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from group') do
-                = sprite_icon('remove', size: 16, css_class: 'gl-icon')
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-0 gl-px-0'}) do |c|
+    - c.header do
+      = _('Groups')
+    - c.body do
+      %ul.hover-list
+        - @user.group_members.includes(:source).each do |group_member| # rubocop: disable CodeReuse/ActiveRecord
+          - group = group_member.group
+          %li.group_member
+            %strong= link_to group.name, admin_group_path(group)
+            &ndash; access to
+            #{pluralize(group.projects.count, 'project')}
+            .float-right
+              %span.light.vertical-align-middle= group_member.human_access
+              - unless group_member.owner?
+                = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member), confirm_btn_variant: 'danger', testid: 'remove-user' }, aria: { label: _('Remove') }, method: :delete, remote: true, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from group') do
+                  = sprite_icon('remove', size: 16, css_class: 'gl-icon')
 
 .row
   .col-md-6
@@ -28,23 +30,25 @@
 
 
   .col-md-6
-    .card
-      .card-header= _('Joined projects (%{projects_count})') % { projects_count: @joined_projects.count }
-      %ul.hover-list
-        - @joined_projects.sort_by(&:full_name).each do |project|
-          - member = project.team.find_member(@user.id)
-          %li.project_member
-            .list-item-name
-              = link_to admin_project_path(project), class: dom_class(project) do
-                = project.full_name
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-0 gl-px-0'}) do |c|
+      - c.header do
+        = _('Joined projects (%{projects_count})') % { projects_count: @joined_projects.count }
+      - c.body do
+        %ul.hover-list
+          - @joined_projects.sort_by(&:full_name).each do |project|
+            - member = project.team.find_member(@user.id)
+            %li.project_member
+              .list-item-name
+                = link_to admin_project_path(project), class: dom_class(project) do
+                  = project.full_name
 
-            - if member
-              .float-right
-                - if member.owner?
-                  %span.light= _('Owner')
-                - else
-                  %span.light.vertical-align-middle= member.human_access
+              - if member
+                .float-right
+                  - if member.owner?
+                    %span.light= _('Owner')
+                  - else
+                    %span.light.vertical-align-middle= member.human_access
 
-                  - if member.respond_to? :project
-                    = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member), confirm_btn_variant: 'danger' }, aria: { label: _('Remove') }, remote: true, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from project') do
-                      = sprite_icon('remove', size: 16, css_class: 'gl-icon')
+                    - if member.respond_to? :project
+                      = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member), confirm_btn_variant: 'danger' }, aria: { label: _('Remove') }, remote: true, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from project') do
+                        = sprite_icon('remove', size: 16, css_class: 'gl-icon')
diff --git a/app/views/admin/users/show.html.haml b/app/views/admin/users/show.html.haml
index 9197d6684e0..7edea81a123 100644
--- a/app/views/admin/users/show.html.haml
+++ b/app/views/admin/users/show.html.haml
@@ -5,138 +5,140 @@
 
 .row
   .col-md-6
-    .card
-      .card-header
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-2'}) do |c|
+      - c.header do
         = @user.name
-      %ul.content-list
-        %li
-          = image_tag avatar_icon_for_user(@user, 60, current_user: current_user), class: "avatar s60"
-        %li
-          %span.light= _('Profile page:')
-          %strong
-            = link_to user_path(@user) do
-              = @user.username
+      - c.body do
+        %ul.content-list
+          %li
+            = render Pajamas::AvatarComponent.new(@user, size: 64, class: 'gl-mr-3')
+          %li
+            %span.light= _('Profile page:')
+            %strong
+              = link_to user_path(@user) do
+                = @user.username
     -# Rendered on mobile only so order of cards can be different on desktop vs mobile
     .gl-md-display-none
       = render 'admin/users/profile', user: @user
       = render 'admin/users/user_detail_note'
-    .card
-      .card-header
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-2'}) do |c|
+      - c.header do
         = _('Account:')
-      %ul.content-list
-        %li
-          %span.light= _('Name:')
-          %strong= @user.name
-        %li
-          %span.light= _('Username:')
-          %strong
-            = @user.username
-        %li
-          %span.light= _('Email:')
-          %strong
-            = render partial: 'shared/email_with_badge', locals: { email: mail_to(@user.email), verified: @user.confirmed? }
-        - @user.emails.reject(&:user_primary_email?).each do |email|
-          %li
-            %span.light= _('Secondary email:')
+      - c.body do
+        %ul.content-list
+          %li
+            %span.light= _('Name:')
+            %strong= @user.name
+          %li
+            %span.light= _('Username:')
             %strong
-              = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
-            = link_to remove_email_admin_user_path(@user, email), data: { confirm: _("Are you sure you want to remove %{email}?") % { email: email.email }, 'confirm-btn-variant': 'danger' }, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon float-right", title: _('Remove secondary email'), id: "remove_email_#{email.id}" do
-              = sprite_icon('close', size: 16, css_class: 'gl-icon')
-        %li
-          %span.light ID:
-          %strong{ data: { qa_selector: 'user_id_content' } }
-            = @user.id
-        %li
-          %span.light= _('Namespace ID:')
-          %strong
-            = @user.namespace_id
-
-        %li.two-factor-status
-          %span.light= _('Two-factor Authentication:')
-          %strong{ class: @user.two_factor_enabled? ? 'cgreen' : 'cred' }
-            - if @user.two_factor_enabled?
-              = _('Enabled')
-              = link_to _('Disable'), disable_two_factor_admin_user_path(@user), aria: { label: _('Disable') }, data: { confirm: _('Are you sure?'), 'confirm-btn-variant': 'danger' }, method: :patch, class: 'btn gl-button btn-sm btn-danger float-right', title: _('Disable Two-factor Authentication')
-            - else
-              = _('Disabled')
-
-        = render_if_exists 'admin/namespace_plan_info', namespace: @user.namespace
-
-        %li
-          %span.light= _('External User:')
-          %strong
-            = @user.external? ? _('Yes') : _('No')
-
-        = render_if_exists 'admin/users/provisioned_by', user: @user
-
-        %li
-          %span.light= _('Can create groups:')
-          %strong
-            = @user.can_create_group ? _('Yes') : _('No')
-        %li
-          %span.light= _('Personal projects limit:')
-          %strong
-            = @user.projects_limit
-        %li
-          %span.light= _('Member since:')
-          %strong
-            = @user.created_at.to_s(:medium)
-        - if @user.confirmed_at
-          %li
-            %span.light= _('Confirmed at:')
+              = @user.username
+          %li
+            %span.light= _('Email:')
             %strong
-              = @user.confirmed_at.to_s(:medium)
-        - else
+              = render partial: 'shared/email_with_badge', locals: { email: mail_to(@user.email), verified: @user.confirmed? }
+          - @user.emails.reject(&:user_primary_email?).each do |email|
+            %li
+              %span.light= _('Secondary email:')
+              %strong
+                = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
+              = link_to remove_email_admin_user_path(@user, email), data: { confirm: _("Are you sure you want to remove %{email}?") % { email: email.email }, 'confirm-btn-variant': 'danger' }, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon float-right", title: _('Remove secondary email'), id: "remove_email_#{email.id}" do
+                = sprite_icon('close', size: 16, css_class: 'gl-icon')
           %li
-            %span.ligh= _('Confirmed:')
-            %strong.cred
-              = _('No')
+            %span.light ID:
+            %strong{ data: { qa_selector: 'user_id_content' } }
+              = @user.id
+          %li
+            %span.light= _('Namespace ID:')
+            %strong
+              = @user.namespace_id
 
-        %li
-          %span.light= _('Current sign-in IP:')
-          %strong
-            = @user.current_sign_in_ip || _('never')
+          %li.two-factor-status
+            %span.light= _('Two-factor Authentication:')
+            %strong{ class: @user.two_factor_enabled? ? 'cgreen' : 'cred' }
+              - if @user.two_factor_enabled?
+                = _('Enabled')
+                = link_to _('Disable'), disable_two_factor_admin_user_path(@user), aria: { label: _('Disable') }, data: { confirm: _('Are you sure?'), 'confirm-btn-variant': 'danger' }, method: :patch, class: 'btn gl-button btn-sm btn-danger float-right', title: _('Disable Two-factor Authentication')
+              - else
+                = _('Disabled')
 
-        %li
-          %span.light= _('Current sign-in at:')
-          %strong
-            = @user.current_sign_in_at&.to_s(:medium) || _('never')
+          = render_if_exists 'admin/namespace_plan_info', namespace: @user.namespace
 
-        %li
-          %span.light= _('Last sign-in IP:')
-          %strong
-            = @user.last_sign_in_ip || _('never')
+          %li
+            %span.light= _('External User:')
+            %strong
+              = @user.external? ? _('Yes') : _('No')
 
-        %li
-          %span.light= _('Last sign-in at:')
-          %strong
-            = @user.last_sign_in_at&.to_s(:medium) || _('never')
+          = render_if_exists 'admin/users/provisioned_by', user: @user
 
-        %li
-          %span.light= _('Sign-in count:')
-          %strong
-            = @user.sign_in_count
+          %li
+            %span.light= _('Can create groups:')
+            %strong
+              = @user.can_create_group ? _('Yes') : _('No')
+          %li
+            %span.light= _('Personal projects limit:')
+            %strong
+              = @user.projects_limit
+          %li
+            %span.light= _('Member since:')
+            %strong
+              = @user.created_at.to_s(:medium)
+          - if @user.confirmed_at
+            %li
+              %span.light= _('Confirmed at:')
+              %strong
+                = @user.confirmed_at.to_s(:medium)
+          - else
+            %li
+              %span.ligh= _('Confirmed:')
+              %strong.cred
+                = _('No')
 
-        %li
-          %span.light= _("Highest role:")
-          %strong
-            = Gitlab::Access.human_access_with_none(@user.highest_role)
+          %li
+            %span.light= _('Current sign-in IP:')
+            %strong
+              = @user.current_sign_in_ip || _('never')
 
-        = render_if_exists 'admin/users/using_license_seat', user: @user
+          %li
+            %span.light= _('Current sign-in at:')
+            %strong
+              = @user.current_sign_in_at&.to_s(:medium) || _('never')
 
-        - if @user.ldap_user?
           %li
-            %span.light= _('LDAP uid:')
+            %span.light= _('Last sign-in IP:')
             %strong
-              = @user.ldap_identity.extern_uid
+              = @user.last_sign_in_ip || _('never')
 
-        - if @user.created_by
           %li
-            %span.light= _('Created by:')
+            %span.light= _('Last sign-in at:')
             %strong
-              = link_to @user.created_by.name, [:admin, @user.created_by]
+              = @user.last_sign_in_at&.to_s(:medium) || _('never')
+
+          %li
+            %span.light= _('Sign-in count:')
+            %strong
+              = @user.sign_in_count
+
+          %li
+            %span.light= _("Highest role:")
+            %strong
+              = Gitlab::Access.human_access_with_none(@user.highest_role)
+
+          = render_if_exists 'admin/users/using_license_seat', user: @user
+
+          - if @user.ldap_user?
+            %li
+              %span.light= _('LDAP uid:')
+              %strong
+                = @user.ldap_identity.extern_uid
+
+          - if @user.created_by
+            %li
+              %span.light= _('Created by:')
+              %strong
+                = link_to @user.created_by.name, [:admin, @user.created_by]
 
-        = render_if_exists 'namespaces/shared_runner_status', namespace: @user.namespace
+          = render_if_exists 'namespaces/shared_runner_status', namespace: @user.namespace
 
     = render_if_exists 'admin/users/credit_card_info', user: @user, link_to_match_page: true