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

62 files changed, 285 insertions, 285 deletions

diff --git a/app/views/shared/_alert_info.html.haml b/app/views/shared/_alert_info.html.haml
index e47c100909a..30dfc87b9bf 100644
--- a/app/views/shared/_alert_info.html.haml
+++ b/app/views/shared/_alert_info.html.haml
@@ -1,6 +1,3 @@
-.gl-alert.gl-alert-info
-  = sprite_icon('information-o', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-  %button.js-close.gl-alert-dismiss{ type: 'button', 'aria-label' => _('Dismiss') }
-    = sprite_icon('close', css_class: 'gl-icon')
-  .gl-alert-body
+= render Pajamas::AlertComponent.new(variant: :info, dismissible: true) do |c|
+  = c.body do
     = body
diff --git a/app/views/shared/_auto_devops_callout.html.haml b/app/views/shared/_auto_devops_callout.html.haml
index d6d84b2181f..c2b941c6106 100644
--- a/app/views/shared/_auto_devops_callout.html.haml
+++ b/app/views/shared/_auto_devops_callout.html.haml
@@ -1,15 +1,13 @@
-%section.js-autodevops-banner.gl-banner{ data: { uid: 'auto_devops_settings_dismissed', project_path: project_path(@project) } }
-  .gl-banner-illustration
-    = image_tag('illustrations/autodevops.svg')
+= render Pajamas::BannerComponent.new(button_text: s_('AutoDevOps|Enable in settings'),
+  button_link: project_settings_ci_cd_path(@project, anchor: 'autodevops-settings'),
+  svg_path: 'illustrations/autodevops.svg',
+  banner_options: { class: 'js-autodevops-banner', data: { uid: 'auto_devops_settings_dismissed', project_path: project_path(@project) } },
+  close_options: { 'aria-label' => s_('AutoDevOps|Dismiss Auto DevOps box'), class: 'js-close-callout' }) do |c|
+  - c.title do
+    = s_('AutoDevOps|Auto DevOps')
 
-  .gl-banner-content
-    %h1.gl-banner-title= s_('AutoDevOps|Auto DevOps')
-    %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.')
-    %p
-      - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer')
-      = s_('AutoDevOps|Learn more in the %{link_to_documentation}').html_safe % { link_to_documentation: link }
-    = link_to s_('AutoDevOps|Enable in settings'), project_settings_ci_cd_path(@project, anchor: 'autodevops-settings'), class: 'btn btn-md btn-default gl-button js-close-callout'
+  %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.')
 
-  %button.gl-banner-close.close.js-close-callout{ type: 'button',
-  'aria-label' => s_('AutoDevOps|Dismiss Auto DevOps box') }
-    = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
+  %p
+    - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer')
+    = s_('AutoDevOps|Learn more in the %{link_to_documentation}').html_safe % { link_to_documentation: link }
diff --git a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
index d69f54608e9..1f37e33a037 100644
--- a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
+++ b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
@@ -1,7 +1,7 @@
 - if show_auto_devops_implicitly_enabled_banner?(project, current_user)
-  = render Pajamas::AlertComponent.new(alert_class: 'qa-auto-devops-banner auto-devops-implicitly-enabled-banner',
-    close_button_class: 'hide-auto-devops-implicitly-enabled-banner',
-    close_button_data: { project_id: project.id }) do |c|
+  = render Pajamas::AlertComponent.new(alert_options: { class: 'qa-auto-devops-banner auto-devops-implicitly-enabled-banner' },
+    close_button_options: { class: 'hide-auto-devops-implicitly-enabled-banner',
+                            data: { project_id: project.id }}) do |c|
     = c.body do
       = s_("AutoDevOps|The Auto DevOps pipeline has been enabled and will be used if no alternative CI configuration file is found.")
       - unless Gitlab.config.registry.enabled
diff --git a/app/views/shared/_broadcast_message.html.haml b/app/views/shared/_broadcast_message.html.haml
index ab6423e9ade..f7794677dc1 100644
--- a/app/views/shared/_broadcast_message.html.haml
+++ b/app/views/shared/_broadcast_message.html.haml
@@ -13,8 +13,11 @@
         - else
           = yield
     - if dismissable && !preview
-      %button.btn.gl-close-btn-color-inherit.gl-broadcast-message-dismiss.btn-default.btn-sm.gl-button.btn-default-tertiary.btn-icon.js-dismiss-current-broadcast-notification{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id, expire_date: message.ends_at.iso8601 } }
-        = sprite_icon('close', size: 16, css_class: "gl-icon gl-mx-3! gl-text-white")
+      = render Pajamas::ButtonComponent.new(category: :tertiary,
+        icon: 'close',
+        size: :small,
+        button_options: { class: 'gl-close-btn-color-inherit gl-broadcast-message-dismiss js-dismiss-current-broadcast-notification', 'aria-label': _('Close'), data: { id: message.id, expire_date: message.ends_at.iso8601 } },
+        icon_classes: 'gl-mx-3! gl-text-white')
 - else
   - notification_class = "js-broadcast-notification-#{message.id}"
   - notification_class << ' preview' if preview
@@ -25,5 +28,8 @@
     - else
       = yield
     - if !preview
-      %button.js-dismiss-current-broadcast-notification.btn.btn-link.gl-button{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id, expire_date: message.ends_at.iso8601 } }
-        = sprite_icon('close', size: 16, css_class: "gl-icon gl-mx-3! gl-text-gray-700")
+      = render Pajamas::ButtonComponent.new(variant: :link,
+        icon: 'close',
+        size: :small,
+        button_options: { class: 'js-dismiss-current-broadcast-notification', 'aria-label': _('Close'), data: { id: message.id, expire_date: message.ends_at.iso8601 } },
+        icon_classes: 'gl-mx-3! gl-text-gray-700')
diff --git a/app/views/shared/_captcha_check.html.haml b/app/views/shared/_captcha_check.html.haml
index 3d611c22491..a10ae655ea6 100644
--- a/app/views/shared/_captcha_check.html.haml
+++ b/app/views/shared/_captcha_check.html.haml
@@ -3,7 +3,7 @@
 - script = local_assigns.fetch(:script, true)
 - method = params[:action] == 'create' ? :post : :put
 
-%h3.page-title
+%h1.page-title.gl-font-size-h-display
   = _('Anti-spam verification')
 %hr
 
diff --git a/app/views/shared/_group_form.html.haml b/app/views/shared/_group_form.html.haml
index ee8cfe3abb6..5ae99474c70 100644
--- a/app/views/shared/_group_form.html.haml
+++ b/app/views/shared/_group_form.html.haml
@@ -2,38 +2,42 @@
 - group_path = root_url
 - group_path << parent.full_path + '/' if parent
 
-.row
-  .form-group.group-name-holder.col-sm-12
-    = f.label :name, class: 'label-bold' do
-      = s_('Groups|Group name')
-    = f.text_field :name, placeholder: _('My awesome group'), class: 'js-autofill-group-name form-control input-lg', data: { qa_selector: 'group_name_field' },
-      required: true,
-      title: s_('Groups|Enter a descriptive name for your group.'),
-      autofocus: true
-    .text-muted
-      = s_('Groups|Must start with letter, digit, emoji, or underscore. Can also contain periods, dashes, spaces, and parentheses.')
 
-.row
-  .form-group.col-xs-12.col-sm-8
-    = f.label :path, class: 'label-bold' do
-      = s_('Groups|Group URL')
-    .input-group.gl-field-error-anchor
-      .group-root-path.input-group-prepend.has-tooltip{ title: group_path, :'data-placement' => 'bottom' }
-        .input-group-text
-          %span>= root_url
-          - if parent
-            %strong= parent.full_path + '/'
-      = f.hidden_field :parent_id
-      = f.text_field :path, placeholder: _('my-awesome-group'), class: 'form-control js-validate-group-path js-autofill-group-path', data: { qa_selector: 'group_path_field' },
-        autofocus: local_assigns[:autofocus] || false, required: true,
-        pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
-        title: group_url_error_message,
-        maxlength: ::Namespace::URL_MAX_LENGTH,
-        "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
-    %p.validation-error.gl-field-error.field-validation.hide
-      = s_('Groups|Group path is unavailable. Path has been replaced with a suggested available path.')
-    %p.validation-success.gl-field-success.field-validation.hide= s_('Groups|Group path is available.')
-    %p.validation-pending.gl-field-error-ignore.field-validation.hide= s_('Groups|Checking group URL availability...')
+- if Feature::enabled?(:group_name_path_vue, current_user)
+  = render 'shared/groups/group_name_and_path_fields', f: f
+- else
+  .row
+    .form-group.group-name-holder.col-sm-12
+      = f.label :name, class: 'label-bold' do
+        = s_('Groups|Group name')
+      = f.text_field :name, placeholder: _('My awesome group'), class: 'js-autofill-group-name form-control input-lg', data: { qa_selector: 'group_name_field' },
+        required: true,
+        title: s_('Groups|Enter a descriptive name for your group.'),
+        autofocus: true
+      .text-muted
+        = s_('Groups|Must start with letter, digit, emoji, or underscore. Can also contain periods, dashes, spaces, and parentheses.')
+
+  .row
+    .form-group.col-xs-12.col-sm-8
+      = f.label :path, class: 'label-bold' do
+        = s_('Groups|Group URL')
+      .input-group.gl-field-error-anchor
+        .group-root-path.input-group-prepend.has-tooltip{ title: group_path, :'data-placement' => 'bottom' }
+          .input-group-text
+            %span>= root_url
+            - if parent
+              %strong= parent.full_path + '/'
+        = f.hidden_field :parent_id
+        = f.text_field :path, placeholder: _('my-awesome-group'), class: 'form-control js-validate-group-path js-autofill-group-path', data: { qa_selector: 'group_path_field' },
+          autofocus: local_assigns[:autofocus] || false, required: true,
+          pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
+          title: group_url_error_message,
+          maxlength: ::Namespace::URL_MAX_LENGTH,
+          "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
+      %p.validation-error.gl-field-error.field-validation.hide
+        = s_('Groups|Group path is unavailable. Path has been replaced with a suggested available path.')
+      %p.validation-success.gl-field-success.field-validation.hide= s_('Groups|Group path is available.')
+      %p.validation-pending.gl-field-error-ignore.field-validation.hide= s_('Groups|Checking group URL availability...')
 
     - if @group.persisted?
       .gl-alert.gl-alert-warning.gl-mt-3.gl-mb-3
@@ -43,9 +47,9 @@
           = succeed '.' do
             = link_to s_('Groups|Learn more'), help_page_path('user/group/index', anchor: 'change-a-groups-path'), target: '_blank', class: 'gl-link'
 
-- if @group.persisted?
-  .row
-    .form-group.group-name-holder.col-sm-8
-      = f.label :id, class: 'label-bold' do
-        = s_('Groups|Group ID')
-      = f.text_field :id, class: 'form-control', readonly: true
+  - if @group.persisted?
+    .row
+      .form-group.group-name-holder.col-sm-8
+        = f.label :id, class: 'label-bold' do
+          = s_('Groups|Group ID')
+        = f.text_field :id, class: 'form-control', readonly: true
diff --git a/app/views/shared/_import_form.html.haml b/app/views/shared/_import_form.html.haml
index 7248403d6c9..d10f514dc58 100644
--- a/app/views/shared/_import_form.html.haml
+++ b/app/views/shared/_import_form.html.haml
@@ -22,9 +22,9 @@
     = f.text_field :import_url, value: import_url.sanitized_url,
         autocomplete: 'off', class: 'form-control gl-form-input', placeholder: 'https://gitlab.company.com/group/project.git', required: true
     = render Pajamas::AlertComponent.new(variant: :danger,
-      alert_class: 'gl-mt-3 js-import-url-error hide',
+      alert_options: { class: 'gl-mt-3 js-import-url-error hide' },
       dismissible: false,
-      close_button_class: 'js-close-2fa-enabled-success-alert') do |c|
+      close_button_options: { class: 'js-close-2fa-enabled-success-alert' }) do |c|
       = c.body do
         = s_('Import|There is not a valid Git repository at this URL. If your HTTP repository is not publicly accessible, verify your credentials.')
   = render_if_exists 'shared/ee/import_form', f: f, ci_cd_only: ci_cd_only
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index 9428813f6b0..af5657e0e14 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -6,25 +6,27 @@
 - toggle_subscription_path = toggle_subscription_label_path(label, @project) if current_user
 - tooltip_title = label_status_tooltip(label, status) if status
 
-%li.label-list-item{ id: label_css_id, data: { id: label.id } }
+%li.label-list-item{ id: label_css_id, class: "gl-p-5 gl-border-b", data: { id: label.id } }
   = render "shared/label_row", label: label, force_priority: force_priority
   %ul.label-actions-list
     - if can?(current_user, :admin_label, @project)
       %li.gl-display-inline-block.js-toggle-priority.gl-ml-3{ data: { url: remove_priority_project_label_path(@project, label),
         dom_id: dom_id(label), type: label.type } }
-        %button.add-priority.btn.gl-button.btn-default-tertiary.btn-sm.has-tooltip{ title: _('Prioritize'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Prioritize label') }
-          = sprite_icon('star-o')
-        %button.remove-priority.btn.gl-button.btn-default-tertiary.btn-sm.has-tooltip{ title: _('Remove priority'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Deprioritize label') }
-          = sprite_icon('star')
+        = render Pajamas::ButtonComponent.new(category: :tertiary,
+          icon: 'star',
+          button_options: { class: 'remove-priority has-tooltip', 'title': _('Remove priority'), 'aria_label': _('Deprioritize label'), data: { placement: 'bottom' } })
+        = render Pajamas::ButtonComponent.new(category: :tertiary,
+          icon: 'star-o',
+          button_options: { class: 'add-priority has-tooltip', title: _('Prioritize'), aria_label: _('Prioritize label'), data: { placement: 'bottom' } })
     - if can?(current_user, :admin_label, label)
       %li.gl-display-inline-block
-        = link_to label.edit_path, class: 'btn gl-button btn-default-tertiary btn-sm edit has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
-          = sprite_icon('pencil')
+        = render Pajamas::ButtonComponent.new(href: label.edit_path, category: :tertiary, icon: 'pencil', button_options: { class: 'edit has-tooltip', 'title': _('Edit'), 'aria_label': _('Edit'), data: { placement: 'bottom' } })
     - if can?(current_user, :admin_label, label)
       %li.gl-display-inline-block
         .dropdown
-          %button{ type: 'button', class: 'btn gl-button btn-default-tertiary btn-sm js-label-options-dropdown', data: { toggle: 'dropdown' }, aria_label: _('Label actions dropdown') }
-            = sprite_icon('ellipsis_v')
+          = render Pajamas::ButtonComponent.new(category: :tertiary,
+            icon: 'ellipsis_v',
+            button_options: { class: 'js-label-options-dropdown', 'aria_label': _('Label actions dropdown'), data: { toggle: 'dropdown' } })
           .dropdown-menu.dropdown-open-left
             %ul
               - if label.project_label? && label.project.group && can?(current_user, :admin_label, label.project.group)
@@ -46,10 +48,9 @@
           %button.js-unsubscribe-button.gl-button.btn.btn-default.gl-w-full{ class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
             %span.gl-button-text= _('Unsubscribe')
           .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) }
-            %button.gl-button.btn.btn-default.gl-w-full{ data: { toggle: 'dropdown' } }
-              %span.gl-button-text
-                = _('Subscribe')
-                = sprite_icon('chevron-down')
+            = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-w-full', data: { toggle: 'dropdown' } }) do
+              = _('Subscribe')
+              = sprite_icon('chevron-down')
             .dropdown-menu.dropdown-open-left
               %ul
                 %li
diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml
index 91cd91ec38b..76830230cf6 100644
--- a/app/views/shared/_no_password.html.haml
+++ b/app/views/shared/_no_password.html.haml
@@ -1,7 +1,7 @@
 - if show_no_password_message?
   = render Pajamas::AlertComponent.new(variant: :warning,
-    alert_class: 'js-no-password-message',
-    close_button_class: 'js-hide-no-password-message') do |c|
+    alert_options: { class: 'js-no-password-message' },
+    close_button_options: { class: 'js-hide-no-password-message' }) do |c|
     = c.body do
       = no_password_message
     = c.actions do
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index c4d8cb092dc..be1df54a432 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -1,7 +1,7 @@
 - if show_no_ssh_key_message?
   = render Pajamas::AlertComponent.new(variant: :warning,
-    alert_class: 'js-no-ssh-message',
-    close_button_class: 'js-hide-no-ssh-message') do |c|
+    alert_options: { class: 'js-no-ssh-message' },
+    close_button_options: { class: 'js-hide-no-ssh-message'}) do |c|
     = c.body do
       = s_("MissingSSHKeyWarningLink|You can't push or pull repositories using SSH until you add an SSH key to your profile.")
     = c.actions do
diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml
index b630c829c76..60be03c6631 100644
--- a/app/views/shared/_project_limit.html.haml
+++ b/app/views/shared/_project_limit.html.haml
@@ -1,7 +1,7 @@
 - if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0
   = render Pajamas::AlertComponent.new(variant: :warning,
     dismissible: false,
-    alert_class: 'project-limit-message') do |c|
+    alert_options: { class: 'project-limit-message' }) do |c|
     = c.body do
       = _("You won't be able to create new projects because you have reached your project limit.")
     = c.actions do
diff --git a/app/views/shared/_remote_mirror_update_button.html.haml b/app/views/shared/_remote_mirror_update_button.html.haml
index 70b72f74ab3..f3942aa5dc2 100644
--- a/app/views/shared/_remote_mirror_update_button.html.haml
+++ b/app/views/shared/_remote_mirror_update_button.html.haml
@@ -1,6 +1,7 @@
 - if remote_mirror.update_in_progress?
-  %button.btn.btn-icon.gl-button.disabled{ type: 'button', data: { toggle: 'tooltip', container: 'body', qa_selector: 'updating_button' }, title: _('Updating') }
-    = sprite_icon("retry", css_class: "spin")
+  = render Pajamas::ButtonComponent.new(icon: 'retry',
+    button_options: { class: 'disabled', title: _('Updating'), data: { toggle: 'tooltip', container: 'body', qa_selector: 'updating_button' } },
+    icon_classes: 'spin')
 - elsif remote_mirror.enabled?
   = link_to update_now_project_mirror_path(@project, sync_remote: true), method: :post, class: "btn btn-icon gl-button qa-update-now-button rspec-update-now-button", data: { toggle: 'tooltip', container: 'body' }, title: _('Update now') do
     = sprite_icon("retry")
diff --git a/app/views/shared/_service_ping_consent.html.haml b/app/views/shared/_service_ping_consent.html.haml
index 8de7552c39a..700ffa7aa12 100644
--- a/app/views/shared/_service_ping_consent.html.haml
+++ b/app/views/shared/_service_ping_consent.html.haml
@@ -1,5 +1,5 @@
 - if session[:ask_for_usage_stats_consent]
-  = render Pajamas::AlertComponent.new(alert_class: 'service-ping-consent-message') do |c|
+  = render Pajamas::AlertComponent.new(alert_options: { class: 'service-ping-consent-message' }) do |c|
     = c.body do
       - docs_link = link_to _('collect usage information'), help_page_path('user/admin_area/settings/usage_statistics.md'), class: 'gl-link'
       - settings_link = link_to _('your settings'), metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), class: 'gl-link'
@@ -7,5 +7,5 @@
     = c.actions do
       - send_service_data_path = admin_application_settings_path(application_setting: { version_check_enabled: 1, usage_ping_enabled: 1 })
       - not_now_path = admin_application_settings_path(application_setting: { version_check_enabled: 0, usage_ping_enabled: 0 })
-      = link_to _("Send service data"), send_service_data_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': true, 'data-service-ping-enabled': true, class: 'js-service-ping-consent-action alert-link btn gl-button btn-info'
+      = link_to _("Send service data"), send_service_data_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': true, 'data-service-ping-enabled': true, class: 'js-service-ping-consent-action alert-link btn gl-button btn-confirm'
       = link_to _("Don't send service data"), not_now_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': false, 'data-service-ping-enabled': false, class: 'js-service-ping-consent-action alert-link btn gl-button btn-default gl-ml-3'
diff --git a/app/views/shared/_sidebar_toggle_button.html.haml b/app/views/shared/_sidebar_toggle_button.html.haml
index b3d6c4c327b..0a74e47fa4c 100644
--- a/app/views/shared/_sidebar_toggle_button.html.haml
+++ b/app/views/shared/_sidebar_toggle_button.html.haml
@@ -1,5 +1,5 @@
 %a.toggle-sidebar-button.js-toggle-sidebar.qa-toggle-sidebar.rspec-toggle-sidebar{ role: "button", type: "button", title: "Toggle sidebar" }
-  = sprite_icon('chevron-double-lg-left', css_class: 'icon-chevron-double-lg-left')
+  = sprite_icon('chevron-double-lg-left', size: 12, css_class: 'icon-chevron-double-lg-left')
   %span.collapse-text.gl-ml-3= _("Collapse sidebar")
 
 = button_tag class: 'close-nav-button', type: 'button' do
diff --git a/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml b/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
index 0899756d088..ff4b2de2286 100644
--- a/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
+++ b/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
@@ -1,9 +1,9 @@
 = render Pajamas::AlertComponent.new(variant: :warning,
-  alert_class: 'js-recovery-settings-callout gl-mt-5',
-  alert_data: { feature_id: Users::CalloutsHelper::TWO_FACTOR_AUTH_RECOVERY_SETTINGS_CHECK,
-                dismiss_endpoint: callouts_path,
-                defer_links: 'true' },
-  close_button_data: { testid: 'close-account-recovery-regular-check-callout' }) do |c|
+  alert_options: { class: 'js-recovery-settings-callout gl-mt-5',
+                   data: { feature_id: Users::CalloutsHelper::TWO_FACTOR_AUTH_RECOVERY_SETTINGS_CHECK,
+                           dismiss_endpoint: callouts_path,
+                           defer_links: 'true' }},
+  close_button_options: { data: { testid: 'close-account-recovery-regular-check-callout' }}) do |c|
   = c.body do
     = s_('Profiles|Ensure you have two-factor authentication recovery codes stored in a safe place.')
     = link_to _('Learn more.'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'recovery-codes'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/shared/access_tokens/_form.html.haml b/app/views/shared/access_tokens/_form.html.haml
index d4106ba4e5d..0f6fc860883 100644
--- a/app/views/shared/access_tokens/_form.html.haml
+++ b/app/views/shared/access_tokens/_form.html.haml
@@ -1,3 +1,4 @@
+- ajax = local_assigns.fetch(:ajax, false)
 - title = local_assigns.fetch(:title, _('Add a %{type}') % { type: type })
 - prefix = local_assigns.fetch(:prefix, :personal_access_token)
 - help_path = local_assigns.fetch(:help_path)
@@ -10,9 +11,9 @@
 %p.profile-settings-content
   = _("Enter the name of your application, and we'll return a unique %{type}.") % { type: type }
 
-= gitlab_ui_form_for token, as: prefix, url: path, method: :post, html: { class: 'js-requires-input' } do |f|
+= gitlab_ui_form_for token, as: prefix, url: path, method: :post, html: { id: 'js-new-access-token-form', class: 'js-requires-input' }, remote: ajax do |f|
 
-  = form_errors(token)
+  = form_errors(token, pajamas_alert: true)
 
   .row
     .form-group.col
diff --git a/app/views/shared/builds/_tabs.html.haml b/app/views/shared/builds/_tabs.html.haml
index 3bbd7a32bda..8e4b8d6d428 100644
--- a/app/views/shared/builds/_tabs.html.haml
+++ b/app/views/shared/builds/_tabs.html.haml
@@ -1,6 +1,6 @@
 - count_badge_classes = 'gl-display-none gl-sm-display-inline-flex'
 
-= gl_tabs_nav( {class: 'gl-border-b-0 gl-flex-grow-1', data: { testid: 'jobs-tabs' } } ) do
+= gl_tabs_nav( {class: 'scrolling-tabs nav-links gl-display-flex gl-flex-grow-1 gl-w-full nav gl-border-b-0', data: { testid: 'jobs-tabs' } } ) do
   = gl_tab_link_to build_path_proc.call(nil), { item_active: scope.nil? } do
     = _('All')
     = gl_tab_counter_badge(limited_counter_with_delimiter(all_builds), { class: count_badge_classes })
diff --git a/app/views/shared/deploy_keys/_form.html.haml b/app/views/shared/deploy_keys/_form.html.haml
index b60d433bafa..4ab93030638 100644
--- a/app/views/shared/deploy_keys/_form.html.haml
+++ b/app/views/shared/deploy_keys/_form.html.haml
@@ -2,7 +2,7 @@
 - deploy_key = local_assigns.fetch(:deploy_key)
 - deploy_keys_project = deploy_key.deploy_keys_project_for(@project)
 
-= form_errors(deploy_key)
+= form_errors(deploy_key, pajamas_alert: true)
 
 .form-group
   = form.label :title, class: 'col-form-label col-sm-2'
diff --git a/app/views/shared/deploy_keys/_index.html.haml b/app/views/shared/deploy_keys/_index.html.haml
index 388fe75e833..1cd2a590653 100644
--- a/app/views/shared/deploy_keys/_index.html.haml
+++ b/app/views/shared/deploy_keys/_index.html.haml
@@ -2,8 +2,8 @@
 %section.rspec-deploy-keys-settings.settings.no-animate#js-deploy-keys-settings{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_keys_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Deploy keys')
-    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? 'Collapse' : 'Expand'
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
+      = expanded ? _('Collapse') : _('Expand')
     %p
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/deploy_keys/index') }
       = _("Add deploy keys to grant read/write access to this repository. %{link_start}What are deploy keys?%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
diff --git a/app/views/shared/deploy_tokens/_index.html.haml b/app/views/shared/deploy_tokens/_index.html.haml
index 860fb5614af..aa4a3deaac4 100644
--- a/app/views/shared/deploy_tokens/_index.html.haml
+++ b/app/views/shared/deploy_tokens/_index.html.haml
@@ -3,8 +3,8 @@
 %section.settings.no-animate#js-deploy-tokens{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_tokens_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= s_('DeployTokens|Deploy tokens')
-    %button.btn.gl-button.btn-default.js-settings-toggle
-      = expanded ? 'Collapse' : 'Expand'
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
+      = expanded ? _('Collapse') : _('Expand')
     %p
       = description
   .settings-content
diff --git a/app/views/shared/empty_states/_wikis.html.haml b/app/views/shared/empty_states/_wikis.html.haml
index c3120774826..552b100d5dd 100644
--- a/app/views/shared/empty_states/_wikis.html.haml
+++ b/app/views/shared/empty_states/_wikis.html.haml
@@ -13,7 +13,7 @@
     = create_link
     - if show_enable_confluence_integration?(@wiki.container)
       = link_to s_('WikiEmpty|Enable the Confluence Wiki integration'),
-          edit_project_integration_path(@project, :confluence),
+          edit_project_settings_integration_path(@project, :confluence),
           class: 'btn gl-button', title: s_('WikiEmpty|Enable the Confluence Wiki integration')
 
 - elsif @project && can?(current_user, :read_issue, @project)
diff --git a/app/views/shared/errors/_gitaly_unavailable.html.haml b/app/views/shared/errors/_gitaly_unavailable.html.haml
index c9d7920b9c2..ba3293a3f75 100644
--- a/app/views/shared/errors/_gitaly_unavailable.html.haml
+++ b/app/views/shared/errors/_gitaly_unavailable.html.haml
@@ -1,4 +1,4 @@
-= render Pajamas::AlertComponent.new(alert_class: 'gl-my-5',
+= render Pajamas::AlertComponent.new(alert_options: { class: 'gl-my-5' },
   variant: :danger,
   dismissible: false,
   title: reason) do |c|
diff --git a/app/views/shared/form_elements/_description.html.haml b/app/views/shared/form_elements/_description.html.haml
index 94818c13f76..a87aa8de679 100644
--- a/app/views/shared/form_elements/_description.html.haml
+++ b/app/views/shared/form_elements/_description.html.haml
@@ -6,23 +6,22 @@
 - supports_quick_actions = true
 - preview_url = preview_markdown_path(project, target_type: model.class.name)
 
-.form-group.row.detail-page-description
-  = form.label :description, _('Description'), class: 'col-form-label col-sm-2'
-  .col-sm-10
-    - if model.is_a?(MergeRequest)
-      = hidden_field_tag :merge_request_diff_head_sha, model.diff_head_sha
+.form-group
+  = form.label :description, _('Description'), class: 'gl-display-block'
+  - if model.is_a?(MergeRequest)
+    = hidden_field_tag :merge_request_diff_head_sha, model.diff_head_sha
 
-    - if model.is_a?(Issuable)
-      = render 'shared/issuable/form/template_selector', issuable: model
+  - if model.is_a?(Issuable)
+    = render 'shared/issuable/form/template_selector', issuable: model
 
-    = render 'shared/form_elements/apply_template_warning', issuable: model
+  = render 'shared/form_elements/apply_template_warning', issuable: model
 
-    = render layout: 'shared/md_preview', locals: { url: preview_url, referenced_users: true } do
-      = render 'shared/zen', f: form, attr: :description,
-                               classes: 'note-textarea rspec-issuable-form-description',
-                               placeholder: placeholder,
-                               supports_quick_actions: supports_quick_actions,
-                               qa_selector: 'issuable_form_description'
-      = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
-      .clearfix
-      .error-alert
+  = render layout: 'shared/md_preview', locals: { url: preview_url, referenced_users: true } do
+    = render 'shared/zen', f: form, attr: :description,
+                              classes: 'note-textarea rspec-issuable-form-description',
+                              placeholder: placeholder,
+                              supports_quick_actions: supports_quick_actions,
+                              qa_selector: 'issuable_form_description'
+    = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
+    .clearfix
+    .error-alert
diff --git a/app/views/shared/groups/_group_name_and_path_fields.html.haml b/app/views/shared/groups/_group_name_and_path_fields.html.haml
new file mode 100644
index 00000000000..709130a47d3
--- /dev/null
+++ b/app/views/shared/groups/_group_name_and_path_fields.html.haml
@@ -0,0 +1,5 @@
+.js-group-name-and-path{ data: group_name_and_path_app_data(@group) }
+  = f.hidden_field :name, data: { js_name: 'name' }
+  = f.hidden_field :path, maxlength: ::Namespace::URL_MAX_LENGTH, pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, data: { js_name: 'path' }
+  = f.hidden_field :parent_id, data: { js_name: 'parentId' }
+  = f.hidden_field :id, data: { js_name: 'groupId' }
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
index 932971402a2..8b5b4b6e5fa 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -30,8 +30,11 @@
 
 %h4.gl-mt-6= _('Request')
 %pre
-  :escaped
-    #{Gitlab::Json.pretty_generate(hook_log.request_data)}
+  - if hook_log.oversize?
+    = _('Request data is too large')
+  - else
+    :escaped
+      #{Gitlab::Json.pretty_generate(hook_log.request_data)}
 
 %h5= _('Headers')
 %pre
diff --git a/app/views/shared/integrations/overrides.html.haml b/app/views/shared/integrations/overrides.html.haml
index 4619675cfef..a63053bde0a 100644
--- a/app/views/shared/integrations/overrides.html.haml
+++ b/app/views/shared/integrations/overrides.html.haml
@@ -3,7 +3,7 @@
 - page_title @integration.title, _('Integrations')
 - @content_class = 'limit-container-width' unless fluid_layout
 
-%h3.page-title
+%h1.page-title.gl-font-size-h-display
   = @integration.title
 
 .js-vue-integration-overrides{ data: integration_overrides_data(@integration, project: @project, group: @group) }
diff --git a/app/views/shared/issuable/_bulk_update_sidebar.html.haml b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
index 3a526a9f306..8409f224158 100644
--- a/app/views/shared/issuable/_bulk_update_sidebar.html.haml
+++ b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
@@ -6,8 +6,10 @@
     = form_tag [:bulk_update, @project, type], method: :post, class: "bulk-update" do
       .block.issuable-sidebar-header
         .filter-item.inline.update-issues-btn.float-left
-          = button_tag _('Update all'), class: "gl-button btn js-update-selected-issues btn-confirm", disabled: true
-        = button_tag _('Cancel'), class: "gl-button btn btn-default js-bulk-update-menu-hide float-right"
+          = render Pajamas::ButtonComponent.new(variant: :confirm, button_options: { type: 'submit', disabled: true, class: 'js-update-selected-issues' }) do
+            = _('Update all')
+        = render Pajamas::ButtonComponent.new(button_options: { class: 'js-bulk-update-menu-hide float-right' }) do
+          = _('Cancel')
       - if params[:state] != 'merged'
         .block
           .title
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 62e1a930ee6..da49a301087 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -8,7 +8,7 @@
 - if @conflict
   = render Pajamas::AlertComponent.new(variant: :danger,
     dismissible: false,
-    alert_class: 'gl-mb-5') do |c|
+    alert_options: { class: 'gl-mb-5' }) do |c|
     = c.body do
       Someone edited the #{issuable.class.model_name.human.downcase} the same time you did.
       Please check out
@@ -17,12 +17,11 @@
 
 = render 'shared/issuable/form/branch_chooser', issuable: issuable, form: form
 
-.form-group.row
-  = form.label :title, class: 'col-form-label col-sm-2' do
-    = _('Title')
-    %i{ aria: { hidden: true } }= '*'
+.form-group
+  = form.label :title do
+    = _('Title (required)')
 
-  = render 'shared/issuable/form/title', issuable: issuable, form: form, has_wip_commits: commits && commits.detect(&:work_in_progress?)
+  = render 'shared/issuable/form/title', issuable: issuable, form: form, has_wip_commits: commits && commits.detect(&:draft?)
 #js-suggestions{ data: { project_path: @project.full_path } }
 
 = render 'shared/issuable/form/type_selector', issuable: issuable, form: form
@@ -36,27 +35,26 @@
 = render 'shared/issuable/form/contribution', issuable: issuable, form: form
 
 - if @merge_request_to_resolve_discussions_of
-  .form-group.row
-    .col-sm-10.offset-sm-2
-      = sprite_icon('information-o')
-      - if @merge_request_to_resolve_discussions_of.discussions_can_be_resolved_by?(current_user)
-        = hidden_field_tag 'merge_request_to_resolve_discussions_of', @merge_request_to_resolve_discussions_of.iid
-        - if @discussion_to_resolve
-          = hidden_field_tag 'discussion_to_resolve', @discussion_to_resolve.id
-          Creating this issue will resolve the thread in
-        - else
-          Creating this issue will resolve all threads in
-        = link_to_discussions_to_resolve(@merge_request_to_resolve_discussions_of, @discussion_to_resolve)
+  .form-group
+    = sprite_icon('information-o')
+    - if @merge_request_to_resolve_discussions_of.discussions_can_be_resolved_by?(current_user)
+      = hidden_field_tag 'merge_request_to_resolve_discussions_of', @merge_request_to_resolve_discussions_of.iid
+      - if @discussion_to_resolve
+        = hidden_field_tag 'discussion_to_resolve', @discussion_to_resolve.id
+        Creating this issue will resolve the thread in
       - else
-        The
-        = @discussion_to_resolve ? 'thread' : 'threads'
-        at
-        = link_to_discussions_to_resolve(@merge_request_to_resolve_discussions_of, @discussion_to_resolve)
-        will stay unresolved. Ask someone with permission to resolve
-        = @discussion_to_resolve ? 'it.' : 'them.'
+        Creating this issue will resolve all threads in
+      = link_to_discussions_to_resolve(@merge_request_to_resolve_discussions_of, @discussion_to_resolve)
+    - else
+      The
+      = @discussion_to_resolve ? 'thread' : 'threads'
+      at
+      = link_to_discussions_to_resolve(@merge_request_to_resolve_discussions_of, @discussion_to_resolve)
+      will stay unresolved. Ask someone with permission to resolve
+      = @discussion_to_resolve ? 'it.' : 'them.'
 
 - is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?)
-.row-content-block{ class: (is_footer ? "footer-block" : "middle-block") }
+.gl-mt-5{ class: (is_footer ? "footer-block" : "middle-block") }
   - if !issuable.persisted? && !issuable.project.empty_repo? && (guide_url = issuable.project.present.contribution_guide_path)
     .gl-mb-5
       Please review the
diff --git a/app/views/shared/issuable/_label_page_create.html.haml b/app/views/shared/issuable/_label_page_create.html.haml
index 7ab82362e85..ec78b3f7ce3 100644
--- a/app/views/shared/issuable/_label_page_create.html.haml
+++ b/app/views/shared/issuable/_label_page_create.html.haml
@@ -6,7 +6,7 @@
 .dropdown-page-two.dropdown-new-label
   = dropdown_title(create_label_title(subject), options: { back: true, close: show_close })
   = dropdown_content do
-    = render Pajamas::AlertComponent.new(variant: :danger, alert_class: 'js-label-error gl-mb-3', dismissible: false)
+    = render Pajamas::AlertComponent.new(variant: :danger, alert_options: { class: 'js-label-error gl-mb-3' }, dismissible: false)
     %input#new_label_name.default-dropdown-input{ type: "text", placeholder: _('Name new label') }
     .suggest-colors.suggest-colors-dropdown
       = render_suggested_colors
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index feffc7eb011..55f5dce8b37 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -13,7 +13,7 @@
 
 %aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class} #{'right-sidebar-merge-requests' if moved_sidebar_enabled}", 'aria-live' => 'polite', 'aria-label': issuable_type }
   .issuable-sidebar{ class: "#{'is-merge-request' if moved_sidebar_enabled}" }
-    .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-md-display-none!' if moved_sidebar_enabled}" }
+    .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-lg-display-none!' if moved_sidebar_enabled}" }
       %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", class: "#{'gl-display-block' if moved_sidebar_enabled}", href: "#", "aria-label" => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
         = sidebar_gutter_toggle_icon
       - if signed_in && !moved_sidebar_enabled
@@ -48,7 +48,7 @@
           .js-milestone-select{ data: { can_edit: can_edit_issuable.to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
 
       - if in_group_context_with_iterations
-        .block{ class: 'gl-pt-0! gl-collapse-empty', data: { qa_selector: 'iteration_container', testid: 'iteration_container' } }<
+        .block.gl-collapse-empty{ data: { qa_selector: 'iteration_container', testid: 'iteration_container' } }<
           = render_if_exists 'shared/issuable/iteration_select', can_edit: can_edit_issuable.to_s, group_path: @project.group.full_path, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid], issuable_type: issuable_type
 
       - if issuable_sidebar[:show_crm_contacts]
@@ -106,8 +106,7 @@
           .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body', boundary: 'viewport' }, title: _('Move issue') }
             = sprite_icon('long-arrow')
           .dropdown.sidebar-move-issue-dropdown.hide-collapsed
-            %button.gl-button.btn.btn-default.btn-block.js-sidebar-dropdown-toggle.js-move-issue{ type: 'button',
-              data: { toggle: 'dropdown', display: 'static', track_label: "right_sidebar", track_property: "move_issue", track_action: "click_button", track_value: "" } }
+            = render Pajamas::ButtonComponent.new(block: true, button_options: { class: 'js-sidebar-dropdown-toggle js-move-issue', data: { toggle: 'dropdown', display: 'static', track_label: "right_sidebar", track_property: "move_issue", track_action: "click_button", track_value: "" } } ) do
               = _('Move issue')
             .dropdown-menu.dropdown-menu-selectable.dropdown-extended-height
               = dropdown_title(_('Move issue'))
diff --git a/app/views/shared/issuable/_status_box.html.haml b/app/views/shared/issuable/_status_box.html.haml
index 4fda1f11545..125ef921cfa 100644
--- a/app/views/shared/issuable/_status_box.html.haml
+++ b/app/views/shared/issuable/_status_box.html.haml
@@ -2,8 +2,7 @@
 - badge_icon = state_name_with_icon(issuable)[1]
 - badge_variant = issuable.open? ? :success : issuable.merged? ? :info : :danger
 - badge_status_class = issuable.open? ? 'issuable-status-badge-open' : issuable.merged? ? 'issuable-status-badge-merged' : 'issuable-status-badge-closed'
-- updated_mr_header_enabled = Feature.enabled?(:updated_mr_header, @project) && issuable.is_a?(MergeRequest)
-- badge_classes = "js-mr-status-box issuable-status-badge gl-mr-3 #{badge_status_class} #{'gl-vertical-align-bottom' if updated_mr_header_enabled}"
+- badge_classes = "js-mr-status-box issuable-status-badge gl-mr-3 #{badge_status_class} #{'gl-vertical-align-bottom' if issuable.is_a?(MergeRequest)}"
 
 = gl_badge_tag({ variant: badge_variant, icon: badge_icon, icon_classes: 'gl-mr-0!' }, { class: badge_classes, data: { project_path: issuable.project.path_with_namespace, iid: issuable.iid, issuable_type: 'merge_request', state: issuable.state } }) do
   %span.gl-display-none.gl-sm-display-block.gl-ml-2
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
index 46df9b4ef9a..8ab002f755f 100644
--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -37,12 +37,8 @@
           data: { placeholder: _('Select branch'), endpoint: refs_project_path(@project, sort: 'updated_desc', find: 'branches') }})
 
 - if source_level < target_level
-  .gl-alert.gl-alert-warning.gl-alert-not-dismissible.gl-max-content.gl-mt-4
-    .gl-alert-container
-      .gl-alert-content{ role: 'alert' }
-        = sprite_icon('warning', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-        .gl-alert-body
-          = visibilityMismatchString
-          %br
-          = _('Review the target project before submitting to avoid exposing %{source} changes.') % { source: source_visibility }
-%hr
+  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c|
+    = c.body do
+      = visibilityMismatchString
+      %br
+      = _('Review the target project before submitting to avoid exposing %{source} changes.') % { source: source_visibility }
diff --git a/app/views/shared/issuable/form/_merge_params.html.haml b/app/views/shared/issuable/form/_merge_params.html.haml
index 76feb4d1613..5831460d59a 100644
--- a/app/views/shared/issuable/form/_merge_params.html.haml
+++ b/app/views/shared/issuable/form/_merge_params.html.haml
@@ -4,11 +4,10 @@
 - return unless issuable.is_a?(MergeRequest)
 - return if issuable.closed_or_merged_without_fork?
 
-.form-group.row
-  .col-sm-2.col-form-label.pt-sm-0
+.form-group.row.gl-mb-7
+  .col-12
     %label
       = _('Merge options')
-  .col-sm-10
     - if issuable.can_remove_source_branch?(current_user)
       .form-check.gl-mb-3
         = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil
diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml
index e941eaadbc9..61cc408f6b3 100644
--- a/app/views/shared/issuable/form/_metadata.html.haml
+++ b/app/views/shared/issuable/form/_metadata.html.haml
@@ -5,24 +5,21 @@
 - form = local_assigns.fetch(:form)
 
 - if @add_related_issue
-  .form-group.row
-    .offset-sm-2.col-sm-10
-      .form-check
-        = check_box_tag :add_related_issue, @add_related_issue.iid, true, class: 'form-check-input'
-        = label_tag :add_related_issue, class: 'form-check-label' do
-          - add_related_issue_link = link_to "\##{@add_related_issue.iid}", issue_path(@add_related_issue), class: ['has-tooltip'], title: @add_related_issue.title
-          #{_('Relate to %{issuable_type} %{add_related_issue_link}').html_safe % { issuable_type: @add_related_issue.issue_type, add_related_issue_link: add_related_issue_link }}
-          %p.text-muted= _('Adds this %{issuable_type} as related to the %{issuable_type} it was created from') % { issuable_type: @add_related_issue.issue_type }
+  .form-group
+    .form-check
+      = check_box_tag :add_related_issue, @add_related_issue.iid, true, class: 'form-check-input'
+      = label_tag :add_related_issue, class: 'form-check-label' do
+        - add_related_issue_link = link_to "\##{@add_related_issue.iid}", issue_path(@add_related_issue), class: ['has-tooltip'], title: @add_related_issue.title
+        #{_('Relate to %{issuable_type} %{add_related_issue_link}').html_safe % { issuable_type: @add_related_issue.issue_type, add_related_issue_link: add_related_issue_link }}
+        %p.text-muted= _('Adds this %{issuable_type} as related to the %{issuable_type} it was created from') % { issuable_type: @add_related_issue.issue_type }
 
 - if issuable.respond_to?(:confidential) && can?(current_user, :set_confidentiality, issuable)
-  .form-group.row
-    .offset-sm-2.col-sm-10
-      = form.gitlab_ui_checkbox_component :confidential,
-        _('This issue is confidential and should only be visible to team members with at least Reporter access.')
+  .form-group
+    = form.gitlab_ui_checkbox_component :confidential,
+      _('This issue is confidential and should only be visible to team members with at least Reporter access.')
 
 - if can?(current_user, :"set_#{issuable.to_ability_name}_metadata", issuable)
-  %hr
-  .row
+  .row.gl-pt-4
     %div{ class: (has_due_date ? "col-lg-6" : "col-12") }
       .form-group.row.merge-request-assignee
         = render "shared/issuable/form/metadata_issuable_assignee", issuable: issuable, form: form, has_due_date: has_due_date
@@ -35,15 +32,15 @@
 
       - if issuable.supports_milestone?
         .form-group.row.issue-milestone
-          = form.label :milestone_id, _('Milestone'), class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
-          .col-sm-10{ class: ("col-md-8" if has_due_date) }
+          = form.label :milestone_id, _('Milestone'), class: "col-12"
+          .col-12
             .issuable-form-select-holder
               = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, show_started: false, extra_class: "qa-issuable-milestone-dropdown js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: _('Select milestone')
 
       .form-group.row
-        = form.label :label_ids, _('Labels'), class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
+        = form.label :label_ids, _('Labels'), class: "col-12"
         = form.hidden_field :label_ids, multiple: true, value: ''
-        .col-sm-10{ class: "#{"col-md-8" if has_due_date}" }
+        .col-12
           .issuable-form-select-holder
             = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false }, dropdown_title: "Select label"
 
@@ -53,7 +50,7 @@
       .col-lg-6
         = render_if_exists "shared/issuable/form/weight", issuable: issuable, form: form
         .form-group.row
-          = form.label :due_date, _('Due date'), class: "col-form-label col-md-2 col-lg-4"
-          .col-8
+          = form.label :due_date, _('Due date'), class: "col-12"
+          .col-12
             .issuable-form-select-holder
               = form.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: _('Select due date'), autocomplete: 'off'
diff --git a/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml b/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml
index 781ee8b5f80..f9c3c11eed8 100644
--- a/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml
+++ b/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml
@@ -1,5 +1,5 @@
-= form.label :assignee_id, issuable.allows_multiple_assignees? ? _('Assignees') : _('Assignee'), class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
-.col-sm-10{ class: ("col-md-8" if has_due_date) }
+= form.label :assignee_id, issuable.allows_multiple_assignees? ? _('Assignees') : _('Assignee'), class: "col-12"
+.col-12
   .issuable-form-select-holder.selectbox
     - issuable.assignees.each do |assignee|
       = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", assignee.id, id: nil, data: { meta: assignee.name, avatar_url: assignee.avatar_url, name: assignee.name, username: assignee.username }
@@ -8,4 +8,4 @@
       = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", 0, id: nil, data: { meta: '' }
 
     = dropdown_tag(users_dropdown_label(issuable.assignees), options: assignees_dropdown_options(issuable.to_ability_name))
-  = link_to _('Assign to me'), '#', class: "assign-to-me-link qa-assign-to-me-link #{'hide' if issuable.assignees.include?(current_user)}"
+  = link_to _('Assign to me'), '#', class: "assign-to-me-link gl-white-space-nowrap gl-pl-4 qa-assign-to-me-link #{'hide' if issuable.assignees.include?(current_user)}"
diff --git a/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml b/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml
index fad13c78e26..0e3383acfce 100644
--- a/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml
+++ b/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml
@@ -1,5 +1,5 @@
-= form.label :reviewer_id, issuable.allows_multiple_reviewers? ? _('Reviewers') : _('Reviewer'), class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
-.col-sm-10.gl-mb-2{ class: ("col-md-8" if has_due_date) }
+= form.label :reviewer_id, issuable.allows_multiple_reviewers? ? _('Reviewers') : _('Reviewer'), class: "col-12"
+.col-12
   .issuable-form-select-holder.selectbox
     - issuable.reviewers.each do |reviewer|
       = hidden_field_tag "#{issuable.to_ability_name}[reviewer_ids][]", reviewer.id, id: nil, data: { meta: reviewer.name, avatar_url: reviewer.avatar_url, name: reviewer.name, username: reviewer.username }
diff --git a/app/views/shared/issuable/form/_title.html.haml b/app/views/shared/issuable/form/_title.html.haml
index 6b00cdc5e24..e7c0833de0f 100644
--- a/app/views/shared/issuable/form/_title.html.haml
+++ b/app/views/shared/issuable/form/_title.html.haml
@@ -2,17 +2,16 @@
 - has_wip_commits = local_assigns.fetch(:has_wip_commits)
 - form = local_assigns.fetch(:form)
 - no_issuable_templates = issuable_templates(ref_project, issuable.to_ability_name).empty?
-- div_class = no_issuable_templates ? 'col-sm-10' : 'col-sm-7 col-lg-8'
 - toggle_wip_link_start = '<a href="" class="js-toggle-wip">'
 - toggle_wip_link_end = '</a>'
 - add_wip_text = (_('%{link_start}Start the title with %{draft_snippet}%{link_end} to prevent a merge request draft from merging before it\'s ready.') % { link_start: toggle_wip_link_start, link_end: toggle_wip_link_end, draft_snippet: '<code>Draft:</code>'.html_safe } ).html_safe
 - remove_wip_text = (_('%{link_start}Remove the %{draft_snippet} prefix%{link_end} from the title to allow this merge request to be merged when it\'s ready.' ) % { link_start: toggle_wip_link_start, link_end: toggle_wip_link_end, draft_snippet: '<code>Draft</code>'.html_safe } ).html_safe
 
-%div{ class: div_class, data: { testid: 'issue-title-input-field' } }
+%div{ data: { testid: 'issue-title-input-field' } }
   = form.text_field :title, required: true, aria: { required: true }, maxlength: 255, autofocus: true,
-    autocomplete: 'off', class: 'form-control pad qa-issuable-form-title', placeholder: _('Title'), dir: 'auto'
+    autocomplete: 'off', class: 'form-control pad qa-issuable-form-title', dir: 'auto'
 
-  - if issuable.respond_to?(:work_in_progress?)
+  - if issuable.respond_to?(:draft?)
     .form-text.text-muted
       .js-wip-explanation{ style: "display: none;" }
         = remove_wip_text
diff --git a/app/views/shared/issuable/form/_type_selector.html.haml b/app/views/shared/issuable/form/_type_selector.html.haml
index 0d86aa8c8e7..d5c696b1698 100644
--- a/app/views/shared/issuable/form/_type_selector.html.haml
+++ b/app/views/shared/issuable/form/_type_selector.html.haml
@@ -1,33 +1,32 @@
 - return unless issuable.supports_issue_type? && can?(current_user, :create_issue, @project)
 
-.form-group.row.gl-mb-0
-  = form.label :type, _('Type'), class: 'col-form-label col-sm-2'
-  .col-sm-10
-    .gl-display-flex.gl-align-items-center
-      .issuable-form-select-holder.selectbox.form-group.gl-mb-0
-        .dropdown.js-issuable-type-filter-dropdown-wrap
-          %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
-            %span.dropdown-toggle-text.is-default
-              = issuable.issue_type.capitalize || _("Select type")
-            = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
-          .dropdown-menu.dropdown-menu-selectable.dropdown-select
-            .dropdown-title.gl-display-flex
-              %span.gl-ml-auto
-                = _("Select type")
-              %button.dropdown-title-button.dropdown-menu-close.gl-ml-auto{ type: 'button', "aria-label" => _('Close') }
-                = sprite_icon('close', size: 16, css_class: 'dropdown-menu-close-icon')
-            .dropdown-content{ data: { testid: 'issue-type-select-dropdown' } }
-              %ul
-                - if create_issue_type_allowed?(@project, :issue)
-                  %li.js-filter-issuable-type
-                    = link_to new_project_issue_path(@project), class: ("is-active" if issuable.issue?) do
-                      #{sprite_icon(work_item_type_icon(:issue), css_class: 'gl-icon')} #{_('Issue')}
-                - if create_issue_type_allowed?(@project, :incident)
-                  %li.js-filter-issuable-type{ data: { track: { action: "select_issue_type_incident", label: "select_issue_type_incident_dropdown_option" } } }
-                    = link_to new_project_issue_path(@project, { issuable_template: 'incident', issue: { issue_type: 'incident' } }), class: ("is-active" if issuable.incident?) do
-                      #{sprite_icon(work_item_type_icon(:incident), css_class: 'gl-icon')} #{_('Incident')}
+.form-group
+  = form.label :type, _('Type')
+  .gl-display-flex.gl-align-items-center
+    .issuable-form-select-holder.selectbox.form-group.gl-mb-0
+      .dropdown.js-issuable-type-filter-dropdown-wrap
+        %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+          %span.dropdown-toggle-text.is-default
+            = issuable.issue_type.capitalize || _("Select type")
+          = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
+        .dropdown-menu.dropdown-menu-selectable.dropdown-select
+          .dropdown-title.gl-display-flex
+            %span.gl-ml-auto
+              = _("Select type")
+            %button.dropdown-title-button.dropdown-menu-close.gl-ml-auto{ type: 'button', "aria-label" => _('Close') }
+              = sprite_icon('close', size: 16, css_class: 'dropdown-menu-close-icon')
+          .dropdown-content{ data: { testid: 'issue-type-select-dropdown' } }
+            %ul
+              - if create_issue_type_allowed?(@project, :issue)
+                %li.js-filter-issuable-type
+                  = link_to new_project_issue_path(@project), class: ("is-active" if issuable.issue?) do
+                    #{sprite_icon(work_item_type_icon(:issue), css_class: 'gl-icon')} #{_('Issue')}
+              - if create_issue_type_allowed?(@project, :incident)
+                %li.js-filter-issuable-type{ data: { track: { action: "select_issue_type_incident", label: "select_issue_type_incident_dropdown_option" } } }
+                  = link_to new_project_issue_path(@project, { issuable_template: 'incident', issue: { issue_type: 'incident' } }), class: ("is-active" if issuable.incident?) do
+                    #{sprite_icon(work_item_type_icon(:incident), css_class: 'gl-icon')} #{_('Incident')}
 
-      #js-type-popover
+    #js-type-popover
 
     - if issuable.incident?
       %p.form-text.text-muted
diff --git a/app/views/shared/issue_type/_details_content.html.haml b/app/views/shared/issue_type/_details_content.html.haml
index 7276175db59..7c5b3fd4b3c 100644
--- a/app/views/shared/issue_type/_details_content.html.haml
+++ b/app/views/shared/issue_type/_details_content.html.haml
@@ -3,9 +3,9 @@
 
 .issue-details.issuable-details.js-issue-details
   .detail-page-description.content-block.js-detail-page-description
-    #js-issuable-app{ data: { initial: issuable_initial_data(issuable).to_json, full_path: @project.full_path } }
+    #js-issuable-app{ data: { initial: issuable_initial_data(issuable).to_json, issuable_id: issuable.id, full_path: @project.full_path } }
       .title-container
-        %h1.title= markdown_field(issuable, :title)
+        %h1.title.page-title.gl-font-size-h-display= markdown_field(issuable, :title)
       - if issuable.description.present?
         .description
           .md= markdown_field(issuable, :description)
@@ -17,6 +17,7 @@
 
     = render 'projects/issues/design_management'
 
+    = render_if_exists 'projects/issues/work_item_links'
     = render_if_exists 'projects/issues/related_issues'
 
     #js-related-merge-requests{ data: { endpoint: expose_path(api_v4_projects_issues_related_merge_requests_path(id: @project.id, issue_iid: issuable.iid)), project_namespace: @project.namespace.path, project_path: @project.path } }
diff --git a/app/views/shared/labels/_form.html.haml b/app/views/shared/labels/_form.html.haml
index 29f6dc02749..f768b63afff 100644
--- a/app/views/shared/labels/_form.html.haml
+++ b/app/views/shared/labels/_form.html.haml
@@ -2,21 +2,18 @@
   = form_errors(@label)
 
   .form-group.row
-    .col-sm-2.col-form-label
+    .col-12
       = f.label :title
-    .col-sm-10
       = f.text_field :title, class: "gl-form-input form-control js-label-title qa-label-title", required: true, autofocus: true
     = render_if_exists 'shared/labels/create_label_help_text'
 
   .form-group.row
-    .col-sm-2.col-form-label
+    .col-12
       = f.label :description
-    .col-sm-10
       = f.text_field :description, class: "gl-form-input form-control js-quick-submit qa-label-description"
   .form-group.row
-    .col-sm-2.col-form-label
+    .col-12
       = f.label :color, _("Background color")
-    .col-sm-10
       .input-group
         .input-group-prepend
           .input-group-text.label-color-preview &nbsp;
@@ -26,13 +23,13 @@
         %br
         = _("Or you can choose one of the suggested colors below")
       = render_suggested_colors
-  .gl-display-flex.gl-justify-content-space-between.gl-p-5.gl-bg-gray-10.gl-border-t-solid.gl-border-t-gray-100.gl-border-t-1
+  .gl-display-flex.gl-justify-content-space-between
     %div
       - if @label.persisted?
-        = f.submit _('Save changes'), class: 'btn gl-button btn-confirm js-save-button'
+        = f.submit _('Save changes'), class: 'btn gl-button btn-confirm js-save-button gl-mr-2'
       - else
-        = f.submit _('Create label'), class: 'btn gl-button btn-confirm js-save-button qa-label-create-button'
-      = link_to _('Cancel'), back_path, class: 'btn gl-button btn-default btn-cancel'
+        = f.submit _('Create label'), class: 'btn gl-button btn-confirm js-save-button qa-label-create-button gl-mr-2'
+      = link_to _('Cancel'), back_path, class: 'btn gl-button btn-default btn-cancel gl-mr-2'
     - if @label.persisted?
       - presented_label = @label.present
       %button.btn.btn-danger.gl-button.btn-danger-secondary.js-delete-label-modal-button{ type: 'button', data: { label_name: presented_label.name, subject_name: presented_label.subject_name, destroy_path: presented_label.destroy_path } }
diff --git a/app/views/shared/labels/_nav.html.haml b/app/views/shared/labels/_nav.html.haml
index 47e9d9b0e4a..622ad9db425 100644
--- a/app/views/shared/labels/_nav.html.haml
+++ b/app/views/shared/labels/_nav.html.haml
@@ -11,10 +11,11 @@
       .input-group
         = search_field_tag :search, params[:search], { placeholder: _('Filter'), id: 'label-search', class: 'form-control search-text-input input-short', spellcheck: false, autofocus: true }
         %span.input-group-append
-          %button.btn.gl-button.btn-default{ type: "submit", "aria-label" => _('Submit search') }
-            = sprite_icon('search')
+          = render Pajamas::ButtonComponent.new(icon: 'search', button_options: { type: "submit", "aria-label" => _('Submit search') })
     = render 'shared/labels/sort_dropdown'
     - if labels_or_filters && can_admin_label && @project
-      = link_to _('New label'), new_project_label_path(@project), class: "btn gl-button btn-confirm qa-label-create-new"
+      = render Pajamas::ButtonComponent.new(variant: :confirm, href: new_project_label_path(@project), button_options: { class: 'qa-label-create-new' }) do
+        = _('New label')
     - if labels_or_filters && can_admin_label && @group
-      = link_to _('New label'), new_group_label_path(@group), class: "btn gl-button btn-confirm qa-label-create-new"
+      = render Pajamas::ButtonComponent.new(variant: :confirm, href: new_group_label_path(@group), button_options: { class: 'qa-label-create-new' }) do
+        = _('New label')
diff --git a/app/views/shared/members/_manage_access_button.html.haml b/app/views/shared/members/_manage_access_button.html.haml
index 13509a7480a..c88198ec380 100644
--- a/app/views/shared/members/_manage_access_button.html.haml
+++ b/app/views/shared/members/_manage_access_button.html.haml
@@ -2,6 +2,6 @@
 
 .gl-float-right
   = link_to path, class: 'btn btn-default btn-sm gl-button' do
-    = sprite_icon('pencil-square', css_class: 'gl-icon gl-button-icon')
+    = sprite_icon('pencil', css_class: 'gl-icon gl-button-icon')
     %span.gl-button-text
       = _('Manage access')
diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml
index 45699808b6b..3082c6bb4db 100644
--- a/app/views/shared/milestones/_milestone.html.haml
+++ b/app/views/shared/milestones/_milestone.html.haml
@@ -48,14 +48,7 @@
       .milestone-actions.d-flex.justify-content-sm-start.justify-content-md-end
         - if @project # if in milestones list on project level
           - if can_admin_group_milestones?
-            %button.js-promote-project-milestone-button.btn.gl-button.btn-icon.btn-default-tertiary.btn-sm.has-tooltip{ title: s_('Milestones|Promote to Group Milestone'),
-              disabled: true,
-              type: 'button',
-              data: { url: promote_project_milestone_path(milestone.project, milestone),
-                      milestone_title: milestone.title,
-                      group_name: @project.group.name } }
-              = sprite_icon('level-up', size: 14, css_class: 'gl-button-icon gl-icon')
-
+            = render Pajamas::ButtonComponent.new(icon: 'level-up', category: :tertiary, size: :small, button_options: { class: 'js-promote-project-milestone-button', title: s_('Milestones|Promote to Group Milestone'), disabled: true, data: { toggle: 'tooltip', container: 'body', url: promote_project_milestone_path(milestone.project, milestone), milestone_title: milestone.title, group_name: @project.group.name } })
         - if can?(current_user, :admin_milestone, milestone)
           - if milestone.closed?
             = link_to s_('Milestones|Reopen Milestone'), milestone_path(milestone, milestone: { state_event: :activate }), method: :put, class: "btn gl-button btn-sm gl-ml-3"
diff --git a/app/views/shared/milestones/_milestone_complete_alert.html.haml b/app/views/shared/milestones/_milestone_complete_alert.html.haml
index 86f9193cc7a..bde8a0b91b0 100644
--- a/app/views/shared/milestones/_milestone_complete_alert.html.haml
+++ b/app/views/shared/milestones/_milestone_complete_alert.html.haml
@@ -2,7 +2,7 @@
 
 - if milestone.complete? && milestone.active?
   = render Pajamas::AlertComponent.new(variant: :success,
-    alert_data: { testid: 'all-issues-closed-alert' },
+    alert_options: { data: { testid: 'all-issues-closed-alert' }},
     dismissible: false) do |c|
     = c.body do
       = yield
diff --git a/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml b/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml
index d167ffb5582..68a4d010872 100644
--- a/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml
+++ b/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml
@@ -3,6 +3,7 @@
 - form = local_assigns.fetch(:form, nil)
 - setting_locked = local_assigns.fetch(:setting_locked, false)
 - help_text = local_assigns.fetch(:help_text, s_('CascadingSettings|Subgroups cannot change this setting.'))
+- label = local_assigns.fetch(:label, s_('CascadingSettings|Enforce for all subgroups'))
 
 - return unless attribute && group && form
 - return if setting_locked
@@ -10,6 +11,6 @@
 - lock_attribute = "lock_#{attribute}"
 
 = form.gitlab_ui_checkbox_component lock_attribute,
-  s_('CascadingSettings|Enforce for all subgroups'),
+  label,
   help_text: help_text,
   checkbox_options: { checked: group.namespace_settings.public_send(lock_attribute), data: { testid: 'enforce-for-all-subgroups-checkbox' } }
diff --git a/app/views/shared/namespaces/cascading_settings/_lock_icon.html.haml b/app/views/shared/namespaces/cascading_settings/_lock_icon.html.haml
index 4e3b6b2afc4..ed835af6524 100644
--- a/app/views/shared/namespaces/cascading_settings/_lock_icon.html.haml
+++ b/app/views/shared/namespaces/cascading_settings/_lock_icon.html.haml
@@ -1,4 +1,3 @@
-%button.position-absolute.gl-top-3.gl-right-0.gl-translate-y-n50.gl-cursor-default.btn.btn-default.btn-sm.gl-button.btn-default-tertiary.js-cascading-settings-lock-popover-target{ class: 'gl-p-1! gl-text-gray-600! gl-bg-transparent!',
-  type: 'button',
-  data: cascading_namespace_settings_popover_data(attribute, group, settings_path_helper) }
-  = sprite_icon('lock', size: 16)
+- class_list = local_assigns.fetch(:class_list, '')
+
+= render Pajamas::ButtonComponent.new(category: 'tertiary', icon: 'lock', button_options: { class: "gl-absolute gl-top-3 gl-right-0 gl-translate-y-n50 gl-p-1! gl-bg-transparent! gl-cursor-default! js-cascading-settings-lock-popover-target #{class_list}", data: cascading_namespace_settings_popover_data(attribute, group, settings_path_helper) })
diff --git a/app/views/shared/notes/_edit_form.html.haml b/app/views/shared/notes/_edit_form.html.haml
index 63c895a5a03..cbf0b6f1051 100644
--- a/app/views/shared/notes/_edit_form.html.haml
+++ b/app/views/shared/notes/_edit_form.html.haml
@@ -9,6 +9,6 @@
     .note-form-actions.clearfix
       .settings-message.note-edit-warning.js-finish-edit-warning
         = _("Finish editing this message first!")
-      = submit_tag _('Save comment'), class: 'gl-button btn btn-success js-comment-save-button', data: { qa_selector: 'save_comment_button' }
-      %button.btn.gl-button.btn-cancel.note-edit-cancel{ type: 'button' }
+      = submit_tag _('Save comment'), class: 'gl-button btn btn-confirm js-comment-save-button', data: { qa_selector: 'save_comment_button' }
+      = render Pajamas::ButtonComponent.new(button_options: { class: 'note-edit-cancel' }) do
         = _("Cancel")
diff --git a/app/views/shared/projects/_inactive_project_deletion_alert.html.haml b/app/views/shared/projects/_inactive_project_deletion_alert.html.haml
new file mode 100644
index 00000000000..0030265f007
--- /dev/null
+++ b/app/views/shared/projects/_inactive_project_deletion_alert.html.haml
@@ -0,0 +1,7 @@
+- if show_inactive_project_deletion_banner?(@project)
+  - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('administration/inactive_project_deletion') }
+  - link_end = '</a>'.html_safe
+  - deletion_date = inactive_project_deletion_date(@project)
+  - title = _('Due to inactivity, this project is scheduled to be deleted on %{deletion_date}. %{link_start}Why is this scheduled?%{link_end}').html_safe % { deletion_date: deletion_date, link_start: link_start, link_end: link_end }
+
+  = render Pajamas::AlertComponent.new(title: title, variant: :warning, alert_options: { class: 'gl-pb-3' }, dismissible: false)
diff --git a/app/views/shared/projects/_search_bar.html.haml b/app/views/shared/projects/_search_bar.html.haml
index 8ec11d9cfbb..5271a5fac09 100644
--- a/app/views/shared/projects/_search_bar.html.haml
+++ b/app/views/shared/projects/_search_bar.html.haml
@@ -13,8 +13,7 @@
           .filtered-search-box.m-0
             .filtered-search-box-input-container.pl-2
               = render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...")
-        %button.btn.gl-button.btn-icon.btn-secondary{ type: 'submit', form: 'project-filter-form' }
-          = sprite_icon('search', css_class: 'search-icon ')
+        = render Pajamas::ButtonComponent.new(icon: 'search', icon_classes: 'search-icon', button_options: { type: 'submit', form: 'project-filter-form' })
     .filtered-search-dropdown.flex-row.align-items-center.mb-2.m-sm-0#filtered-search-visibility-dropdown{ class: flex_grow_and_shrink_xs }
       .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold
         %span
diff --git a/app/views/shared/promotions/_promote_servicedesk.html.haml b/app/views/shared/promotions/_promote_servicedesk.html.haml
index a2da23de2b9..57ac1370f8d 100644
--- a/app/views/shared/promotions/_promote_servicedesk.html.haml
+++ b/app/views/shared/promotions/_promote_servicedesk.html.haml
@@ -1,11 +1,8 @@
-.user-callout.promotion-callout.js-service-desk-callout#promote_service_desk{ data: { uid: 'promote_service_desk_dismissed' } }
-  .bordered-box.content-block
-    %button.gl-button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => 'Dismiss Service Desk promotion' }
-      = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
-    .svg-container
-      = custom_icon('icon_service_desk')
-    .user-callout-copy
-      %h4
-        = _("Improve customer support with Service Desk")
-      %p
-        = _("Service Desk allows people to create issues in your GitLab instance without their own user account. It provides a unique email address for end users to create issues in a project. Replies can be sent either through the GitLab interface or by email. End users only see threads through email.")
+= render Pajamas::BannerComponent.new(banner_options: {class: 'js-service-desk-callout', data: {uid: 'promote_service_desk_dismissed'}, id: 'promote_service_desk'},
+  close_options: {'aria-label' => s_('Promotions|Dismiss Service Desk promotion'), class: 'js-close-callout'},
+  svg_path: 'illustrations/service_desk_callout.svg',
+  button_text: s_('Promotions|Configure Service Desk'), button_link: help_page_path('user/project/service_desk.html', anchor: 'configuring-service-desk')) do |c|
+  - c.title do
+    = _('Improve customer support with Service Desk')
+  %p
+    = _('Service Desk allows people to create issues in your GitLab instance without their own user account. It provides a unique email address for end users to create issues in a project. Replies can be sent either through the GitLab interface or by email. End users only see threads through email.')
diff --git a/app/views/shared/runners/_runner_details.html.haml b/app/views/shared/runners/_runner_details.html.haml
index 7a35b1cec0a..f6396168cb3 100644
--- a/app/views/shared/runners/_runner_details.html.haml
+++ b/app/views/shared/runners/_runner_details.html.haml
@@ -1,7 +1,7 @@
 - breadcrumb_title runner.short_sha
 - page_title "##{runner.id} (#{runner.short_sha})"
 
-%h2.page-title
+%h1.page-title.gl-font-size-h-display
   = s_('Runners|Runner #%{runner_id}' % { runner_id: runner.id })
   = render 'shared/runners/runner_type_badge', runner: runner
 
diff --git a/app/views/shared/runners/_runner_type_alert.html.haml b/app/views/shared/runners/_runner_type_alert.html.haml
index 4bf02b71109..9736780c436 100644
--- a/app/views/shared/runners/_runner_type_alert.html.haml
+++ b/app/views/shared/runners/_runner_type_alert.html.haml
@@ -1,14 +1,14 @@
-- alert_class = 'gl-mb-5'
+- alert_options = { class: 'gl-mb-5' }
 
 - if runner.group_type?
-  = render Pajamas::AlertComponent.new(alert_class: alert_class,
+  = render Pajamas::AlertComponent.new(alert_options: alert_options,
     title: s_('Runners|This runner is available to all projects and subgroups in a group.'),
     dismissible: false) do |c|
     = c.body do
       = s_('Runners|Use Group runners when you want all projects in a group to have access to a set of runners.')
       = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'group-runners'), target: '_blank', rel: 'noopener noreferrer'
 - else
-  = render Pajamas::AlertComponent.new(alert_class: alert_class,
+  = render Pajamas::AlertComponent.new(alert_options: alert_options,
     title: s_('Runners|This runner is associated with specific projects.'),
     dismissible: false) do |c|
     = c.body do
diff --git a/app/views/shared/snippets/_embed.html.haml b/app/views/shared/snippets/_embed.html.haml
index 5744fc9fba6..05fe307318f 100644
--- a/app/views/shared/snippets/_embed.html.haml
+++ b/app/views/shared/snippets/_embed.html.haml
@@ -14,8 +14,8 @@
 
     .file-actions.d-none.d-sm-block
       .btn-group{ role: "group" }<
+        = embedded_copy_snippet_button(blob)
         = embedded_raw_snippet_button(@snippet, blob)
-
         = embedded_snippet_download_button(@snippet, blob)
   %figure.file-holder.snippet-file-content{ "aria-label" => _('Code snippet') }
     = render 'projects/blob/viewer', viewer: blob.simple_viewer, load_async: false, external_embed: true
diff --git a/app/views/shared/snippets/show.js.haml b/app/views/shared/snippets/show.js.haml
index 23cebc97f63..f61f162be10 100644
--- a/app/views/shared/snippets/show.js.haml
+++ b/app/views/shared/snippets/show.js.haml
@@ -1,2 +1,3 @@
+function copyToClipboard(queryEl) { const copyText = document.querySelector(queryEl).textContent; navigator.clipboard.writeText(copyText); }
 document.write('#{escape_javascript(stylesheet_link_tag("#{stylesheet_url 'snippets'}"))}');
 document.write('#{escape_javascript(render(partial: 'shared/snippets/embed', collection: @blobs, as: :blob))}');
diff --git a/app/views/shared/topics/_topic.html.haml b/app/views/shared/topics/_topic.html.haml
index ca1098511da..83d5ecdb833 100644
--- a/app/views/shared/topics/_topic.html.haml
+++ b/app/views/shared/topics/_topic.html.haml
@@ -2,8 +2,9 @@
 - detail_page_link = topic_explore_projects_path(topic_name: topic.name)
 
 .col-lg-3.col-md-4.col-sm-12
-  .gl-card.gl-mb-5
-    .gl-card-body.gl-display-flex.gl-align-items-center
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' },
+                                      body_options: { class: 'gl-display-flex gl-align-items-center' }) do |c|
+    = c.body do
       .avatar-container.rect-avatar.s40.gl-flex-shrink-0
         = link_to detail_page_link do
           = topic_icon(topic, class: "avatar s40")
diff --git a/app/views/shared/users/_user.html.haml b/app/views/shared/users/_user.html.haml
index 7f7cd31591e..93b3ce5f319 100644
--- a/app/views/shared/users/_user.html.haml
+++ b/app/views/shared/users/_user.html.haml
@@ -1,8 +1,8 @@
 - user = local_assigns.fetch(:user)
 
 .col-lg-3.col-md-4.col-sm-12
-  .gl-card.gl-mb-5
-    .gl-card-body
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }) do |c|
+    = c.body do
       = image_tag avatar_icon_for_user(user, 40), class: "avatar s40", alt: ''
 
       .user-info
diff --git a/app/views/shared/wikis/_form.html.haml b/app/views/shared/wikis/_form.html.haml
index 34bedbd928a..0d5e59919cb 100644
--- a/app/views/shared/wikis/_form.html.haml
+++ b/app/views/shared/wikis/_form.html.haml
@@ -1,6 +1,6 @@
 - page_info = { last_commit_sha: @page.last_commit_sha, persisted: @page.persisted?, title: @page.title, content: @page.content || '', format: @page.format.to_s, uploads_path: uploads_path, path: wiki_page_path(@wiki, @page), wiki_path: wiki_path(@wiki), help_path: help_page_path('user/project/wiki/index'), markdown_help_path: help_page_path('user/markdown'), markdown_preview_path: wiki_page_path(@wiki, @page, action: :preview_markdown), create_path: wiki_path(@wiki, action: :create) }
 
 .gl-mt-3
-  = form_errors(@page, truncate: :title)
+  = form_errors(@page, truncate: :title, pajamas_alert: true)
 
 #js-wiki-form{ data: { page_info: page_info.to_json, format_options: wiki_markup_hash_by_name_id.to_json } }
diff --git a/app/views/shared/wikis/_sidebar.html.haml b/app/views/shared/wikis/_sidebar.html.haml
index 5f181371663..cb6a67bd8d4 100644
--- a/app/views/shared/wikis/_sidebar.html.haml
+++ b/app/views/shared/wikis/_sidebar.html.haml
@@ -16,7 +16,7 @@
           - edit_sidebar_url = wiki_page_path(@wiki, Wiki::SIDEBAR, action: :edit)
           - link_class = (editing && @page&.slug == Wiki::SIDEBAR) ? 'active' : ''
           = link_to edit_sidebar_url, class: link_class, data: { qa_selector: 'edit_sidebar_link' } do
-            = sprite_icon('pencil-square', css_class: 'gl-mr-2')
+            = sprite_icon('pencil', css_class: 'gl-mr-2')
             %span= _("Edit sidebar")
 
     - if @sidebar_error.present?
diff --git a/app/views/shared/wikis/diff.html.haml b/app/views/shared/wikis/diff.html.haml
index 0eeceac28c8..c39739ac422 100644
--- a/app/views/shared/wikis/diff.html.haml
+++ b/app/views/shared/wikis/diff.html.haml
@@ -5,7 +5,7 @@
 .wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row
   = wiki_sidebar_toggle_button
 
-  %h3.page-title.gl-flex-grow-1
+  %h1.page-title.gl-font-size-h-display.gl-flex-grow-1
     = link_to_wiki_page @page
     %span.light
       &middot;
diff --git a/app/views/shared/wikis/edit.html.haml b/app/views/shared/wikis/edit.html.haml
index e0860bc473d..6bbce6b80d8 100644
--- a/app/views/shared/wikis/edit.html.haml
+++ b/app/views/shared/wikis/edit.html.haml
@@ -7,7 +7,7 @@
 .js-wiki-edit-page.wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row
   = wiki_sidebar_toggle_button
 
-  %h3.page-title.gl-flex-grow-1
+  %h1.page-title.gl-font-size-h-display.gl-flex-grow-1
     - if @page.persisted?
       = link_to_wiki_page @page
       %span.light
diff --git a/app/views/shared/wikis/history.html.haml b/app/views/shared/wikis/history.html.haml
index afbed3b0f42..052bbb3b410 100644
--- a/app/views/shared/wikis/history.html.haml
+++ b/app/views/shared/wikis/history.html.haml
@@ -4,7 +4,7 @@
 .wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row
   = wiki_sidebar_toggle_button
 
-  %h3.page-title
+  %h1.page-title.gl-font-size-h-display
     = link_to_wiki_page @page
     %span.light
       &middot;
diff --git a/app/views/shared/wikis/pages.html.haml b/app/views/shared/wikis/pages.html.haml
index abe7753b9f1..21d63a6db3d 100644
--- a/app/views/shared/wikis/pages.html.haml
+++ b/app/views/shared/wikis/pages.html.haml
@@ -5,7 +5,7 @@
 - wiki_sort_options = [{ text: s_("Wiki|Title"), value: 'title', href: wiki_path(@wiki, action: :pages, sort: Wiki::TITLE_ORDER)}, { text: s_("Wiki|Created date"), value: 'created_at', href: wiki_path(@wiki, action: :pages, sort: Wiki::CREATED_AT_ORDER) }]
 
 .wiki-page-header.top-area.flex-column.flex-lg-row
-  %h3.page-title.gl-flex-grow-1
+  %h1.page-title.gl-font-size-h-display.gl-flex-grow-1
     = s_("Wiki|Wiki Pages")
 
   .nav-controls.pb-md-3.pb-lg-0