Add latest changes from gitlab-org/gitlab@16-1-stable-eev16.1.0-rc42

215 files changed, 1030 insertions, 882 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 df08a1123c7..d29fa9c5b85 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -9,21 +9,21 @@
       = f.label :default_projects_limit, _('Default projects limit'), class: 'label-bold'
       = f.number_field :default_projects_limit, class: 'form-control gl-form-input', title: _('Maximum number of projects.'), data: { toggle: 'tooltip', container: 'body' }
     .form-group
-      = f.label :max_attachment_size, _('Maximum attachment size (MB)'), class: 'label-bold'
+      = f.label :max_attachment_size, _('Maximum attachment size (MiB)'), class: 'label-bold'
       = f.number_field :max_attachment_size, class: 'form-control gl-form-input', title: _('Maximum size of individual attachments in comments.'), data: { toggle: 'tooltip', container: 'body' }
 
     = render 'admin/application_settings/repository_size_limit_setting_registration_features_cta', form: f
     = render_if_exists 'admin/application_settings/repository_size_limit_setting', form: f
 
     .form-group
-      = f.label :receive_max_input_size, _('Maximum push size (MB)'), class: 'label-light'
+      = f.label :receive_max_input_size, _('Maximum push size (MiB)'), class: 'label-light'
       = 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.label :max_export_size, _('Maximum export size (MiB)'), 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.label :max_import_size, _('Maximum import size (MiB)'), class: 'label-light'
       = 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
diff --git a/app/views/admin/application_settings/_ai_access.html.haml b/app/views/admin/application_settings/_ai_access.html.haml
new file mode 100644
index 00000000000..41b0a08128e
--- /dev/null
+++ b/app/views/admin/application_settings/_ai_access.html.haml
@@ -0,0 +1,32 @@
+- return if Gitlab.org_or_com?
+
+- expanded = integration_expanded?('ai_access')
+- token_is_present = @application_setting.ai_access_token.present?
+- token_label = token_is_present ? s_('CodeSuggestionsSM|Enter new personal access token') : s_('CodeSuggestionsSM|Personal access token')
+- token_value = token_is_present ? ApplicationSettingMaskedAttrs::MASK : ''
+
+%section.settings.no-animate#js-ai-access-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
+      = s_('CodeSuggestionsSM|Code Suggestions')
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = s_('CodeSuggestionsSM|Enable Code Suggestion for users of this GitLab instance.')
+      = link_to sprite_icon('question-o'), code_suggestions_docs_url, target: '_blank', class: 'has-tooltip', title: _('More information')
+
+  .settings-content
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-ai-access-settings'), html: { class: 'fieldset-form', id: 'ai-access-settings' } do |f|
+      = form_errors(@application_setting)
+
+      %fieldset
+        .form-group
+          = f.gitlab_ui_checkbox_component :instance_level_code_suggestions_enabled,
+            s_('CodeSuggestionsSM|Turn on Code Suggestions for this instance. By turning on this feature, you:'),
+            help_text: code_suggestions_agreement
+          = f.label :ai_access_token, token_label, class: 'label-bold'
+          = f.password_field :ai_access_token, value: token_value, autocomplete: 'on', class: 'form-control gl-form-input', aria: { describedby: 'code_suggestions_token_explanation' }
+          %p.form-text.text-muted{ id: 'code_suggestions_token_explanation' }
+            = code_suggestions_token_explanation
+
+      = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_diagramsnet.html.haml b/app/views/admin/application_settings/_diagramsnet.html.haml
new file mode 100644
index 00000000000..e493110a9dc
--- /dev/null
+++ b/app/views/admin/application_settings/_diagramsnet.html.haml
@@ -0,0 +1,25 @@
+- expanded = integration_expanded?('diagramsnet_')
+%section.settings.as-diagramsnet.no-animate#js-diagramsnet-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
+      = _('Diagrams.net')
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Render diagrams in your documents using diagrams.net.')
+      = link_to _('Learn more.'), help_page_path('administration/integration/diagrams_net.md'), target: '_blank', rel: 'noopener noreferrer'
+  .settings-content
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-diagramsnet-settings'), html: { class: 'fieldset-form', id: 'diagramsnet-settings' } do |f|
+      = form_errors(@application_setting) if expanded
+
+      %fieldset
+        .form-group
+          = f.gitlab_ui_checkbox_component :diagramsnet_enabled,
+            _('Enable diagrams.net')
+        .form-group
+          = f.label :diagramsnet_url, _('Diagrams.net URL'), class: 'label-bold'
+          = f.text_field :diagramsnet_url, class: 'form-control gl-form-input', placeholder: 'https://embed.diagrams.net'
+          .form-text.text-muted
+            = _('The hostname of your diagrams.net server.')
+
+      = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_diff_limits.html.haml b/app/views/admin/application_settings/_diff_limits.html.haml
index 2e8eb25b1d5..153600f1299 100644
--- a/app/views/admin/application_settings/_diff_limits.html.haml
+++ b/app/views/admin/application_settings/_diff_limits.html.haml
@@ -3,7 +3,7 @@
 
   %fieldset
     .form-group
-      = f.label :diff_max_patch_bytes, _('Maximum diff patch size (Bytes)'), class: 'label-light'
+      = f.label :diff_max_patch_bytes, _('Maximum diff patch size (bytes)'), class: 'label-light'
       = f.number_field :diff_max_patch_bytes, class: 'form-control gl-form-input'
       %span.form-text.text-muted
         = _("Diff files surpassing this limit will be presented as 'too large' and won't be expandable.")
diff --git a/app/views/admin/application_settings/_pages.html.haml b/app/views/admin/application_settings/_pages.html.haml
index 97d9426581e..1eb6b747704 100644
--- a/app/views/admin/application_settings/_pages.html.haml
+++ b/app/views/admin/application_settings/_pages.html.haml
@@ -16,7 +16,7 @@
           s_("AdminSettings|Disable public access to Pages sites"),
           help_text: s_("AdminSettings|Select to disable public access for Pages sites, which requires users to sign in for access to the Pages sites in your instance. %{link_start}Learn more.%{link_end}").html_safe % { link_start: pages_link_start, link_end: '</a>'.html_safe }
     .form-group
-      = f.label :max_pages_size, _('Maximum size of pages (MB)'), class: 'label-bold'
+      = f.label :max_pages_size, _('Maximum size of pages (MiB)'), class: 'label-bold'
       = f.number_field :max_pages_size, class: 'form-control gl-form-input'
       .form-text.text-muted
         - pages_link_url = help_page_path('administration/pages/index', anchor: 'set-maximum-size-of-gitlab-pages-site-in-a-project')
diff --git a/app/views/admin/application_settings/_performance.html.haml b/app/views/admin/application_settings/_performance.html.haml
index 86a01e1785e..bfa548b70e5 100644
--- a/app/views/admin/application_settings/_performance.html.haml
+++ b/app/views/admin/application_settings/_performance.html.haml
@@ -11,16 +11,16 @@
       = f.label :raw_blob_request_limit, _('Raw blob request rate limit per minute'), class: 'label-bold'
       = f.number_field :raw_blob_request_limit, class: 'form-control gl-form-input'
       .form-text.text-muted
-        = _('Maximum number of requests per minute for each raw path (default is 300). Set to 0 to disable throttling.')
+        = _('Maximum number of requests per minute for each raw path (default is `300`). Set to `0` to disable throttling.')
     .form-group
       = f.label :push_event_hooks_limit, class: 'label-bold'
       = f.number_field :push_event_hooks_limit, class: 'form-control gl-form-input'
       .form-text.text-muted
-        = _('Maximum number of changes (branches or tags) in a single push for which webhooks and services trigger (default is 3).')
+        = _('Maximum number of changes (branches or tags) in a single push above which webhooks and integrations are not triggered (default is `3`). Setting to `0` does not disable throttling.')
     .form-group
       = f.label :push_event_activities_limit, class: 'label-bold'
       = f.number_field :push_event_activities_limit, class: 'form-control gl-form-input'
       .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).')
+        = _('Maximum number of changes (branches or tags) in a single push above which a bulk push event is created (default is `3`). Setting to `0` does not disable throttling.')
 
   = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_repository_size_limit_setting_registration_features_cta.html.haml b/app/views/admin/application_settings/_repository_size_limit_setting_registration_features_cta.html.haml
index 8daa5aa8c73..040a22ff2ac 100644
--- a/app/views/admin/application_settings/_repository_size_limit_setting_registration_features_cta.html.haml
+++ b/app/views/admin/application_settings/_repository_size_limit_setting_registration_features_cta.html.haml
@@ -2,7 +2,7 @@
 
 .form-group
   = form.label :disabled_repository_size_limit, class: 'label-bold' do
-    = _('Size limit per repository (MB)')
+    = _('Size limit per repository (MiB)')
   = form.number_field :disabled_repository_size_limit, value: '', class: 'form-control gl-form-input', disabled: true
   %span.form-text.text-muted
     = render 'shared/registration_features_discovery_message'
diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml
index 50b5e797559..85841059c5e 100644
--- a/app/views/admin/application_settings/_signin.html.haml
+++ b/app/views/admin/application_settings/_signin.html.haml
@@ -29,7 +29,7 @@
       .form-text.text-muted
         = _('Maximum time that users are allowed to skip the setup of two-factor authentication (in hours). Set to 0 (zero) to enforce at next sign in.')
     .form-group
-      = f.label :admin_mode, _('Admin Mode'), class: 'label-bold'
+      = f.label :admin_mode, _('Admin mode'), class: 'label-bold'
       = sprite_icon('lock', css_class: 'gl-icon')
       - help_text = _('Require additional authentication for administrative tasks.')
       - help_link = link_to _('Learn more.'), help_page_path('user/admin_area/settings/sign_in_restrictions', anchor: 'admin-mode'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/admin/application_settings/_user_restrictions.html.haml b/app/views/admin/application_settings/_user_restrictions.html.haml
index c35056383fa..c21d1ec47e6 100644
--- a/app/views/admin/application_settings/_user_restrictions.html.haml
+++ b/app/views/admin/application_settings/_user_restrictions.html.haml
@@ -5,3 +5,4 @@
   = render_if_exists 'admin/application_settings/updating_name_disabled_for_users', form: form
   = form.gitlab_ui_checkbox_component :can_create_group, _("Allow new users to create top-level groups")
   = form.gitlab_ui_checkbox_component :user_defaults_to_private_profile, _("Make new users' profiles private by default")
+  = render_if_exists 'admin/application_settings/allow_account_deletion', form: form
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index e6c27c1bc84..022930bd6b4 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -94,6 +94,7 @@
 = render 'admin/application_settings/kroki'
 = render 'admin/application_settings/mailgun'
 = render 'admin/application_settings/plantuml'
+= render 'admin/application_settings/diagramsnet'
 = render 'admin/application_settings/sourcegraph'
 = render_if_exists 'admin/application_settings/slack'
 -# this partial is from JiHu, see details in https://jihulab.com/gitlab-cn/gitlab/-/merge_requests/417
@@ -108,3 +109,4 @@
 = render 'admin/application_settings/floc'
 = render_if_exists 'admin/application_settings/add_license'
 = render 'admin/application_settings/jira_connect'
+= render_if_exists 'admin/application_settings/ai_access'
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 e42c1091bf2..24f132b982a 100644
--- a/app/views/admin/application_settings/service_usage_data.html.haml
+++ b/app/views/admin/application_settings/service_usage_data.html.haml
@@ -25,7 +25,7 @@
       - c.with_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('development/service_ping/troubleshooting', anchor: 'generate-service-ping')
+        - generate_manually_link_url = help_page_path('development/internal_analytics/service_ping/troubleshooting', 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 }
diff --git a/app/views/admin/jobs/index.html.haml b/app/views/admin/jobs/index.html.haml
index 7b00019cc21..c5632e0d70b 100644
--- a/app/views/admin/jobs/index.html.haml
+++ b/app/views/admin/jobs/index.html.haml
@@ -10,8 +10,10 @@
 - else
   .top-area
     .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
-      .fade-left= sprite_icon('chevron-lg-left', size: 12)
-      .fade-right= sprite_icon('chevron-lg-right', size: 12)
+      %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+        = sprite_icon('chevron-lg-left', size: 12)
+      %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+        = sprite_icon('chevron-lg-right', size: 12)
       - build_path_proc = ->(scope) { admin_jobs_path(scope: scope) }
       = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
diff --git a/app/views/admin/labels/index.html.haml b/app/views/admin/labels/index.html.haml
index 8680bae5207..e643ec040a1 100644
--- a/app/views/admin/labels/index.html.haml
+++ b/app/views/admin/labels/index.html.haml
@@ -10,7 +10,7 @@
 
 .labels.labels-container.admin-labels.js-admin-labels-container.gl-mt-4
   .other-labels.gl-rounded-base.gl-border.gl-bg-gray-10
-    .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-base.gl-border-b{ class: 'gl-rounded-bottom-left-none! gl-rounded-bottom-right-none!' }
+    .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-top-base.gl-border-b
       %h3.card-title.h5.gl-m-0.gl-relative.gl-line-height-24
         = _('Labels')
     %ul.manage-labels-list.js-other-labels.gl-px-3.gl-rounded-base
diff --git a/app/views/admin/projects/index.html.haml b/app/views/admin/projects/index.html.haml
index e942a513166..31ec4935f64 100644
--- a/app/views/admin/projects/index.html.haml
+++ b/app/views/admin/projects/index.html.haml
@@ -4,8 +4,10 @@
 
 .top-area.gl-flex-direction-column-reverse
   .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
-    .fade-left= sprite_icon('chevron-lg-left', size: 12)
-    .fade-right= sprite_icon('chevron-lg-right', size: 12)
+    %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+      = sprite_icon('chevron-lg-left', size: 12)
+    %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+      = sprite_icon('chevron-lg-right', size: 12)
     = gl_tabs_nav({ class: 'scrolling-tabs nav-links gl-display-flex gl-flex-grow-1 gl-w-full nav gl-tabs-nav nav gl-tabs-nav' }) do
       = gl_tab_link_to _('All'), admin_projects_path(visibility_level: nil), { item_active: params[:visibility_level].empty? }
       = gl_tab_link_to _('Private'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE)
diff --git a/app/views/admin/sessions/_new_base.html.haml b/app/views/admin/sessions/_new_base.html.haml
index 13c647cd45f..d0ee3acf0b8 100644
--- a/app/views/admin/sessions/_new_base.html.haml
+++ b/app/views/admin/sessions/_new_base.html.haml
@@ -3,5 +3,5 @@
     = label_tag :user_password, _('Password'), class: 'label-bold'
     = password_field_tag 'user[password]', nil, { class: 'form-control js-password', data: { id: 'user_password', name: 'user[password]', qa_selector: 'password_field', testid: 'password-field' } }
 
-  .submit-container.move-submit-down
+  .submit-container
     = submit_tag _('Enter admin mode'), class: 'gl-button btn btn-confirm', data: { qa_selector: 'enter_admin_mode_button' }
diff --git a/app/views/admin/sessions/_signin_box.html.haml b/app/views/admin/sessions/_signin_box.html.haml
index 15005bb9224..70cad880293 100644
--- a/app/views/admin/sessions/_signin_box.html.haml
+++ b/app/views/admin/sessions/_signin_box.html.haml
@@ -2,7 +2,7 @@
   - if crowd_enabled?
     .login-box.tab-pane{ id: "crowd", role: 'tabpanel', class: active_when(form_based_auth_provider_has_active_class?(:crowd)) }
       .login-body
-        = render 'devise/sessions/new_crowd'
+        = render 'devise/sessions/new_crowd', render_remember_me: false, submit_message: _('Enter admin mode')
 
   - ldap_servers.each_with_index do |server, i|
     .login-box.tab-pane{ id: "#{server['provider_name']}", role: 'tabpanel', class: active_when(i == 0 && form_based_auth_provider_has_active_class?(:ldapmain)) }
diff --git a/app/views/admin/sessions/_two_factor_otp.html.haml b/app/views/admin/sessions/_two_factor_otp.html.haml
index f7b4035488d..a27dea52884 100644
--- a/app/views/admin/sessions/_two_factor_otp.html.haml
+++ b/app/views/admin/sessions/_two_factor_otp.html.haml
@@ -5,5 +5,5 @@
     %p.form-text.text-muted.hint
       = _("Enter the code from your two-factor authenticator app. If you've lost your device, you can enter one of your recovery codes.")
 
-  .submit-container.move-submit-down
+  .submit-container
     = submit_tag 'Verify code', class: 'gl-button btn btn-confirm'
diff --git a/app/views/admin/sessions/new.html.haml b/app/views/admin/sessions/new.html.haml
index 4fc30cbaecf..7301b0f6e04 100644
--- a/app/views/admin/sessions/new.html.haml
+++ b/app/views/admin/sessions/new.html.haml
@@ -8,7 +8,7 @@
         - if any_form_based_providers_enabled?
           = render 'devise/shared/tabs_ldap', show_password_form: allow_admin_mode_password_authentication_for_web?, render_signup_link: false
         - else
-          = render 'devise/shared/tab_single', tab_title: page_title
+          = render 'devise/shared/tab_single', tab_title: page_title if Feature.disabled?(:restyle_login_page, @project)
         .tab-content
           - if allow_admin_mode_password_authentication_for_web? || ldap_sign_in_enabled? || crowd_enabled?
             = render 'admin/sessions/signin_box'
diff --git a/app/views/admin/sessions/two_factor.html.haml b/app/views/admin/sessions/two_factor.html.haml
index 3bbf768d7be..bfe66e2477e 100644
--- a/app/views/admin/sessions/two_factor.html.haml
+++ b/app/views/admin/sessions/two_factor.html.haml
@@ -1,15 +1,14 @@
-- page_title _('Enter 2FA for Admin Mode')
+- page_title _('Two-factor authentication for admin mode')
 - add_page_specific_style 'page_bundles/login'
 
 .row.justify-content-center
   .col-md-5.new-session-forms-container
     .login-page
       #signin-container{ class: ('borderless' if Feature.enabled?(:restyle_login_page, @project)) }
-        = render 'devise/shared/tab_single', tab_title: _('Enter admin mode')
-        .tab-content
-          .login-box.tab-pane.gl-p-5.active{ id: 'login-pane', role: 'tabpanel' }
-            .login-body
-              - if current_user.two_factor_enabled?
-                = render 'admin/sessions/two_factor_otp'
-              - if current_user.two_factor_webauthn_enabled?
-                = render 'authentication/authenticate', render_remember_me: false, target_path: admin_session_path
+        = render 'devise/shared/tab_single', tab_title: _('Enter admin mode') if Feature.disabled?(:restyle_login_page, @project)
+        .login-box.gl-p-5
+          .login-body
+            - if current_user.two_factor_enabled?
+              = render 'admin/sessions/two_factor_otp'
+            - if current_user.two_factor_webauthn_enabled?
+              = render 'authentication/authenticate', render_remember_me: false, target_path: admin_session_path
diff --git a/app/views/admin/spam_logs/_spam_log.html.haml b/app/views/admin/spam_logs/_spam_log.html.haml
index 183667679b9..6aed8508a6a 100644
--- a/app/views/admin/spam_logs/_spam_log.html.haml
+++ b/app/views/admin/spam_logs/_spam_log.html.haml
@@ -22,6 +22,8 @@
   %td
     = truncate(spam_log.description, length: 100)
   %td
+    = moderation_status(user)
+  %td
     - if user
       = render Pajamas::ButtonComponent.new(size: :small,
         variant: :danger,
diff --git a/app/views/admin/spam_logs/index.html.haml b/app/views/admin/spam_logs/index.html.haml
index 001662c4015..9a0756510ec 100644
--- a/app/views/admin/spam_logs/index.html.haml
+++ b/app/views/admin/spam_logs/index.html.haml
@@ -14,6 +14,7 @@
           %th= _('Type')
           %th= _('Title')
           %th= _('Description')
+          %th= _('User Status')
           %th= _('Primary Action')
           %th
       = render @spam_logs
diff --git a/app/views/admin/topics/_form.html.haml b/app/views/admin/topics/_form.html.haml
index 544310e312c..c3b5161d617 100644
--- a/app/views/admin/topics/_form.html.haml
+++ b/app/views/admin/topics/_form.html.haml
@@ -18,14 +18,15 @@
 
   .form-group
     = f.label :description, _("Description")
-    = render layout: 'shared/md_preview', locals: { url: preview_markdown_admin_topics_path, referenced_users: false } do
-      = render 'shared/zen', f: f, attr: :description,
-                               classes: 'note-textarea',
-                               placeholder: _('Write a description…'),
-                               supports_quick_actions: false,
-                               supports_autocomplete: false,
-                               qa_selector: 'topic_form_description'
-      = render 'shared/notes/hints', supports_file_upload: false
+    .js-markdown-editor{ data: { render_markdown_path: preview_markdown_admin_topics_path,
+                                 markdown_docs_path: help_page_path('user/markdown'),
+                                 qa_selector: 'topic_form_description',
+                                 form_field_placeholder: _('Write a description…'),
+                                 supports_quick_actions: 'false',
+                                 enable_autocomplete: 'false',
+                                 disable_attachments: 'true',
+                                 form_field_classes: 'note-textarea js-gfm-input markdown-area' } }
+      = f.hidden_field :description
 
   .form-group.gl-mt-3.gl-mb-3
     = f.label :avatar, _('Topic avatar'), class: 'gl-display-block'
diff --git a/app/views/admin/topics/_topic.html.haml b/app/views/admin/topics/_topic.html.haml
index c63828cf41f..ce2b5ad793c 100644
--- a/app/views/admin/topics/_topic.html.haml
+++ b/app/views/admin/topics/_topic.html.haml
@@ -6,7 +6,7 @@
 
   .gl-min-w-0.gl-flex-grow-1.gl-ml-3
     .title
-      = link_to title, topic_explore_projects_path(topic_name: topic.name)
+      = link_to title, topic_explore_projects_cleaned_path(topic_name: topic.name)
     %div
       = topic.name
 
diff --git a/app/views/admin/users/_users.html.haml b/app/views/admin/users/_users.html.haml
index c9264535a13..213d5847986 100644
--- a/app/views/admin/users/_users.html.haml
+++ b/app/views/admin/users/_users.html.haml
@@ -9,9 +9,9 @@
 
 .top-area
   .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
-    .fade-left
+    %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
       = sprite_icon('chevron-lg-left', size: 12)
-    .fade-right
+    %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
       = sprite_icon('chevron-lg-right', size: 12)
     = gl_tabs_nav({ class: 'scrolling-tabs nav-links gl-display-flex gl-flex-grow-1 gl-w-full' }) do
       = gl_tab_link_to admin_users_path, { item_active: active_when(params[:filter].nil?), class: 'gl-border-0!' } do
diff --git a/app/views/ci/group_variables/_index.html.haml b/app/views/ci/group_variables/_index.html.haml
index c8c970f3c2f..86219d5f021 100644
--- a/app/views/ci/group_variables/_index.html.haml
+++ b/app/views/ci/group_variables/_index.html.haml
@@ -1,14 +1,5 @@
-- variables = @project.group.self_and_ancestors.flat_map(&:variables)
-
-.ci-variable-table
-  %table.gl-table.gl-w-full.gl-table-layout-fixed
-    = render 'ci/group_variables/variable_header'
-    - variables.each do |variable|
-      %tr
-        %td.gl-text-truncate
-          = variable.key
-        %td.gl-text-truncate
-          = variable.environment_scope
-        %td.gl-text-truncate
-          %a.group-origin-link{ href: group_settings_ci_cd_path(variable.group) }
-            = variable.group.name
+#js-inherited-group-ci-variables{
+  data: {
+    project_path: @project.full_path,
+  }
+}
diff --git a/app/views/ci/variables/_content.html.haml b/app/views/ci/variables/_content.html.haml
index 65e57d68288..f7ab495111a 100644
--- a/app/views/ci/variables/_content.html.haml
+++ b/app/views/ci/variables/_content.html.haml
@@ -1,12 +1,2 @@
 = format(s_('CiVariables|Variables store information, like passwords and secret keys, that you can use in job scripts. Each %{entity} can define a maximum of %{limit} variables.'), entity: entity, limit: variable_limit).html_safe
 = link_to _('Learn more.'), help_page_path('ci/variables/index'), target: '_blank', rel: 'noopener noreferrer'
-%p
-  = _('Variables can have several attributes.')
-  = link_to _('Learn more.'), help_page_path('ci/variables/index', anchor: 'define-a-cicd-variable-in-the-ui'), target: '_blank', rel: 'noopener noreferrer'
-%ul
-  %li
-    = html_escape(_('%{code_open}Protected:%{code_close} Only exposed to protected branches or protected tags.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-  %li
-    = html_escape(_('%{code_open}Masked:%{code_close} Hidden in job logs. Must match masking requirements.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-  %li
-    = html_escape(_('%{code_open}Expanded:%{code_close} Variables with %{code_open}$%{code_close} will be treated as the start of a reference to another variable.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index da2c8a71dcd..5eed4e92386 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -2,6 +2,17 @@
 - is_group = !@group.nil?
 - is_project = !@project.nil?
 
+%p
+  = _('Variables can have several attributes.')
+  = link_to _('Learn more.'), help_page_path('ci/variables/index', anchor: 'define-a-cicd-variable-in-the-ui'), target: '_blank', rel: 'noopener noreferrer'
+%ul
+  %li
+    = html_escape(_('%{code_open}Protected:%{code_close} Only exposed to protected branches or protected tags.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+  %li
+    = html_escape(_('%{code_open}Masked:%{code_close} Hidden in job logs. Must match masking requirements.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+  %li
+    = html_escape(_('%{code_open}Expanded:%{code_close} Variables with %{code_open}$%{code_close} will be treated as the start of a reference to another variable.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+
 #js-ci-variables{ data: { endpoint: save_endpoint,
   is_project: is_project.to_s,
   project_id: @project&.id || '',
diff --git a/app/views/clusters/clusters/_banner.html.haml b/app/views/clusters/clusters/_banner.html.haml
index 6461b71b10d..7d5d41c2851 100644
--- a/app/views/clusters/clusters/_banner.html.haml
+++ b/app/views/clusters/clusters/_banner.html.haml
@@ -8,12 +8,12 @@
 
 = render Pajamas::AlertComponent.new(variant: :warning,
   alert_options: { class: 'hidden js-cluster-api-unreachable' }) do |c|
-  = c.body do
+  - c.with_body do
     = s_('ClusterIntegration|Your cluster API is unreachable. Please ensure your API URL is correct.')
 
 = render Pajamas::AlertComponent.new(variant: :warning,
   alert_options: { class: 'hidden js-cluster-authentication-failure js-cluster-api-unreachable' }) do |c|
-  = c.body do
+  - c.with_body do
     = s_('ClusterIntegration|There was a problem authenticating with your cluster. Please ensure your CA Certificate and Token are valid.')
 
 .hidden.js-cluster-success.bs-callout.bs-callout-success{ role: 'alert' }
diff --git a/app/views/clusters/clusters/_deprecation_alert.html.haml b/app/views/clusters/clusters/_deprecation_alert.html.haml
index 0318c0f7dfa..4f35ba78cc6 100644
--- a/app/views/clusters/clusters/_deprecation_alert.html.haml
+++ b/app/views/clusters/clusters/_deprecation_alert.html.haml
@@ -1,5 +1,5 @@
 = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mt-6 gl-mb-3' }) do |c|
-  = c.body do
+  - c.with_body do
     - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
     - issue_link_start = link_start % { url: 'https://gitlab.com/gitlab-org/configure/general/-/issues/199' }
     - docs_link_start = link_start % { url: help_page_path('user/clusters/agent/index.md') }
diff --git a/app/views/clusters/clusters/_details_tab.html.haml b/app/views/clusters/clusters/_details_tab.html.haml
index 734910686e7..75dc82527f2 100644
--- a/app/views/clusters/clusters/_details_tab.html.haml
+++ b/app/views/clusters/clusters/_details_tab.html.haml
@@ -1,4 +1,4 @@
 - active = params[:tab] == 'details' || !params[:tab].present?
 
-= gl_tab_link_to clusterable.cluster_path(@cluster.id, params: { tab: 'details' }), { item_active: active } do
+= gl_tab_link_to clusterable.cluster_path(@cluster.id, params: { tab: 'details' }), { item_active: active, data: { testid: 'cluster-details-tab' } } do
   = _('Details')
diff --git a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
index 40632e27fa7..08badbb4963 100644
--- a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
+++ b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
@@ -4,8 +4,8 @@
   alert_options: { class: 'gcp-signup-offer',
                    data: { feature_id: Users::CalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: callouts_path }},
                    close_button_options: { data: { track_action: 'click_dismiss', track_label: 'gcp_signup_offer_banner' }}) do |c|
-  = c.body do
+  - c.with_body do
     = s_('ClusterIntegration|Every new Google Cloud Platform (GCP) account receives $300 in credit upon %{sign_up_link}. In partnership with Google, GitLab is able to offer an additional $200 for both new and existing GCP accounts to get started with GitLab\'s Google Kubernetes Engine Integration.').html_safe % { sign_up_link: link }
-  = c.actions do
+  - c.with_actions do
     = render Pajamas::ButtonComponent.new(variant: :confirm, href: 'https://cloud.google.com/partners/partnercredit/?pcn_code=0014M00001h35gDQAQ#contact-form', target: '_blank', button_options: { rel: 'noopener noreferrer', data: { track_action: 'click_button', track_label: 'gcp_signup_offer_banner' } }) do
       = s_("ClusterIntegration|Apply for credit")
diff --git a/app/views/clusters/clusters/_health.html.haml b/app/views/clusters/clusters/_health.html.haml
deleted file mode 100644
index 9e7820d3136..00000000000
--- a/app/views/clusters/clusters/_health.html.haml
+++ /dev/null
@@ -1,8 +0,0 @@
-- add_page_specific_style 'page_bundles/prometheus'
-
-%section.settings.no-animate.expanded.cluster-health-graphs#cluster-health
-  - if @cluster&.integration_prometheus_available?
-    #prometheus-graphs{ data: @cluster.health_data(clusterable) }
-
-  - else
-    %p.settings-message.text-center= s_("ClusterIntegration|In order to view the health of your cluster, you must first enable Prometheus in the Integrations tab.")
diff --git a/app/views/clusters/clusters/_health_tab.html.haml b/app/views/clusters/clusters/_health_tab.html.haml
deleted file mode 100644
index 4292066cc6f..00000000000
--- a/app/views/clusters/clusters/_health_tab.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-- active = params[:tab] == 'health'
-
-= gl_tab_link_to clusterable.cluster_path(@cluster.id, params: { tab: 'health' }), { item_active: active, data: { testid: 'cluster-health-tab' } } do
-  = _('Health')
diff --git a/app/views/clusters/clusters/show.html.haml b/app/views/clusters/clusters/show.html.haml
index 19ca9407513..57de6d980f8 100644
--- a/app/views/clusters/clusters/show.html.haml
+++ b/app/views/clusters/clusters/show.html.haml
@@ -32,7 +32,6 @@
       = gl_tabs_nav do
         = render 'clusters/clusters/details_tab'
         = render_if_exists 'clusters/clusters/environments_tab'
-        = render 'clusters/clusters/health_tab' if !Feature.enabled?(:remove_monitor_metrics)
         = render 'clusters/clusters/integrations_tab' if !Feature.enabled?(:remove_monitor_metrics)
         = render 'clusters/clusters/advanced_settings_tab'
 
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index e600d84f492..b72b252a852 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -12,8 +12,10 @@
 
 .top-area
   .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-flex-basis-0.gl-min-w-0
-    .fade-left= sprite_icon('chevron-lg-left', size: 12)
-    .fade-right= sprite_icon('chevron-lg-right', size: 12)
+    %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+      = sprite_icon('chevron-lg-left', size: 12)
+    %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+      = sprite_icon('chevron-lg-right', size: 12)
     = render 'dashboard/projects_nav'
   .nav-controls
     = render 'shared/projects/search_form'
diff --git a/app/views/dashboard/groups/_groups.html.haml b/app/views/dashboard/groups/_groups.html.haml
index 601b6a8b1a7..ea7cd75152d 100644
--- a/app/views/dashboard/groups/_groups.html.haml
+++ b/app/views/dashboard/groups/_groups.html.haml
@@ -1,2 +1,2 @@
 .js-groups-list-holder
-  #js-groups-tree{ data: { hide_projects: 'true', endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
+  #js-groups-tree{ data: { endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
diff --git a/app/views/dashboard/merge_requests.html.haml b/app/views/dashboard/merge_requests.html.haml
index de34c709ff3..658632b70a6 100644
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@@ -1,11 +1,19 @@
-- page_title _("Merge requests")
-- @breadcrumb_link = merge_requests_dashboard_path(assignee_username: current_user.username)
-- add_page_specific_style 'page_bundles/issuable_list'
+:ruby
+  title = if params[:reviewer_username] == current_user.username
+            _("Review requests")
+          elsif params[:assignee_username] == current_user.username
+            _("Assigned merge requests")
+          else
+            _("Merge requests")
+          end
+  page_title title
+  @breadcrumb_link = merge_requests_dashboard_path(assignee_username: current_user.username)
+  add_page_specific_style 'page_bundles/issuable_list'
 
 = render_dashboard_ultimate_trial(current_user)
 
 .page-title-holder.d-flex.align-items-start.flex-column.flex-sm-row.align-items-sm-center
-  %h1.page-title.gl-font-size-h-display= _('Merge requests')
+  %h1.page-title.gl-font-size-h-display= title
 
   - if current_user
     .page-title-controls.ml-0.mb-3.ml-sm-auto.mb-sm-0
diff --git a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
index 855177fd836..94f956896d6 100644
--- a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
@@ -4,7 +4,7 @@
   - if has_start_trial?
     = render_if_exists "dashboard/projects/blank_state_ee_trial"
 
-  = link_to new_project_path, class: link_classes do
+  = link_to new_project_path, class: link_classes, data: { qa_selector: 'new_project_button' } do
     .blank-state-icon
       = custom_icon("add_new_project", size: 50)
     .blank-state-body.gl-sm-pl-6
diff --git a/app/views/dashboard/projects/_blank_state_welcome.html.haml b/app/views/dashboard/projects/_blank_state_welcome.html.haml
index c5fdc31a775..08b914a218d 100644
--- a/app/views/dashboard/projects/_blank_state_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_welcome.html.haml
@@ -2,7 +2,7 @@
 
 .gl-display-flex.gl-flex-wrap.gl-justify-content-space-between
   - if current_user.can_create_project?
-    = link_to new_project_path, class: link_classes do
+    = link_to new_project_path, class: link_classes, data: { qa_selector: 'new_project_button' } do
       .blank-state-icon
         = custom_icon("add_new_project", size: 50)
       .blank-state-body.gl-sm-pl-6
@@ -12,7 +12,7 @@
           = _('Projects are where you store your code, access issues, wiki and other features of GitLab.')
   - else
     = render Pajamas::AlertComponent.new(variant: :info, alert_options: { class: 'gl-mb-5 gl-w-full' }) do |c|
-      = c.body do
+      - c.with_body do
         = _("You see projects here when you're added to a group or project.").html_safe
 
   - if current_user.can_create_group?
diff --git a/app/views/devise/confirmations/new.html.haml b/app/views/devise/confirmations/new.html.haml
index 5af247703f6..00652e8574a 100644
--- a/app/views/devise/confirmations/new.html.haml
+++ b/app/views/devise/confirmations/new.html.haml
@@ -15,7 +15,7 @@
         = recaptcha_tags nonce: content_security_policy_nonce
 
       .gl-mt-5
-        = render Pajamas::ButtonComponent.new(block: true, type: :submit, variant: :confirm) do
+        = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true) do
           = _("Resend")
 
 .clearfix.prepend-top-20
diff --git a/app/views/devise/passwords/edit.html.haml b/app/views/devise/passwords/edit.html.haml
index 498fb08969c..35ee9a7679a 100644
--- a/app/views/devise/passwords/edit.html.haml
+++ b/app/views/devise/passwords/edit.html.haml
@@ -1,7 +1,7 @@
 = render 'devise/shared/tab_single', tab_title: _('Change your password')
 .login-box
   .login-body
-    = form_for(resource, as: resource_name, url: password_path(:user), html: { method: :put, class: 'gl-show-field-errors gl-pt-5' }) do |f|
+    = gitlab_ui_form_for(resource, as: resource_name, url: password_path(:user), html: { method: :put, class: 'gl-show-field-errors gl-pt-5' }) do |f|
       .devise-errors.gl-px-5
         = render "devise/shared/error_messages", resource: resource
       = f.hidden_field :reset_password_token
@@ -13,7 +13,8 @@
         = f.label _('Confirm new password'), for: "user_password_confirmation"
         = f.password_field :password_confirmation, autocomplete: 'new-password', class: "form-control gl-form-input bottom", title: _('This field is required.'), data: { qa_selector: 'password_confirmation_field' }, required: true
       .clearfix.gl-px-5.gl-pb-5
-        = f.submit _("Change your password"), class: "gl-button btn btn-confirm", data: { qa_selector: 'change_password_button' }
+        = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { qa_selector: 'change_password_button' } }) do
+          = _('Change your password')
 
 .clearfix.prepend-top-20
   %p
diff --git a/app/views/devise/passwords/new.html.haml b/app/views/devise/passwords/new.html.haml
index 1400ac9ca72..8e55977fe7a 100644
--- a/app/views/devise/passwords/new.html.haml
+++ b/app/views/devise/passwords/new.html.haml
@@ -1,20 +1,23 @@
 .login-box
   .login-body
-    = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: 'gl-show-field-errors' }) do |f|
+    = gitlab_ui_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: 'gl-p-5 gl-show-field-errors', aria: { live: 'assertive' }}) do |f|
       .devise-errors
         = render "devise/shared/error_messages", resource: resource
-      .form-group.gl-px-5.gl-pt-5
-        = f.label :email, class: ("gl-mb-1" if Feature.enabled?(:restyle_login_page))
+      .form-group
+        = f.label :email, _('Email')
         = f.email_field :email, class: "form-control gl-form-input", required: true, autocomplete: 'off', value: params[:user_email], autofocus: true, title: _('Please provide a valid email address.')
         .form-text.text-muted
-          = _('Requires your primary GitLab email address.')
+          = _('Requires a verified GitLab email address.')
 
       - if recaptcha_enabled?
-        .gl-px-5
+        .gl-mb-5
           = recaptcha_tags nonce: content_security_policy_nonce
 
-      .gl-p-5
-        = f.submit _("Reset password"), class: "gl-button btn-confirm btn"
+      = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true) do
+        = _('Reset password')
 
-.clearfix.prepend-top-20
+- if Feature.enabled?(:restyle_login_page, @project)
   = render 'devise/shared/sign_in_link'
+- else
+  .gl-mt-3
+    = render 'devise/shared/sign_in_link'
diff --git a/app/views/devise/registrations/new.html.haml b/app/views/devise/registrations/new.html.haml
index e75449bf320..18856e04eb8 100644
--- a/app/views/devise/registrations/new.html.haml
+++ b/app/views/devise/registrations/new.html.haml
@@ -7,6 +7,9 @@
   = render "layouts/bizible"
 = render "layouts/google_tag_manager_body"
 
+- content_for :omniauth_providers_bottom do
+  = render 'devise/shared/signup_omniauth_providers'
+
 .signup-page
   = render signup_box_template,
     url: registration_path(resource_name, registration_path_params),
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index 698e8c89a08..4825f192d4d 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -1,31 +1,27 @@
-= gitlab_ui_form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors js-arkose-labs-form', aria: { live: 'assertive' }, data: { testid: 'sign-in-form' }}) do |f|
-  .form-group.gl-px-5.gl-pt-5
-    = render_if_exists 'devise/sessions/new_base_user_login_label', form: f
-    = f.text_field :login, value: @invite_email, class: 'form-control gl-form-input top js-username-field', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off', required: true, title: _('This field is required.'), data: { qa_selector: 'login_field', testid: 'username-field' }
-  .form-group.gl-px-5
-    = f.label :password, class: "label-bold #{'gl-mb-1' if Feature.enabled?(:restyle_login_page, @project)}"
+= gitlab_ui_form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'gl-p-5 gl-show-field-errors js-arkose-labs-form', aria: { live: 'assertive' }, data: { testid: 'sign-in-form' }}) do |f|
+  .form-group
+    = f.label :login, _('Username or email')
+    = f.text_field :login, value: @invite_email, class: 'form-control gl-form-input js-username-field', autocomplete: 'username', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off', required: true, title: _('This field is required.'), data: { qa_selector: 'login_field', testid: 'username-field' }
+  .form-group
+    = f.label :password, _('Password')
     = f.password_field :password, class: 'form-control gl-form-input js-password', data: { id: "#{resource_name}_password",
         qa_selector: 'password_field',
         testid: 'password-field',
         name: "#{resource_name}[password]" }
-  .gl-px-5
-    .gl-display-inline-block
-      - if remember_me_enabled?
-        = f.gitlab_ui_checkbox_component :remember_me, _('Remember me')
-    .gl-float-right
+    .form-text.gl-text-right
       - if unconfirmed_email?
         = link_to _('Resend confirmation email'), new_user_confirmation_path
       - else
         = link_to _('Forgot your password?'), new_password_path(:user)
-    %div
+
+  .form-group
     - if Feature.enabled?(:arkose_labs_login_challenge)
       = render_if_exists 'devise/sessions/arkose_labs'
     - elsif captcha_enabled? || captcha_on_login_required?
-      .gl-px-5
-        = recaptcha_tags nonce: content_security_policy_nonce
+      = recaptcha_tags nonce: content_security_policy_nonce
+
+  - if remember_me_enabled?
+    = f.gitlab_ui_checkbox_component :remember_me, _('Remember me'), checkbox_options: { autocomplete: 'off' }
 
-  .submit-container.move-submit-down.gl-px-5.gl-pb-5
-    = f.button _('Sign in'), type: :submit, class: "gl-button btn btn-block btn-confirm js-sign-in-button#{' js-no-auto-disable' if Feature.enabled?(:arkose_labs_login_challenge)}", data: { qa_selector: 'sign_in_button', testid: 'sign-in-button' }
-  - if Gitlab::CurrentSettings.sign_in_text.present? && Feature.enabled?(:restyle_login_page, @project)
-    .gl-px-5
-      = markdown_field(Gitlab::CurrentSettings.current_application_settings, :sign_in_text)
+  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { class: "js-sign-in-button #{'js-no-auto-disable' if Feature.enabled?(:arkose_labs_login_challenge)}", data: { qa_selector: 'sign_in_button', testid: 'sign-in-button' } }) do
+    = _('Sign in')
diff --git a/app/views/devise/sessions/_new_base_user_login_label.html.haml b/app/views/devise/sessions/_new_base_user_login_label.html.haml
deleted file mode 100644
index 8a8b9f7a361..00000000000
--- a/app/views/devise/sessions/_new_base_user_login_label.html.haml
+++ /dev/null
@@ -1 +0,0 @@
-= local_assigns[:form].label _('Username or email'), for: 'user_login', class: "label-bold #{'gl-mb-1' if Feature.enabled?(:restyle_login_page, @project)}"
diff --git a/app/views/devise/sessions/_new_crowd.html.haml b/app/views/devise/sessions/_new_crowd.html.haml
index 293e287371a..bb398eaf4be 100644
--- a/app/views/devise/sessions/_new_crowd.html.haml
+++ b/app/views/devise/sessions/_new_crowd.html.haml
@@ -1,13 +1,16 @@
-= form_tag(omniauth_authorize_path(:user, :crowd), id: 'new_crowd_user', class: 'gl-show-field-errors') do
-  .form-group.gl-px-5.gl-pt-5
-    = label_tag :username, _('Username or email')
-    = text_field_tag :username, nil, { class: "form-control top", title: _("This field is required."), autofocus: "autofocus", required: true }
-  .form-group.gl-px-5
-    = label_tag :password
-    = password_field_tag :password, nil, { class: 'form-control gl-form-input js-password', data: { id: 'password', name: 'password' } }
-  - if remember_me_enabled?
-    .remember-me.gl-px-5
-      %label{ for: "remember_me" }
-        = check_box_tag :remember_me, '1', false, id: 'remember_me'
-        %span= _('Remember me')
-  = submit_tag _("Sign in"), class: "gl-button btn-confirm btn gl-px-5"
+- render_remember_me = remember_me_enabled? && local_assigns.fetch(:render_remember_me, true)
+- submit_message = local_assigns.fetch(:submit_message, _('Sign in'))
+
+= gitlab_ui_form_for(:crowd, url: omniauth_authorize_path(:user, :crowd), html: { class: 'gl-p-5 gl-show-field-errors', aria: { live: 'assertive' }, data: { testid: 'new_crowd_user' }}) do |f|
+  .form-group
+    = f.label :username, _('Username or email')
+    = f.text_field :username, name: :username, autocomplete: :username, class: 'form-control gl-form-input', title: _('This field is required.'), autofocus: 'autofocus', required: true
+  .form-group
+    = f.label :password, _('Password')
+    = f.text_field :vue_password_placeholder, class: 'form-control gl-form-input js-password', data: { id: "#{:crowd}_password", name: 'password' }
+
+  - if render_remember_me
+    = f.gitlab_ui_checkbox_component :remember_me, _('Remember me'), checkbox_options: { name: :remember_me, autocomplete: 'off' }
+
+  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true) do
+    = submit_message
diff --git a/app/views/devise/sessions/_new_ldap.html.haml b/app/views/devise/sessions/_new_ldap.html.haml
index fb5a57b509c..f9b6f462661 100644
--- a/app/views/devise/sessions/_new_ldap.html.haml
+++ b/app/views/devise/sessions/_new_ldap.html.haml
@@ -1,19 +1,18 @@
 - server = local_assigns.fetch(:server)
+- provider = server['provider_name']
 - render_remember_me = remember_me_enabled? && local_assigns.fetch(:render_remember_me, true)
 - submit_message = local_assigns.fetch(:submit_message, _('Sign in'))
 
-= form_tag(omniauth_callback_path(:user, server['provider_name']), id: 'new_ldap_user', class: "gl-show-field-errors") do
-  .form-group.gl-px-5.gl-pt-5
-    = label_tag :username, "#{server['label']} Username"
-    = text_field_tag :username, nil, { class: "form-control gl-form-input top", title: _("This field is required."), autofocus: "autofocus", data: { qa_selector: 'username_field' }, required: true }
-  .form-group.gl-px-5
-    = label_tag :password
-    = password_field_tag :password, nil, { class: 'form-control gl-form-input js-password', data: { id: 'password', name: 'password', qa_selector: 'password_field' } }
+= gitlab_ui_form_for(provider, url: omniauth_callback_path(:user, provider), html: { class: 'gl-p-5 gl-show-field-errors', aria: { live: 'assertive' }, data: { testid: 'new_ldap_user' }}) do |f|
+  .form-group
+    = f.label :username, _('Username')
+    = f.text_field :username, name: :username, autocomplete: :username, class: 'form-control gl-form-input', title: _('This field is required.'), autofocus: 'autofocus', data: { qa_selector: 'username_field' }, required: true
+  .form-group
+    = f.label :password, _('Password')
+    = f.text_field :vue_password_placeholder, class: 'form-control gl-form-input js-password', data: { id: "#{provider}_password", name: 'password', qa_selector: 'password_field' }
+
   - if render_remember_me
-    .gl-px-5
-      = render Pajamas::CheckboxTagComponent.new(name: 'remember_me') do |c|
-        = c.label do
-          = _('Remember me')
+    = f.gitlab_ui_checkbox_component :remember_me, _('Remember me'), checkbox_options: { name: :remember_me, autocomplete: 'off' }
 
-  .submit-container.move-submit-down.gl-px-5.gl-pb-5
-    = submit_tag submit_message, class: "gl-button btn btn-confirm", data: { qa_selector: 'sign_in_button' }
+  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { qa_selector: 'sign_in_button' } }) do
+    = submit_message
diff --git a/app/views/devise/sessions/email_verification.haml b/app/views/devise/sessions/email_verification.haml
index 6cafcb941b4..e0b5a266961 100644
--- a/app/views/devise/sessions/email_verification.haml
+++ b/app/views/devise/sessions/email_verification.haml
@@ -2,7 +2,7 @@
   = render 'devise/shared/tab_single', tab_title: s_('IdentityVerification|Help us protect your account')
   .login-box.gl-p-5
     .login-body
-      = form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: 'gl-show-field-errors' }) do |f|
+      = gitlab_ui_form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: 'gl-show-field-errors' }) do |f|
         %p
           = s_("IdentityVerification|For added security, you'll need to verify your identity. We've sent a verification code to %{email}").html_safe % { email: "<strong>#{sanitize(obfuscated_email(resource.email))}</strong>".html_safe }
         %div
@@ -11,7 +11,7 @@
           %p.gl-field-error.gl-mt-2
             = resource.errors.full_messages.to_sentence
           .gl-mt-5
-            = f.submit s_('IdentityVerification|Verify code'), class: 'gl-button btn btn-confirm'
+            = f.submit s_('IdentityVerification|Verify code'), class: 'gl-w-full', pajamas_button: true
             - unless send_rate_limited?(resource)
               = link_to s_('IdentityVerification|Resend code'), users_resend_verification_code_path, method: :post, class: 'form-control gl-button btn-link gl-mt-3 gl-mb-0'
   %p.gl-p-5.gl-text-secondary
diff --git a/app/views/devise/sessions/two_factor.html.haml b/app/views/devise/sessions/two_factor.html.haml
index 06152e3dac5..e3457040e6c 100644
--- a/app/views/devise/sessions/two_factor.html.haml
+++ b/app/views/devise/sessions/two_factor.html.haml
@@ -1,17 +1,20 @@
-%div
-  = render 'devise/shared/tab_single', tab_title: _('Two-Factor Authentication') if Feature.disabled?(:restyle_login_page, @project)
-  .login-box.gl-p-5
-    .login-body
-      - if @user.two_factor_enabled?
-        = gitlab_ui_form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: "edit_user gl-show-field-errors js-2fa-form #{'hidden' if @user.two_factor_webauthn_enabled?}" }) do |f|
+= render 'devise/shared/tab_single', tab_title: _('Two-factor authentication') if Feature.disabled?(:restyle_login_page, @project)
+.login-box.gl-p-5
+  .login-body
+    - if @user.two_factor_enabled?
+      = gitlab_ui_form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: "edit_user gl-show-field-errors js-2fa-form #{'hidden' if @user.two_factor_webauthn_enabled?}" }) do |f|
+        .form-group
+          = f.label :otp_attempt, _('Enter verification code')
+          = f.text_field :otp_attempt, class: 'form-control gl-form-input', required: true, autofocus: true, autocomplete: 'off', inputmode: 'numeric', title: _('This field is required.'), data: { qa_selector: 'two_fa_code_field' }
+          %p.form-text.text-muted.hint
+            = _("Enter the code from your two-factor authenticator app. If you've lost your device, you can enter one of your recovery codes.")
+
+        - if remember_me_enabled?
           - resource_params = params[resource_name].presence || params
-          - if remember_me_enabled?
-            = f.hidden_field :remember_me, value: resource_params.fetch(:remember_me, 0)
-          %div
-            = f.label _('Enter verification code'), name: :otp_attempt, class: Feature.enabled?(:restyle_login_page, @project) ? 'gl-mb-1' : ''
-            = f.text_field :otp_attempt, class: 'form-control gl-form-input', required: true, autofocus: true, autocomplete: 'off', inputmode: 'numeric', title: _('This field is required.'), data: { qa_selector: 'two_fa_code_field' }
-            %p.form-text.text-muted.hint= _("Enter the code from your two-factor authenticator app. If you've lost your device, you can enter one of your recovery codes.")
-            .prepend-top-20
-              = f.submit _("Verify code"), pajamas_button: true, data: { qa_selector: 'verify_code_button' }
-      - if @user.two_factor_webauthn_enabled?
-        = render "authentication/authenticate", params: params, resource: resource, resource_name: resource_name, render_remember_me: true, target_path: new_user_session_path
+          = f.hidden_field :remember_me, value: resource_params.fetch(:remember_me, 0)
+
+        = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { qa_selector: 'verify_code_button' } }) do
+          = _("Verify code")
+
+    - if @user.two_factor_webauthn_enabled?
+      = render "authentication/authenticate", params: params, resource: resource, resource_name: resource_name, render_remember_me: true, target_path: new_user_session_path
diff --git a/app/views/devise/shared/_error_messages.html.haml b/app/views/devise/shared/_error_messages.html.haml
index b7589a4460e..caebda72b9c 100644
--- a/app/views/devise/shared/_error_messages.html.haml
+++ b/app/views/devise/shared/_error_messages.html.haml
@@ -3,7 +3,7 @@
     variant: :danger,
     dismissible: false,
     alert_options: { id: 'error_explanation', class: 'gl-mb-3'}) do |c|
-    = c.body do
+    - c.with_body do
       %ul.gl-pl-4
         - resource.errors.full_messages.each do |message|
           %li= message
diff --git a/app/views/devise/shared/_omniauth_box.html.haml b/app/views/devise/shared/_omniauth_box.html.haml
index 14a9bde2d9e..8f2c2c58790 100644
--- a/app/views/devise/shared/_omniauth_box.html.haml
+++ b/app/views/devise/shared/_omniauth_box.html.haml
@@ -18,5 +18,5 @@
         = label_for_provider(provider)
   - if render_remember_me
     = render Pajamas::CheckboxTagComponent.new(name: 'remember_me_omniauth', value: nil) do |c|
-      = c.label do
+      - c.with_label do
         = _('Remember me')
diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml
index 31c541eebde..684ade87720 100644
--- a/app/views/devise/shared/_signup_box.html.haml
+++ b/app/views/devise/shared/_signup_box.html.haml
@@ -1,11 +1,9 @@
 - max_first_name_length = max_last_name_length = 127
-- omniauth_providers_placement ||= :bottom
 - borderless ||= false
 - form_resource_name = "new_#{resource_name}"
 
 .gl-mb-3.gl-p-4{ class: (borderless ? '' : 'gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base') }
-  - if show_omniauth_providers && omniauth_providers_placement == :top
-    = render 'devise/shared/signup_omniauth_providers_top'
+  = yield :omniauth_providers_top if show_omniauth_providers
 
   = gitlab_ui_form_for(resource, as: form_resource_name, url: url, html: { class: 'new_user gl-show-field-errors js-arkose-labs-form', 'aria-live' => 'assertive' }, data: { testid: 'signup-form' }) do |f|
     .devise-errors
@@ -77,5 +75,5 @@
       .gl-pt-5
         = markdown_field(Gitlab::CurrentSettings.current_application_settings, :sign_in_text)
     = render 'devise/shared/terms_of_service_notice', button_text: button_text
-    - if show_omniauth_providers && omniauth_providers_placement == :bottom
-      = render 'devise/shared/signup_omniauth_providers'
+
+  = yield :omniauth_providers_bottom if show_omniauth_providers
diff --git a/app/views/devise/shared/_signup_omniauth_provider_list.haml b/app/views/devise/shared/_signup_omniauth_provider_list.haml
index 6294a93808b..e8c82e456ae 100644
--- a/app/views/devise/shared/_signup_omniauth_provider_list.haml
+++ b/app/views/devise/shared/_signup_omniauth_provider_list.haml
@@ -1,11 +1,10 @@
-- register_omniauth_params = { intent: :register }
 - if Feature.enabled?(:restyle_login_page, @project)
   .gl-text-center.gl-pt-5
     %label.gl-font-weight-normal
       = _("Register with:")
     .gl-text-center.gl-ml-auto.gl-mr-auto
       - providers.each do |provider|
-        = link_to omniauth_authorize_path(:user, provider, register_omniauth_params), method: :post, class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", data: { provider: provider }, id: "oauth-login-#{provider}" do
+        = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label }, id: "oauth-login-#{provider}" do
           - if provider_has_icon?(provider)
             = provider_image_tag(provider)
           %span.gl-button-text
@@ -15,7 +14,7 @@
     = _("Create an account using:")
   .gl-display-flex.gl-justify-content-between.gl-flex-wrap
     - providers.each do |provider|
-      = link_to omniauth_authorize_path(:user, provider, register_omniauth_params), method: :post, class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", data: { provider: provider }, id: "oauth-login-#{provider}" do
+      = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label }, id: "oauth-login-#{provider}" do
         - if provider_has_icon?(provider)
           = provider_image_tag(provider)
         %span.gl-button-text
diff --git a/app/views/devise/shared/_signup_omniauth_providers.haml b/app/views/devise/shared/_signup_omniauth_providers.haml
index d2a47974e01..5ec3c7a4150 100644
--- a/app/views/devise/shared/_signup_omniauth_providers.haml
+++ b/app/views/devise/shared/_signup_omniauth_providers.haml
@@ -1,4 +1,4 @@
 - if Feature.disabled?(:restyle_login_page, @project)
   .omniauth-divider.gl-display-flex.gl-align-items-center
     = _("or")
-= render 'devise/shared/signup_omniauth_provider_list', providers: enabled_button_based_providers
+= render 'devise/shared/signup_omniauth_provider_list', providers: enabled_button_based_providers, tracking_label: "free_registration"
diff --git a/app/views/devise/shared/_signup_omniauth_providers_top.haml b/app/views/devise/shared/_signup_omniauth_providers_top.haml
deleted file mode 100644
index 8eb22c0b023..00000000000
--- a/app/views/devise/shared/_signup_omniauth_providers_top.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-= render 'devise/shared/signup_omniauth_provider_list', providers: popular_enabled_button_based_providers
-.omniauth-divider.gl-display-flex.gl-align-items-center
-  = _("or")
diff --git a/app/views/explore/groups/_groups.html.haml b/app/views/explore/groups/_groups.html.haml
index bb2bd193565..3291129fd69 100644
--- a/app/views/explore/groups/_groups.html.haml
+++ b/app/views/explore/groups/_groups.html.haml
@@ -1,3 +1,3 @@
 .js-groups-list-holder
-  #js-groups-tree{ data: { hide_projects: 'true', endpoint: explore_groups_path(format: :json), path: explore_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
+  #js-groups-tree{ data: { endpoint: explore_groups_path(format: :json), path: explore_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
     = gl_loading_icon(size: 'md', css_class: 'gl-mt-6')
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index e49b3eb7781..88d57ed7e33 100644
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@@ -3,5 +3,5 @@
 
 - if current_user
   - unless has_label
-    %span.gl-float-left= _("Visibility:")
+    %span.gl-float-left.gl-white-space-nowrap= _("Visibility:")
   = gl_redirect_listbox_tag(projects_filter_items, selected, class: 'gl-ml-3', data: { placement: 'right' })
diff --git a/app/views/explore/projects/_head.html.haml b/app/views/explore/projects/_head.html.haml
index 605d85f49e0..c1d37965cd6 100644
--- a/app/views/explore/projects/_head.html.haml
+++ b/app/views/explore/projects/_head.html.haml
@@ -3,7 +3,7 @@
 
 = render_dashboard_ultimate_trial(current_user)
 
-.page-title-holder.gl-display-flex.gl-align-items-center
+.page-title-holder.gl-display-flex.gl-align-items-center{ data: { testid: 'explore-projects-title' } }
   %h1.page-title.gl-font-size-h-display= page_title
   .page-title-controls
     - if current_user&.can_create_project?
diff --git a/app/views/groups/labels/index.html.haml b/app/views/groups/labels/index.html.haml
index 80da61847ef..6b4832d81aa 100644
--- a/app/views/groups/labels/index.html.haml
+++ b/app/views/groups/labels/index.html.haml
@@ -13,7 +13,7 @@
       .text-muted.gl-mb-5
         = labels_function_introduction
       .other-labels.gl-rounded-base.gl-border.gl-bg-gray-10
-        .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-base.gl-border-b{ class: 'gl-rounded-bottom-left-none! gl-rounded-bottom-right-none!' }
+        .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-top-base.gl-border-b
           %h3.card-title.h5.gl-m-0.gl-relative.gl-line-height-24
             = _('Labels')
         %ul.manage-labels-list.js-other-labels.gl-px-3.gl-rounded-base
diff --git a/app/views/groups/settings/_advanced.html.haml b/app/views/groups/settings/_advanced.html.haml
index 21b1986bd34..d92a6b08b60 100644
--- a/app/views/groups/settings/_advanced.html.haml
+++ b/app/views/groups/settings/_advanced.html.haml
@@ -3,7 +3,7 @@
 
 .sub-section
   %h4.warning-title= s_('GroupSettings|Change group URL')
-  = form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
+  = gitlab_ui_form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
     = form_errors(@group)
     .form-group
       %p
@@ -23,7 +23,7 @@
           title: group_url_error_message,
           maxlength: ::Namespace::URL_MAX_LENGTH,
           "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
-    = f.submit s_('GroupSettings|Change group URL'), class: 'btn gl-button btn-danger'
+    = f.submit s_('GroupSettings|Change group URL'), class: 'btn-danger', pajamas_button: true
 
 = render 'groups/settings/transfer', group: @group
 = render 'groups/settings/remove', group: @group, remove_form_id: remove_form_id
diff --git a/app/views/groups/settings/_lfs.html.haml b/app/views/groups/settings/_lfs.html.haml
index 9f04b579a97..74f9298133b 100644
--- a/app/views/groups/settings/_lfs.html.haml
+++ b/app/views/groups/settings/_lfs.html.haml
@@ -7,6 +7,6 @@
 
 .form-group.gl-mb-3
   = f.gitlab_ui_checkbox_component :lfs_enabled,
-      _('Allow projects within this group to use Git LFS'),
-      help_text: _('Can be overridden in each project.'),
+      _('Projects in this group can use Git LFS'),
+      help_text: _('Possible to override in each project.'),
       checkbox_options: { checked: @group.lfs_enabled?, data: { qa_selector: 'lfs_checkbox' } }
diff --git a/app/views/groups/settings/_permissions.html.haml b/app/views/groups/settings/_permissions.html.haml
index 6fa76297679..f4749617463 100644
--- a/app/views/groups/settings/_permissions.html.haml
+++ b/app/views/groups/settings/_permissions.html.haml
@@ -30,8 +30,6 @@
           help_text: s_('GroupSettings|Group members are not notified if the group is mentioned.')
 
     = render 'groups/settings/resource_access_token_creation', f: f, group: @group
-    - unless Feature.enabled?(:always_perform_delayed_deletion)
-      = render_if_exists 'groups/settings/delayed_project_removal', f: f, group: @group
     = render 'groups/settings/ip_restriction_registration_features_cta', f: f
     = render_if_exists 'groups/settings/ip_restriction', f: f, group: @group
     = render_if_exists 'groups/settings/allowed_email_domain', f: f, group: @group
@@ -40,6 +38,7 @@
     = render 'groups/settings/lfs', f: f
     = render_if_exists 'groups/settings/code_suggestions', f: f, group: @group
     = render_if_exists 'groups/settings/ai_related_settings', f: f, group: @group
+    = render_if_exists 'groups/settings/ai_third_party_settings', f: f, group: @group
     = render 'groups/settings/git_access_protocols', f: f, group: @group
     = render 'groups/settings/project_creation_level', f: f, group: @group
     = render 'groups/settings/subgroup_creation_level', f: f, group: @group
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index e42f524467d..6758598d4dd 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -19,7 +19,7 @@
 
 = render partial: 'flash_messages'
 
-= render_if_exists 'trials/alert', namespace: @group
+= render_if_exists 'subscriptions/trials/alert', namespace: @group
 
 = render 'groups/home_panel'
 
diff --git a/app/views/ide/_show.html.haml b/app/views/ide/_show.html.haml
index eb6d5668807..4b16c0199ba 100644
--- a/app/views/ide/_show.html.haml
+++ b/app/views/ide/_show.html.haml
@@ -1,4 +1,5 @@
 - page_title _("IDE"), @project.full_name
+- add_page_specific_style 'page_bundles/web_ide_loader'
 
 - unless use_new_web_ide?
   - add_page_specific_style 'page_bundles/build'
@@ -9,4 +10,4 @@
 
 - data = ide_data(project: @project, fork_info: @fork_info, params: params)
 
-= render partial: 'shared/ide_root', locals: { data: data, loading_text: _('Loading the GitLab IDE...') }
+= render partial: 'shared/ide_root', locals: { data: data, loading_text: _('Loading the GitLab IDE') }
diff --git a/app/views/import/shared/_errors.html.haml b/app/views/import/shared/_errors.html.haml
index 2dbb54a9a0e..760715b56ea 100644
--- a/app/views/import/shared/_errors.html.haml
+++ b/app/views/import/shared/_errors.html.haml
@@ -2,6 +2,6 @@
   = render Pajamas::AlertComponent.new(variant: :danger,
     dismissible: false,
     alert_options: { class: 'gl-mb-5' }) do |c|
-    = c.body do
+    - c.with_body do
       - @errors.each do |error|
         = error
diff --git a/app/views/layouts/_header_search.html.haml b/app/views/layouts/_header_search.html.haml
index 28118cf4aaa..1d5f2583bbd 100644
--- a/app/views/layouts/_header_search.html.haml
+++ b/app/views/layouts/_header_search.html.haml
@@ -1,4 +1,4 @@
-#js-header-search.header-search.is-not-active.gl-relative.gl-w-full{ data: { 'search-context' => header_search_context.to_json,
+#js-header-search.header-search-form.is-not-active.gl-relative.gl-w-full{ data: { 'search-context' => header_search_context.to_json,
 'search-path' => search_path,
 'issues-path' => issues_dashboard_path,
 'mr-path' => merge_requests_dashboard_path,
diff --git a/app/views/layouts/_loading_hints.html.haml b/app/views/layouts/_loading_hints.html.haml
index b20b95cade8..1e6f671aacb 100644
--- a/app/views/layouts/_loading_hints.html.haml
+++ b/app/views/layouts/_loading_hints.html.haml
@@ -17,8 +17,6 @@
     -# Do not use preload_link_tag for fonts, to work around Firefox double-fetch bug.
     -# See https://github.com/web-platform-tests/wpt/pull/36930
     %link{ rel: 'preload', href: font_path('gitlab-sans/GitLabSans.woff2'), as: 'font', crossorigin: css_crossorigin }
-    %link{ rel: 'preload', href: font_path('jetbrains-mono/JetBrainsMono.woff2'), as: 'font', crossorigin: css_crossorigin }
-    %link{ rel: 'preload', href: font_path('jetbrains-mono/JetBrainsMono-Bold.woff2'), as: 'font', crossorigin: css_crossorigin }
-    %link{ rel: 'preload', href: font_path('jetbrains-mono/JetBrainsMono-Italic.woff2'), as: 'font', crossorigin: css_crossorigin }
-    %link{ rel: 'preload', href: font_path('jetbrains-mono/JetBrainsMono-BoldItalic.woff2'), as: 'font', crossorigin: css_crossorigin }
+    %link{ rel: 'preload', href: font_path('gitlab-mono/GitLabMono.woff2'), as: 'font', crossorigin: css_crossorigin }
+    %link{ rel: 'preload', href: font_path('gitlab-mono/GitLabMono-Italic.woff2'), as: 'font', crossorigin: css_crossorigin }
     = preload_link_tag(path_to_stylesheet('fonts'), crossorigin: css_crossorigin)
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index aa80de7f789..8e52f973e9e 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -20,6 +20,8 @@
     .mobile-overlay
     = dispensable_render_if_exists 'layouts/header/verification_reminder'
     .alert-wrapper.gl-force-block-formatting-context
+      = yield :code_suggestions_third_party_alert
+      = dispensable_render 'shared/new_nav_announcement'
       = dispensable_render 'shared/outdated_browser'
       = dispensable_render_if_exists "layouts/header/licensed_user_count_threshold"
       = dispensable_render_if_exists "layouts/header/token_expiry_notification"
diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml
index 71771dd7cb6..6e1d3ba678c 100644
--- a/app/views/layouts/devise.html.haml
+++ b/app/views/layouts/devise.html.haml
@@ -1,4 +1,5 @@
 - add_page_specific_style 'page_bundles/login'
+- custom_text = custom_sign_in_description
 !!! 5
 %html.devise-layout-html{ class: system_message_class }
   = render "layouts/head", { startup_filename: 'signin' }
@@ -10,14 +11,13 @@
         .container.navless-container
           .content
             = render "layouts/flash"
-            - if current_appearance&.description?
+            - if custom_text.present?
               .row
                 .col-md.order-12.sm-bg-gray-10
                   .col-sm-12
                     %h1.mb-3.gl-font-size-h2
                       = brand_title
-                    = brand_text
-                    = render_if_exists 'layouts/devise_help_text'
+                    = custom_text
                 .col-md.order-md-12
                   .col-sm-12.bar
                     .gl-text-center
@@ -29,7 +29,6 @@
                   = brand_image
                   %h1.mb-3.gl-font-size-h2
                     = brand_title
-                  = render_if_exists 'layouts/devise_help_text'
               .mb-3
                 .gl-w-half.gl-xs-w-full.gl-ml-auto.gl-mr-auto.bar
                   = yield
@@ -49,8 +48,8 @@
               .col-md-6.order-12.order-sm-1.brand-holder
                 - unless recently_confirmed_com?
                   = brand_image
-                  - if current_appearance&.description?
-                    = brand_text
+                  - if custom_text.present?
+                    = custom_text
                   - else
                     %h3.gl-sm-mt-0
                       = _('A complete DevOps platform')
@@ -61,11 +60,6 @@
                     %p
                       = _('This is a self-managed instance of GitLab.')
 
-                - if Gitlab::CurrentSettings.sign_in_text.present?
-                  = markdown_field(Gitlab::CurrentSettings.current_application_settings, :sign_in_text)
-
-                = render_if_exists 'layouts/devise_help_text'
-
               .col-md-6.order-1.new-session-forms-container{ class: recently_confirmed_com? ? 'order-sm-first' : 'order-sm-12' }
                 = yield
 
diff --git a/app/views/layouts/fullscreen.html.haml b/app/views/layouts/fullscreen.html.haml
index f4f9f39c20e..da192822902 100644
--- a/app/views/layouts/fullscreen.html.haml
+++ b/app/views/layouts/fullscreen.html.haml
@@ -17,7 +17,7 @@
           = render "layouts/broadcast"
           = yield :flash_message
           = render "layouts/flash", flash_container_no_margin: true
-        .content-wrapper{ id: "content-body", class: "d-flex flex-column align-items-stretch" }
+        .content-wrapper{ id: "content-body", class: "d-flex flex-column align-items-stretch gl-p-0" }
           = yield
     - unless minimal
       = render "layouts/nav/top_nav_responsive", class: "gl-flex-grow-1 gl-overflow-y-auto"
diff --git a/app/views/layouts/group.html.haml b/app/views/layouts/group.html.haml
index 1f742279756..c75b02aa6a6 100644
--- a/app/views/layouts/group.html.haml
+++ b/app/views/layouts/group.html.haml
@@ -9,6 +9,7 @@
 - content_for :flash_message do
   = dispensable_render_if_exists "groups/storage_enforcement_alert", context: @group
   = dispensable_render_if_exists "shared/namespace_storage_limit_alert", context: @group
+  = dispensable_render_if_exists "shared/namespace_combined_storage_users_alert", context: @group
 
 - content_for :page_specific_javascripts do
   - if current_user
@@ -20,6 +21,8 @@
   = render 'groups/invite_members_modal', group: @group
 
 = dispensable_render_if_exists "shared/web_hooks/group_web_hook_disabled_alert"
+= dispensable_render_if_exists "shared/code_suggestions_alert"
+= dispensable_render_if_exists "shared/code_suggestions_third_party_alert", source: @group
 = dispensable_render_if_exists "shared/free_user_cap_alert", source: @group
 = dispensable_render_if_exists "shared/unlimited_members_during_trial_alert", resource: @group
 
diff --git a/app/views/layouts/header/_current_user_dropdown.html.haml b/app/views/layouts/header/_current_user_dropdown.html.haml
index 1739dee1511..65dbafc19da 100644
--- a/app/views/layouts/header/_current_user_dropdown.html.haml
+++ b/app/views/layouts/header/_current_user_dropdown.html.haml
@@ -42,9 +42,8 @@
     %li.d-md-none
       = link_to _("Switch to GitLab Next"), Gitlab::Saas.canary_toggle_com_url, data: { track_action: "click_link", track_label: "switch_to_canary", track_property: "navigation_top" }
 
-  - if Feature.enabled?(:super_sidebar_nav, current_user)
-    %li.divider
-    .js-new-nav-toggle{ data: { enabled: show_super_sidebar?.to_s, endpoint: profile_preferences_url} }
+  %li.divider
+  .js-new-nav-toggle{ data: { enabled: show_super_sidebar?.to_s, endpoint: profile_preferences_url} }
 
   - if current_user_menu?(:sign_out)
     %li.divider
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 7156a0e5931..2c6ccb4abaf 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -29,7 +29,7 @@
         .navbar-collapse.gl-transition-medium.collapse.gl-mr-auto.global-search-container.hide-when-top-nav-responsive-open
           - search_menu_item = top_nav_search_menu_item_attrs
           %ul.nav.navbar-nav.gl-w-full.gl-align-items-center
-            %li.nav-item.header-search-new.gl-display-none.gl-lg-display-block.gl-w-full
+            %li.nav-item.header-search.gl-display-none.gl-lg-display-block.gl-w-full
               - unless current_controller?(:search)
                 = render 'layouts/header_search'
             %li.nav-item{ class: 'd-none d-sm-inline-block d-lg-none' }
diff --git a/app/views/layouts/header/_registration_enabled_callout.html.haml b/app/views/layouts/header/_registration_enabled_callout.html.haml
index 5c70136a932..ee4644e9ff0 100644
--- a/app/views/layouts/header/_registration_enabled_callout.html.haml
+++ b/app/views/layouts/header/_registration_enabled_callout.html.haml
@@ -6,9 +6,9 @@
                    data: { feature_id: Users::CalloutsHelper::REGISTRATION_ENABLED_CALLOUT,
                            dismiss_endpoint: callouts_path }},
   close_button_options: { data: { testid: 'close-registration-enabled-callout' }}) do |c|
-  = c.body do
+  - c.with_body do
     = _("Your GitLab instance allows anyone to register for an account, which is a security risk on public-facing GitLab instances. You should deactivate new sign ups if public users aren't expected to register for an account.")
-  = c.actions do
+  - c.with_actions do
     = render Pajamas::ButtonComponent.new(variant: :confirm, href: general_admin_application_settings_path(anchor: 'js-signup-settings')) do
       = _('Deactivate')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-close gl-ml-3'}) do
diff --git a/app/views/layouts/project.html.haml b/app/views/layouts/project.html.haml
index 31d02324e68..4ecae875056 100644
--- a/app/views/layouts/project.html.haml
+++ b/app/views/layouts/project.html.haml
@@ -10,6 +10,7 @@
 - content_for :flash_message do
   = dispensable_render_if_exists "projects/storage_enforcement_alert", context: @project
   = dispensable_render_if_exists "shared/namespace_storage_limit_alert", context: @project
+  = dispensable_render_if_exists "shared/namespace_combined_storage_users_alert", context: @project
 
 - content_for :project_javascripts do
   - project = @target_project || @project
@@ -22,6 +23,8 @@
   = render 'projects/invite_members_modal', project: @project
 
 = dispensable_render_if_exists "shared/web_hooks/web_hook_disabled_alert"
+= dispensable_render_if_exists "projects/code_suggestions_alert", project: @project
+= dispensable_render_if_exists "projects/code_suggestions_third_party_alert", project: @project
 = dispensable_render_if_exists "projects/free_user_cap_alert", project: @project
 = dispensable_render_if_exists 'shared/unlimited_members_during_trial_alert', resource: @project
 
diff --git a/app/views/layouts/terms.html.haml b/app/views/layouts/terms.html.haml
index 71c622d7a62..9a50e3e2eb2 100644
--- a/app/views/layouts/terms.html.haml
+++ b/app/views/layouts/terms.html.haml
@@ -17,9 +17,9 @@
         %div{ class: "#{container_class} limit-container-width" }
           .content{ id: "content-body" }
             = render Pajamas::CardComponent.new do |c|
-              = c.header do
+              - c.with_header do
                 = brand_header_logo({add_gitlab_black_text: true})
-              = c.body do
+              - c.with_body do
                 - if header_link?(:user_dropdown)
                   .navbar-collapse
                     %ul.nav.navbar-nav
diff --git a/app/views/notify/merge_when_pipeline_succeeds_email.html.haml b/app/views/notify/merge_when_pipeline_succeeds_email.html.haml
index f6b517d6e34..9c25567696f 100644
--- a/app/views/notify/merge_when_pipeline_succeeds_email.html.haml
+++ b/app/views/notify/merge_when_pipeline_succeeds_email.html.haml
@@ -78,7 +78,7 @@
                                   %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;" }
                                     %img{ alt: "✓", height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-check-green-inverted.gif'), style: "display:block;", width: "13" }
                                   %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;" }
-                                    %span= _('Merge request was scheduled to merge after pipeline succeeds')
+                                    %span= _('Merge request was set to auto-merge')
                       %tr.spacer
                         %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
                           &nbsp;
@@ -91,7 +91,7 @@
                                   %img{ src: image_url('mailers/approval/icon-merge-request-gray.gif'), style: "height:18px;width:18px;margin-bottom:-4px;", alt: "Merge request icon" }
                                   %span{ style: "font-weight: 600;color:#333333;" }= _('Merge request')
                                   %a{ href: merge_request_url(@merge_request), style: "font-weight: 600;color:#3777b0;text-decoration:none" }= @merge_request.to_reference
-                                  %span= _('was scheduled to merge after pipeline succeeds by')
+                                  %span= _('was set to auto-merge by')
                                   %img.avatar{ height: "24", src: avatar_icon_for_user(@mwps_set_by, 24, only_path: false), style: "border-radius:12px;margin:-7px 0 -7px 3px;", width: "24", alt: "Avatar" }
                                   %a.muted{ href: user_url(@mwps_set_by), style: "color:#333333;text-decoration:none;" }
                                     = @mwps_set_by.name
diff --git a/app/views/notify/merge_when_pipeline_succeeds_email.text.haml b/app/views/notify/merge_when_pipeline_succeeds_email.text.haml
index dbf742a5cbc..cbaa88befd2 100644
--- a/app/views/notify/merge_when_pipeline_succeeds_email.text.haml
+++ b/app/views/notify/merge_when_pipeline_succeeds_email.text.haml
@@ -1,4 +1,4 @@
-Merge request #{@merge_request.to_reference} was scheduled to merge after pipeline succeeds by #{sanitize_name(@mwps_set_by.name)}
+Merge request #{@merge_request.to_reference} was set to auto-merge by #{sanitize_name(@mwps_set_by.name)}
 
 Merge request url: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
 
diff --git a/app/views/organizations/organizations/directory.html.haml b/app/views/organizations/organizations/directory.html.haml
new file mode 100644
index 00000000000..1d2fb66112b
--- /dev/null
+++ b/app/views/organizations/organizations/directory.html.haml
@@ -0,0 +1,2 @@
+- breadcrumb_title @organization.name
+- page_title @organization.name
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 0505a205333..fec5d2d5ff5 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -4,14 +4,14 @@
 - if current_user.ldap_user?
   = render Pajamas::AlertComponent.new(alert_options: { class: 'gl-my-5' },
     dismissible: false) do |c|
-    = c.body do
+    - c.with_body do
       = s_('Profiles|Some options are unavailable for LDAP accounts')
 
 - if params[:two_factor_auth_enabled_successfully]
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_options: { class: 'gl-my-5' },
     close_button_options: { class: 'js-close-2fa-enabled-success-alert' }) do |c|
-    = c.body do
+    - c.with_body do
       = html_escape(_('You have set up 2FA for your account! If you lose access to your 2FA device, you can use your recovery codes to access your account. Alternatively, if you upload an SSH key, you can %{anchorOpen}use that key to generate additional recovery codes%{anchorClose}.')) % { anchorOpen: '<a href="%{href}">'.html_safe % { href: help_page_path('user/profile/account/two_factor_authentication', anchor: 'generate-new-recovery-codes-using-ssh') }, anchorClose: '</a>'.html_safe }
 
 .row.gl-mt-3.js-search-settings-section
@@ -52,43 +52,52 @@
       %p
         = s_('Profiles|Changing your username can have unintended side effects.')
         = succeed '.' do
-          = link_to s_('Profiles|Learn more'), help_page_path('user/profile/index', anchor: 'change-your-username'), target: '_blank', rel: 'noopener noreferrer'
+          = link_to _('Learn more'), help_page_path('user/profile/index', anchor: 'change-your-username'), target: '_blank', rel: 'noopener noreferrer'
     .col-lg-8
       - data = { initial_username: current_user.username, root_url: root_url, action_url: update_username_profile_path(format: :json) }
       #update-username{ data: data }
     .col-lg-12
       %hr
 
-.row.gl-mt-3.js-search-settings-section
-  .col-lg-4.profile-settings-sidebar
-    %h4.gl-mt-0.danger-title
-      = s_('Profiles|Delete account')
-  .col-lg-8
-    - if current_user.can_be_removed? && can?(current_user, :destroy_user, current_user)
+- if prevent_delete_account?
+  .row.gl-mt-3.js-search-settings-section
+    .col-lg-4.profile-settings-sidebar
+      %h4.gl-mt-0.danger-title
+        = s_('Profiles|Delete account')
+    .col-lg-8
       %p
-        = s_('Profiles|Deleting an account has the following effects:')
-      = render 'users/deletion_guidance', user: current_user
-
-      -# Delete button here
-      = render Pajamas::ButtonComponent.new(variant: :danger, button_options: { id: 'delete-account-button', disabled: true, data: { qa_selector: 'delete_account_button' }}) do
+        = s_('Profiles|Account deletion is not allowed by your administrator.')
+- else
+  .row.gl-mt-3.js-search-settings-section
+    .col-lg-4.profile-settings-sidebar
+      %h4.gl-mt-0.danger-title
         = s_('Profiles|Delete account')
-
-      #delete-account-modal{ data: { action_url: user_registration_path,
-        confirm_with_password: ('true' if current_user.confirm_deletion_with_password?),
-        username: current_user.username } }
-    - else
-      - if current_user.solo_owned_groups.present?
-        %p
-          = s_('Profiles|Your account is currently an owner in these groups:')
-          %strong= current_user.solo_owned_groups.map(&:name).join(', ')
-        %p
-          = s_('Profiles|You must transfer ownership or delete these groups before you can delete your account.')
-      - elsif !current_user.can_remove_self?
-        %p
-          = s_('Profiles|GitLab is unable to verify your identity automatically. For security purposes, you must set a password by %{openingTag}resetting your password%{closingTag} to delete your account.').html_safe % { openingTag: "<a href='#{reset_profile_password_path}' rel=\"nofollow\" data-method=\"put\">".html_safe, closingTag: '</a>'.html_safe}
+    .col-lg-8
+      - if current_user.can_be_removed? && can?(current_user, :destroy_user, current_user)
         %p
-          = s_('Profiles|If after setting a password, the option to delete your account is still not available, please %{link_start}submit a request%{link_end} to begin the account deletion process.').html_safe % { link_start: '<a href="https://support.gitlab.io/account-deletion/" rel="nofollow noreferrer noopener" target="_blank">'.html_safe, link_end: '</a>'.html_safe}
+          = s_('Profiles|Deleting an account has the following effects:')
+        = render 'users/deletion_guidance', user: current_user
+
+        -# Delete button here
+        = render Pajamas::ButtonComponent.new(variant: :danger, button_options: { id: 'delete-account-button', disabled: true, data: { qa_selector: 'delete_account_button' }}) do
+          = s_('Profiles|Delete account')
+
+        #delete-account-modal{ data: { action_url: user_registration_path,
+          confirm_with_password: ('true' if current_user.confirm_deletion_with_password?),
+          username: current_user.username } }
       - else
-        %p
-          = s_("Profiles|You don't have access to delete this user.")
+        - if current_user.solo_owned_groups.present?
+          %p
+            = s_('Profiles|Your account is currently an owner in these groups:')
+            %strong= current_user.solo_owned_groups.map(&:name).join(', ')
+          %p
+            = s_('Profiles|You must transfer ownership or delete these groups before you can delete your account.')
+        - elsif !current_user.can_remove_self?
+          %p
+            = s_('Profiles|GitLab is unable to verify your identity automatically. For security purposes, you must set a password by %{openingTag}resetting your password%{closingTag} to delete your account.').html_safe % { openingTag: "<a href='#{reset_profile_password_path}' rel=\"nofollow\" data-method=\"put\">".html_safe, closingTag: '</a>'.html_safe}
+          %p
+            = s_('Profiles|If after setting a password, the option to delete your account is still not available, please %{link_start}submit a request%{link_end} to begin the account deletion process.').html_safe % { link_start: '<a href="https://support.gitlab.io/account-deletion/" rel="nofollow noreferrer noopener" target="_blank">'.html_safe, link_end: '</a>'.html_safe}
+        - else
+          %p
+            = s_("Profiles|You don't have access to delete this user.")
 .gl-mb-3
diff --git a/app/views/profiles/active_sessions/index.html.haml b/app/views/profiles/active_sessions/index.html.haml
index 54736153223..1952655937e 100644
--- a/app/views/profiles/active_sessions/index.html.haml
+++ b/app/views/profiles/active_sessions/index.html.haml
@@ -11,6 +11,6 @@
     .gl-mb-3
 
       = render Pajamas::CardComponent.new(card_options: { class: 'gl-border-0' }, body_options: { class: 'gl-p-0' }) do |c|
-        - c.body do
+        - c.with_body do
           %ul.list-group.list-group-flush
             = render partial: 'profiles/active_sessions/active_session', collection: @sessions
diff --git a/app/views/profiles/chat_names/new.html.haml b/app/views/profiles/chat_names/new.html.haml
index bc30ccc5821..b0a694f9bc6 100644
--- a/app/views/profiles/chat_names/new.html.haml
+++ b/app/views/profiles/chat_names/new.html.haml
@@ -3,9 +3,9 @@
 %main{ role: 'main' }
   .gl-max-w-80.gl-mx-auto.gl-mt-6
     = render Pajamas::CardComponent.new do |c|
-      - c.header do
+      - c.with_header do
         %h4.gl-m-0= sprintf(s_('Integrations|Authorize %{integration_name} (%{user}) to use your account?'), { user: @chat_name_params[:chat_name], integration_name: @integration_name })
-      - c.body do
+      - c.with_body do
         %p
           = sprintf(s_('Integrations|An application called %{integration_name} is requesting access to your GitLab account. This application was created by GitLab Inc.'), { integration_name: @integration_name })
         %p
@@ -16,7 +16,7 @@
             %li= s_('SlackIntegration|Run ChatOps jobs.')
         %p.gl-mb-0
           = s_("SlackIntegration|You don't have to reauthorize this application if the permission scope changes in future releases.")
-      - c.footer do
+      - c.with_footer do
         .gl-display-flex
           = form_tag profile_chat_names_path, method: :post do
             = hidden_field_tag :token, @chat_name_token.token
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index 3c05502be57..4f3d97fb90c 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -2,9 +2,9 @@
 .row.gl-mt-3
   .col-md-4
     = render Pajamas::CardComponent.new(body_options: { class: 'gl-py-0'}) do |c|
-      - c.header do
+      - c.with_header do
         = _('SSH Key')
-      - c.body do
+      - c.with_body do
         %ul.content-list
           %li
             %span.light= _('Title:')
@@ -27,9 +27,9 @@
     %pre.well-pre
       = @key.key
     = render Pajamas::CardComponent.new(body_options: { class: 'gl-py-0'}) do |c|
-      - c.header do
+      - c.with_header do
         = _('Fingerprints')
-      - c.body do
+      - c.with_body do
         %ul.content-list
           %li
             %span.light= 'MD5:'
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index a632c450eda..06d37787d2e 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -5,7 +5,7 @@
 %div
   - if @user.errors.any?
     = render Pajamas::AlertComponent.new(variant: :danger) do |c|
-      = c.body do
+      - c.with_body do
         %ul
           - @user.errors.full_messages.each do |msg|
             %li= msg
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 7f8858411ca..a085840ee84 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -90,6 +90,8 @@
         .form-text.text-muted
           = s_('Preferences|Choose what content you want to see on a project’s overview page.')
       .form-group
+        = f.gitlab_ui_checkbox_component :project_shortcut_buttons, s_('Preferences|Show shortcut buttons above files on project overview')
+      .form-group
         = f.gitlab_ui_checkbox_component :render_whitespace_in_code, s_('Preferences|Render whitespace characters in the Web IDE')
       .form-group
         = f.gitlab_ui_checkbox_component :show_whitespace_in_diffs, s_('Preferences|Show whitespace changes in diffs')
@@ -168,6 +170,7 @@
         .form-group
           = f.gitlab_ui_checkbox_component :enabled_following,
           s_('Preferences|Enable follow users')
-
+  = render_if_exists 'profiles/preferences/code_suggestions_settings', form: f
+  = render_if_exists 'profiles/preferences/zoekt_settings', form: f
 
   #js-profile-preferences-app{ data: data_attributes }
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 930f4f5c397..1a932ed7b35 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -4,195 +4,198 @@
 - gravatar_link = link_to Gitlab.config.gravatar.host, 'https://' + Gitlab.config.gravatar.host
 - @force_desktop_expanded_sidebar = true
 
-= gitlab_ui_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user js-edit-user gl-mt-3 js-quick-submit gl-show-field-errors js-password-prompt-form', remote: true }, authenticity_token: true do |f|
-  .row.js-search-settings-section
-    .col-lg-4.profile-settings-sidebar
-      %h4.gl-mt-0
-        = s_("Profiles|Public avatar")
-      %p
-        - if @user.avatar?
-          - if gravatar_enabled?
-            = s_("Profiles|You can change your avatar here or remove the current avatar to revert to %{gravatar_link}").html_safe % { gravatar_link: gravatar_link }
-          - else
-            = s_("Profiles|You can change your avatar here")
-        - else
-          - if gravatar_enabled?
-            = s_("Profiles|You can upload your avatar here or change it at %{gravatar_link}").html_safe % { gravatar_link: gravatar_link }
+- if Feature.enabled?(:edit_user_profile_vue, current_user)
+  .js-user-profile
+- else
+  = gitlab_ui_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user js-edit-user gl-mt-3 js-quick-submit gl-show-field-errors js-password-prompt-form', remote: true }, authenticity_token: true do |f|
+    .row.js-search-settings-section
+      .col-lg-4.profile-settings-sidebar
+        %h4.gl-mt-0
+          = s_("Profiles|Public avatar")
+        %p
+          - if @user.avatar?
+            - if gravatar_enabled?
+              = s_("Profiles|You can change your avatar here or remove the current avatar to revert to %{gravatar_link}").html_safe % { gravatar_link: gravatar_link }
+            - else
+              = s_("Profiles|You can change your avatar here")
           - else
-            = s_("Profiles|You can upload your avatar here")
-        - if current_appearance&.profile_image_guidelines?
-          .md
-            = brand_profile_image_guidelines
-    .col-lg-8
-      .avatar-image
-        = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
-          = render Pajamas::AvatarComponent.new(@user, size: 96, alt: "", class: 'gl-float-left gl-mr-5')
-      %h5.gl-mt-0= s_("Profiles|Upload new avatar")
-      .gl-display-flex.gl-align-items-center.gl-my-3
-        = render Pajamas::ButtonComponent.new(button_options: { class: 'js-choose-user-avatar-button' }) do
-          = s_("Profiles|Choose file...")
-        %span.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen.")
-        = f.file_field :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
-      .gl-text-gray-500= s_("Profiles|The maximum file size allowed is 200KB.")
-      - if @user.avatar?
-        = render Pajamas::ButtonComponent.new(variant: :danger,
-          category: :secondary,
-          href: profile_avatar_path,
-          button_options: { class: 'gl-mt-3', data: { confirm: s_("Profiles|Avatar will be removed. Are you sure?") } },
-          method: :delete) do
-          = s_("Profiles|Remove avatar")
-    .col-lg-12
-      %hr
-  .row.js-search-settings-section
-    .col-lg-4.profile-settings-sidebar
-      %h4.gl-mt-0= s_("Profiles|Current status")
-      %p= s_("Profiles|This emoji and message will appear on your profile and throughout the interface.")
-    .col-lg-8
-      #js-user-profile-set-status-form
-        = f.fields_for :status, @user.status do |status_form|
-          = status_form.hidden_field :emoji, data: { js_name: 'emoji' }
-          = status_form.hidden_field :message, data: { js_name: 'message' }
-          = status_form.hidden_field :availability, data: { js_name: 'availability' }
-          = status_form.hidden_field :clear_status_after,
-            value: user_clear_status_at(@user),
-            data: { js_name: 'clearStatusAfter' }
-    .col-lg-12
-      %hr
-  .row.user-time-preferences.js-search-settings-section
-    .col-lg-4.profile-settings-sidebar
-      %h4.gl-mt-0= s_("Profiles|Time settings")
-      %p= s_("Profiles|Set your local time zone.")
-    .col-lg-8
-      = f.label :user_timezone, _("Time zone")
-      .js-timezone-dropdown{ data: { timezone_data: timezone_data.to_json, initial_value: @user.timezone, name: 'user[timezone]' } }
-    .col-lg-12
-      %hr
-  .row.js-search-settings-section
-    .col-lg-4.profile-settings-sidebar
-      %h4.gl-mt-0
-        = s_("Profiles|Main settings")
-      %p
-        = s_("Profiles|This information will appear on your profile.")
-        - if current_user.ldap_user?
-          = s_("Profiles|Some options are unavailable for LDAP accounts")
-    .col-lg-8
-      .row
-        .form-group.gl-form-group.col-md-9.rspec-full-name
-          = render 'profiles/name', form: f, user: @user
-        .form-group.gl-form-group.col-md-3
-          = f.label :id, s_('Profiles|User ID')
-          = f.text_field :id, class: 'gl-form-input form-control', readonly: true
-      .form-group.gl-form-group
-        = f.label :pronouns, s_('Profiles|Pronouns')
-        = f.text_field :pronouns, class: 'gl-form-input form-control gl-md-form-input-lg'
-        %small.form-text.text-gl-muted
-          = s_("Profiles|Enter your pronouns to let people know how to refer to you.")
-      .form-group.gl-form-group
-        = f.label :pronunciation, s_('Profiles|Pronunciation')
-        = f.text_field :pronunciation, class: 'gl-form-input form-control gl-md-form-input-lg'
-        %small.form-text.text-gl-muted
-          = s_("Profiles|Enter how your name is pronounced to help people address you correctly.")
-      = render_if_exists 'profiles/extra_settings', form: f
-      = render_if_exists 'profiles/email_settings', form: f
-      .form-group.gl-form-group
-        = f.label :skype
-        = f.text_field :skype, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|username")
-      .form-group.gl-form-group
-        = f.label :linkedin
-        = f.text_field :linkedin, class: 'gl-form-input form-control gl-md-form-input-lg'
-        %small.form-text.text-gl-muted
-          = s_("Profiles|Your LinkedIn profile name from linkedin.com/in/profilename")
-      .form-group.gl-form-group
-        = f.label :twitter
-        = f.text_field :twitter, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|@username")
-      .form-group.gl-form-group
-        - external_accounts_help_url = help_page_path('user/profile/index', anchor: 'add-external-accounts-to-your-user-profile-page')
-        - external_accounts_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: external_accounts_help_url }
-        - external_accounts_docs_link = s_('Profiles|Your Discord user ID. %{external_accounts_link_start}Learn more.%{external_accounts_link_end}').html_safe % { external_accounts_link_start: external_accounts_link_start, external_accounts_link_end: '</a>'.html_safe }
-        - min_discord_length = 17
-        - max_discord_length = 20
-        = f.label :discord
-        = f.text_field :discord,
-          class: 'gl-form-input form-control gl-md-form-input-lg js-validate-length',
-          placeholder: s_("Profiles|User ID"),
-          data: { min_length: min_discord_length,
-          min_length_message: s_('Profiles|Discord ID is too short (minimum is %{min_length} characters).') % { min_length: min_discord_length },
-          max_length: max_discord_length,
-          max_length_message: s_('Profiles|Discord ID is too long (maximum is %{max_length} characters).') % { max_length: max_discord_length },
-          allow_empty: true}
-        %small.form-text.text-gl-muted
-          = external_accounts_docs_link
+            - if gravatar_enabled?
+              = s_("Profiles|You can upload your avatar here or change it at %{gravatar_link}").html_safe % { gravatar_link: gravatar_link }
+            - else
+              = s_("Profiles|You can upload your avatar here")
+          - if current_appearance&.profile_image_guidelines?
+            .md
+              = brand_profile_image_guidelines
+      .col-lg-8
+        .avatar-image
+          = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
+            = render Pajamas::AvatarComponent.new(@user, size: 96, alt: "", class: 'gl-float-left gl-mr-5')
+        %h5.gl-mt-0= s_("Profiles|Upload new avatar")
+        .gl-display-flex.gl-align-items-center.gl-my-3
+          = render Pajamas::ButtonComponent.new(button_options: { class: 'js-choose-user-avatar-button' }) do
+            = s_("Profiles|Choose file...")
+          %span.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen.")
+          = f.file_field :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
+        .gl-text-gray-500= s_("Profiles|The maximum file size allowed is 200KB.")
+        - if @user.avatar?
+          = render Pajamas::ButtonComponent.new(variant: :danger,
+            category: :secondary,
+            href: profile_avatar_path,
+            button_options: { class: 'gl-mt-3', data: { confirm: s_("Profiles|Avatar will be removed. Are you sure?") } },
+            method: :delete) do
+            = s_("Profiles|Remove avatar")
+      .col-lg-12
+        %hr
+    .row.js-search-settings-section
+      .col-lg-4.profile-settings-sidebar
+        %h4.gl-mt-0= s_("Profiles|Current status")
+        %p= s_("Profiles|This emoji and message will appear on your profile and throughout the interface.")
+      .col-lg-8
+        #js-user-profile-set-status-form
+          = f.fields_for :status, @user.status do |status_form|
+            = status_form.hidden_field :emoji, data: { js_name: 'emoji' }
+            = status_form.hidden_field :message, data: { js_name: 'message' }
+            = status_form.hidden_field :availability, data: { js_name: 'availability' }
+            = status_form.hidden_field :clear_status_after,
+              value: user_clear_status_at(@user),
+              data: { js_name: 'clearStatusAfter' }
+      .col-lg-12
+        %hr
+    .row.user-time-preferences.js-search-settings-section
+      .col-lg-4.profile-settings-sidebar
+        %h4.gl-mt-0= s_("Profiles|Time settings")
+        %p= s_("Profiles|Set your local time zone.")
+      .col-lg-8
+        = f.label :user_timezone, _("Time zone")
+        .js-timezone-dropdown{ data: { timezone_data: timezone_data.to_json, initial_value: @user.timezone, name: 'user[timezone]' } }
+      .col-lg-12
+        %hr
+    .row.js-search-settings-section
+      .col-lg-4.profile-settings-sidebar
+        %h4.gl-mt-0
+          = s_("Profiles|Main settings")
+        %p
+          = s_("Profiles|This information will appear on your profile.")
+          - if current_user.ldap_user?
+            = s_("Profiles|Some options are unavailable for LDAP accounts")
+      .col-lg-8
+        .row
+          .form-group.gl-form-group.col-md-9.rspec-full-name
+            = render 'profiles/name', form: f, user: @user
+          .form-group.gl-form-group.col-md-3
+            = f.label :id, s_('Profiles|User ID')
+            = f.text_field :id, class: 'gl-form-input form-control', readonly: true
+        .form-group.gl-form-group
+          = f.label :pronouns, s_('Profiles|Pronouns')
+          = f.text_field :pronouns, class: 'gl-form-input form-control gl-md-form-input-lg'
+          %small.form-text.text-gl-muted
+            = s_("Profiles|Enter your pronouns to let people know how to refer to you.")
+        .form-group.gl-form-group
+          = f.label :pronunciation, s_('Profiles|Pronunciation')
+          = f.text_field :pronunciation, class: 'gl-form-input form-control gl-md-form-input-lg'
+          %small.form-text.text-gl-muted
+            = s_("Profiles|Enter how your name is pronounced to help people address you correctly.")
+        = render_if_exists 'profiles/extra_settings', form: f
+        = render_if_exists 'profiles/email_settings', form: f
+        .form-group.gl-form-group
+          = f.label :skype
+          = f.text_field :skype, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|username")
+        .form-group.gl-form-group
+          = f.label :linkedin
+          = f.text_field :linkedin, class: 'gl-form-input form-control gl-md-form-input-lg'
+          %small.form-text.text-gl-muted
+            = s_("Profiles|Your LinkedIn profile name from linkedin.com/in/profilename")
+        .form-group.gl-form-group
+          = f.label :twitter
+          = f.text_field :twitter, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|@username")
+        .form-group.gl-form-group
+          - external_accounts_help_url = help_page_path('user/profile/index', anchor: 'add-external-accounts-to-your-user-profile-page')
+          - external_accounts_link = link_to '', external_accounts_help_url, target: "_blank", rel: "noopener noreferrer"
+          - external_accounts_docs_link = safe_format(s_('Profiles|Your Discord user ID. %{external_accounts_link_start}Learn more.%{external_accounts_link_end}'), tag_pair(external_accounts_link, :external_accounts_link_start, :external_accounts_link_end))
+          - min_discord_length = 17
+          - max_discord_length = 20
+          = f.label :discord
+          = f.text_field :discord,
+            class: 'gl-form-input form-control gl-md-form-input-lg js-validate-length',
+            placeholder: s_("Profiles|User ID"),
+            data: { min_length: min_discord_length,
+            min_length_message: s_('Profiles|Discord ID is too short (minimum is %{min_length} characters).') % { min_length: min_discord_length },
+            max_length: max_discord_length,
+            max_length_message: s_('Profiles|Discord ID is too long (maximum is %{max_length} characters).') % { max_length: max_discord_length },
+            allow_empty: true}
+          %small.form-text.text-gl-muted
+            = external_accounts_docs_link
 
-      .form-group.gl-form-group
-        = f.label :website_url, s_('Profiles|Website url')
-        = f.text_field :website_url, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|https://website.com")
-      .form-group.gl-form-group
-        = f.label :location, s_('Profiles|Location')
-        - if @user.read_only_attribute?(:location)
-          = f.text_field :location, class: 'gl-form-input form-control gl-md-form-input-lg', readonly: true
+        .form-group.gl-form-group
+          = f.label :website_url, s_('Profiles|Website url')
+          = f.text_field :website_url, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|https://website.com")
+        .form-group.gl-form-group
+          = f.label :location, s_('Profiles|Location')
+          - if @user.read_only_attribute?(:location)
+            = f.text_field :location, class: 'gl-form-input form-control gl-md-form-input-lg', readonly: true
+            %small.form-text.text-gl-muted
+              = s_("Profiles|Your location was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:location) }
+          - else
+            = f.text_field :location, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|City, country")
+        .form-group.gl-form-group
+          = f.label :job_title, s_('Profiles|Job title')
+          = f.text_field :job_title, class: 'gl-form-input form-control gl-md-form-input-lg'
+        .form-group.gl-form-group
+          = f.label :organization, s_('Profiles|Organization')
+          = f.text_field :organization, class: 'gl-form-input form-control gl-md-form-input-lg'
+          %small.form-text.text-gl-muted
+            = s_("Profiles|Who you represent or work for.")
+        .form-group.gl-form-group
+          = f.label :bio, s_('Profiles|Bio')
+          = f.text_area :bio, class: 'gl-form-input gl-form-textarea form-control', rows: 4, maxlength: 250
           %small.form-text.text-gl-muted
-            = s_("Profiles|Your location was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:location) }
-        - else
-          = f.text_field :location, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|City, country")
-      .form-group.gl-form-group
-        = f.label :job_title, s_('Profiles|Job title')
-        = f.text_field :job_title, class: 'gl-form-input form-control gl-md-form-input-lg'
-      .form-group.gl-form-group
-        = f.label :organization, s_('Profiles|Organization')
-        = f.text_field :organization, class: 'gl-form-input form-control gl-md-form-input-lg'
-        %small.form-text.text-gl-muted
-          = s_("Profiles|Who you represent or work for.")
-      .form-group.gl-form-group
-        = f.label :bio, s_('Profiles|Bio')
-        = f.text_area :bio, class: 'gl-form-input gl-form-textarea form-control', rows: 4, maxlength: 250
-        %small.form-text.text-gl-muted
-          = s_("Profiles|Tell us about yourself in fewer than 250 characters.")
-      %hr
-      %fieldset.form-group.gl-form-group
-        %legend.col-form-label.col-form-label
-          = _('Private profile')
-        - private_profile_label = s_("Profiles|Don't display activity-related personal information on your profile.")
-        - private_profile_help_link = link_to sprite_icon('question-o'), help_page_path('user/profile/index.md', anchor: 'make-your-user-profile-page-private')
-        = f.gitlab_ui_checkbox_component :private_profile, '%{private_profile_label} %{private_profile_help_link}'.html_safe % { private_profile_label: private_profile_label, private_profile_help_link: private_profile_help_link.html_safe }
-      %fieldset.form-group.gl-form-group
-        %legend.col-form-label.col-form-label
-          = s_("Profiles|Private contributions")
-        = f.gitlab_ui_checkbox_component :include_private_contributions,
-          s_('Profiles|Include private contributions on your profile'),
-          help_text: s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information.")
-      %fieldset.form-group.gl-form-group
-        %legend.col-form-label.col-form-label
-          = s_("Profiles|Achievements")
-        = f.gitlab_ui_checkbox_component :achievements_enabled,
-          s_('Profiles|Display achievements on your profile')
-  .row.js-hide-when-nothing-matches-search
-    .col-lg-12
-      %hr
-      = f.submit s_("Profiles|Update profile settings"), class: 'gl-mr-3 js-password-prompt-btn', pajamas_button: true
-      = render Pajamas::ButtonComponent.new(href: user_path(current_user)) do
-        = s_('TagsPage|Cancel')
+            = s_("Profiles|Tell us about yourself in fewer than 250 characters.")
+        %hr
+        %fieldset.form-group.gl-form-group
+          %legend.col-form-label.col-form-label
+            = _('Private profile')
+          - private_profile_label = s_("Profiles|Don't display activity-related personal information on your profile.")
+          - private_profile_help_link = link_to sprite_icon('question-o'), help_page_path('user/profile/index.md', anchor: 'make-your-user-profile-page-private')
+          = f.gitlab_ui_checkbox_component :private_profile, '%{private_profile_label} %{private_profile_help_link}'.html_safe % { private_profile_label: private_profile_label, private_profile_help_link: private_profile_help_link.html_safe }
+        %fieldset.form-group.gl-form-group
+          %legend.col-form-label.col-form-label
+            = s_("Profiles|Private contributions")
+          = f.gitlab_ui_checkbox_component :include_private_contributions,
+            s_('Profiles|Include private contributions on your profile'),
+            help_text: s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information.")
+        %fieldset.form-group.gl-form-group
+          %legend.col-form-label.col-form-label
+            = s_("Profiles|Achievements")
+          = f.gitlab_ui_checkbox_component :achievements_enabled,
+            s_('Profiles|Display achievements on your profile')
+    .row.js-hide-when-nothing-matches-search
+      .col-lg-12
+        %hr
+        = f.submit s_("Profiles|Update profile settings"), class: 'gl-mr-3 js-password-prompt-btn', pajamas_button: true
+        = render Pajamas::ButtonComponent.new(href: user_path(current_user)) do
+          = s_('TagsPage|Cancel')
 
-#password-prompt-modal
+  #password-prompt-modal
 
-.modal.modal-profile-crop{ data: { cropper_css_path: ActionController::Base.helpers.stylesheet_path('lazy_bundles/cropper.css') } }
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %h4.modal-title
-          = s_("Profiles|Position and size your new avatar")
-        = render Pajamas::ButtonComponent.new(category: :tertiary,
-          icon: 'close',
-          button_options: { class: 'close', "data-dismiss": "modal", "aria-label" => _("Close") })
-      .modal-body
-        .profile-crop-image-container
-          %img.modal-profile-crop-image{ alt: s_("Profiles|Avatar cropper") }
-        .gl-text-center.gl-mt-4
-          .btn-group
-            = render Pajamas::ButtonComponent.new(icon: 'search-minus',
-              button_options: {data: { method: 'zoom', option: '-0.1' }})
-            = render Pajamas::ButtonComponent.new(icon: 'search-plus',
-              button_options: {data: { method: 'zoom', option: '0.1' }})
-      .modal-footer
-        = render Pajamas::ButtonComponent.new(variant: :confirm,
-          button_options: { class: 'js-upload-user-avatar'}) do
-          = s_("Profiles|Set new profile picture")
+  .modal.modal-profile-crop{ data: { cropper_css_path: ActionController::Base.helpers.stylesheet_path('lazy_bundles/cropper.css') } }
+    .modal-dialog
+      .modal-content
+        .modal-header
+          %h4.modal-title
+            = s_("Profiles|Position and size your new avatar")
+          = render Pajamas::ButtonComponent.new(category: :tertiary,
+            icon: 'close',
+            button_options: { class: 'close', "data-dismiss": "modal", "aria-label" => _("Close") })
+        .modal-body
+          .profile-crop-image-container
+            %img.modal-profile-crop-image{ alt: s_("Profiles|Avatar cropper") }
+          .gl-text-center.gl-mt-4
+            .btn-group
+              = render Pajamas::ButtonComponent.new(icon: 'search-minus',
+                button_options: {data: { method: 'zoom', option: '-0.1' }})
+              = render Pajamas::ButtonComponent.new(icon: 'search-plus',
+                button_options: {data: { method: 'zoom', option: '0.1' }})
+        .modal-footer
+          = render Pajamas::ButtonComponent.new(variant: :confirm,
+            button_options: { class: 'js-upload-user-avatar'}) do
+            = s_("Profiles|Set new profile picture")
diff --git a/app/views/profiles/slacks/edit.html.haml b/app/views/profiles/slacks/edit.html.haml
new file mode 100644
index 00000000000..20274735650
--- /dev/null
+++ b/app/views/profiles/slacks/edit.html.haml
@@ -0,0 +1,6 @@
+- add_to_breadcrumbs _('Profile'), profile_path
+- @hide_top_links = true
+- @content_class = 'limit-container-width'
+- page_title s_('SlackIntegration|GitLab for Slack')
+
+.js-gitlab-slack-application{ data: gitlab_slack_application_data(@projects) }
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 9cc7f6bdd49..461164e1ae9 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -24,7 +24,7 @@
               = raw @qr_code
           .col-md-8
             = render Pajamas::CardComponent.new do |c|
-              - c.body do
+              - c.with_body do
                 %p.gl-mt-0.gl-mb-3.gl-font-weight-bold
                   = _("Can't scan the code?")
                 %p.gl-mt-0.gl-mb-3
@@ -42,7 +42,7 @@
               variant: :danger,
               alert_options: { class: 'gl-mb-3' },
               dismissible: false) do |c|
-              = c.body do
+              - c.with_body do
                 = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
 
           - if current_password_required?
@@ -130,7 +130,7 @@
             variant: :danger,
             alert_options: { class: 'gl-mb-3' },
             dismissible: false) do |c|
-            = c.body do
+            - c.with_body do
               = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
         .js-manage-two-factor-form{ data: { current_password_required: current_password_required?.to_s, profile_two_factor_auth_path: profile_two_factor_auth_path, profile_two_factor_auth_method: 'delete', codes_profile_two_factor_auth_path: codes_profile_two_factor_auth_path, codes_profile_two_factor_auth_method: 'post' } }
       - else
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 5c7f83fc579..b5bbb57d58f 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -2,6 +2,7 @@
 - is_project_overview = local_assigns.fetch(:is_project_overview, false)
 - ref = local_assigns.fetch(:ref) { current_ref }
 - project = local_assigns.fetch(:project) { @project }
+- has_project_shortcut_buttons = !current_user || current_user.project_shortcut_buttons
 - add_page_startup_api_call logs_file_project_ref_path(@project, ref, @path, format: "json", offset: 0)
 - if readme_path = @project.repository.readme_path
   - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, readme_path), viewer: "rich", format: "json")
@@ -10,7 +11,8 @@
   .info-well.gl-display-none.gl-sm-display-flex.project-last-commit.gl-flex-direction-column.gl-mt-5
     #js-last-commit.gl-m-auto
       = gl_loading_icon(size: 'md')
-    #js-code-owners{ data: { branch: @ref, can_view_branch_rules: can_view_branch_rules?, branch_rules_path: branch_rules_path } }
+    - if project.licensed_feature_available?(:code_owners)
+      #js-code-owners{ data: { branch: @ref, can_view_branch_rules: can_view_branch_rules?, branch_rules_path: branch_rules_path } }
 
   .nav-block.gl-display-flex.gl-xs-flex-direction-column.gl-align-items-stretch
     = render 'projects/tree/tree_header', tree: @tree, is_project_overview: is_project_overview
@@ -18,7 +20,7 @@
   - if project.forked?
     #js-fork-info{ data: vue_fork_divergence_data(project, ref) }
 
-  - if is_project_overview
+  - if is_project_overview && has_project_shortcut_buttons
     .project-buttons.gl-mb-5.js-show-on-project-root{ data: { qa_selector: 'project_buttons' } }
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout), project_buttons: true
 
diff --git a/app/views/projects/_merge_request_merge_method_settings.html.haml b/app/views/projects/_merge_request_merge_method_settings.html.haml
index f205fe2b9bf..dd32d3f9d92 100644
--- a/app/views/projects/_merge_request_merge_method_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_method_settings.html.haml
@@ -14,6 +14,10 @@
 - ffTrains = s_('ProjectSettings|If merge trains are enabled, merging is only possible if the branch can be rebased without conflicts.')
 - ffTrainsHelp = link_to s_('ProjectSettings|What are merge trains?'), help_page_path('ci/pipelines/merge_trains.md', anchor: 'enable-merge-trains'), target: '_blank', rel: 'noopener noreferrer'
 
+- ffTrainsWithFastForward = (noMergeCommit + "<br />" + ffOnly + "<br />" + ffConflictRebase + "<br />" + ffTrains + " " + ffTrainsHelp).html_safe
+- ffTrainsWithoutFastForward = (noMergeCommit + "<br />" + ffOnly + "<br />" + ffConflictRebase).html_safe
+- ffTrainsHelpFullHelpText = Feature.enabled?(:fast_forward_merge_trains_support) ? ffTrainsWithFastForward : ffTrainsWithoutFastForward
+
 .form-group
   %b= s_('ProjectSettings|Merge method')
   %p.text-secondary
@@ -30,5 +34,5 @@
   = form.gitlab_ui_radio_component :merge_method,
     :ff,
     labelFastForward,
-    help_text: (noMergeCommit + "<br />" + ffOnly + "<br />" + ffConflictRebase + "<br />" + ffTrains + " " + ffTrainsHelp).html_safe,
+    help_text: ffTrainsHelpFullHelpText,
     radio_options: { data: { qa_selector: 'merge_ff_radio' } }
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 70a2476c8e5..6049d1cc110 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -48,7 +48,7 @@
   variant: :success) do |c|
   - c.with_body do
     - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/profile/index', anchor: 'add-details-to-your-profile-with-a-readme') }
-    = html_escape(_('%{project_path} is a project that you can use to add a README to your GitLab profile. Create a public project and initialize the repository with a README to get started. %{help_link_start}Learn more.%{help_link_end}')) % { project_path: "<strong>#{current_user.username} / #{current_user.username}</strong>".html_safe, help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
+    = html_escape(_('%{project_path} is a project that you can use to add a README to your GitLab profile. Create a public project and initialize the repository with a README to get started. %{help_link_start}Learn more%{help_link_end}.')) % { project_path: "<strong>#{current_user.username} / #{current_user.username}</strong>".html_safe, help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
 
 - if include_description
   .form-group
diff --git a/app/views/projects/_service_desk_settings.html.haml b/app/views/projects/_service_desk_settings.html.haml
index 7654677d8a8..14991ce3824 100644
--- a/app/views/projects/_service_desk_settings.html.haml
+++ b/app/views/projects/_service_desk_settings.html.haml
@@ -10,6 +10,7 @@
     - if ::Gitlab::ServiceDesk.supported?
       .js-service-desk-setting-root{ data: { endpoint: project_service_desk_path(@project),
         enabled: "#{@project.service_desk_enabled}",
+        issue_tracker_enabled: "#{@project.project_feature.issues_enabled?}",
         incoming_email: (@project.service_desk_incoming_address if @project.service_desk_enabled),
         custom_email: (@project.service_desk_custom_address if @project.service_desk_enabled),
         custom_email_enabled: "#{Gitlab::Email::ServiceDeskEmail.enabled?}",
diff --git a/app/views/projects/blame/_page.html.haml b/app/views/projects/blame/_page.html.haml
index 92fb99c30a6..10f27c3f620 100644
--- a/app/views/projects/blame/_page.html.haml
+++ b/app/views/projects/blame/_page.html.haml
@@ -7,7 +7,7 @@
     - line_count = blame_group[:lines].count
 
     .tr{ class: ('last-row' if groups_length == index) }
-      .td.blame-commit.commit{ class: commit_data.age_map_class }
+      .td.blame-commit.commit.gl-py-3.gl-px-4{ class: commit_data.age_map_class }
         = commit_data.author_avatar
 
         .commit-row-title
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 453a60a62f4..e5566882371 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -2,7 +2,8 @@
 - project = @project.present(current_user: current_user)
 - ref = local_assigns[:ref] || @ref
 - expanded = params[:expanded].present?
-- if blob.rich_viewer
+-# If the blob has a RichViewer we preload the content except for GeoJSON since it is handled by Vue
+- if blob.rich_viewer && blob.extension != 'geojson'
   - add_page_startup_api_call local_assigns.fetch(:viewer_url) { url_for(safe_params.merge(viewer: blob.rich_viewer.type, format: :json)) }
 
 .info-well.d-none.d-sm-block
@@ -10,7 +11,8 @@
     %ul.blob-commit-info
       = render 'projects/commits/commit', commit: @last_commit, project: @project, ref: @ref
 
-  #js-code-owners{ data: { blob_path: blob.path, project_path: @project.full_path, branch: @ref, can_view_branch_rules: can_view_branch_rules?, branch_rules_path: branch_rules_path } }
+  - if project.licensed_feature_available?(:code_owners)
+    #js-code-owners{ data: { blob_path: blob.path, project_path: @project.full_path, branch: @ref, can_view_branch_rules: can_view_branch_rules?, branch_rules_path: branch_rules_path } }
   = render "projects/blob/auxiliary_viewer", blob: blob
 
 - if project.forked?
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 621cd251bdf..68520d36858 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -26,7 +26,10 @@
           dismiss_key: @project.id,
           human_access: human_access } }
 
-    - unless Feature.enabled?(:source_editor_toolbar, current_user)
+    - if Feature.enabled?(:source_editor_toolbar, current_user)
+      #editor-toolbar
+
+    - else
       .file-buttons.gl-display-flex.gl-align-items-center.gl-justify-content-end
         - if is_markdown
           .md-header.gl-display-flex.gl-px-2.gl-rounded-base.gl-mx-2.gl-mt-2
@@ -40,8 +43,6 @@
             = _("Soft wrap")
 
   .file-editor.code
-    - if Feature.enabled?(:source_editor_toolbar, current_user)
-      #editor-toolbar
     .js-edit-mode-pane#editor{ data: { 'editor-loading': true, qa_selector: 'source_editor_preview_container' } }<
       %pre.editor-loading-content= params[:content] || local_assigns[:blob_data]
     - if local_assigns[:path]
diff --git a/app/views/projects/blob/_render_error.html.haml b/app/views/projects/blob/_render_error.html.haml
index 1ff68cd2d11..d5dd24a6995 100644
--- a/app/views/projects/blob/_render_error.html.haml
+++ b/app/views/projects/blob/_render_error.html.haml
@@ -3,5 +3,5 @@
     The #{viewer.switcher_title} could not be displayed because #{blob_render_error_reason(viewer)}.
 
     You can
-    = Gitlab::Utils.to_exclusive_sentence(blob_render_error_options(viewer)).html_safe
+    = Gitlab::Sentence.to_exclusive_sentence(blob_render_error_options(viewer)).html_safe
     instead.
diff --git a/app/views/projects/blob/_template_selectors.html.haml b/app/views/projects/blob/_template_selectors.html.haml
index c1f4633f69f..0bd29ceb563 100644
--- a/app/views/projects/blob/_template_selectors.html.haml
+++ b/app/views/projects/blob/_template_selectors.html.haml
@@ -4,8 +4,6 @@
       = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-license-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: licenses_for_select(@project), project: @project.name, fullname: @project.namespace.human_name, qa_selector: 'license_dropdown' } })
     .gitignore-selector.js-gitignore-selector-wrap.js-template-selector-wrap.hidden
       = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-gitignore-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitignore_names(@project), qa_selector: 'gitignore_dropdown' } })
-    .metrics-dashboard-selector.js-metrics-dashboard-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-metrics-dashboard-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: metrics_dashboard_ymls(@project), qa_selector: 'metrics_dashboard_dropdown' } })
     #gitlab-ci-yml-selector.gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.js-template-selector-wrap.hidden
       = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-gitlab-ci-yml-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls(@project), selected: params[:template], qa_selector: 'gitlab_ci_yml_dropdown' } })
     .dockerfile-selector.js-dockerfile-selector-wrap.js-template-selector-wrap.hidden
diff --git a/app/views/projects/blob/viewers/_contributing.html.haml b/app/views/projects/blob/viewers/_contributing.html.haml
index eac8c17b7ff..efc12a31603 100644
--- a/app/views/projects/blob/viewers/_contributing.html.haml
+++ b/app/views/projects/blob/viewers/_contributing.html.haml
@@ -4,6 +4,6 @@
 - options = contribution_options(viewer.project)
 - if options.any?
   = succeed '.' do
-    = Gitlab::Utils.to_exclusive_sentence(options).html_safe
+    = Gitlab::Sentence.to_exclusive_sentence(options).html_safe
 - else
   = _("contribute to this project.")
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index dbc1fe24d96..adff64fad5a 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -1,51 +1,62 @@
 - merged = local_assigns.fetch(:merged, false)
 - commit = @repository.commit(branch.dereferenced_target)
-- merge_project = merge_request_source_project_for_project(@project)
-%li{ class: "branch-item gl-py-3! js-branch-item js-branch-#{branch.name}", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
-  .branch-item-content.gl-display-flex.gl-align-items-center.gl-px-3.gl-py-2
-    .branch-info
-      .gl-display-flex.gl-align-items-center
-        = sprite_icon('branch', size: 12, css_class: 'gl-flex-shrink-0')
-        = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name gl-ml-3', data: { qa_selector: 'branch_link' } do
-          = branch.name
-        = clipboard_button(text: branch.name, title: _("Copy branch name"))
-        - if branch.name == @repository.root_ref
-          = gl_badge_tag s_('DefaultBranchLabel|default'), { variant: :info, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
-        - elsif merged
-          = gl_badge_tag s_('Branches|merged'), { variant: :info, size: :sm }, { class: 'gl-ml-2', title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref }, data: { toggle: 'tooltip', container: 'body', qa_selector: 'badge_content' } }
-        - if protected_branch?(@project, branch)
-          = gl_badge_tag s_('Branches|protected'), { variant: :success, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
-
-        = render_if_exists 'projects/branches/diverged_from_upstream', branch: branch
-
-      .block-truncated
-        - if commit
-          = render 'projects/branches/commit', commit: commit, project: @project
-        - else
-          = s_('Branches|Can’t find HEAD commit for this branch')
-
-    - if branch.name != @repository.root_ref
-      .js-branch-divergence-graph
-
-    .controls.d-none.d-md-block<
-      - if commit_status
-        = render 'ci/status/icon', size: 24, status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-5'
-      - elsif show_commit_status
-        .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-5
-          %svg.s24
-
-      - if merge_project && create_mr_button?(from: branch.name, source_project: @project)
-        = render Pajamas::ButtonComponent.new(href: create_mr_path(from: branch.name, source_project: @project)) do
-          = _('Merge request')
-
-      - if branch.name != @repository.root_ref
-        = link_to project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
-          class: "gl-button btn btn-default js-onboarding-compare-branches #{'gl-ml-3' unless merge_project}",
-          method: :post,
-          title: s_('Branches|Compare') do
-          = s_('Branches|Compare')
-
-      = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name], class: 'gl-vertical-align-top'
-
-      - if can?(current_user, :push_code, @project)
-        = render 'projects/branches/delete_branch_modal_button', project: @project, branch: branch, merged: merged
+- related_merge_request = @related_merge_requests[branch.name]&.first
+- mr_status = merge_request_status(related_merge_request)
+- is_default_branch = branch.name == @repository.root_ref
+
+%li{ class: "branch-item gl-display-flex! gl-align-items-center! js-branch-item js-branch-#{branch.name} gl-pl-3!", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
+  .branch-info
+    .gl-display-flex.gl-align-items-center
+      = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name', data: { qa_selector: 'branch_link' } do
+        = branch.name
+      = clipboard_button(text: branch.name, title: _("Copy branch name"))
+      - if is_default_branch
+        = gl_badge_tag s_('DefaultBranchLabel|default'), { variant: :neutral, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
+      - if protected_branch?(@project, branch)
+        = gl_badge_tag s_('Branches|protected'), { variant: :muted, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
+
+      = render_if_exists 'projects/branches/diverged_from_upstream', branch: branch
+
+    .block-truncated
+      - if commit
+        = render 'projects/branches/commit', commit: commit, project: @project
+      - else
+        = s_('Branches|Can’t find HEAD commit for this branch')
+
+  - if branch.name != @repository.root_ref
+    .js-branch-divergence-graph
+
+  .pipeline-status.d-none.d-md-block<
+    - if commit_status
+      = render 'ci/status/icon', size: 16, status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-5'
+    - elsif show_commit_status
+      .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-5
+        %svg.s16
+
+
+  - if mr_status.present?
+    .issuable-reference.gl-display-flex.gl-justify-content-end.gl-min-w-10.gl-ml-5.gl-mr-4
+      = gl_badge_tag issuable_reference(related_merge_request),
+        { icon: mr_status[:icon], variant: mr_status[:variant], size: :md, href: merge_request_path(related_merge_request) },
+        { class: 'gl-mr-2', title: mr_status[:title], data: { toggle: 'tooltip', container: 'body', qa_selector: 'badge_content' } }
+
+  .controls.d-none.d-md-block<
+    - if mr_status.nil? && create_mr_button?(from: branch.name, source_project: @project)
+      = render Pajamas::ButtonComponent.new(icon: 'merge-request', href: create_mr_path(from: branch.name, source_project: @project), button_options: { class: 'has-tooltip gl-mr-2!', title: _('New merge request') }) do
+        = _('New')
+
+    = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name], css_class: 'gl-mr-1!'
+
+    - if !is_default_branch
+      .js-branch-more-actions{ data: {
+          branch_name: branch.name,
+          default_branch_name: @repository.root_ref,
+          can_delete_branch: user_access(@project).can_delete_branch?(branch.name).to_s,
+          is_protected_branch: protected_branch?(@project, branch).to_s,
+          merged: merged.to_s,
+          compare_path: project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
+          delete_path: project_branch_path(@project, branch.name),
+      } }
+    - else
+      .gl-display-inline-flex.gl-w-7
+        &nbsp;
diff --git a/app/views/projects/branches/_commit.html.haml b/app/views/projects/branches/_commit.html.haml
index cfa0cf6d07b..6bbd0617598 100644
--- a/app/views/projects/branches/_commit.html.haml
+++ b/app/views/projects/branches/_commit.html.haml
@@ -1,9 +1,7 @@
-.branch-commit.cgray
-  .icon-container.commit-icon
-    = custom_icon("icon_commit")
+.branch-commit.gl-font-sm.gl-text-gray-500
   = link_to commit.short_id, project_commit_path(project, commit.id), class: "commit-sha"
   &middot;
   %span.str-truncated
-    = link_to_markdown commit.title, project_commit_path(project, commit.id), class: "commit-row-message cgray"
+    = link_to_markdown commit.title, project_commit_path(project, commit.id), class: "commit-row-message gl-text-gray-500!"
   &middot;
   %span.gl-text-secondary= time_ago_with_tooltip(commit.committed_date)
diff --git a/app/views/projects/branches/_delete_branch_modal_button.html.haml b/app/views/projects/branches/_delete_branch_modal_button.html.haml
deleted file mode 100644
index 829a459ad2c..00000000000
--- a/app/views/projects/branches/_delete_branch_modal_button.html.haml
+++ /dev/null
@@ -1,18 +0,0 @@
-- if branch.name == @project.repository.root_ref
-  .js-delete-branch-button{ data: { tooltip: s_('Branches|The default branch cannot be deleted'),
-    disabled: true.to_s } }
-- elsif protected_branch?(@project, branch)
-  - if can?(current_user, :push_to_delete_protected_branch, @project)
-    .js-delete-branch-button{ data: { branch_name: branch.name,
-      is_protected_branch: true.to_s,
-      merged: merged.to_s,
-      default_branch_name: @project.repository.root_ref,
-      delete_path: project_branch_path(@project, branch.name) } }
-  - else
-    .js-delete-branch-button{ data: { is_protected_branch: true.to_s,
-      disabled: true.to_s } }
-- else
-  .js-delete-branch-button{ data: { branch_name: branch.name,
-    merged: merged.to_s,
-    default_branch_name: @project.repository.root_ref,
-    delete_path: project_branch_path(@project, branch.name) } }
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 64adf97b1b5..8992753c676 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -1,7 +1,7 @@
 - add_page_specific_style 'page_bundles/branches'
 - page_title _('Branches')
 - add_to_breadcrumbs(_('Repository'), project_tree_path(@project))
-- is_branch_rules_available = (can? current_user, :maintainer_access, @project) && Feature.enabled?(:branch_rules, @project)
+- can_access_branch_rules = can?(current_user, :maintainer_access, @project)
 - can_push_code = (can? current_user, :push_code, @project)
 
 -# Possible values for variables passed down from the projects/branches_controller.rb
@@ -24,7 +24,7 @@
         sorted_by: @sort }
     }
 
-    - if is_branch_rules_available
+    - if can_access_branch_rules
       = link_to project_settings_repository_path(@project, anchor: 'js-branch-rules'), class: 'gl-button btn btn-default' do
         = s_('Branches|View branch rules')
 
@@ -38,7 +38,7 @@
 
 = render_if_exists 'projects/commits/mirror_status'
 
-- if is_branch_rules_available
+- if can_access_branch_rules
   = render 'branch_rules_info'
 
 .js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json), default_branch: @project.default_branch } }
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 1fbc399c3ff..bbee7d66dcb 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -1,10 +1,11 @@
 - project = local_assigns.fetch(:project)
 - ref = local_assigns.fetch(:ref)
 - pipeline = local_assigns.fetch(:pipeline) { project.latest_successful_pipeline_for(ref) }
+- css_class = local_assigns.fetch(:css_class, '')
 
 - if !project.empty_repo? && can?(current_user, :download_code, project)
   - archive_prefix = "#{project.path}-#{ref.tr('/', '-')}"
-  .project-action-button.dropdown.gl-dropdown.inline>
+  .project-action-button.dropdown.gl-dropdown.inline{ class: css_class }>
     %button.gl-button.btn.btn-default.dropdown-toggle.gl-dropdown-toggle.dropdown-icon-only.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { qa_selector: 'download_source_code_button' } }
       = sprite_icon('download', css_class: 'gl-icon dropdown-icon')
       %span.sr-only=  _('Select Archive Format')
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 079e24c6389..c161e1c9d2a 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -29,15 +29,14 @@
     %pre.commit-description<
       = preserve(markdown_field(@commit, :description))
 
-.info-well.js-commit-box-info{ 'data-commit-path' => branches_project_commit_path(@project, @commit.id) }
+.info-well
   .well-segment
     .icon-container.commit-icon
       = custom_icon("icon_commit")
     %span.cgray= n_('parent', 'parents', @commit.parents.count)
     - @commit.parents.each do |parent|
       = link_to parent.short_id, project_commit_path(@project, parent), class: "commit-sha"
-    .commit-info.branches
-      = gl_loading_icon(inline: true, css_class: 'gl-vertical-align-middle')
+    #js-commit-branches-and-tags{ data: { full_path: @project.full_path, commit_sha: @commit.short_id } }
 
   .well-segment.merge-request-info
     .icon-container
diff --git a/app/views/projects/commit/_signature_badge.html.haml b/app/views/projects/commit/_signature_badge.html.haml
index 9cca928e794..5b99a88f29e 100644
--- a/app/views/projects/commit/_signature_badge.html.haml
+++ b/app/views/projects/commit/_signature_badge.html.haml
@@ -29,5 +29,5 @@
 
     = link_to(_('Learn about signing commits'), help_page_path('user/project/repository/gpg_signed_commits/index.md'), class: 'gl-link gl-display-block gl-mt-3')
 
-%a.signature-badge.gl-display-inline-block{ role: 'button', tabindex: 0, data: { toggle: 'popover', html: 'true', placement: 'top', title: title, content: content } }
+%a.signature-badge.gl-display-inline-block.gl-ml-4{ role: 'button', tabindex: 0, data: { toggle: 'popover', html: 'true', placement: 'top', title: title, content: content } }
   = gl_badge_tag label, variant: variant
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 9cbabaee774..a0f47f375f7 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -8,12 +8,10 @@
 - hidden = @hidden_commit_count
 
 - commits.chunk { |c| c.committed_date.in_time_zone.to_date }.each do |day, daily_commits|
-  %li.js-commit-header.gl-mt-7.gl-pb-2.gl-border-b{ data: { day: day } }
-    %span.day.font-weight-bold= l(day, format: '%d %b, %Y')
-    %span -
-    %span.commits-count= n_("%d commit", "%d commits", daily_commits.size) % daily_commits.size
+  %li.js-commit-header.gl-py-2.gl-border-b{ data: { day: day } }
+    %span.day.font-weight-bold= l(day, format: '%b %d, %Y')
 
-  %li.commits-row{ data: { day: day } }
+  %li.commits-row.gl-mb-6{ data: { day: day } }
     %ul.content-list.commit-list.flex-list
       - if Feature.enabled?(:cached_commits, project)
         = render partial: 'projects/commits/commit', collection: daily_commits, locals: { project: project, ref: ref, merge_request: merge_request }, cached: ->(commit) { commit_partial_cache_key(commit, ref: ref, merge_request: merge_request, request: request) }
@@ -21,13 +19,13 @@
         = render partial: 'projects/commits/commit', collection: daily_commits, locals: { project: project, ref: ref, merge_request: merge_request }
 
 - if context_commits.present?
-  %li.js-commit-header.gl-mt-7.gl-pb-2.gl-border-b
+  %li.js-commit-header.gl-py-2.gl-border-b
     %span.font-weight-bold= n_("%d previously merged commit", "%d previously merged commits", context_commits.count) % context_commits.count
     - if can_update_merge_request
       = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-ml-3 add-review-item-modal-trigger', data: { context_commits_empty: 'false' } }) do
         = _('Add/remove')
 
-  %li.commits-row
+  %li.commits-row.gl-mb-6
     %ul.content-list.commit-list.flex-list
       - if Feature.enabled?(:cached_commits, project)
         = render partial: 'projects/commits/commit', collection: context_commits, locals: { project: project, ref: ref, merge_request: merge_request }, cached: ->(commit) { commit_partial_cache_key(commit, ref: ref, merge_request: merge_request, request: request) }
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 64bd1bf32f0..5ec95c3095d 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -17,9 +17,10 @@
       .file-actions.gl-display-none.gl-sm-display-flex
         #js-diff-stats{ data: diff_file_stats_data(diff_file) }
         - if diff_file.blob&.readable_text?
-          %span.has-tooltip{ title: _("Toggle comments for this file") }
-            = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default btn-icon selected', disabled: @diff_notes_disabled do
-              = sprite_icon('comment')
+          - unless @diff_notes_disabled
+            %span.has-tooltip{ title: _("Toggle comments for this file") }
+              = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default btn-icon selected' do
+                = sprite_icon('comment')
           \
           - if editable_diff?(diff_file)
             - link_opts = @merge_request.persisted? ? { from_merge_request_iid: @merge_request.iid } : {}
diff --git a/app/views/projects/diffs/_text_file.html.haml b/app/views/projects/diffs/_text_file.html.haml
index 9b64afa8c60..08aeb3d4b07 100644
--- a/app/views/projects/diffs/_text_file.html.haml
+++ b/app/views/projects/diffs/_text_file.html.haml
@@ -4,40 +4,33 @@
     %a.show-suppressed-diff.cursor-pointer.js-show-suppressed-diff= _("Changes suppressed. Click to show.")
 
 %table.text-file.diff-wrap-lines.code.code-commit.js-syntax-highlight.commit-diff{ data: diff_view_data, class: too_big ? 'hide' : '' }
-  - if Feature.enabled?(:inline_haml_diff_line_rendering, @project)
-    - diff_file.highlighted_diff_lines.each do |line|
-      - line_code = diff_file.line_code(line)
+  - diff_file.highlighted_diff_lines.each do |line|
+    - line_code = diff_file.line_code(line)
 
-      %tr.line_holder{ class: line.type, id: line_code }
-        - case line.type
-        - when 'match'
-          = diff_match_line line.old_pos, line.new_pos, text: line.text
-        - when 'old-nomappinginraw', 'new-nomappinginraw', 'unchanged-nomappinginraw'
-          = diff_nomappinginraw_line line, %w[old_line diff-line-num], %w[new_line diff-line-num], %w[line_content]
-        - when 'old-nonewline', 'new-nonewline'
-          %td.old_line.diff-line-num
-          %td.new_line.diff-line-num
-          %td.line_content.match= line.text
-        - else
-          %td.old_line.diff-line-num{ class: "#{line.type} js-avatar-container", data: { linenumber: line.old_pos } }
-            = add_diff_note_button(line_code, diff_file.position(line), line.type)
-            %a{ href: "##{line_code}", data: { linenumber: diff_link_number(line.type, "new", line.old_pos) } }
+    %tr.line_holder{ class: line.type, id: line_code }
+      - case line.type
+      - when 'match'
+        = diff_match_line line.old_pos, line.new_pos, text: line.text
+      - when 'old-nomappinginraw', 'new-nomappinginraw', 'unchanged-nomappinginraw'
+        = diff_nomappinginraw_line line, %w[old_line diff-line-num], %w[new_line diff-line-num], %w[line_content]
+      - when 'old-nonewline', 'new-nonewline'
+        %td.old_line.diff-line-num
+        %td.new_line.diff-line-num
+        %td.line_content.match= line.text
+      - else
+        %td.old_line.diff-line-num{ class: "#{line.type} js-avatar-container", data: { linenumber: line.old_pos } }
+          = add_diff_note_button(line_code, diff_file.position(line), line.type)
+          %a{ href: "##{line_code}", data: { linenumber: diff_link_number(line.type, "new", line.old_pos) } }
 
-          %td.new_line.diff-line-num{ class: line.type, data: { linenumber: line.new_pos } }
-            %a{ href: "##{line_code}", data: { linenumber: diff_link_number(line.type, "old", line.new_pos) } }
+        %td.new_line.diff-line-num{ class: line.type, data: { linenumber: line.new_pos } }
+          %a{ href: "##{line_code}", data: { linenumber: diff_link_number(line.type, "old", line.new_pos) } }
 
-          %td.line_content{ class: line.type }<
-            = diff_line_content(line.rich_text)
+        %td.line_content{ class: line.type }<
+          = diff_line_content(line.rich_text)
 
-      - if line.discussable? && @grouped_diff_discussions.present? && @grouped_diff_discussions[line_code]
-        - line_discussions = @grouped_diff_discussions[line_code]
-        = render "discussions/diff_discussion", discussions: line_discussions, expanded: line_discussions.any?(&:expanded?)
-
-  - else
-    = render partial: "projects/diffs/line",
-      collection: diff_file.highlighted_diff_lines,
-      as: :line,
-      locals: { diff_file: diff_file, discussions: @grouped_diff_discussions }
+    - if line.discussable? && @grouped_diff_discussions.present? && @grouped_diff_discussions[line_code]
+      - line_discussions = @grouped_diff_discussions[line_code]
+      = render "discussions/diff_discussion", discussions: line_discussions, expanded: line_discussions.any?(&:expanded?)
 
   - if !diff_file.new_file? && !diff_file.deleted_file? && diff_file.highlighted_diff_lines.any?
     - last_line = diff_file.highlighted_diff_lines.last
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 02a69f25985..a5224db1be9 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -91,7 +91,7 @@
     .sub-section.rename-repository
       %h4.warning-title= _('Change path')
       = render 'projects/errors'
-      = form_for @project do |f|
+      = gitlab_ui_form_for @project do |f|
         .form-group
           - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'rename-a-repository') }
           %p= _("A project’s repository name defines its URL (the one you use to access the project via a browser) and its place on the file disk where GitLab is installed. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
@@ -106,8 +106,8 @@
               .input-group-prepend
                 .input-group-text
                   #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
-              = f.text_field :path, class: 'form-control h-auto', data: { qa_selector: 'project_path_field' }
-        = f.submit _('Change path'), class: "gl-button btn btn-danger", data: { qa_selector: 'change_path_button' }
+              = f.text_field :path, class: 'form-control', data: { qa_selector: 'project_path_field' }
+        = f.submit _('Change path'), class: "btn-danger", data: { qa_selector: 'change_path_button' }, pajamas_button: true
 
     = render 'transfer', project: @project
 
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index a51d1080d96..deb3c33f733 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -43,13 +43,13 @@
         :preserve
           git clone #{ content_tag(:span, default_url_to_repo, class: 'js-clone')}
           cd #{h @project.path}
-          git switch -c #{h escaped_default_branch_name}
+          git switch --create #{h escaped_default_branch_name}
           touch README.md
           git add README.md
           git commit -m "add README"
         - if @project.can_current_user_push_to_default_branch?
           %span><
-            git push -u origin #{h escaped_default_branch_name }
+            git push --set-upstream origin #{h escaped_default_branch_name }
 
       %h5= _('Push an existing folder')
       %pre.bg-light
@@ -61,7 +61,7 @@
           git commit -m "Initial commit"
         - if @project.can_current_user_push_to_default_branch?
           %span><
-            git push -u origin #{h escaped_default_branch_name }
+            git push --set-upstream origin #{h escaped_default_branch_name }
 
       %h5= _('Push an existing Git repository')
       %pre.bg-light
@@ -71,5 +71,5 @@
           git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'js-clone')}
         - if @project.can_current_user_push_to_default_branch?
           %span><
-            git push -u origin --all
-            git push -u origin --tags
+            git push --set-upstream origin --all
+            git push --set-upstream origin --tags
diff --git a/app/views/projects/environments/edit.html.haml b/app/views/projects/environments/edit.html.haml
index 7a275b51c74..c7752a45c63 100644
--- a/app/views/projects/environments/edit.html.haml
+++ b/app/views/projects/environments/edit.html.haml
@@ -4,4 +4,5 @@
 #js-edit-environment{ data: { project_environments_path: project_environments_path(@project),
                               update_environment_path: project_environment_path(@project, @environment),
                               protected_environment_settings_path: (project_settings_ci_cd_path(@project, anchor: 'js-protected-environments-settings') if @project.licensed_feature_available?(:protected_environments)),
-                              environment: environment_data(@environment)} }
+                              project_path: @project.full_path,
+                              environment: environment_data(@environment) } }
diff --git a/app/views/projects/environments/new.html.haml b/app/views/projects/environments/new.html.haml
index 11c36b5ea6d..9e8484b88b9 100644
--- a/app/views/projects/environments/new.html.haml
+++ b/app/views/projects/environments/new.html.haml
@@ -3,4 +3,4 @@
 - page_title s_("Environments|New Environment")
 - add_page_specific_style 'page_bundles/environments'
 
-#js-new-environment{ data: { project_environments_path: project_environments_path(@project) } }
+#js-new-environment{ data: { project_environments_path: project_environments_path(@project), project_path: @project.full_path, } }
diff --git a/app/views/projects/issues/_issues.html.haml b/app/views/projects/issues/_issues.html.haml
index 09b0b7a4d9b..6fd5802213a 100644
--- a/app/views/projects/issues/_issues.html.haml
+++ b/app/views/projects/issues/_issues.html.haml
@@ -1,7 +1,7 @@
 = render 'shared/alerts/positioning_disabled' if @sort == 'relative_position'
 
 %ul.content-list.issues-list.issuable-list{ class: issue_manual_ordering_class }
-  = render partial: "projects/issues/issue", collection: @issues
+  = render partial: 'projects/issues/service_desk/issue', collection: @issues
   - if @issues.blank?
     - empty_state_path = local_assigns.fetch(:empty_state_path, 'shared/empty_states/issues')
     = render empty_state_path
diff --git a/app/views/projects/issues/_work_item_links.html.haml b/app/views/projects/issues/_work_item_links.html.haml
index 981021c97e6..bf23fdc761b 100644
--- a/app/views/projects/issues/_work_item_links.html.haml
+++ b/app/views/projects/issues/_work_item_links.html.haml
@@ -1,4 +1,5 @@
 .js-work-item-links-root{ data: { issuable_id: @issue.id,
+  issuable_iid: @issue.iid,
   full_path: @project.full_path,
   wi: work_items_index_data(@project),
   register_path: new_user_registration_path(redirect_to_referer: 'yes'),
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/service_desk/_issue.html.haml
index fc6ef2ea153..04ea6103b83 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/service_desk/_issue.html.haml
@@ -23,7 +23,6 @@
             #{_('created %{timeAgoString} by %{email} via %{user}').html_safe % { timeAgoString: time_ago_with_tooltip(issue.created_at, placement: 'bottom'), email: issue.present(current_user: current_user).service_desk_reply_to, user: link_to_member(@project, issue.author, avatar: false) }}
           - else
             #{s_('IssueList|created %{timeAgoString} by %{user}').html_safe % { timeAgoString: time_ago_with_tooltip(issue.created_at, placement: 'bottom'), user: link_to_member(@project, issue.author, avatar: false) }}
-          = render_if_exists 'shared/issuable/gitlab_team_member_badge', author: issue.author
         - if issue.milestone
           %span.issuable-milestone.d-none.d-sm-inline-block
             &nbsp;
@@ -44,7 +43,7 @@
           - presented_labels_sorted_by_title(issue.labels, issue.project).each do |label|
             = link_to_label(label, small: true)
 
-        = render "projects/issues/issue_estimate", issue: issue
+        = render 'projects/issues/service_desk/issue_estimate', issue: issue
 
     .issuable-meta
       %ul.controls
diff --git a/app/views/projects/issues/_issue_estimate.html.haml b/app/views/projects/issues/service_desk/_issue_estimate.html.haml
index c49bf626f4e..c49bf626f4e 100644
--- a/app/views/projects/issues/_issue_estimate.html.haml
+++ b/app/views/projects/issues/service_desk/_issue_estimate.html.haml
diff --git a/app/views/projects/issues/service_desk/_service_desk_empty_state.html.haml b/app/views/projects/issues/service_desk/_service_desk_empty_state.html.haml
index 1c9143c633d..855625368a9 100644
--- a/app/views/projects/issues/service_desk/_service_desk_empty_state.html.haml
+++ b/app/views/projects/issues/service_desk/_service_desk_empty_state.html.haml
@@ -6,7 +6,7 @@
 - if Gitlab::ServiceDesk.supported?
   .empty-state
     .svg-content
-      = render partial: 'shared/empty_states/icons/service_desk_empty_state', formats: :svg
+      = render partial: 'projects/issues/service_desk/icons/service_desk_empty_state', formats: :svg
 
     .text-content
       %h4= title_text
@@ -25,7 +25,7 @@
 - else
   .empty-state
     .svg-content
-      = render partial: 'shared/empty_states/icons/service_desk_setup', formats: :svg
+      = render partial: 'projects/issues/service_desk/icons/service_desk_setup', formats: :svg
     .text-content
       - if can_edit_project_settings
         %h4= s_('ServiceDesk|Service Desk is not supported')
diff --git a/app/views/projects/issues/service_desk/_service_desk_info_content.html.haml b/app/views/projects/issues/service_desk/_service_desk_info_content.html.haml
index 2ed5675c0ad..95837748c7f 100644
--- a/app/views/projects/issues/service_desk/_service_desk_info_content.html.haml
+++ b/app/views/projects/issues/service_desk/_service_desk_info_content.html.haml
@@ -6,7 +6,7 @@
 
 .media.gl-border-b.gl-pb-3.gl-text-left
   .svg-content
-    = render partial: 'shared/empty_states/icons/service_desk_callout', formats: :svg
+    = render partial: 'projects/issues/service_desk/icons/service_desk_callout', formats: :svg
 
   .gl-mt-3.gl-ml-3
     %h5= title_text
diff --git a/app/views/shared/empty_states/icons/_service_desk_callout.svg b/app/views/projects/issues/service_desk/icons/_service_desk_callout.svg
index 2886388279e..2886388279e 100644
--- a/app/views/shared/empty_states/icons/_service_desk_callout.svg
+++ b/app/views/projects/issues/service_desk/icons/_service_desk_callout.svg
diff --git a/app/views/shared/empty_states/icons/_service_desk_empty_state.svg b/app/views/projects/issues/service_desk/icons/_service_desk_empty_state.svg
index 04c4870be07..04c4870be07 100644
--- a/app/views/shared/empty_states/icons/_service_desk_empty_state.svg
+++ b/app/views/projects/issues/service_desk/icons/_service_desk_empty_state.svg
diff --git a/app/views/shared/empty_states/icons/_service_desk_setup.svg b/app/views/projects/issues/service_desk/icons/_service_desk_setup.svg
index bb791b58593..bb791b58593 100644
--- a/app/views/shared/empty_states/icons/_service_desk_setup.svg
+++ b/app/views/projects/issues/service_desk/icons/_service_desk_setup.svg
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index ce7006001c7..7a4ae409ee2 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -17,7 +17,7 @@
     -# Only show it in the first page
     - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
     .prioritized-labels.gl-rounded-base.gl-border.gl-bg-gray-10.gl-mt-4{ class: [('hide' if hide), ('is-not-draggable' unless can_admin_label)] }
-      .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-base.gl-border-b{ class: 'gl-rounded-bottom-left-none! gl-rounded-bottom-right-none!' }
+      .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-top-base.gl-border-b
         %h3.card-title.h5.gl-m-0.gl-relative.gl-line-height-24
           = _('Prioritized labels')
         .gl-font-sm.gl-font-weight-semibold.gl-text-gray-500
@@ -33,7 +33,7 @@
 
     - if @labels.any?
       .other-labels.gl-rounded-base.gl-border.gl-bg-gray-10.gl-mt-4
-        .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-base.gl-border-b{ class: 'gl-rounded-bottom-left-none! gl-rounded-bottom-right-none!' }
+        .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-top-base.gl-border-b
           %h3.card-title.h5.gl-m-0.gl-relative.gl-line-height-24{ class: ('hide' if hide) }= _('Other labels')
         .js-other-labels.gl-px-3.gl-rounded-base.manage-labels-list
           = render partial: 'shared/label', collection: @labels, as: :label, locals: { subject: @project }
diff --git a/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml b/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
index 9bfa0e7a309..a3536ead240 100644
--- a/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
+++ b/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
@@ -1,53 +1,15 @@
-- display_issuable_type = issuable_display_type(@merge_request)
-
-.btn-group.gl-md-ml-3.gl-display-flex.dropdown.gl-dropdown.gl-md-w-auto.gl-w-full
-  %span.js-sidebar-header-popover
-  = button_tag type: 'button', id: "new-actions-header-dropdown", class: "btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret gl-display-none! gl-md-display-inline-flex!", title: _('Merge request actions'), 'aria-label': _('Merge request actions'), data: { toggle: 'dropdown', testid: 'merge-request-actions' } do
-    = sprite_icon "ellipsis_v", size: 16, css_class: "dropdown-icon gl-icon"
-  = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md btn-block gl-button gl-dropdown-toggle gl-md-display-none!", data: { 'toggle' => 'dropdown' } do
-    %span.gl-dropdown-button-text= _('Merge request actions')
-    = sprite_icon "chevron-down", size: 16, css_class: "dropdown-icon gl-icon"
-  .dropdown-menu.dropdown-menu-right
-    .gl-dropdown-inner
-      .gl-dropdown-contents
-        %ul
-          - if current_user && moved_mr_sidebar_enabled?
-            %li.gl-dropdown-item.js-sidebar-subscriptions-widget-root
-            %li.gl-dropdown-divider
-              %hr.dropdown-divider
-          - if can?(current_user, :update_merge_request, @merge_request)
-            %li.gl-dropdown-item{ class: "gl-md-display-none!" }
-              = link_to edit_project_merge_request_path(@project, @merge_request), class: 'dropdown-item' do
-                .gl-dropdown-item-text-wrapper
-                  = _('Edit')
-          - if @merge_request.open?
-            %li.gl-dropdown-item
-              = link_to toggle_draft_merge_request_path(@merge_request), method: :put, class: 'dropdown-item js-draft-toggle-button' do
-                .gl-dropdown-item-text-wrapper
-                  = @merge_request.draft? ? _('Mark as ready') : _('Mark as draft')
-            %li.gl-dropdown-item.js-close-item
-              = link_to close_issuable_path(@merge_request), method: :put, class: 'dropdown-item' do
-                .gl-dropdown-item-text-wrapper
-                  = _('Close')
-                  = display_issuable_type
-          - elsif !@merge_request.source_project_missing? && @merge_request.closed?
-            %li.gl-dropdown-item
-              = link_to reopen_issuable_path(@merge_request), method: :put, class: 'dropdown-item' do
-                .gl-dropdown-item-text-wrapper
-                  = _('Reopen')
-                  = display_issuable_type
-          - if moved_mr_sidebar_enabled?
-            %li.gl-dropdown-item.js-sidebar-lock-root
-            %li.gl-dropdown-item
-              %button.dropdown-item.js-copy-reference{ type: "button", data: { 'clipboard-text': @merge_request.to_reference(full: true) } }
-                .gl-dropdown-item-text-wrapper
-                  = _('Copy reference')
-
-          - unless current_controller?('conflicts')
-            - unless issuable_author_is_current_user(@merge_request)
-              - if moved_mr_sidebar_enabled?
-                %li.gl-dropdown-divider
-                  %hr.dropdown-divider
-              .js-report-abuse-dropdown-item{ data: { report_abuse_path: add_category_abuse_reports_path, reported_user_id: @merge_request.author.id, reported_from_url: merge_request_url(@merge_request) } }
-
-#js-report-abuse-drawer
+.js-mr-more-dropdown{ data: {
+  merge_request: @merge_request.to_json,
+  project_path: @project.full_path,
+  edit_url: edit_project_merge_request_path(@project, @merge_request),
+  is_current_user: issuable_author_is_current_user(@merge_request),
+  is_logged_in: current_user,
+  can_update_merge_request: can?(current_user, :update_merge_request, @merge_request),
+  open: @merge_request.open?,
+  merged: @merge_request.merged?,
+  source_project_missing: @merge_request.source_project_missing?,
+  clipboard_text: @merge_request.to_reference(full: true),
+  report_abuse_path: add_category_abuse_reports_path,
+  reported_user_id: @merge_request.author.id,
+  reported_from_url: merge_request_url(@merge_request),
+} }
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 9142893d400..7b815d996e0 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -25,7 +25,6 @@
         %span.issuable-authored.d-none.d-sm-inline-block.gl-text-gray-500!
           &middot;
           #{s_('IssueList|created %{timeAgoString} by %{user}').html_safe % { timeAgoString: time_ago_with_tooltip(merge_request.created_at, placement: 'bottom'), user: link_to_member(@project, merge_request.author, avatar: false, extra_class: 'gl-text-gray-500!') }}
-          = render_if_exists 'shared/issuable/gitlab_team_member_badge', author: merge_request.author
         - if merge_request.milestone
           %span.issuable-milestone.d-none.d-sm-inline-block.gl-text-truncate.gl-max-w-26.gl-vertical-align-bottom
             &nbsp;
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 15339becb74..dfa582f4c60 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -26,7 +26,7 @@
 
     .detail-page-header-actions.gl-align-self-start.is-merge-request.js-issuable-actions.gl-display-flex
       - if can_update_merge_request
-        = render Pajamas::ButtonComponent.new(href: edit_project_merge_request_path(@project, @merge_request), button_options: {class: "gl-display-none gl-md-display-block js-issuable-edit", data: { qa_selector: "edit_button" }}) do
+        = render Pajamas::ButtonComponent.new(href: edit_project_merge_request_path(@project, @merge_request), button_options: {class: "gl-display-none gl-md-display-block js-issuable-edit", data: { qa_selector: "edit_title_button" }}) do
           = _('Edit')
 
       - if @merge_request.source_project
diff --git a/app/views/projects/merge_requests/_page.html.haml b/app/views/projects/merge_requests/_page.html.haml
index 3e56148f777..5ea67376a86 100644
--- a/app/views/projects/merge_requests/_page.html.haml
+++ b/app/views/projects/merge_requests/_page.html.haml
@@ -16,7 +16,7 @@
 - add_page_specific_style 'page_bundles/ci_status'
 
 - add_page_startup_api_call @endpoint_metadata_url
-- if mr_action == 'diffs' && (!@file_by_file_default || !single_file_file_by_file?)
+- if mr_action == 'diffs' && !@file_by_file_default
   - add_page_startup_api_call @endpoint_diff_batch_url
 
 .merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version, diffs_batch_cache_key: @diffs_batch_cache_key } }
diff --git a/app/views/projects/merge_requests/creations/_new_compare.html.haml b/app/views/projects/merge_requests/creations/_new_compare.html.haml
index 0570d22529b..07bae4d2396 100644
--- a/app/views/projects/merge_requests/creations/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml
@@ -1,6 +1,16 @@
 %h1.page-title.gl-font-size-h-display
   = _('New merge request')
 
+- if @saml_groups.present?
+  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false) do |c|
+    - c.with_body do
+      = s_('GroupSAML|Some branches are inaccessible because your SAML session has expired. To access the branches, select the group’s path to reauthenticate.')
+    - c.with_actions do
+      .gl-display-flex.gl-flex-wrap
+        - @saml_groups.each do |group|
+          = render Pajamas::ButtonComponent.new(href: sso_group_saml_providers_path(group, { token: group.saml_discovery_token, redirect: project_new_merge_request_branch_from_path(@source_project) }), button_options: { class: "gl-mr-3 gl-mb-3" }) do
+            = group.path
+
 = gitlab_ui_form_for [@project, @merge_request], url: project_new_merge_request_path(@project), method: :get, html: { class: "merge-request-form js-requires-input" } do |f|
   - if params[:nav_source].present?
     = hidden_field_tag(:nav_source, params[:nav_source])
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index 35e8b30e6e9..bec7cb3fd34 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -15,8 +15,10 @@
     .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
       .merge-request-tabs-container.gl-display-flex.gl-justify-content-space-between
         .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-          .fade-left= sprite_icon('chevron-lg-left', size: 12)
-          .fade-right= sprite_icon('chevron-lg-right', size: 12)
+          %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+            = sprite_icon('chevron-lg-left', size: 12)
+          %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+            = sprite_icon('chevron-lg-right', size: 12)
           %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.gl-display-flex.gl-flex-nowrap.gl-m-0.gl-p-0.js-tabs-affix
             %li.commits-tab.new-tab
               = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tabvue'} do
@@ -32,8 +34,10 @@
     .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
       .merge-request-tabs-container.gl-display-flex.gl-justify-content-space-between
         .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-          .fade-left= sprite_icon('chevron-lg-left', size: 12)
-          .fade-right= sprite_icon('chevron-lg-right', size: 12)
+          %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+            = sprite_icon('chevron-lg-left', size: 12)
+          %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+            = sprite_icon('chevron-lg-right', size: 12)
           %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.gl-display-flex.gl-flex-nowrap.gl-m-0.gl-p-0.js-tabs-affix
             %li.commits-tab.new-tab
               = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tabvue'} do
diff --git a/app/views/projects/mirrors/_branch_filter.html.haml b/app/views/projects/mirrors/_branch_filter.html.haml
index b9db9898d49..7d90906bfe8 100644
--- a/app/views/projects/mirrors/_branch_filter.html.haml
+++ b/app/views/projects/mirrors/_branch_filter.html.haml
@@ -1,6 +1,9 @@
-.form-check.gl-mb-3
-  = check_box_tag :only_protected_branches, '1', false, class: 'js-mirror-protected form-check-input'
-  = label_tag :only_protected_branches, _('Mirror only protected branches'), class: 'form-check-label'
-  .form-text.text-muted
-    = _('If enabled, only protected branches will be mirrored.')
-    = link_to _('Learn more.'), help_page_path('user/project/repository/mirror/index.md', anchor: 'mirror-only-protected-branches'), target: '_blank', rel: 'noopener noreferrer'
+.form-group
+  = render Pajamas::CheckboxTagComponent.new(name: :only_protected_branches,
+    checkbox_options: { class: 'js-mirror-protected' },
+    label_options: { class: 'gl-mb-0!' }) do |c|
+    - c.with_label do
+      = _('Mirror only protected branches')
+    - c.with_help_text do
+      = _('If enabled, only protected branches will be mirrored.')
+      = link_to _('Learn more.'), help_page_path('user/project/repository/mirror/index.md', anchor: 'mirror-only-protected-branches'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/projects/mirrors/_mirror_repos_push.html.haml b/app/views/projects/mirrors/_mirror_repos_push.html.haml
index 136f504084e..5b02d650989 100644
--- a/app/views/projects/mirrors/_mirror_repos_push.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos_push.html.haml
@@ -8,9 +8,12 @@
   = rm_f.hidden_field :keep_divergent_refs, class: 'js-mirror-keep-divergent-refs-hidden'
   = render partial: 'projects/mirrors/ssh_host_keys', locals: { f: rm_f }
   = render partial: 'projects/mirrors/authentication_method', locals: { f: rm_f }
-  .form-check.gl-mb-3
-    = check_box_tag :keep_divergent_refs, '1', false, class: 'js-mirror-keep-divergent-refs form-check-input'
-    = label_tag :keep_divergent_refs, _('Keep divergent refs'), class: 'form-check-label'
-    .form-text.text-muted
-      - link_opening_tag = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
-      = html_escape(_('Do not force push over diverged refs. After the mirror is created, this setting can only be modified using the API. %{mirroring_docs_link_start}Learn more about this option%{link_closing_tag} and %{mirroring_api_docs_link_start}the API.%{link_closing_tag}')) % { mirroring_docs_link_start: link_opening_tag % {url: help_page_path('user/project/repository/mirror/push.md', anchor: 'keep-divergent-refs')}, mirroring_api_docs_link_start: link_opening_tag % {url: help_page_path('api/remote_mirrors')}, link_closing_tag: '</a>'.html_safe }
+  .form-group
+    = render Pajamas::CheckboxTagComponent.new(name: :keep_divergent_refs,
+      checkbox_options: { class: 'js-mirror-keep-divergent-refs' },
+      label_options: { class: 'gl-mb-0!' }) do |c|
+      - c.with_label do
+        = _('Keep divergent refs')
+      - c.with_help_text do
+        - link_opening_tag = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
+        = html_escape(_('Do not force push over diverged refs. After the mirror is created, this setting can only be modified using the API. %{mirroring_docs_link_start}Learn more about this option%{link_closing_tag} and %{mirroring_api_docs_link_start}the API.%{link_closing_tag}')) % { mirroring_docs_link_start: link_opening_tag % {url: help_page_path('user/project/repository/mirror/push.md', anchor: 'keep-divergent-refs')}, mirroring_api_docs_link_start: link_opening_tag % {url: help_page_path('api/remote_mirrors')}, link_closing_tag: '</a>'.html_safe }
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index c8d4f02274b..c4630eec168 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -8,11 +8,10 @@
       = form_tag network_path, method: :get, class: 'form-inline network-form' do |f|
         = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: _("Git revision"), class: 'search-input form-control gl-form-input input-mx-250 search-sha gl-mr-2'
         = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, icon: 'search')
-        .inline.gl-ml-5
-          .form-check.light
-            = check_box_tag :filter_ref, 1, @options[:filter_ref], class: 'form-check-input'
-            = label_tag :filter_ref, class: 'form-check-label' do
-              %span= _("Begin with the selected commit")
+        .form-group{ class: 'gl-ml-5 gl-mb-n3!' }
+          = render Pajamas::CheckboxTagComponent.new(name: :filter_ref, checked: @options[:filter_ref]) do |c|
+            - c.with_label do
+              = _("Begin with the selected commit")
 
     - if @commit
       .network-graph.gl-bg-white.gl-overflow-scroll.gl-overflow-x-hidden{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
diff --git a/app/views/projects/network/show.json.erb b/app/views/projects/network/show.json.erb
index 93b3c9911e2..7b5119d92e4 100644
--- a/app/views/projects/network/show.json.erb
+++ b/app/views/projects/network/show.json.erb
@@ -9,7 +9,7 @@
         author: {
           name: c.author_name,
           email: c.author_email,
-          icon: image_path(avatar_icon_for_email(c.author_email, 20))
+          icon: image_path(avatar_icon_for_email(c.author_email, 20, by_commit_email: true))
         },
         time: c.time,
         space: c.spaces.first,
diff --git a/app/views/projects/pages/_waiting.html.haml b/app/views/projects/pages/_waiting.html.haml
index e8acadbabe3..0613ffc4809 100644
--- a/app/views/projects/pages/_waiting.html.haml
+++ b/app/views/projects/pages/_waiting.html.haml
@@ -1,7 +1,7 @@
 .empty-state
   .row.gl-align-items-center.gl-justify-content-center
     .order-md-2
-      = image_tag 'illustrations/pipelines_pending.svg'
+      = image_tag 'illustrations/empty-state/empty-pipeline-md.svg'
   .row.gl-align-items-center.gl-justify-content-center
     .text-content.gl-text-center.order-md-1
       %h4= s_("GitLabPages|Waiting for the Pages Pipeline to complete...")
diff --git a/app/views/projects/pages_domains/show.html.haml b/app/views/projects/pages_domains/show.html.haml
index 89e64d607a6..b8de364babc 100644
--- a/app/views/projects/pages_domains/show.html.haml
+++ b/app/views/projects/pages_domains/show.html.haml
@@ -2,15 +2,6 @@
 - breadcrumb_title domain_presenter.domain
 - page_title domain_presenter.domain
 
-- verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
-
-- if verification_enabled && domain_presenter.unverified?
-  = content_for :flash_message do
-    = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false) do |c|
-      - c.with_body do
-        .container-fluid.container-limited
-          = _("This domain is not verified. You will need to verify ownership before access is enabled.")
-
 %h1.page-title.gl-font-size-h-display
   = _('Pages Domain')
 = render 'projects/pages_domains/helper_text'
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index 3ff370dfaa4..753bb77e755 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -16,7 +16,7 @@
       .icon-container
         = sprite_icon('clock', css_class: 'gl-top-0!')
       = n_('%d job', '%d jobs', @pipeline.total_size) % @pipeline.total_size
-      = @pipeline.ref_text
+      = @pipeline.ref_text_legacy
     - if @pipeline.finished_at
       - duration = time_interval_in_words(@pipeline.duration)
       - queued_duration = time_interval_in_words(@pipeline.queued_duration)
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index a7d670f8475..46e1cd07a17 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -9,11 +9,14 @@
 - add_page_startup_graphql_call('pipelines/get_pipeline_details', { projectPath: @project.full_path, iid: @pipeline.iid })
 
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
-  #js-pipeline-header-vue.pipeline-header-container{ data: { full_path: @project.full_path, graphql_resource_etag: graphql_etag_pipeline_path(@pipeline), pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id, pipelines_path: project_pipelines_path(@project) } }
+  - if Feature.enabled?(:pipeline_details_header_vue, @project)
+    #js-pipeline-details-header-vue{ data: js_pipeline_details_header_data(@project, @pipeline) }
+  - else
+    #js-pipeline-header-vue.pipeline-header-container{ data: { full_path: @project.full_path, graphql_resource_etag: graphql_etag_pipeline_path(@pipeline), pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id, pipelines_path: project_pipelines_path(@project) } }
 
   = render_if_exists 'projects/pipelines/cc_validation_required_alert', pipeline: @pipeline
 
-  - if @pipeline.commit.present?
+  - if @pipeline.commit.present? && !Feature.enabled?(:pipeline_details_header_vue, @project)
     = render "projects/pipelines/info", commit: @pipeline.commit
 
   - if pipeline_has_errors
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index a0a90fbe204..6b6aaaad802 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -15,7 +15,10 @@
           - invite_group_top_margin = ''
           - if can_admin_project_member?(@project)
             .js-import-project-members-trigger{ data: { classes: 'gl-md-w-auto gl-w-full' } }
-            .js-import-project-members-modal{ data: { project_id: @project.id, project_name: @project.name, reload_page_on_submit: true.to_s } }
+            .js-import-project-members-modal{ data: { project_id: @project.id,
+              project_name: @project.name,
+              reload_page_on_submit: true.to_s,
+              users_limit_dataset: common_invite_modal_dataset(@project)[:users_limit_dataset] } }
             - invite_group_top_margin = 'gl-md-mt-0 gl-mt-3'
           - if @project.allowed_to_share_with_group?
             .js-invite-group-trigger{ data: { classes: "gl-md-w-auto gl-w-full gl-md-ml-3 #{invite_group_top_margin}", display_text: _('Invite a group') } }
diff --git a/app/views/projects/readme_templates/default.md.tt b/app/views/projects/readme_templates/default.md.tt
index ad1d6cce08d..779b87336ea 100644
--- a/app/views/projects/readme_templates/default.md.tt
+++ b/app/views/projects/readme_templates/default.md.tt
@@ -31,7 +31,7 @@ git push -uf origin <%= params[:default_branch] %>
 - [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
 - [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
 - [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
-- [ ] [Automatically merge when pipeline succeeds](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
 
 ## Test and Deploy
 
diff --git a/app/views/projects/runners/_project_runners.html.haml b/app/views/projects/runners/_project_runners.html.haml
index 1d4e45c71b5..af8f39ce0ad 100644
--- a/app/views/projects/runners/_project_runners.html.haml
+++ b/app/views/projects/runners/_project_runners.html.haml
@@ -7,7 +7,8 @@
     - if can?(current_user, :create_runner, @project)
       = render Pajamas::ButtonComponent.new(href: new_project_runner_path(@project), variant: :confirm) do
         = s_('Runners|New project runner')
-      #js-project-runner-registration-dropdown{ data: { registration_token: @project.runners_token, project_id: @project.id } }
+      .gl-display-inline
+        #js-project-runner-registration-dropdown{ data: { registration_token: @project.runners_token, project_id: @project.id } }
     - else
       = _('Please contact an admin to create runners.')
       = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'restrict-runner-registration-by-all-users-in-an-instance'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/projects/settings/access_tokens/_form.html.haml b/app/views/projects/settings/access_tokens/_form.html.haml
new file mode 100644
index 00000000000..919462a0f62
--- /dev/null
+++ b/app/views/projects/settings/access_tokens/_form.html.haml
@@ -0,0 +1,14 @@
+- type = local_assigns.fetch(:type)
+
+= render 'shared/access_tokens/form',
+    ajax: true,
+    type: type,
+    path: project_settings_access_tokens_path(@project),
+    resource: @project,
+    token: @resource_access_token,
+    scopes: @scopes,
+    access_levels: ProjectMember.permissible_access_level_roles(current_user, @project),
+    default_access_level: Gitlab::Access::GUEST,
+    prefix: :resource_access_token,
+    description_prefix: :project_access_token,
+    help_path: help_page_path('user/project/settings/project_access_tokens', anchor: 'scopes-for-a-project-access-token')
diff --git a/app/views/projects/settings/access_tokens/index.html.haml b/app/views/projects/settings/access_tokens/index.html.haml
index 26c08fcdfe4..df517b5d642 100644
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
@@ -27,18 +27,8 @@
     #js-new-access-token-app{ data: { access_token_type: type } }
 
     - if current_user.can?(:create_resource_access_tokens, @project)
-      = render 'shared/access_tokens/form',
-          ajax: true,
-          type: type,
-          path: project_settings_access_tokens_path(@project),
-          resource: @project,
-          token: @resource_access_token,
-          scopes: @scopes,
-          access_levels: ProjectMember.permissible_access_level_roles(current_user, @project),
-          default_access_level: Gitlab::Access::GUEST,
-          prefix: :resource_access_token,
-          description_prefix: :project_access_token,
-          help_path: help_page_path('user/project/settings/project_access_tokens', anchor: 'scopes-for-a-project-access-token')
+      = render_if_exists 'projects/settings/access_tokens/form',
+        type: type
 
     #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This project has no active access tokens.'), show_role: true
  } }
diff --git a/app/views/projects/settings/operations/_grafana_integration.html.haml b/app/views/projects/settings/operations/_grafana_integration.html.haml
deleted file mode 100644
index 69e42a6c4fb..00000000000
--- a/app/views/projects/settings/operations/_grafana_integration.html.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-.js-grafana-integration{ data: { operations_settings_endpoint: project_settings_operations_path(@project),
-  grafana_integration: { url: grafana_integration_url, token: grafana_integration_masked_token, enabled: grafana_integration_enabled?.to_s } } }
diff --git a/app/views/projects/settings/operations/_metrics_dashboard.html.haml b/app/views/projects/settings/operations/_metrics_dashboard.html.haml
deleted file mode 100644
index 056d3e8102b..00000000000
--- a/app/views/projects/settings/operations/_metrics_dashboard.html.haml
+++ /dev/null
@@ -1,5 +0,0 @@
-.js-operation-settings{ data: { operations_settings_endpoint: project_settings_operations_path(@project),
-  help_page: help_page_path('operations/metrics/dashboards/settings'),
-  external_dashboard: { url: metrics_external_dashboard_url,
-    help_page: help_page_path('operations/metrics/dashboards/settings') },
-  dashboard_timezone: { setting: metrics_dashboard_timezone.upcase } } }
diff --git a/app/views/projects/settings/operations/show.html.haml b/app/views/projects/settings/operations/show.html.haml
index d44ebf1eb83..93ab98c1472 100644
--- a/app/views/projects/settings/operations/show.html.haml
+++ b/app/views/projects/settings/operations/show.html.haml
@@ -2,14 +2,7 @@
 - breadcrumb_title _('Monitor Settings')
 - @force_desktop_expanded_sidebar = true
 
-- if Feature.disabled?(:remove_monitor_metrics)
-  = render 'projects/settings/operations/metrics_dashboard'
-
 = render 'projects/settings/operations/error_tracking'
 = render 'projects/settings/operations/alert_management'
 = render 'projects/settings/operations/incidents'
-
-- if Feature.disabled?(:remove_monitor_metrics)
-  = render 'projects/settings/operations/grafana_integration'
-
 = render_if_exists 'projects/settings/operations/status_page'
diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml
index 12404180362..36ace52df13 100644
--- a/app/views/projects/settings/repository/show.html.haml
+++ b/app/views/projects/settings/repository/show.html.haml
@@ -4,8 +4,7 @@
 - @force_desktop_expanded_sidebar = true
 
 = render "projects/branch_defaults/show"
-- if Feature.enabled?(:branch_rules, @project)
-  = render "projects/branch_rules/show"
+= render "projects/branch_rules/show"
 = render_if_exists "projects/push_rules/index"
 = render "projects/mirrors/mirror_repos"
 
diff --git a/app/views/projects/settings/slacks/edit.html.haml b/app/views/projects/settings/slacks/edit.html.haml
new file mode 100644
index 00000000000..867b90655e3
--- /dev/null
+++ b/app/views/projects/settings/slacks/edit.html.haml
@@ -0,0 +1,20 @@
+- page_title _('Edit Slack integration')
+
+.row.gl-mt-3.gl-mb-3
+  .col-lg-3
+    %h4.gl-mt-0
+      = s_('Integrations|Edit project alias')
+
+    %p= s_('Integrations|You can use this alias in your Slack commands')
+  .col-lg-9
+    = form_errors(@slack_integration)
+    = form_for(@slack_integration, url: project_settings_slack_path(@project), method: :put, html: { class: 'gl-show-field-errors js-integration-settings-form'}) do |form|
+      .form-group.row
+        = form.label :alias, s_('Integrations|Enter your alias'), class: 'col-form-label'
+        .col-sm-10
+          = form.text_field :alias, class: 'form-control', placeholder: @slack_integration.alias, required: true
+
+      .footer-block.row-content-block
+        = form.submit _('Save changes'), pajamas_button: true
+        &nbsp;
+        = link_to _('Cancel'), edit_project_settings_integration_path(@project, @service), class: 'btn gl-button btn-cancel'
diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml
index 1df323e7451..53c3d16ee64 100644
--- a/app/views/projects/tags/new.html.haml
+++ b/app/views/projects/tags/new.html.haml
@@ -18,17 +18,17 @@
 = form_tag namespace_project_tags_path, method: :post, id: "new-tag-form", class: "common-note-form tag-form js-quick-submit js-requires-input" do
   .form-group.row
     .col-sm-12
-      = label_tag :tag_name, nil
+      = label_tag :tag_name, _('Tag name')
       = text_field_tag :tag_name, params[:tag_name], required: true, autofocus: true, class: 'form-control', data: { qa_selector: "tag_name_field" }
   .form-group.row
     .col-sm-auto.create-from
-      = label_tag :ref, 'Create from'
+      = label_tag :ref, _('Create from')
       .js-new-tag-ref-selector{ data: { project_id: @project.id, default_branch_name: default_ref, hidden_input_name: 'ref' } }
       .form-text.text-muted
         = s_('TagsPage|Existing branch name, tag, or commit SHA')
   .form-group.row
     .col-sm-12
-      = label_tag :message, nil
+      = label_tag :message, _('Message')
       = text_area_tag :message, @message, required: false, class: 'form-control', rows: 5, data: { qa_selector: "tag_message_field" }
       .form-text.text-muted
         = tag_description_help_text
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index 3124f47c832..5127972c406 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -1,6 +1,6 @@
 - user = user_email = nil
-- if @tag.tagger
-  - user_email = @tag.tagger.email
+- if @tag.user_email
+  - user_email = @tag.user_email
   - user = User.find_by_any_email(user_email)
 - add_to_breadcrumbs s_('TagsPage|Tags'), project_tags_path(@project)
 - breadcrumb_title @tag.name
diff --git a/app/views/protected_branches/_create_protected_branch.html.haml b/app/views/protected_branches/_create_protected_branch.html.haml
index b4765ab49c2..799f6aa6031 100644
--- a/app/views/protected_branches/_create_protected_branch.html.haml
+++ b/app/views/protected_branches/_create_protected_branch.html.haml
@@ -3,12 +3,12 @@
     = dropdown_tag(_('Select'),
                     options: { toggle_class: 'js-allowed-to-merge wide',
                     dropdown_class: 'dropdown-menu-selectable capitalize-header', dropdown_qa_selector: 'allowed_to_merge_dropdown_content', dropdown_testid: 'allowed-to-merge-dropdown',
-                    data: { field_name: 'protected_branch[merge_access_levels_attributes][0][access_level]', input_id: 'merge_access_levels_attributes', qa_selector: 'allowed_to_merge_dropdown' }})
+                    data: { field_name: 'protected_branch[merge_access_levels_attributes][0][access_level]', input_id: 'merge_access_levels_attributes', qa_selector: 'select_allowed_to_merge_dropdown' }})
 - content_for :push_access_levels do
   .push_access_levels-container
     = dropdown_tag(_('Select'),
                     options: { toggle_class: "js-allowed-to-push js-multiselect wide",
                     dropdown_class: 'dropdown-menu-selectable capitalize-header', dropdown_qa_selector: 'allowed_to_push_dropdown_content' , dropdown_testid: 'allowed-to-push-dropdown',
-                    data: { field_name: 'protected_branch[push_access_levels_attributes][0][access_level]', input_id: 'push_access_levels_attributes', qa_selector: 'allowed_to_push_dropdown' }})
+                    data: { field_name: 'protected_branch[push_access_levels_attributes][0][access_level]', input_id: 'push_access_levels_attributes', qa_selector: 'select_allowed_to_push_dropdown' }})
 
 = render 'protected_branches/shared/create_protected_branch', protected_branch_entity: protected_branch_entity
diff --git a/app/views/protected_branches/shared/_create_protected_branch.html.haml b/app/views/protected_branches/shared/_create_protected_branch.html.haml
index 9bc224b2e78..d97347b89de 100644
--- a/app/views/protected_branches/shared/_create_protected_branch.html.haml
+++ b/app/views/protected_branches/shared/_create_protected_branch.html.haml
@@ -1,9 +1,9 @@
 = gitlab_ui_form_for [protected_branch_entity, @protected_branch], html: { class: 'new-protected-branch js-new-protected-branch' } do |f|
   %input{ type: 'hidden', name: 'update_section', value: 'js-protected-branches-settings' }
   = render Pajamas::CardComponent.new(card_options: { class: "gl-mb-5" }) do |c|
-    - c.header do
+    - c.with_header do
       = s_("ProtectedBranch|Protect a branch")
-    - c.body do
+    - c.with_body do
       = form_errors(@protected_branch)
       .form-group.row
         = f.label :name, s_('ProtectedBranch|Branch:'), class: 'col-sm-12'
@@ -13,7 +13,7 @@
           - else
             = render partial: "protected_branches/shared/dropdown", locals: { f: f, toggle_classes: 'gl-w-full! gl-form-input-lg' }
           .form-text.text-muted
-            - wildcards_url = help_page_url('user/project/protected_branches', anchor: 'configure-multiple-protected-branches-by-using-a-wildcard')
+            - wildcards_url = help_page_url('user/project/protected_branches', anchor: 'protect-multiple-branches-with-wildcard-rules')
             - wildcards_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wildcards_url }
             - placeholders = { wildcards_link_start: wildcards_link_start, wildcards_link_end: '</a>', code_tag_start: '<code>', code_tag_end: '</code>' }
             - if protected_branch_entity.is_a?(Group)
@@ -38,7 +38,7 @@
             - force_push_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: force_push_docs_url }
             = (s_("ProtectedBranch|Allow all users with push access to %{tag_start}force push%{tag_end}.") % { tag_start: force_push_link_start, tag_end: '</a>' }).html_safe
       = render_if_exists 'protected_branches/ee/code_owner_approval_form', f: f, protected_branch_entity: protected_branch_entity
-    - c.footer do
+    - c.with_footer do
       = f.submit s_('ProtectedBranch|Protect'), disabled: true, data: { qa_selector: 'protect_button' }, pajamas_button: true
 
   .js-alert-protected-branch-created-container.gl-mb-5
diff --git a/app/views/registrations/welcome/show.html.haml b/app/views/registrations/welcome/show.html.haml
index 6c8ab5654a0..986bc53fd81 100644
--- a/app/views/registrations/welcome/show.html.haml
+++ b/app/views/registrations/welcome/show.html.haml
@@ -11,7 +11,6 @@
 .row.gl-flex-grow-1
   .d-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full.gl-px-5.gl-pb-5
     .edit-profile.login-page.d-flex.flex-column.gl-align-items-center
-      = render_if_exists "registrations/welcome/progress_bar"
       %h2.gl-text-center= html_escape(_('Welcome to GitLab,%{br_tag}%{name}!')) % { name: html_escape(current_user.first_name), br_tag: '<br/>'.html_safe }
       - if Gitlab.com?
         %p.gl-text-center= html_escape(_('%{gitlab_experience_text}. We won\'t share this information with anyone.')) % { gitlab_experience_text: gitlab_experience_text }
@@ -23,7 +22,7 @@
                 'aria-live' => 'assertive',
                 data: { testid: 'welcome-form' } }) do |f|
         = render Pajamas::CardComponent.new do |c|
-          - c.body do
+          - c.with_body do
             .devise-errors
               = render 'devise/shared/error_messages', resource: current_user
             .row
diff --git a/app/views/search/_results.html.haml b/app/views/search/_results.html.haml
index 99558f61b25..7399f51d7f8 100644
--- a/app/views/search/_results.html.haml
+++ b/app/views/search/_results.html.haml
@@ -1,5 +1,3 @@
-= render_if_exists 'shared/promotions/promote_advanced_search'
-
 .gl-w-full.gl-flex-grow-1.gl-overflow-x-hidden
   = render partial: 'search/results_status' unless @search_objects.to_a.empty?
   = render partial: 'search/results_list'
diff --git a/app/views/search/_results_list.html.haml b/app/views/search/_results_list.html.haml
index fcbf0ba4452..ff79f003e7d 100644
--- a/app/views/search/_results_list.html.haml
+++ b/app/views/search/_results_list.html.haml
@@ -1,3 +1,6 @@
+.advanced-search-promote
+  = render_if_exists 'shared/promotions/promote_advanced_search'
+
 - if @timeout
   = render partial: "search/results/timeout"
 - elsif @search_results.respond_to?(:failed?) && @search_results.failed?
diff --git a/app/views/shared/_alert_info.html.haml b/app/views/shared/_alert_info.html.haml
index 30dfc87b9bf..e6dbcfbff1c 100644
--- a/app/views/shared/_alert_info.html.haml
+++ b/app/views/shared/_alert_info.html.haml
@@ -1,3 +1,3 @@
 = render Pajamas::AlertComponent.new(variant: :info, dismissible: true) do |c|
-  = c.body do
+  - c.with_body do
     = body
diff --git a/app/views/shared/_auto_devops_callout.html.haml b/app/views/shared/_auto_devops_callout.html.haml
index c468b3a2001..6d8d4f4cab9 100644
--- a/app/views/shared/_auto_devops_callout.html.haml
+++ b/app/views/shared/_auto_devops_callout.html.haml
@@ -6,7 +6,7 @@
     svg_path: 'illustrations/autodevops.svg',
     banner_options: { class: 'js-autodevops-banner auto-devops-callout', 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
+    - c.with_title do
       = s_('AutoDevOps|Auto DevOps')
 
     %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.')
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 ac7d56520f7..f4af3ea70d4 100644
--- a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
+++ b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
@@ -2,11 +2,11 @@
   = render Pajamas::AlertComponent.new(alert_options: { class: 'auto-devops-implicitly-enabled-banner', data: { qa_selector: 'auto_devops_banner_content' } },
     close_button_options: { class: 'hide-auto-devops-implicitly-enabled-banner',
                             data: { project_id: project.id }}) do |c|
-    = c.body do
+    - c.with_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
         %div
           = _('Container registry is not enabled on this GitLab instance. Ask an administrator to enable it in order for Auto DevOps to work.')
-    = c.actions do
+    - c.with_actions do
       = link_to _('Settings'), project_settings_ci_cd_path(project), class: 'alert-link btn gl-button btn-confirm'
       = link_to _('More information'), help_page_path('topics/autodevops/index.md'), target: '_blank', class: 'alert-link btn gl-button btn-default gl-ml-3'
diff --git a/app/views/shared/_broadcast_message.html.haml b/app/views/shared/_broadcast_message.html.haml
index a2fed883739..2f470d5ef53 100644
--- a/app/views/shared/_broadcast_message.html.haml
+++ b/app/views/shared/_broadcast_message.html.haml
@@ -3,7 +3,8 @@
 - preview = local_assigns.fetch(:preview, false)
 
 - unless message.notification?
-  .gl-broadcast-message.broadcast-banner-message.banner{ role: "alert", class: "js-broadcast-notification-#{message.id} #{message.theme}" }
+  .gl-broadcast-message.broadcast-banner-message.banner{ role: "alert",
+    class: "js-broadcast-notification-#{message.id} #{message.theme}", data: { testid: 'banner-broadcast-message' } }
     .gl-broadcast-message-content
       .gl-broadcast-message-icon
         = sprite_icon(icon_name)
@@ -19,21 +20,22 @@
         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')
+        icon_classes: 'gl-text-white')
 - else
   - notification_class = "js-broadcast-notification-#{message.id}"
   - notification_class << ' preview' if preview
-  .broadcast-message.broadcast-notification-message.mt-2{ role: "alert", class: notification_class, data: { qa_selector: 'broadcast_notification_container' } }
-    = sprite_icon(icon_name, css_class: 'vertical-align-text-top')
-    - if message.message.present?
-      %h2.gl-sr-only
-        = s_("Admin message")
-      = render_broadcast_message(message)
-    - else
-      = yield
+  .gl-broadcast-message.broadcast-notification-message.gl-mt-3{ role: "alert", class: notification_class, data: { qa_selector: 'broadcast_notification_container' } }
+    .gl-broadcast-message-content
+      .gl-broadcast-message-icon
+        = sprite_icon(icon_name, css_class: 'vertical-align-text-top')
+      - if message.message.present?
+        %h2.gl-sr-only
+          = s_("Admin message")
+        = render_broadcast_message(message)
+      - else
+        = yield
     - if !preview
-      = render Pajamas::ButtonComponent.new(variant: :link,
+      = render Pajamas::ButtonComponent.new(category: :tertiary,
         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, qa_selector: 'close_button' } },
-        icon_classes: 'gl-mx-3! gl-text-gray-700')
+        button_options: { class: 'js-dismiss-current-broadcast-notification', 'aria-label': _('Close'), data: { id: message.id, expire_date: message.ends_at.iso8601, qa_selector: 'close_button' } })
diff --git a/app/views/shared/_choose_avatar_button.html.haml b/app/views/shared/_choose_avatar_button.html.haml
index e3f2e1aa436..657fef1f74d 100644
--- a/app/views/shared/_choose_avatar_button.html.haml
+++ b/app/views/shared/_choose_avatar_button.html.haml
@@ -1 +1 @@
-= render 'shared/file_picker_button', f: f, field: :avatar, help_text: _("Max file size is 200 KB.")
+= render 'shared/file_picker_button', f: f, field: :avatar, help_text: _("Max file size is 200 KiB.")
diff --git a/app/views/shared/_custom_attributes.html.haml b/app/views/shared/_custom_attributes.html.haml
index 6e5f1cb063c..be96e77dbd4 100644
--- a/app/views/shared/_custom_attributes.html.haml
+++ b/app/views/shared/_custom_attributes.html.haml
@@ -1,9 +1,9 @@
 - return unless custom_attributes.present?
 
 = render Pajamas::CardComponent.new(body_options: { class: 'gl-py-0' }) do |c|
-  - c.header do
+  - c.with_header do
     = link_to(_('Custom Attributes'), help_page_path('api/custom_attributes.md'))
-  - c.body do
+  - c.with_body do
     %ul.content-list
       - custom_attributes.each do |custom_attribute|
         %li
diff --git a/app/views/shared/_event_filter.html.haml b/app/views/shared/_event_filter.html.haml
index 03534bf78d1..82b4a314b59 100644
--- a/app/views/shared/_event_filter.html.haml
+++ b/app/views/shared/_event_filter.html.haml
@@ -1,8 +1,10 @@
 - show_group_events = local_assigns.fetch(:show_group_events, false)
 
 .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller.flex-fill
-  .fade-left= sprite_icon('chevron-lg-left', size: 12)
-  .fade-right= sprite_icon('chevron-lg-right', size: 12)
+  %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+    = sprite_icon('chevron-lg-left', size: 12)
+  %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+    = sprite_icon('chevron-lg-right', size: 12)
   %ul.nav-links.event-filter.scrolling-tabs.nav.nav-tabs
     = event_filter_link EventFilter::ALL, _('All'), s_('EventFilterBy|Filter by all')
     - if event_filter_visible(:repository)
diff --git a/app/views/shared/_ide_root.html.haml b/app/views/shared/_ide_root.html.haml
index 848ff1e5728..db3e76e188c 100644
--- a/app/views/shared/_ide_root.html.haml
+++ b/app/views/shared/_ide_root.html.haml
@@ -3,9 +3,8 @@
 
 -# Fix for iOS 13+, the height of the page is actually less than
 -# 100vh because of the presence of the bottom bar
-- @body_class = 'gl-max-h-full gl-fixed'
 
-#ide.gl--flex-center.gl-h-full{ data: data }
-  .gl-text-center
-    = gl_loading_icon(size: 'md')
-    %h2.clgray= loading_text
+#ide.gl-h-full{ data: data }
+  .web-ide-loader.gl-display-flex.gl-justify-content-center.gl-align-items-center.gl-flex-direction-column.gl-h-full.gl-mr-auto.gl-ml-auto
+    = brand_header_logo
+    %h3.clblack.gl-mt-6= loading_text
diff --git a/app/views/shared/_import_form.html.haml b/app/views/shared/_import_form.html.haml
index d10f514dc58..668ac908703 100644
--- a/app/views/shared/_import_form.html.haml
+++ b/app/views/shared/_import_form.html.haml
@@ -25,7 +25,7 @@
       alert_options: { class: 'gl-mt-3 js-import-url-error hide' },
       dismissible: false,
       close_button_options: { class: 'js-close-2fa-enabled-success-alert' }) do |c|
-      = c.body do
+      - c.with_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
   .row
diff --git a/app/views/shared/_model_version_conflict.html.haml b/app/views/shared/_model_version_conflict.html.haml
index 134dcf8db7f..8ab821c0435 100644
--- a/app/views/shared/_model_version_conflict.html.haml
+++ b/app/views/shared/_model_version_conflict.html.haml
@@ -1,6 +1,6 @@
 = render Pajamas::AlertComponent.new(variant: :danger,
   dismissible: false,
   alert_options: { class: 'gl-mb-5' }) do |c|
-  = c.body do
+  - c.with_body do
     - link_to_model = link_to(model_name, link_path, target: '_blank', rel: 'noopener noreferrer')
     = _("Someone edited this %{model_name} at the same time you did. Please check out the %{link_to_model} and make sure your changes will not unintentionally remove theirs.").html_safe % { model_name: model_name, link_to_model: link_to_model }
diff --git a/app/views/shared/_new_merge_request_checkbox.html.haml b/app/views/shared/_new_merge_request_checkbox.html.haml
index 6bc6d0943c9..fb3dfba2691 100644
--- a/app/views/shared/_new_merge_request_checkbox.html.haml
+++ b/app/views/shared/_new_merge_request_checkbox.html.haml
@@ -1,8 +1,9 @@
-.form-check.gl-mt-3
+.form-group.gl-mt-3
   - nonce = SecureRandom.hex
-  = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request form-check-input', id: "create_merge_request-#{nonce}"
-  = label_tag "create_merge_request-#{nonce}", class: 'form-check-label' do
-    - translation_variables = { new_merge_request: "<strong>#{_('new merge request')}</strong>" }
-    - translation = _('Start a %{new_merge_request} with these changes') % translation_variables
-    #{ translation.html_safe }
-
+  = render Pajamas::CheckboxTagComponent.new(name: 'create_merge_request',
+    checked: true,
+    checkbox_options: { class: 'js-create-merge-request', id: "create_merge_request-#{nonce}" }) do |c|
+    - c.with_label do
+      - translation_variables = { new_merge_request: "<strong>#{_('new merge request')}</strong>" }
+      - translation = _('Start a %{new_merge_request} with these changes') % translation_variables
+      #{ translation.html_safe }
diff --git a/app/views/shared/_new_nav_announcement.html.haml b/app/views/shared/_new_nav_announcement.html.haml
new file mode 100644
index 00000000000..8cabab09ec2
--- /dev/null
+++ b/app/views/shared/_new_nav_announcement.html.haml
@@ -0,0 +1,33 @@
+- return unless show_new_navigation_callout?
+
+- changes_url = 'https://gitlab.com/groups/gitlab-org/-/epics/9044#whats-different'
+- vision_url = 'https://about.gitlab.com/blog/2023/05/01/gitlab-product-navigation/'
+- design_url = 'https://about.gitlab.com/blog/2023/05/15/overhauling-the-navigation-is-like-building-a-dream-home/'
+- feedback_url = 'https://gitlab.com/gitlab-org/gitlab/-/issues/409005'
+- docs_url = help_page_path('tutorials/left_sidebar/index')
+
+- changes_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: changes_url }
+- vision_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: vision_url }
+- design_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: design_url }
+- link_end = '</a>'.html_safe
+
+- welcome_text = _('For the next few releases, you can go to your avatar at any time to turn the new navigation on and off.')
+- cta_text = _('Read more about the %{changes_link_start}changes%{link_end}, the %{vision_link_start}vision%{link_end}, and the %{design_link_start}design%{link_end}.' % { changes_link_start: changes_link_start,
+                  vision_link_start: vision_link_start,
+                  design_link_start: design_link_start,
+                  link_end: link_end}).html_safe # rubocop:disable Gettext/StaticIdentifier
+
+= render Pajamas::AlertComponent.new(dismissible: true, title: _('Welcome to a new navigation experience'),
+  alert_options: { class: 'js-new-navigation-callout', data: { feature_id: "new_navigation_callout", dismiss_endpoint: callouts_path }}) do |c|
+  - c.with_body do
+    %p
+      = welcome_text
+      = cta_text
+  - c.with_actions do
+    = render Pajamas::ButtonComponent.new(variant: :confirm,
+      href: docs_url,
+      button_options: { class: 'gl-alert-action', data: { track_action: 'click_button', track_label: 'banner_nav_learn_more' } }) do |c|
+      = _('Learn more')
+    = render Pajamas::ButtonComponent.new(href: feedback_url,
+      button_options: { data: { track_action: 'click_button', track_label: 'banner_nav_provide_feedback' } }) do |c|
+      = _('Provide feedback')
diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml
index 76830230cf6..e0d385024cd 100644
--- a/app/views/shared/_no_password.html.haml
+++ b/app/views/shared/_no_password.html.haml
@@ -2,8 +2,8 @@
   = render Pajamas::AlertComponent.new(variant: :warning,
     alert_options: { class: 'js-no-password-message' },
     close_button_options: { class: 'js-hide-no-password-message' }) do |c|
-    = c.body do
+    - c.with_body do
       = no_password_message
-    = c.actions do
+    - c.with_actions do
       = link_to _('Remind later'), '#', class: 'js-hide-no-password-message gl-alert-action btn btn-confirm btn-md gl-button'
       = link_to _("Don't show again"), profile_path(user: { hide_no_password: true }), method: :put, role: 'button', class: 'gl-alert-action btn btn-default btn-md gl-button'
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index be1df54a432..e9c0858e090 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -2,8 +2,8 @@
   = render Pajamas::AlertComponent.new(variant: :warning,
     alert_options: { class: 'js-no-ssh-message' },
     close_button_options: { class: 'js-hide-no-ssh-message'}) do |c|
-    = c.body do
+    - c.with_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
+    - c.with_actions do
       = link_to s_('MissingSSHKeyWarningLink|Add SSH key'), profile_keys_path, class: "gl-alert-action btn btn-confirm btn-md gl-button"
       = link_to s_("MissingSSHKeyWarningLink|Don't show again"), profile_path(user: { hide_no_ssh_key: true }), method: :put, role: 'button', class: 'gl-alert-action btn btn-default btn-md gl-button'
diff --git a/app/views/shared/_outdated_browser.html.haml b/app/views/shared/_outdated_browser.html.haml
index 0af378cb883..79d0231536b 100644
--- a/app/views/shared/_outdated_browser.html.haml
+++ b/app/views/shared/_outdated_browser.html.haml
@@ -1,6 +1,6 @@
 - if outdated_browser?
   = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do |c|
-    = c.body do
+    - c.with_body do
       = s_('OutdatedBrowser|GitLab may not work properly, because you are using an outdated web browser.')
       %br
       - browser_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('install/requirements', anchor: 'supported-web-browsers') }
diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml
index 60be03c6631..ce49193e27b 100644
--- a/app/views/shared/_project_limit.html.haml
+++ b/app/views/shared/_project_limit.html.haml
@@ -2,8 +2,8 @@
   = render Pajamas::AlertComponent.new(variant: :warning,
     dismissible: false,
     alert_options: { class: 'project-limit-message' }) do |c|
-    = c.body do
+    - c.with_body do
       = _("You won't be able to create new projects because you have reached your project limit.")
-    = c.actions do
+    - c.with_actions do
       = link_to _('Remind later'), '#', class: 'alert-link hide-project-limit-message btn gl-button btn-confirm'
       = link_to _("Don't show again"), profile_path(user: {hide_project_limit: true}), method: :put, class: 'alert-link btn gl-button btn-default gl-ml-3'
diff --git a/app/views/shared/_repository_size_limit_setting_registration_features_cta.html.haml b/app/views/shared/_repository_size_limit_setting_registration_features_cta.html.haml
index 9fe1e3087f6..0d084a99528 100644
--- a/app/views/shared/_repository_size_limit_setting_registration_features_cta.html.haml
+++ b/app/views/shared/_repository_size_limit_setting_registration_features_cta.html.haml
@@ -3,7 +3,7 @@
 .row
   .form-group.col-md-9
     = form.label :disabled_repository_size_limit, class: 'label-bold' do
-      = _('Repository size limit (MB)')
+      = _('Repository size limit (MiB)')
     = form.number_field :disabled_repository_size_limit, value: '', class: 'form-control', disabled: true
     %span.form-text.text-muted
       = render 'shared/registration_features_discovery_message'
diff --git a/app/views/shared/_service_ping_consent.html.haml b/app/views/shared/_service_ping_consent.html.haml
index 700ffa7aa12..108d846e3ee 100644
--- a/app/views/shared/_service_ping_consent.html.haml
+++ b/app/views/shared/_service_ping_consent.html.haml
@@ -1,10 +1,10 @@
 - if session[:ask_for_usage_stats_consent]
   = render Pajamas::AlertComponent.new(alert_options: { class: 'service-ping-consent-message' }) do |c|
-    = c.body do
+    - c.with_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'
       = s_('To help improve GitLab, we would like to periodically %{docs_link}. This can be changed at any time in %{settings_link}.').html_safe % { docs_link: docs_link, settings_link: settings_link }
-    = c.actions do
+    - c.with_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-confirm'
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 ff4b2de2286..290152d5803 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
@@ -4,9 +4,9 @@
                            dismiss_endpoint: callouts_path,
                            defer_links: 'true' }},
   close_button_options: { data: { testid: 'close-account-recovery-regular-check-callout' }}) do |c|
-  = c.body do
+  - c.with_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'
-  = c.actions do
+  - c.with_actions do
     = link_to profile_two_factor_auth_path, class: 'deferred-link btn gl-alert-action btn-confirm btn-md gl-button' do
       = s_('Profiles|Manage two-factor authentication')
diff --git a/app/views/shared/_web_ide_button.html.haml b/app/views/shared/_web_ide_button.html.haml
index aeaccdfa54b..803f6f9efce 100644
--- a/app/views/shared/_web_ide_button.html.haml
+++ b/app/views/shared/_web_ide_button.html.haml
@@ -1,5 +1,5 @@
 - type = blob ? 'blob' : 'tree'
 - button_data = web_ide_button_data({ blob: blob })
-- fork_options = fork_modal_options(@project, @ref, @path, blob)
+- fork_options = fork_modal_options(@project, blob)
 
 .gl-display-inline-block{ data: { options: button_data.merge(fork_options).to_json, web_ide_promo_popover_img: image_path('web-ide-promo-popover.svg') }, id: "js-#{type}-web-ide-link" }
diff --git a/app/views/shared/access_tokens/_form.html.haml b/app/views/shared/access_tokens/_form.html.haml
index eada58091b7..ac359d37c49 100644
--- a/app/views/shared/access_tokens/_form.html.haml
+++ b/app/views/shared/access_tokens/_form.html.haml
@@ -1,5 +1,5 @@
 - ajax = local_assigns.fetch(:ajax, false)
-- title = local_assigns.fetch(:title, _('Add a %{type}') % { type: type })
+- title = local_assigns.fetch(:title, s_('AccessTokens|Add a %{type}') % { type: type })
 - prefix = local_assigns.fetch(:prefix, :personal_access_token)
 - description_prefix = local_assigns.fetch(:description_prefix, prefix)
 - help_path = local_assigns.fetch(:help_path)
@@ -10,7 +10,7 @@
 %h5.gl-mt-0
   = title
 %p.profile-settings-content
-  = _("Enter the name of your application, and we'll return a unique %{type}.") % { type: type }
+  = s_("AccessTokens|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: { id: 'js-new-access-token-form', class: 'js-requires-input' }, remote: ajax do |f|
 
@@ -19,11 +19,11 @@
   .row
     .form-group.col
       .row
-        = f.label :name, _('Token name'), class: 'label-bold col-md-12'
+        = f.label :name, s_('AccessTokens|Token name'), class: 'label-bold col-md-12'
         .col-md-6
           - resource_type = resource.is_a?(Group) ? "group" : "project"
           = f.text_field :name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'access_token_name_field' }, :'aria-describedby' => 'access_token_help_text'
-        %span.form-text.text-muted.col-md-12#access_token_help_text= _("For example, the application using the token or the purpose of the token. Do not give sensitive information for the name of the token, as it will be visible to all %{resource_type} members.") % { resource_type: resource_type }
+        %span.form-text.text-muted.col-md-12#access_token_help_text= s_("AccessTokens|For example, the application using the token or the purpose of the token. Do not give sensitive information for the name of the token, as it will be visible to all %{resource_type} members.") % { resource_type: resource_type }
 
   .row
     .col
@@ -33,18 +33,18 @@
   - if resource
     .row
       .form-group.col-md-6
-        = label_tag :access_level, _("Select a role"), class: "label-bold"
+        = label_tag :access_level, s_("AccessTokens|Select a role"), class: "label-bold"
         .select-wrapper
           = select_tag :"#{prefix}[access_level]", options_for_select(access_levels, default_access_level), class: "form-control select-control", data: { qa_selector: 'access_token_access_level' }
           = sprite_icon('chevron-down', css_class: "gl-icon gl-absolute gl-top-3 gl-right-3 gl-text-gray-200")
 
   .form-group
     %b{ :'aria-describedby' => 'select_scope_help_text' }
-      = s_('Tokens|Select scopes')
+      = s_('AccessTokens|Select scopes')
     %p.text-secondary#select_scope_help_text
-      = s_('Tokens|Scopes set the permission levels granted to the token.')
+      = s_('AccessTokens|Scopes set the permission levels granted to the token.')
       = link_to _("Learn more."), help_path, target: '_blank', rel: 'noopener noreferrer'
     = render 'shared/tokens/scopes_form', prefix: prefix, description_prefix: description_prefix, token: token, scopes: scopes, f: f
 
   .gl-mt-3
-    = f.submit _('Create %{type}') % { type: type }, data: { qa_selector: 'create_token_button' }, pajamas_button: true
+    = f.submit s_('AccessTokens|Create %{type}') % { type: type }, data: { qa_selector: 'create_token_button' }, pajamas_button: true
diff --git a/app/views/shared/admin/_admin_note.html.haml b/app/views/shared/admin/_admin_note.html.haml
index 2bf6baaf608..77854439bbb 100644
--- a/app/views/shared/admin/_admin_note.html.haml
+++ b/app/views/shared/admin/_admin_note.html.haml
@@ -1,7 +1,7 @@
 - if @group.admin_note&.note?
   - text = @group.admin_note.note
   = render Pajamas::CardComponent.new(card_options: { class: 'gl-border-blue-500 gl-mb-5' }, header_options: { class: 'gl-bg-blue-500 gl-text-white' }) do |c|
-    - c.header do
+    - c.with_header do
       = s_('Admin|Admin notes')
-    - c.body do
+    - c.with_body do
       %p= text
diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml
index 1ab9e288a9e..387a83873b5 100644
--- a/app/views/shared/empty_states/_issues.html.haml
+++ b/app/views/shared/empty_states/_issues.html.haml
@@ -8,8 +8,8 @@
 
 .row.empty-state
   .col-12
-    .svg-content
-      = image_tag 'illustrations/issues.svg'
+    .svg-content.svg-150
+      = image_tag 'illustrations/empty-state/empty-issues-md.svg'
   .col-12
     .text-content
       - if has_filter_bar_param?
diff --git a/app/views/shared/errors/_gitaly_unavailable.html.haml b/app/views/shared/errors/_gitaly_unavailable.html.haml
index ba3293a3f75..9b60071cb91 100644
--- a/app/views/shared/errors/_gitaly_unavailable.html.haml
+++ b/app/views/shared/errors/_gitaly_unavailable.html.haml
@@ -2,5 +2,5 @@
   variant: :danger,
   dismissible: false,
   title: reason) do |c|
-  = c.body do
+  - c.with_body do
     = s_('The git server, Gitaly, is not available at this time. Please contact your administrator.')
diff --git a/app/views/shared/file_hooks/_index.html.haml b/app/views/shared/file_hooks/_index.html.haml
index 16e89463a4b..ba968c6b2d2 100644
--- a/app/views/shared/file_hooks/_index.html.haml
+++ b/app/views/shared/file_hooks/_index.html.haml
@@ -12,9 +12,9 @@
   .col-lg-8.gl-mb-3
     - if file_hooks.any?
       = render Pajamas::CardComponent.new do |c|
-        - c.header do
+        - c.with_header do
           = _('File Hooks (%{count})') % { count: file_hooks.count }
-        - c.body do
+        - c.with_body do
           %ul.content-list
             - file_hooks.each do |file|
               %li
@@ -22,5 +22,5 @@
                   = File.basename(file)
     - else
       = render Pajamas::CardComponent.new do |c|
-        - c.body do
+        - c.with_body do
           .nothing-here-block= _('No file hooks found.')
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
index 8b5b4b6e5fa..1971c2da913 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -13,7 +13,7 @@
   = render Pajamas::AlertComponent.new(title: _('Internal error occurred while delivering this webhook.'),
     variant: :danger,
     dismissible: false) do |c|
-    = c.body do
+    - c.with_body do
       = _('Error: %{error}') % { error: hook_log.internal_error_message }
 
 %h4= _('Response')
@@ -41,6 +41,3 @@
   - hook_log.request_headers.each do |k, v|
     <span class="gl-font-weight-bold">#{k}:</span> #{v}
     %br
-
-
-
diff --git a/app/views/shared/integrations/_slack_notifications_deprecation_alert.html.haml b/app/views/shared/integrations/_slack_notifications_deprecation_alert.html.haml
index de4439a8fde..c77cc687e4f 100644
--- a/app/views/shared/integrations/_slack_notifications_deprecation_alert.html.haml
+++ b/app/views/shared/integrations/_slack_notifications_deprecation_alert.html.haml
@@ -3,7 +3,7 @@
     variant: :warning,
     dismissible: false,
     alert_options: { class: 'gl-mt-5', data: { testid: "slack-notifications-deprecation" } }) do |c|
-    = c.body do
+    - c.with_body do
       - help_page_link = help_page_url('user/project/integrations/gitlab_slack_application')
       - learn_more_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_link }
 
@@ -13,7 +13,7 @@
     variant: :warning,
     dismissible: false,
     alert_options: { class: 'gl-mt-5', data: { testid: "slack-notifications-deprecation" } }) do |c|
-    = c.body do
+    - c.with_body do
       - help_page_link = help_page_url('user/project/integrations/gitlab_slack_application')
       - learn_more_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_link }
 
diff --git a/app/views/shared/integrations/gitlab_slack_application/_help.html.haml b/app/views/shared/integrations/gitlab_slack_application/_help.html.haml
new file mode 100644
index 00000000000..0956f1183cb
--- /dev/null
+++ b/app/views/shared/integrations/gitlab_slack_application/_help.html.haml
@@ -0,0 +1,10 @@
+.info-well
+  .well-segment
+    %p
+      = s_("SlackIntegration|This integration allows users to perform common operations on this project by entering slash commands in Slack.")
+      = link_to _('Learn more'), help_page_path('user/project/integrations/gitlab_slack_application.md')
+    %p
+      = s_("SlackIntegration|See the list of available commands in Slack after setting up this integration by entering")
+      %kbd.inline /gitlab help
+- if integration.project_level?
+  = render "shared/integrations/#{integration.to_param}/slack_integration_form", integration: integration
diff --git a/app/views/shared/integrations/gitlab_slack_application/_slack_button.html.haml b/app/views/shared/integrations/gitlab_slack_application/_slack_button.html.haml
new file mode 100644
index 00000000000..b22a6eeca90
--- /dev/null
+++ b/app/views/shared/integrations/gitlab_slack_application/_slack_button.html.haml
@@ -0,0 +1,4 @@
+= link_to add_to_slack_link(project, slack_app_id), class: 'btn btn-default gl-button gl-pr-6!' do
+  = image_tag 'illustrations/slack_logo.svg', class: 'gl-icon gl-button-icon gl-w-9! gl-h-9! gl-my-n3! gl-mr-0!'
+  %strong.gl-button-text
+    = label
diff --git a/app/views/shared/integrations/gitlab_slack_application/_slack_integration_form.html.haml b/app/views/shared/integrations/gitlab_slack_application/_slack_integration_form.html.haml
new file mode 100644
index 00000000000..5c9f77f8c12
--- /dev/null
+++ b/app/views/shared/integrations/gitlab_slack_application/_slack_integration_form.html.haml
@@ -0,0 +1,32 @@
+- slack_integration = integration.slack_integration
+- if slack_integration
+  %table.gl-table.gl-w-full
+    %colgroup
+      %col{ width: "25%" }
+      %col{ width: "35%" }
+      %col{ width: "20%" }
+      %col
+    %thead
+      %tr
+        %th= s_('SlackIntegration|Team name')
+        %th= s_('SlackIntegration|Project alias')
+        %th= _('Created')
+        %th
+    %tr
+      %td{ class: 'gl-py-3!' }
+        = slack_integration.team_name
+      %td{ class: 'gl-py-3!' }
+        = slack_integration.alias
+      %td{ class: 'gl-py-3!' }
+        = time_ago_with_tooltip(slack_integration.created_at)
+      %td{ class: 'gl-py-3!' }
+        .controls
+          - project = integration.project
+          = link_to _('Edit'), edit_project_settings_slack_path(project), class: 'btn gl-button btn-default'
+          = link_to sprite_icon('remove', css_class: 'gl-icon'), project_settings_slack_path(project), method: :delete, class: 'btn gl-button btn-danger btn-danger-secondary', aria: { label: s_('SlackIntegration|Remove project') }, data: { confirm_btn_variant: "danger", confirm: s_('SlackIntegration|Are you sure you want to remove this project from the GitLab for Slack app?') }
+  .gl-my-5
+    = render 'shared/integrations/gitlab_slack_application/slack_button', project: @project, label: s_('SlackIntegration|Reinstall GitLab for Slack app')
+  %p
+    = html_escape(s_('SlackIntegration|You may need to reinstall the GitLab for Slack app when we %{linkStart}make updates or change permissions%{linkEnd}.')) % { linkStart: %(<a href="#{help_page_path('user/project/integrations/gitlab_slack_application.md', anchor: 'update-the-gitlab-for-slack-app')}">).html_safe, linkEnd: '</a>'.html_safe}
+- else
+  = render 'shared/integrations/gitlab_slack_application/slack_button', project: @project, label: s_('SlackIntegration|Install GitLab for Slack app')
diff --git a/app/views/shared/integrations/gitlab_slack_application/_top.html.haml b/app/views/shared/integrations/gitlab_slack_application/_top.html.haml
new file mode 100644
index 00000000000..56200deac6d
--- /dev/null
+++ b/app/views/shared/integrations/gitlab_slack_application/_top.html.haml
@@ -0,0 +1,5 @@
+- if session.delete(:slack_install_success)
+  = render Pajamas::AlertComponent.new(title: s_('SlackIntegration|GitLab for Slack was successfully installed.'),
+    variant: :success) do |c|
+    - c.with_body do
+      = s_('SlackIntegration|You can now close this window and go to your Slack workspace.')
diff --git a/app/views/shared/integrations/prometheus/_custom_metrics.html.haml b/app/views/shared/integrations/prometheus/_custom_metrics.html.haml
index beeb328aedf..0264196f60c 100644
--- a/app/views/shared/integrations/prometheus/_custom_metrics.html.haml
+++ b/app/views/shared/integrations/prometheus/_custom_metrics.html.haml
@@ -7,12 +7,12 @@
 
 .col-lg-9
   = render Pajamas::CardComponent.new(header_options: { class: 'gl-display-flex gl-align-items-center' }, body_options: { class: 'gl-p-0' }, card_options: { class: 'gl-mb-5 custom-monitored-metrics js-panel-custom-monitored-metrics', data: { active_custom_metrics: project_prometheus_metrics_path(project), environments_data: environments_list_data, service_active: "#{integration.active}" } }) do |c|
-    - c.header do
+    - c.with_header do
       %strong
         = s_('PrometheusService|Custom metrics')
       = gl_badge_tag 0, nil, class: 'gl-ml-2 js-custom-monitored-count'
       = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn gl-button btn-confirm gl-ml-auto js-new-metric-button hidden'
-    - c.body do
+    - c.with_body do
       .flash-container.hidden
         .flash-warning
           .flash-text
diff --git a/app/views/shared/integrations/prometheus/_metrics.html.haml b/app/views/shared/integrations/prometheus/_metrics.html.haml
index 7cd4eeee5f8..cb78faa383a 100644
--- a/app/views/shared/integrations/prometheus/_metrics.html.haml
+++ b/app/views/shared/integrations/prometheus/_metrics.html.haml
@@ -9,11 +9,11 @@
 
 .col-lg-9
   = render Pajamas::CardComponent.new(body_options: { class: 'gl-p-0' }, card_options: { class: 'gl-mb-5 js-panel-monitored-metrics', data: { active_metrics: active_common_project_prometheus_metrics_path(project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/index') }}) do |c|
-    - c.header do
+    - c.with_header do
       %strong
         = s_('PrometheusService|Common metrics')
         = gl_badge_tag 0, nil, class: 'js-monitored-count'
-    - c.body do
+    - c.with_body do
       .loading-metrics.js-loading-metrics
         %p.m-3
           = gl_loading_icon(inline: true, css_class: 'metrics-load-spinner')
@@ -24,12 +24,12 @@
       %ul.list-unstyled.metrics-list.hidden.js-metrics-list
 
   = render Pajamas::CardComponent.new(body_options: { class: 'hidden gl-p-0' }, card_options: { class: 'hidden js-panel-missing-env-vars' }) do |c|
-    - c.header do
+    - c.with_header do
       = sprite_icon('chevron-lg-right', css_class: 'panel-toggle js-panel-toggle-right')
       = sprite_icon('chevron-lg-down', css_class: 'panel-toggle js-panel-toggle-down hidden')
       = s_('PrometheusService|Missing environment variable')
       = gl_badge_tag 0, nil, class: 'js-env-var-count'
-    - c.body do
+    - c.with_body do
       .flash-container
         .flash-notice
           .flash-text
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 76678c48a86..b8f98c28574 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -13,7 +13,7 @@
         - if @can_bulk_update
           .check-all-holder.gl-display-none.gl-sm-display-block.hidden.gl-float-left.gl-mr-3.gl-line-height-36
             = render Pajamas::CheckboxTagComponent.new(name: 'check-all-issues', value: nil) do |c|
-              = c.label do
+              - c.with_label do
                 %span.gl-sr-only
                   = _('Select all')
         .issues-other-filters.filtered-search-wrapper.d-flex.flex-column.flex-md-row
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 09162e6a349..ee1ca364b07 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -46,7 +46,7 @@
           .js-sidebar-milestone-widget-root{ 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.gl-collapse-empty{ data: { qa_selector: 'iteration_container', testid: 'iteration_container' } }<
+        .block.gl-collapse-empty{ data: { 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]
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
index 634e927f891..01f1dbdb3cf 100644
--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -42,7 +42,7 @@
 
 - if source_level < target_level
   = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c|
-    = c.body do
+    - c.with_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 8e9793cdba5..051a1a75f2b 100644
--- a/app/views/shared/issuable/form/_merge_params.html.haml
+++ b/app/views/shared/issuable/form/_merge_params.html.haml
@@ -12,7 +12,7 @@
       .form-check.gl-pl-0
         = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil
         = render Pajamas::CheckboxTagComponent.new(name: 'merge_request[force_remove_source_branch]', checked: issuable.force_remove_source_branch?, value: '1', checkbox_options: { class: 'js-form-update' }) do |c|
-          = c.label do
+          - c.with_label do
             = _("Delete source branch when merge request is accepted.")
 
     - if !project.squash_never?
@@ -20,14 +20,14 @@
         - if project.squash_always?
           = hidden_field_tag 'merge_request[squash]', '1', id: nil
           = render Pajamas::CheckboxTagComponent.new(name: 'merge_request[squash]', checked: project.squash_enabled_by_default?, value: '1', checkbox_options: { class: 'js-form-update', disabled: true }) do |c|
-            = c.label do
+            - c.with_label do
               = _("Squash commits when merge request is accepted.")
               = link_to sprite_icon('question-o'), help_page_path('user/project/merge_requests/squash_and_merge'), target: '_blank', rel: 'noopener noreferrer'
-            = c.help_text do
+            - c.with_help_text do
               = _('Required in this project.')
         - else
           = hidden_field_tag 'merge_request[squash]', '0', id: nil
           = render Pajamas::CheckboxTagComponent.new(name: 'merge_request[squash]', checked: issuable_squash_option?(issuable, project), value: '1', checkbox_options: { class: 'js-form-update' }) do |c|
-            = c.label do
+            - c.with_label do
               = _("Squash commits when merge request is accepted.")
               = link_to sprite_icon('question-o'), help_page_path('user/project/merge_requests/squash_and_merge'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml
index b27fd8ab7d2..1da0b82b634 100644
--- a/app/views/shared/issuable/form/_metadata.html.haml
+++ b/app/views/shared/issuable/form/_metadata.html.haml
@@ -6,12 +6,12 @@
 
 - if @add_related_issue
   .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
+    = render Pajamas::CheckboxTagComponent.new(name: :add_related_issue, value: @add_related_issue.iid, checked: true) do |c|
+      - c.with_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 }
+      - c.with_help_text do
+        = _('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
diff --git a/app/views/shared/issuable/form/_title.html.haml b/app/views/shared/issuable/form/_title.html.haml
index be836f4b8a9..36000f3cc67 100644
--- a/app/views/shared/issuable/form/_title.html.haml
+++ b/app/views/shared/issuable/form/_title.html.haml
@@ -8,7 +8,7 @@
   - if issuable.respond_to?(:draft?)
     .gl-pt-3
       = render Pajamas::CheckboxTagComponent.new(name: 'mark_as_draft', checkbox_options: { class: 'js-toggle-draft' }) do |c|
-        = c.label do
+        - c.with_label do
           = s_('MergeRequests|Mark as draft')
-        = c.help_text do
+        - c.with_help_text do
           = s_('MergeRequests|Drafts cannot be merged until marked ready.')
diff --git a/app/views/shared/issue_type/_details_content.html.haml b/app/views/shared/issue_type/_details_content.html.haml
index fdbe247c6ba..40a02fddbf3 100644
--- a/app/views/shared/issue_type/_details_content.html.haml
+++ b/app/views/shared/issue_type/_details_content.html.haml
@@ -2,7 +2,7 @@
 - api_awards_path = local_assigns.fetch(:api_awards_path, nil)
 
 .issue-details.issuable-details.js-issue-details
-  .detail-page-description.content-block.js-detail-page-description.gl-pt-4.gl-pb-0.gl-border-none
+  .detail-page-description.content-block.js-detail-page-description.gl-pt-3.gl-pb-0.gl-border-none
     #js-issuable-app{ data: { initial: issuable_initial_data(issuable).to_json,
       issuable_id: issuable.id,
       full_path: @project.full_path,
diff --git a/app/views/shared/members/_requests.html.haml b/app/views/shared/members/_requests.html.haml
index 31625c22a94..45e34a63f91 100644
--- a/app/views/shared/members/_requests.html.haml
+++ b/app/views/shared/members/_requests.html.haml
@@ -6,12 +6,12 @@
 - return if requesters.empty?
 
 = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5', data: { testid: 'access-requests' } }, body_options: { class: 'gl-p-0' }) do |c|
-  - c.header do
+  - c.with_header do
     = _('Users requesting access to')
     %strong= membership_source.name
     = gl_badge_tag requesters.size
     = render 'shared/members/manage_access_button', path: membership_source.is_a?(Project) ? project_project_members_path(@project, tab: 'access_requests') : group_group_members_path(@group, tab: 'access_requests')
-  - c.body do
+  - c.with_body do
     %ul.content-list.members-list
       = render partial: 'shared/members/member',
               collection: requesters, as: :member,
diff --git a/app/views/shared/milestones/_description.html.haml b/app/views/shared/milestones/_description.html.haml
index a63702661d0..3774fb0869f 100644
--- a/app/views/shared/milestones/_description.html.haml
+++ b/app/views/shared/milestones/_description.html.haml
@@ -9,5 +9,7 @@
 
   - if milestone.try(:description).present?
     %div{ data: { qa_selector: "milestone_description_content" } }
-      .description.md.gl-px-0.gl-pt-4
+      .description.md.gl-px-0.gl-pt-4{ class: ('js-task-list-container' if can?(current_user, :admin_milestone, milestone)), data: { lock_version: @milestone.lock_version } }
         = markdown_field(milestone, :description)
+        -# This textarea is necessary for `task_list.js` to work.
+        %textarea.hidden.js-task-list-field{ data: { value: milestone.description, update_url: milestone_path(milestone, format: :json)} }
diff --git a/app/views/shared/milestones/_issuables.html.haml b/app/views/shared/milestones/_issuables.html.haml
index 2502f7fca62..d56e24a070a 100644
--- a/app/views/shared/milestones/_issuables.html.haml
+++ b/app/views/shared/milestones/_issuables.html.haml
@@ -2,7 +2,7 @@
 - primary = local_assigns.fetch(:primary, false)
 
 = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-0' }, header_options: { class: milestone_header_class(primary, issuables) }) do |c|
-  - c.header do
+  - c.with_header do
     .gl-flex-grow-2
       = title
     .gl-ml-3.gl-flex-shrink-0.gl-font-weight-bold.gl-white-space-nowrap{ class: milestone_counter_class(primary) }
@@ -11,7 +11,7 @@
           = sprite_icon('issues', css_class: 'gl-vertical-align-text-bottom')
           = number_with_delimiter(issuables.length)
       = render_if_exists "shared/milestones/issuables_weight", issuables: issuables
-  = c.body do
+  - c.with_body do
     - class_prefix = dom_class(issuables).pluralize
     %ul{ class: "content-list milestone-#{class_prefix}-list", id: "#{class_prefix}-list-#{id}" }
       = render partial: 'shared/milestones/issuable',
diff --git a/app/views/shared/milestones/_milestone_complete_alert.html.haml b/app/views/shared/milestones/_milestone_complete_alert.html.haml
index bde8a0b91b0..dc923465c2f 100644
--- a/app/views/shared/milestones/_milestone_complete_alert.html.haml
+++ b/app/views/shared/milestones/_milestone_complete_alert.html.haml
@@ -4,5 +4,5 @@
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_options: { data: { testid: 'all-issues-closed-alert' }},
     dismissible: false) do |c|
-    = c.body do
+    - c.with_body do
       = yield
diff --git a/app/views/shared/milestones/_tabs.html.haml b/app/views/shared/milestones/_tabs.html.haml
index 8c49977fe82..cd1667cb3b3 100644
--- a/app/views/shared/milestones/_tabs.html.haml
+++ b/app/views/shared/milestones/_tabs.html.haml
@@ -1,8 +1,10 @@
 - show_project_name = local_assigns.fetch(:show_project_name, false)
 
 .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-  .fade-left= sprite_icon('chevron-lg-left', size: 12)
-  .fade-right= sprite_icon('chevron-lg-right', size: 12)
+  %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+    = sprite_icon('chevron-lg-left', size: 12)
+  %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+    = sprite_icon('chevron-lg-right', size: 12)
   = gl_tabs_nav({ class: %w[scrolling-tabs js-milestone-tabs] }) do
     = gl_tab_link_to '#tab-issues', item_active: true, data: { endpoint: milestone_tab_path(milestone, 'issues', show_project_name: show_project_name) } do
       = _('Issues')
diff --git a/app/views/shared/notes/_edit_form.html.haml b/app/views/shared/notes/_edit_form.html.haml
index 72081856da6..40a71aa53dc 100644
--- a/app/views/shared/notes/_edit_form.html.haml
+++ b/app/views/shared/notes/_edit_form.html.haml
@@ -2,6 +2,7 @@
   = form_tag '#', method: :put, class: 'edit-note common-note-form js-quick-submit' do
     = hidden_field_tag :target_id, '', class: 'js-form-target-id'
     = hidden_field_tag :target_type, '', class: 'js-form-target-type'
+    .flash-container
     = render layout: 'shared/md_preview', locals: { url: preview_markdown_path(project), referenced_users: true } do
       = render 'shared/zen', attr: 'note[note]', classes: 'note-textarea js-note-text js-task-list-field', qa_selector: 'edit_note_field', placeholder: _("Write a comment or drag your files here…")
       = render 'shared/notes/hints'
diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml
index eb36de8167c..0fed59aaff3 100644
--- a/app/views/shared/notes/_notes_with_form.html.haml
+++ b/app/views/shared/notes/_notes_with_form.html.haml
@@ -1,7 +1,7 @@
 - issuable = @issue || @merge_request
 - discussion_locked = issuable&.discussion_locked?
 
-%ul#notes-list.notes.main-notes-list.timeline
+%ul#notes-list.notes.main-notes-list.timeline{ data: { 'qa_selector': 'notes_list' } }
   = render "shared/notes/notes"
 
 = render 'shared/notes/edit_form', project: @project
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 79a33316b1a..e09736cad6c 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -9,7 +9,6 @@
 - compact_mode = false unless local_assigns[:compact_mode] == true
 - show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true && can_show_last_commit_in_list?(project)
 - css_class = "gl-sm-display-flex gl-align-items-center gl-vertical-align-middle!" if project.description.blank? && !show_last_commit_as_description
-- cache_key = project_list_cache_key(project, pipeline_status: pipeline_status)
 - updated_tooltip = time_ago_with_tooltip(project.last_activity_date)
 - show_pipeline_status_icon = pipeline_status && can?(current_user, :read_cross_project) && project.pipeline_status.has_status? && can?(current_user, :read_build, project)
 - last_pipeline = last_pipeline_from_status_cache(project) if show_pipeline_status_icon
@@ -17,14 +16,13 @@
 - css_metadata_classes = "gl-display-flex gl-align-items-center gl-ml-5 gl-reset-color! icon-wrapper has-tooltip"
 
 %li.project-row
-  = cache(cache_key) do
-    - if avatar
-      .project-cell.gl-w-11
-        = link_to project_path(project), class: dom_class(project) do
-          - if project.creator && use_creator_avatar
-            = render Pajamas::AvatarComponent.new(project.creator, size: 48, alt: '', class: 'gl-mr-5')
-          - else
-            = render Pajamas::AvatarComponent.new(project, size: 48, alt: '', class: 'gl-mr-5')
+  - if avatar
+    .project-cell.gl-w-11
+      = link_to project_path(project), class: dom_class(project) do
+        - if project.creator && use_creator_avatar
+          = render Pajamas::AvatarComponent.new(project.creator, size: 48, alt: '', class: 'gl-mr-5')
+        - else
+          = render Pajamas::AvatarComponent.new(project, size: 48, alt: '', class: 'gl-mr-5')
   .project-cell{ class: css_class }
     .project-details.gl-pr-9.gl-sm-pr-0.gl-w-full.gl-display-flex.gl-flex-direction-column{ data: { qa_selector: 'project_content', qa_project_name: project.name } }
       .gl-display-flex.gl-align-items-center.gl-flex-wrap
@@ -83,7 +81,7 @@
             = _('Updated')
             = updated_tooltip
 
-  .project-cell{ class: "#{css_class} gl-xs-display-none!" }
+  .project-cell{ class: "#{css_class} gl-display-none! gl-sm-display-table-cell!" }
     .project-controls.gl-display-flex.gl-flex-direction-column.gl-align-items-flex-end.gl-w-full{ data: { testid: 'project_controls'} }
       .controls.gl-display-flex.gl-align-items-center.gl-mb-2{ class: "#{css_controls_class} gl-pr-0!" }
         - if show_pipeline_status_icon && last_pipeline.present?
diff --git a/app/views/shared/projects/_topics.html.haml b/app/views/shared/projects/_topics.html.haml
index 12246d1dcfa..c4524125a21 100644
--- a/app/views/shared/projects/_topics.html.haml
+++ b/app/views/shared/projects/_topics.html.haml
@@ -5,7 +5,7 @@
     %span.gl-p-2.gl-text-gray-500
       = _('Topics') + ':'
     - project.topics_to_show.each do |topic|
-      - explore_project_topic_path = topic_explore_projects_path(topic_name: topic[:name])
+      - explore_project_topic_path = topic_explore_projects_cleaned_path(topic_name: topic[:name])
       - if topic[:title].length > max_project_topic_length
         %a.gl-p-2.has-tooltip{ data: { container: "body" }, title: topic[:title], href: explore_project_topic_path, itemprop: 'keywords' }
           = gl_badge_tag truncate(topic[:title], length: max_project_topic_length)
@@ -18,7 +18,7 @@
       - content = capture do
         %span.gl-display-inline-flex.gl-flex-wrap
           - project.topics_not_shown.each do |topic|
-            - explore_project_topic_path = topic_explore_projects_path(topic_name: topic[:name])
+            - explore_project_topic_path = topic_explore_projects_cleaned_path(topic_name: topic[:name])
             - if topic[:title].length > max_project_topic_length
               %a.gl-mr-3.gl-mb-3.has-tooltip{ data: { container: "body" }, title: topic[:title], href: explore_project_topic_path, itemprop: 'keywords' }
                 = gl_badge_tag truncate(topic[:title], length: max_project_topic_length)
diff --git a/app/views/shared/promotions/_promote_servicedesk.html.haml b/app/views/shared/promotions/_promote_servicedesk.html.haml
index 57ac1370f8d..24071ed0da4 100644
--- a/app/views/shared/promotions/_promote_servicedesk.html.haml
+++ b/app/views/shared/promotions/_promote_servicedesk.html.haml
@@ -2,7 +2,7 @@
   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
+  - c.with_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/_form.html.haml b/app/views/shared/runners/_form.html.haml
index f4b6c3c3a50..216aaad443f 100644
--- a/app/views/shared/runners/_form.html.haml
+++ b/app/views/shared/runners/_form.html.haml
@@ -42,12 +42,12 @@
   - if local_assigns[:in_gitlab_com_admin_context]
     .form-group.row
       = label_tag :public_projects_minutes_cost_factor, class: 'col-form-label col-sm-2' do
-        = _('Public projects Minutes cost factor')
+        = _('Public projects compute cost factor')
       .col-sm-10
         = f.text_field :public_projects_minutes_cost_factor, class: 'form-control'
     .form-group.row
       = label_tag :private_projects_minutes_cost_factor, class: 'col-form-label col-sm-2' do
-        = _('Private projects Minutes cost factor')
+        = _('Private projects compute cost factor')
       .col-sm-10
         = f.text_field :private_projects_minutes_cost_factor, class: 'form-control'
   .form-actions
diff --git a/app/views/shared/runners/_runner_details.html.haml b/app/views/shared/runners/_runner_details.html.haml
index 686cd1a081b..30e5587c413 100644
--- a/app/views/shared/runners/_runner_details.html.haml
+++ b/app/views/shared/runners/_runner_details.html.haml
@@ -1,4 +1,4 @@
-%h1.page-title.gl-font-size-h-display
+%h1.page-title.gl-font-size-h-display.gl-display-flex.gl-align-items-center
   = 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 63ecdaf4149..26c3501e3d9 100644
--- a/app/views/shared/runners/_runner_type_alert.html.haml
+++ b/app/views/shared/runners/_runner_type_alert.html.haml
@@ -4,13 +4,13 @@
   = 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
+    - c.with_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_options: alert_options,
     title: s_('Runners|This runner is associated with specific projects.'),
     dismissible: false) do |c|
-    = c.body do
+    - c.with_body do
       = s_('Runners|You can set up a project runner to be used by multiple projects but you cannot make this a shared or group runner.')
       = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'project-runners'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/shared/runners/_runner_type_badge.html.haml b/app/views/shared/runners/_runner_type_badge.html.haml
index a8a93f3dd76..9930f60b755 100644
--- a/app/views/shared/runners/_runner_type_badge.html.haml
+++ b/app/views/shared/runners/_runner_type_badge.html.haml
@@ -1,7 +1,7 @@
-
-- if runner.instance_type?
-  = gl_badge_tag s_('Runners|shared'), variant: :success
-- elsif runner.group_type?
-  = gl_badge_tag s_('Runners|group'), variant: :success
-- else
-  = gl_badge_tag s_('Runners|project'), variant: :info
+.gl-ml-2
+  - if runner.instance_type?
+    = gl_badge_tag s_('Runners|shared'), variant: :success
+  - elsif runner.group_type?
+    = gl_badge_tag s_('Runners|group'), variant: :success
+  - else
+    = gl_badge_tag s_('Runners|project'), variant: :info
diff --git a/app/views/shared/topics/_topic.html.haml b/app/views/shared/topics/_topic.html.haml
index 9b9630733fd..de2682d9d40 100644
--- a/app/views/shared/topics/_topic.html.haml
+++ b/app/views/shared/topics/_topic.html.haml
@@ -1,10 +1,10 @@
 - max_topic_title_length = 30
-- detail_page_link = topic_explore_projects_path(topic_name: topic.name)
+- detail_page_link = topic_explore_projects_cleaned_path(topic_name: topic.name)
 
 .col-lg-3.col-md-4.col-sm-12
   = 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
+    - c.with_body do
       = link_to detail_page_link do
         = render Pajamas::AvatarComponent.new(topic, size: 48, alt: '', class: 'gl-mr-3')
       = link_to detail_page_link do
diff --git a/app/views/shared/users/_user.html.haml b/app/views/shared/users/_user.html.haml
index 51eb24f6d4a..e3c1ca4d9cf 100644
--- a/app/views/shared/users/_user.html.haml
+++ b/app/views/shared/users/_user.html.haml
@@ -2,7 +2,7 @@
 
 .col-lg-3.col-md-4.col-sm-12
   = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }) do |c|
-    = c.body do
+    - c.with_body do
       = render Pajamas::AvatarComponent.new(user, size: 48, alt: "", class: 'gl-float-left gl-mr-3')
 
       .user-info
diff --git a/app/views/shared/web_hooks/_hook_errors.html.haml b/app/views/shared/web_hooks/_hook_errors.html.haml
index 098cc19c435..0e5f6d844cd 100644
--- a/app/views/shared/web_hooks/_hook_errors.html.haml
+++ b/app/views/shared/web_hooks/_hook_errors.html.haml
@@ -8,12 +8,12 @@
     root_namespace: hook.parent.root_namespace.path }
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook rate limit has been reached'),
     variant: :danger) do |c|
-    = c.body do
+    - c.with_body do
       = s_("Webhooks|Webhooks for %{root_namespace} are now disabled because they've been triggered more than %{limit} times per minute. They'll be automatically re-enabled in the next minute.").html_safe % placeholders
 - elsif hook.permanently_disabled?
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook failed to connect'),
     variant: :danger) do |c|
-    = c.body do
+    - c.with_body do
       = s_('Webhooks|The webhook failed to connect, and is disabled. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below.').html_safe % { strong_start: strong_start, strong_end: strong_end }
 - elsif hook.temporarily_disabled?
   - help_path = help_page_path('user/project/integrations/webhooks', anchor: 'webhook-fails-or-multiple-webhook-requests-are-triggered')
@@ -24,5 +24,5 @@
     help_link_end: link_end }
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook fails to connect'),
     variant: :warning) do |c|
-    = c.body do
+    - c.with_body do
       = s_('Webhooks|The webhook %{help_link_start}failed to connect%{help_link_end}, and will retry in %{retry_time}. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below.').html_safe % placeholders
diff --git a/app/views/shared/web_hooks/_index.html.haml b/app/views/shared/web_hooks/_index.html.haml
index 868633143cd..8a81e697a59 100644
--- a/app/views/shared/web_hooks/_index.html.haml
+++ b/app/views/shared/web_hooks/_index.html.haml
@@ -1,9 +1,9 @@
 %hr
 = render Pajamas::CardComponent.new(card_options: { id: 'webhooks-index' }, body_options: { class: 'gl-py-0'}) do |c|
-  - c.header do
+  - c.with_header do
     = hook_class.underscore.humanize.titleize.pluralize
     (#{hooks.size})
-  - c.body do
+  - c.with_body do
     - if hooks.any?
       %ul.content-list
         - hooks.each do |hook|
diff --git a/app/views/shared/web_hooks/_web_hook_disabled_alert.html.haml b/app/views/shared/web_hooks/_web_hook_disabled_alert.html.haml
index f8e2dc3d8dd..cbbb2f51fd5 100644
--- a/app/views/shared/web_hooks/_web_hook_disabled_alert.html.haml
+++ b/app/views/shared/web_hooks/_web_hook_disabled_alert.html.haml
@@ -5,9 +5,9 @@
     title: s_('Webhooks|Webhook disabled'),
     alert_options: { class: 'gl-my-4 js-web-hook-disabled-callout',
                       data: { feature_id: Users::CalloutsHelper::WEB_HOOK_DISABLED, dismiss_endpoint: project_callouts_path, project_id: @project.id, defer_links: 'true'} }) do |c|
-    = c.body do
+    - c.with_body do
       = s_('Webhooks|A webhook in this project was automatically disabled after being retried multiple times.')
       = succeed '.' do
         = link_to _('Learn more'), help_page_path('user/project/integrations/webhooks', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
-    = c.actions do
+    - c.with_actions do
       = link_to s_('Webhooks|Go to webhooks'), project_hooks_path(@project, anchor: 'webhooks-index'), class: 'btn gl-alert-action btn-confirm gl-button'
diff --git a/app/views/shared/wikis/empty.html.haml b/app/views/shared/wikis/empty.html.haml
index d30a37aaa3e..e83cad0d42f 100644
--- a/app/views/shared/wikis/empty.html.haml
+++ b/app/views/shared/wikis/empty.html.haml
@@ -6,7 +6,7 @@
   = render Pajamas::AlertComponent.new(alert_options: { id: 'error_explanation', class: 'gl-mb-3'},
     dismissible: false,
     variant: :danger) do |c|
-    = c.body do
+    - c.with_body do
       %ul.gl-pl-4
         = @error
 
diff --git a/app/views/users/_profile_basic_info.html.haml b/app/views/users/_profile_basic_info.html.haml
index c916b6c3d45..7c50031598c 100644
--- a/app/views/users/_profile_basic_info.html.haml
+++ b/app/views/users/_profile_basic_info.html.haml
@@ -6,4 +6,4 @@
       = s_('UserProfile|User ID: %{id}') % { id: @user.id }
       = clipboard_button(title: s_('UserProfile|Copy user ID'), text: @user.id)
     = render 'middle_dot_divider', stacking: true do
-      = s_('Member since %{date}') % { date: @user.created_at.to_date.to_s(:long) }
+      = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 1ebf02ffd39..4113a276416 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -131,8 +131,10 @@
 
       - if !profile_tabs.empty? && !Feature.enabled?(:profile_tabs_vue, current_user)
         .scrolling-tabs-container{ class: [('gl-display-none' if show_super_sidebar?)] }
-          .fade-left= sprite_icon('chevron-lg-left', size: 12)
-          .fade-right= sprite_icon('chevron-lg-right', size: 12)
+          %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+            = sprite_icon('chevron-lg-left', size: 12)
+          %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+            = sprite_icon('chevron-lg-right', size: 12)
           %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs.gl-border-b-0
             - if profile_tab?(:overview)
               %li.js-overview-tab