Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

256 files changed, 1749 insertions, 1498 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 a0fa69c54c5..f914de138a9 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -19,6 +19,10 @@
       = f.label :receive_max_input_size, _('Maximum push size (MB)'), class: 'label-light'
       = f.number_field :receive_max_input_size, class: 'form-control gl-form-input qa-receive-max-input-size-field', title: _('Maximum size limit for a single commit.'), data: { toggle: 'tooltip', container: 'body' }
     .form-group
+      = f.label :max_export_size, _('Maximum export size (MB)'), class: 'label-light'
+      = f.number_field :max_export_size, class: 'form-control gl-form-input', title: _('Maximum size of export files.'), data: { toggle: 'tooltip', container: 'body' }
+      %span.form-text.text-muted= _('Set to 0 for no size limit.')
+    .form-group
       = f.label :max_import_size, _('Maximum import size (MB)'), class: 'label-light'
       = f.number_field :max_import_size, class: 'form-control gl-form-input qa-receive-max-import-size-field', title: _('Maximum size of import files.'), data: { toggle: 'tooltip', container: 'body' }
       %span.form-text.text-muted= _('Only effective when remote storage is enabled. Set to 0 for no size limit.')
@@ -29,9 +33,7 @@
 
     = render_if_exists 'admin/application_settings/git_two_factor_session_expiry', form: f
     = render_if_exists 'admin/application_settings/personal_access_token_expiration_policy', form: f
-    = render_if_exists 'admin/application_settings/enforce_pat_expiration', form: f
     = render_if_exists 'admin/application_settings/ssh_key_expiration_policy', form: f
-    = render_if_exists 'admin/application_settings/enforce_ssh_key_expiration', form: f
 
     .form-group
       = f.label :user_oauth_applications, _('User OAuth applications'), class: 'label-bold'
diff --git a/app/views/admin/application_settings/_issue_limits.html.haml b/app/views/admin/application_settings/_issue_limits.html.haml
index 663e1485749..431e2a64c46 100644
--- a/app/views/admin/application_settings/_issue_limits.html.haml
+++ b/app/views/admin/application_settings/_issue_limits.html.haml
@@ -1,9 +1,9 @@
-= form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-issue-limits-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-issue-limits-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      = f.label :issues_create_limit, 'Max requests per minute per user', class: 'label-bold'
+      = f.label :issues_create_limit, _('Maximum number of requests per minute')
       = f.number_field :issues_create_limit, class: 'form-control gl-form-input'
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_note_limits.html.haml b/app/views/admin/application_settings/_note_limits.html.haml
index d4ae0d3944c..40760b3c45e 100644
--- a/app/views/admin/application_settings/_note_limits.html.haml
+++ b/app/views/admin/application_settings/_note_limits.html.haml
@@ -9,7 +9,7 @@
       = f.label :notes_create_limit_allowlist, _('Users to exclude from the rate limit'), class: 'label-bold'
       = f.text_area :notes_create_limit_allowlist_raw, class: 'form-control gl-form-input', rows: 5, aria: { describedBy: 'note-create-limits-allowlist-field-description' }
       .form-text.text-muted{ id: 'note-create-limits-allowlist-field-description' }
-        = _('List of users allowed to exceed the rate limit.')
+        = _('List of users who are allowed to exceed the rate limit. Example: username1, username2')
 
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_pipeline_limits.html.haml b/app/views/admin/application_settings/_pipeline_limits.html.haml
new file mode 100644
index 00000000000..e93823172db
--- /dev/null
+++ b/app/views/admin/application_settings/_pipeline_limits.html.haml
@@ -0,0 +1,9 @@
+= gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-pipeline-limits-settings'), html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :pipeline_limit_per_project_user_sha,  _('Maximum number of requests per minute')
+      = f.number_field :pipeline_limit_per_project_user_sha, class: 'form-control gl-form-input'
+
+  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_prometheus.html.haml b/app/views/admin/application_settings/_prometheus.html.haml
index 11830fac336..59681c0278e 100644
--- a/app/views/admin/application_settings/_prometheus.html.haml
+++ b/app/views/admin/application_settings/_prometheus.html.haml
@@ -1,20 +1,17 @@
-= form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-prometheus-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-prometheus-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      .form-check
-        = f.check_box :prometheus_metrics_enabled, class: 'form-check-input'
-        = f.label :prometheus_metrics_enabled, class: 'form-check-label' do
-          = _("Enable health and performance metrics endpoint")
-        .form-text.text-muted
-          = _('Enable a Prometheus endpoint that exposes health and performance statistics. The Health Check menu item appears in the Monitoring section of the Admin Area. Restart required.')
-          = link_to _('Learn More.'), help_page_path('administration/monitoring/prometheus/gitlab_metrics.md'), target: '_blank', rel: 'noopener noreferrer'
+      - prometheus_help_link_url = help_page_path('administration/monitoring/prometheus/gitlab_metrics')
+      - prometheus_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: prometheus_help_link_url }
+      = f.gitlab_ui_checkbox_component :prometheus_metrics_enabled,
+        _('Enable health and performance metrics endpoint'),
+        help_text: s_('AdminSettings|Enable a Prometheus endpoint that exposes health and performance statistics. The Health Check menu item appears in the Monitoring section of the Admin Area. Restart required. %{link_start}Learn more.%{link_end}').html_safe % { link_start: prometheus_help_link_start, link_end: '</a>'.html_safe }
+      .form-text.gl-text-gray-500.gl-pl-6
         - unless Gitlab::Metrics.metrics_folder_present?
-          .form-text.text-muted
-            %strong.cred= _("WARNING:")
-            = _("Environment variable %{environment_variable} does not exist or is not pointing to a valid directory.").html_safe % { environment_variable: '<code>prometheus_multiproc_dir</code>'.html_safe }
-            = link_to sprite_icon('question-o'), help_page_path('administration/monitoring/prometheus/gitlab_metrics', anchor: 'metrics-shared-directory')
+          - icon_link = link_to sprite_icon('question-o'), help_page_path('administration/monitoring/prometheus/gitlab_metrics', anchor: 'metrics-shared-directory'), target: '_blank', rel: 'noopener noreferrer'
+          = s_('AdminSettings|%{strongStart}WARNING:%{strongEnd} Environment variable %{environment_variable} does not exist or is not pointing to a valid directory. %{icon_link}').html_safe % { strongStart: '<strong class="gl-text-red-500">'.html_safe, strongEnd: '</strong>'.html_safe, environment_variable: '<code>prometheus_multiproc_dir</code>'.html_safe, icon_link: icon_link }
     .form-group
       = f.label :metrics_method_call_threshold, _('Method call threshold (ms)'), class: 'label-bold'
       = f.number_field :metrics_method_call_threshold, class: 'form-control gl-form-input'
diff --git a/app/views/admin/application_settings/_registry.html.haml b/app/views/admin/application_settings/_registry.html.haml
index eb1f94a2f04..856db32e088 100644
--- a/app/views/admin/application_settings/_registry.html.haml
+++ b/app/views/admin/application_settings/_registry.html.haml
@@ -13,7 +13,6 @@
       = f.gitlab_ui_checkbox_component :container_expiration_policies_enable_historic_entries,
         '%{label} %{label_link}'.html_safe % { label: label, label_link: label_link },
         help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
-    - if container_registry_expiration_policies_throttling?
       .form-group
         = f.label :container_registry_delete_tags_service_timeout, _('Cleanup policy maximum processing time (seconds)'), class: 'label-bold'
         = f.number_field :container_registry_delete_tags_service_timeout, min: 0, class: 'form-control gl-form-input'
diff --git a/app/views/admin/application_settings/_repository_storage.html.haml b/app/views/admin/application_settings/_repository_storage.html.haml
index 62a90e173ec..b5fa08aed79 100644
--- a/app/views/admin/application_settings/_repository_storage.html.haml
+++ b/app/views/admin/application_settings/_repository_storage.html.haml
@@ -1,16 +1,16 @@
-= form_for @application_setting, url: repository_admin_application_settings_path(anchor: 'js-repository-storage-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: repository_admin_application_settings_path(anchor: 'js-repository-storage-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .sub-section
       %h4= _('Hashed repository storage paths')
       .form-group
-        .form-check
-          = f.check_box :hashed_storage_enabled, class: 'form-check-input qa-hashed-storage-checkbox', disabled: @application_setting.hashed_storage_enabled?
-          = f.label :hashed_storage_enabled, _('Use hashed storage'), class: 'label-bold form-check-label'
-          .form-text.text-muted
-            = _('Use hashed storage paths for newly created and renamed repositories. Always enabled since 13.0.')
-            = link_to s_('Learn more.'), help_page_path('administration/repository_storage_types.md', anchor: 'hashed-storage'), target: '_blank', rel: 'noopener noreferrer'
+        - repository_storage_help_link_url = help_page_path('administration/repository_storage_types.md')
+        - repository_storage_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: repository_storage_help_link_url }
+        = f.gitlab_ui_checkbox_component :hashed_storage_enabled,
+           _('Use hashed storage'),
+           checkbox_options: { disabled: @application_setting.hashed_storage_enabled? },
+           help_text: _('Use hashed storage paths for newly created and renamed repositories. Always enabled since 13.0. %{link_start}Learn more.%{link_end}').html_safe % { link_start: repository_storage_help_link_start, link_end: '</a>'.html_safe }
 
     .sub-section
       %h4= _("Storage nodes for new repositories")
diff --git a/app/views/admin/application_settings/_runner_registrars_form.html.haml b/app/views/admin/application_settings/_runner_registrars_form.html.haml
index 08b3d173d20..1d6051a06ea 100644
--- a/app/views/admin/application_settings/_runner_registrars_form.html.haml
+++ b/app/views/admin/application_settings/_runner_registrars_form.html.haml
@@ -1,16 +1,16 @@
-= form_for @application_setting, url: ci_cd_admin_application_settings_path(anchor: 'js-runner-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: ci_cd_admin_application_settings_path(anchor: 'js-runner-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
-    .form-group
-      = hidden_field_tag "application_setting[valid_runner_registrars][]", nil
-      - ApplicationSetting::VALID_RUNNER_REGISTRAR_TYPES.each do |type|
-        .form-check
-          = f.check_box(:valid_runner_registrars, { multiple: true, checked: valid_runner_registrars.include?(type), class: 'form-check-input' }, type, nil)
-          = f.label :valid_runner_registrars, class: 'form-check-label' do
-            = s_("Runners|Members of the %{type} can register runners") % { type: type }
-      %span.form-text.gl-text-gray-600
+    .gl-form-group
+      %span.form-text.gl-mb-3.gl-mt-0
         = _('If no options are selected, only administrators can register runners.')
         = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'prevent-users-from-registering-runners'), target: '_blank', rel: 'noopener noreferrer'
+      = hidden_field_tag "application_setting[valid_runner_registrars][]", nil
+      - ApplicationSetting::VALID_RUNNER_REGISTRAR_TYPES.each do |type|
+        = f.gitlab_ui_checkbox_component :valid_runner_registrars, s_("Runners|Members of the %{type} can register runners") % { type: type },
+          checkbox_options: { multiple: true, checked: valid_runner_registrars.include?(type) },
+          checked_value: type,
+          unchecked_value: nil
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml
index bce210d28d3..48f0b9b2c31 100644
--- a/app/views/admin/application_settings/_signin.html.haml
+++ b/app/views/admin/application_settings/_signin.html.haml
@@ -1,39 +1,28 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-signin-settings'), html: { class: 'fieldset-form', id: 'signin-settings' } do |f|
+= gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-signin-settings'), html: { class: 'fieldset-form', id: 'signin-settings' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      .form-check
-        = f.check_box :password_authentication_enabled_for_web, class: 'form-check-input'
-        = f.label :password_authentication_enabled_for_web, class: 'form-check-label' do
-          = _('Allow password authentication for the web interface')
-          .form-text.text-muted
-            = _('Clear this checkbox to use an external authentication provider instead.')
+      = f.gitlab_ui_checkbox_component :password_authentication_enabled_for_web,
+        _('Allow password authentication for the web interface'),
+        help_text: _('Clear this checkbox to use an external authentication provider instead.')
     .form-group
-      .form-check
-        = f.check_box :password_authentication_enabled_for_git, class: 'form-check-input'
-        = f.label :password_authentication_enabled_for_git, class: 'form-check-label' do
-          = _('Allow password authentication for Git over HTTP(S)')
-          .form-text.text-muted
-            - if Gitlab::Auth::Ldap::Config.enabled?
-              = _('Clear this checkbox to use a personal access token or LDAP password instead.')
-            - else
-              = _('Clear this checkbox to use a personal access token instead.')
+      = f.gitlab_ui_checkbox_component :password_authentication_enabled_for_git,
+        _('Allow password authentication for Git over HTTP(S)'),
+        help_text: Gitlab::Auth::Ldap::Config.enabled? ? _('Clear this checkbox to use a personal access token or LDAP password instead.') : _('Clear this checkbox to use a personal access token instead.')
     - if omniauth_enabled? && button_based_providers.any?
       %fieldset.form-group
         %legend.gl-font-base.gl-mb-3.gl-border-none.gl-font-weight-bold= _('Enabled OAuth authentication sources')
         = hidden_field_tag 'application_setting[enabled_oauth_sign_in_sources][]'
-        - oauth_providers_checkboxes.each do |source|
+        - oauth_providers_checkboxes(f).each do |source|
           = source
     .form-group
       = f.label :two_factor_authentication, _('Two-factor authentication'), class: 'label-bold'
-      .form-check
-        = f.check_box :require_two_factor_authentication, class: 'form-check-input'
-        = f.label :require_two_factor_authentication, class: 'form-check-label' do
-          = _('Enforce two-factor authentication')
-          %p.form-text.text-muted
-            = _('Enforce two-factor authentication for all user sign-ins.')
-            = link_to _('Learn more.'), help_page_path('security/two_factor_authentication.md'), target: '_blank', rel: 'noopener noreferrer'
+      - help_text = _('Enforce two-factor authentication for all user sign-ins.')
+      - help_link = link_to _('Learn more.'), help_page_path('security/two_factor_authentication.md'), target: '_blank', rel: 'noopener noreferrer'
+      = f.gitlab_ui_checkbox_component :require_two_factor_authentication,
+        _('Enforce two-factor authentication'),
+        help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
     .form-group
       = f.label :two_factor_authentication, _('Two-factor grace period'), class: 'label-bold'
       = f.number_field :two_factor_grace_period, min: 0, class: 'form-control gl-form-input', placeholder: '0'
@@ -42,22 +31,18 @@
     .form-group
       = f.label :admin_mode, _('Admin Mode'), class: 'label-bold'
       = sprite_icon('lock', css_class: 'gl-icon')
-      .form-check
-        = f.check_box :admin_mode, class: 'form-check-input'
-        = f.label :admin_mode, class: 'form-check-label' do
-          = _('Enable admin mode')
-          %p.form-text.text-muted
-            = _('Require additional authentication for administrative tasks.')
-            = link_to _('Learn more.'), help_page_path('user/admin_area/settings/sign_in_restrictions', anchor: 'admin-mode'), target: '_blank', rel: 'noopener noreferrer'
+      - 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'
+      = f.gitlab_ui_checkbox_component :admin_mode,
+        _('Enable admin mode'),
+        help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
     .form-group
       = f.label :unknown_sign_in, _('Email notification for unknown sign-ins'), class: 'label-bold'
-      .form-check
-        = f.check_box :notify_on_unknown_sign_in, class: 'form-check-input'
-        = f.label :notify_on_unknown_sign_in, class: 'form-check-label' do
-          = _('Enable email notification')
-          %p.form-text.text-muted
-            = _('Notify users by email when sign-in location is not recognized.')
-            = link_to _('Learn more.'), help_page_path('user/profile/unknown_sign_in_notification.md'), target: '_blank', rel: 'noopener noreferrer'
+      - help_text = _('Notify users by email when sign-in location is not recognized.')
+      - help_link = link_to _('Learn more.'), help_page_path('user/profile/unknown_sign_in_notification.md'), target: '_blank', rel: 'noopener noreferrer'
+      = f.gitlab_ui_checkbox_component :notify_on_unknown_sign_in,
+        _('Enable email notification'),
+        help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
     .form-group
       = f.label :home_page_url, _('Home page URL'), class: 'label-bold'
       = f.text_field :home_page_url, class: 'form-control gl-form-input', placeholder: 'http://company.example.com', :'aria-describedby' => 'home_help_block'
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index a1285a3f467..8b4ac9b79c8 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -13,7 +13,7 @@
     .form-group
       - can_be_configured = @application_setting.usage_ping_can_be_configured?
       - service_ping_link_start = link_start % { url: help_page_path('development/service_ping/index') }
-      - deactivating_service_ping_link_start = link_start % { url: help_page_path('development/service_ping/index', anchor: 'disable-service-ping-using-the-configuration-file') }
+      - deactivating_service_ping_link_start = link_start % { url: help_page_path('user/admin_area/settings/usage_statistics', anchor: 'disable-usage-statistics-with-the-configuration-file') }
       - usage_ping_help_text = s_('AdminSettings|To help improve GitLab and its user experience, GitLab periodically collects usage information. %{link_start}What information is shared with GitLab Inc.?%{link_end}').html_safe % { link_start: service_ping_link_start, link_end: link_end }
       - disabled_help_text = s_('AdminSettings|Service ping is disabled in your configuration file, and cannot be enabled through this form. For more information, see the documentation on %{link_start}deactivating service ping%{link_end}.').html_safe % { link_start: deactivating_service_ping_link_start, link_end: link_end }
       = f.gitlab_ui_checkbox_component :usage_ping_enabled, s_('AdminSettings|Enable Service Ping'),
@@ -28,7 +28,7 @@
     .form-group
       - usage_ping_enabled = @application_setting.usage_ping_enabled?
       - label = s_('AdminSettings|Enable Registration Features')
-      - label_link = link_to sprite_icon('question-o'), help_page_path('development/service_ping/index', anchor: 'registration-features-program')
+      - label_link = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/usage_statistics', anchor: 'registration-features-program')
       - help_text = usage_ping_enabled ? s_('AdminSettings|You can enable Registration Features because Service Ping is enabled. To continue using Registration Features in the future, you will also need to register with GitLab via a new cloud licensing service.') : s_('AdminSettings|To enable Registration Features, first enable Service Ping.')
       = f.gitlab_ui_checkbox_component :usage_ping_features_enabled?, '%{label} %{label_link}'.html_safe % { label: label, label_link: label_link },
         help_text: '<span id="service_ping_features_helper_text">%{help_text}</span>'.html_safe % { help_text: help_text },
diff --git a/app/views/admin/application_settings/_users_api_limits.html.haml b/app/views/admin/application_settings/_users_api_limits.html.haml
index 9b3502b3cfd..3918c76b12c 100644
--- a/app/views/admin/application_settings/_users_api_limits.html.haml
+++ b/app/views/admin/application_settings/_users_api_limits.html.haml
@@ -9,6 +9,6 @@
       = f.label :users_get_by_id_limit_allowlist_raw, _('Users to exclude from the rate limit'), class: 'label-bold'
       = f.text_area :users_get_by_id_limit_allowlist_raw, class: 'form-control gl-form-input', rows: 5, aria: { describedBy: 'users-api-limit-users-allowlist-field-description' }
       .form-text.text-muted{ id: 'users-api-limit-users-allowlist-field-description' }
-        = _('List of users allowed to exceed the rate limit.')
+        = _('List of users who are allowed to exceed the rate limit. Example: username1, username2')
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_visibility_and_access.html.haml b/app/views/admin/application_settings/_visibility_and_access.html.haml
index 23649bc2d54..e3c044ff979 100644
--- a/app/views/admin/application_settings/_visibility_and_access.html.haml
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -16,29 +16,30 @@
       = f.label :default_group_visibility, class: 'label-bold'
       = render('shared/visibility_radios', model_method: :default_group_visibility, form: f, selected_level: @application_setting.default_group_visibility, form_model: Group.new)
     .form-group
-      = f.label :restricted_visibility_levels, class: 'label-bold'
+      = f.label :restricted_visibility_levels, class: 'label-bold gl-mb-0'
+      %span.form-text.gl-mt-0.gl-mb-3#restricted-visibility-help
+        = _('Selected levels cannot be used by non-admin users for groups, projects or snippets. If the public level is restricted, user profiles are only visible to logged in users.')
       = hidden_field_tag 'application_setting[restricted_visibility_levels][]'
       - restricted_level_checkboxes(f).each do |level|
         = level
-      %span.form-text.text-muted#restricted-visibility-help
-        = _('Selected levels cannot be used by non-admin users for groups, projects or snippets. If the public level is restricted, user profiles are only visible to logged in users.')
     .form-group
-      = f.label :import_sources, class: 'label-bold'
-      = hidden_field_tag 'application_setting[import_sources][]'
-      - import_sources_checkboxes(f).each do |source|
-        = source
-      %span.form-text.text-muted#import-sources-help
+      = f.label :import_sources, s_('AdminSettings|Import sources'), class: 'label-bold gl-mb-0'
+      %span.form-text.gl-mt-0.gl-mb-3#import-sources-help
         = _('Enabled sources for code import during project creation. OmniAuth must be configured for GitHub')
         = link_to sprite_icon('question-o'), help_page_path("integration/github")
         , Bitbucket
         = link_to sprite_icon('question-o'), help_page_path("integration/bitbucket")
         and GitLab.com
         = link_to sprite_icon('question-o'), help_page_path("integration/gitlab")
+      = hidden_field_tag 'application_setting[import_sources][]'
+      - import_sources_checkboxes(f).each do |source|
+        = source
 
     = render_if_exists 'admin/application_settings/ldap_access_setting', form: f
 
     .form-group
-      = f.gitlab_ui_checkbox_component :project_export_enabled, s_('AdminSettings|Project export enabled')
+      = f.label :project_export, s_('AdminSettings|Project export'), class: 'label-bold'
+      = f.gitlab_ui_checkbox_component :project_export_enabled, s_('AdminSettings|Enabled')
 
     .form-group
       %label.label-bold= _('Enabled Git access protocols')
diff --git a/app/views/admin/application_settings/ci/_header.html.haml b/app/views/admin/application_settings/ci/_header.html.haml
index 1298be9a6cb..a22e67b0522 100644
--- a/app/views/admin/application_settings/ci/_header.html.haml
+++ b/app/views/admin/application_settings/ci/_header.html.haml
@@ -13,7 +13,7 @@
   = _('Variables can be:')
 %ul
   %li
-    = html_escape(_('%{code_open}Protected:%{code_close} Only exposed to protected branches or tags.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+    = 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 }
     = link_to _('Learn more.'), help_page_path('ci/variables/index', anchor: 'mask-a-cicd-variable'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/admin/application_settings/ci_cd.html.haml b/app/views/admin/application_settings/ci_cd.html.haml
index aab4f44d4d7..e925175b7ea 100644
--- a/app/views/admin/application_settings/ci_cd.html.haml
+++ b/app/views/admin/application_settings/ci_cd.html.haml
@@ -8,7 +8,7 @@
   .settings-content
     - if ci_variable_protected_by_default?
       %p.settings-message.text-center
-        - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable') }
+        - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/index', anchor: 'protected-cicd-variables') }
         = s_('Environment variables on this GitLab instance are configured to be %{link_start}protected%{link_end} by default.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
     #js-instance-variables{ data: { endpoint: admin_ci_variables_path, group: 'true', maskable_regex: ci_variable_maskable_regex, protected_by_default: ci_variable_protected_by_default?.to_s} }
 
@@ -38,7 +38,7 @@
     .settings-content
       = render 'registry'
 
-- if Feature.enabled?(:runner_registration_control, default_enabled: :yaml)
+- if Feature.enabled?(:runner_registration_control)
   %section.settings.as-runner.no-animate#js-runner-settings{ class: ('expanded' if expanded_by_default?) }
     .settings-header
       %h4
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index bc2fedec69c..7643f8fa7a7 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -93,7 +93,7 @@
     %p
       = _('Manage Web IDE features.')
   .settings-content
-    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: "#js-web-ide-settings"), html: { class: 'fieldset-form', id: 'web-ide-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: "js-web-ide-settings"), html: { class: 'fieldset-form', id: 'web-ide-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
@@ -115,4 +115,4 @@
 = render 'admin/application_settings/snowplow'
 = render 'admin/application_settings/eks'
 = render 'admin/application_settings/floc'
-= render_if_exists 'admin/application_settings/license_file'
+= render_if_exists 'admin/application_settings/add_license'
diff --git a/app/views/admin/application_settings/metrics_and_profiling.html.haml b/app/views/admin/application_settings/metrics_and_profiling.html.haml
index 7cb5760f62a..8e4b0b53f28 100644
--- a/app/views/admin/application_settings/metrics_and_profiling.html.haml
+++ b/app/views/admin/application_settings/metrics_and_profiling.html.haml
@@ -53,9 +53,7 @@
   .settings-content
     = render 'usage'
 
-= render_if_exists 'admin/application_settings/pseudonymizer_settings', expanded: expanded_by_default?
-
-- if Feature.enabled?(:configure_sentry_in_application_settings, default_enabled: :yaml)
+- if Feature.enabled?(:configure_sentry_in_application_settings)
   %section.settings.as-sentry.no-animate#js-sentry-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'sentry_settings_content' } }
     .settings-header
       %h4
diff --git a/app/views/admin/application_settings/network.html.haml b/app/views/admin/application_settings/network.html.haml
index ea35b7ab9c4..a2497fe122b 100644
--- a/app/views/admin/application_settings/network.html.haml
+++ b/app/views/admin/application_settings/network.html.haml
@@ -157,4 +157,16 @@
   .settings-content
     = render 'import_export_limits'
 
+%section.settings.as-pipeline-limits.no-animate#js-pipeline-limits-settings{ class: ('expanded' if expanded_by_default?) }
+  .settings-header
+    %h4
+      = _('Pipeline creation rate limits')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded_by_default? ? _('Collapse') : _('Expand')
+    %p
+      = _('Limit the number of pipeline creation requests per minute. This limit includes pipelines created through the UI, the API, and by background processing.')
+      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/rate_limit_on_pipelines_creation.md'), target: '_blank', rel: 'noopener noreferrer'
+  .settings-content
+    = render 'pipeline_limits'
+
 = render_if_exists 'admin/application_settings/ee_network_settings'
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 ec084c05cf7..55c25ca32d5 100644
--- a/app/views/admin/application_settings/service_usage_data.html.haml
+++ b/app/views/admin/application_settings/service_usage_data.html.haml
@@ -18,9 +18,9 @@
 - else
   = render Pajamas::AlertComponent.new(variant: :warning,
     dismissible: false,
-    title: _('Service Ping payload not found in the application cache')) do
+    title: _('Service Ping payload not found in the application cache')) do |c|
 
-    .gl-alert-body
+    = c.body do
       - enable_service_ping_link_url = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'enable-or-disable-usage-statistics')
       - enable_service_ping_link = '<a href="%{url}">'.html_safe % { url: enable_service_ping_link_url }
       - generate_manually_link_url = help_page_path('administration/troubleshooting/gitlab_rails_cheat_sheet', anchor: 'generate-service-ping')
diff --git a/app/views/admin/applications/_form.html.haml b/app/views/admin/applications/_form.html.haml
index 925b3681298..fd73d4c5671 100644
--- a/app/views/admin/applications/_form.html.haml
+++ b/app/views/admin/applications/_form.html.haml
@@ -21,25 +21,13 @@
     .col-sm-2.col-form-label.pt-0
       = f.label :trusted
     .col-sm-10
-      = f.check_box :trusted
-      %span.form-text.text-muted
-        Trusted applications are automatically authorized on GitLab OAuth flow. It's highly recommended for the security of users that trusted applications have the confidential setting set to true.
+      = f.gitlab_ui_checkbox_component :trusted, _('Trusted applications are automatically authorized on GitLab OAuth flow. It\'s highly recommended for the security of users that trusted applications have the confidential setting set to true.')
 
   = content_tag :div, class: 'form-group row' do
     .col-sm-2.col-form-label.pt-0
       = f.label :confidential
     .col-sm-10
-      = f.check_box :confidential
-      %span.form-text.text-muted
-        = _('The application will be used where the client secret can be kept confidential. Native mobile apps and Single Page Apps are considered non-confidential.')
-
-  = content_tag :div, class: 'form-group row' do
-    .col-sm-2.col-form-label.pt-0
-      = f.label :expire_access_tokens
-    .col-sm-10
-      = f.check_box :expire_access_tokens
-      %span.form-text.text-muted
-        = _('Access tokens expire after 2 hours. A refresh token may be used at any time to generate a new access token. Non-expiring access tokens are deprecated. Clear this setting to enable backward compatibility.')
+      = f.gitlab_ui_checkbox_component :confidential, _('The application will be used where the client secret can be kept confidential. Native mobile apps and Single Page Apps are considered non-confidential.')
 
   .form-group.row
     .col-sm-2.col-form-label.pt-0
diff --git a/app/views/admin/background_migrations/_job.html.haml b/app/views/admin/background_migrations/_job.html.haml
new file mode 100644
index 00000000000..e34f73e8b94
--- /dev/null
+++ b/app/views/admin/background_migrations/_job.html.haml
@@ -0,0 +1,10 @@
+%tr{ role: 'row' }
+  %td{ role: 'cell', data: { label: _('Id') } }
+    = link_to admin_background_migration_batched_job_path(job.batched_migration, job, params: { database: params[:database] }) do
+      = job.id
+  %td{ role: 'cell', data: { label: s_('BackgroundMigrations|Started at') } }
+    = job.started_at
+  %td{ role: 'cell', data: { label: s_('BackgroundMigrations|Finished at') } }
+    = job.finished_at
+  %td{ role: 'cell', data: { label: s_('BackgroundMigrations|Batch size') } }
+    = job.batch_size
diff --git a/app/views/admin/background_migrations/_migration.html.haml b/app/views/admin/background_migrations/_migration.html.haml
index 9cef8332259..f4906028e39 100644
--- a/app/views/admin/background_migrations/_migration.html.haml
+++ b/app/views/admin/background_migrations/_migration.html.haml
@@ -1,5 +1,7 @@
 %tr{ role: 'row' }
-  %td{ role: 'cell', data: { label: _('Migration') } }= migration.job_class_name + ': ' + migration.table_name
+  %td{ role: 'cell', data: { label: _('Migration') } }
+    = link_to admin_background_migration_path(migration, database: params[:database]) do
+      = migration.job_class_name + ': ' + migration.table_name
   %td{ role: 'cell', data: { label: _('Progress') } }
     - progress = batched_migration_progress(migration, @successful_rows_counts[migration.id])
     - if progress
@@ -10,14 +12,14 @@
     = gl_badge_tag migration.status_name.to_s.humanize, { size: :sm, variant: batched_migration_status_badge_variant(migration) }
   %td{ role: 'cell', data: { label: _('Action') } }
     - if migration.active?
-      = button_to pause_admin_background_migration_path(migration),
+      = button_to pause_admin_background_migration_path(migration, database: params[:database]),
         class: 'gl-button btn btn-icon has-tooltip', title: _('Pause'), 'aria-label' => _('Pause') do
         = sprite_icon('pause', css_class: 'gl-button-icon gl-icon')
     - elsif migration.paused?
-      = button_to resume_admin_background_migration_path(migration),
+      = button_to resume_admin_background_migration_path(migration, database: params[:database]),
         class: 'gl-button btn btn-icon has-tooltip', title: _('Resume'), 'aria-label' => _('Resume') do
         = sprite_icon('play', css_class: 'gl-button-icon gl-icon')
     - elsif migration.failed?
-      = button_to retry_admin_background_migration_path(migration),
+      = button_to retry_admin_background_migration_path(migration, database: params[:database]),
         class: 'gl-button btn btn-icon has-tooltip', title: _('Retry'), 'aria-label' => _('Retry') do
         = sprite_icon('retry', css_class: 'gl-button-icon gl-icon')
diff --git a/app/views/admin/background_migrations/_migration_full_information.html.haml b/app/views/admin/background_migrations/_migration_full_information.html.haml
new file mode 100644
index 00000000000..620274c375f
--- /dev/null
+++ b/app/views/admin/background_migrations/_migration_full_information.html.haml
@@ -0,0 +1,21 @@
+%tr{ role: 'row' }
+  %td{ role: 'cell', data: { label: _('Id') } }
+    = @migration.id
+  %td{ role: 'cell', data: { label: _('Min Value') } }
+    = @migration.min_value
+  %td{ role: 'cell', data: { label: _('Max Value') } }
+    = @migration.max_value
+  %td{ role: 'cell', data: { label: _('Batch size') } }
+    = @migration.batch_size
+  %td{ role: 'cell', data: { label: _('Sub-batch size') } }
+    = @migration.sub_batch_size
+  %td{ role: 'cell', data: { label: _('Interval') } }
+    = @migration.interval
+  %td{ role: 'cell', data: { label: _('Pause time (ms)') } }
+    = @migration.pause_ms
+  %td{ role: 'cell', data: { label: _('Created on') } }
+    = @migration.created_at
+  %td{ role: 'cell', data: { label: _('Last updated') } }
+    = @migration.updated_at
+  %td{ role: 'cell', data: { label: _('Status') } }
+    = gl_badge_tag @migration.status_name.to_s.humanize, { size: :sm, variant: batched_migration_status_badge_variant(@migration) }
diff --git a/app/views/admin/background_migrations/index.html.haml b/app/views/admin/background_migrations/index.html.haml
index afceb6427e0..c8b195219ec 100644
--- a/app/views/admin/background_migrations/index.html.haml
+++ b/app/views/admin/background_migrations/index.html.haml
@@ -1,13 +1,26 @@
-- page_title _('Background Migrations')
+- page_title s_('BackgroundMigrations|Background Migrations')
+- @breadcrumb_link = admin_background_migrations_path(database: params[:database])
+
+.gl-display-flex.gl-sm-flex-direction-column.gl-sm-align-items-flex-end.gl-pb-5.gl-border-b-1.gl-border-b-solid.gl-border-b-gray-100
+  .gl-flex-grow-1
+    %h3= s_('BackgroundMigrations|Background Migrations')
+    %p.light.gl-mb-0
+      - learnmore_link = help_page_path('development/database/batched_background_migrations')
+      - learnmore_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learnmore_link }
+      = html_escape(s_('BackgroundMigrations|Background migrations are used to perform data migrations whenever a migration exceeds the time limits in our guidelines. %{linkStart}Learn more%{linkEnd}')) % { linkStart: learnmore_link_start, linkEnd: '</a>'.html_safe }
+
+  - if @databases.size > 1
+    .gl-display-flex.gl-align-items-center.gl-flex-grow-0.gl-flex-basis-0.gl-sm-mt-0.gl-mt-5.gl-sm-ml-7.gl-ml-0
+      #js-database-listbox{ data: { databases: @databases, selected_database: @selected_database } }
 
 = gl_tabs_nav do
-  = gl_tab_link_to admin_background_migrations_path, item_active: @current_tab == 'queued' do
+  = gl_tab_link_to admin_background_migrations_path({ tab: nil, database: params[:database] }), item_active: @current_tab == 'queued' do
     = _('Queued')
     = gl_tab_counter_badge limited_counter_with_delimiter(@relations_by_tab['queued'])
-  = gl_tab_link_to admin_background_migrations_path(tab: 'failed'), item_active: @current_tab == 'failed' do
+  = gl_tab_link_to admin_background_migrations_path({ tab: 'failed', database: params[:database] }), item_active: @current_tab == 'failed' do
     = _('Failed')
     = gl_tab_counter_badge limited_counter_with_delimiter(@relations_by_tab['failed'])
-  = gl_tab_link_to admin_background_migrations_path(tab: 'finished'), item_active: @current_tab == 'finished' do
+  = gl_tab_link_to admin_background_migrations_path({ tab: 'finished', database: params[:database] }), item_active: @current_tab == 'finished' do
     = _('Finished')
     = gl_tab_counter_badge limited_counter_with_delimiter(@relations_by_tab['finished'])
 
@@ -16,10 +29,10 @@
     %table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' }
       %thead{ role: 'rowgroup' }
         %tr{ role: 'row' }
-          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Migration')
-          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Progress')
-          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Status')
-          %th.table-th-transparent.border-bottom{ role: 'cell' }
+          %th.border-bottom{ role: 'cell' }= _('Migration')
+          %th.border-bottom{ role: 'cell' }= _('Progress')
+          %th.border-bottom{ role: 'cell' }= _('Status')
+          %th.border-bottom{ role: 'cell' }
       %tbody{ role: 'rowgroup' }
         = render partial: 'migration', collection: @migrations
 
diff --git a/app/views/admin/background_migrations/show.html.haml b/app/views/admin/background_migrations/show.html.haml
new file mode 100644
index 00000000000..7915a9d36dc
--- /dev/null
+++ b/app/views/admin/background_migrations/show.html.haml
@@ -0,0 +1,39 @@
+- add_to_breadcrumbs s_('BackgroundMigrations|Background Migrations'), admin_background_migrations_path(database: params[:database])
+- breadcrumb_title @migration.id
+- page_title @migration.job_class_name , s_('BackgroundMigrations|Background Migrations')
+- @breadcrumb_link = admin_background_migration_path(@migration, database: params[:database])
+
+%h3= @migration.job_class_name + ': ' + @migration.table_name
+
+.tab-content.gl-tab-content
+  .tab-pane.active{ role: 'tabpanel' }
+    %table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' }
+      %thead{ role: 'rowgroup' }
+        %tr{ role: 'row' }
+          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Id')
+          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Min Value')
+          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Max Value')
+          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Batch size')
+          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Sub-batch size')
+          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Interval')
+          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Pause time (ms)')
+          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Created on')
+          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Last updated')
+          %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Status')
+      %tbody{ role: 'rowgroup' }
+        = render partial: 'migration_full_information', migration: @migration
+
+- if @migration.batched_jobs.with_status(:failed).any?
+  %h5= s_('BackgroundMigrations|Failed jobs:')
+
+  %table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' }
+    %thead{ role: 'rowgroup' }
+      %tr{ role: 'row' }
+        %th{ role: 'cell' }= _('Id')
+        %th{ role: 'cell' }= s_('BackgroundMigrations|Started at')
+        %th{ role: 'cell' }= s_('BackgroundMigrations|Finished at')
+        %th{ role: 'cell' }= s_('BackgroundMigrations|Batch size')
+    %tbody{ role: 'rowgroup' }
+      = render partial: 'job', collection: @failed_jobs
+
+  = paginate_collection @failed_jobs
diff --git a/app/views/admin/batched_jobs/_job.html.haml b/app/views/admin/batched_jobs/_job.html.haml
new file mode 100644
index 00000000000..512f4062ccf
--- /dev/null
+++ b/app/views/admin/batched_jobs/_job.html.haml
@@ -0,0 +1,17 @@
+%tr{ role: 'row' }
+  %td{ role: 'cell', data: { label: _('Id') } }
+    = @job.id
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Min value') } }
+    = @job.min_value
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Max value') } }
+    = @job.max_value
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Batch size') } }
+    = @job.batch_size
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Started at') } }
+    = @job.started_at
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Finished at') } }
+    = @job.finished_at
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Attempts') } }
+    = @job.attempts
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Pause ms') } }
+    = @job.pause_ms
diff --git a/app/views/admin/batched_jobs/_transition_log.html.haml b/app/views/admin/batched_jobs/_transition_log.html.haml
new file mode 100644
index 00000000000..bd81be4679a
--- /dev/null
+++ b/app/views/admin/batched_jobs/_transition_log.html.haml
@@ -0,0 +1,13 @@
+%tr{ role: 'row' }
+  %td{ role: 'cell', data: { label: _('Id') } }
+    = transition_log.id
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Created at') } }
+    = transition_log.created_at
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Previous status') } }
+    = transition_log.previous_status
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Next status') } }
+    = transition_log.next_status
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Exception class') } }
+    = transition_log.exception_class
+  %td{ role: 'cell', data: { label: s_('BatchedJob|Exception message') } }
+    = transition_log.exception_message
diff --git a/app/views/admin/batched_jobs/show.html.haml b/app/views/admin/batched_jobs/show.html.haml
new file mode 100644
index 00000000000..760635413a5
--- /dev/null
+++ b/app/views/admin/batched_jobs/show.html.haml
@@ -0,0 +1,36 @@
+- add_to_breadcrumbs s_('Batched Job|Background Migrations'), admin_background_migrations_path(database: params[:database])
+- add_to_breadcrumbs @job.batched_background_migration_id, admin_background_migration_path(@job.batched_migration, database: params[:database])
+- breadcrumb_title sprintf(s_('Batched Job|Batched Job (Id: %{id})'), { id: @job.id.to_s})
+- page_title @job.id, s_('BatchedJob|Batched Jobs')
+- @breadcrumb_link = admin_background_migration_batched_job_path(@job.batched_migration, @job, database: params[:database])
+
+%h3= sprintf(s_('Batched Job|Batched Job (Id: %{id})'), { id: @job.id.to_s})
+
+%table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' }
+  %thead{ role: 'rowgroup' }
+    %tr{ role: 'row' }
+      %th.table-th-transparent.border-bottom{ role: 'cell' }= _('Id')
+      %th.table-th-transparent.border-bottom{ role: 'cell' }= s_('BatchedJob|Min Value')
+      %th.table-th-transparent.border-bottom{ role: 'cell' }= s_('BatchedJob|Max Value')
+      %th.table-th-transparent.border-bottom{ role: 'cell' }= s_('BatchedJob|Batch size')
+      %th.table-th-transparent.border-bottom{ role: 'cell' }= s_('BatchedJob|Started at')
+      %th.table-th-transparent.border-bottom{ role: 'cell' }= s_('BatchedJob|Finished at')
+      %th.table-th-transparent.border-bottom{ role: 'cell' }= s_('BatchedJob|Attempts')
+      %th.table-th-transparent.border-bottom{ role: 'cell' }= s_('BatchedJob|Pause time (ms)')
+  %tbody{ role: 'rowgroup' }
+    = render partial: 'job', job: @job
+
+- if @transition_logs.any?
+  %h5= s_('BatchedJob|Transition logs:')
+
+  %table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' }
+    %thead{ role: 'rowgroup' }
+      %tr{ role: 'row' }
+        %th{ role: 'cell' }= _('Id')
+        %th{ role: 'cell' }= s_('BatchedJob|Created At')
+        %th{ role: 'cell' }= s_('BatchedJob|Previous Status')
+        %th{ role: 'cell' }= s_('BatchedJob|Next Status')
+        %th{ role: 'cell' }= s_('BatchedJob|Exception Class')
+        %th{ role: 'cell' }= s_('BatchedJob|Exception Message')
+    %tbody{ role: 'rowgroup' }
+      = render partial: 'transition_log', collection: @transition_logs
diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml
index 4102918931f..dfd3b87c674 100644
--- a/app/views/admin/broadcast_messages/_form.html.haml
+++ b/app/views/admin/broadcast_messages/_form.html.haml
@@ -29,7 +29,7 @@
       = f.label :starts_at, _("Dismissable")
     .col-sm-10
       = f.gitlab_ui_checkbox_component :dismissable, _('Allow users to dismiss the broadcast message')
-  - if Feature.enabled?(:role_targeted_broadcast_messages, default_enabled: :yaml)
+  - if Feature.enabled?(:role_targeted_broadcast_messages)
     .form-group.row
       .col-sm-2.col-form-label
         = f.label :target_access_levels, _('Target roles')
diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index 54c2a9d5250..8b657eda0c0 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -1,6 +1,6 @@
 - breadcrumb_title _("Messages")
 - page_title _("Broadcast Messages")
-- targeted_broadcast_messages_enabled = Feature.enabled?(:role_targeted_broadcast_messages, default_enabled: :yaml)
+- targeted_broadcast_messages_enabled = Feature.enabled?(:role_targeted_broadcast_messages)
 
 %h3.page-title
   = _('Broadcast Messages')
diff --git a/app/views/admin/dashboard/_security_newsletter_callout.html.haml b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
index 9b994b757f9..4b1303cc97c 100644
--- a/app/views/admin/dashboard/_security_newsletter_callout.html.haml
+++ b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
@@ -6,9 +6,9 @@
     alert_data: { feature_id: Users::CalloutsHelper::SECURITY_NEWSLETTER_CALLOUT,
                   dismiss_endpoint: callouts_path,
                   defer_links: 'true' },
-    close_button_data: { testid: 'close-security-newsletter-callout' }) do
-  .gl-alert-body
+    close_button_data: { testid: 'close-security-newsletter-callout' }) do |c|
+  = c.body do
     = s_('AdminArea|Sign up for the GitLab Security Newsletter to get notified for security updates.')
-  .gl-alert-actions
+  = c.actions do
     = link_to 'https://about.gitlab.com/company/preference-center/', target: '_blank', rel: 'noreferrer noopener', class: 'deferred-link gl-alert-action btn-confirm btn-md gl-button' do
       = s_('AdminArea|Sign up for the GitLab newsletter')
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index 8ac6f63cdfb..944d7bfced0 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/app/views/admin/groups/_form.html.haml
@@ -27,8 +27,8 @@
   - if @group.new_record?
     .form-group.row
       .offset-sm-2.col-sm-10
-        = render Pajamas::AlertComponent.new(dismissible: false) do
-          .gl-alert-body
+        = render Pajamas::AlertComponent.new(dismissible: false) do |c|
+          = c.body do
             = render 'shared/group_tips'
     .form-actions
       = f.submit _('Create group'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index 09f2d431197..39b2fa41c80 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -112,7 +112,7 @@
 
           = form_tag admin_group_members_update_path(@group), id: "new_project_member", class: "bulk_import", method: :put do
             %div
-              = users_select_tag(:user_ids, multiple: true, email_user: true, skip_ldap: @group.ldap_synced?, scope: :all)
+              = users_select_tag(:user_id, multiple: true, email_user: true, skip_ldap: @group.ldap_synced?, scope: :all)
             .gl-mt-3
               = select_tag :access_level, options_for_select(@group.access_level_roles), class: "project-access-select select2"
             %hr
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index be7055e6f7b..16f6e71d79b 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -16,8 +16,8 @@
     .col-md-12
       = render Pajamas::AlertComponent.new(variant: :danger,
         alert_class: 'gl-mb-5',
-        alert_data: { testid: 'last-repository-check-failed-alert' }) do
-        .gl-alert-body
+        alert_data: { testid: 'last-repository-check-failed-alert' }) do |c|
+        = c.body do
           - last_check_message = _("Last repository check (%{last_check_timestamp}) failed. See the 'repocheck.log' file for error messages.")
           - last_check_message = last_check_message % { last_check_timestamp: time_ago_with_tooltip(@project.last_repository_check_at) }
           = last_check_message.html_safe
diff --git a/app/views/admin/requests_profiles/index.html.haml b/app/views/admin/requests_profiles/index.html.haml
deleted file mode 100644
index 9d42a2bfa93..00000000000
--- a/app/views/admin/requests_profiles/index.html.haml
+++ /dev/null
@@ -1,22 +0,0 @@
-- page_title _('Requests Profiles')
-
-%h3.page-title
-  = page_title
-
-.bs-callout.clearfix
-  = html_escape(_('Pass the header %{codeOpen} X-Profile-Token: %{profile_token} %{codeClose} to profile the request')) % { profile_token: @profile_token, codeOpen: '<code>'.html_safe, codeClose: '</code>'.html_safe }
-
-- if @profiles.present?
-  .gl-mt-3
-    - @profiles.each do |path, profiles|
-      .card
-        .card-header
-          %code= path
-        %ul.content-list
-          - profiles.each do |profile|
-            %li
-              = link_to profile.time.to_s(:long) + ' ' + profile.profile_mode.capitalize,
-                admin_requests_profile_path(profile)
-- else
-  %p
-    = _('No profiles found')
diff --git a/app/views/admin/runners/edit.html.haml b/app/views/admin/runners/edit.html.haml
index 5570c46c17f..ccdfe67ea77 100644
--- a/app/views/admin/runners/edit.html.haml
+++ b/app/views/admin/runners/edit.html.haml
@@ -1,95 +1,53 @@
-- add_page_specific_style 'page_bundles/ci_status'
-
 - runner_name = "##{@runner.id} (#{@runner.short_sha})"
-- if Feature.enabled?(:runner_read_only_admin_view, default_enabled: :yaml)
-  - breadcrumb_title _('Edit')
-  - page_title _('Edit'), runner_name
-  - add_to_breadcrumbs _('Runners'), admin_runners_path
-  - add_to_breadcrumbs runner_name, admin_runner_path(@runner)
-- else
-  - breadcrumb_title runner_name
-  - page_title runner_name
+- breadcrumb_title _('Edit')
+- page_title _('Edit'), runner_name
+- add_to_breadcrumbs _('Runners'), admin_runners_path
+- add_to_breadcrumbs runner_name, admin_runner_path(@runner)
 
-#js-admin-runner-edit{ data: {runner_id: @runner.id} }
+#js-admin-runner-edit{ data: {runner_id: @runner.id, runner_path: admin_runner_path(@runner) } }
 
-.row
-  .col-md-6
-    %h4= _('Restrict projects for this runner')
-    - if @runner.runner_projects.any?
-      %table.table{ data: { testid: 'assigned-projects' } }
-        %thead
-          %tr
-            %th= _('Assigned projects')
-        - @runner.runner_projects.each do |runner_project|
-          - project = runner_project.project
-          - if project
-            %tr
-              %td
-                = render Pajamas::AlertComponent.new(variant: :danger,
-                  dismissible: false,
-                  title: project.full_name) do
-                  .gl-alert-actions
-                    = link_to _('Disable'), admin_namespace_project_runner_project_path(project.namespace, project, runner_project), method: :delete, class: 'btn gl-alert-action btn-confirm btn-md gl-button'
+- if @runner.project_type?
+  .gl-overflow-auto
+    %h4.gl-font-lg.gl-my-5= _('Restrict projects for this runner')
 
-    %table.table{ data: { testid: 'unassigned-projects' } }
+  - if @runner.runner_projects.any?
+    %table.table{ data: { testid: 'assigned-projects' } }
       %thead
         %tr
-          %th= _('Project')
-          %th
-
+          %th= _('Assigned projects')
+      - @runner.runner_projects.each do |runner_project|
+        - project = runner_project.project
+        - if project
+          %tr
+            %td
+              = render Pajamas::AlertComponent.new(variant: :danger,
+                dismissible: false,
+                title: project.full_name) do |c|
+                = c.actions do
+                  = link_to _('Disable'), admin_namespace_project_runner_project_path(project.namespace, project, runner_project), method: :delete, class: 'btn gl-alert-action btn-confirm btn-md gl-button'
+
+  %table.table{ data: { testid: 'unassigned-projects' } }
+    %thead
+      %tr
+        %th= s_('Runners|Select projects to assign to this runner')
+        %th
+
+    %tr
+      %td
+        = form_tag edit_admin_runner_path(@runner), id: 'runner-projects-search', class: 'form-inline', method: :get do
+          .input-group
+            = search_field_tag :search, params[:search], class: 'form-control gl-form-input', spellcheck: false
+            .input-group-append
+              = submit_tag _('Search'), class: 'gl-button btn btn-default'
+
+      %td
+    - @projects.each do |project|
       %tr
         %td
-          = form_tag edit_admin_runner_path(@runner), id: 'runner-projects-search', class: 'form-inline', method: :get do
-            .input-group
-              = search_field_tag :search, params[:search], class: 'form-control gl-form-input', spellcheck: false
-              .input-group-append
-                = submit_tag _('Search'), class: 'gl-button btn btn-default'
-
+          = project.full_name
         %td
-      - @projects.each do |project|
-        %tr
-          %td
-            = project.full_name
-          %td
-            .float-right
-              = form_for project.runner_projects.new, url: admin_namespace_project_runner_projects_path(project.namespace, project), method: :post do |f|
-                = f.hidden_field :runner_id, value: @runner.id
-                = f.submit _('Enable'), aria: { label: s_('Runners|Change to project runner') }, class: 'gl-button btn btn-sm', data: { confirm: (s_('Runners|You are about to change this instance runner to a project runner. This operation is not reversible. Are you sure you want to continue?') if @runner.instance_type?), confirm_btn_variant: 'danger' }
-    = paginate_without_count @projects
-
-  .col-md-6
-    %h4= _('Recent jobs served by this runner')
-    %table.table.ci-table.runner-builds
-      %thead
-        %tr
-          %th= _('Job')
-          %th= _('Status')
-          %th= _('Project')
-          %th= _('Commit')
-          %th= _('Finished at')
-
-      - @builds.each do |build|
-        - project = build.project
-        %tr.build
-          %td.id
-            - if project
-              = link_to project_job_path(project, build) do
-                %strong ##{build.id}
-            - else
-              %strong ##{build.id}
-
-          %td.status
-            = render 'ci/status/badge', status: build.detailed_status(current_user)
-
-          %td.status
-            - if project
-              = project.full_name
-
-          %td.build-link
-            - if project
-              = link_to pipeline_path(build.pipeline) do
-                %strong= build.pipeline.short_sha
-
-          %td.timestamp
-            - if build.finished_at
-              %span= time_ago_with_tooltip build.finished_at
+          .float-right
+            = form_for project.runner_projects.new, url: admin_namespace_project_runner_projects_path(project.namespace, project), method: :post do |f|
+              = f.hidden_field :runner_id, value: @runner.id
+              = f.submit _('Enable'), class: 'gl-button btn btn-sm'
+  = paginate_without_count @projects
diff --git a/app/views/admin/runners/show.html.haml b/app/views/admin/runners/show.html.haml
index 5c4a7026f50..22351397b9a 100644
--- a/app/views/admin/runners/show.html.haml
+++ b/app/views/admin/runners/show.html.haml
@@ -5,4 +5,4 @@
 - page_title title
 - add_to_breadcrumbs _('Runners'), admin_runners_path
 
-#js-admin-runner-show{ data: {runner_id: @runner.id} }
+#js-admin-runner-show{ data: {runner_id: @runner.id, runners_path: admin_runners_path} }
diff --git a/app/views/admin/sessions/_new_base.html.haml b/app/views/admin/sessions/_new_base.html.haml
index c9b002a4dd2..65eb1358b40 100644
--- a/app/views/admin/sessions/_new_base.html.haml
+++ b/app/views/admin/sessions/_new_base.html.haml
@@ -4,4 +4,4 @@
     = password_field_tag 'user[password]', nil, class: 'form-control', autocomplete: 'current-password', required: true, title: _('This field is required.'), data: { qa_selector: 'password_field' }
 
   .submit-container.move-submit-down
-    = submit_tag _('Enter Admin Mode'), class: 'gl-button btn btn-success', data: { qa_selector: 'enter_admin_mode_button' }
+    = 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 ab7eb8c79dc..9372bae14c3 100644
--- a/app/views/admin/sessions/_signin_box.html.haml
+++ b/app/views/admin/sessions/_signin_box.html.haml
@@ -14,6 +14,6 @@
   = render_if_exists 'devise/sessions/new_smartcard'
 
 - if allow_admin_mode_password_authentication_for_web?
-  .login-box.tab-pane{ id: 'login-pane', role: 'tabpanel', class: active_when(!any_form_based_providers_enabled?) }
+  .login-box.tab-pane.gl-p-5{ id: 'login-pane', role: 'tabpanel', class: active_when(!any_form_based_providers_enabled?) }
     .login-body
       = render 'admin/sessions/new_base'
diff --git a/app/views/admin/sessions/_two_factor_otp.html.haml b/app/views/admin/sessions/_two_factor_otp.html.haml
index 3fe6e20a367..40ba79d1a65 100644
--- a/app/views/admin/sessions/_two_factor_otp.html.haml
+++ b/app/views/admin/sessions/_two_factor_otp.html.haml
@@ -6,4 +6,4 @@
       = _("Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes.")
 
   .submit-container.move-submit-down
-    = submit_tag 'Verify code', class: 'gl-button btn btn-success'
+    = 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 67c607270a5..7d07b49c98e 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/tabs_normal', tab_title: _('Enter Admin Mode'), render_signup_link: false
+          = render 'devise/shared/tab_single', tab_title: page_title
         .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 531ab206157..3f915846dd8 100644
--- a/app/views/admin/sessions/two_factor.html.haml
+++ b/app/views/admin/sessions/two_factor.html.haml
@@ -5,9 +5,9 @@
   .col-md-5.new-session-forms-container
     .login-page
       #signin-container
-        = render 'devise/shared/tabs_normal', tab_title: _('Enter Admin Mode'), render_signup_link: false
+        = render 'devise/shared/tab_single', tab_title: _('Enter Admin Mode')
         .tab-content
-          .login-box.tab-pane.active{ id: 'login-pane', role: 'tabpanel' }
+          .login-box.tab-pane.gl-p-5.active{ id: 'login-pane', role: 'tabpanel' }
             .login-body
               - if current_user.two_factor_otp_enabled?
                 = render 'admin/sessions/two_factor_otp'
diff --git a/app/views/admin/topics/_form.html.haml b/app/views/admin/topics/_form.html.haml
index 50ef375dd35..9b9d97950cc 100644
--- a/app/views/admin/topics/_form.html.haml
+++ b/app/views/admin/topics/_form.html.haml
@@ -3,13 +3,20 @@
 
   .form-group
     = f.label :name do
-      = _("Topic name")
-    = f.text_field :name, placeholder: _('My topic'), class: 'form-control input-lg', data: { qa_selector: 'topic_name_field' },
+      = _("Topic slug (name)")
+    = f.text_field :name, placeholder: _('my-topic'), class: 'form-control input-lg', data: { qa_selector: 'topic_name_field' },
       required: true,
       title: _('Please fill in a name for your topic.'),
       autofocus: true
 
   .form-group
+    = f.label :title do
+      = _("Topic title")
+    = f.text_field :title, placeholder: _('My topic'), class: 'form-control input-lg', data: { qa_selector: 'topic_title_field' },
+      required: true,
+      title: _('Please fill in a title for your topic.')
+
+  .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,
diff --git a/app/views/admin/topics/_topic.html.haml b/app/views/admin/topics/_topic.html.haml
index 959e7ab31fc..462943263df 100644
--- a/app/views/admin/topics/_topic.html.haml
+++ b/app/views/admin/topics/_topic.html.haml
@@ -1,4 +1,5 @@
 - topic = local_assigns.fetch(:topic)
+- title = topic.title || topic.name
 
 %li.topic-row.gl-py-3.gl-align-items-center{ class: 'gl-display-flex!', data: { qa_selector: 'topic_row_content' } }
   .avatar-container.rect-avatar.s40.gl-flex-shrink-0
@@ -6,7 +7,9 @@
 
   .gl-min-w-0.gl-flex-grow-1
     .title
-      = link_to topic.name, topic_explore_projects_path(topic_name: topic.name)
+      = link_to title, topic_explore_projects_path(topic_name: topic.name)
+    %div
+      = topic.name
 
   .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-sm-display-flex
     %span.gl-ml-5.has-tooltip{ title: n_('%d project', '%d projects', topic.total_projects_count) % topic.total_projects_count }
diff --git a/app/views/admin/users/_users.html.haml b/app/views/admin/users/_users.html.haml
index 86391b980c0..a7ed7b8c052 100644
--- a/app/views/admin/users/_users.html.haml
+++ b/app/views/admin/users/_users.html.haml
@@ -1,8 +1,8 @@
 - if registration_features_can_be_prompted?
   = render Pajamas::AlertComponent.new(variant: :tip,
     alert_class: 'gl-my-5',
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = render 'shared/registration_features_discovery_message', feature_title: s_('RegistrationFeatures|send emails to users')
 
 .top-area
diff --git a/app/views/ci/runner/_how_to_setup_runner.html.haml b/app/views/ci/runner/_how_to_setup_runner.html.haml
index f0a9936112b..8f4cc41822b 100644
--- a/app/views/ci/runner/_how_to_setup_runner.html.haml
+++ b/app/views/ci/runner/_how_to_setup_runner.html.haml
@@ -8,13 +8,13 @@
     = _("Register the runner with this URL:")
     %br
     %code#coordinator_address= root_url(only_path: false)
-    = clipboard_button(target: '#coordinator_address', title: _("Copy URL"), class: "btn-transparent btn-clipboard")
+    = clipboard_button(target: '#coordinator_address', title: _("Copy URL"))
     %br
     %br
     = _("And this registration token:")
     %br
     %code#registration_token{ data: {testid: 'registration_token' } }= registration_token
-    = clipboard_button(target: '#registration_token', title: _("Copy token"), class: "btn-transparent btn-clipboard")
+    = clipboard_button(target: '#registration_token', title: _("Copy token"))
 
 .gl-mt-3.gl-mb-3
 = button_to _("Reset registration token"), reset_token_url,
diff --git a/app/views/ci/runner/_setup_runner_in_aws.html.haml b/app/views/ci/runner/_setup_runner_in_aws.html.haml
index b0a5b40f2ad..09fa0176da6 100644
--- a/app/views/ci/runner/_setup_runner_in_aws.html.haml
+++ b/app/views/ci/runner/_setup_runner_in_aws.html.haml
@@ -8,7 +8,7 @@
     = _('Copy this registration token.')
     %br
     %code#registration_token{ data: { testid: 'registration_token' } }= registration_token
-    = clipboard_button(target: '#registration_token', title: _('Copy token'), class: 'btn-transparent btn-clipboard')
+    = clipboard_button(target: '#registration_token', title: _('Copy token'))
   %li
     = _('Choose the preferred Runner and populate the AWS CFT.')
     = link_to _('Learn more.'), 'https://gitlab.com/guided-explorations/aws/gitlab-runner-autoscaling-aws-asg', target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/ci/variables/_content.html.haml b/app/views/ci/variables/_content.html.haml
index 8a2a479486f..b597c2d442a 100644
--- a/app/views/ci/variables/_content.html.haml
+++ b/app/views/ci/variables/_content.html.haml
@@ -4,7 +4,7 @@
   = _('Variables can be:')
 %ul
   %li
-    = html_escape(_('%{code_open}Protected:%{code_close} Only exposed to protected branches or tags.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+    = 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 }
     = link_to _('Learn more.'), help_page_path('ci/variables/index', anchor: 'mask-a-cicd-variable'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index f289e6a3386..0024526a90c 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -2,7 +2,7 @@
 
 - if ci_variable_protected_by_default?
   %p.settings-message.text-center
-    - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable') }
+    - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/index', anchor: 'protected-cicd-variables') }
     = s_('Environment variables are configured by your administrator to be %{link_start}protected%{link_end} by default.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
 - is_group = !@group.nil?
@@ -17,9 +17,9 @@
   aws_tip_commands_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'run-aws-commands-from-gitlab-cicd'),
   aws_tip_learn_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'aws'),
   contains_variable_reference_link: help_page_path('ci/variables/index', anchor: 'use-variables-in-other-variables'),
-  protected_environment_variables_link: help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable'),
+  protected_environment_variables_link: help_page_path('ci/variables/index', anchor: 'protected-cicd-variables'),
   masked_environment_variables_link: help_page_path('ci/variables/index', anchor: 'mask-a-cicd-variable'),
-} }
+  environment_scope_link: help_page_path('ci/environments/index', anchor: 'scope-environments-with-specs') } }
 
 - if !@group && @project.group
   .settings-header.border-top.gl-mt-6
diff --git a/app/views/clusters/clusters/_banner.html.haml b/app/views/clusters/clusters/_banner.html.haml
index b7d1aa6f944..720e3ff08e2 100644
--- a/app/views/clusters/clusters/_banner.html.haml
+++ b/app/views/clusters/clusters/_banner.html.haml
@@ -7,13 +7,13 @@
   %span.gl-ml-2= s_('ClusterIntegration|Kubernetes cluster is being created...')
 
 = render Pajamas::AlertComponent.new(variant: :warning,
-  alert_class: 'hidden js-cluster-api-unreachable') do
-  .gl-alert-body
+  alert_class: 'hidden js-cluster-api-unreachable') do |c|
+  = c.body do
     = s_('ClusterIntegration|Your cluster API is unreachable. Please ensure your API URL is correct.')
 
 = render Pajamas::AlertComponent.new(variant: :warning,
-  alert_class: 'hidden js-cluster-authentication-failure js-cluster-api-unreachable') do
-  .gl-alert-body
+  alert_class: 'hidden js-cluster-authentication-failure js-cluster-api-unreachable') do |c|
+  = c.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 202e2c14d3f..3a83efec29b 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_class: 'gl-mt-6 gl-mb-3') do
-  .gl-alert-body
+= render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mt-6 gl-mb-3') do |c|
+  = c.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/_gcp_signup_offer_banner.html.haml b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
index ffd910b1b9d..b130e0c7214 100644
--- a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
+++ b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
@@ -2,9 +2,9 @@
 
 = render Pajamas::AlertComponent.new(title: s_('ClusterIntegration|Did you know?'),
   alert_class: 'gcp-signup-offer',
-  alert_data: { feature_id: Users::CalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: callouts_path }) do
-  .gl-alert-body
+  alert_data: { feature_id: Users::CalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: callouts_path }) do |c|
+  = c.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 }
-  .gl-alert-actions
+  = c.actions do
     %a.gl-button.btn-confirm.text-decoration-none{ href: 'https://cloud.google.com/partners/partnercredit/?pcn_code=0014M00001h35gDQAQ#contact-form', target: '_blank', rel: 'noopener noreferrer' }
       = s_("ClusterIntegration|Apply for credit")
diff --git a/app/views/clusters/clusters/_integrations.html.haml b/app/views/clusters/clusters/_integrations.html.haml
index c670dafb947..62ae551fee7 100644
--- a/app/views/clusters/clusters/_integrations.html.haml
+++ b/app/views/clusters/clusters/_integrations.html.haml
@@ -13,15 +13,16 @@
             = prometheus_form.gitlab_ui_checkbox_component :enabled,
                 s_('ClusterIntegration|Enable Prometheus integration'),
                 help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
-          = prometheus_form.submit _('Save changes'), class: 'btn gl-button btn-success'
+          = prometheus_form.submit _('Save changes'), class: 'btn gl-button btn-confirm'
 
-      .sub-section.form-group
-        = gitlab_ui_form_for @elastic_stack_integration, as: :integration, namespace: :elastic_stack, url: @cluster.integrations_path, method: :post, html: { class: 'js-cluster-integrations-form' } do |elastic_stack_form|
-          = elastic_stack_form.hidden_field :application_type
-          .form-group.gl-form-group
-            - help_text = s_('ClusterIntegration|Allows GitLab to query a specifically configured in-cluster Elasticsearch for pod logs.')
-            - help_link = link_to(_('More information.'), help_page_path("user/clusters/integrations", anchor: "elastic-stack-cluster-integration"), target: '_blank', rel: 'noopener noreferrer')
-            = elastic_stack_form.gitlab_ui_checkbox_component :enabled,
-                s_('ClusterIntegration|Enable Elastic Stack integration'),
-                help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
-          = elastic_stack_form.submit _('Save changes'), class: 'btn gl-button btn-success'
+      - if Feature.enabled?(:monitor_logging, @project)
+        .sub-section.form-group
+          = gitlab_ui_form_for @elastic_stack_integration, as: :integration, namespace: :elastic_stack, url: @cluster.integrations_path, method: :post, html: { class: 'js-cluster-integrations-form' } do |elastic_stack_form|
+            = elastic_stack_form.hidden_field :application_type
+            .form-group.gl-form-group
+              - help_text = s_('ClusterIntegration|Allows GitLab to query a specifically configured in-cluster Elasticsearch for pod logs.')
+              - help_link = link_to(_('More information.'), help_page_path("user/clusters/integrations", anchor: "elastic-stack-cluster-integration"), target: '_blank', rel: 'noopener noreferrer')
+              = elastic_stack_form.gitlab_ui_checkbox_component :enabled,
+                  s_('ClusterIntegration|Enable Elastic Stack integration'),
+                  help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
+            = elastic_stack_form.submit _('Save changes'), class: 'btn gl-button btn-confirm'
diff --git a/app/views/clusters/clusters/_sidebar.html.haml b/app/views/clusters/clusters/_sidebar.html.haml
index 045c03df4fa..e479773e70d 100644
--- a/app/views/clusters/clusters/_sidebar.html.haml
+++ b/app/views/clusters/clusters/_sidebar.html.haml
@@ -1,5 +1,4 @@
 - is_connect_page = local_assigns.fetch(:is_connect_page, false)
-- docs_mode = local_assigns.fetch(:docs_mode, false)
 - title = is_connect_page ? s_('ClusterIntegration|Connect a Kubernetes cluster') : s_('ClusterIntegration|Create a Kubernetes cluster')
 
 %h3
@@ -7,7 +6,7 @@
 %p
   = clusterable.sidebar_text
 
-- if !docs_mode
+- if is_connect_page
   %p
     = clusterable.learn_more_link
 
diff --git a/app/views/clusters/clusters/aws/_new.html.haml b/app/views/clusters/clusters/aws/_new.html.haml
deleted file mode 100644
index 7142dd83dce..00000000000
--- a/app/views/clusters/clusters/aws/_new.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-- if !Gitlab::CurrentSettings.eks_integration_enabled?
-  - documentation_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/clusters/add_eks_clusters.md',
-      anchor: 'additional-requirements-for-self-managed-instances') }
-  = s_('Amazon authentication is not %{link_start}correctly configured%{link_end}. Ask your GitLab administrator if you want to use this service.').html_safe % { link_start: documentation_link_start, link_end: '<a/>'.html_safe }
-- else
-  .js-create-eks-cluster-form-container{ data: { 'gitlab-managed-cluster-help-path' => help_page_path('user/project/clusters/gitlab_managed_clusters.md'),
-    'namespace-per-environment-help-path' => help_page_path('user/project/clusters/deploy_to_cluster.md', anchor: 'custom-namespace'),
-    'create-role-path' => clusterable.authorize_aws_role_path,
-    'create-cluster-path' => clusterable.create_aws_clusters_path,
-    'account-id' => Gitlab::CurrentSettings.eks_account_id,
-    'external-id' => @aws_role.role_external_id,
-    'role-arn' => @aws_role.role_arn,
-    'instance-types' => @instance_types,
-    'kubernetes-integration-help-path' => help_page_path('user/infrastructure/clusters/index.md'),
-    'account-and-external-ids-help-path' => help_page_path('user/project/clusters/add_eks_clusters.md', anchor: 'how-to-create-a-new-cluster-on-eks-through-cluster-certificates-deprecated'),
-    'create-role-arn-help-path' => help_page_path('user/project/clusters/add_eks_clusters.md', anchor: 'how-to-create-a-new-cluster-on-eks-through-cluster-certificates-deprecated'),
-    'external-link-icon' => sprite_icon('external-link') } }
diff --git a/app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml b/app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml
index 807f98b7b0a..bed671832f3 100644
--- a/app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml
+++ b/app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml
@@ -1,15 +1,11 @@
-- provider = local_assigns.fetch(:provider)
-- is_current_provider = provider == params[:provider]
 - logo_path = local_assigns.fetch(:logo_path)
 - help_path = local_assigns.fetch(:help_path)
 - label = local_assigns.fetch(:label)
 - last = local_assigns.fetch(:last, false)
-- docs_mode = local_assigns.fetch(:docs_mode, false)
 - classes = ["btn btn-confirm gl-button btn-confirm-secondary gl-flex-direction-column gl-w-half"]
-- conditional_classes = [("gl-mr-5" unless last), ("active" if is_current_provider && !docs_mode), ("js-create-#{provider}-cluster-button" if !docs_mode)]
-- link = docs_mode ? help_path : clusterable.new_path(provider: provider)
+- conditional_classes = [("gl-mr-5" unless last)]
 
-= link_to link, class: classes + conditional_classes do
+= link_to help_path, class: classes + conditional_classes do
   .svg-content.gl-p-3= image_tag logo_path, alt: label, class: "gl-w-64 gl-h-64"
   %span
     = label
diff --git a/app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml b/app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml
index 69250141816..e4128ee22a4 100644
--- a/app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml
+++ b/app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml
@@ -3,13 +3,12 @@
 - create_cluster_label = s_('ClusterIntegration|Where do you want to create a cluster?')
 - eks_help_path = help_page_path('user/infrastructure/clusters/connect/new_eks_cluster')
 - gke_help_path = help_page_path('user/infrastructure/clusters/connect/new_gke_cluster')
-- docs_mode = local_assigns.fetch(:docs_mode, false)
 
 .gl-p-5
   %h4.gl-mb-5
     = create_cluster_label
   .gl-display-flex
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
-      locals: { provider: 'aws', label: eks_label, logo_path: 'illustrations/logos/amazon_eks.svg', help_path: eks_help_path, docs_mode: docs_mode }
+      locals: { label: eks_label, logo_path: 'illustrations/logos/amazon_eks.svg', help_path: eks_help_path }
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
-      locals: { provider: 'gcp', label: gke_label, logo_path: 'illustrations/logos/google_gke.svg', help_path: gke_help_path, docs_mode: docs_mode, last: true }
+      locals: { label: gke_label, logo_path: 'illustrations/logos/google_gke.svg', help_path: gke_help_path, last: true }
diff --git a/app/views/clusters/clusters/connect.html.haml b/app/views/clusters/clusters/connect.html.haml
index ec00a9c345a..82750974803 100644
--- a/app/views/clusters/clusters/connect.html.haml
+++ b/app/views/clusters/clusters/connect.html.haml
@@ -9,5 +9,5 @@
   .gl-w-quarter.gl-xs-w-full.gl-flex-shrink-0.gl-md-mr-5
     = render 'sidebar', is_connect_page: true
   .gl-w-full
-    #js-cluster-new{ data: js_cluster_new }
+    #js-cluster-new
     = render 'clusters/clusters/user/form'
diff --git a/app/views/clusters/clusters/gcp/_form.html.haml b/app/views/clusters/clusters/gcp/_form.html.haml
deleted file mode 100644
index 58b8e8b1003..00000000000
--- a/app/views/clusters/clusters/gcp/_form.html.haml
+++ /dev/null
@@ -1,87 +0,0 @@
-- external_link_icon = sprite_icon('external-link')
-- zones_link_url = 'https://cloud.google.com/compute/docs/regions-zones/regions-zones'
-- machine_type_link_url = 'https://cloud.google.com/compute/docs/machine-types'
-- pricing_link_url = 'https://cloud.google.com/compute/pricing#machinetype'
-- kubernetes_integration_url = help_page_path('user/infrastructure/clusters/index.md')
-- help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
-- help_link_end = ' %{external_link_icon}</a>'.html_safe % { external_link_icon: external_link_icon }
-
-%p
-  = s_('ClusterIntegration|Read our %{link_start}help page%{link_end} on Kubernetes cluster integration.').html_safe % { link_start: help_link_start % { url: kubernetes_integration_url }, link_end: '</a>'.html_safe }
-
-%p= link_to('Select a different Google account', @authorize_url)
-
-= bootstrap_form_for @gcp_cluster, html: { class: 'gl-show-field-errors js-gke-cluster-creation prepend-top-20',
-  data: { token: token_in_session } }, url: clusterable.create_gcp_clusters_path, as: :cluster do |field|
-  = field.text_field :name, required: true, title: s_('ClusterIntegration|Cluster name is required.'),
-    label: s_('ClusterIntegration|Kubernetes cluster name'), label_class: 'label-bold'
-  = field.form_group :environment_scope, label: { text: s_('ClusterIntegration|Environment scope'),
-    class: 'label-bold' } do
-    = field.text_field :environment_scope, required: true, class: 'form-control',
-      title: 'Environment scope is required.', wrapper: false
-    .form-text.text-muted= s_("ClusterIntegration|Choose which of your environments will use this cluster.")
-
-  = field.fields_for :provider_gcp, @gcp_cluster.provider_gcp do |provider_gcp_field|
-    .form-group
-      = provider_gcp_field.label :gcp_project_id, s_('ClusterIntegration|Google Cloud Platform project'),
-        class: 'label-bold'
-      .js-gcp-project-id-dropdown-entry-point{ data: { docsUrl: 'https://console.cloud.google.com/home/dashboard' } }
-        = provider_gcp_field.hidden_field :gcp_project_id
-        .dropdown
-          %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
-            %span.dropdown-toggle-text
-              = _('Select project')
-            = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
-        %span.form-text.text-muted &nbsp;
-
-    .form-group
-      = provider_gcp_field.label :zone, s_('ClusterIntegration|Zone'), class: 'label-bold'
-      .js-gcp-zone-dropdown-entry-point
-        = provider_gcp_field.hidden_field :zone
-        .dropdown
-          %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
-            %span.dropdown-toggle-text
-              = _('Select project to choose zone')
-            = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
-      %p.form-text.text-muted
-        = s_('ClusterIntegration|Learn more about %{help_link_start}zones%{help_link_end}.').html_safe % { help_link_start: help_link_start % { url: zones_link_url }, help_link_end: help_link_end }
-
-    = provider_gcp_field.number_field :num_nodes, required: true, placeholder: '3',
-      title: s_('ClusterIntegration|Number of nodes must be a numerical value.'),
-      label: s_('ClusterIntegration|Number of nodes'), label_class: 'label-bold'
-
-    .form-group
-      = provider_gcp_field.label :machine_type, s_('ClusterIntegration|Machine type'), class: 'label-bold'
-      .js-gcp-machine-type-dropdown-entry-point
-        = provider_gcp_field.hidden_field :machine_type
-        .dropdown
-          %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
-            %span.dropdown-toggle-text
-              = _('Select project and zone to choose machine type')
-            = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
-      %p.form-text.text-muted
-        = s_('ClusterIntegration|Learn more about %{help_link_start_machine_type}machine types%{help_link_end} and %{help_link_start_pricing}pricing%{help_link_end}.').html_safe % { help_link_start_machine_type: help_link_start % { url: machine_type_link_url }, help_link_start_pricing: help_link_start % { url: pricing_link_url }, help_link_end: help_link_end }
-
-    .form-group
-      = provider_gcp_field.check_box :cloud_run, { label: s_('ClusterIntegration|Enable Cloud Run for Anthos'),
-        label_class: 'label-bold' }
-      .form-text.text-muted
-        = s_('ClusterIntegration|Uses the Cloud Run, Istio, and HTTP Load Balancing addons for this cluster.')
-        = link_to _('Learn more.'), help_page_path('user/project/clusters/add_gke_clusters.md', anchor: 'cloud-run-for-anthos'), target: '_blank', rel: 'noopener noreferrer'
-
-  .form-group
-    = field.check_box :managed, { label: s_('ClusterIntegration|GitLab-managed cluster'),
-      label_class: 'label-bold' }
-    .form-text.text-muted
-      = s_('ClusterIntegration|Allow GitLab to manage namespaces and service accounts for this cluster.')
-      = link_to _('Learn more.'), help_page_path('user/project/clusters/gitlab_managed_clusters.md'), target: '_blank', rel: 'noopener noreferrer'
-
-  .form-group
-    = field.check_box :namespace_per_environment, { label: s_('ClusterIntegration|Namespace per environment'), label_class: 'label-bold' }
-    .form-text.text-muted
-      = s_('ClusterIntegration|Deploy each environment to its own namespace. Otherwise, environments within a project share a project-wide namespace. Note that anyone who can trigger a deployment of a namespace can read its secrets. If modified, existing environments will use their current namespaces until the cluster cache is cleared.')
-      = link_to _('Learn more.'), help_page_path('user/project/clusters/deploy_to_cluster.md', anchor: 'custom-namespace'), target: '_blank', rel: 'noopener noreferrer'
-
-  .form-group.js-gke-cluster-creation-submit-container
-    = field.submit s_('ClusterIntegration|Create Kubernetes cluster'),
-      class: 'js-gke-cluster-creation-submit gl-button btn btn-confirm', disabled: true
diff --git a/app/views/clusters/clusters/gcp/_gcp_not_configured.html.haml b/app/views/clusters/clusters/gcp/_gcp_not_configured.html.haml
deleted file mode 100644
index f1f26a0aab8..00000000000
--- a/app/views/clusters/clusters/gcp/_gcp_not_configured.html.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-- documentation_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path("integration/google") }
-- link_end = '<a/>'.html_safe
-= s_('Google authentication is not %{link_start}properly configured%{link_end}. Ask your GitLab administrator if you want to use this service.').html_safe % { link_start: documentation_link_start, link_end: link_end }
diff --git a/app/views/clusters/clusters/gcp/_header.html.haml b/app/views/clusters/clusters/gcp/_header.html.haml
deleted file mode 100644
index a2ad3cd64df..00000000000
--- a/app/views/clusters/clusters/gcp/_header.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-%h4
-  = s_('ClusterIntegration|Enter the details for your Kubernetes cluster')
-%p
-  = s_('ClusterIntegration|Please make sure that your Google account meets the following requirements:')
-%ul
-  %li
-    - link_to_kubernetes_engine = link_to(s_('ClusterIntegration|access to Google Kubernetes Engine'), 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', target: '_blank', rel: 'noopener noreferrer')
-    = s_('ClusterIntegration|Your account must have %{link_to_kubernetes_engine}').html_safe % { link_to_kubernetes_engine: link_to_kubernetes_engine }
-    %li
-      - link_to_requirements = link_to(s_('ClusterIntegration|meets the requirements'), 'https://cloud.google.com/kubernetes-engine/docs/quickstart?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', target: '_blank', rel: 'noopener noreferrer')
-      = s_('ClusterIntegration|Make sure your account %{link_to_requirements} to create Kubernetes clusters').html_safe % { link_to_requirements: link_to_requirements }
-    %li
-      - link_to_container_project = link_to(s_('ClusterIntegration|Google Kubernetes Engine project'), 'https://console.cloud.google.com/home/dashboard?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', target: '_blank', rel: 'noopener noreferrer')
-      = s_('ClusterIntegration|This account must have permissions to create a Kubernetes cluster in the %{link_to_container_project} specified below').html_safe % { link_to_container_project: link_to_container_project }
diff --git a/app/views/clusters/clusters/gcp/_new.html.haml b/app/views/clusters/clusters/gcp/_new.html.haml
deleted file mode 100644
index 6c3a230fb93..00000000000
--- a/app/views/clusters/clusters/gcp/_new.html.haml
+++ /dev/null
@@ -1,5 +0,0 @@
-= render 'clusters/clusters/gcp/header'
-- if @valid_gcp_token
-  = render 'clusters/clusters/gcp/form'
-- else
-  = render 'clusters/clusters/gcp/gcp_not_configured'
diff --git a/app/views/clusters/clusters/new.html.haml b/app/views/clusters/clusters/new.html.haml
deleted file mode 100644
index 53d521fface..00000000000
--- a/app/views/clusters/clusters/new.html.haml
+++ /dev/null
@@ -1,19 +0,0 @@
-- @content_class = 'limit-container-width' unless fluid_layout
-- add_to_breadcrumbs _('Kubernetes Clusters'), clusterable.index_path
-- breadcrumb_title _('Create a cluster')
-- page_title _('Create a Kubernetes cluster')
-- provider = params[:provider]
-
-= render 'deprecation_alert'
-
-= render_gcp_signup_offer
-
-.gl-md-display-flex.gl-mt-3
-  .gl-w-quarter.gl-xs-w-full.gl-flex-shrink-0.gl-md-mr-5
-    = render 'sidebar', is_connect_page: false
-  .gl-w-full
-    = render 'clusters/clusters/cloud_providers/cloud_provider_selector'
-
-    - if ['aws', 'gcp'].include?(provider)
-      .gl-p-5.gl-border-1.gl-border-t-solid.gl-border-gray-100
-        = render "clusters/clusters/#{provider}/new"
diff --git a/app/views/clusters/clusters/new_cluster_docs.html.haml b/app/views/clusters/clusters/new_cluster_docs.html.haml
index 9b99aef0e72..bff371b8d51 100644
--- a/app/views/clusters/clusters/new_cluster_docs.html.haml
+++ b/app/views/clusters/clusters/new_cluster_docs.html.haml
@@ -2,12 +2,11 @@
 - add_to_breadcrumbs _('Kubernetes Clusters'), clusterable.index_path
 - breadcrumb_title _('Create a cluster')
 - page_title _('Create a Kubernetes cluster')
-- docs_mode = true
 
 = render_gcp_signup_offer
 
 .gl-md-display-flex.gl-mt-3
   .gl-w-quarter.gl-xs-w-full.gl-flex-shrink-0.gl-md-mr-5
-    = render 'sidebar', docs_mode: docs_mode, is_connect_page: false
+    = render 'sidebar', is_connect_page: false
   .gl-w-full
-    = render 'clusters/clusters/cloud_providers/cloud_provider_selector', docs_mode: docs_mode
+    = render 'clusters/clusters/cloud_providers/cloud_provider_selector'
diff --git a/app/views/clusters/clusters/show.html.haml b/app/views/clusters/clusters/show.html.haml
index fb46b4e5064..58e0ef96333 100644
--- a/app/views/clusters/clusters/show.html.haml
+++ b/app/views/clusters/clusters/show.html.haml
@@ -28,14 +28,6 @@
 
   = render 'banner'
 
-  .gl-alert.gl-alert-warning{ role: 'alert' }
-    = sprite_icon('warning', css_class: "gl-alert-icon gl-alert-icon-no-title gl-icon")
-    %button.js-close.gl-alert-dismiss{ type: 'button', 'aria-label' => _('Dismiss'), data: { testid: 'dismiss-one-click-application-removal' } }
-      = sprite_icon('close', css_class: 'gl-icon')
-    .gl-alert-body
-      = s_('ClusterApplicationsRemoved|One-click application management was removed in GitLab 14.0. Your applications are still installed in your cluster, and integrations continue working.')
-      = link_to _('More information.'), help_page_path("user/clusters/applications"), target: '_blank', rel: 'noopener noreferrer'
-
   - if cluster_created?(@cluster)
     .js-toggle-container
       = gl_tabs_nav do
diff --git a/app/views/clusters/clusters/user/_form.html.haml b/app/views/clusters/clusters/user/_form.html.haml
index 2dd15ebd266..bf7b24181c1 100644
--- a/app/views/clusters/clusters/user/_form.html.haml
+++ b/app/views/clusters/clusters/user/_form.html.haml
@@ -1,7 +1,5 @@
-- more_info_link = link_to _('Learn more.'), help_page_path('user/project/clusters/add_remove_clusters.md',
-  anchor: 'add-existing-cluster'), target: '_blank', rel: 'noopener noreferrer'
-- rbac_help_link = link_to _('Learn more.'), help_page_path('user/project/clusters/add_remove_clusters.md',
-  anchor: 'access-controls'), target: '_blank', rel: 'noopener noreferrer'
+- more_info_link = link_to _('Learn more.'), help_page_path('user/project/clusters/add_existing_cluster'), target: '_blank', rel: 'noopener noreferrer'
+- rbac_help_link = link_to _('Learn more.'), help_page_path('user/project/clusters/cluster_access'), target: '_blank', rel: 'noopener noreferrer'
 
 - api_url_help_text = s_('ClusterIntegration|The URL used to access the Kubernetes API.')
 - ca_cert_help_text = s_('ClusterIntegration|The Kubernetes certificate used to authenticate to the cluster.')
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 1d711f366c4..4f6ddf10984 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -70,6 +70,8 @@
                   = sort_title_recently_created
                 = link_to todos_filter_path(sort: sort_value_oldest_created) do
                   = sort_title_oldest_created
+                = link_to todos_filter_path(sort: sort_value_recently_updated) do
+                  = sort_title_recently_updated
 
 .row.js-todos-all
   - if @allowed_todos.any?
diff --git a/app/views/devise/passwords/new.html.haml b/app/views/devise/passwords/new.html.haml
index d5372862128..c90a9e7c672 100644
--- a/app/views/devise/passwords/new.html.haml
+++ b/app/views/devise/passwords/new.html.haml
@@ -3,17 +3,17 @@
     = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: 'gl-show-field-errors' }) do |f|
       .devise-errors
         = render "devise/shared/error_messages", resource: resource
-      .form-group
+      .form-group.gl-px-5.gl-pt-5
         = f.label :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.')
 
-      %div
       - if recaptcha_enabled?
-        = recaptcha_tags nonce: content_security_policy_nonce
+        .gl-px-5
+          = recaptcha_tags nonce: content_security_policy_nonce
 
-      .gl-mt-5
+      .gl-p-5
         = f.submit _("Reset password"), class: "gl-button btn-confirm btn"
 
 .clearfix.prepend-top-20
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index 83e3fd85511..48b38861e6e 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -1,12 +1,12 @@
 = gitlab_ui_form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors js-sign-in-form', aria: { live: 'assertive' }, data: { testid: 'sign-in-form' }}) do |f|
-  .form-group
-    = f.label _('Username or email'), for: 'user_login', class: 'label-bold'
+  .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
+  .form-group.gl-px-5
     = f.label :password, class: 'label-bold'
     = f.password_field :password, class: 'form-control gl-form-input bottom', autocomplete: 'current-password', required: true, title: _('This field is required.'), data: { qa_selector: 'password_field' }
   - if devise_mapping.rememberable?
-    %div
+    .gl-px-5
       .gl-display-inline-block
         = f.gitlab_ui_checkbox_component :remember_me, _('Remember me')
       .gl-float-right
@@ -18,7 +18,8 @@
     - if Feature.enabled?(:arkose_labs_login_challenge)
       = render_if_exists 'devise/sessions/arkose_labs'
     - elsif captcha_enabled? || captcha_on_login_required?
-      = recaptcha_tags nonce: content_security_policy_nonce
+      .gl-px-5
+        = recaptcha_tags nonce: content_security_policy_nonce
 
-  .submit-container.move-submit-down
+  .submit-container.move-submit-down.gl-px-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' }
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
new file mode 100644
index 00000000000..2aa66684cad
--- /dev/null
+++ b/app/views/devise/sessions/_new_base_user_login_label.html.haml
@@ -0,0 +1 @@
+= local_assigns[:form].label _('Username or email'), for: 'user_login', class: 'label-bold'
diff --git a/app/views/devise/sessions/_new_crowd.html.haml b/app/views/devise/sessions/_new_crowd.html.haml
index fb4c011dd49..bdf357c5f74 100644
--- a/app/views/devise/sessions/_new_crowd.html.haml
+++ b/app/views/devise/sessions/_new_crowd.html.haml
@@ -1,13 +1,13 @@
 = form_tag(omniauth_authorize_path(:user, :crowd), id: 'new_crowd_user', class: 'gl-show-field-errors') do
-  .form-group
+  .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
+  .form-group.gl-px-5
     = label_tag :password
     = password_field_tag :password, nil, { autocomplete: 'current-password', class: "form-control bottom", title: _("This field is required."), required: true }
   - if devise_mapping.rememberable?
-    .remember-me
+    .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"
+  = submit_tag _("Sign in"), class: "gl-button btn-confirm btn gl-px-5"
diff --git a/app/views/devise/sessions/_new_ldap.html.haml b/app/views/devise/sessions/_new_ldap.html.haml
index fea58779c17..4cde24f4afa 100644
--- a/app/views/devise/sessions/_new_ldap.html.haml
+++ b/app/views/devise/sessions/_new_ldap.html.haml
@@ -3,17 +3,17 @@
 - 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
+  .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
+  .form-group.gl-px-5
     = label_tag :password
     = password_field_tag :password, nil, { autocomplete: 'current-password', class: "form-control gl-form-input bottom", title: _("This field is required."), data: { qa_selector: 'password_field' }, required: true }
   - if !hide_remember_me && devise_mapping.rememberable?
-    .remember-me
+    .remember-me.gl-px-5
       %label{ for: "remember_me" }
         = check_box_tag :remember_me, '1', false, id: 'remember_me'
         %span= _('Remember me')
 
-  .submit-container.move-submit-down
+  .submit-container.move-submit-down.gl-px-5
     = submit_tag submit_message, class: "gl-button btn btn-confirm", data: { qa_selector: 'sign_in_button' }
diff --git a/app/views/devise/sessions/two_factor.html.haml b/app/views/devise/sessions/two_factor.html.haml
index 29bcb3c158b..77a2fda021f 100644
--- a/app/views/devise/sessions/two_factor.html.haml
+++ b/app/views/devise/sessions/two_factor.html.haml
@@ -1,6 +1,6 @@
 %div
   = render 'devise/shared/tab_single', tab_title: _('Two-Factor Authentication')
-  .login-box
+  .login-box.gl-p-5
     .login-body
       - if @user.two_factor_otp_enabled?
         = 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_u2f_enabled?}" }) do |f|
diff --git a/app/views/devise/shared/_omniauth_box.html.haml b/app/views/devise/shared/_omniauth_box.html.haml
index bd7fe41ae8d..32b4a15517e 100644
--- a/app/views/devise/shared/_omniauth_box.html.haml
+++ b/app/views/devise/shared/_omniauth_box.html.haml
@@ -1,6 +1,6 @@
 - hide_remember_me = local_assigns.fetch(:hide_remember_me, false)
 
-.omniauth-container.gl-mt-5
+.omniauth-container.gl-mt-5.gl-p-5
   %label.gl-font-weight-bold
     = _('Sign in with')
   - providers = enabled_button_based_providers
diff --git a/app/views/devise/shared/_tab_single.html.haml b/app/views/devise/shared/_tab_single.html.haml
index 1b5a932a09a..336954d00b0 100644
--- a/app/views/devise/shared/_tab_single.html.haml
+++ b/app/views/devise/shared/_tab_single.html.haml
@@ -1,2 +1,2 @@
 = gl_tabs_nav({ class: 'new-session-tabs gl-border-0' }) do
-  = gl_tab_link_to tab_title, '#', { item_active: true, class: 'gl-cursor-default!', tab_class: 'gl-bg-transparent!', tabindex: '-1' }
+  = gl_tab_link_to tab_title, '#', { item_active: true, class: 'gl-cursor-default!', tab_class: 'gl-bg-transparent!', tabindex: '-1', data: { qa_selector: 'sign_in_tab' } }
diff --git a/app/views/devise/shared/_tabs_normal.html.haml b/app/views/devise/shared/_tabs_normal.html.haml
deleted file mode 100644
index 01dd3748887..00000000000
--- a/app/views/devise/shared/_tabs_normal.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-- tab_title = local_assigns.fetch(:tab_title, _('Sign in'))
-- render_signup_link = local_assigns.fetch(:render_signup_link, true)
-
-%ul.nav-links.new-session-tabs.nav-tabs.nav{ role: 'tablist' }
-  %li.nav-item{ role: 'presentation' }
-    %a.nav-link.active{ href: '#login-pane', data: { toggle: 'tab', qa_selector: 'sign_in_tab' }, role: 'tab' }= tab_title
-  - if render_signup_link && allow_signup?
-    %li.nav-item{ role: 'presentation' }
-      %a.nav-link{ href: '#register-pane', data: { track_label: 'sign_in_register', track_property: '', track_action: 'click_button', track_value: '', toggle: 'tab', qa_selector: 'register_tab' }, role: 'tab' } Register
diff --git a/app/views/doorkeeper/authorizations/redirect.html.haml b/app/views/doorkeeper/authorizations/redirect.html.haml
index 9580f33c88a..a9ac92fd087 100644
--- a/app/views/doorkeeper/authorizations/redirect.html.haml
+++ b/app/views/doorkeeper/authorizations/redirect.html.haml
@@ -5,4 +5,16 @@
 
 = javascript_tag do
   :plain
-    window.location= "#{redirect_uri}";
+    (function() {
+      // Only permit a basic set of characters in the fragment.
+      const allowedRegex = /^#[\w-]+$/g;
+
+      const hash = window.location.hash;
+      let redirectUri = "#{redirect_uri}";
+
+      if (window.location.hash && window.location.hash.search(allowedRegex) === 0 && redirectUri.indexOf('#') === -1) {
+        redirectUri = redirectUri + hash;
+      }
+
+      window.location = redirectUri;
+    })();
diff --git a/app/views/errors/request_conflict.html.haml b/app/views/errors/request_conflict.html.haml
new file mode 100644
index 00000000000..2f5abaca72f
--- /dev/null
+++ b/app/views/errors/request_conflict.html.haml
@@ -0,0 +1,18 @@
+- message = local_assigns.fetch(:message, nil)
+- content_for(:title, 'Request Conflict')
+
+%img{ :alt => "", :src => image_path('logo.svg') }
+%h1
+  409
+.container
+  %h2
+    = s_("409|There was a conflict with your request.")
+  - if message
+    %p
+      = message
+  %p
+    = s_('409|Please contact your GitLab administrator if you think this is a mistake.')
+  .action-container.js-go-back{ hidden: true }
+    %button{ type: 'button', class: 'gl-button btn btn-primary' }
+      = _('Go Back')
+= render "errors/footer"
diff --git a/app/views/events/event/_note.html.haml b/app/views/events/event/_note.html.haml
index d08c3d5ba41..53c59474d83 100644
--- a/app/views/events/event/_note.html.haml
+++ b/app/views/events/event/_note.html.haml
@@ -1,3 +1,5 @@
+- return if !event.personal_snippet_note? && event.has_no_project_and_group?
+
 = icon_for_profile_event(event)
 
 = event_user_info(event)
diff --git a/app/views/explore/projects/topic.html.haml b/app/views/explore/projects/topic.html.haml
index aeb040ea61f..76e59a49ed1 100644
--- a/app/views/explore/projects/topic.html.haml
+++ b/app/views/explore/projects/topic.html.haml
@@ -1,7 +1,7 @@
 - @hide_top_links = false
 - @no_container = true
-- page_title    @topic.name, _("Topics")
-- max_topic_name_length = 50
+- page_title @topic.title_or_name, _("Topics")
+- max_topic_title_length = 50
 
 = render_dashboard_ultimate_trial(current_user)
 
@@ -9,12 +9,12 @@
   .gl-pb-5.gl-align-items-center.gl-justify-content-center.gl-display-flex
     .avatar-container.rect-avatar.s60.gl-flex-shrink-0
       = topic_icon(@topic, alt: _('Topic avatar'), class: 'avatar topic-avatar s60')
-    - if @topic.name.length > max_topic_name_length
-      %h1.gl-mt-3.str-truncated.has-tooltip{ title: @topic.name }
-        = truncate(@topic.name, length: max_topic_name_length)
+    - if @topic.title_or_name.length > max_topic_title_length
+      %h1.gl-mt-3.gl-str-truncated.has-tooltip{ title: @topic.title_or_name }
+        = truncate(@topic.title_or_name, length: max_topic_title_length)
     - else
       %h1.gl-mt-3
-        = @topic.name
+        = @topic.title_or_name
   - if @topic.description.present?
     .topic-description.gl-ml-4.gl-mr-4
       = markdown(@topic.description)
diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
index 9b3a8c31d54..bd893ca3162 100644
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -17,8 +17,7 @@
           - if can?(current_user, :read_group, @group)
             %span.gl-display-inline-block.gl-vertical-align-middle
               = s_("GroupPage|Group ID: %{group_id}") % { group_id: @group.id }
-              - button_class = "btn gl-button btn-sm btn-tertiary btn-default-tertiary home-panel-metadata"
-              = clipboard_button(title: s_('GroupPage|Copy group ID'), text: @group.id, class: button_class)
+              = clipboard_button(title: s_('GroupPage|Copy group ID'), text: @group.id)
           - if current_user
             %span.gl-ml-3.gl-mb-3
               = render 'shared/members/access_request_links', source: @group
diff --git a/app/views/groups/_import_group_from_another_instance_panel.html.haml b/app/views/groups/_import_group_from_another_instance_panel.html.haml
index 95b3ad26e99..654ee70dbee 100644
--- a/app/views/groups/_import_group_from_another_instance_panel.html.haml
+++ b/app/views/groups/_import_group_from_another_instance_panel.html.haml
@@ -5,8 +5,8 @@
         = s_('GroupsNew|Import groups from another instance of GitLab')
       = link_to _('History'), history_import_bulk_imports_path, class: 'gl-link gl-ml-auto'
     = render Pajamas::AlertComponent.new(dismissible: false,
-      variant: :warning) do
-      .gl-alert-body
+      variant: :warning) do |c|
+      = c.body do
         - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
         - docs_link_end = '</a>'.html_safe
         = s_('GroupsNew|Not all related objects are migrated. %{docs_link_start}More info%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
diff --git a/app/views/groups/_import_group_from_file_panel.html.haml b/app/views/groups/_import_group_from_file_panel.html.haml
index ddd7481e0bd..04170c30a20 100644
--- a/app/views/groups/_import_group_from_file_panel.html.haml
+++ b/app/views/groups/_import_group_from_file_panel.html.haml
@@ -7,8 +7,8 @@
     %h4
       = _('Import group from file')
     = render Pajamas::AlertComponent.new(variant: :warning,
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
         - link_end = '</a>'.html_safe
         = s_('GroupsNew|This feature is deprecated and replaced by %{docs_link_start}group migration%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: link_end }
diff --git a/app/views/groups/_invite_groups_modal.html.haml b/app/views/groups/_invite_groups_modal.html.haml
index 22ef319348a..2e11f6cee4f 100644
--- a/app/views/groups/_invite_groups_modal.html.haml
+++ b/app/views/groups/_invite_groups_modal.html.haml
@@ -1,3 +1,3 @@
 - return unless can_admin_group_member?(group)
 
-.js-invite-groups-modal{ data: common_invite_group_modal_data(group, GroupMember, 'false').merge(group_select_data(group)) }
+.js-invite-groups-modal{ data: common_invite_group_modal_data(group, GroupMember, 'false') }
diff --git a/app/views/groups/dependency_proxies/show.html.haml b/app/views/groups/dependency_proxies/show.html.haml
index 940a504438d..082f637e854 100644
--- a/app/views/groups/dependency_proxies/show.html.haml
+++ b/app/views/groups/dependency_proxies/show.html.haml
@@ -1,7 +1,5 @@
 - page_title _("Dependency Proxy")
 - @content_class = "limit-container-width" unless fluid_layout
-- dependency_proxy_available = Feature.enabled?(:dependency_proxy_for_private_groups, default_enabled: true) || @group.public?
 
 #js-dependency-proxy{ data: { group_path: @group.full_path,
-  dependency_proxy_available: dependency_proxy_available.to_s,
   no_manifests_illustration: image_path('illustrations/docker-empty-state.svg'), group_id: @group.id } }
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index 8afa6316c56..209faa937dc 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -5,7 +5,7 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@group.name} issues")
 
-- if Feature.enabled?(:vue_issues_list, @group, default_enabled: :yaml)
+- if Feature.enabled?(:vue_issues_list, @group)
   .js-issues-list{ data: group_issues_list_data(@group, current_user) }
   - if @can_bulk_update
     = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :issues
diff --git a/app/views/groups/milestones/index.html.haml b/app/views/groups/milestones/index.html.haml
index 5c0487db0fc..50a1b474504 100644
--- a/app/views/groups/milestones/index.html.haml
+++ b/app/views/groups/milestones/index.html.haml
@@ -9,7 +9,7 @@
       = render 'shared/milestones/search_form'
       = render 'shared/milestones_sort_dropdown'
       - if can?(current_user, :admin_milestone, @group)
-        = link_to _('New milestone'), new_group_milestone_path(@group), class: "btn gl-button btn-confirm", data: { qa_selector: "new_group_milestone_link" }
+        = link_to _('New milestone'), new_group_milestone_path(@group), class: "btn gl-button btn-confirm gl-ml-3", data: { qa_selector: "new_group_milestone_link" }
 
   - if @milestones.blank?
     = render 'shared/empty_states/milestones_tab', learn_more_path: help_page_path('user/project/milestones/index') do
diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml
index 750030601b7..58a78a8adc1 100644
--- a/app/views/groups/new.html.haml
+++ b/app/views/groups/new.html.haml
@@ -15,7 +15,7 @@
 
     #import-group-pane.tab-pane
       - if import_sources_enabled?
-        - if Feature.enabled?(:bulk_import, default_enabled: :yaml)
+        - if Feature.enabled?(:bulk_import)
           = render 'import_group_from_another_instance_panel'
           .gl-mt-7.gl-border-b-solid.gl-border-gray-100.gl-border-1
         = render 'import_group_from_file_panel'
diff --git a/app/views/groups/runners/_group_runners.html.haml b/app/views/groups/runners/_group_runners.html.haml
deleted file mode 100644
index 876642474cd..00000000000
--- a/app/views/groups/runners/_group_runners.html.haml
+++ /dev/null
@@ -1,29 +0,0 @@
-- link = link_to _('Runner API'), help_page_path('api/runners.md')
-
-%h4
-  = _('Group runners')
-
--# Proper policies should be implemented per
--# https://gitlab.com/gitlab-org/gitlab-foss/issues/45894
-.bs-callout.help-callout
-  %p
-    = _('These runners are shared across projects in this group.')
-    = _('Group runners can be managed with the %{link}.').html_safe % { link: link }
-
-  - if can?(current_user, :register_group_runners, @group)
-    - if params[:ci_runner_templates]
-      %hr
-      = render partial: 'ci/runner/setup_runner_in_aws',
-               locals: { registration_token: @group.runners_token }
-    %hr
-    = render partial: 'ci/runner/how_to_setup_runner',
-             locals: { registration_token: @group.runners_token,
-                       type: 'group',
-                       reset_token_url: reset_registration_token_group_settings_ci_cd_path,
-                       project_path: '',
-                       group_path: @group.full_path }
-    %br
-  - else
-    = _('Please contact an admin to register runners.')
-    = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'prevent-users-from-registering-runners'), target: '_blank', rel: 'noopener noreferrer'
-
diff --git a/app/views/groups/runners/_runner.html.haml b/app/views/groups/runners/_runner.html.haml
deleted file mode 100644
index b2d8b9668e7..00000000000
--- a/app/views/groups/runners/_runner.html.haml
+++ /dev/null
@@ -1,80 +0,0 @@
-.gl-responsive-table-row{ id: dom_id(runner) }
-  .table-section.section-10.section-wrap
-    .table-mobile-header{ role: 'rowheader' }= _('Type')
-    .table-mobile-content
-      - if runner.group_type?
-        = gl_badge_tag s_('Runners|group'), variant: :success, size: :sm
-      - else
-        = gl_badge_tag s_('Runners|specific'), variant: :info, size: :sm
-      - if runner.locked?
-        = gl_badge_tag s_('Runners|locked'), variant: :warning, size: :sm
-      - unless runner.active?
-        = gl_badge_tag s_('Runners|paused'), { variant: :danger, size: :sm }, { title: s_('Runners|Not accepting jobs'), data: { toggle: 'tooltip', container: 'body' } }
-
-  .table-section.section-30
-    .table-mobile-header{ role: 'rowheader' }= s_('Runners|Runner')
-    .table-mobile-content
-      = link_to("##{runner.id} (#{runner.short_sha})", group_runner_path(@group, runner))
-      .gl-text-truncate
-        %span{ title: runner.description, data: { toggle: 'tooltip', container: 'body' } }
-          = runner.description
-
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Version')
-    .table-mobile-content.str-truncated.has-tooltip{ title: runner.version }
-      = runner.version
-
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('IP Address')
-    .table-mobile-content.str-truncated.has-tooltip{ title: runner.ip_address }
-      = runner.ip_address
-
-  .table-section.section-5
-    .table-mobile-header{ role: 'rowheader' }= _('Projects')
-    .table-mobile-content
-      - if runner.group_type?
-        \-
-      - else
-        = runner.runner_projects.count(:all)
-
-  .table-section.section-5
-    .table-mobile-header{ role: 'rowheader' }= _('Jobs')
-    .table-mobile-content
-      = limited_counter_with_delimiter(runner.builds)
-
-  .table-section.section-10.section-wrap
-    .table-mobile-header{ role: 'rowheader' }= _('Tags')
-    .table-mobile-content
-      - runner.tags.map(&:name).sort.each do |tag|
-        = gl_badge_tag tag, { variant: :info }, { class: 'str-truncated has-tooltip', title: tag }
-
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Last contact')
-    .table-mobile-content
-      - contacted_at = runner_contacted_at(runner)
-      - if contacted_at
-        = time_ago_with_tooltip contacted_at
-      - else
-        = _('Never')
-
-  .table-section.table-button-footer.section-10
-    .btn-group.table-action-buttons
-      .btn-group
-        = link_to edit_group_runner_path(@group, runner), class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
-          = sprite_icon('pencil', css_class: 'gl-icon')
-      .btn-group
-        - if runner.active?
-          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon', title: s_('Runners|Pause from accepting jobs'), ref: 'tooltip', aria: { label: _('Pause') }, data: { toggle: 'tooltip', container: 'body', confirm: _('Are you sure?') } do
-            = sprite_icon('pause', css_class: 'gl-icon')
-        - else
-          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon', title: s_('Runners|Resume accepting jobs'), ref: 'tooltip', aria: { label: _('Resume') }, data: { toggle: 'tooltip', container: 'body'} do
-            = sprite_icon('play', css_class: 'gl-icon')
-      - if runner.belongs_to_more_than_one_project?
-        - delete_runner_tooltip = _('Multi-project Runners cannot be removed')
-        .btn-group.has-tooltip{ data: { container: 'body', placement: 'top' }, title: delete_runner_tooltip }
-          .gl-button.btn.btn-danger.btn-icon{ 'aria-label' => delete_runner_tooltip, disabled: 'disabled' }
-            = sprite_icon('close', css_class: 'gl-icon')
-      - else
-        .btn-group
-          = link_to group_runner_path(@group, runner), method: :delete, class: 'gl-button btn btn-danger btn-icon has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?'), confirm_btn_variant: "danger" } do
-            = sprite_icon('close', css_class: 'gl-icon')
diff --git a/app/views/groups/runners/_settings.html.haml b/app/views/groups/runners/_settings.html.haml
index 087b06ee37d..7716a2f125f 100644
--- a/app/views/groups/runners/_settings.html.haml
+++ b/app/views/groups/runners/_settings.html.haml
@@ -1,119 +1,14 @@
-- if Feature.enabled?(:runner_list_group_view_vue_ui, @group, default_enabled: :yaml)
-  .gl-mb-6
-    #update-shared-runners-form{ data: group_shared_runners_settings_data(@group) }
-  .gl-card.gl-px-8.gl-py-6.gl-line-height-20
-    .gl-card-body.gl-display-flex{ :class => "gl-p-0!" }
-      .gl-banner-illustration
-        = image_tag('illustrations/rocket-launch-md.svg', alt: s_('Runners|Rocket launch illustration'))
-      .gl-banner-content
-        %h1.gl-banner-title
-          = s_('Runners|New group runners view')
-        %p
-          = s_('Runners|The new view gives you more space and better visibility into your fleet of runners.')
-        %a.btn.btn-confirm.btn-md.gl-button{ :href => group_runners_path(@group) }
-          %span.gl-button-text
-          = s_('Runners|Take me there!')
-- else
-  = render 'shared/runners/runner_description'
-
-  %hr
-
-  .row
-    .col-sm-6
-      = render 'groups/runners/group_runners'
-    .col-sm-6
-      = render 'groups/runners/shared_runners'
-
-  %h4.underlined-title
-    = _('Available runners: %{runners}').html_safe % { runners: limited_counter_with_delimiter(@all_group_runners) }
-
-  -# haml-lint:disable NoPlainNodes
-  .row
-    .col-sm-9
-      = form_tag group_settings_ci_cd_path, id: 'runners-search', method: :get, class: 'filter-form js-filter-form' do
-        .filtered-search-wrapper.d-flex
-          .filtered-search-box
-            = dropdown_tag(_('Recent searches'),
-              options: { wrapper_class: 'filtered-search-history-dropdown-wrapper',
-              toggle_class: 'gl-button btn btn-default filtered-search-history-dropdown-toggle-button',
-              dropdown_class: 'filtered-search-history-dropdown',
-              content_class: 'filtered-search-history-dropdown-content' }) do
-              .js-filtered-search-history-dropdown{ data: { full_path: group_settings_ci_cd_path } }
-            .filtered-search-box-input-container.droplab-dropdown
-              .scroll-container
-                %ul.tokens-container.list-unstyled
-                  %li.input-token
-                    %input.form-control.filtered-search{ search_filter_input_options('runners') }
-              #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
-                %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-                  %li.filter-dropdown-item{ data: {hint: "#{'{{hint}}'}", tag: "#{'{{tag}}'}", action: "#{'{{hint === \'search\' ? \'submit\' : \'\' }}'}" } }
-                    = button_tag class: 'gl-button btn btn-link' do
-                      -# Encapsulate static class name `{{icon}}` inside #{} to bypass
-                      -# haml lint's ClassAttributeWithStaticValue
-                      %svg
-                        %use{ 'xlink:href': "#{'{{icon}}'}" }
-                      %span.js-filter-hint
-                        {{formattedKey}}
-              #js-dropdown-operator.filtered-search-input-dropdown-menu.dropdown-menu
-                %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
-                  %li.filter-dropdown-item{ data: { value: "{{ title }}" } }
-                    = button_tag class: 'gl-button btn btn-link' do
-                      {{ title }}
-                      %span.btn-helptext
-                        {{ help }}
-              #js-dropdown-admin-runner-status.filtered-search-input-dropdown-menu.dropdown-menu
-                %ul{ data: { dropdown: true } }
-                  - Ci::Runner::AVAILABLE_STATUSES.each do |status|
-                    %li.filter-dropdown-item{ data: { value: status } }
-                      = button_tag class: 'gl-button btn btn-link' do
-                        = status.titleize
-
-              #js-dropdown-admin-runner-type.filtered-search-input-dropdown-menu.dropdown-menu
-                %ul{ data: { dropdown: true } }
-                  - Ci::Runner::AVAILABLE_TYPES.each do |runner_type|
-                    - next if runner_type == 'instance_type'
-                    %li.filter-dropdown-item{ data: { value: runner_type } }
-                      = button_tag class: 'gl-button btn btn-link' do
-                        = runner_type.titleize
-
-            #js-dropdown-runner-tag.filtered-search-input-dropdown-menu.dropdown-menu
-              %ul{ data: { dropdown: true } }
-                %li.filter-dropdown-item{ data: { value: 'none' } }
-                  = button_tag class: 'gl-button btn btn-link' do
-                    = _('No Tag')
-                %li.divider.droplab-item-ignore
-              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-                %li.filter-dropdown-item
-                  = button_tag class: 'gl-button btn btn-link js-data-value' do
-                    %span.dropdown-light-content
-                      {{name}}
-
-            = button_tag class: 'clear-search hidden' do
-              = sprite_icon('close', size: 16, css_class: 'clear-search-icon')
-          .filter-dropdown-container
-            = render 'groups/runners/sort_dropdown'
-
-    .col-sm-3.text-right-lg
-      = _('Runners currently online: %{active_runners_count}') % { active_runners_count: limited_counter_with_delimiter(@all_group_runners.online) }
-
-
-  - if @group_runners.any?
-    .content-list{ data: { testid: 'runners-table' } }
-      .table-holder
-        .gl-responsive-table-row.table-row-header{ role: 'row' }
-          .table-section.section-10{ role: 'rowheader' }= _('Type/State')
-          .table-section.section-30{ role: 'rowheader' }= s_('Runners|Runner')
-          .table-section.section-10{ role: 'rowheader' }= _('Version')
-          .table-section.section-10{ role: 'rowheader' }= _('IP Address')
-          .table-section.section-5{ role: 'rowheader' }= _('Projects')
-          .table-section.section-5{ role: 'rowheader' }= _('Jobs')
-          .table-section.section-10{ role: 'rowheader' }= _('Tags')
-          .table-section.section-10{ role: 'rowheader' }= _('Last contact')
-          .table-section.section-10{ role: 'rowheader' }
-
-        - @group_runners.each do |runner|
-          - runner = runner.present(current_user: current_user)
-          = render 'groups/runners/runner', runner: runner
-      = paginate @group_runners, theme: 'gitlab', :params => { :anchor => 'runners-settings' }
-  - else
-    .nothing-here-block= _('No runners found')
+.gl-mb-6
+  #update-shared-runners-form{ data: group_shared_runners_settings_data(@group) }
+.gl-card.gl-px-8.gl-py-6.gl-line-height-20
+  .gl-card-body.gl-display-flex{ :class => "gl-p-0!" }
+    .gl-banner-illustration
+      = image_tag('illustrations/rocket-launch-md.svg', alt: s_('Runners|Rocket launch illustration'))
+    .gl-banner-content
+      %h1.gl-banner-title
+        = s_('Runners|New group runners view')
+      %p
+        = s_('Runners|The new view gives you more space and better visibility into your fleet of runners.')
+      %a.btn.btn-confirm.btn-md.gl-button{ :href => group_runners_path(@group) }
+        %span.gl-button-text
+        = s_('Runners|Take me there!')
diff --git a/app/views/groups/runners/_shared_runners.html.haml b/app/views/groups/runners/_shared_runners.html.haml
deleted file mode 100644
index 15b1199b8c9..00000000000
--- a/app/views/groups/runners/_shared_runners.html.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-= render 'shared/runners/shared_runners_description'
-
-#update-shared-runners-form{ data: group_shared_runners_settings_data(@group) }
diff --git a/app/views/groups/runners/_sort_dropdown.html.haml b/app/views/groups/runners/_sort_dropdown.html.haml
deleted file mode 100644
index b7b10cecee8..00000000000
--- a/app/views/groups/runners/_sort_dropdown.html.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-- runners_sort_options = runners_sort_options_hash.map { |value, text| { value: value, text: text, href: page_filter_path(sort: value) } }
-
-= gl_redirect_listbox_tag runners_sort_options, @sort, class: 'gl-ml-3', data: { display: 'static' }
diff --git a/app/views/groups/runners/edit.html.haml b/app/views/groups/runners/edit.html.haml
index 4a5bab94246..04b9d88723f 100644
--- a/app/views/groups/runners/edit.html.haml
+++ b/app/views/groups/runners/edit.html.haml
@@ -1,11 +1,7 @@
 - breadcrumb_title _('Edit')
 - page_title _('Edit'), "##{@runner.id} (#{@runner.short_sha})"
 
-- if Feature.enabled?(:runner_list_group_view_vue_ui, @group, default_enabled: :yaml)
-  - add_to_breadcrumbs _('Runners'), group_runners_path(@group)
-- else
-  - add_to_breadcrumbs _('CI/CD Settings'), group_settings_ci_cd_path(@group)
-
+- add_to_breadcrumbs _('Runners'), group_runners_path(@group)
 - add_to_breadcrumbs "#{@runner.short_sha}", group_runner_path(@group, @runner)
 
 
diff --git a/app/views/groups/runners/show.html.haml b/app/views/groups/runners/show.html.haml
index 72701491c67..b6c0c8a707f 100644
--- a/app/views/groups/runners/show.html.haml
+++ b/app/views/groups/runners/show.html.haml
@@ -1,6 +1,3 @@
-- if Feature.enabled?(:runner_list_group_view_vue_ui, @group, default_enabled: :yaml)
-  - add_to_breadcrumbs _('Runners'), group_runners_path(@group)
-- else
-  - add_to_breadcrumbs _('CI/CD Settings'), group_settings_ci_cd_path(@group)
+- add_to_breadcrumbs _('Runners'), group_runners_path(@group)
 
 = render 'shared/runners/runner_details', runner: @runner
diff --git a/app/views/groups/settings/_export.html.haml b/app/views/groups/settings/_export.html.haml
index 62bc574231f..6cae416311e 100644
--- a/app/views/groups/settings/_export.html.haml
+++ b/app/views/groups/settings/_export.html.haml
@@ -3,8 +3,8 @@
 .sub-section
   %h4= s_('GroupSettings|Export group')
   %p= _('Export this group with all related data.')
-  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mb-4') do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mb-4') do |c|
+    = c.body do
       - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
       - docs_link_end = '</a>'.html_safe
       = s_('GroupsNew|This feature is deprecated and replaced by %{docs_link_start}group migration%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
@@ -12,8 +12,8 @@
     - export_information = _('After the export is complete, download the data file from a notification email or from this page. You can then import the data file from the %{strong_text_start}Create new group%{strong_text_end} page of another GitLab instance.') % { strong_text_start: '<strong>'.html_safe, strong_text_end: '</strong>'.html_safe}
     = export_information.html_safe
     = link_to _('Learn more.'), help_page_path('user/group/settings/import_export.md'), target: '_blank', rel: 'noopener noreferrer'
-  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do |c|
+    = c.body do
       %p.gl-mb-0
         %p= _('The following items will be exported:')
         %ul
diff --git a/app/views/groups/settings/_permissions.html.haml b/app/views/groups/settings/_permissions.html.haml
index 1a2f770cd59..ecb31b37fd3 100644
--- a/app/views/groups/settings/_permissions.html.haml
+++ b/app/views/groups/settings/_permissions.html.haml
@@ -34,7 +34,7 @@
     = 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
-    - if Feature.enabled?(:group_wiki_settings_toggle, @group, default_enabled: :yaml)
+    - if @group.licensed_feature_available?(:group_wikis)
       = render_if_exists 'groups/settings/wiki', f: f, group: @group
     = render 'groups/settings/lfs', f: f
     = render 'groups/settings/project_creation_level', f: f, group: @group
diff --git a/app/views/groups/settings/_remove_button.html.haml b/app/views/groups/settings/_remove_button.html.haml
index 66d6b516a86..e765638953a 100644
--- a/app/views/groups/settings/_remove_button.html.haml
+++ b/app/views/groups/settings/_remove_button.html.haml
@@ -1,8 +1,8 @@
 - remove_form_id = local_assigns.fetch(:remove_form_id, nil)
 
 - if group.paid?
-  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5', alert_data: { testid: 'group-has-linked-subscription-alert' }) do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5', alert_data: { testid: 'group-has-linked-subscription-alert' }) do |c|
+    = c.body do
       = html_escape(_("This group can't be removed because it is linked to a subscription. To remove this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
 
 .js-confirm-danger{ data: group_settings_confirm_modal_data(group, remove_form_id) }
diff --git a/app/views/groups/settings/_transfer.html.haml b/app/views/groups/settings/_transfer.html.haml
index f5d9d0e2587..e65c3cd13f6 100644
--- a/app/views/groups/settings/_transfer.html.haml
+++ b/app/views/groups/settings/_transfer.html.haml
@@ -13,7 +13,7 @@
       %li= s_('GroupSettings|You will need to update your local repositories to point to the new location.')
       %li= s_("GroupSettings|If the parent group's visibility is lower than the group's current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.")
     - if group.paid?
-      = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do
-        .gl-alert-body
+      = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do |c|
+        = c.body do
           = html_escape(_("This group can't be transferred because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
     .js-transfer-group-form{ data: initial_data }
diff --git a/app/views/groups/settings/packages_and_registries/show.html.haml b/app/views/groups/settings/packages_and_registries/show.html.haml
index 78ce981eb07..c4ce76c43ec 100644
--- a/app/views/groups/settings/packages_and_registries/show.html.haml
+++ b/app/views/groups/settings/packages_and_registries/show.html.haml
@@ -1,9 +1,7 @@
 - breadcrumb_title _('Packages & Registries')
 - page_title _('Packages & Registries')
 - @content_class = 'limit-container-width' unless fluid_layout
-- dependency_proxy_available = Feature.enabled?(:dependency_proxy_for_private_groups, default_enabled: true) || @group.public?
 
 %section#js-packages-and-registries-settings{ data: { default_expanded: expanded_by_default?.to_s,
   group_path: @group.full_path,
-  dependency_proxy_available: dependency_proxy_available.to_s,
   group_dependency_proxy_path: group_dependency_proxy_path(@group) } }
diff --git a/app/views/help/instance_configuration.html.haml b/app/views/help/instance_configuration.html.haml
index 411a81cb976..b6d27123be4 100644
--- a/app/views/help/instance_configuration.html.haml
+++ b/app/views/help/instance_configuration.html.haml
@@ -10,6 +10,7 @@
   = render 'help/instance_configuration/size_limits'
   = render 'help/instance_configuration/package_registry'
   = render 'help/instance_configuration/rate_limits'
+  = render 'help/instance_configuration/ci_cd_limits'
   %p
     %strong= _("Table of contents")
 
diff --git a/app/views/help/instance_configuration/_ci_cd_limits.html.haml b/app/views/help/instance_configuration/_ci_cd_limits.html.haml
new file mode 100644
index 00000000000..bd5b8a6f10d
--- /dev/null
+++ b/app/views/help/instance_configuration/_ci_cd_limits.html.haml
@@ -0,0 +1,52 @@
+- ci_cd_limits = @instance_configuration.settings[:ci_cd_limits]
+- return unless ci_cd_limits.present?
+
+- content_for :table_content do
+  %li= link_to _('CI/CD limits'), '#ci-cd-limits'
+
+- content_for :settings_content do
+  %h2#ci-cd-limits
+    = _('CI/CD limits')
+
+  %p
+    = s_('CICD|There are several CI/CD limits in place.')
+  .table-responsive
+    %table
+      %thead
+        %tr
+          %th= s_('CICD|Limit')
+          - ci_cd_limits.each_key do |title|
+            %th= title.to_s.humanize
+      %tbody
+        %tr
+          %td= s_('AdminSettings|Maximum number of jobs in a single pipeline')
+          - ci_cd_limits.each_value do |limits|
+            %td= instance_configuration_disabled_cell_html(limits[:ci_pipeline_size])
+        %tr
+          %td= s_('AdminSettings|Total number of jobs in currently active pipelines')
+          - ci_cd_limits.each_value do |limits|
+            %td= instance_configuration_disabled_cell_html(limits[:ci_active_jobs])
+        %tr
+          %td= s_('AdminSettings|Maximum number of active pipelines per project')
+          - ci_cd_limits.each_value do |limits|
+            %td= instance_configuration_disabled_cell_html(limits[:ci_active_pipelines])
+        %tr
+          %td= s_('AdminSettings|Maximum number of pipeline subscriptions to and from a project')
+          - ci_cd_limits.each_value do |limits|
+            %td= instance_configuration_disabled_cell_html(limits[:ci_project_subscriptions])
+        %tr
+          %td= s_('AdminSettings|Maximum number of pipeline schedules')
+          - ci_cd_limits.each_value do |limits|
+            %td= instance_configuration_disabled_cell_html(limits[:ci_pipeline_schedules])
+        %tr
+          %td= s_('AdminSettings|Maximum number of DAG dependencies that a job can have')
+          - ci_cd_limits.each_value do |limits|
+            %td= instance_configuration_disabled_cell_html(limits[:ci_needs_size_limit])
+        %tr
+          %td= s_('AdminSettings|Maximum number of runners registered per group')
+          - ci_cd_limits.each_value do |limits|
+            %td= instance_configuration_disabled_cell_html(limits[:ci_registered_group_runners])
+        %tr
+          %td= s_('AdminSettings|Maximum number of runners registered per project')
+          - ci_cd_limits.each_value do |limits|
+            %td= instance_configuration_disabled_cell_html(limits[:ci_registered_project_runners])
diff --git a/app/views/help/instance_configuration/_size_limits.html.haml b/app/views/help/instance_configuration/_size_limits.html.haml
index b592eeed020..90501450385 100644
--- a/app/views/help/instance_configuration/_size_limits.html.haml
+++ b/app/views/help/instance_configuration/_size_limits.html.haml
@@ -24,6 +24,9 @@
           %td= _('Maximum push size')
           %td= instance_configuration_human_size_cell(size_limits[:receive_max_input_size])
         %tr
+          %td= _('Maximum export size')
+          %td= instance_configuration_human_size_cell(size_limits[:max_export_size])
+        %tr
           %td= _('Maximum import size')
           %td= instance_configuration_human_size_cell(size_limits[:max_import_size])
         %tr
diff --git a/app/views/import/bulk_imports/status.html.haml b/app/views/import/bulk_imports/status.html.haml
index 2aae8811678..71866bab30b 100644
--- a/app/views/import/bulk_imports/status.html.haml
+++ b/app/views/import/bulk_imports/status.html.haml
@@ -8,4 +8,5 @@
   jobs_path: realtime_changes_import_bulk_imports_path(format: :json),
   source_url: @source_url,
   group_path_regex: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
+  history_path: history_import_bulk_imports_path,
   group_url_error_message: group_url_error_message } }
diff --git a/app/views/import/shared/_errors.html.haml b/app/views/import/shared/_errors.html.haml
index aa6fcc445fd..ae54d0544f3 100644
--- a/app/views/import/shared/_errors.html.haml
+++ b/app/views/import/shared/_errors.html.haml
@@ -1,7 +1,7 @@
 - if @errors.present?
   = render Pajamas::AlertComponent.new(variant: :danger,
     dismissible: false,
-    alert_class: 'gl-mb-5') do
-    .gl-alert-body
+    alert_class: 'gl-mb-5') do |c|
+    = c.body do
       - @errors.each do |error|
         = error
diff --git a/app/views/jira_connect/users/show.html.haml b/app/views/jira_connect/users/show.html.haml
index 29805a2c42d..569c4587f14 100644
--- a/app/views/jira_connect/users/show.html.haml
+++ b/app/views/jira_connect/users/show.html.haml
@@ -11,7 +11,7 @@
     = s_('JiraService|You can now close this window and%{br}return to the GitLab for Jira application.').html_safe % { br: '<br>'.html_safe }
 
   - if @jira_app_link
-    %p= external_link s_('Integrations|Return to GitLab for Jira'), @jira_app_link, class: 'gl-button btn btn-confirm'
+    %p= link_to s_('Integrations|Return to GitLab for Jira'), @jira_app_link, class: 'gl-button btn btn-confirm'
 
   %p= link_to _('Sign out'), destroy_user_session_path, method: :post
 
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 15cd9bece71..55c66454d0b 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -3,32 +3,14 @@
 %head{ prefix: "og: http://ogp.me/ns#" }
   %meta{ charset: "utf-8" }
 
+  %title= page_title(site_name)
+
   = render 'layouts/loading_hints'
 
   %meta{ 'http-equiv' => 'X-UA-Compatible', content: 'IE=edge' }
 
   = render 'layouts/startup_js'
 
-  -# Open Graph - http://ogp.me/
-  %meta{ property: 'og:type', content: "object" }
-  %meta{ property: 'og:site_name', content: site_name }
-  %meta{ property: 'og:title', content: page_title }
-  %meta{ property: 'og:description', content: page_description }
-  %meta{ property: 'og:image', content: page_image }
-  %meta{ property: 'og:image:width', content: '64' }
-  %meta{ property: 'og:image:height', content: '64' }
-  %meta{ property: 'og:url', content: request.base_url + request.fullpath }
-
-  -# Twitter Card - https://dev.twitter.com/cards/types/summary
-  %meta{ property: 'twitter:card', content: "summary" }
-  %meta{ property: 'twitter:title', content: page_title }
-  %meta{ property: 'twitter:description', content: page_description }
-  %meta{ property: 'twitter:image', content: page_image }
-  = page_card_meta_tags
-
-  %title= page_title(site_name)
-  %meta{ name: "description", content: page_description }
-
   - if page_canonical_link
     %link{ rel: 'canonical', href: page_canonical_link }
 
@@ -67,27 +49,38 @@
 
   = yield :project_javascripts
 
-  = csrf_meta_tags
-  = csp_meta_tag
-  = action_cable_meta_tag
+  -# Open Graph - http://ogp.me/
+  %meta{ property: 'og:type', content: "object" }
+  %meta{ property: 'og:site_name', content: site_name }
+  %meta{ property: 'og:title', content: page_title }
+  %meta{ property: 'og:description', content: page_description }
+  %meta{ property: 'og:image', content: page_image }
+  %meta{ property: 'og:image:width', content: '64' }
+  %meta{ property: 'og:image:height', content: '64' }
+  %meta{ property: 'og:url', content: request.base_url + request.fullpath }
+
+  -# Twitter Card - https://dev.twitter.com/cards/types/summary
+  %meta{ property: 'twitter:card', content: "summary" }
+  %meta{ property: 'twitter:title', content: page_title }
+  %meta{ property: 'twitter:description', content: page_description }
+  %meta{ property: 'twitter:image', content: page_image }
+  = page_card_meta_tags
+
+  %meta{ name: "description", content: page_description }
 
   %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
   %meta{ name: 'theme-color', content: user_theme_primary_color }
 
+  = csrf_meta_tags
+  = csp_meta_tag
+  = action_cable_meta_tag
+
   -# Apple Safari/iOS home screen icons
-  = favicon_link_tag 'touch-icon-iphone.png', rel: 'apple-touch-icon'
-  = favicon_link_tag 'touch-icon-ipad.png', rel: 'apple-touch-icon', sizes: '76x76'
-  = favicon_link_tag 'touch-icon-iphone-retina.png', rel: 'apple-touch-icon', sizes: '120x120'
-  = favicon_link_tag 'touch-icon-ipad-retina.png', rel: 'apple-touch-icon', sizes: '152x152'
-  %link{ rel: 'mask-icon', href: image_path('logo.svg'), color: 'rgb(226, 67, 41)' }
+  = favicon_link_tag 'apple-touch-icon.png', rel: 'apple-touch-icon'
 
   -# OpenSearch
   %link{ href: search_opensearch_path(format: :xml), rel: 'search', title: 'Search GitLab', type: 'application/opensearchdescription+xml' }
 
-  -# Windows 8 pinned site tile
-  %meta{ name: 'msapplication-TileImage', content: image_path('msapplication-tile.png') }
-  %meta{ name: 'msapplication-TileColor', content: '#30353E' }
-
   = yield :meta_tags
 
   = render 'layouts/google_analytics' if extra_config.has_key?('google_analytics_id')
diff --git a/app/views/layouts/_header_search.html.haml b/app/views/layouts/_header_search.html.haml
index f7b7aac6de4..3c62180214b 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{ data: { 'search-context' => header_search_context.to_json,
+#js-header-search.header-search.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 9b2815ea9bc..b3bb474ea43 100644
--- a/app/views/layouts/_loading_hints.html.haml
+++ b/app/views/layouts/_loading_hints.html.haml
@@ -12,4 +12,4 @@
     = preload_link_tag(path_to_stylesheet('application'), crossorigin: css_crossorigin)
   = preload_link_tag(path_to_stylesheet("highlight/themes/#{user_color_scheme}"), crossorigin: css_crossorigin)
   - if Gitlab::Tracking.enabled? && Gitlab::Tracking.collector_hostname
-    %link{ rel: 'preconnect', href: Gitlab::Tracking.collector_hostname, crossorigin: '' }
+    %link{ rel: 'preconnect', href: "https://#{Gitlab::Tracking.collector_hostname}", crossorigin: '' }
diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml
index 5c9c6a06ac1..cee5c1b6b69 100644
--- a/app/views/layouts/devise.html.haml
+++ b/app/views/layouts/devise.html.haml
@@ -16,7 +16,7 @@
               %h1.mb-3.font-weight-normal
                 = current_appearance&.title.presence || _('GitLab')
           .row.mb-3
-            .col-sm-7.order-12.order-sm-1.brand-holder
+            .col-md-6.order-12.order-sm-1.brand-holder
               - unless recently_confirmed_com?
                 = brand_image
                 - if current_appearance&.description?
@@ -36,7 +36,7 @@
 
               = render_if_exists 'layouts/devise_help_text'
 
-            .col-sm-5.order-1.new-session-forms-container{ class: recently_confirmed_com? ? 'order-sm-first' : 'order-sm-12' }
+            .col-md-6.order-1.new-session-forms-container{ class: recently_confirmed_com? ? 'order-sm-first' : 'order-sm-12' }
               = yield
 
       = render 'devise/shared/footer', footer_message: footer_message
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index c15a5e54a42..3cae8186750 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -4,16 +4,15 @@
 %header.navbar.navbar-gitlab.navbar-expand-sm.js-navbar{ data: { qa_selector: 'navbar' } }
   %a.gl-sr-only.gl-accessibility{ href: "#content-body" } Skip to content
   .container-fluid
-    .header-content
-      .title-container.hide-when-top-nav-responsive-open
+    .header-content.js-header-content
+      .title-container.hide-when-top-nav-responsive-open.gl-transition-medium.gl-display-flex.gl-align-items-stretch.gl-pt-0
         %h1.title
           %span.gl-sr-only GitLab
           = link_to root_path, title: _('Dashboard'), id: 'logo', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation') do
-            = brand_header_logo
-            - logo_text = brand_header_logo_type
-            - if logo_text.present?
-              %span.logo-text.d-none.d-lg-block.gl-ml-3
-                = logo_text
+            %span{ :class => "gl-display-none gl-lg-display-flex" }
+              = brand_header_logo({add_gitlab_white_text: true})
+            %span{ :class => "gl-lg-display-none! gl-display-flex" }
+              = brand_header_logo
           - if Gitlab.com_and_canary?
             = link_to Gitlab::Saas.canary_toggle_com_url, class: 'canary-badge bg-transparent', data: { qa_selector: 'canary_badge_link' }, target: :_blank, rel: 'noopener noreferrer' do
               = gl_badge_tag({ variant: :success, size: :sm }) do
@@ -32,15 +31,15 @@
               .gl-display-none.gl-sm-display-block
                 = render "layouts/nav/top_nav"
 
-      .navbar-collapse.collapse
-        %ul.nav.navbar-nav
+      .navbar-collapse.gl-transition-medium.collapse
+        %ul.nav.navbar-nav.gl-w-full
           - if current_user
-            = render 'layouts/header/new_dropdown', class: 'gl-display-none gl-sm-display-block'
+            = render 'layouts/header/new_dropdown', class: 'gl-display-none gl-sm-display-block gl-white-space-nowrap gl-text-right'
           - if top_nav_show_search
             - search_menu_item = top_nav_search_menu_item_attrs
-            %li.nav-item.header-search-new.d-none.d-lg-block.m-auto
+            %li.nav-item.header-search-new.gl-display-none.gl-lg-display-block.m-auto.gl-w-full
               - unless current_controller?(:search)
-                - if Feature.enabled?(:new_header_search, default_enabled: :yaml)
+                - if Feature.enabled?(:new_header_search)
                   = render 'layouts/header_search'
                 - else
                   = render 'layouts/search'
@@ -61,7 +60,7 @@
                   = number_with_delimiter(issues_count)
           - if header_link?(:merge_requests)
             = nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter dropdown" }) do
-              - top_level_link = Feature.enabled?(:mr_attention_requests, default_enabled: :yaml) ? attention_requested_mrs_dashboard_path : assigned_mrs_dashboard_path
+              - top_level_link = current_user.mr_attention_requests_enabled? ? attention_requested_mrs_dashboard_path : assigned_mrs_dashboard_path
               = link_to top_level_link, class: 'dashboard-shortcuts-merge_requests', title: _('Merge requests'), aria: { label: _('Merge requests') },
                 data: { qa_selector: 'merge_requests_shortcut_button',
                 toggle: "dropdown",
@@ -78,7 +77,7 @@
                 %ul
                   %li.dropdown-header
                     = _('Merge requests')
-                  - if Feature.enabled?(:mr_attention_requests, default_enabled: :yaml)
+                  - if current_user.mr_attention_requests_enabled?
                     %li#js-need-attention-nav
                       #js-need-attention-nav-onboarding
                       = link_to attention_requested_mrs_dashboard_path, class: 'gl-display-flex! gl-align-items-center js-prefetch-document' do
@@ -87,12 +86,18 @@
                     %li.divider
                   %li
                     = link_to assigned_mrs_dashboard_path, class: 'gl-display-flex! gl-align-items-center js-prefetch-document' do
-                      = _('Assigned to you')
+                      - if current_user.mr_attention_requests_enabled?
+                        = _('Assignee')
+                      - else
+                        = _('Assigned to you')
                       = gl_badge_tag({ variant: :neutral, size: :sm }, { class: "js-assigned-mr-count gl-ml-auto" }) do
                         = user_merge_requests_counts[:assigned]
                   %li
                     = link_to reviewer_mrs_dashboard_path, class: 'gl-display-flex! gl-align-items-center js-prefetch-document' do
-                      = _('Review requests for you')
+                      - if current_user.mr_attention_requests_enabled?
+                        = _('Reviewer')
+                      - else
+                        = _('Review requests for you')
                       = gl_badge_tag({ variant: :neutral, size: :sm }, { class: "js-reviewer-mr-count gl-ml-auto" }) do
                         = user_merge_requests_counts[:review_requested]
           - if header_link?(:todos)
diff --git a/app/views/layouts/header/_logo_with_title.html.haml b/app/views/layouts/header/_logo_with_title.html.haml
index 0b9d4e2eea4..66614bdb21e 100644
--- a/app/views/layouts/header/_logo_with_title.html.haml
+++ b/app/views/layouts/header/_logo_with_title.html.haml
@@ -1,4 +1,5 @@
 %header.navbar.fixed-top.navbar-gitlab.justify-content-center
-  = render partial: 'shared/logo', formats: :svg
-  %span.logo-text.d-none.d-lg-block.gl-ml-3.pt-1
-    = render partial: 'shared/logo_type', formats: :svg
+  .gl-display-none.gl-lg-display-block
+    = render partial: 'shared/logo_with_white_text', formats: :svg
+  .gl-lg-display-none
+    = render partial: 'shared/logo', formats: :svg
diff --git a/app/views/layouts/header/_new_dropdown.html.haml b/app/views/layouts/header/_new_dropdown.html.haml
index a0b271fdafa..e5b03acbe3b 100644
--- a/app/views/layouts/header/_new_dropdown.html.haml
+++ b/app/views/layouts/header/_new_dropdown.html.haml
@@ -6,8 +6,8 @@
 
 - return if menu_sections.empty?
 
-%li.header-new.dropdown{ class: top_class, data: { track_label: "new_dropdown", track_action: "click_dropdown" } }
-  = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip", id: "js-onboarding-new-project-link", title: title, ref: 'tooltip', aria: { label: title }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body', display: 'static', qa_selector: 'new_menu_toggle' } do
+%li.header-new.gl-flex-grow-1.gl-flex-shrink-1.dropdown{ class: top_class, data: { track_label: "new_dropdown", track_action: "click_dropdown" } }
+  = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip gl-display-inline-block!", id: "js-onboarding-new-project-link", title: title, ref: 'tooltip', aria: { label: title }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body', display: 'static', qa_selector: 'new_menu_toggle' } do
     = sprite_icon('plus-square')
     = sprite_icon('chevron-down', css_class: 'caret-down')
   .dropdown-menu.dropdown-menu-right.dropdown-extended-height
diff --git a/app/views/layouts/header/_registration_enabled_callout.html.haml b/app/views/layouts/header/_registration_enabled_callout.html.haml
index affee15c4d0..03e961bda8f 100644
--- a/app/views/layouts/header/_registration_enabled_callout.html.haml
+++ b/app/views/layouts/header/_registration_enabled_callout.html.haml
@@ -5,10 +5,10 @@
   alert_class: 'js-registration-enabled-callout',
   alert_data: { feature_id: Users::CalloutsHelper::REGISTRATION_ENABLED_CALLOUT,
                 dismiss_endpoint: callouts_path },
-  close_button_data: { testid: 'close-registration-enabled-callout' }) do
-  .gl-alert-body
+  close_button_data: { testid: 'close-registration-enabled-callout' }) do |c|
+  = c.body do
     = _('Only allow anyone to register for accounts on GitLab instances that you intend to be used by anyone. Allowing anyone to register makes GitLab instances more vulnerable.')
-  .gl-alert-actions
+  = c.actions do
     = link_to general_admin_application_settings_path(anchor: 'js-signup-settings'), class: 'btn gl-alert-action btn-confirm btn-md gl-button' do
       %span.gl-button-text
         = _('Turn off')
diff --git a/app/views/layouts/header/_storage_enforcement_banner.html.haml b/app/views/layouts/header/_storage_enforcement_banner.html.haml
index 92c02d6ecfd..6613130fdf3 100644
--- a/app/views/layouts/header/_storage_enforcement_banner.html.haml
+++ b/app/views/layouts/header/_storage_enforcement_banner.html.haml
@@ -8,7 +8,7 @@
   alert_data: { feature_id: banner_info[:callouts_feature_name],
                 dismiss_endpoint: banner_info[:callouts_path],
                 group_id: namespace.id,
-                defer_links: "true" }) do
-  .gl-alert-body
+                defer_links: "true" }) do |c|
+  = c.body do
     = banner_info[:text]
     = banner_info[:learn_more_link]
diff --git a/app/views/layouts/in_product_marketing_mailer.html.haml b/app/views/layouts/in_product_marketing_mailer.html.haml
index 679a2d4b8b3..65c68c95d9a 100644
--- a/app/views/layouts/in_product_marketing_mailer.html.haml
+++ b/app/views/layouts/in_product_marketing_mailer.html.haml
@@ -170,7 +170,7 @@
                   %table{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "100%" }
                     %tr
                       %td{ align: "left", style: "padding: 0 20px;" }
-                        = about_link('mailers/in_product_marketing/gitlab-logo-gray-rgb.png', 200)
+                        = about_link('mailers/gitlab_logo_black_text.png', 200)
                     %tr
                       %td{ "aria-hidden" => "true", height: "30", style: "font-size: 0; line-height: 0;" }
 
diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml
index c2eb6b68024..580b8e67a3c 100644
--- a/app/views/layouts/mailer.html.haml
+++ b/app/views/layouts/mailer.html.haml
@@ -1,7 +1,7 @@
 = content_for :footer do
   %tr.footer
     %td
-      %img.footer-logo{ alt: "GitLab", src: image_url('mailers/gitlab_footer_logo.gif') }
+      %img.footer-logo{ alt: "GitLab", src: image_url('mailers/gitlab_logo_black_text.png') }
       %div
         - manage_notifications_link = link_to(_("Manage all notifications"), profile_notifications_url, class: 'mng-notif-link')
         - help_link = link_to(_("Help"), help_url, class: 'help-link')
diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml
index 3c52c430868..fde4e74fb7a 100644
--- a/app/views/layouts/nav/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/_breadcrumbs.html.haml
@@ -18,9 +18,8 @@
             = breadcrumb_list_item link_to(extra[:text], extra[:link])
         = render "layouts/nav/breadcrumbs/collapsed_inline_list", location: :after
         - unless @skip_current_level_breadcrumb
-          %li
-            %h2.breadcrumbs-sub-title{ data: { qa_selector: 'breadcrumb_sub_title_content' } }
-              = link_to @breadcrumb_title, breadcrumb_title_link
+          %li{ data: { testid: 'breadcrumb-current-link', qa_selector: 'breadcrumb_current_link' } }
+            = link_to @breadcrumb_title, breadcrumb_title_link
     -# haml-lint:disable InlineJavaScript
     %script{ type: 'application/ld+json' }
       :plain
diff --git a/app/views/layouts/nav/sidebar/_admin.html.haml b/app/views/layouts/nav/sidebar/_admin.html.haml
index 94c708783e4..02565a8f573 100644
--- a/app/views/layouts/nav/sidebar/_admin.html.haml
+++ b/app/views/layouts/nav/sidebar/_admin.html.haml
@@ -103,10 +103,6 @@
             = link_to admin_health_check_path, title: _('Health Check') do
               %span
                 = _('Health Check')
-          = nav_link(controller: :requests_profiles) do
-            = link_to admin_requests_profiles_path, title: _('Requests Profiles') do
-              %span
-                = _('Requests Profiles')
           - if Gitlab::CurrentSettings.current_application_settings.grafana_enabled?
             = nav_link do
               = link_to Gitlab::CurrentSettings.current_application_settings.grafana_url, target: '_blank', title: _('Metrics Dashboard'), rel: 'noopener noreferrer' do
diff --git a/app/views/layouts/terms.html.haml b/app/views/layouts/terms.html.haml
index caa46b7bc56..91301e1e226 100644
--- a/app/views/layouts/terms.html.haml
+++ b/app/views/layouts/terms.html.haml
@@ -1,10 +1,11 @@
 !!! 5
 - add_page_specific_style 'page_bundles/terms'
 - @hide_breadcrumbs = true
+- body_classes = [user_application_theme]
 %html{ lang: I18n.locale, class: page_class }
   = render "layouts/head"
 
-  %body{ data: { page: body_data_page } }
+  %body{ class: body_classes, data: { page: body_data_page } }
     .layout-page.terms{ class: page_class }
       .content-wrapper.gl-pb-5
         .mobile-overlay
@@ -17,11 +18,7 @@
           .content{ id: "content-body" }
             .gl-card
               .gl-card-header
-                = brand_header_logo
-                - logo_text = brand_header_logo_type
-                - if logo_text.present?
-                  %span.logo-text.gl-ml-3
-                    = logo_text
+                = brand_header_logo({add_gitlab_black_text: true})
               - if header_link?(:user_dropdown)
                 .navbar-collapse
                   %ul.nav.navbar-nav
diff --git a/app/views/layouts/unknown_user_mailer.html.haml b/app/views/layouts/unknown_user_mailer.html.haml
index 2eb7b400604..7f0d1dc01dd 100644
--- a/app/views/layouts/unknown_user_mailer.html.haml
+++ b/app/views/layouts/unknown_user_mailer.html.haml
@@ -1,7 +1,7 @@
 = content_for :footer do
   %tr.footer
     %td.gitlab-info
-      %img.footer-logo{ alt: "GitLab", src: image_url('mailers/gitlab_footer_logo.gif') }
+      %img.footer-logo{ alt: "GitLab", src: image_url('mailers/gitlab_logo_black_text.png') }
       %p.gitlab-info-text
         = html_escape(_("GitLab is a complete DevOps platform, delivered as a single application, fundamentally changing the way%{br_tag}Development, Security, and Ops teams collaborate")) % { br_tag: '<br/>'.html_safe }
 
diff --git a/app/views/notify/approved_merge_request_email.html.haml b/app/views/notify/approved_merge_request_email.html.haml
new file mode 100644
index 00000000000..4393186a8ad
--- /dev/null
+++ b/app/views/notify/approved_merge_request_email.html.haml
@@ -0,0 +1,157 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+%html{ lang: "en" }
+  %head
+    %meta{ content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type" }/
+    %meta{ content: "width=device-width, initial-scale=1", name: "viewport" }/
+    %meta{ content: "IE=edge", "http-equiv" => "X-UA-Compatible" }/
+    %title= message.subject
+    :css
+      /* CLIENT-SPECIFIC STYLES */
+      body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+      table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+      img { -ms-interpolation-mode: bicubic; }
+
+      /* iOS BLUE LINKS */
+      a[x-apple-data-detectors] {
+          color: inherit !important;
+          text-decoration: none !important;
+          font-size: inherit !important;
+          font-family: inherit !important;
+          font-weight: inherit !important;
+          line-height: inherit !important;
+      }
+
+      /* ANDROID MARGIN HACK */
+      body { margin:0 !important; }
+      div[style*="margin: 16px 0"] { margin:0 !important; }
+
+      @media only screen and (max-width: 639px) {
+          body, #body {
+              min-width: 320px !important;
+          }
+          table.wrapper {
+              width: 100% !important;
+              min-width: 320px !important;
+          }
+          table.wrapper > tbody > tr > td {
+              border-left: 0 !important;
+              border-right: 0 !important;
+              border-radius: 0 !important;
+              padding-left: 10px !important;
+              padding-right: 10px !important;
+          }
+      }
+
+      ul.users-list {
+          list-style: none;
+          padding: 0px;
+          display: block;
+          margin-top: 0px;
+      }
+      ul.users-list li {
+          display: inline-block;
+          padding-right: 12px;
+          padding-top: 8px;
+      }
+
+  %body{ style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+    %table#body{ border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;" }
+      %tbody
+        %tr.line
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;" }
+        %tr.header
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            %img{ alt: "GitLab", height: "55", src: image_url('mailers/gitlab_logo.png'), width: "55" }/
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+            %table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;" }
+              %tbody
+                %tr
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+                    %table.content{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;" }
+                      %tbody
+                        %tr.success
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;border-radius:3px;font-size:14px;line-height:1.3;text-align:center;overflow:hidden;color:#ffffff;background-color:#31af64;" }
+                            %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;" }
+                              %tbody
+                                %tr
+                                  %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;" }
+                                    - if @merge_request.respond_to? :approvals_required
+                                      %span Merge request was approved (#{@merge_request.approvals.count}/#{@merge_request.approvals_required})
+                                    - else
+                                      %span Merge request was approved
+                      %tr.spacer
+                        %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
+                          &nbsp;
+                      %tr.section
+                        %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.4;text-align:center;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+                          %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;width:100%;" }
+                            %tbody
+                              %tr{ style: 'width:100%;' }
+                                %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;text-align:center;" }
+                                  %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 approved by
+                                  %img.avatar{ height: "24", src: avatar_icon_for_user(@approved_by, 24, only_path: false), style: "border-radius:12px;margin:-7px 0 -7px 3px;", width: "24", alt: "Avatar" }/
+                                  %a.muted{ href: user_url(@approved_by), style: "color:#333333;text-decoration:none;" }
+                                    = @approved_by.name
+                        %tr.spacer
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
+                            &nbsp;
+                        %tr.section
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+                            %table.info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" }
+                              %tbody
+                                %tr
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;" } Project
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;" }
+                                    - namespace_name = @project.group ? @project.group.name : @project.namespace.owner.name
+                                    - namespace_url = @project.group ? group_url(@project.group) : user_url(@project.namespace.owner)
+                                    %a.muted{ href: namespace_url, style: "color:#333333;text-decoration:none;" }
+                                      = namespace_name
+                                    \/
+                                    %a.muted{ href: project_url(@project), style: "color:#333333;text-decoration:none;" }
+                                      = @project.name
+                                %tr
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Branch
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+                                    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
+                                      %tbody
+                                        %tr
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                                            %img{ height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), style: "display:block;", width: "13", alt: "Branch icon" }/
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                                            %span.muted{ style: "color:#333333;text-decoration:none;" }
+                                              = @merge_request.source_branch
+                                %tr
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Author
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+                                    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
+                                      %tbody
+                                        %tr
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                                            %img.avatar{ height: "24", src: avatar_icon_for_user(@merge_request.author, 24, only_path: false), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24", alt: "Avatar" }/
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                                            %a.muted{ href: user_url(@merge_request.author), style: "color:#333333;text-decoration:none;" }
+                                              = @merge_request.author.name
+
+                                - if @merge_request.assignees.any?
+                                  = render 'users_list', users: @merge_request.assignees, user_label: assignees_label(@merge_request, include_value: false)
+
+                                - if @merge_request.reviewers.any?
+                                  = render 'users_list', users: @merge_request.reviewers, user_label: reviewers_label(@merge_request, include_value: false)
+        - if Gitlab.ee?
+          -# EE-specific start
+          = render 'layouts/mailer/additional_text'
+          -# EE-specific end
+
+        %tr.footer
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            %img{ alt: "GitLab", src: image_url('mailers/gitlab_logo_black_text.png'), style: "display:block;margin:0 auto 1em;", width: "90" }/
+            %div
+              - manage_notifications_link = link_to(_("Manage all notifications"), profile_notifications_url, style: "color:#3777b0;text-decoration:none;")
+              - help_link = link_to(_("Help"), help_url, style: "color:#3777b0;text-decoration:none;")
+              = _("You're receiving this email because of your account on %{host}. %{manage_notifications_link} &middot; %{help_link}").html_safe % { host: Gitlab.config.gitlab.host, manage_notifications_link: manage_notifications_link, help_link: help_link }
diff --git a/app/views/notify/approved_merge_request_email.text.haml b/app/views/notify/approved_merge_request_email.text.haml
new file mode 100644
index 00000000000..476da7f9af7
--- /dev/null
+++ b/app/views/notify/approved_merge_request_email.text.haml
@@ -0,0 +1,9 @@
+Merge request #{@merge_request.to_reference} was approved by #{sanitize_name(@approved_by.name)}
+
+Merge request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
+
+= merge_path_description(@merge_request, 'to')
+
+Author: #{sanitize_name(@merge_request.author_name)}
+= assignees_label(@merge_request)
+= reviewers_label(@merge_request)
diff --git a/app/views/notify/build_ios_app_guide_email.html.haml b/app/views/notify/build_ios_app_guide_email.html.haml
new file mode 100644
index 00000000000..e9f23d3c0f9
--- /dev/null
+++ b/app/views/notify/build_ios_app_guide_email.html.haml
@@ -0,0 +1,13 @@
+%tr
+  %td{ bgcolor: "#ffffff", height: "auto", style: "max-width: 600px; width: 100%; text-align: center; height: 200px; padding: 25px 15px; mso-line-height-rule: exactly; min-height: 40px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;", valign: "middle", width: "100%" }
+    = inline_image_link(@message.logo_path, { width: '150', style: 'width: 150px;' })
+    %h1{ style: "font-size: 40px; line-height: 46x; color: #000000; padding: 20px 0 0 0; font-weight: normal;" }
+      = @message.title
+%tr
+  %td{ style: "padding: 10px 20px 30px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#000000; font-size: 18px; line-height: 24px;" }
+    %p{ style: "margin: 0 0 20px 0;" }
+      = @message.body_line1.html_safe
+%tr
+  %td{ align: "center", style: "padding: 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
+    .cta_link.cta_link_primary= @message.cta_link
+    .cta_link.cta_link_secondary= @message.cta2_link
diff --git a/app/views/notify/build_ios_app_guide_email.text.erb b/app/views/notify/build_ios_app_guide_email.text.erb
new file mode 100644
index 00000000000..59757b7c1b0
--- /dev/null
+++ b/app/views/notify/build_ios_app_guide_email.text.erb
@@ -0,0 +1,13 @@
+<%= @message.title %>
+
+<%= @message.body_line1 %>
+
+<%= @message.cta_link %>
+
+<%= @message.cta2_link %>
+
+<%= @message.footer_links %>
+
+<%= @message.address %>
+
+<%= @message.unsubscribe %>
diff --git a/app/views/notify/inactive_project_deletion_warning_email.html.haml b/app/views/notify/inactive_project_deletion_warning_email.html.haml
new file mode 100644
index 00000000000..52253ce3076
--- /dev/null
+++ b/app/views/notify/inactive_project_deletion_warning_email.html.haml
@@ -0,0 +1,28 @@
+- project_link = link_to(_("%{project_name}") % { project_name: @project.name }, @project.http_url_to_repo)
+- projects_api_link = link_to(_("Projects API"), help_page_url('api/projects'))
+- events_api_link = link_to(_("Events API"), help_page_url('api/events', anchor: 'list-a-projects-visible-events'))
+
+%p
+  = _('Hi %{username},') % { username: sanitize_name(@user.name) }
+
+%p
+  = html_escape(_("Due to inactivity, the %{project_link} project is scheduled to be deleted on %{b_open}%{deletion_date}%{b_close}. To unschedule the deletion of %{project_link}, perform some activity on it. For example:")) % { project_link: project_link.html_safe, deletion_date: @deletion_date, b_open: '<b>'.html_safe, b_close: '</b>'.html_safe }
+
+%p
+  %ul
+    %li= _("Create or close an issue.")
+    %li= _("Create, update, or delete a merge request.")
+    %li= _("Push code to the repository.")
+    %li= _("Add or remove a user.")
+
+%p
+  = html_escape(_("To ensure %{project_link} is unscheduled for deletion, check that activity has been logged by GitLab. For example:")) %{project_link: project_link.html_safe}
+
+%p
+  %ul
+    %li= html_escape(_("Go to the %{b_open}Activity%{b_close} page for %{project_link}.")) % { project_link: project_link, b_open: '<b>'.html_safe, b_close: '</b>'.html_safe }
+    %li= html_escape(_("View the %{code_open}last_activity_at%{code_close} attribute for %{project_link} using the %{projects_api_link}.")) % { project_link: project_link.html_safe, projects_api_link: projects_api_link.html_safe, code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+    %li= html_escape(_("List the visible events for %{project_link} using the %{events_api_link}.")) % { project_link: project_link.html_safe, events_api_link: events_api_link.html_safe }
+
+%p
+  = html_escape(_("This email supersedes any previous emails about scheduled deletion you may have received for %{project_link}.")) % { project_link: project_link.html_safe }
diff --git a/app/views/notify/inactive_project_deletion_warning_email.text.erb b/app/views/notify/inactive_project_deletion_warning_email.text.erb
new file mode 100644
index 00000000000..a0b79967817
--- /dev/null
+++ b/app/views/notify/inactive_project_deletion_warning_email.text.erb
@@ -0,0 +1,17 @@
+<%= _('Hi %{username},') % { username: sanitize_name(@user.name) } %>
+
+<%= _("Due to inactivity, the %{project_name} (%{project_link}) project is scheduled to be deleted on %{deletion_date}. To unschedule the deletion of %{project_name}, perform some activity on it. For example:") %
+      { project_name: @project.name, project_link: @project.http_url_to_repo, deletion_date: @deletion_date } %>
+
+<%= _("- Create or close an issue.") %>
+<%= _("- Create, update, or delete a merge request.") %>
+<%= _("- Push code to the repository.") %>
+<%= _("- Add or remove a user.") %>
+
+<%= _("To ensure %{project_name} is unscheduled for deletion, check that activity has been logged by GitLab. For example:") % { project_name: @project.name } %>
+
+<%= _("- Go to the Activity page for %{project_name}.") % { project_name: @project.name } %>
+<%= _("- View the last_activity_at attribute for %{project_name} using the Project API %{projects_api_link}.") % { project_name: @project.name, projects_api_link: help_page_url('api/projects') } %>
+<%= _("- List the visible events for %{project_name} using the Events API %{events_api_link}.") % { project_name: @project.name, events_api_link: help_page_url('api/events', anchor: 'list-a-projects-visible-events') } %>
+
+<%= _("This email supersedes any previous emails about scheduled deletion you may have received for %{project_name}.") % { project_name: @project.name } %>
diff --git a/app/views/notify/merge_request_unmergeable_email.html.haml b/app/views/notify/merge_request_unmergeable_email.html.haml
index 6bcff28985c..f0a5e5d4367 100644
--- a/app/views/notify/merge_request_unmergeable_email.html.haml
+++ b/app/views/notify/merge_request_unmergeable_email.html.haml
@@ -1,2 +1,10 @@
 %p
   = sprintf(s_('Notify|Merge request %{merge_request} can no longer be merged due to conflict.'), { merge_request: merge_request_reference_link(@merge_request) }).html_safe
+%p
+  = merge_path_description(@merge_request, 'to')
+%p
+  = sprintf(s_('Author: %{author_name}'), { author_name: sanitize_name(@merge_request.author_name) })
+%p
+  = assignees_label(@merge_request)
+%p
+  = reviewers_label(@merge_request)
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 e7c51c8fb13..e4d138cce96 100644
--- a/app/views/notify/merge_when_pipeline_succeeds_email.html.haml
+++ b/app/views/notify/merge_when_pipeline_succeeds_email.html.haml
@@ -61,7 +61,7 @@
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;" }
         %tr.header
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
-            %img{ alt: "GitLab", height: "50", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo.gif'), width: "55" }
+            %img{ alt: "GitLab", height: "55", src: image_url('mailers/gitlab_logo.png'), width: "55" }
         %tr
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
             %table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;" }
@@ -146,7 +146,7 @@
 
         %tr.footer
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
-            %img{ alt: "GitLab", height: "33", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif'), style: "display:block;margin:0 auto 1em;", width: "90" }
+            %img{ alt: "GitLab", src: image_url('mailers/gitlab_logo_black_text.png'), style: "display:block;margin:0 auto 1em;", width: "90" }
             %div
               - manage_notifications_link = link_to(_("Manage all notifications"), profile_notifications_url, style: "color:#3777b0;text-decoration:none;")
               - help_link = link_to(_("Help"), help_url, style: "color:#3777b0;text-decoration:none;")
diff --git a/app/views/notify/merged_merge_request_email.html.haml b/app/views/notify/merged_merge_request_email.html.haml
index 0622e2f6ffb..e2e4d6d937f 100644
--- a/app/views/notify/merged_merge_request_email.html.haml
+++ b/app/views/notify/merged_merge_request_email.html.haml
@@ -1,2 +1,16 @@
 %p
   = sprintf(s_('Notify|Merge request %{merge_request} was merged'), { merge_request: merge_request_reference_link(@merge_request) }).html_safe
+
+%p
+  = merge_path_description(@merge_request, 'to')
+
+%div
+  = sprintf(s_('Notify|Author: %{author_name}'), { author_name: sanitize_name(@merge_request.author_name) })
+
+  - if @merge_request.assignees.any?
+    %div
+      = assignees_label(@merge_request)
+
+  - if @merge_request.reviewers.any?
+    %div
+      = reviewers_label(@merge_request)
diff --git a/app/views/notify/merged_merge_request_email.text.haml b/app/views/notify/merged_merge_request_email.text.haml
index d6ec916641d..9b9eb566903 100644
--- a/app/views/notify/merged_merge_request_email.text.haml
+++ b/app/views/notify/merged_merge_request_email.text.haml
@@ -5,5 +5,9 @@
 = merge_path_description(@merge_request, 'to')
 
 = sprintf(s_('Notify|Author: %{author_name}'), { author_name: sanitize_name(@merge_request.author_name) })
-= assignees_label(@merge_request)
-= reviewers_label(@merge_request)
+
+- if @merge_request.assignees.any?
+  = assignees_label(@merge_request)
+
+- if @merge_request.reviewers.any?
+  = reviewers_label(@merge_request)
diff --git a/app/views/notify/unapproved_merge_request_email.html.haml b/app/views/notify/unapproved_merge_request_email.html.haml
new file mode 100644
index 00000000000..8a4138b7515
--- /dev/null
+++ b/app/views/notify/unapproved_merge_request_email.html.haml
@@ -0,0 +1,156 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+%html{ lang: "en" }
+  %head
+    %meta{ content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type" }/
+    %meta{ content: "width=device-width, initial-scale=1", name: "viewport" }/
+    %meta{ content: "IE=edge", "http-equiv" => "X-UA-Compatible" }/
+    %title= message.subject
+    :css
+      /* CLIENT-SPECIFIC STYLES */
+      body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+      table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+      img { -ms-interpolation-mode: bicubic; }
+
+      /* iOS BLUE LINKS */
+      a[x-apple-data-detectors] {
+          color: inherit !important;
+          text-decoration: none !important;
+          font-size: inherit !important;
+          font-family: inherit !important;
+          font-weight: inherit !important;
+          line-height: inherit !important;
+      }
+
+      /* ANDROID MARGIN HACK */
+      body { margin:0 !important; }
+      div[style*="margin: 16px 0"] { margin:0 !important; }
+
+      @media only screen and (max-width: 639px) {
+          body, #body {
+              min-width: 320px !important;
+          }
+          table.wrapper {
+              width: 100% !important;
+              min-width: 320px !important;
+          }
+          table.wrapper > tbody > tr > td {
+              border-left: 0 !important;
+              border-right: 0 !important;
+              border-radius: 0 !important;
+              padding-left: 10px !important;
+              padding-right: 10px !important;
+          }
+      }
+
+      ul.users-list {
+          list-style: none;
+          padding: 0px;
+          display: block;
+          margin-top: 0px;
+      }
+      ul.users-list li {
+          display: inline-block;
+          padding-right: 12px;
+          padding-top: 8px;
+      }
+
+  %body{ style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+    %table#body{ border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;" }
+      %tbody
+        %tr.line
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;" }
+        %tr.header
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            %img{ alt: "GitLab", height: "55", src: image_url('mailers/gitlab_logo.png'), width: "55" }/
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+            %table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;" }
+              %tbody
+                %tr
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+                    %table.content{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;" }
+                      %tbody
+                        %tr.success
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;border-radius:3px;font-size:14px;line-height:1.3;text-align:center;overflow:hidden;color:#ffffff;background-color:#FC6D26;" }
+                            %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;" }
+                              %tbody
+                                %tr
+                                  %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/approval/icon-x-orange-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;" }
+                                    - if @merge_request.respond_to? :approvals_required
+                                      %span Merge request was unapproved (#{@merge_request.approvals.count}/#{@merge_request.approvals_required})
+                                    - else
+                                      %span Merge request was unapproved
+                      %tr.spacer
+                        %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
+                          &nbsp;
+                      %tr.section
+                        %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.4;text-align:center;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+                          %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;width:100%;" }
+                            %tbody
+                              %tr{ style: 'width:100%;' }
+                                %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;text-align:center;" }
+                                  %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 unapproved by
+                                  %img.avatar{ height: "24", src: avatar_icon_for_user(@unapproved_by, 24), style: "border-radius:12px;margin:-7px 0 -7px 3px;", width: "24", alt: "Avatar" }/
+                                  %a.muted{ href: user_url(@unapproved_by), style: "color:#333333;text-decoration:none;" }
+                                    = @unapproved_by.name
+                        %tr.spacer
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
+                            &nbsp;
+                        %tr.section
+                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+                            %table.info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" }
+                              %tbody
+                                %tr
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;" } Project
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;" }
+                                    - namespace_name = @project.group ? @project.group.name : @project.namespace.owner.name
+                                    - namespace_url = @project.group ? group_url(@project.group) : user_url(@project.namespace.owner)
+                                    %a.muted{ href: namespace_url, style: "color:#333333;text-decoration:none;" }
+                                      = namespace_name
+                                    \/
+                                    %a.muted{ href: project_url(@project), style: "color:#333333;text-decoration:none;" }
+                                      = @project.name
+                                %tr
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Branch
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+                                    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
+                                      %tbody
+                                        %tr
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                                            %img{ height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), style: "display:block;", width: "13", alt: "Branch icon" }/
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                                            %span.muted{ style: "color:#333333;text-decoration:none;" }
+                                              = @merge_request.source_branch
+                                %tr
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Author
+                                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+                                    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
+                                      %tbody
+                                        %tr
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                                            %img.avatar{ height: "24", src: avatar_icon_for_user(@merge_request.author, 24), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24", alt: "Avatar" }/
+                                          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                                            %a.muted{ href: user_url(@merge_request.author), style: "color:#333333;text-decoration:none;" }
+                                              = @merge_request.author.name
+                                - if @merge_request.assignees.any?
+                                  = render 'users_list', users: @merge_request.assignees, user_label: assignees_label(@merge_request, include_value: false)
+
+                                - if @merge_request.reviewers.any?
+                                  = render 'users_list', users: @merge_request.reviewers, user_label: reviewers_label(@merge_request, include_value: false)
+        - if Gitlab.ee?
+          -# EE-specific start
+          = render 'layouts/mailer/additional_text'
+          -# EE-specific end
+
+        %tr.footer
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            %img{ alt: "GitLab", src: image_url('mailers/gitlab_logo_black_text.png'), style: "display:block;margin:0 auto 1em;", width: "90" }/
+            %div
+              - manage_notifications_link = link_to(_("Manage all notifications"), profile_notifications_url, style: "color:#3777b0;text-decoration:none;")
+              - help_link = link_to(_("Help"), help_url, style: "color:#3777b0;text-decoration:none;")
+              = _("You're receiving this email because of your account on %{host}. %{manage_notifications_link} &middot; %{help_link}").html_safe % { host: Gitlab.config.gitlab.host, manage_notifications_link: manage_notifications_link, help_link: help_link }
diff --git a/app/views/notify/unapproved_merge_request_email.text.haml b/app/views/notify/unapproved_merge_request_email.text.haml
new file mode 100644
index 00000000000..4e34b883906
--- /dev/null
+++ b/app/views/notify/unapproved_merge_request_email.text.haml
@@ -0,0 +1,9 @@
+Merge request #{@merge_request.to_reference} was unapproved by #{@unapproved_by.name}
+
+Merge request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
+
+= merge_path_description(@merge_request, 'to')
+
+Author: #{sanitize_name(@merge_request.author_name)}
+= assignees_label(@merge_request)
+= reviewers_label(@merge_request)
diff --git a/app/views/profiles/_email_settings.html.haml b/app/views/profiles/_email_settings.html.haml
index 1057e96f442..35cad79b6fd 100644
--- a/app/views/profiles/_email_settings.html.haml
+++ b/app/views/profiles/_email_settings.html.haml
@@ -5,15 +5,34 @@
 - help_text = email_change_disabled ? s_("Your account uses dedicated credentials for the \"%{group_name}\" group and can only be updated through SSO.") % { group_name: @user.managing_group.name } : read_only_help_text
 - password_automatically_set = @user.password_automatically_set?
 
-= form.text_field :email, required: true, class: 'input-lg gl-form-input', value: (@user.email unless @user.temp_oauth_email?), help: help_text.html_safe, readonly: readonly || email_change_disabled
-- unless password_automatically_set
-  = hidden_field_tag 'user[validation_password]', :validation_password, class: 'js-password-prompt-field', help: s_("Profiles|Enter your password to confirm the email change")
-= form.select :public_email, options_for_select(@user.public_verified_emails, selected: @user.public_email),
-  { help: s_("Profiles|This email will be displayed on your public profile"), include_blank: s_("Profiles|Do not show on profile") },
-  control_class: 'select2 input-lg', disabled: email_change_disabled
-- commit_email_link_url = help_page_path('user/profile/index', anchor: 'change-the-email-displayed-on-your-commits', target: '_blank')
-- commit_email_link_start = '<a href="%{url}">'.html_safe % { url: commit_email_link_url }
-- commit_email_docs_link = s_('Profiles|This email will be used for web based operations, such as edits and merges. %{commit_email_link_start}Learn more%{commit_email_link_end}').html_safe % { commit_email_link_start: commit_email_link_start, commit_email_link_end: '</a>'.html_safe }
-= form.select :commit_email, options_for_select(commit_email_select_options(@user), selected: @user.commit_email),
-  { help: commit_email_docs_link },
-  control_class: 'select2 input-lg', disabled: email_change_disabled
+.form-group.gl-form-group
+  = form.label :email, _('Email')
+  = form.text_field :email, required: true, class: 'gl-form-input form-control gl-form-input-lg', value: (@user.email unless @user.temp_oauth_email?), readonly: readonly || email_change_disabled
+  %small.form-text.text-gl-muted
+    = help_text.html_safe
+
+  - unless password_automatically_set
+    = hidden_field_tag 'user[validation_password]', :validation_password, class: 'js-password-prompt-field', help: s_("Profiles|Enter your password to confirm the email change")
+
+.form-group.gl-form-group
+  = form.label :public_email, s_('Profiles|Public email')
+  .gl-form-input-lg
+    = form.select :public_email,
+      options_for_select(@user.public_verified_emails, selected: @user.public_email),
+      { include_blank: s_("Profiles|Do not show on profile") },
+      { class: 'gl-form-select custom-select', disabled: email_change_disabled }
+  %small.form-text.text-gl-muted
+    = s_("Profiles|This email will be displayed on your public profile")
+
+.form-group.gl-form-group
+  - commit_email_link_url = help_page_path('user/profile/index', anchor: 'change-the-email-displayed-on-your-commits', target: '_blank')
+  - commit_email_link_start = '<a href="%{url}">'.html_safe % { url: commit_email_link_url }
+  - commit_email_docs_link = s_('Profiles|This email will be used for web based operations, such as edits and merges. %{commit_email_link_start}Learn more%{commit_email_link_end}').html_safe % { commit_email_link_start: commit_email_link_start, commit_email_link_end: '</a>'.html_safe }
+  = form.label :commit_email, s_('Profiles|Commit email')
+  .gl-form-input-lg
+    = form.select :commit_email,
+      options_for_select(commit_email_select_options(@user), selected: @user.commit_email),
+      {},
+      { class: 'gl-form-select custom-select', disabled: email_change_disabled }
+  %small.form-text.text-gl-muted
+    = commit_email_docs_link
diff --git a/app/views/profiles/_name.html.haml b/app/views/profiles/_name.html.haml
index aea38bf4c3b..5af4fe24d62 100644
--- a/app/views/profiles/_name.html.haml
+++ b/app/views/profiles/_name.html.haml
@@ -1,5 +1,9 @@
+= form.label :name, s_('Profiles|Full name')
 - if user.read_only_attribute?(:name)
-  = form.text_field :name, class: 'gl-form-input', required: true, readonly: true, wrapper: { class: 'col-md-9 qa-full-name rspec-full-name' },
-  help: s_("Profiles|Your name was automatically set based on your %{provider_label} account, so people you know can recognize you") % { provider_label: attribute_provider_label(:name) }
+  = form.text_field :name, class: 'gl-form-input form-control', required: true, readonly: true
+  %small.form-text.text-gl-muted
+    = s_("Profiles|Your name was automatically set based on your %{provider_label} account, so people you know can recognize you") % { provider_label: attribute_provider_label(:name) }
 - else
-  = form.text_field :name, class: 'gl-form-input', label: s_('Profiles|Full name'), required: true, title: s_("Profiles|Using emojis in names seems fun, but please try to set a status message instead"), wrapper: { class: 'col-md-9 qa-full-name rspec-full-name' }, help: s_("Profiles|Enter your name, so people you know can recognize you")
+  = form.text_field :name, class: 'gl-form-input form-control', required: true, title: s_("Profiles|Using emojis in names seems fun, but please try to set a status message instead")
+  %small.form-text.text-gl-muted
+    = s_("Profiles|Enter your name, so people you know can recognize you")
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 8568e61aa33..bbbb8154c51 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -3,15 +3,15 @@
 
 - if current_user.ldap_user?
   = render Pajamas::AlertComponent.new(alert_class: 'gl-my-5',
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = s_('Profiles|Some options are unavailable for LDAP accounts')
 
 - if params[:two_factor_auth_enabled_successfully]
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_class: 'gl-my-5',
-    close_button_class: 'js-close-2fa-enabled-success-alert') do
-    .gl-alert-body
+    close_button_class: 'js-close-2fa-enabled-success-alert') do |c|
+    = c.body do
       = html_escape(_('You have set up 2FA for your account! If you lose access to your 2FA device, you can use your recovery codes to access your account. Alternatively, if you upload an SSH key, you can %{anchorOpen}use that key to generate additional recovery codes%{anchorClose}.')) % { anchorOpen: '<a href="%{href}">'.html_safe % { href: help_page_path('user/profile/account/two_factor_authentication', anchor: 'generate-new-recovery-codes-using-ssh') }, anchorClose: '</a>'.html_safe }
 
 .row.gl-mt-3.js-search-settings-section
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index 5d74bbe9971..26c9b2f0ee1 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -3,8 +3,8 @@
 
 %div
   - if @user.errors.any?
-    = render Pajamas::AlertComponent.new(variant: :danger) do
-      .gl-alert-body
+    = render Pajamas::AlertComponent.new(variant: :danger) do |c|
+      = c.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 3fb48f3d3e3..8c799a5e3fe 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -127,7 +127,12 @@
           = _('Language')
         = f.select :preferred_language, language_choices, {}, class: 'select2'
         .form-text.text-muted
-          = s_('Preferences|This feature is experimental and translations are not complete yet')
+          = s_('Preferences|This feature is experimental and translations are not yet complete.')
+          %p
+            = link_to help_page_url('development/i18n/translation'), class: 'text-nowrap', target: '_blank', rel: 'noopener noreferrer' do
+              = _("Help translate GitLab into your language")
+              %span{ aria: { label: _('Open new window') } }
+                = sprite_icon('external-link')
       .form-group
         = f.label :first_day_of_week, class: 'label-bold' do
           = _('First day of the week')
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 531e72b7cc2..107c7cebc61 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -5,7 +5,7 @@
 - availability = availability_values
 - custom_emoji = show_status_emoji?(@user.status)
 
-= bootstrap_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user gl-mt-3 js-quick-submit gl-show-field-errors js-password-prompt-form', remote: true }, authenticity_token: true do |f|
+= gitlab_ui_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user gl-mt-3 js-quick-submit gl-show-field-errors js-password-prompt-form', remote: true }, authenticity_token: true do |f|
   = form_errors(@user)
 
   .row.js-search-settings-section
@@ -34,7 +34,7 @@
       .gl-my-3
         %button.gl-button.btn.btn-default.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
         %span.avatar-file-name.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen.")
-        = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
+        = f.file_field :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
       .gl-text-gray-500= s_("Profiles|The maximum file size allowed is 200KB.")
       - if @user.avatar?
         = link_to s_("Profiles|Remove avatar"), profile_avatar_path, data: { confirm: s_("Profiles|Avatar will be removed. Are you sure?") }, method: :delete, class: 'gl-button btn btn-danger-secondary btn-sm gl-mt-5'
@@ -62,16 +62,24 @@
           = sprite_icon("close")
 
         = status_form.hidden_field :emoji, id: 'js-status-emoji-field'
-        = status_form.text_field :message,
-          id: 'js-status-message-field',
-          class: 'form-control gl-form-input input-lg',
-          label: s_("Profiles|Your status"),
-          prepend: emoji_button,
-          append: reset_message_button,
-          placeholder: s_("Profiles|What's your status?")
-        .checkbox-icon-inline-wrapper
-          = status_form.check_box :availability, { data: { testid: "user-availability-checkbox" }, label: s_("Profiles|Busy"), wrapper_class: 'gl-mr-0 gl-font-weight-bold' }, availability["busy"], availability["not_set"]
-          .gl-text-gray-600.gl-ml-5= s_('Profiles|An indicator appears next to your name and avatar')
+        .form-group.gl-form-group
+          = status_form.label :message, s_("Profiles|Your status")
+          .input-group{ role: 'group' }
+            .input-group-prepend
+              = emoji_button
+            = status_form.text_field :message,
+              id: 'js-status-message-field',
+              class: 'form-control gl-form-input input-lg',
+              placeholder: s_("Profiles|What's your status?")
+            .input-group-append
+              = reset_message_button
+        .form-group.gl-form-group
+          = status_form.gitlab_ui_checkbox_component :availability,
+            s_("Profiles|Busy"),
+            help_text: s_('Profiles|An indicator appears next to your name and avatar'),
+            checkbox_options: { data: { testid: "user-availability-checkbox" } },
+            checked_value: availability["busy"],
+            unchecked_value: availability["not_set"]
     .col-lg-12
       %hr
   .row.user-time-preferences.js-search-settings-section
@@ -94,35 +102,71 @@
           = s_("Profiles|Some options are unavailable for LDAP accounts")
     .col-lg-8
       .row
-        = render 'profiles/name', form: f, user: @user
-        = f.text_field :id, class: 'gl-form-input', readonly: true, label: s_('Profiles|User ID'), wrapper: { class: 'col-md-3' }
-
-      = f.text_field :pronouns, label: s_('Profiles|Pronouns'), class: 'input-md gl-form-input', help: s_("Profiles|Enter your pronouns to let people know how to refer to you")
-      = f.text_field :pronunciation, label: s_('Profiles|Pronunciation'), class: 'input-md gl-form-input', help: s_("Profiles|Enter how your name is pronounced to help people address you correctly")
+        .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-form-input-lg'
+        %small.form-text.text-gl-muted
+          = s_("Profiles|Enter your pronouns to let people know how to refer to you")
+      .form-group.gl-form-group
+        = f.label :pronunciation, s_('Profiles|Pronunciation')
+        = f.text_field :pronunciation, class: 'gl-form-input form-control gl-form-input-lg'
+        %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
-      = f.text_field :skype, class: 'input-md gl-form-input', placeholder: s_("Profiles|username")
-      = f.text_field :linkedin, class: 'input-md gl-form-input', help: s_("Profiles|Your LinkedIn profile name from linkedin.com/in/profilename")
-      = f.text_field :twitter, class: 'input-md gl-form-input', placeholder: s_("Profiles|@username")
-      = f.text_field :website_url, label: s_('Profiles|Website url'), class: 'input-lg gl-form-input', placeholder: s_("Profiles|https://website.com")
-      - if @user.read_only_attribute?(:location)
-        = f.text_field :location, class: 'gl-form-input', readonly: true, help: s_("Profiles|Your location was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:location) }
-      - else
-        = f.text_field :location, label: s_('Profiles|Location'), class: 'input-lg gl-form-input', placeholder: s_("Profiles|City, country")
-      = f.text_field :job_title, label: s_('Profiles|Job title'), class: 'input-md gl-form-input'
-      = f.text_field :organization, label: s_('Profiles|Organization'), class: 'input-md gl-form-input', help: s_("Profiles|Who you represent or work for")
-      = f.text_area :bio, class: 'gl-form-input', label: s_('Profiles|Bio'), rows: 4, maxlength: 250, help: s_("Profiles|Tell us about yourself in fewer than 250 characters")
+      .form-group.gl-form-group
+        = f.label :skype
+        = f.text_field :skype, class: 'gl-form-input form-control gl-form-input-lg', placeholder: s_("Profiles|username")
+      .form-group.gl-form-group
+        = f.label :linkedin
+        = f.text_field :linkedin, class: 'gl-form-input form-control gl-form-input-lg'
+        %small.form-text.text-gl-muted
+          = s_("Profiles|Your LinkedIn profile name from linkedin.com/in/profilename")
+      .form-group.gl-form-group
+        = f.label :twitter
+        = f.text_field :twitter, class: 'gl-form-input form-control gl-form-input-lg', placeholder: s_("Profiles|@username")
+      .form-group.gl-form-group
+        = f.label :website_url, s_('Profiles|Website url')
+        = f.text_field :website_url, class: 'gl-form-input form-control gl-form-input-lg', placeholder: s_("Profiles|https://website.com")
+      .form-group.gl-form-group
+        = f.label :location, s_('Profiles|Location')
+        - if @user.read_only_attribute?(:location)
+          = f.text_field :location, class: 'gl-form-input form-control gl-form-input-lg', readonly: true
+          %small.form-text.text-gl-muted
+            = s_("Profiles|Your location was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:location) }
+        - else
+          = f.text_field :location, class: 'gl-form-input form-control gl-form-input-lg', placeholder: s_("Profiles|City, country")
+      .form-group.gl-form-group
+        = f.label :job_title, s_('Profiles|Job title')
+        = f.text_field :job_title, class: 'gl-form-input form-control gl-form-input-lg'
+      .form-group.gl-form-group
+        = f.label :organization, s_('Profiles|Organization')
+        = f.text_field :organization, class: 'gl-form-input form-control gl-form-input-lg'
+        %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
-      %h5= _('Private profile')
-      .checkbox-icon-inline-wrapper
-        - private_profile_label = capture do
-          = s_("Profiles|Don't display activity-related personal information on your profile")
-        = f.check_box :private_profile, label: private_profile_label, inline: true, wrapper_class: 'mr-0'
-        = link_to sprite_icon('question-o'), help_page_path('user/profile/index.md', anchor: 'make-your-user-profile-page-private')
-      %h5= s_("Profiles|Private contributions")
-      = f.check_box :include_private_contributions, label: s_('Profiles|Include private contributions on my profile'), wrapper_class: 'mb-2', inline: true
-      .help-block
-        = 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
+          = _('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 my profile'),
+          help_text: s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")
   %hr
   = f.submit s_("Profiles|Update profile settings"), class: 'gl-button btn btn-confirm gl-mr-3 js-password-prompt-btn'
   = link_to _("Cancel"), user_path(current_user), class: 'gl-button btn btn-default btn-cancel'
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 3ae64643420..ace644a493b 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -2,7 +2,7 @@
 - page_title _('Two-Factor Authentication'), _('Account')
 - add_to_breadcrumbs _('Account'), profile_account_path
 - @content_class = "limit-container-width" unless fluid_layout
-- webauthn_enabled = Feature.enabled?(:webauthn, default_enabled: :yaml)
+- webauthn_enabled = Feature.enabled?(:webauthn)
 
 .js-two-factor-auth{ 'data-two-factor-skippable' => "#{two_factor_skippable?}", 'data-two_factor_skip_url' => skip_profile_two_factor_auth_path }
   .row.gl-mt-3
@@ -42,8 +42,8 @@
           - if @error
             = render Pajamas::AlertComponent.new(title: @error[:message],
               variant: :danger,
-              dismissible: false) do
-              .gl-alert-body
+              dismissible: false) do |c|
+              = c.body do
                 = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
 
           .form-group
diff --git a/app/views/projects/_deletion_failed.html.haml b/app/views/projects/_deletion_failed.html.haml
index f9d8a2d2989..85a7b9eb22b 100644
--- a/app/views/projects/_deletion_failed.html.haml
+++ b/app/views/projects/_deletion_failed.html.haml
@@ -3,7 +3,7 @@
 
 = render Pajamas::AlertComponent.new(variant: :warning,
   dismissible: false,
-  alert_class: 'project-deletion-failed-message') do
-  .gl-alert-body
+  alert_class: 'project-deletion-failed-message') do |c|
+  = c.body do
     This project was scheduled for deletion, but failed with the following message:
     = project.delete_error
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 74ace549bb1..bea5d548e03 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -8,7 +8,7 @@
 
 #tree-holder.tree-holder.clearfix
   .nav-block.gl-display-flex.gl-xs-flex-direction-column.gl-align-items-stretch
-    = render 'projects/tree/tree_header', tree: @tree
+    = render 'projects/tree/tree_header', tree: @tree, is_project_overview: is_project_overview
 
   .info-well.gl-display-none.gl-sm-display-flex.project-last-commit.gl-flex-direction-column
     #js-last-commit.gl-m-auto
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 8e6cc6da65d..eee9cfe0618 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -1,7 +1,7 @@
 - empty_repo = @project.empty_repo?
 - show_auto_devops_callout = show_auto_devops_callout?(@project)
 - emails_disabled = @project.emails_disabled?
-- cache_enabled = Feature.enabled?(:cache_home_panel, @project, type: :development, default_enabled: :yaml)
+- cache_enabled = Feature.enabled?(:cache_home_panel, @project, type: :development)
 
 .project-home-panel.js-show-on-project-root.gl-my-5{ class: [("empty-project" if empty_repo)] }
   .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-sm-flex-direction-column.gl-mb-3
@@ -19,8 +19,7 @@
           - if can?(current_user, :read_project, @project)
             %span.gl-display-inline-block.gl-vertical-align-middle
               = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
-              - button_class = "btn gl-button btn-sm btn-tertiary btn-default-tertiary home-panel-metadata"
-              = clipboard_button(title: s_('ProjectPage|Copy project ID'), text: @project.id, class: button_class)
+              = clipboard_button(title: s_('ProjectPage|Copy project ID'), text: @project.id)
           - if current_user
             %span.gl-ml-3.gl-mb-3
               = render 'shared/members/access_request_links', source: @project
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 66857dadb65..5a2add9de1e 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -2,8 +2,8 @@
 - if event && show_last_push_widget?(event)
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_class: 'gl-mt-3',
-    close_button_class: 'js-close-banner') do
-    .gl-alert-body
+    close_button_class: 'js-close-banner') do |c|
+    = c.body do
       %span= s_("LastPushEvent|You pushed to")
       %strong.gl-display-inline-flex.gl-max-w-50p{ data: { toggle: 'tooltip' }, title: event.ref_name }
         = link_to event.ref_name, project_commits_path(event.project, event.ref_name), class: 'ref-name gl-text-truncate'
@@ -15,6 +15,6 @@
       #{time_ago_with_tooltip(event.created_at)}
 
     - if can?(current_user, :create_merge_request_in, event.project.default_merge_request_target)
-      .gl-alert-actions
+      = c.actions do
         = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn gl-button btn-confirm qa-create-merge-request" do
           #{ _('Create merge request') }
diff --git a/app/views/projects/_merge_request_merge_checks_settings.html.haml b/app/views/projects/_merge_request_merge_checks_settings.html.haml
index 4f9af40f711..3345b3043b8 100644
--- a/app/views/projects/_merge_request_merge_checks_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_checks_settings.html.haml
@@ -3,21 +3,16 @@
 .form-group
   %b= s_('ProjectSettings|Merge checks')
   %p.text-secondary= s_('ProjectSettings|These checks must pass before merge requests can be merged.')
-  .form-check.mb-2.builds-feature
-    = form.check_box :only_allow_merge_if_pipeline_succeeds, class: 'form-check-input'
-    = form.label :only_allow_merge_if_pipeline_succeeds, class: 'form-check-label' do
-      = s_('ProjectSettings|Pipelines must succeed')
-      .text-secondary
-        = s_("ProjectSettings|Merge requests can't be merged if the latest pipeline did not succeed or is still running.")
-  .form-check.mb-2
-    .gl-pl-6
-      = form.check_box :allow_merge_on_skipped_pipeline, class: 'form-check-input'
-      = form.label :allow_merge_on_skipped_pipeline, class: 'form-check-label' do
-        = s_('ProjectSettings|Skipped pipelines are considered successful')
-        .text-secondary
-          = s_('ProjectSettings|Introduces the risk of merging changes that do not pass the pipeline.')
-  .form-check.mb-2
-    = form.check_box :only_allow_merge_if_all_discussions_are_resolved, class: 'form-check-input', data: { qa_selector: 'allow_merge_if_all_discussions_are_resolved_checkbox' }
-    = form.label :only_allow_merge_if_all_discussions_are_resolved, class: 'form-check-label' do
-      = s_('ProjectSettings|All discussions must be resolved')
+  .builds-feature
+    = form.gitlab_ui_checkbox_component :only_allow_merge_if_pipeline_succeeds,
+      s_('ProjectSettings|Pipelines must succeed'),
+      help_text: s_("ProjectSettings|Merge requests can't be merged if the latest pipeline did not succeed or is still running.")
+  .gl-pl-6
+    = form.gitlab_ui_checkbox_component :allow_merge_on_skipped_pipeline,
+      s_('ProjectSettings|Skipped pipelines are considered successful'),
+      help_text: s_('ProjectSettings|Introduces the risk of merging changes that do not pass the pipeline.'),
+      checkbox_options: { class: 'gl-pl-6' }
+  = form.gitlab_ui_checkbox_component :only_allow_merge_if_all_discussions_are_resolved,
+    s_('ProjectSettings|All threads must be resolved'),
+    checkbox_options: { data: { qa_selector: 'allow_merge_if_all_discussions_are_resolved_checkbox' } }
   = render_if_exists 'projects/merge_request_merge_checks_jira_enforcement', form: form, project: @project
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 250f7e94e84..cb660750632 100644
--- a/app/views/projects/_merge_request_merge_method_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_method_settings.html.haml
@@ -4,7 +4,7 @@
   %b= s_('ProjectSettings|Merge method')
   %p.text-secondary
     = s_('ProjectSettings|Determine what happens to the commit history when you merge a merge request.')
-    = link_to s_('ProjectSettings|Learn about commit history.'), help_page_path('user/project/merge_requests/commits.md'), target: '_blank', rel: 'noopener noreferrer'
+    = link_to s_('ProjectSettings|How do they differ?'), help_page_path('user/project/merge_requests/methods/index.md'), target: '_blank', rel: 'noopener noreferrer'
   .form-check.mb-2
     = form.radio_button :merge_method, :merge, class: "js-merge-method-radio form-check-input"
     = label_tag :project_merge_method_merge, class: 'form-check-label' do
diff --git a/app/views/projects/_merge_request_merge_options_settings.html.haml b/app/views/projects/_merge_request_merge_options_settings.html.haml
index 20f3933d0a8..e91c001ea3d 100644
--- a/app/views/projects/_merge_request_merge_options_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_options_settings.html.haml
@@ -5,17 +5,10 @@
   %p.text-secondary= s_('ProjectSettings|Additional settings that influence how and when merges are done.')
   = render_if_exists 'projects/merge_pipelines_settings', form: form
   = render_if_exists 'projects/merge_trains_settings', form: form
-  .form-check.mb-2
-    = form.check_box :resolve_outdated_diff_discussions, class: 'form-check-input'
-    = form.label :resolve_outdated_diff_discussions, class: 'form-check-label' do
-      = s_('ProjectSettings|Automatically resolve merge request diff discussions when they become outdated')
-  .form-check.mb-2
-    = form.check_box :printing_merge_request_link_enabled, class: 'form-check-input'
-    = form.label :printing_merge_request_link_enabled, class: 'form-check-label' do
-      = s_('ProjectSettings|Show link to create or view a merge request when pushing from the command line')
-  .form-check.mb-2
-    = form.check_box :remove_source_branch_after_merge, class: 'form-check-input'
-    = form.label :remove_source_branch_after_merge, class: 'form-check-label' do
-      = s_('ProjectSettings|Enable "Delete source branch" option by default')
-      .descr.text-secondary
-        = s_('ProjectSettings|Existing merge requests and protected branches are not affected.')
+  = form.gitlab_ui_checkbox_component :resolve_outdated_diff_discussions,
+    s_('ProjectSettings|Automatically resolve merge request diff threads when they become outdated')
+  = form.gitlab_ui_checkbox_component :printing_merge_request_link_enabled,
+    s_('ProjectSettings|Show link to create or view a merge request when pushing from the command line')
+  = form.gitlab_ui_checkbox_component :remove_source_branch_after_merge,
+    s_('ProjectSettings|Enable "Delete source branch" option by default'),
+    help_text: s_('ProjectSettings|Existing merge requests and protected branches are not affected.')
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index e79825bdfc4..66fa1a69ef9 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -39,8 +39,8 @@
     = project_tip.html_safe
 = render Pajamas::AlertComponent.new(alert_class: "gl-mb-4 gl-display-none js-user-readme-repo",
   dismissible: false,
-  variant: :success) do
-  .gl-alert-body
+  variant: :success) do |c|
+  = c.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 }
 
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index 7f72438c3f9..bc1e62a8980 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -58,3 +58,6 @@
                     #{line}
 
           - current_line += line_count
+
+  - if blame_pagination
+    = paginate(blame_pagination, theme: "gitlab")
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 85b9a69ab4c..2c3aade1068 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -14,7 +14,7 @@
 #blob-content-holder.blob-content-holder
   - if @code_navigation_path
     #js-code-navigation{ data: { code_navigation_path: @code_navigation_path, blob_path: blob.path, definition_path_prefix: project_blob_path(@project, @ref) } }
-  - if Feature.enabled?(:refactor_blob_viewer, @project, default_enabled: :yaml) && !expanded
+  - if Feature.enabled?(:refactor_blob_viewer, @project) && !expanded
     -# Data info will be removed once we migrate this to use GraphQL
     -# Follow-up issue: https://gitlab.com/gitlab-org/gitlab/-/issues/330406
     #js-view-blob-app{ data: { blob_path: blob.path,
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
index e666bb237bd..7c2caf34fd1 100644
--- a/app/views/projects/blob/_breadcrumb.html.haml
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -2,7 +2,7 @@
 .nav-block
   .tree-ref-container
     .tree-ref-holder
-      = render 'shared/ref_switcher', destination: 'blob', path: @path
+      = render 'shared/ref_switcher', destination: 'blob'
 
     %ul.breadcrumb.repo-breadcrumb
       %li.breadcrumb-item
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index c9303e19d5d..09a275c24a1 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -40,6 +40,8 @@
             Soft wrap
 
   .file-editor.code
+    - if Feature.enabled?(:source_editor_toolbar, current_user)
+      #editor-toolbar
     .js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }<
       %pre.editor-loading-content= params[:content] || local_assigns[:blob_data]
     - if local_assigns[:path]
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index aefa4a41ab5..f80601ef221 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -6,12 +6,13 @@
 - if @conflict
   = render Pajamas::AlertComponent.new(alert_class: 'gl-mb-5 gl-mt-5',
     variant: :danger,
-    dismissible: false) do
+    dismissible: false) do |c|
     - blob_url = project_blob_path(@project, @id)
     - external_link_icon = content_tag 'span', { aria: { label: _('Opens new window') }} do
       - sprite_icon('external-link', css_class: 'gl-icon').html_safe
     - blob_link_start = '<a href="%{url}" class="gl-link" target="_blank" rel="noopener noreferrer">'.html_safe % { url: blob_url }
-    = _('Someone edited the file the same time you did. Please check out %{link_start}the file %{icon}%{link_end} and make sure your changes will not unintentionally remove theirs.').html_safe % { link_start: blob_link_start, link_end: '</a>'.html_safe , icon: external_link_icon }
+    = c.body do
+      = _('Someone edited the file the same time you did. Please check out %{link_start}the file %{icon}%{link_end} and make sure your changes will not unintentionally remove theirs.').html_safe % { link_start: blob_link_start, link_end: '</a>'.html_safe , icon: external_link_icon }
 
 
 %h3.page-title.blob-edit-page-title
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 85a0346e691..295b2de9bd2 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -39,7 +39,7 @@
   %ul.content-list.all-branches
     - @branches.each do |branch|
       = render "projects/branches/branch", branch: branch, merged: @merged_branch_names.include?(branch.name), commit_status: @branch_pipeline_statuses[branch.name], show_commit_status: @branch_pipeline_statuses.any?
-  - if Feature.enabled?(:branch_list_keyset_pagination, @project, default_enabled: :yaml)
+  - if Feature.enabled?(:branch_list_keyset_pagination, @project)
     = render('kaminari/gitlab/without_count', previous_path: @prev_path, next_path: @next_path)
   - else
     = paginate @branches, theme: 'gitlab'
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 07bae7819a4..c06f60bd05d 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -2,8 +2,8 @@
 - default_ref = params[:ref] || @project.default_branch
 
 - if @error
-  = render Pajamas::AlertComponent.new(variant: :danger) do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :danger) do |c|
+    = c.body do
       = @error
 %h3.page-title
   = _('New Branch')
diff --git a/app/views/projects/buttons/_clone.html.haml b/app/views/projects/buttons/_clone.html.haml
index 74d10f11898..5fd1c5cd403 100644
--- a/app/views/projects/buttons/_clone.html.haml
+++ b/app/views/projects/buttons/_clone.html.haml
@@ -30,13 +30,23 @@
       %label.label-bold{ class: 'gl-px-4!' }
         = _('Open in your IDE')
       - if ssh_enabled?
-        %a.dropdown-item.open-with-link{ href: 'vscode://vscode.git/clone?url=' + CGI.escape(project.ssh_url_to_repo) }
+        - escaped_ssh_url_to_repo = CGI.escape(project.ssh_url_to_repo)
+        %a.dropdown-item.open-with-link{ href: 'vscode://vscode.git/clone?url=' + escaped_ssh_url_to_repo }
           .gl-new-dropdown-item-text-wrapper
             = _('Visual Studio Code (SSH)')
       - if http_enabled?
-        %a.dropdown-item.open-with-link{ href: 'vscode://vscode.git/clone?url=' + CGI.escape(project.http_url_to_repo) }
+        - escaped_http_url_to_repo = CGI.escape(project.http_url_to_repo)
+        %a.dropdown-item.open-with-link{ href: 'vscode://vscode.git/clone?url=' + escaped_http_url_to_repo }
           .gl-new-dropdown-item-text-wrapper
             = _('Visual Studio Code (HTTPS)')
+      - if ssh_enabled?
+        %a.dropdown-item.open-with-link{ href: 'jetbrains://idea/checkout/git?idea.required.plugins.id=Git4Idea&checkout.repo=' + escaped_ssh_url_to_repo }
+          .gl-new-dropdown-item-text-wrapper
+            = _('IntelliJ IDEA (SSH)')
+      - if http_enabled?
+        %a.dropdown-item.open-with-link{ href: 'jetbrains://idea/checkout/git?idea.required.plugins.id=Git4Idea&checkout.repo=' + escaped_http_url_to_repo }
+          .gl-new-dropdown-item-text-wrapper
+            = _('IntelliJ IDEA (HTTPS)')
       - if show_xcode_link?(@project)
         %a.dropdown-item.open-with-link{ href: xcode_uri_to_repo(@project) }
           .gl-new-dropdown-item-text-wrapper
diff --git a/app/views/projects/ci/pipeline_editor/show.html.haml b/app/views/projects/ci/pipeline_editor/show.html.haml
index c4757ea9c26..18eac48d42a 100644
--- a/app/views/projects/ci/pipeline_editor/show.html.haml
+++ b/app/views/projects/ci/pipeline_editor/show.html.haml
@@ -1,5 +1,6 @@
 - @force_fluid_layout = true
 - add_page_specific_style 'page_bundles/pipelines'
+- add_page_specific_style 'page_bundles/pipeline_editor'
 
 - page_title s_('Pipelines|Pipeline Editor')
 - content_for :prefetch_asset_tags do
diff --git a/app/views/projects/ci/secure_files/show.html.haml b/app/views/projects/ci/secure_files/show.html.haml
index db0734be6bd..1a87ccd753c 100644
--- a/app/views/projects/ci/secure_files/show.html.haml
+++ b/app/views/projects/ci/secure_files/show.html.haml
@@ -1,5 +1,3 @@
-- @content_class = "limit-container-width"
-
 - page_title s_('Secure Files')
 
-#js-ci-secure-files{ data: { project_id: @project.id } }
+#js-ci-secure-files{ data: { project_id: @project.id, admin: can?(current_user, :admin_secure_files, @project).to_s, file_size_limit: Ci::SecureFile::FILE_SIZE_LIMIT.to_mb } }
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 82d3bfbcfe6..c6fb3bcd559 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -14,7 +14,7 @@
 
   %li.commits-row{ data: { day: day } }
     %ul.content-list.commit-list.flex-list
-      - if Feature.enabled?(:cached_commits, project, default_enabled: :yaml)
+      - 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) }
       - else
         = render partial: 'projects/commits/commit', collection: daily_commits, locals: { project: project, ref: ref, merge_request: merge_request }
@@ -28,7 +28,7 @@
 
   %li.commits-row
     %ul.content-list.commit-list.flex-list
-      - if Feature.enabled?(:cached_commits, project, default_enabled: :yaml)
+      - 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) }
       - else
         = render partial: 'projects/commits/commit', collection: context_commits, locals: { project: project, ref: ref, merge_request: merge_request }
@@ -36,8 +36,8 @@
 - if hidden > 0
   %li
     = render Pajamas::AlertComponent.new(variant: :warning,
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         = n_('%s additional commit has been omitted to prevent performance issues.', '%s additional commits have been omitted to prevent performance issues.', hidden) % number_with_delimiter(hidden)
 
 - if can_update_merge_request && context_commits&.empty?
diff --git a/app/views/projects/default_branch/_show.html.haml b/app/views/projects/default_branch/_show.html.haml
index f9d3af7aa36..2d3d36a9157 100644
--- a/app/views/projects/default_branch/_show.html.haml
+++ b/app/views/projects/default_branch/_show.html.haml
@@ -9,7 +9,7 @@
       = _('Set the default branch for this project. All merge requests and commits are made against this branch unless you specify a different one.')
 
   .settings-content
-    = form_for @project, remote: true, html: { multipart: true, anchor: 'default-branch-settings' }, authenticity_token: true do |f|
+    = gitlab_ui_form_for @project, remote: true, html: { multipart: true, anchor: 'default-branch-settings' }, authenticity_token: true do |f|
       %fieldset
         - if @project.empty_repo?
           .text-secondary
@@ -20,12 +20,10 @@
             = f.select(:default_branch, @project.repository.branch_names, {}, {class: 'select2 select-wide', data: { qa_selector: 'default_branch_dropdown' }})
 
         .form-group
-          .form-check
-            = f.check_box :autoclose_referenced_issues, class: 'form-check-input'
-            = f.label :autoclose_referenced_issues, class: 'form-check-label' do
-              %strong= _("Auto-close referenced issues on default branch")
-            .form-text.text-muted
-              = _("When merge requests and commits in the default branch close, any issues they reference also close.")
-              = link_to sprite_icon('question-o'), help_page_path('user/project/issues/managing_issues.md', anchor: 'closing-issues-automatically'), target: '_blank', rel: 'noopener noreferrer'
+          - help_text = _("When merge requests and commits in the default branch close, any issues they reference also close.")
+          - help_icon = link_to sprite_icon('question-o'), help_page_path('user/project/issues/managing_issues.md', anchor: 'closing-issues-automatically'), target: '_blank', rel: 'noopener noreferrer'
+          = f.gitlab_ui_checkbox_component :autoclose_referenced_issues,
+            _("Auto-close referenced issues on default branch"),
+            help_text: (help_text + "&nbsp;" + help_icon).html_safe
 
       = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml
index 504bbf3a304..e92297a5a6a 100644
--- a/app/views/projects/deployments/_deployment.html.haml
+++ b/app/views/projects/deployments/_deployment.html.haml
@@ -46,3 +46,4 @@
     .btn-group.table-action-buttons
       = render 'projects/deployments/actions', deployment: deployment
       = render 'projects/deployments/rollback', deployment: deployment
+      = render_if_exists 'projects/deployments/approvals', deployment: deployment
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 6f4ffecd5e0..d596199f816 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -34,8 +34,7 @@
   - if load_diff_files_async
     - url = url_for(safe_params.merge(action: 'diff_files'))
     .js-diffs-batch{ data: { diff_files_path: url } }
-      .text-center
-        %span.gl-spinner.gl-spinner-md
+      = gl_loading_icon( size: "md", css_class: "gl-mt-4" )
   - else
     = render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment, diff_page_context: diff_page_context }
 
diff --git a/app/views/projects/diffs/_text_file.html.haml b/app/views/projects/diffs/_text_file.html.haml
index 2cd215c5518..9b64afa8c60 100644
--- a/app/views/projects/diffs/_text_file.html.haml
+++ b/app/views/projects/diffs/_text_file.html.haml
@@ -4,7 +4,7 @@
     %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, default_enabled: :yaml)
+  - 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 --git a/app/views/projects/feature_flags/edit.html.haml b/app/views/projects/feature_flags/edit.html.haml
index ac8c0575077..121dcd31a13 100644
--- a/app/views/projects/feature_flags/edit.html.haml
+++ b/app/views/projects/feature_flags/edit.html.haml
@@ -2,6 +2,6 @@
 
 - add_to_breadcrumbs s_('FeatureFlags|Feature Flags'), project_feature_flags_path(@project)
 - breadcrumb_title @feature_flag.name
-- page_title s_('FeatureFlags|Edit Feature Flag')
+- page_title s_('FeatureFlags|Edit Feature Flag'), @feature_flag.name
 
 #js-edit-feature-flag{ data: edit_feature_flag_data }
diff --git a/app/views/projects/forks/error.html.haml b/app/views/projects/forks/error.html.haml
index 9b64f158a1b..13fd4cee0cc 100644
--- a/app/views/projects/forks/error.html.haml
+++ b/app/views/projects/forks/error.html.haml
@@ -3,8 +3,8 @@
   = render Pajamas::AlertComponent.new(title: _('Fork Error!'),
     variant: :danger,
     alert_class: 'gl-mt-5',
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       %p
         = _("You tried to fork %{link_to_the_project} but it failed for the following reason:").html_safe % { link_to_the_project: link_to_project(@project) }
 
@@ -17,5 +17,5 @@
           - else
             = error
 
-      .gl-alert-actions
-        = link_to _('Try to fork again'), new_project_fork_path(@project), title: _("Fork"), class: "btn gl-alert-action btn-info btn-md gl-button"
+    = c.actions do
+      = link_to _('Try to fork again'), new_project_fork_path(@project), title: _("Fork"), class: "btn gl-alert-action btn-info btn-md gl-button"
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
index 9e3d9b4258a..a3569d41714 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -39,10 +39,9 @@
     .label-container
       - if generic_commit_status.tags.any?
         - generic_commit_status.tags.each do |tag|
-          %span.badge.badge-primary
-            = tag
+          = gl_badge_tag tag, variant: :info, size: :sm
       - if retried
-        %span.badge.badge-warning retried
+        = gl_badge_tag retried, variant: :warning, size: :sm
 
   - if pipeline_link
     %td
diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml
index 40280e0787f..ca0307aed60 100644
--- a/app/views/projects/graphs/charts.html.haml
+++ b/app/views/projects/graphs/charts.html.haml
@@ -46,7 +46,7 @@
     .col-md-6
       .tree-ref-container
         .tree-ref-holder
-          = render 'shared/ref_switcher', destination: 'graphs_commits'
+          = render 'shared/ref_switcher', destination: 'graphs_commits', path: @path
         %ul.breadcrumb.repo-breadcrumb
           = commits_breadcrumbs
 
diff --git a/app/views/projects/issues/_alert_moved_from_service_desk.html.haml b/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
index f28b951ad62..291edf014c3 100644
--- a/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
+++ b/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
@@ -3,6 +3,6 @@
 - service_desk_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: service_desk_link_url }
 
 = render Pajamas::AlertComponent.new(variant: :warning,
-  alert_class: 'hide js-alert-moved-from-service-desk-warning gl-mt-5') do
-  .gl-alert-body.gl-mr-3
+  alert_class: 'hide js-alert-moved-from-service-desk-warning gl-mt-5') do |c|
+  = c.body do
     = s_('This project does not have %{service_desk_link_start}Service Desk%{service_desk_link_end} enabled, so the user who created the issue will no longer receive email notifications about new activity.').html_safe % { service_desk_link_start: service_desk_link_start, service_desk_link_end: '</a>'.html_safe }
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index f1c19756474..a904b53515c 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -1,4 +1,4 @@
-- add_page_startup_api_call Feature.enabled?(:paginated_issue_discussions, @project, default_enabled: :yaml) ? discussions_path(@issue, per_page: 20) : discussions_path(@issue)
+- add_page_startup_api_call Feature.enabled?(:paginated_issue_discussions, @project) ? discussions_path(@issue, per_page: 20) : discussions_path(@issue)
 
 - @gfm_form = true
 
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index d74b6c0639c..fe2be0f73c9 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -13,7 +13,7 @@
   issues_path: project_issues_path(@project),
   project_path: @project.full_path } }
 
-- if Feature.enabled?(:vue_issues_list, @project&.group, default_enabled: :yaml)
+- if Feature.enabled?(:vue_issues_list, @project&.group)
   .js-issues-list{ data: project_issues_list_data(@project, current_user) }
   - if @can_bulk_update
     = render 'shared/issuable/bulk_update_sidebar', type: :issues
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 6c6f98e0b20..3572d1d6556 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -2,6 +2,7 @@
 - add_to_breadcrumbs _("Issues"), project_issues_path(@project)
 - breadcrumb_title @issue.to_reference
 - page_title "#{@issue.title} (#{@issue.to_reference})", _("Issues")
+- add_page_specific_style 'page_bundles/issues_show'
 
 = render 'projects/issuable/show', issuable: @issue, api_awards_path: award_emoji_issue_api_path(@issue)
 = render 'projects/invite_members_modal', project: @project
diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml
index 9a2a1e57165..e725e8e6889 100644
--- a/app/views/projects/jobs/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -4,7 +4,7 @@
 - add_page_specific_style 'page_bundles/ci_status'
 - admin = local_assigns.fetch(:admin, false)
 
-- if Feature.enabled?(:jobs_table_vue, @project, default_enabled: :yaml)
+- if Feature.enabled?(:jobs_table_vue, @project)
   #js-jobs-table{ data: { admin: admin, full_path: @project.full_path, job_statuses: job_statuses.to_json, pipeline_editor_path: project_ci_pipeline_editor_path(@project), empty_state_svg_path: image_path('jobs-empty-state.svg') } }
 - else
   .top-area
diff --git a/app/views/projects/mattermosts/_no_teams.html.haml b/app/views/projects/mattermosts/_no_teams.html.haml
index 3d901c6f59b..1f008496a34 100644
--- a/app/views/projects/mattermosts/_no_teams.html.haml
+++ b/app/views/projects/mattermosts/_no_teams.html.haml
@@ -1,9 +1,3 @@
-- if @teams_error_message
-  = content_for :flash_message do
-    = render Pajamas::AlertComponent.new(variant: :danger) do
-      .gl-alert-body
-        = @teams_error_message
-
 %p
   You aren’t a member of any team on the Mattermost instance at
   %strong= Gitlab.config.mattermost.host
diff --git a/app/views/projects/mattermosts/new.html.haml b/app/views/projects/mattermosts/new.html.haml
index 9e293d07cb7..8254198bd41 100644
--- a/app/views/projects/mattermosts/new.html.haml
+++ b/app/views/projects/mattermosts/new.html.haml
@@ -1,10 +1,20 @@
-- @body_class = 'card-content'
+- add_to_breadcrumbs _('Integrations'), scoped_integrations_path(project: @project, group: @group)
+- add_to_breadcrumbs @integration.title, scoped_edit_integration_path(@integration, project: @project, group: @group)
+- breadcrumb_title _('New')
+- page_title @integration.title, _('Integrations')
+- @content_class = 'limit-container-width' unless fluid_layout
 
-.service-installation
-  .inline.float-right
+- if @teams_error_message
+  = render Pajamas::AlertComponent.new(variant: :danger) do |c|
+    = c.body do
+      = @teams_error_message
+
+%h3
+  Install Mattermost Command
+  .gl-float-right
     = custom_icon('mattermost_logo', size: 48)
-  %h3 Install Mattermost Command
-  - if @teams.empty?
-    = render 'no_teams'
-  - else
-    = render 'team_selection'
+
+- if @teams.empty?
+  = render 'no_teams'
+- else
+  = render 'team_selection'
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 f6afac493d5..282faf7714e 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,36 +1,46 @@
 - display_issuable_type = issuable_display_type(@merge_request)
-- button_class = "btn gl-button #{!@merge_request.closed? && 'js-draft-toggle-button'}"
-- toggle_class = "btn gl-button dropdown-toggle"
 
-.float-left.btn-group.gl-ml-3.gl-display-none.gl-md-display-flex
-  = link_to @merge_request.closed? ? reopen_issuable_path(@merge_request) : toggle_draft_merge_request_path(@merge_request), method: :put, class: "#{button_class} btn-confirm-secondary" do
-    - if @merge_request.closed?
-      = _('Reopen')
-      = display_issuable_type
-    - else
-      = @merge_request.work_in_progress? ? _('Mark as ready') : _('Mark as draft')
+.float-left.btn-group.gl-md-ml-3.gl-display-flex.dropdown.gl-new-dropdown.gl-md-w-auto.gl-w-full
+  = button_tag type: 'button', 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!", data: { 'toggle' => 'dropdown' } do
+    %span.gl-sr-only= _('Toggle dropdown')
+    = 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-new-dropdown-button-text= _('Merge request actions')
+    = sprite_icon "chevron-down", size: 16, css_class: "dropdown-icon gl-icon"
+  .dropdown-menu.dropdown-menu-right
+    .gl-new-dropdown-inner
+      .gl-new-dropdown-contents
+        %ul
+          - if can?(current_user, :update_merge_request, @merge_request)
+            %li.gl-new-dropdown-item{ class: "gl-md-display-none!" }
+              = link_to edit_project_merge_request_path(@project, @merge_request), class: 'dropdown-item' do
+                .gl-new-dropdown-item-text-wrapper
+                  = _('Edit')
+          - if @merge_request.open?
+            %li.gl-new-dropdown-item
+              = link_to toggle_draft_merge_request_path(@merge_request), method: :put, class: 'dropdown-item js-draft-toggle-button' do
+                .gl-new-dropdown-item-text-wrapper
+                  = @merge_request.work_in_progress? ? _('Mark as ready') : _('Mark as draft')
+            %li.gl-new-dropdown-item.js-close-item
+              = link_to close_issuable_path(@merge_request), method: :put, class: 'dropdown-item' do
+                .gl-new-dropdown-item-text-wrapper
+                  = _('Close')
+                  = display_issuable_type
+          - elsif !@merge_request.source_project_missing?
+            %li.gl-new-dropdown-item
+              = link_to reopen_issuable_path(@merge_request), method: :put, class: 'dropdown-item' do
+                .gl-new-dropdown-item-text-wrapper
+                  = _('Reopen')
+                  = display_issuable_type
 
-  - if !@merge_request.closed? || !issuable_author_is_current_user(@merge_request)
-    = button_tag type: 'button', class: "#{toggle_class} btn-confirm-secondary btn-icon", data: { 'toggle' => 'dropdown' } do
-      %span.gl-sr-only= _('Toggle dropdown')
-      = sprite_icon "chevron-down", size: 12, css_class: "gl-button-icon"
-
-    %ul.dropdown-menu.dropdown-menu-right
-      - if @merge_request.open?
-        %li
-          = link_to close_issuable_path(@merge_request), method: :put do
-            .description
-              %strong.title
-                = _('Close')
-                = display_issuable_type
-
-      - unless issuable_author_is_current_user(@merge_request)
-        - unless @merge_request.closed?
-          %li.divider.droplab-item-ignore
-
-        %li
-          %a{ href: new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)) }
-            .description
-              %strong.title= _('Report abuse')
-              %p.text.gl-mb-0
-                = _('Report %{display_issuable_type} that are abusive, inappropriate or spam.') % { display_issuable_type: display_issuable_type.pluralize }
+          - if current_user && moved_mr_sidebar_enabled?
+            %li.gl-new-dropdown-divider
+              %hr.dropdown-divider
+            %li.gl-new-dropdown-item.js-sidebar-subscriptions-entry-point
+          - unless issuable_author_is_current_user(@merge_request)
+            %li.gl-new-dropdown-item
+              = link_to new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'dropdown-item' do
+                .gl-new-dropdown-item-text-wrapper
+                  = _('Report abuse')
+          - if moved_mr_sidebar_enabled?
+            %li.gl-new-dropdown-item#js-lock-entry-point
diff --git a/app/views/projects/merge_requests/_code_dropdown.html.haml b/app/views/projects/merge_requests/_code_dropdown.html.haml
new file mode 100644
index 00000000000..0bd28e315d9
--- /dev/null
+++ b/app/views/projects/merge_requests/_code_dropdown.html.haml
@@ -0,0 +1,39 @@
+.float-left.gl-md-ml-3.dropdown.gl-new-dropdown{ class: "gl-display-none! gl-md-display-flex!" }
+  #js-check-out-modal{ data: how_merge_modal_data(@merge_request) }
+  = button_tag type: 'button', class: "btn dropdown-toggle btn-confirm gl-button gl-dropdown-toggle", data: { toggle: 'dropdown', qa_selector: 'mr_code_dropdown' } do
+    %span.gl-new-dropdown-button-text= _('Code')
+    = sprite_icon "chevron-down", size: 16, css_class: "dropdown-icon gl-icon gl-ml-2 gl-mr-0!"
+  .dropdown-menu.dropdown-menu-right
+    .gl-new-dropdown-inner
+      .gl-new-dropdown-contents
+        %ul
+          %li.gl-new-dropdown-section-header
+            %header.dropdown-header
+              = _('Review changes')
+          %li.gl-new-dropdown-item
+            %button.dropdown-item.js-check-out-modal-trigger{ type: 'button' }
+              .gl-new-dropdown-item-text-wrapper
+                = _('Check out branch')
+          - if current_user
+            %li.gl-new-dropdown-item
+              = link_to ide_merge_request_path(@merge_request), class: 'dropdown-item', data: { qa_selector: 'open_in_web_ide_button' } do
+                .gl-new-dropdown-item-text-wrapper
+                  = _('Open in Web IDE')
+          - if Gitlab::CurrentSettings.gitpod_enabled && current_user&.gitpod_enabled
+            %li.gl-new-dropdown-item
+              = link_to "#{Gitlab::CurrentSettings.gitpod_url}##{merge_request_url(@merge_request)}", class: 'dropdown-item' do
+                .gl-new-dropdown-item-text-wrapper
+                  = _('Open in Gitpod')
+          %li.gl-new-dropdown-divider
+            %hr.dropdown-divider
+          %li.gl-new-dropdown-section-header
+            %header.dropdown-header
+              = _('Download')
+          %li.gl-new-dropdown-item
+            = link_to merge_request_path(@merge_request, format: :patch), class: 'dropdown-item', download: '', data: { qa_selector: 'download_email_patches_menu_item' } do
+              .gl-new-dropdown-item-text-wrapper
+                = _('Email patches')
+          %li.gl-new-dropdown-item
+            = link_to merge_request_path(@merge_request, format: :diff), class: 'dropdown-item', data: { qa_selector: 'download_plain_diff_menu_item' } do
+              .gl-new-dropdown-item-text-wrapper
+                = _('Plain diff')
diff --git a/app/views/projects/merge_requests/_mr_box.html.haml b/app/views/projects/merge_requests/_mr_box.html.haml
index 916b841e350..e16631b4943 100644
--- a/app/views/projects/merge_requests/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/_mr_box.html.haml
@@ -1,3 +1,7 @@
 .detail-page-description.py-2
-  %h2.title.mb-0{ data: { qa_selector: 'title_content' } }
-    = markdown_field(@merge_request, :title)
+  - if Feature.enabled?(:updated_mr_header, @project)
+    = render 'shared/issuable/status_box', issuable: @merge_request
+    = merge_request_header(@project, @merge_request)
+  - else
+    %h2.title.mb-0{ data: { qa_selector: 'title_content' } }
+      = markdown_field(@merge_request, :title)
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 49b7320d630..638c520e210 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -2,51 +2,40 @@
 - can_update_merge_request = can?(current_user, :update_merge_request, @merge_request)
 - can_reopen_merge_request = can?(current_user, :reopen_merge_request, @merge_request)
 - are_close_and_open_buttons_hidden = merge_request_button_hidden?(@merge_request, true) && merge_request_button_hidden?(@merge_request, false)
-- cache_key = [@project, @merge_request, can_update_merge_request, can_reopen_merge_request, are_close_and_open_buttons_hidden, current_user&.preferred_language]
+- updated_mr_header_enabled = Feature.enabled?(:updated_mr_header, @project)
+- cache_key = [@project, @merge_request, can_update_merge_request, can_reopen_merge_request, are_close_and_open_buttons_hidden, current_user&.preferred_language, updated_mr_header_enabled]
 
 = cache(cache_key, expires_in: 1.day) do
   - if @merge_request.closed_or_merged_without_fork?
     = render Pajamas::AlertComponent.new(alert_class: 'gl-mb-5',
       variant: :danger,
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         = _('The source project of this merge request has been removed.')
 
-  .detail-page-header.border-bottom-0.pt-0.pb-0
+  .detail-page-header.border-bottom-0.pt-0.pb-0{ class: "#{'gl-display-block gl-md-display-flex!' if updated_mr_header_enabled}" }
     .detail-page-header-body
-      = render "shared/issuable/status_box", issuable: @merge_request
+      - unless updated_mr_header_enabled
+        = render "shared/issuable/status_box", issuable: @merge_request
+      .issuable-meta{ class: "#{'gl-display-flex' if updated_mr_header_enabled}" }
+        - if updated_mr_header_enabled
+          #js-issuable-header-warnings
+          %h2.title.gl-my-0.gl-display-inline-block{ data: { qa_selector: 'title_content' } }
+            = markdown_field(@merge_request, :title)
+        - else
+          #js-issuable-header-warnings
+          = issuable_meta(@merge_request, @project)
 
-      .issuable-meta
-        #js-issuable-header-warnings
-        = issuable_meta(@merge_request, @project)
+      %div
+        %button.gl-button.btn.btn-default.btn-icon.float-right.gl-display-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ type: 'button', class: "#{'gl-md-display-none!' if moved_mr_sidebar_enabled? } #{'gl-sm-display-none!' unless moved_mr_sidebar_enabled?}" }
+          = sprite_icon('chevron-double-lg-left')
 
-      %a.gl-button.btn.btn-default.btn-icon.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
-        = sprite_icon('chevron-double-lg-left')
+    .detail-page-header-actions.js-issuable-actions{ class: "#{'gl-align-self-start is-merge-request' if updated_mr_header_enabled}" }
+      - if can_update_merge_request
+        = link_to _('Edit'), edit_project_merge_request_path(@project, @merge_request), class: "gl-display-none gl-md-display-block btn gl-button btn-default btn-grouped js-issuable-edit", data: { qa_selector: "edit_button" }
 
-    .detail-page-header-actions.js-issuable-actions
-      .clearfix.dropdown
-        %button.gl-button.btn.btn-default.float-left.gl-md-display-none.gl-w-full{ type: "button", data: { toggle: "dropdown" } }
-          Options
-          = sprite_icon('chevron-down', css_class: 'gl-text-gray-500')
-        .dropdown-menu.dropdown-menu-right
-          %ul
-            - if can_update_merge_request
-              %li= link_to _('Edit'), edit_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
-              - if @merge_request.opened?
-                %li
-                  = link_to @merge_request.work_in_progress? ? _('Mark as ready') : _('Mark as draft'), toggle_draft_merge_request_path(@merge_request), method: :put, class: "js-draft-toggle-button"
-              %li{ class: [merge_request_button_visibility(@merge_request, true), 'js-close-item'] }
-                = link_to _('Close'), merge_request_path(@merge_request, merge_request: { state_event: :close }), method: :put, title: 'Close merge request'
-            - if can_reopen_merge_request
-              %li{ class: merge_request_button_visibility(@merge_request, false) }
-                = link_to _('Reopen'), merge_request_path(@merge_request, merge_request: { state_event: :reopen }), method: :put, title: 'Reopen merge request'
-            - unless @merge_request.merged? || current_user == @merge_request.author
-              %li= link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request))
+      - if @merge_request.source_project
+        = render 'projects/merge_requests/code_dropdown'
 
-        - if can_update_merge_request
-          = link_to _('Edit'), edit_project_merge_request_path(@project, @merge_request), class: "gl-display-none gl-md-display-block btn gl-button btn-default btn-grouped js-issuable-edit", data: { qa_selector: "edit_button" }
-
-        - if can_update_merge_request && !are_close_and_open_buttons_hidden
-          = render 'projects/merge_requests/close_reopen_draft_report_toggle'
-        - elsif !@merge_request.merged?
-          = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-md-display-block gl-button btn btn-default gl-float-right gl-ml-3', title: _('Report abuse')
+      - if current_user
+        = render 'projects/merge_requests/close_reopen_draft_report_toggle'
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 e2ac8ef5abc..811b45ef8af 100644
--- a/app/views/projects/merge_requests/creations/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml
@@ -22,7 +22,7 @@
                   selected: f.object.source_project_id
           .merge-request-select.dropdown
             = f.hidden_field :source_branch
-            = dropdown_toggle f.object.source_branch.presence || _("Select source branch"), { toggle: "dropdown", 'field-name': "#{f.object_name}[source_branch]", 'refs-url': refs_project_path(@source_project), selected: f.object.source_branch }, { toggle_class: "js-compare-dropdown js-source-branch monospace" }
+            = dropdown_toggle f.object.source_branch.presence || _("Select source branch"), { toggle: "dropdown", 'field-name': "#{f.object_name}[source_branch]", 'refs-url': refs_project_path(@source_project), selected: f.object.source_branch, qa_selector: "source_branch_dropdown" }, { toggle_class: "js-compare-dropdown js-source-branch monospace" }
             .dropdown-menu.dropdown-menu-selectable.js-source-branch-dropdown.git-revision-dropdown
               = dropdown_title(_("Select source branch"))
               = dropdown_filter(_("Search branches"))
@@ -62,4 +62,4 @@
 
   - if @merge_request.errors.any?
     = form_errors(@merge_request)
-  = f.submit 'Compare branches and continue', class: "gl-button btn btn-confirm mr-compare-btn"
+  = f.submit 'Compare branches and continue', class: "gl-button btn btn-confirm mr-compare-btn", data: { qa_selector: "compare_branches_button" }
diff --git a/app/views/projects/merge_requests/invalid.html.haml b/app/views/projects/merge_requests/invalid.html.haml
index ce5a042fbf8..4596fcd280d 100644
--- a/app/views/projects/merge_requests/invalid.html.haml
+++ b/app/views/projects/merge_requests/invalid.html.haml
@@ -10,8 +10,8 @@
   = render "projects/merge_requests/mr_box"
 
   = render Pajamas::AlertComponent.new(variant: :danger,
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       - if @merge_request.for_fork? && !@merge_request.source_project
         = err_fork_project_removed
       - elsif !@merge_request.source_branch_exists?
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 008f2588dbd..13e5451df98 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -1,5 +1,6 @@
 - @gfm_form = true
-- @content_class = "merge-request-container#{' limit-container-width' unless fluid_layout}"
+- unless moved_mr_sidebar_enabled?
+  - @content_class = "merge-request-container#{' limit-container-width' unless fluid_layout}"
 - add_to_breadcrumbs _("Merge requests"), project_merge_requests_path(@project)
 - breadcrumb_title @merge_request.to_reference
 - page_title "#{@merge_request.title} (#{@merge_request.to_reference})", _("Merge requests")
@@ -41,14 +42,14 @@
               = _("Changes")
               = gl_badge_tag @diffs_count, { size: :sm }
         .d-flex.flex-wrap.align-items-center.justify-content-lg-end
-          #js-vue-discussion-counter
+          #js-vue-discussion-counter{ data: { blocks_merge: @project.only_allow_merge_if_all_discussions_are_resolved?.to_s } }
 
     .tab-content#diff-notes-app
       #js-diff-file-finder
         #js-code-navigation
       = render "projects/merge_requests/tabs/pane", id: "notes", class: "notes voting_notes" do
-        .row
-          %section.col-md-12
+        %div{ class: "#{'merge-request-overview' if moved_mr_sidebar_enabled?}" }
+          %section
             .issuable-discussion.js-vue-notes-event
               - if @merge_request.description.present?
                 .detail-page-description
@@ -70,6 +71,8 @@
                 help_page_path: suggest_changes_help_path,
                 current_user_data: @current_user_data,
                 is_locked: @merge_request.discussion_locked.to_s } }
+          - if moved_mr_sidebar_enabled?
+            = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, reviewers: @merge_request.reviewers, source_branch: @merge_request.source_branch
 
       = render "projects/merge_requests/tabs/pane", name: "commits", id: "commits", class: "commits" do
         -# This tab is always loaded via AJAX
@@ -83,7 +86,8 @@
       .loading.hide
         = gl_loading_icon(size: 'lg')
 
-= render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, reviewers: @merge_request.reviewers, source_branch: @merge_request.source_branch
+- unless moved_mr_sidebar_enabled?
+  = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, reviewers: @merge_request.reviewers, source_branch: @merge_request.source_branch
 
 - if @merge_request.can_be_reverted?(current_user)
   = render "projects/commit/change", type: 'revert', commit: @merge_request.merge_commit
@@ -92,7 +96,7 @@
 
 #js-review-bar
 
-- if Feature.enabled?(:mr_attention_requests, default_enabled: :yaml)
+- if current_user&.mr_attention_requests_enabled?
   #js-need-attention-sidebar-onboarding
 
 = render 'projects/invite_members_modal', project: @project
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index 154a92e6ec8..326a7c4027f 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -9,7 +9,7 @@
       = render 'shared/milestones/search_form'
       = render 'shared/milestones_sort_dropdown'
       - if can?(current_user, :admin_milestone, @project)
-        = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-confirm', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
+        = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-confirm gl-ml-3', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
           = _('New milestone')
 
   - if @milestones.blank?
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index 13aa8f56d20..4ec72176202 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -14,8 +14,8 @@
 - if can?(current_user, :read_issue, @project) && @milestone.total_issues_count == 0
   = render Pajamas::AlertComponent.new(dismissible: false,
     alert_data: { testid: 'no-issues-alert' },
-    alert_class: 'gl-mt-3 gl-mb-5') do
-    .gl-alert-body
+    alert_class: 'gl-mt-3 gl-mb-5') do |c|
+    = c.body do
       = _('Assign some issues to this milestone.')
 - else
   = render 'shared/milestones/milestone_complete_alert', milestone: @milestone do
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index bc8400a63f9..d689b54678e 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -37,8 +37,8 @@
           .panel-footer
             = f.submit _('Mirror repository'), class: 'gl-button btn btn-confirm js-mirror-submit qa-mirror-repository-button', name: :update_remote_mirror
     - else
-      = render Pajamas::AlertComponent.new(dismissible: false) do
-        .gl-alert-body
+      = render Pajamas::AlertComponent.new(dismissible: false) do |c|
+        = c.body do
           = _('Mirror settings are only available to GitLab administrators.')
 
     .panel.panel-default
diff --git a/app/views/projects/pages/_access.html.haml b/app/views/projects/pages/_access.html.haml
index 67a2eeb7e7b..c5efacb21af 100644
--- a/app/views/projects/pages/_access.html.haml
+++ b/app/views/projects/pages/_access.html.haml
@@ -15,7 +15,7 @@
           = external_link(domain.url, domain.url)
     - unless @project.public_pages?
       .card-footer.gl-alert-warning
-        - help_page = help_page_path('/user/project/pages/pages_access_control')
+        - help_page = help_page_path('user/project/pages/pages_access_control')
         - link_start = '<a href="%{url}" target="_blank" class="gl-alert-link" rel="noopener noreferrer">'.html_safe % { url: help_page }
         - link_end = '</a>'.html_safe
         = html_escape_once(s_('GitLabPages|Access Control is enabled for this Pages website; only authorized users will be able to access it. To make your website publicly available, navigate to your project\'s %{strong_start}Settings &gt; General &gt; Visibility%{strong_end} and select %{strong_start}Everyone%{strong_end} in pages section. Read the %{link_start}documentation%{link_end} for more information.')).html_safe % { link_start: link_start, link_end: link_end, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
diff --git a/app/views/projects/pages/_destroy.haml b/app/views/projects/pages/_destroy.haml
index 99efb0b98c6..993026d2884 100644
--- a/app/views/projects/pages/_destroy.haml
+++ b/app/views/projects/pages/_destroy.haml
@@ -8,7 +8,7 @@
         %p.gl-mb-0
           = s_('GitLabPages|Removing pages will prevent them from being exposed to the outside world.')
       .card-footer
-        = link_to s_('GitLabPages|Remove pages'), project_pages_path(@project), data: { confirm: s_('GitLabPages|Are you sure?')}, method: :delete, class: "btn gl-button btn-danger"
+        = link_to s_('GitLabPages|Remove pages'), project_pages_path(@project), data: { confirm: s_('GitLabPages|Are you sure?'), 'confirm-btn-variant': 'danger'}, method: :delete, class: "btn gl-button btn-danger", "aria-label": s_('GitLabPages|Remove pages')
   - else
     .nothing-here-block
       = s_('GitLabPages|Only project maintainers can remove pages')
diff --git a/app/views/projects/pages/_list.html.haml b/app/views/projects/pages/_list.html.haml
index 4e9c77564da..04178804de4 100644
--- a/app/views/projects/pages/_list.html.haml
+++ b/app/views/projects/pages/_list.html.haml
@@ -20,7 +20,7 @@
                   = gl_badge_tag s_('GitLabPages|Expired'), variant: :danger
           %div
             = link_to s_('GitLabPages|Edit'), project_pages_domain_path(@project, domain), class: "btn gl-button btn-sm btn-grouped btn-confirm btn-inverted"
-            = link_to s_('GitLabPages|Remove'), project_pages_domain_path(@project, domain), data: { confirm: s_('GitLabPages|Are you sure?')}, method: :delete, class: "btn gl-button btn-danger btn-sm btn-grouped"
+            = link_to s_('GitLabPages|Remove'), project_pages_domain_path(@project, domain), data: { confirm: s_('GitLabPages|Are you sure?'), 'confirm-btn-variant': 'danger'}, "aria-label": s_("GitLabPages|Remove domain"), method: :delete, class: "btn gl-button btn-danger btn-sm btn-grouped"
         - if domain.needs_verification?
           %li.list-group-item.bs-callout-warning
             - details_link_start = "<a href='#{project_pages_domain_path(@project, domain)}'>".html_safe
diff --git a/app/views/projects/pages_domains/_certificate.html.haml b/app/views/projects/pages_domains/_certificate.html.haml
index 861305dc93b..4ba3e084dc4 100644
--- a/app/views/projects/pages_domains/_certificate.html.haml
+++ b/app/views/projects/pages_domains/_certificate.html.haml
@@ -38,7 +38,8 @@
               = domain_presenter.pages_domain.subject || _('missing')
             = link_to _('Remove'),
               clean_certificate_project_pages_domain_path(@project, domain_presenter),
-              data: { confirm: _('Are you sure?') },
+              data: { confirm: _('Are you sure?'), 'confirm-btn-variant': 'danger' },
+              'aria-label': s_("GitLabPages|Remove certificate"),
               class: 'gl-button btn btn-danger btn-sm',
               method: :delete
   - else
diff --git a/app/views/projects/pages_domains/_form.html.haml b/app/views/projects/pages_domains/_form.html.haml
index d3e2854ff19..9d9603b0947 100644
--- a/app/views/projects/pages_domains/_form.html.haml
+++ b/app/views/projects/pages_domains/_form.html.haml
@@ -1,7 +1,8 @@
 - if domain_presenter.errors.any?
-  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do
-    - domain_presenter.errors.full_messages.each do |msg|
-      = msg
+  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do |c|
+    = c.body do
+      - domain_presenter.errors.full_messages.each do |msg|
+        = msg
 
 .form-group.border-section
   .row
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
index 88e6b98b115..6b26c9f3f00 100644
--- a/app/views/projects/pipelines/_with_tabs.html.haml
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -32,40 +32,45 @@
       #js-pipeline-jobs-vue{ data: { full_path: @project.full_path, pipeline_iid: @pipeline.iid } }
 
   - if @pipeline.failed_builds.present?
-    #js-tab-failures.build-failures.tab-pane.build-page
-      %table.table.responsive-table.ci-table.responsive-table-sm-rounded
-        %thead
-          %th.table-th-transparent
-          %th.table-th-transparent= _('Name')
-          %th.table-th-transparent= _('Stage')
-          %th.table-th-transparent= _('Failure')
+    #js-tab-failures.tab-pane
+      - if Feature.enabled?(:failed_jobs_tab_vue, @project)
+        #js-pipeline-failed-jobs-vue{ data: { full_path: @project.full_path, pipeline_iid: @pipeline.iid, failed_jobs_summary_data: prepare_failed_jobs_summary_data(@pipeline.failed_builds) } }
+      - else
+        .build-failures.build-page
+          %table.table.gl-table.responsive-table.ci-table.responsive-table-sm-rounded
+            %thead
+              %th
+              %th= _('Name')
+              %th= _('Stage')
+              %th= _('Failure')
+              %th
 
-        %tbody
-          - @pipeline.failed_builds.each_with_index do |build, index|
-            - job = build.present(current_user: current_user)
-            %tr.build-state.responsive-table-border-start
-              %td.responsive-table-cell.ci-status-icon-failed{ data: { column: _('Status')} }
-                .d-none.d-md-block.build-icon
-                  = sprite_icon("status_#{build.status}")
-                .d-md-none.build-badge
-                  = render "ci/status/badge", link: false, status: job.detailed_status(current_user)
-              %td.responsive-table-cell.build-name{ data: { column: _('Name')} }
-                = link_to build.name, pipeline_job_url(pipeline, build)
-              %td.responsive-table-cell.build-stage{ data: { column: _('Stage')} }
-                = build.stage.titleize
-              %td.responsive-table-cell.build-failure{ data: { column: _('Failure')} }
-                = build.present.callout_failure_message
-              %td.responsive-table-cell.build-actions
-                - if can?(current_user, :update_build, job) && job.retryable?
-                  = link_to retry_project_job_path(build.project, build, return_to: request.original_url), method: :post, title: _('Retry'), class: 'gl-button btn btn-default btn-icon' do
-                    = sprite_icon('repeat', css_class: 'gl-icon')
-            - if can?(current_user, :read_build, job)
-              %tr.build-log-row.responsive-table-border-end
-                %td
-                %td.responsive-table-cell.build-log-container{ colspan: 4 }
-                  %pre.build-log.build-log-rounded
-                    %code.bash.js-build-output
-                      = build_summary(build)
+            %tbody
+              - @pipeline.failed_builds.each_with_index do |build, index|
+                - job = build.present(current_user: current_user)
+                %tr.build-state.responsive-table-border-start
+                  %td.responsive-table-cell.ci-status-icon-failed{ data: { column: _('Status')} }
+                    .d-none.d-md-block.build-icon
+                      = sprite_icon("status_#{build.status}")
+                    .d-md-none.build-badge
+                      = render "ci/status/badge", link: false, status: job.detailed_status(current_user)
+                  %td.responsive-table-cell.build-name{ data: { column: _('Name')} }
+                    = link_to build.name, pipeline_job_url(pipeline, build)
+                  %td.responsive-table-cell.build-stage{ data: { column: _('Stage')} }
+                    = build.stage.titleize
+                  %td.responsive-table-cell.build-failure{ data: { column: _('Failure')} }
+                    = build.present.callout_failure_message
+                  %td.responsive-table-cell.build-actions
+                    - if can?(current_user, :update_build, job) && job.retryable?
+                      = link_to retry_project_job_path(build.project, build, return_to: request.original_url), method: :post, title: _('Retry'), class: 'gl-button btn btn-default btn-icon' do
+                        = sprite_icon('repeat', css_class: 'gl-icon')
+                - if can?(current_user, :read_build, job)
+                  %tr.build-log-row.responsive-table-border-end
+                    %td
+                    %td.responsive-table-cell.build-log-container{ colspan: 4 }
+                      %pre.build-log.build-log-rounded
+                        %code.bash.js-build-output
+                          = build_summary(build)
 
   #js-tab-dag.tab-pane
     #js-pipeline-dag-vue{ data: { pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid, empty_svg_path: image_path('illustrations/empty-state/empty-dag-md.svg'), about_dag_doc_path: help_page_path('ci/directed_acyclic_graph/index.md'), dag_doc_path: help_page_path('ci/yaml/index.md', anchor: 'needs')} }
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 2b0a0fc1253..30b224a60da 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -27,7 +27,7 @@
       = s_('You can also test your %{gitlab_ci_yml} in %{lint_link_start}CI Lint%{lint_link_end}').html_safe % { gitlab_ci_yml: '.gitlab-ci.yml', lint_link_start: lint_link_start, lint_link_end: '</a>'.html_safe }
 
   #js-pipeline-notification{ data: { deprecated_keywords_doc_path: help_page_path('ci/yaml/index.md', anchor: 'deprecated-keywords'), full_path: @project.full_path, pipeline_iid: @pipeline.iid } }
-  - if Feature.enabled?(:pipeline_tabs_vue, @project, default_enabled: :yaml)
+  - if Feature.enabled?(:pipeline_tabs_vue, @project)
     #js-pipeline-tabs{ data: js_pipeline_tabs_data(@project, @pipeline) }
   - else
     = render "projects/pipelines/with_tabs", pipeline: @pipeline, stages: @stages, pipeline_has_errors: pipeline_has_errors
diff --git a/app/views/projects/runners/_group_runners.html.haml b/app/views/projects/runners/_group_runners.html.haml
index 8134ee8f417..449b6c25f50 100644
--- a/app/views/projects/runners/_group_runners.html.haml
+++ b/app/views/projects/runners/_group_runners.html.haml
@@ -28,10 +28,7 @@
   = _('This group does not have any group runners yet.')
 
   - if can?(current_user, :admin_group_runners, @project.group)
-    - if Feature.enabled?(:runner_list_group_view_vue_ui, @group, default_enabled: :yaml)
-      - register_runners_path = group_runners_path(@project.group)
-    - else
-      - register_runners_path = group_settings_ci_cd_path(@project.group)
+    - register_runners_path = group_runners_path(@project.group)
     - group_link = link_to _("group's CI/CD settings."), register_runners_path
     = _('Group owners can register group runners in the %{link}').html_safe % { link: group_link }
   - else
diff --git a/app/views/projects/serverless/functions/index.html.haml b/app/views/projects/serverless/functions/index.html.haml
deleted file mode 100644
index 03a1b0ee7bb..00000000000
--- a/app/views/projects/serverless/functions/index.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-- @content_class = "limit-container-width" unless fluid_layout
-- breadcrumb_title _('Serverless')
-- page_title _('Serverless')
-- status_path = project_serverless_functions_path(@project, format: :json)
-- clusters_path = project_clusters_path(@project)
-
-.serverless-functions-page.js-serverless-functions-page{ data: { status_path: status_path,
-  installed: @installed,
-  clusters_path: clusters_path,
-  help_path: help_page_path('user/project/clusters/serverless/index'),
-  empty_image_path: image_path('illustrations/empty-state/empty-serverless-lg.svg') } }
-
-.js-serverless-functions-notice
-  .flash-container
-
-.top-area.adjust.d-flex.justify-content-center.gl-border-none
-  .serverless-functions-table#js-serverless-functions
diff --git a/app/views/projects/serverless/functions/show.html.haml b/app/views/projects/serverless/functions/show.html.haml
deleted file mode 100644
index dd81d957e51..00000000000
--- a/app/views/projects/serverless/functions/show.html.haml
+++ /dev/null
@@ -1,19 +0,0 @@
-- @content_class = "limit-container-width" unless fluid_layout
-- clusters_path = project_clusters_path(@project)
-- help_path = help_page_path('user/project/clusters/serverless/index')
-
-- add_to_breadcrumbs('Serverless', project_serverless_functions_path(@project))
-
-- page_title @service[:name]
-
-.serverless-function-details-page.js-serverless-function-details-page{ data: { service: @service.as_json,
-  prometheus: @prometheus,
-  clusters_path: clusters_path,
-  help_path: help_path } }
-
-.serverless-function-details#js-serverless-function-details
-
-.js-serverless-function-notice
-  .flash-container
-
-.function-holder.js-function-holder.input-group
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index d1d9a220068..9d74f99bb19 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -1,5 +1,5 @@
-- if lookup_context.template_exists?('top', "projects/services/#{integration.to_param}", true)
-  = render "projects/services/#{integration.to_param}/top", integration: integration
+- if lookup_context.template_exists?('top', "shared/integrations/#{integration.to_param}", true)
+  = render "shared/integrations/#{integration.to_param}/top", integration: integration
 
 - if integration.activate_disabled_reason.present? && integration.activate_disabled_reason[:trackers].any?
   -# When using integration.activate_disabled_reason[:trackers], it's potentially insecure to use the raw records
@@ -7,8 +7,8 @@
   -# For example, we can get the link to each tracker with scoped_edit_integration_path(tracker, tracker.project)
   = render Pajamas::AlertComponent.new(title: s_('ExternalIssueIntegration|Another issue tracker is already in use'),
     variant: :warning,
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = s_('ExternalIssueIntegration|Only one issue tracker integration can be active at a time. Please disable the active tracker first and try again.')
 
 %h2.gl-mb-4
@@ -17,6 +17,6 @@
     = sprite_icon('check', css_class: 'gl-text-green-500')
 
 = render 'shared/integration_settings', integration: integration
-- if lookup_context.template_exists?('show', "projects/services/#{integration.to_param}", true)
+- if lookup_context.template_exists?('show', "shared/integrations/#{integration.to_param}", true)
   %hr
-  = render "projects/services/#{integration.to_param}/show", integration: integration
+  = render "shared/integrations/#{integration.to_param}/show", integration: integration
diff --git a/app/views/projects/services/prometheus/_external_alerts.html.haml b/app/views/projects/services/prometheus/_external_alerts.html.haml
deleted file mode 100644
index 168b4853a9a..00000000000
--- a/app/views/projects/services/prometheus/_external_alerts.html.haml
+++ /dev/null
@@ -1,8 +0,0 @@
-- return unless can?(current_user, :read_prometheus_alerts, @project)
-- return unless integration.manual_configuration?
-
-- notify_url = notify_project_prometheus_alerts_url(@project, format: :json)
-- authorization_key = @project.alerting_setting.try(:token)
-- learn_more_url = help_page_path('operations/metrics/alerts.md', anchor: 'external-prometheus-instances')
-
-#js-settings-prometheus-alerts{ data: { notify_url: notify_url, authorization_key: authorization_key, change_key_url: reset_alerting_token_project_settings_operations_path(@project), learn_more_url: learn_more_url, disabled: true } }
diff --git a/app/views/projects/services/prometheus/_show.html.haml b/app/views/projects/services/prometheus/_show.html.haml
deleted file mode 100644
index 3350ac8a6c5..00000000000
--- a/app/views/projects/services/prometheus/_show.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-.row
-  .col-lg-3
-    %h4.gl-mt-0
-      = s_('PrometheusService|Metrics')
-
-.row.gl-mb-3.prometheus-metrics-monitoring.js-prometheus-metrics-monitoring
-  = render 'projects/services/prometheus/metrics', project: @project, integration: integration
-
-= render 'projects/services/prometheus/external_alerts', project: @project, integration: integration
diff --git a/app/views/projects/services/prometheus/_top.html.haml b/app/views/projects/services/prometheus/_top.html.haml
deleted file mode 100644
index 52b29ea2e8f..00000000000
--- a/app/views/projects/services/prometheus/_top.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-- return unless integration.manual_configuration?
-
-.row
-  .col-lg-12
-    = render Pajamas::AlertComponent.new(dismissible: false) do
-      .gl-alert-body
-        = s_('AlertSettings|You can now set up alert endpoints for manually configured Prometheus instances in the Alerts section on the Operations settings page. Alert endpoint fields on this page have been deprecated.')
-      .gl-alert-actions
-        = link_to _('Visit settings page'), project_settings_operations_path(@project, anchor: 'js-alert-management-settings'), class: 'gl-button btn gl-alert-action btn-info'
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index 5ef56cda6d2..508e63f77d8 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -1,6 +1,7 @@
 - help_link_public_pipelines = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'change-which-users-can-view-your-pipelines'), target: '_blank', rel: 'noopener noreferrer'
 - help_link_auto_canceling = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'auto-cancel-redundant-pipelines'), target: '_blank', rel: 'noopener noreferrer'
-- help_link_skip_outdated =link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'skip-outdated-deployment-jobs'), target: '_blank', rel: 'noopener noreferrer'
+- help_link_skip_outdated = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'skip-outdated-deployment-jobs'), target: '_blank', rel: 'noopener noreferrer'
+- help_link_separated_caches = link_to sprite_icon('question-o'), help_page_path('ci/caching/index', anchor: 'cache-key-names'), target: '_blank', rel: 'noopener noreferrer'
 
 .row.gl-mt-3
   .col-lg-12
@@ -25,6 +26,11 @@
               help_text: (_('When a deployment job is successful, skip older deployment jobs that are still pending.') + ' ' + help_link_skip_outdated).html_safe
 
         .form-group
+          = f.gitlab_ui_checkbox_component :ci_separated_caches,
+            s_("CICD|Use separate caches for protected branches"),
+            help_text: (s_('CICD|Unprotected branches will not have access to the cache from protected branches.') + ' ' + help_link_separated_caches).html_safe
+
+        .form-group
           = f.label :ci_config_path, _('CI/CD configuration file'), class: 'label-bold'
           = f.text_field :ci_config_path, class: 'form-control', placeholder: '.gitlab-ci.yml'
           %p.form-text.text-muted
@@ -77,19 +83,7 @@
               = _("The maximum file size in megabytes for individual job artifacts.")
               = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank', rel: 'noopener noreferrer'
 
-        .form-group
-          = f.label :build_coverage_regex, _("Test coverage parsing"), class: 'label-bold'
-          .input-group
-            %span.input-group-prepend
-              .input-group-text /
-            = f.text_field :build_coverage_regex, class: 'form-control gl-form-input', placeholder: 'Regular expression', data: { qa_selector: 'build_coverage_regex_field' }
-            %span.input-group-append
-              .input-group-text /
-          %p.form-text.text-muted
-            = html_escape(_('The regular expression used to find test coverage output in the job log. For example, use %{regex} for Simplecov (Ruby). Leave blank to disable.')) % { regex: '<code>\(\d+.\d+%\)</code>'.html_safe }
-            = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'add-test-coverage-results-using-project-settings-deprecated'), target: '_blank', rel: 'noopener noreferrer'
-
-        = f.submit _('Save changes'), class: "btn gl-button btn-confirm", data: { qa_selector: 'save_general_pipelines_changes_button' }
+        = f.submit _('Save changes'), class: "btn gl-button btn-confirm"
 
 %hr
 
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index 28cde994d00..87ca13a7bd6 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -7,14 +7,14 @@
 - expanded = expanded_by_default?
 - general_expanded = @project.errors.empty? ? expanded : true
 
-%section.settings#js-general-pipeline-settings.no-animate{ class: ('expanded' if general_expanded), data: { qa_selector: 'general_pipelines_settings_content' } }
+%section.settings#js-general-pipeline-settings.no-animate{ class: ('expanded' if general_expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _("General pipelines")
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
-      = _("Customize your pipeline configuration and coverage report.")
+      = _("Customize your pipeline configuration.")
   .settings-content
     = render 'form'
 
@@ -109,3 +109,15 @@
       = link_to _('Learn more'), help_page_path('ci/jobs/ci_job_token'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'ci/token_access/index'
+
+- if show_secure_files_setting(@project, current_user)
+  %section.settings
+    .settings-header
+      %h4.settings-title
+        = _("Secure Files")
+      = button_to project_ci_secure_files_path(@project), method: :get, class: 'btn gl-button btn-default' do
+        = _('Manage')
+      %p
+        = _("Use Secure Files to store files used by your pipelines such as Android keystores, or Apple provisioning profiles and signing certificates.")
+        = link_to _('Learn more'), help_page_path('ci/secure_files/index'), target: '_blank', rel: 'noopener noreferrer'
+
diff --git a/app/views/projects/settings/operations/_prometheus.html.haml b/app/views/projects/settings/operations/_prometheus.html.haml
deleted file mode 100644
index 93281cc225b..00000000000
--- a/app/views/projects/settings/operations/_prometheus.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-%section.settings.no-animate.js-prometheus-settings
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Prometheus')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = _('Expand')
-    %p
-      = _('Link Prometheus monitoring to GitLab.')
-      = link_to _('More information'), help_page_path('user/project/integrations/prometheus'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
-    - if @project
-      = render 'shared/prometheus_configuration_banner', project: @project, integration: service, header_tag: :b, info_well_classes: 'gl-p-3 gl-mt-3'
-
-    %b.gl-mb-3
-      = s_('PrometheusService|Manual configuration')
-    %p
-      = s_('PrometheusService|Auto configuration settings are used unless you override their values here.')
diff --git a/app/views/projects/settings/operations/show.html.haml b/app/views/projects/settings/operations/show.html.haml
index 9a31666c316..80c22604e49 100644
--- a/app/views/projects/settings/operations/show.html.haml
+++ b/app/views/projects/settings/operations/show.html.haml
@@ -15,13 +15,14 @@
         = s_('Deprecations|Feature deprecation and removal')
       .gl-alert-body
         %p
-          = html_escape(s_('Deprecations|The metrics feature was deprecated in GitLab 14.7. The logs and tracing features were also deprecated in GitLab 14.7, and are %{removal_link_start} scheduled for removal %{link_end} in GitLab 15.0. For information on a possible replacement, %{opstrace_link_start} learn more about Opstrace %{link_end}.')) % {removal_link_start: removal_epic_link_start, opstrace_link_start: opstrace_link_start, link_end: link_end }
+          = html_escape(s_('Deprecations|The metrics feature was deprecated in GitLab 14.7.'))
+          = html_escape(s_('Deprecations|The logs and tracing features were also deprecated in GitLab 14.7, and are %{removal_link_start} scheduled for removal %{link_end} in GitLab 15.0.')) % {removal_link_start: removal_epic_link_start, link_end: link_end } if Feature.enabled?(:monitor_tracing, @project)
+          = html_escape(s_('Deprecations|For information on a possible replacement, %{opstrace_link_start} learn more about Opstrace %{link_end}.')) % {opstrace_link_start: opstrace_link_start, link_end: link_end }
 
 = render 'projects/settings/operations/metrics_dashboard'
-= render 'projects/settings/operations/tracing'
+= render 'projects/settings/operations/tracing' if Feature.enabled?(:monitor_tracing, @project)
 = render 'projects/settings/operations/error_tracking'
 = render 'projects/settings/operations/alert_management'
 = render 'projects/settings/operations/incidents'
 = render 'projects/settings/operations/grafana_integration'
 = render_if_exists 'projects/settings/operations/status_page'
-= render 'projects/settings/operations/prometheus', service: prometheus_integration if Feature.enabled?(:settings_operations_prometheus_service)
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 202c0f22420..29bdca1c876 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,6 +1,8 @@
+- is_project_overview = local_assigns.fetch(:is_project_overview, false)
+
 .tree-ref-container.gl-display-flex.mb-2.mb-md-0
   .tree-ref-holder
-    = render 'shared/ref_switcher', destination: 'tree', path: @path, show_create: true
+    = render 'shared/ref_switcher', destination: 'tree', show_create: true
 
   #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
 
@@ -8,7 +10,7 @@
 .tree-controls
   .d-block.d-sm-flex.flex-wrap.align-items-start.gl-children-ml-sm-3.gl-first-child-ml-sm-0<
     = render_if_exists 'projects/tree/lock_link'
-    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
+    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref), is_project_overview: is_project_overview.to_s } }
 
     = render 'projects/find_file_link'
     = render 'shared/web_ide_button', blob: nil
diff --git a/app/views/projects/work_items/index.html.haml b/app/views/projects/work_items/index.html.haml
index 0efd7a740d3..356f93c6ed5 100644
--- a/app/views/projects/work_items/index.html.haml
+++ b/app/views/projects/work_items/index.html.haml
@@ -1,3 +1,3 @@
 - page_title s_('WorkItem|Work Items')
 
-#js-work-items{ data: { full_path: @project.full_path } }
+#js-work-items{ data: { full_path: @project.full_path, issues_list_path: project_issues_path(@project) } }
diff --git a/app/views/pwa/offline.html.haml b/app/views/pwa/offline.html.haml
new file mode 100644
index 00000000000..5eae546bea9
--- /dev/null
+++ b/app/views/pwa/offline.html.haml
@@ -0,0 +1,31 @@
+= link_to root_path do
+  = render 'shared/logo.svg'
+%h1= _('Offline')
+.container
+  %h3= _('You are currently offline, or the GitLab instance is not reachable.')
+  %p= _("In the background, we're attempting to connect you again.")
+  -# haml-lint:disable InlineJavaScript
+  :javascript
+    window.addEventListener('online', () => {
+      window.location.reload();
+    });
+
+    async function checkNetworkAndReload() {
+      try {
+        const response = await fetch('.');
+        // Verify we get a valid response from the server
+        if (response.status >= 200 && response.status < 500) {
+          window.location.reload();
+          return;
+        }
+      } catch {
+        // Unable to connect to the server, ignore.
+      }
+      window.setTimeout(checkNetworkAndReload, 2500);
+    }
+
+    if (window.location.pathname.endsWith('/-/offline')) {
+      return;
+    }
+
+    checkNetworkAndReload();
diff --git a/app/views/registrations/welcome/show.html.haml b/app/views/registrations/welcome/show.html.haml
index 6235cce5d80..62499f1a6b6 100644
--- a/app/views/registrations/welcome/show.html.haml
+++ b/app/views/registrations/welcome/show.html.haml
@@ -17,7 +17,7 @@
         %p.gl-text-center= html_escape(_('%{gitlab_experience_text}. We won\'t share this information with anyone.')) % { gitlab_experience_text: gitlab_experience_text }
       - else
         %p.gl-text-center= html_escape(_('%{gitlab_experience_text}. Don\'t worry, this information isn\'t shared outside of your self-managed GitLab instance.')) % { gitlab_experience_text: gitlab_experience_text }
-      = gitlab_ui_form_for(current_user, url: users_sign_up_welcome_path, html: { class: 'card gl-w-full! gl-p-5', 'aria-live' => 'assertive' }) do |f|
+      = gitlab_ui_form_for(current_user, url: users_sign_up_welcome_path, html: { class: 'card gl-w-full! gl-p-5 js-users-signup-welcome', 'aria-live' => 'assertive' }) do |f|
         .devise-errors
           = render 'devise/shared/error_messages', resource: current_user
         .row
@@ -27,7 +27,7 @@
         - if Feature.enabled?(:user_other_role_details)
           .row
             .form-group.col-sm-12.js-other-role-group.hidden
-              = f.label :other_role, _('What is your job title? (optional)'), class: 'form-check-label gl-mb-3'
+              = f.label :other_role, _('What is your job title? (optional)')
               = f.text_field :other_role, class: 'form-control'
         = render_if_exists "registrations/welcome/jobs_to_be_done", f: f
         = render_if_exists "registrations/welcome/setup_for_company", f: f
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 fdd4dfba616..d69f54608e9 100644
--- a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
+++ b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
@@ -1,12 +1,12 @@
 - if show_auto_devops_implicitly_enabled_banner?(project, current_user)
   = render Pajamas::AlertComponent.new(alert_class: 'qa-auto-devops-banner auto-devops-implicitly-enabled-banner',
     close_button_class: 'hide-auto-devops-implicitly-enabled-banner',
-    close_button_data: { project_id: project.id }) do
-    .gl-alert-body
+    close_button_data: { project_id: project.id }) do |c|
+    = c.body do
       = s_("AutoDevOps|The Auto DevOps pipeline has been enabled and will be used if no alternative CI configuration file is found.")
       - unless Gitlab.config.registry.enabled
         %div
           = _('Container registry is not enabled on this GitLab instance. Ask an administrator to enable it in order for Auto DevOps to work.')
-    .gl-alert-actions
+    = c.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/_import_form.html.haml b/app/views/shared/_import_form.html.haml
index 850d58920db..7248403d6c9 100644
--- a/app/views/shared/_import_form.html.haml
+++ b/app/views/shared/_import_form.html.haml
@@ -2,6 +2,19 @@
 - import_url = Gitlab::UrlSanitizer.new(f.object.import_url)
 
 .import-url-data
+  .info-well.prepend-top-20
+    .well-segment
+      %ul
+        %li
+          = html_escape(_('The repository must be accessible over %{code_open}http://%{code_close}, %{code_open}https://%{code_close} or %{code_open}git://%{code_close}.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+        %li= html_escape(_('When using the %{code_open}http://%{code_close} or %{code_open}https://%{code_close} protocols, please provide the exact URL to the repository. HTTP redirects will not be followed.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+        %li
+          = _('If your HTTP repository is not publicly accessible, add your credentials.')
+        %li
+          = import_will_timeout_message(ci_cd_only)
+        %li
+          = import_svn_message(ci_cd_only)
+        = render_if_exists 'shared/ci_cd_only_link', ci_cd_only: ci_cd_only
   .form-group
     = f.label :import_url, class: 'label-bold' do
       %span
@@ -11,9 +24,10 @@
     = render Pajamas::AlertComponent.new(variant: :danger,
       alert_class: 'gl-mt-3 js-import-url-error hide',
       dismissible: false,
-      close_button_class: 'js-close-2fa-enabled-success-alert') do
-      .gl-alert-body
+      close_button_class: 'js-close-2fa-enabled-success-alert') do |c|
+      = c.body do
         = s_('Import|There is not a valid Git repository at this URL. If your HTTP repository is not publicly accessible, verify your credentials.')
+  = render_if_exists 'shared/ee/import_form', f: f, ci_cd_only: ci_cd_only
   .row
     .form-group.col-md-6
       = f.label :import_url_user, class: 'label-bold' do
@@ -26,19 +40,3 @@
         %span
           = _('Password (optional)')
       = f.password_field :import_url_password, class: 'form-control gl-form-input', required: false, autocomplete: 'new-password'
-
-  .info-well.prepend-top-20
-    .well-segment
-      %ul
-        %li
-          = html_escape(_('The repository must be accessible over %{code_open}http://%{code_close}, %{code_open}https://%{code_close} or %{code_open}git://%{code_close}.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-        %li= html_escape(_('When using the %{code_open}http://%{code_close} or %{code_open}https://%{code_close} protocols, please provide the exact URL to the repository. HTTP redirects will not be followed.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-        %li
-          = _('If your HTTP repository is not publicly accessible, add your credentials.')
-        %li
-          = import_will_timeout_message(ci_cd_only)
-        %li
-          = import_svn_message(ci_cd_only)
-        = render_if_exists 'shared/ci_cd_only_link', ci_cd_only: ci_cd_only
-
-= render_if_exists 'shared/ee/import_form', f: f, ci_cd_only: ci_cd_only
diff --git a/app/views/shared/_integration_settings.html.haml b/app/views/shared/_integration_settings.html.haml
index 93606ca0aba..84710b2ecc7 100644
--- a/app/views/shared/_integration_settings.html.haml
+++ b/app/views/shared/_integration_settings.html.haml
@@ -6,8 +6,8 @@
   .js-vue-integration-settings{ data: integration_form_data(integration, group: @group, project: @project) }
     .js-integration-help-html.gl-display-none
       -# All content below will be repositioned in Vue
-      - if lookup_context.template_exists?('help', "projects/services/#{integration.to_param}", true)
-        = render "projects/services/#{integration.to_param}/help", integration: integration
+      - if lookup_context.template_exists?('help', "shared/integrations/#{integration.to_param}", true)
+        = render "shared/integrations/#{integration.to_param}/help", integration: integration
       - elsif integration.help.present?
         .info-well
           .well-segment
diff --git a/app/views/shared/_logo.svg b/app/views/shared/_logo.svg
index 0ef9de5fed6..83f6fe5c16c 100644
--- a/app/views/shared/_logo.svg
+++ b/app/views/shared/_logo.svg
@@ -1,9 +1,10 @@
-<svg width="24" height="24" class="tanuki-logo" viewBox="0 0 36 36">
-  <path class="tanuki-shape tanuki-left-ear" fill="#e24329" d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"/>
-  <path class="tanuki-shape tanuki-right-ear" fill="#e24329" d="M34 14l-9.38 9v-9l4-12.28c.205-.632 1.176-.632 1.38 0z"/>
-  <path class="tanuki-shape tanuki-nose" fill="#e24329" d="M18,34.38 3,14 33,14 Z"/>
-  <path class="tanuki-shape tanuki-left-eye" fill="#fc6d26" d="M18,34.38 11.38,14 2,14 6,25Z"/>
-  <path class="tanuki-shape tanuki-right-eye" fill="#fc6d26" d="M18,34.38 24.62,14 34,14 30,25Z"/>
-  <path class="tanuki-shape tanuki-left-cheek" fill="#fca326" d="M2 14L.1 20.16c-.18.565 0 1.2.5 1.56l17.42 12.66z"/>
-  <path class="tanuki-shape tanuki-right-cheek" fill="#fca326" d="M34 14l1.9 6.16c.18.565 0 1.2-.5 1.56L18 34.38z"/>
+<svg class="tanuki-logo" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path class="tanuki-shape tanuki" d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
+        fill="#E24329"/>
+  <path class="tanuki-shape right-cheek" d="m24.507 9.5-.034-.09a11.44 11.44 0 0 0-4.56 2.051l-7.447 5.632 4.742 3.584 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
+        fill="#FC6D26"/>
+  <path class="tanuki-shape chin" d="m7.707 20.677 2.56 1.935 1.555 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935-4.743-3.584-4.755 3.584Z"
+        fill="#FCA326"/>
+  <path class="tanuki-shape left-cheek" d="M5.01 11.461a11.43 11.43 0 0 0-4.56-2.05L.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 4.745-3.584-7.444-5.632Z"
+        fill="#FC6D26"/>
 </svg>
diff --git a/app/views/shared/_logo_type.svg b/app/views/shared/_logo_type.svg
deleted file mode 100644
index cb07e2634a9..00000000000
--- a/app/views/shared/_logo_type.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 617 169"><path d="M315.26 2.97h-21.8l.1 162.5h88.3v-20.1h-66.5l-.1-142.4M465.89 136.95c-5.5 5.7-14.6 11.4-27 11.4-16.6 0-23.3-8.2-23.3-18.9 0-16.1 11.2-23.8 35-23.8 4.5 0 11.7.5 15.4 1.2v30.1h-.1m-22.6-98.5c-17.6 0-33.8 6.2-46.4 16.7l7.7 13.4c8.9-5.2 19.8-10.4 35.5-10.4 17.9 0 25.8 9.2 25.8 24.6v7.9c-3.5-.7-10.7-1.2-15.1-1.2-38.2 0-57.6 13.4-57.6 41.4 0 25.1 15.4 37.7 38.7 37.7 15.7 0 30.8-7.2 36-18.9l4 15.9h15.4v-83.2c-.1-26.3-11.5-43.9-44-43.9M557.63 149.1c-8.2 0-15.4-1-20.8-3.5V70.5c7.4-6.2 16.6-10.7 28.3-10.7 21.1 0 29.2 14.9 29.2 39 0 34.2-13.1 50.3-36.7 50.3m9.2-110.6c-19.5 0-30 13.3-30 13.3v-21l-.1-27.8h-21.3l.1 158.5c10.7 4.5 25.3 6.9 41.2 6.9 40.7 0 60.3-26 60.3-70.9-.1-35.5-18.2-59-50.2-59M77.9 20.6c19.3 0 31.8 6.4 39.9 12.9l9.4-16.3C114.5 6 97.3 0 78.9 0 32.5 0 0 28.3 0 85.4c0 59.8 35.1 83.1 75.2 83.1 20.1 0 37.2-4.7 48.4-9.4l-.5-63.9V75.1H63.6v20.1h38l.5 48.5c-5 2.5-13.6 4.5-25.3 4.5-32.2 0-53.8-20.3-53.8-63-.1-43.5 22.2-64.6 54.9-64.6M231.43 2.95h-21.3l.1 27.3v94.3c0 26.3 11.4 43.9 43.9 43.9 4.5 0 8.9-.4 13.1-1.2v-19.1c-3.1.5-6.4.7-9.9.7-17.9 0-25.8-9.2-25.8-24.6v-65h35.7v-17.8h-35.7l-.1-38.5M155.96 165.47h21.3v-124h-21.3v124M155.96 24.37h21.3V3.07h-21.3v21.3"/></svg>
diff --git a/app/views/shared/_logo_ukraine.svg b/app/views/shared/_logo_ukraine.svg
deleted file mode 100644
index e2c2bb3855d..00000000000
--- a/app/views/shared/_logo_ukraine.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" class="tanuki-logo" viewBox="0 0 24 24">
-  <path d="M4.89929534,0.3165 L7.56629534,8.5025 L16.3922953,8.5025 L19.0592953,0.3165 C19.1962953,-0.1055 19.8432953,-0.1055 19.9792953,0.3165 L23.9122953,12.6095 C23.9722953,12.7935 23.9722953,12.9895 23.9192953,13.1695 L0.0392953418,13.1695 C-0.0143874393,12.9863283 -0.0119492421,12.7912726 0.0462953418,12.6095 L3.97929534,0.3165 C4.11529534,-0.1055 4.76229534,-0.1055 4.89929534,0.3165 Z" id="Path" fill="#005BBB"></path>
-  <path d="M7.20329534,9.0025 L16.7552953,9.0025 L16.8682953,8.6575 L19.5182953,0.5185 L23.4362953,12.7615 C23.4961172,12.9376949 23.435535,13.1323657 23.2862953,13.2435 L23.2852953,13.2455 L11.9852953,21.4655 L11.9792953,21.4715 L0.673295342,13.2455 C0.522422013,13.1321007 0.462258936,12.9374792 0.522295342,12.7615 L4.43929534,0.5185 L7.09029534,8.6585 L7.20329534,9.0025 Z" id="Shape" stroke="#FFFFFF" opacity="0.32" stroke-linejoin="round"></path>
-  <path d="M0.0012953418,12.8575 C-0.0152229638,13.1685309 0.127095079,13.4667211 0.379295342,13.6495 L11.9792953,22.0895 L11.9862953,22.0845 L11.9922953,22.0895 L11.9872953,22.0835 L23.5792953,13.6495 C23.8319507,13.466647 23.9743476,13.1679148 23.9572953,12.8565 L0.0012953418,12.8565 L0.0012953418,12.8575 Z" id="Path" fill="#FFD500"></path>
-</svg>
\ No newline at end of file
diff --git a/app/views/shared/_logo_with_black_text.svg b/app/views/shared/_logo_with_black_text.svg
new file mode 100644
index 00000000000..f5b0b70618b
--- /dev/null
+++ b/app/views/shared/_logo_with_black_text.svg
@@ -0,0 +1,12 @@
+<svg class="tanuki-logo" width="111" height="24" viewBox="0 0 111 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path class="logo-text" d="M44.814 9.042h3.645c-.608-3.875-3.963-6.574-8.33-6.574-5.166 0-9.043 3.798-9.043 10.16 0 6.248 3.703 10.123 9.15 10.123 4.887 0 8.386-3.144 8.386-8.234v-2.37h-8.01v2.794h4.55c-.058 2.816-1.938 4.599-4.908 4.599-3.305 0-5.57-2.477-5.57-6.95 0-4.445 2.303-6.913 5.494-6.913 2.38 0 4.01 1.272 4.636 3.365Zm6.218 13.438h3.49V7.68h-3.49v14.8Zm1.76-17.151c1.109 0 2.014-.85 2.014-1.89s-.905-1.9-2.014-1.9c-1.109 0-2.024.849-2.024 1.9s.9 1.89 2.017 1.89h.007ZM64.971 7.68H62.05V4.126h-3.49v3.556h-2.1v2.699h2.1v8.233c-.018 2.786 2.007 4.16 4.628 4.079a7.089 7.089 0 0 0 2.055-.348l-.59-2.73a4.247 4.247 0 0 1-1.02.137c-.878 0-1.582-.309-1.582-1.717v-7.662h2.921V7.68Zm2.701 14.8h12.272v-2.998H71.25V2.737h-3.578V22.48Zm18.957.3c2.323 0 3.71-1.09 4.347-2.333h.115v2.033h3.36v-9.91c0-3.913-3.19-5.09-6.016-5.09-3.113 0-5.504 1.388-6.275 4.087l3.26.464c.345-1.013 1.329-1.88 3.04-1.88 1.62 0 2.506.829 2.506 2.285v.057c0 1.002-1.05 1.051-3.664 1.33-2.872.309-5.619 1.166-5.619 4.502-.01 2.912 2.12 4.455 4.946 4.455Zm1.147-2.56c-1.456 0-2.498-.666-2.498-1.948 0-1.34 1.167-1.899 2.72-2.121.917-.125 2.75-.357 3.2-.722v1.744c.01 1.643-1.321 3.042-3.422 3.042v.005Zm9.244 2.26h3.433v-2.332h.201c.551 1.08 1.698 2.593 4.244 2.593 3.489 0 6.102-2.768 6.102-7.644 0-4.936-2.69-7.616-6.112-7.616-2.613 0-3.702 1.57-4.234 2.641h-.147V2.737h-3.486V22.48Zm3.423-7.403c0-2.88 1.234-4.734 3.48-4.734 2.323 0 3.52 1.976 3.52 4.734 0 2.759-1.214 4.8-3.52 4.8-2.227 0-3.48-1.928-3.48-4.8Z"
+        fill="#171321"/>
+  <path class="tanuki-shape tanuki" d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
+        fill="#E24329"/>
+  <path class="tanuki-shape right-cheek" d="m24.507 9.5-.034-.09a11.44 11.44 0 0 0-4.56 2.051l-7.447 5.632 4.742 3.584 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
+        fill="#FC6D26"/>
+  <path class="tanuki-shape chin" d="m7.707 20.677 2.56 1.935 1.555 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935-4.743-3.584-4.755 3.584Z"
+        fill="#FCA326"/>
+  <path class="tanuki-shape left-cheek" d="M5.01 11.461a11.43 11.43 0 0 0-4.56-2.05L.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 4.745-3.584-7.444-5.632Z"
+        fill="#FC6D26"/>
+</svg>
diff --git a/app/views/shared/_logo_with_white_text.svg b/app/views/shared/_logo_with_white_text.svg
new file mode 100644
index 00000000000..d0067538058
--- /dev/null
+++ b/app/views/shared/_logo_with_white_text.svg
@@ -0,0 +1,12 @@
+<svg class="tanuki-logo" width="111" height="24" viewBox="0 0 111 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path class="logo-text" d="M44.814 9.042h3.645c-.608-3.875-3.963-6.574-8.33-6.574-5.166 0-9.043 3.798-9.043 10.16 0 6.248 3.703 10.123 9.15 10.123 4.887 0 8.386-3.144 8.386-8.234v-2.37h-8.01v2.794h4.55c-.058 2.816-1.938 4.599-4.908 4.599-3.305 0-5.57-2.477-5.57-6.95 0-4.445 2.303-6.913 5.494-6.913 2.38 0 4.01 1.272 4.636 3.365Zm6.218 13.438h3.49V7.68h-3.49v14.8Zm1.76-17.151c1.109 0 2.014-.85 2.014-1.89s-.905-1.9-2.014-1.9c-1.109 0-2.024.849-2.024 1.9s.9 1.89 2.017 1.89h.007ZM64.971 7.68H62.05V4.126h-3.49v3.556h-2.1v2.699h2.1v8.233c-.018 2.786 2.007 4.16 4.628 4.079a7.089 7.089 0 0 0 2.055-.348l-.59-2.73a4.247 4.247 0 0 1-1.02.137c-.878 0-1.582-.309-1.582-1.717v-7.662h2.921V7.68Zm2.701 14.8h12.272v-2.998H71.25V2.737h-3.578V22.48Zm18.957.3c2.323 0 3.71-1.09 4.347-2.333h.115v2.033h3.36v-9.91c0-3.913-3.19-5.09-6.016-5.09-3.113 0-5.504 1.388-6.275 4.087l3.26.464c.345-1.013 1.329-1.88 3.04-1.88 1.62 0 2.506.829 2.506 2.285v.057c0 1.002-1.05 1.051-3.664 1.33-2.872.309-5.619 1.166-5.619 4.502-.01 2.912 2.12 4.455 4.946 4.455Zm1.147-2.56c-1.456 0-2.498-.666-2.498-1.948 0-1.34 1.167-1.899 2.72-2.121.917-.125 2.75-.357 3.2-.722v1.744c.01 1.643-1.321 3.042-3.422 3.042v.005Zm9.244 2.26h3.433v-2.332h.201c.551 1.08 1.698 2.593 4.244 2.593 3.489 0 6.102-2.768 6.102-7.644 0-4.936-2.69-7.616-6.112-7.616-2.613 0-3.702 1.57-4.234 2.641h-.147V2.737h-3.486V22.48Zm3.423-7.403c0-2.88 1.234-4.734 3.48-4.734 2.323 0 3.52 1.976 3.52 4.734 0 2.759-1.214 4.8-3.52 4.8-2.227 0-3.48-1.928-3.48-4.8Z"
+        fill="#fff"/>
+  <path class="tanuki-shape tanuki" d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
+        fill="#E24329"/>
+  <path class="tanuki-shape right-cheek" d="m24.507 9.5-.034-.09a11.44 11.44 0 0 0-4.56 2.051l-7.447 5.632 4.742 3.584 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
+        fill="#FC6D26"/>
+  <path class="tanuki-shape chin" d="m7.707 20.677 2.56 1.935 1.555 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935-4.743-3.584-4.755 3.584Z"
+        fill="#FCA326"/>
+  <path class="tanuki-shape left-cheek" d="M5.01 11.461a11.43 11.43 0 0 0-4.56-2.05L.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 4.745-3.584-7.444-5.632Z"
+        fill="#FC6D26"/>
+</svg>
diff --git a/app/views/shared/_milestones_sort_dropdown.html.haml b/app/views/shared/_milestones_sort_dropdown.html.haml
index 1c6eb7aa96b..b68022bfeda 100644
--- a/app/views/shared/_milestones_sort_dropdown.html.haml
+++ b/app/views/shared/_milestones_sort_dropdown.html.haml
@@ -1,4 +1,4 @@
 - milestones_sort_options = milestones_sort_options_hash.map { |value, text| { value: value, text: text, href: page_filter_path(sort: value) } }
 
 %div{ data: {testid: 'milestone_sort_by_dropdown'} }
-  = gl_redirect_listbox_tag milestones_sort_options, @sort, class: 'gl-ml-3'
+  = gl_redirect_listbox_tag milestones_sort_options, @sort
diff --git a/app/views/shared/_new_project_item_select.html.haml b/app/views/shared/_new_project_item_select.html.haml
index 74a397d7a03..821f1ede422 100644
--- a/app/views/shared/_new_project_item_select.html.haml
+++ b/app/views/shared/_new_project_item_select.html.haml
@@ -1,7 +1,6 @@
 - if any_projects?(@projects)
-  .project-item-select-holder.btn-group.gl-ml-auto.gl-mr-auto.gl-relative.gl-overflow-hidden{ class: 'gl-display-flex!' }
-    %a.btn.gl-button.btn-confirm.js-new-project-item-link.block-truncated.qa-new-project-item-link{ href: '', data: { label: local_assigns[:label], type: local_assigns[:type] }, class: "gl-m-0!" }
+  .dropdown.b-dropdown.gl-new-dropdown.btn-group.project-item-select-holder{ class: 'gl-display-inline-flex!' }
+    %a.btn.gl-button.btn-confirm.split-content-button.js-new-project-item-link.block-truncated.qa-new-project-item-link{ href: '', data: { label: local_assigns[:label], type: local_assigns[:type] } }
       = gl_loading_icon(inline: true, color: 'light')
     = project_select_tag :project_path, class: "project-item-select gl-absolute! gl-visibility-hidden", data: { include_groups: local_assigns[:include_groups], order_by: 'last_activity_at', relative_path: local_assigns[:path], with_shared: local_assigns[:with_shared], include_projects_in_subgroups: local_assigns[:include_projects_in_subgroups] }, with_feature_enabled: local_assigns[:with_feature_enabled]
-    %button.btn.dropdown-toggle.btn-confirm.btn-md.gl-button.gl-dropdown-toggle.dropdown-toggle-split.new-project-item-select-button.qa-new-project-item-select-button.gl-p-0.gl-w-100{ class: "gl-m-0!", 'aria-label': _('Toggle project select') }
-      = sprite_icon('chevron-down')
+    %button.btn.dropdown-toggle.btn-confirm.btn-md.gl-button.gl-dropdown-toggle.dropdown-toggle-split.new-project-item-select-button.qa-new-project-item-select-button{ 'aria-label': _('Toggle project select') }
diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml
index 195bd15f840..91cd91ec38b 100644
--- a/app/views/shared/_no_password.html.haml
+++ b/app/views/shared/_no_password.html.haml
@@ -1,9 +1,9 @@
 - if show_no_password_message?
   = render Pajamas::AlertComponent.new(variant: :warning,
     alert_class: 'js-no-password-message',
-    close_button_class: 'js-hide-no-password-message') do
-    .gl-alert-body
+    close_button_class: 'js-hide-no-password-message') do |c|
+    = c.body do
       = no_password_message
-    .gl-alert-actions
+    = c.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 d30679b4305..c4d8cb092dc 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -1,9 +1,9 @@
 - if show_no_ssh_key_message?
   = render Pajamas::AlertComponent.new(variant: :warning,
     alert_class: 'js-no-ssh-message',
-    close_button_class: 'js-hide-no-ssh-message') do
-    .gl-alert-body
+    close_button_class: 'js-hide-no-ssh-message') do |c|
+    = c.body do
       = s_("MissingSSHKeyWarningLink|You can't push or pull repositories using SSH until you add an SSH key to your profile.")
-    .gl-alert-actions
+    = c.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 76fb34985c0..0af378cb883 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
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do |c|
+    = c.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 7e1874f3416..b630c829c76 100644
--- a/app/views/shared/_project_limit.html.haml
+++ b/app/views/shared/_project_limit.html.haml
@@ -1,9 +1,9 @@
 - if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0
   = render Pajamas::AlertComponent.new(variant: :warning,
     dismissible: false,
-    alert_class: 'project-limit-message') do
-    .gl-alert-body
+    alert_class: 'project-limit-message') do |c|
+    = c.body do
       = _("You won't be able to create new projects because you have reached your project limit.")
-    .gl-alert-actions
+    = c.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/_registration_features_discovery_message.html.haml b/app/views/shared/_registration_features_discovery_message.html.haml
index e5b1ad88a7f..053c511830c 100644
--- a/app/views/shared/_registration_features_discovery_message.html.haml
+++ b/app/views/shared/_registration_features_discovery_message.html.haml
@@ -1,5 +1,5 @@
 - feature_title = local_assigns.fetch(:feature_title, s_('RegistrationFeatures|use this feature'))
-- registration_features_docs_path = help_page_path('development/service_ping/index.md', anchor: 'registration-features-program')
+- registration_features_docs_path = help_page_path('user/admin_area/settings/usage_statistics.md', anchor: 'registration-features-program')
 - registration_features_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: registration_features_docs_path }
 
 %div
diff --git a/app/views/shared/_service_ping_consent.html.haml b/app/views/shared/_service_ping_consent.html.haml
index 96f015c7a4b..8de7552c39a 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_class: 'service-ping-consent-message') do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(alert_class: 'service-ping-consent-message') do |c|
+    = c.body do
       - docs_link = link_to _('collect usage information'), help_page_path('user/admin_area/settings/usage_statistics.md'), class: 'gl-link'
       - settings_link = link_to _('your settings'), metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), class: 'gl-link'
       = 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 }
-    .gl-alert-actions.gl-mt-3
+    = c.actions do
       - send_service_data_path = admin_application_settings_path(application_setting: { version_check_enabled: 1, usage_ping_enabled: 1 })
       - not_now_path = admin_application_settings_path(application_setting: { version_check_enabled: 0, usage_ping_enabled: 0 })
       = link_to _("Send service data"), send_service_data_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': true, 'data-service-ping-enabled': true, class: 'js-service-ping-consent-action alert-link btn gl-button btn-info'
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 2294c44d49f..0899756d088 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
@@ -3,10 +3,10 @@
   alert_data: { feature_id: Users::CalloutsHelper::TWO_FACTOR_AUTH_RECOVERY_SETTINGS_CHECK,
                 dismiss_endpoint: callouts_path,
                 defer_links: 'true' },
-  close_button_data: { testid: 'close-account-recovery-regular-check-callout' }) do
-  .gl-alert-body
+  close_button_data: { testid: 'close-account-recovery-regular-check-callout' }) do |c|
+  = c.body do
     = s_('Profiles|Ensure you have two-factor authentication recovery codes stored in a safe place.')
     = link_to _('Learn more.'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'recovery-codes'), target: '_blank', rel: 'noopener noreferrer'
-  .gl-alert-actions
+  = c.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/access_tokens/_table.html.haml b/app/views/shared/access_tokens/_table.html.haml
index 7f7dafbe5b0..5ca9cf8d9a4 100644
--- a/app/views/shared/access_tokens/_table.html.haml
+++ b/app/views/shared/access_tokens/_table.html.haml
@@ -1,23 +1,16 @@
 - no_active_tokens_message = local_assigns.fetch(:no_active_tokens_message, _('This user has no active %{type}.') % { type: type_plural })
 - impersonation = local_assigns.fetch(:impersonation, false)
 - resource = local_assigns.fetch(:resource, false)
-- personal = !impersonation && !resource
 
 %hr
 
 %h5
   = _('Active %{type} (%{token_length})') % { type: type_plural, token_length: active_tokens.length }
 
-- if personal && !personal_access_token_expiration_enforced?
-  %p.profile-settings-content
-    = _("Personal access tokens are not revoked upon expiration.")
 - if impersonation
   %p.profile-settings-content
     = _("To see all the user's personal access tokens you must impersonate them first.")
 
-- if personal
-  = render_if_exists 'profiles/personal_access_tokens/token_expiry_notification', active_tokens: active_tokens
-
 - if active_tokens.present?
   .table-responsive
     %table.table.active-tokens
@@ -46,12 +39,8 @@
                 %span.token-never-used-label= _('Never')
             %td
               - if token.expires?
-                - if token.expired? || token.expired_but_not_enforced?
-                  %span{ class: 'text-danger has-tooltip', title: _('Token valid until revoked') }
-                    = _('Expired')
-                - else
-                  %span{ class: ('text-warning' if token.expires_soon?) }
-                    = time_ago_with_tooltip(token.expires_at)
+                %span{ class: ('text-warning' if token.expires_soon?) }
+                  = time_ago_with_tooltip(token.expires_at)
               - else
                 %span.token-never-expires-label= _('Never')
             - if resource
diff --git a/app/views/shared/deploy_tokens/_form.html.haml b/app/views/shared/deploy_tokens/_form.html.haml
index 7289121d9eb..2e04bbf3605 100644
--- a/app/views/shared/deploy_tokens/_form.html.haml
+++ b/app/views/shared/deploy_tokens/_form.html.haml
@@ -3,7 +3,7 @@
   - group_deploy_tokens_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: group_deploy_tokens_help_link_url }
   = s_('DeployTokens|Create a new deploy token for all projects in this group. %{link_start}What are deploy tokens?%{link_end}').html_safe % { link_start: group_deploy_tokens_help_link_start, link_end: '</a>'.html_safe }
 
-= form_for token, url: create_deploy_token_path(group_or_project, anchor: 'js-deploy-tokens'), method: :post, remote: Feature.enabled?(:ajax_new_deploy_token, group_or_project) do |f|
+= gitlab_ui_form_for token, url: create_deploy_token_path(group_or_project, anchor: 'js-deploy-tokens'), method: :post, remote: Feature.enabled?(:ajax_new_deploy_token, group_or_project) do |f|
 
   .form-group
     = f.label :name, class: 'label-bold'
@@ -23,33 +23,15 @@
 
   .form-group
     = f.label :scopes, _('Scopes (select at least one)'), class: 'label-bold'
-    %fieldset.form-group.form-check
-      = f.check_box :read_repository, class: 'form-check-input', data: { qa_selector: 'deploy_token_read_repository_checkbox' }
-      = f.label :read_repository, 'read_repository', class: 'label-bold form-check-label'
-      .text-secondary
-        = s_('DeployTokens|Allows read-only access to the repository.')
+    = f.gitlab_ui_checkbox_component :read_repository, 'read_repository', help_text: s_('DeployTokens|Allows read-only access to the repository.'), checkbox_options: { data: { qa_selector: 'deploy_token_read_repository_checkbox' } }
 
     - if container_registry_enabled?(group_or_project)
-      %fieldset.form-group.form-check
-        = f.check_box :read_registry, class: 'form-check-input', data: { qa_selector: 'deploy_token_read_registry_checkbox' }
-        = f.label :read_registry, 'read_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows read-only access to registry images.')
-
-      %fieldset.form-group.form-check
-        = f.check_box :write_registry, class: 'form-check-input', data: { qa_selector: 'deploy_token_write_registry_checkbox' }
-        = f.label :write_registry, 'write_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows write access to registry images.')
+      = f.gitlab_ui_checkbox_component :read_registry, 'read_registry', help_text: s_('DeployTokens|Allows read-only access to registry images.'), checkbox_options: { data: { qa_selector: 'deploy_token_read_registry_checkbox' } }
+      = f.gitlab_ui_checkbox_component :write_registry, 'write_registry', help_text: s_('DeployTokens|Allows write access to registry images.'), checkbox_options: { data: { qa_selector: 'deploy_token_write_registry_checkbox' } }
 
     - if packages_registry_enabled?(group_or_project)
-      %fieldset.form-group.form-check
-        = f.check_box :read_package_registry, class: 'form-check-input', data: { qa_selector: 'deploy_token_read_package_registry_checkbox' }
-        = f.label :read_package_registry, 'read_package_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows read-only access to the package registry.')
-
-      %fieldset.form-group.form-check
-        = f.check_box :write_package_registry, class: 'form-check-input', data: { qa_selector: 'deploy_token_write_package_registry_checkbox' }
-        = f.label :write_package_registry, 'write_package_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows read and write access to the package registry.')
+      = f.gitlab_ui_checkbox_component :read_package_registry, 'read_package_registry', help_text: s_('DeployTokens|Allows read-only access to the package registry.'), checkbox_options: { data: { qa_selector: 'deploy_token_read_package_registry_checkbox' } }
+      = f.gitlab_ui_checkbox_component :write_package_registry, 'write_package_registry', help_text: s_('DeployTokens|Allows read and write access to the package registry.'), checkbox_options: { data: { qa_selector: 'deploy_token_write_package_registry_checkbox' } }
 
   .gl-mt-3
     = f.submit s_('DeployTokens|Create deploy token'), class: 'btn gl-button btn-confirm', data: { qa_selector: 'create_deploy_token_button' }
diff --git a/app/views/shared/doorkeeper/applications/_form.html.haml b/app/views/shared/doorkeeper/applications/_form.html.haml
index c1650405776..b40e2630011 100644
--- a/app/views/shared/doorkeeper/applications/_form.html.haml
+++ b/app/views/shared/doorkeeper/applications/_form.html.haml
@@ -17,12 +17,6 @@
       help_text: _('Enable only for confidential applications exclusively used by a trusted backend server that can securely store the client secret. Do not enable for native-mobile, single-page, or other JavaScript applications because they cannot keep the client secret confidential.')
 
   .form-group
-    - help_text = _('Enable access tokens to expire after 2 hours. If disabled, tokens do not expire.')
-    - help_link = link_to _('Learn more.'), help_page_path('integration/oauth_provider.md', anchor: 'expiring-access-tokens'), target: '_blank', rel: 'noopener noreferrer'
-    = f.gitlab_ui_checkbox_component :expire_access_tokens, _('Expire access tokens'),
-      help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
-
-  .form-group
     = f.label :scopes, class: 'label-bold'
     = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: @application, scopes: @scopes, f: f
 
diff --git a/app/views/shared/empty_states/_merge_requests.html.haml b/app/views/shared/empty_states/_merge_requests.html.haml
index d0c4fb2432c..fe602db4393 100644
--- a/app/views/shared/empty_states/_merge_requests.html.haml
+++ b/app/views/shared/empty_states/_merge_requests.html.haml
@@ -10,7 +10,7 @@
 .row.empty-state.merge-requests
   .col-12
     .svg-content
-      = image_tag 'illustrations/merge_requests.svg'
+      = image_tag 'illustrations/merge_requests.svg', { auto_dark: true }
   .col-12
     .text-content
       - if has_filter_bar_param?
@@ -42,4 +42,4 @@
             - if project_select_button
               = render 'shared/new_project_item_select', path: 'merge_requests/new', label: _('merge request'), type: :merge_requests, with_feature_enabled: 'merge_requests'
             - else
-              = link_to _('New merge request'), button_path, class: 'gl-button btn btn-confirm', title: _('New merge request'), id: 'new_merge_request_link'
+              = link_to _('New merge request'), button_path, class: 'gl-button btn btn-confirm', title: _('New merge request'), id: 'new_merge_request_link', data: { qa_selector: "new_merge_request_button" }
diff --git a/app/views/shared/errors/_gitaly_unavailable.html.haml b/app/views/shared/errors/_gitaly_unavailable.html.haml
index e99c41f2496..c9d7920b9c2 100644
--- a/app/views/shared/errors/_gitaly_unavailable.html.haml
+++ b/app/views/shared/errors/_gitaly_unavailable.html.haml
@@ -1,6 +1,6 @@
 = render Pajamas::AlertComponent.new(alert_class: 'gl-my-5',
   variant: :danger,
   dismissible: false,
-  title: reason) do
-  .gl-alert-body
+  title: reason) do |c|
+  = c.body do
     = s_('The git server, Gitaly, is not available at this time. Please contact your administrator.')
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
index ce04e24b09f..932971402a2 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -12,8 +12,8 @@
 - if hook_log.internal_error_message.present?
   = render Pajamas::AlertComponent.new(title: _('Internal error occurred while delivering this webhook.'),
     variant: :danger,
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = _('Error: %{error}') % { error: hook_log.internal_error_message }
 
 %h4= _('Response')
diff --git a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml b/app/views/shared/integrations/mattermost_slash_commands/_detailed_help.html.haml
index 9d8ce186232..fec443738c3 100644
--- a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
+++ b/app/views/shared/integrations/mattermost_slash_commands/_detailed_help.html.haml
@@ -34,14 +34,14 @@
     .col-12.input-group
       = text_field_tag :display_name, "GitLab / #{pretty_name}".html_safe, class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
-        = clipboard_button(target: '#display_name', class: 'input-group-text')
+        = clipboard_button(target: '#display_name', class: 'gl-button btn-default btn-icon input-group-text')
 
   .form-group
     = label_tag :description, _('Description'), class: 'col-12 col-form-label  label-bold'
     .col-12.input-group
       = text_field_tag :description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
-        = clipboard_button(target: '#description', class: 'input-group-text')
+        = clipboard_button(target: '#description', class: 'gl-button btn-default btn-icon input-group-text')
 
   .form-group
     = label_tag nil, s_('MattermostService|Command trigger word'), class: 'col-12 col-form-label label-bold'
@@ -59,7 +59,7 @@
     .col-12.input-group
       = text_field_tag :request_url, service_trigger_url(integration), class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
-        = clipboard_button(target: '#request_url', class: 'input-group-text')
+        = clipboard_button(target: '#request_url', class: 'gl-button btn-default btn-icon input-group-text')
 
   .form-group
     = label_tag nil, s_('MattermostService|Request method'), class: 'col-12 col-form-label label-bold'
@@ -70,14 +70,14 @@
     .col-12.input-group
       = text_field_tag :response_username, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
-        = clipboard_button(target: '#response_username', class: 'input-group-text')
+        = clipboard_button(target: '#response_username', class: 'gl-button btn-default btn-icon input-group-text')
 
   .form-group
     = label_tag :response_icon, s_('MattermostService|Response icon'), class: 'col-12 col-form-label label-bold'
     .col-12.input-group
       = text_field_tag :response_icon, asset_url('gitlab_logo.png'), class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
-        = clipboard_button(target: '#response_icon', class: 'input-group-text')
+        = clipboard_button(target: '#response_icon', class: 'gl-button btn-default btn-icon input-group-text')
 
   .form-group
     = label_tag nil, _('Autocomplete'), class: 'col-12 col-form-label label-bold'
@@ -88,11 +88,11 @@
     .col-12.input-group
       = text_field_tag :autocomplete_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
-        = clipboard_button(target: '#autocomplete_hint', class: 'input-group-text')
+        = clipboard_button(target: '#autocomplete_hint', class: 'gl-button btn-default btn-icon input-group-text')
 
   .form-group
     = label_tag :autocomplete_description, _('Autocomplete description'), class: 'col-12 col-form-label label-bold'
     .col-12.input-group
       = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
-        = clipboard_button(target: '#autocomplete_description', class: 'input-group-text')
+        = clipboard_button(target: '#autocomplete_description', class: 'gl-button btn-default btn-icon input-group-text')
diff --git a/app/views/projects/services/mattermost_slash_commands/_help.html.haml b/app/views/shared/integrations/mattermost_slash_commands/_help.html.haml
index 993df389fb0..6ce1c65a8dc 100644
--- a/app/views/projects/services/mattermost_slash_commands/_help.html.haml
+++ b/app/views/shared/integrations/mattermost_slash_commands/_help.html.haml
@@ -11,7 +11,7 @@
       = s_("MattermostService|After you configure the integration, view your new Mattermost commands by entering")
     %kbd.inline /&lt;trigger&gt; help
     - if !enabled && integration.project_level?
-      = render 'projects/services/mattermost_slash_commands/detailed_help', integration: integration
+      = render 'shared/integrations/mattermost_slash_commands/detailed_help', integration: integration
 
 - if enabled && integration.project_level?
-  = render 'projects/services/mattermost_slash_commands/installation_info', integration: integration
+  = render 'shared/integrations/mattermost_slash_commands/installation_info', integration: integration
diff --git a/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml b/app/views/shared/integrations/mattermost_slash_commands/_installation_info.html.haml
index 38adc69dd5e..38adc69dd5e 100644
--- a/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml
+++ b/app/views/shared/integrations/mattermost_slash_commands/_installation_info.html.haml
diff --git a/app/views/projects/services/prometheus/_custom_metrics.html.haml b/app/views/shared/integrations/prometheus/_custom_metrics.html.haml
index 896249c6163..896249c6163 100644
--- a/app/views/projects/services/prometheus/_custom_metrics.html.haml
+++ b/app/views/shared/integrations/prometheus/_custom_metrics.html.haml
diff --git a/app/views/projects/services/prometheus/_help.html.haml b/app/views/shared/integrations/prometheus/_help.html.haml
index f40d8638845..f40d8638845 100644
--- a/app/views/projects/services/prometheus/_help.html.haml
+++ b/app/views/shared/integrations/prometheus/_help.html.haml
diff --git a/app/views/projects/services/prometheus/_metrics.html.haml b/app/views/shared/integrations/prometheus/_metrics.html.haml
index 8794f3e24da..8ee0ddfa1b1 100644
--- a/app/views/projects/services/prometheus/_metrics.html.haml
+++ b/app/views/shared/integrations/prometheus/_metrics.html.haml
@@ -1,6 +1,6 @@
 - project = local_assigns.fetch(:project)
 
-= render 'projects/services/prometheus/custom_metrics', project: project, integration: integration
+= render 'shared/integrations/prometheus/custom_metrics', project: project, integration: integration
 
 .col-lg-3
   %p
diff --git a/app/views/shared/integrations/prometheus/_show.html.haml b/app/views/shared/integrations/prometheus/_show.html.haml
new file mode 100644
index 00000000000..0e133e66794
--- /dev/null
+++ b/app/views/shared/integrations/prometheus/_show.html.haml
@@ -0,0 +1,7 @@
+.row
+  .col-lg-3
+    %h4.gl-mt-0
+      = s_('PrometheusService|Metrics')
+
+.row.gl-mb-3.prometheus-metrics-monitoring.js-prometheus-metrics-monitoring
+  = render 'shared/integrations/prometheus/metrics', project: @project, integration: integration
diff --git a/app/views/projects/services/slack/_help.haml b/app/views/shared/integrations/slack/_help.haml
index c5fcd5ca5fe..c5fcd5ca5fe 100644
--- a/app/views/projects/services/slack/_help.haml
+++ b/app/views/shared/integrations/slack/_help.haml
diff --git a/app/views/projects/services/slack_slash_commands/_help.html.haml b/app/views/shared/integrations/slack_slash_commands/_help.html.haml
index fee0ca15808..fee0ca15808 100644
--- a/app/views/projects/services/slack_slash_commands/_help.html.haml
+++ b/app/views/shared/integrations/slack_slash_commands/_help.html.haml
diff --git a/app/views/shared/issuable/_assignees.html.haml b/app/views/shared/issuable/_assignees.html.haml
index 73f1e35f03f..112b0368a3a 100644
--- a/app/views/shared/issuable/_assignees.html.haml
+++ b/app/views/shared/issuable/_assignees.html.haml
@@ -3,7 +3,7 @@
 - render_count = assignees_rendering_overflow ? max_render - 1 : max_render
 - more_assignees_count = issuable.assignees.size - render_count
 
-- if issuable.instance_of?(MergeRequest) && Feature.enabled?(:mr_attention_requests, default_enabled: :yaml)
+- if issuable.instance_of?(MergeRequest) && current_user&.mr_attention_requests_enabled?
   = render 'shared/issuable/merge_request_assignees', issuable: issuable, count: render_count
 - else
   - issuable.assignees.take(render_count).each do |assignee| # rubocop: disable CodeReuse/ActiveRecord
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index e0d5f738273..62e1a930ee6 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -8,8 +8,8 @@
 - if @conflict
   = render Pajamas::AlertComponent.new(variant: :danger,
     dismissible: false,
-    alert_class: 'gl-mb-5') do
-    .gl-alert-body
+    alert_class: 'gl-mb-5') do |c|
+    = c.body do
       Someone edited the #{issuable.class.model_name.human.downcase} the same time you did.
       Please check out
       = link_to "the #{issuable.class.model_name.human.downcase}", polymorphic_path([@project, issuable]), target: "_blank", rel: 'noopener noreferrer'
diff --git a/app/views/shared/issuable/_reviewers.html.haml b/app/views/shared/issuable/_reviewers.html.haml
index 4af2cb00859..3bf923eb946 100644
--- a/app/views/shared/issuable/_reviewers.html.haml
+++ b/app/views/shared/issuable/_reviewers.html.haml
@@ -3,7 +3,7 @@
 - render_count = reviewers_rendering_overflow ? max_render - 1 : max_render
 - more_reviewers_count = issuable.reviewers.size - render_count
 
-- if issuable.instance_of?(MergeRequest) && Feature.enabled?(:mr_attention_requests, default_enabled: :yaml)
+- if issuable.instance_of?(MergeRequest) && current_user&.mr_attention_requests_enabled?
   = render 'shared/issuable/merge_request_reviewers', issuable: issuable, count: render_count
 - else
   - issuable.reviewers.take(render_count).each do |reviewer| # rubocop: disable CodeReuse/ActiveRecord
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 7fdf8ea7796..6394e05ae24 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -88,7 +88,7 @@
                   = render 'shared/issuable/user_dropdown_item',
                     user: User.new(username: '{{username}}', name: '{{name}}'),
                     avatar: { lazy: true, url: '{{avatar_url}}' }
-              - if Feature.enabled?(:mr_attention_requests, default_enabled: :yaml)
+              - if current_user&.mr_attention_requests_enabled?
                 #js-dropdown-attention-requested.filtered-search-input-dropdown-menu.dropdown-menu
                   - if current_user
                     %ul{ data: { dropdown: true } }
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index b99294f504c..feffc7eb011 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -8,17 +8,25 @@
 - add_page_startup_api_call "#{issuable_sidebar[:issuable_json_path]}?serializer=sidebar_extras"
 - reviewers = local_assigns.fetch(:reviewers, nil)
 - in_group_context_with_iterations = @project.group.present? && issuable_sidebar[:supports_iterations]
+- is_merge_request = issuable_type === 'merge_request'
+- moved_sidebar_enabled = moved_mr_sidebar_enabled? && is_merge_request
 
-%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite', 'aria-label': issuable_type }
-  .issuable-sidebar
-    .issuable-sidebar-header.gl-py-3
-      %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
+%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class} #{'right-sidebar-merge-requests' if moved_sidebar_enabled}", 'aria-live' => 'polite', 'aria-label': issuable_type }
+  .issuable-sidebar{ class: "#{'is-merge-request' if moved_sidebar_enabled}" }
+    .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-md-display-none!' if moved_sidebar_enabled}" }
+      %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", class: "#{'gl-display-block' if moved_sidebar_enabled}", href: "#", "aria-label" => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
         = sidebar_gutter_toggle_icon
-      - if signed_in
+      - if signed_in && !moved_sidebar_enabled
         .js-issuable-todo{ data: { project_path: issuable_sidebar[:project_full_path], iid: issuable_sidebar[:iid], id: issuable_sidebar[:id] } }
 
     = form_for issuable_type, url: issuable_sidebar[:issuable_json_path], remote: true, html: { class: 'issuable-context-form inline-update js-issuable-update' } do |f|
-      .block.assignee.qa-assignee-block
+      - if signed_in && moved_sidebar_enabled
+        .block.to-do
+          .title.hide-collapsed.gl-font-weight-bold.gl-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-mt-2{ class: 'gl-mb-0!' }
+            = _('To-Do')
+            .js-issuable-todo{ data: { project_path: issuable_sidebar[:project_full_path], iid: issuable_sidebar[:iid], id: issuable_sidebar[:id] } }
+
+      .block.assignee.qa-assignee-block{ class: "#{'gl-mt-3' if !signed_in && moved_sidebar_enabled}" }
         = render "shared/issuable/sidebar_assignees", issuable_sidebar: issuable_sidebar, assignees: assignees, signed_in: signed_in
 
       - if reviewers
@@ -33,6 +41,8 @@
       - if @project.group.present?
         = render_if_exists 'shared/issuable/sidebar_item_epic', issuable_sidebar: issuable_sidebar, group_path: @project.group.full_path, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid], issuable_type: issuable_type
 
+      .js-sidebar-labels{ data: sidebar_labels_data(issuable_sidebar, @project) }
+
       - if issuable_sidebar[:supports_milestone]
         .block.milestone{ :class => ("gl-border-b-0!" if in_group_context_with_iterations), data: { qa_selector: 'milestone_block', testid: 'sidebar-milestones' } }
           .js-milestone-select{ data: { can_edit: can_edit_issuable.to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
@@ -43,7 +53,12 @@
 
       - if issuable_sidebar[:show_crm_contacts]
         .block.contact
-          #js-issue-crm-contacts{ data: { issue_id: issuable_sidebar[:id] } }
+          #js-issue-crm-contacts{ data: { issue_id: issuable_sidebar[:id], group_issues_path: issues_group_path(@project.group) } }
+
+      = render_if_exists 'shared/issuable/sidebar_weight', issuable_sidebar: issuable_sidebar, can_edit: can_edit_issuable.to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid]
+
+      - if issuable_sidebar.has_key?(:due_date)
+        #js-due-date-entry-point
 
       - if issuable_sidebar[:supports_time_tracking]
         #issuable-time-tracker.block
@@ -51,12 +66,6 @@
           .title.hide-collapsed
             = _('Time tracking')
             = gl_loading_icon(inline: true)
-      - if issuable_sidebar.has_key?(:due_date)
-        #js-due-date-entry-point
-
-      .js-sidebar-labels{ data: sidebar_labels_data(issuable_sidebar, @project) }
-
-      = render_if_exists 'shared/issuable/sidebar_weight', issuable_sidebar: issuable_sidebar, can_edit: can_edit_issuable.to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid]
 
       - if issuable_sidebar[:supports_severity]
         #js-severity
@@ -71,25 +80,23 @@
 
         = render_if_exists 'shared/issuable/sidebar_cve_id_request', issuable_sidebar: issuable_sidebar
 
-      -# haml-lint:disable InlineJavaScript
-      %script#js-lock-issue-data{ type: "application/json" }= { is_locked: !!issuable_sidebar[:discussion_locked], is_editable: can_edit_issuable }.to_json.html_safe
-      #js-lock-entry-point
+      - if !moved_sidebar_enabled
+        #js-lock-entry-point
+        - if signed_in
+          .js-sidebar-subscriptions-entry-point
 
       .js-sidebar-participants-entry-point
 
-      - if signed_in
-        .js-sidebar-subscriptions-entry-point
-
       .block.with-sub-blocks
         #js-reference-entry-point
-        - if issuable_type == 'merge_request'
+        - if issuable_type == 'merge_request' && !moved_sidebar_enabled
           .sub-block.js-sidebar-source-branch
             .sidebar-collapsed-icon.js-dont-change-state
-              = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport')
+              = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport', class: 'btn-clipboard gl-button btn-default-tertiary btn-icon btn-sm js-source-branch-copy')
             .gl-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-mb-2.hide-collapsed
               %span.gl-overflow-hidden.gl-text-overflow-ellipsis.gl-white-space-nowrap
                 = _('Source branch: %{source_branch_open}%{source_branch}%{source_branch_close}').html_safe % { source_branch_open: "<span class='gl-font-monospace' data-testid='ref-name' title='#{html_escape(source_branch)}'>".html_safe, source_branch_close: "</span>".html_safe, source_branch: html_escape(source_branch) }
-              = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport')
+              = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport', class: 'btn-clipboard gl-button btn-default-tertiary btn-icon btn-sm js-source-branch-copy')
 
       - if show_forwarding_email
         .block
diff --git a/app/views/shared/issuable/_sort_dropdown.html.haml b/app/views/shared/issuable/_sort_dropdown.html.haml
index f6d7ed6764d..e36c4cd6be0 100644
--- a/app/views/shared/issuable/_sort_dropdown.html.haml
+++ b/app/views/shared/issuable/_sort_dropdown.html.haml
@@ -1,26 +1,9 @@
-- sort_value = @sort
-- sort_title = issuable_sort_option_title(sort_value)
 - viewing_issues = controller.controller_name == 'issues' || controller.action_name == 'issues'
 - viewing_merge_requests = controller.controller_name == 'merge_requests'
+- items = issuable_sort_options(viewing_issues, viewing_merge_requests)
+- selected = issuable_sort_option_overrides[@sort] || @sort
 
-.dropdown.inline.gl-ml-3.issue-sort-dropdown
+.gl-ml-3
   .btn-group{ role: 'group' }
-    .btn-group{ role: 'group' }
-      %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'gl-button btn btn-default' }
-        = sort_title
-        = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
-      %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
-        %li
-          = sortable_item(sort_title_priority,          page_filter_path(sort: sort_value_priority),          sort_title)
-          = sortable_item(sort_title_created_date,      page_filter_path(sort: sort_value_created_date),      sort_title)
-          = sortable_item(sort_title_recently_updated,  page_filter_path(sort: sort_value_recently_updated),  sort_title)
-          = sortable_item(sort_title_milestone,         page_filter_path(sort: sort_value_milestone),         sort_title)
-          = sortable_item(sort_title_due_date,          page_filter_path(sort: sort_value_due_date),          sort_title) if viewing_issues
-          = sortable_item(sort_title_popularity,        page_filter_path(sort: sort_value_popularity),        sort_title)
-          = sortable_item(sort_title_label_priority,    page_filter_path(sort: sort_value_label_priority),    sort_title)
-          = sortable_item(sort_title_merged_date,       page_filter_path(sort: sort_value_merged_date),       sort_title) if viewing_merge_requests
-          = sortable_item(sort_title_closed_date,       page_filter_path(sort: sort_value_closed_date),       sort_title) if viewing_merge_requests
-          = sortable_item(sort_title_relative_position, page_filter_path(sort: sort_value_relative_position), sort_title) if viewing_issues
-          = sortable_item(sort_title_title,             page_filter_path(sort: sort_value_title),             sort_title)
-          = render_if_exists('shared/ee/issuable/sort_dropdown', viewing_issues: viewing_issues, sort_title: sort_title)
-    = issuable_sort_direction_button(sort_value)
+    = gl_redirect_listbox_tag(items, selected, data: { right: true })
+    = issuable_sort_direction_button(@sort)
diff --git a/app/views/shared/issuable/_status_box.html.haml b/app/views/shared/issuable/_status_box.html.haml
index c0e972684d2..4fda1f11545 100644
--- a/app/views/shared/issuable/_status_box.html.haml
+++ b/app/views/shared/issuable/_status_box.html.haml
@@ -1,6 +1,10 @@
-- state_human_name, state_icon_name = state_name_with_icon(issuable)
+- badge_text = state_name_with_icon(issuable)[0]
+- badge_icon = state_name_with_icon(issuable)[1]
+- badge_variant = issuable.open? ? :success : issuable.merged? ? :info : :danger
+- badge_status_class = issuable.open? ? 'issuable-status-badge-open' : issuable.merged? ? 'issuable-status-badge-merged' : 'issuable-status-badge-closed'
+- updated_mr_header_enabled = Feature.enabled?(:updated_mr_header, @project) && issuable.is_a?(MergeRequest)
+- badge_classes = "js-mr-status-box issuable-status-badge gl-mr-3 #{badge_status_class} #{'gl-vertical-align-bottom' if updated_mr_header_enabled}"
 
-.issuable-status-box.status-box.js-mr-status-box{ class: status_box_class(issuable), data: { project_path: issuable.project.path_with_namespace, iid: issuable.iid, state: issuable.state } }
-  = sprite_icon(state_icon_name, css_class: 'gl-display-block gl-sm-display-none!')
-  %span.gl-display-none.gl-sm-display-block
-    = state_human_name
+= gl_badge_tag({ variant: badge_variant, icon: badge_icon, icon_classes: 'gl-mr-0!' }, { class: badge_classes, data: { project_path: issuable.project.path_with_namespace, iid: issuable.iid, issuable_type: 'merge_request', state: issuable.state } }) do
+  %span.gl-display-none.gl-sm-display-block.gl-ml-2
+    = badge_text
diff --git a/app/views/shared/issue_type/_details_header.html.haml b/app/views/shared/issue_type/_details_header.html.haml
index eca61819cca..08fba712d5e 100644
--- a/app/views/shared/issue_type/_details_header.html.haml
+++ b/app/views/shared/issue_type/_details_header.html.haml
@@ -1,17 +1,16 @@
-- link = issue_closed_link(@issue, current_user, css_class: 'text-white text-underline')
+- link = issue_closed_link(@issue, current_user, css_class: 'text-underline gl-reset-color!')
+- badge_classes = 'issuable-status-badge gl-mr-3'
 
 .detail-page-header
   .detail-page-header-body
-    .issuable-status-box.status-box.status-box-issue-closed{ class: issue_status_visibility(issuable, status_box: :closed) }
-      = sprite_icon('issue-close', css_class: 'gl-display-block gl-sm-display-none!')
-      .gl-display-none.gl-sm-display-block
+    = gl_badge_tag({ variant: :info, icon: 'issue-closed', icon_classes: 'gl-mr-0!' }, { class: "#{issue_status_visibility(issuable, status_box: :closed)} #{badge_classes} issuable-status-badge-closed" }) do
+      .gl-display-none.gl-sm-display-block.gl-ml-2
         = issue_closed_text(issuable, current_user)
-      - if link
-        %span.text-white.gl-pl-2.gl-sm-display-none
-          = "(#{link})"
-    .issuable-status-box.status-box.status-box-open{ class: issue_status_visibility(issuable, status_box: :open) }
-      = sprite_icon('issue-open-m', css_class: 'gl-display-block gl-sm-display-none!')
-      %span.gl-display-none.gl-sm-display-block
+        - if link
+          %span.gl-pl-2.gl-sm-display-none
+            = "(#{link})"
+    = gl_badge_tag({ variant: :success, icon: 'issues', icon_classes: 'gl-mr-0!' }, { class: "#{issue_status_visibility(issuable, status_box: :open)} #{badge_classes} issuable-status-badge-open" }) do
+      %span.gl-display-none.gl-sm-display-block.gl-ml-2
         = _('Open')
 
     .issuable-meta
diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml
index 4e06b7902bd..45699808b6b 100644
--- a/app/views/shared/milestones/_milestone.html.haml
+++ b/app/views/shared/milestones/_milestone.html.haml
@@ -4,7 +4,7 @@
 
 %li{ class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: custom_dom_id }
   .row
-    .col-sm-6
+    .col-md-6
       .gl-mb-2
         %strong{ data: { qa_selector: "milestone_link", qa_milestone_title: milestone.title } }
           = link_to truncate(milestone.title, length: 100), milestone_path(milestone)
@@ -33,18 +33,18 @@
       %div
         = render('shared/milestone_expired', milestone: milestone)
         - if milestone.group_milestone?
-          = gl_badge_tag milestone.group.full_name, variant: :info
+          = gl_badge_tag milestone.group.full_name, { variant: :info }, { class: 'gl-white-space-normal gl-text-left' }
         - if milestone.project_milestone?
-          = gl_badge_tag milestone.project.full_name, variant: :muted
+          = gl_badge_tag milestone.project.full_name, { variant: :muted }, { class: 'gl-white-space-normal gl-text-left' }
 
-    .col-sm-4.milestone-progress
+    .col-md-4.milestone-progress
       = milestone_progress_bar(milestone)
       = link_to pluralize(milestone.total_issues_count, _('Issue')), issues_path
       - if milestone.merge_requests_enabled?
         &middot;
         = link_to pluralize(milestone.total_merge_requests_count, _('Merge request')), merge_requests_path
       .float-lg-right.light #{milestone.percent_complete}% complete
-    .col-sm-2
+    .col-md-2
       .milestone-actions.d-flex.justify-content-sm-start.justify-content-md-end
         - if @project # if in milestones list on project level
           - if can_admin_group_milestones?
diff --git a/app/views/shared/milestones/_milestone_complete_alert.html.haml b/app/views/shared/milestones/_milestone_complete_alert.html.haml
index 4685a93a343..86f9193cc7a 100644
--- a/app/views/shared/milestones/_milestone_complete_alert.html.haml
+++ b/app/views/shared/milestones/_milestone_complete_alert.html.haml
@@ -3,6 +3,6 @@
 - if milestone.complete? && milestone.active?
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_data: { testid: 'all-issues-closed-alert' },
-    dismissible: false) do
-    .gl-alert-body
-    = yield
+    dismissible: false) do |c|
+    = c.body do
+      = yield
diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml
index a1e94172ec3..12026b89429 100644
--- a/app/views/shared/milestones/_sidebar.html.haml
+++ b/app/views/shared/milestones/_sidebar.html.haml
@@ -163,9 +163,9 @@
       .block.reference
         .sidebar-collapsed-icon.js-dont-change-state
           = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport')
-        .cross-project-reference.hide-collapsed
-          %span.gl-display-inline-block.gl-text-truncate
+        .gl-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-mb-2.hide-collapsed
+          %span.gl-overflow-hidden.gl-text-overflow-ellipsis.gl-white-space-nowrap
             = s_('MilestoneSidebar|Reference:')
             %span{ title: milestone_ref }
               = milestone_ref
-          = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport', class: 'btn-clipboard btn-transparent gl-float-right gl-bg-gray-10')
+          = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport')
diff --git a/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml b/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml
index cfa87351689..d167ffb5582 100644
--- a/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml
+++ b/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml
@@ -9,10 +9,7 @@
 
 - lock_attribute = "lock_#{attribute}"
 
-.gl-form-checkbox.custom-control.custom-checkbox
-  = form.check_box lock_attribute, checked: group.namespace_settings.public_send(lock_attribute), class: 'custom-control-input', data: { testid: 'enforce-for-all-subgroups-checkbox' }
-  = form.label lock_attribute, class: 'custom-control-label' do
-    %span
-      = yield.presence || s_('CascadingSettings|Enforce for all subgroups')
-    %p.help-text
-      = help_text
+= form.gitlab_ui_checkbox_component lock_attribute,
+  s_('CascadingSettings|Enforce for all subgroups'),
+  help_text: help_text,
+  checkbox_options: { checked: group.namespace_settings.public_send(lock_attribute), data: { testid: 'enforce-for-all-subgroups-checkbox' } }
diff --git a/app/views/shared/notes/_hints.html.haml b/app/views/shared/notes/_hints.html.haml
index 8a79a17b166..c845d4df7df 100644
--- a/app/views/shared/notes/_hints.html.haml
+++ b/app/views/shared/notes/_hints.html.haml
@@ -2,15 +2,12 @@
 - supports_file_upload = local_assigns.fetch(:supports_file_upload, true)
 .comment-toolbar.clearfix
   .toolbar-text
-    = link_to _('Markdown'), help_page_path('user/markdown'), target: '_blank', rel: 'noopener noreferrer'
+    - markdownLinkStart = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/markdown') }
+    - quickActionsLinkStart = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/quick_actions') }
     - if supports_quick_actions
-      and
-      = link_to _('quick actions'), help_page_path('user/project/quick_actions'), target: '_blank', rel: 'noopener noreferrer'
-      are
+      = html_escape(s_('NoteToolbar|Supports %{markdownDocsLinkStart}Markdown%{markdownDocsLinkEnd}. For %{quickActionsDocsLinkStart}quick actions%{quickActionsDocsLinkEnd}, type %{keyboardStart}/%{keyboardEnd}.')) % { markdownDocsLinkStart: markdownLinkStart, markdownDocsLinkEnd: '</a>'.html_safe, quickActionsDocsLinkStart: quickActionsLinkStart, quickActionsDocsLinkEnd: '</a>'.html_safe, keyboardStart: '<kbd>'.html_safe, keyboardEnd: '</kbd>'.html_safe }
     - else
-      is
-    supported
-
+      = html_escape(s_('MarkdownToolbar|Supports %{markdownDocsLinkStart}Markdown%{markdownDocsLinkEnd}')) % { markdownDocsLinkStart: markdownLinkStart, markdownDocsLinkEnd: '</a>'.html_safe }
   - if supports_file_upload
     %span.uploading-container
       %span.uploading-progress-container.hide
diff --git a/app/views/shared/projects/_topics.html.haml b/app/views/shared/projects/_topics.html.haml
index b7df369327c..e3895663033 100644
--- a/app/views/shared/projects/_topics.html.haml
+++ b/app/views/shared/projects/_topics.html.haml
@@ -7,25 +7,25 @@
       = sprite_icon('tag', css_class: 'icon gl-relative gl-mr-2')
 
       - project.topics_to_show.each do |topic|
-        - explore_project_topic_path = topic_explore_projects_path(topic_name: topic)
-        - if topic.length > max_project_topic_length
-          %a.gl-mr-3.has-tooltip{ data: { container: "body" }, title: topic, href: explore_project_topic_path, itemprop: 'keywords' }
-            = gl_badge_tag truncate(topic, length: max_project_topic_length)
+        - explore_project_topic_path = topic_explore_projects_path(topic_name: topic[:name])
+        - if topic[:title].length > max_project_topic_length
+          %a.gl-mr-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)
         - else
           %a.gl-mr-3{ href: explore_project_topic_path, itemprop: 'keywords' }
-            = gl_badge_tag topic
+            = gl_badge_tag topic[:title]
 
       - if project.has_extra_topics?
         - title = _('More topics')
         - 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)
-              - if topic.length > max_project_topic_length
-                %a.gl-mr-3.gl-mb-3.has-tooltip{ data: { container: "body" }, title: topic, href: explore_project_topic_path, itemprop: 'keywords' }
-                  = gl_badge_tag truncate(topic, length: max_project_topic_length)
+              - explore_project_topic_path = topic_explore_projects_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)
               - else
                 %a.gl-mr-3.gl-mb-3{ href: explore_project_topic_path, itemprop: 'keywords' }
-                  = gl_badge_tag topic
+                  = gl_badge_tag topic[:title]
         .text-nowrap{ role: 'button', tabindex: 0, data: { toggle: 'popover', html: 'true', placement: 'top', title: title, content: content } }
           = _("+ %{count} more") % { count: project.count_of_extra_topics_not_shown }
diff --git a/app/views/shared/runners/_form.html.haml b/app/views/shared/runners/_form.html.haml
index 8d0069a7664..024b06fe97a 100644
--- a/app/views/shared/runners/_form.html.haml
+++ b/app/views/shared/runners/_form.html.haml
@@ -1,30 +1,22 @@
-= form_for runner, url: runner_form_url do |f|
+= gitlab_ui_form_for runner, url: runner_form_url do |f|
   = form_errors(runner)
   .form-group.row
     = label :active, _("Active"), class: 'col-form-label col-sm-2'
     .col-sm-10
-      .form-check
-        = f.check_box :active, { class: 'form-check-input' }
-        %label.light{ for: :runner_active }= _("Paused runners don't accept new jobs")
+      = f.gitlab_ui_checkbox_component :active, _("Paused runners don't accept new jobs")
   .form-group.row
     = label :protected, _("Protected"), class: 'col-form-label col-sm-2'
     .col-sm-10
-      .form-check
-        = f.check_box :access_level, { class: 'form-check-input' }, 'ref_protected', 'not_protected'
-        %label.light{ for: :runner_access_level }= _('This runner will only run on pipelines triggered on protected branches')
+      = f.gitlab_ui_checkbox_component :access_level, _('This runner will only run on pipelines triggered on protected branches'), checked_value: 'ref_protected', unchecked_value: 'not_protected'
   .form-group.row
     = label :run_untagged, _('Run untagged jobs'), class: 'col-form-label col-sm-2'
     .col-sm-10
-      .form-check
-        = f.check_box :run_untagged, { class: 'form-check-input' }
-        %label.light{ for: :runner_run_untagged }= _('Indicates whether this runner can pick jobs without tags')
+      = f.gitlab_ui_checkbox_component :run_untagged, _('Indicates whether this runner can pick jobs without tags')
   - unless runner.group_type?
     .form-group.row
       = label :locked, _('Lock to current projects'), class: 'col-form-label col-sm-2'
       .col-sm-10
-        .form-check
-          = f.check_box :locked, { class: 'form-check-input' }
-          %label.light{ for: :runner_locked }= _('When a runner is locked, it cannot be assigned to other projects')
+        = f.gitlab_ui_checkbox_component :locked, _('When a runner is locked, it cannot be assigned to other projects')
   .form-group.row
     = label_tag :ip_address, class: 'col-form-label col-sm-2' do
       = _('IP Address')
diff --git a/app/views/shared/runners/_runner_type_alert.html.haml b/app/views/shared/runners/_runner_type_alert.html.haml
index 365cee5fadc..4bf02b71109 100644
--- a/app/views/shared/runners/_runner_type_alert.html.haml
+++ b/app/views/shared/runners/_runner_type_alert.html.haml
@@ -3,14 +3,14 @@
 - if runner.group_type?
   = render Pajamas::AlertComponent.new(alert_class: alert_class,
     title: s_('Runners|This runner is available to all projects and subgroups in a group.'),
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = s_('Runners|Use Group runners when you want all projects in a group to have access to a set of runners.')
       = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'group-runners'), target: '_blank', rel: 'noopener noreferrer'
 - else
   = render Pajamas::AlertComponent.new(alert_class: alert_class,
     title: s_('Runners|This runner is associated with specific projects.'),
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = s_('Runners|You can set up a specific runner to be used by multiple projects but you cannot make this a shared runner.')
       = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'specific-runners'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index 4e373dda013..3cd70dab4d5 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -4,21 +4,20 @@
 %li.snippet-row.py-3{ data: { qa_selector: 'snippet_link', qa_snippet_title: snippet.title } }
   = image_tag avatar_icon_for_user(snippet.author), class: "avatar s40 d-none d-sm-block", alt: ''
 
-  .title
-    = link_to gitlab_snippet_path(snippet) do
-      = snippet.title
+  = link_to gitlab_snippet_path(snippet), class: "title" do
+    = snippet.title
 
-    %ul.controls{ data: { qa_selector: 'snippet_file_count_content', qa_snippet_files: snippet.statistics&.file_count } }
-      %li
-        = snippet_file_count(snippet)
-      %li
-        = link_to gitlab_snippet_path(snippet, anchor: 'notes'), class: ('no-comments' if notes_count == 0) do
-          = sprite_icon('comments', css_class: 'gl-vertical-align-text-bottom')
-          = notes_count
-      %li
-        %span.sr-only{ data: { qa_selector: 'snippet_visibility_content', qa_snippet_visibility: visibility_level_label(snippet.visibility_level) } }
-          = visibility_level_label(snippet.visibility_level)
-        = visibility_level_icon(snippet.visibility_level)
+  %ul.controls{ data: { qa_selector: 'snippet_file_count_content', qa_snippet_files: snippet.statistics&.file_count } }
+    %li
+      = snippet_file_count(snippet)
+    %li
+      = link_to gitlab_snippet_path(snippet, anchor: 'notes'), class: ('no-comments' if notes_count == 0) do
+        = sprite_icon('comments', css_class: 'gl-vertical-align-text-bottom')
+        = notes_count
+    %li
+      %span.sr-only{ data: { qa_selector: 'snippet_visibility_content', qa_snippet_visibility: visibility_level_label(snippet.visibility_level) } }
+        = visibility_level_label(snippet.visibility_level)
+      = visibility_level_icon(snippet.visibility_level)
 
   .snippet-info
     #{snippet.to_reference} &middot;
diff --git a/app/views/shared/topics/_topic.html.haml b/app/views/shared/topics/_topic.html.haml
index a47d4495777..ca1098511da 100644
--- a/app/views/shared/topics/_topic.html.haml
+++ b/app/views/shared/topics/_topic.html.haml
@@ -1,4 +1,4 @@
-- max_topic_name_length = 30
+- max_topic_title_length = 30
 - detail_page_link = topic_explore_projects_path(topic_name: topic.name)
 
 .col-lg-3.col-md-4.col-sm-12
@@ -8,9 +8,9 @@
         = link_to detail_page_link do
           = topic_icon(topic, class: "avatar s40")
       = link_to detail_page_link do
-        - if topic.name.length > max_topic_name_length
-          %h5.str-truncated.has-tooltip{ title: topic.name }
-            = truncate(topic.name, length: max_topic_name_length)
+        - if topic.title_or_name.length > max_topic_title_length
+          %h5.gl-str-truncated.has-tooltip{ title: topic.title_or_name }
+            = truncate(topic.title_or_name, length: max_topic_title_length)
         - else
           %h5
-            = topic.name
+            = topic.title_or_name
diff --git a/app/views/shared/web_hooks/_hook_errors.html.haml b/app/views/shared/web_hooks/_hook_errors.html.haml
index a100a620cea..d95efe83e15 100644
--- a/app/views/shared/web_hooks/_hook_errors.html.haml
+++ b/app/views/shared/web_hooks/_hook_errors.html.haml
@@ -11,13 +11,13 @@
     support_link_start: link_start % { url: support_path },
     support_link_end: link_end }
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook was automatically disabled'),
-    variant: :danger) do
-    .gl-alert-body
+    variant: :danger) do |c|
+    = c.body do
       = s_('Webhooks|The webhook was triggered more than %{limit} times per minute and is now disabled. To re-enable this webhook, fix the problems shown in %{strong_start}Recent events%{strong_end}, then re-test your settings. %{support_link_start}Contact Support%{support_link_end} if you need help re-enabling your webhook.').html_safe % placeholders
 - elsif hook.permanently_disabled?
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook failed to connect'),
-    variant: :danger) do
-    .gl-alert-body
+    variant: :danger) do |c|
+    = c.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')
@@ -27,6 +27,6 @@
     help_link_start: link_start % { url: help_path },
     help_link_end: link_end }
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook fails to connect'),
-    variant: :warning) do
-    .gl-alert-body
+    variant: :warning) do |c|
+    = c.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