Add latest changes from gitlab-org/gitlab@15-9-stable-eev15.9.0-rc42

183 files changed, 947 insertions, 925 deletions

diff --git a/app/views/abuse_reports/new.html.haml b/app/views/abuse_reports/new.html.haml
index 393021ed93c..8b9bbfd0a59 100644
--- a/app/views/abuse_reports/new.html.haml
+++ b/app/views/abuse_reports/new.html.haml
@@ -8,7 +8,9 @@
       = _("A member of the abuse team will review your report as soon as possible.")
 
 = gitlab_ui_form_for @abuse_report, html: { class: 'js-quick-submit'} do |f|
-  = form_errors(@abuse_report)
+  .row
+    .col-lg-8
+      = form_errors(@abuse_report)
 
   = f.hidden_field :user_id
   = f.hidden_field :category
@@ -23,6 +25,7 @@
     .col-lg-8
       = f.label :reported_from
       = f.text_field :reported_from_url, class: "form-control", readonly: true
+  #js-links-to-spam{ data: { links: Array(@abuse_report.links_to_spam) } }
   .form-group.row
     .col-lg-8
       = f.label :reason
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 21f69f6700f..87c251aa10c 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -55,7 +55,9 @@
         = f.gitlab_ui_checkbox_component :deactivate_dormant_users, _('Deactivate dormant users after a period of inactivity'), help_text: _('Users can reactivate their account by signing in. %{link_start}Learn more.%{link_end}').html_safe % { link_start: dormant_users_help_link_start, link_end: '</a>'.html_safe }
         .form-group
           = f.label :deactivate_dormant_users_period, _('Days of inactivity before deactivation'), class: 'label-light'
-          = f.number_field :deactivate_dormant_users_period, class: 'form-control gl-form-input', min: '90', step: '1'
+          = f.number_field :deactivate_dormant_users_period, class: 'form-control gl-form-input', min: 90, required: true
+          #application_setting_deactivate_dormant_users_period_error.form-text.gl-text-red-500.gl-display-none
+            = _('Please enter a value of 90 days or more')
           .form-text.text-muted
             = _('Must be 90 days or more.')
 
diff --git a/app/views/admin/application_settings/_email.html.haml b/app/views/admin/application_settings/_email.html.haml
index e0ff1f4be43..80a7d3607ef 100644
--- a/app/views/admin/application_settings/_email.html.haml
+++ b/app/views/admin/application_settings/_email.html.haml
@@ -21,4 +21,11 @@
     .form-group
       = f.gitlab_ui_checkbox_component :user_deactivation_emails_enabled, _('Enable user deactivation emails'), help_text: _('Send emails to users upon account deactivation.')
 
+    - if Feature.enabled?(:deactivation_email_additional_text)
+      .form-group
+        = f.label :deactivation_email_additional_text, _('Additional text for deactivation email')
+        = f.text_area :deactivation_email_additional_text, class: 'form-control gl-form-input', rows: 4
+        .form-text.text-muted
+          = _('Text added to the body of user deactivation email messages. 1000 character limit.')
+
   = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_external_authorization_service_form.html.haml b/app/views/admin/application_settings/_external_authorization_service_form.html.haml
index a5e10846488..1b62083849b 100644
--- a/app/views/admin/application_settings/_external_authorization_service_form.html.haml
+++ b/app/views/admin/application_settings/_external_authorization_service_form.html.haml
@@ -17,6 +17,9 @@
           = f.gitlab_ui_checkbox_component :external_authorization_service_enabled,
             s_('ExternalAuthorization|Enable classification control using an external service'),
             help_text: external_authorization_description
+        = f.gitlab_ui_checkbox_component :allow_deploy_tokens_and_keys_with_external_authn,
+            s_('ExternalAuthorization|Allow deploy tokens and deploy keys to be used with external authorization'),
+            help_text: external_authorization_allow_token_help_text
         .form-group
           = f.label :external_authorization_service_url, s_('ExternalAuthorization|Service URL'), class: 'label-bold'
           = f.text_field :external_authorization_service_url, class: 'form-control gl-form-input'
diff --git a/app/views/admin/application_settings/_help_page.html.haml b/app/views/admin/application_settings/_help_page.html.haml
index 11ebad07e9a..e76a83662af 100644
--- a/app/views/admin/application_settings/_help_page.html.haml
+++ b/app/views/admin/application_settings/_help_page.html.haml
@@ -12,7 +12,7 @@
       = f.gitlab_ui_checkbox_component :help_page_hide_commercial_content, _('Hide marketing-related entries from the Help page')
     .form-group
       = f.label :help_page_support_url, _('Support page URL'), class: 'label-bold'
-      = f.text_field :help_page_support_url, class: 'form-control gl-form-input', placeholder: 'https://company.example.com/getting-help', :'aria-describedby' => 'support_help_block'
+      = f.text_field :help_page_support_url, class: 'form-control gl-form-input', placeholder: 'https://company.example.com/get-help', :'aria-describedby' => 'support_help_block'
       %span.form-text.text-muted#support_help_block= _('Alternate support URL for Help page and Help dropdown.')
 
     .form-group
diff --git a/app/views/admin/application_settings/_jira_connect.html.haml b/app/views/admin/application_settings/_jira_connect.html.haml
index ad0660797ee..235b6855123 100644
--- a/app/views/admin/application_settings/_jira_connect.html.haml
+++ b/app/views/admin/application_settings/_jira_connect.html.haml
@@ -8,7 +8,12 @@
       = expanded ? _('Collapse') : _('Expand')
     %p
       = s_('JiraConnect|Configure your Jira Connect Application ID.')
-      = link_to sprite_icon('question-o'), 'https://marketplace.atlassian.com/apps/1221011/gitlab-com-for-jira-cloud', target: '_blank', rel: "noopener noreferrer", class: 'has-tooltip', title: _('More information'), aria: { label: _('GitLab for Jira Cloud') }
+      = link_to sprite_icon('question-o'),
+          help_page_path('integration/jira/connect-app',
+          aria: { label: _('GitLab for Jira Cloud') },
+          class: 'has-tooltip',
+          anchor: 'connect-the-gitlab-for-jira-cloud-app-for-self-managed-instances'),
+          title: _('More information')
 
   .settings-content
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-jira-connect-application-id-settings'), html: { class: 'fieldset-form', id: 'jira-connect-application-id-settings' } do |f|
@@ -24,4 +29,8 @@
           = f.label :jira_connect_proxy_url, s_('JiraConnect|Jira Connect Proxy URL'), class: 'label-bold'
           = f.text_field :jira_connect_proxy_url, class: 'form-control gl-form-input'
 
+      %fieldset
+        .form-group
+          = f.gitlab_ui_checkbox_component :jira_connect_public_key_storage_enabled, s_('JiraConnect|Enable public key storage')
+
       = f.submit _('Save changes'), pajamas_button: true
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 08486a808bf..baf7c5de7b9 100644
--- a/app/views/admin/application_settings/_runner_registrars_form.html.haml
+++ b/app/views/admin/application_settings/_runner_registrars_form.html.haml
@@ -4,7 +4,7 @@
   %fieldset
     .gl-form-group
       %span.form-text.gl-mb-3.gl-mt-0
-        = _('If no options are selected, only administrators can register runners.')
+        = s_('Runners|If both settings are disabled, new runners cannot be registered.')
         = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'restrict-runner-registration-by-all-users-in-an-instance'), target: '_blank', rel: 'noopener noreferrer'
       = hidden_field_tag "application_setting[valid_runner_registrars][]", nil
       - ApplicationSetting::VALID_RUNNER_REGISTRAR_TYPES.each do |type|
diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml
index 3e2551d753a..50b5e797559 100644
--- a/app/views/admin/application_settings/_signin.html.haml
+++ b/app/views/admin/application_settings/_signin.html.haml
@@ -39,7 +39,7 @@
     .form-group
       = f.label :unknown_sign_in, _('Email notification for unknown sign-ins'), class: 'label-bold'
       - 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'
+      - help_link = link_to _('Learn more.'), help_page_path('user/profile/notifications.md', anchor: 'notifications-for-unknown-sign-ins'), 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 }
diff --git a/app/views/admin/application_settings/_spam.html.haml b/app/views/admin/application_settings/_spam.html.haml
index 96face44344..abc7abe92ad 100644
--- a/app/views/admin/application_settings/_spam.html.haml
+++ b/app/views/admin/application_settings/_spam.html.haml
@@ -47,6 +47,10 @@
       help_text: _("Helps prevent bots from creating issues.")
 
     .form-group
+      = f.gitlab_ui_checkbox_component :allow_possible_spam, _('Allow possible spam'),
+      help_text: _('Only log Akismet verdict, do not prevent issue or snippet creation when spam is detected.')
+
+    .form-group
       = f.label :akismet_api_key, _('Akismet API Key'), class: 'label-bold'
       = f.text_field :akismet_api_key, class: 'form-control gl-form-input'
       .form-text.text-muted
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 e01126e32e1..0305a9487ca 100644
--- a/app/views/admin/application_settings/_visibility_and_access.html.haml
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -14,13 +14,15 @@
     .form-group.visibility-level-setting
       = 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 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.')
+    %fieldset.form-group.gl-form-group{ data: { testid: 'restricted-visibility-levels' } }
+      %legend.col-form-label
+        = s_('AdminSettings|Restricted visibility levels')
+        %small.form-text.text-gl-muted
+          = s_('AdminSettings|Prevent non-administrators from using the selected visibility levels for groups, projects and snippets.')
       = hidden_field_tag 'application_setting[restricted_visibility_levels][]'
-      - restricted_level_checkboxes(f).each do |level|
-        = level
+      .gl-form-checkbox-group
+        - restricted_level_checkboxes(f).each do |checkbox|
+          = checkbox
     .form-group
       = 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
diff --git a/app/views/admin/application_settings/appearances/_form.html.haml b/app/views/admin/application_settings/appearances/_form.html.haml
index 5f51e91436c..6c6334905ca 100644
--- a/app/views/admin/application_settings/appearances/_form.html.haml
+++ b/app/views/admin/application_settings/appearances/_form.html.haml
@@ -10,7 +10,7 @@
 
     .col-lg-8
       .form-group
-        = f.label :header_logo, _('Header logo'), class: 'col-form-label label-bold pt-0'
+        = f.label :header_logo, _('Header logo'), class: 'col-form-label  gl-pt-0'
         %p
           - if @appearance.header_logo?
             = image_tag @appearance.header_logo_path, class: 'appearance-light-logo-preview'
@@ -29,7 +29,7 @@
 
     .col-lg-8
       .form-group
-        = f.label :favicon, _('Favicon'), class: 'col-form-label label-bold pt-0'
+        = f.label :favicon, _('Favicon'), class: 'col-form-label  gl-pt-0'
         %p
           - if @appearance.favicon?
             = image_tag @appearance.favicon_path, class: 'appearance-light-logo-preview'
@@ -53,15 +53,15 @@
 
     .col-lg-8
       .form-group
-        = f.label :title, class: 'col-form-label label-bold'
+        = f.label :title, class: 'col-form-label'
         = f.text_field :title, class: "form-control gl-form-input"
       .form-group
-        = f.label :description, class: 'col-form-label label-bold'
+        = f.label :description, class: 'col-form-label'
         = f.text_area :description, class: "form-control gl-form-input", rows: 10
         .form-text.text-muted
           = parsed_with_gfm
       .form-group
-        = f.label :logo, class: 'col-form-label label-bold pt-0'
+        = f.label :logo, class: 'col-form-label  gl-pt-0'
         %p
           - if @appearance.logo?
             = image_tag @appearance.logo_path, class: 'appearance-logo-preview'
@@ -72,7 +72,38 @@
           = f.hidden_field :logo_cache
           = f.file_field :logo, class: "", accept: 'image/*'
           .form-text.text-muted
-            = _('Maximum file size is 1MB. Pages are optimized for a 640x360 px logo.')
+            = _('Maximum file size is 1 MB. Pages are optimized for a 128x128 px logo.')
+
+  %hr
+  .row
+    .col-lg-4.profile-settings-sidebar
+      %h4.gl-mt-0= _('Progressive Web App (PWA)')
+
+    .col-lg-8
+      .form-group
+        = f.label _("Name"), class: 'col-form-label'
+        = f.text_field :pwa_name, class: "form-control gl-form-input"
+      .form-group
+        = f.label _("Short name"), class: 'col-form-label'
+        = f.text_field :pwa_short_name, class: "form-control gl-form-input"
+      .form-group
+        = f.label _("Description"), class: 'col-form-label'
+        = f.text_area :pwa_description, class: "form-control gl-form-input", rows: 10
+        .form-text.text-muted
+          = parsed_with_gfm
+      .form-group
+        = f.label :pwa_icon, class: 'col-form-label  gl-pt-0'
+        %p
+          - if @appearance.pwa_icon?
+            = image_tag @appearance.pwa_icon_path, class: 'appearance-pwa-icon-preview'
+            - if @appearance.persisted?
+              %br
+              = link_to _('Remove icon'), pwa_icon_admin_application_settings_appearances_path, data: { confirm: _("Icon will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove icon') }, method: :delete, class: "btn gl-button btn-danger btn-danger-secondary btn-sm remove-logo"
+            %hr
+          = f.hidden_field :pwa_icon_cache
+          = f.file_field :pwa_icon, class: "", accept: 'image/*'
+          .form-text.text-muted
+            = _('Maximum file size is 1MB.')
 
   %hr
   .row
@@ -81,7 +112,7 @@
 
     .col-lg-8
       .form-group
-        = f.label :new_project_guidelines, class: 'col-form-label label-bold'
+        = f.label :new_project_guidelines, class: 'col-form-label'
         %p
           = f.text_area :new_project_guidelines, class: "form-control gl-form-input", rows: 10
           .form-text.text-muted
@@ -94,7 +125,7 @@
 
     .col-lg-8
       .form-group
-        = f.label :profile_image_guidelines, class: 'col-form-label label-bold'
+        = f.label :profile_image_guidelines, class: 'col-form-label'
         %p
           = f.text_area :profile_image_guidelines, class: "form-control gl-form-input", rows: 10
           .form-text.text-muted
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index dceee07019c..a4af1913d22 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -3,7 +3,7 @@
 - add_page_specific_style 'page_bundles/settings'
 - @content_class = "limit-container-width" unless fluid_layout
 
-%section.settings.as-visibility-access.no-animate#js-visibility-settings{ class: ('expanded' if expanded_by_default?) }
+%section.settings.as-visibility-access.no-animate#js-visibility-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'admin-visibility-access-settings' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Visibility and access controls')
@@ -89,26 +89,6 @@
   .settings-content
     = render 'terminal'
 
-%section.settings.no-animate#js-web-ide-settings{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Web IDE')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %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|
-      = form_errors(@application_setting)
-
-      %fieldset
-        .form-group
-          - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('user/project/web_ide/index', anchor: 'enable-live-preview') }
-          = f.gitlab_ui_checkbox_component :web_ide_clientside_preview_enabled,
-              s_('IDE|Live Preview'),
-              help_text: s_('Preview JavaScript projects in the Web IDE with CodeSandbox Live Preview. %{link_start}Learn more.%{link_end} ').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-      = f.submit _('Save changes'), pajamas_button: true
-
 = render_if_exists 'admin/application_settings/maintenance_mode_settings_form'
 = render 'admin/application_settings/gitpod'
 = render 'admin/application_settings/kroki'
diff --git a/app/views/admin/applications/index.html.haml b/app/views/admin/applications/index.html.haml
index a92bad5e601..d6a0974d10f 100644
--- a/app/views/admin/applications/index.html.haml
+++ b/app/views/admin/applications/index.html.haml
@@ -43,7 +43,9 @@
             %td= application.redirect_uri
             %td= application.trusted? ? _('Yes'): _('No')
             %td= application.confidential? ? _('Yes'): _('No')
-            %td= link_to 'Edit', edit_admin_application_path(application), class: 'gl-button btn btn-link'
+            %td
+              = render Pajamas::ButtonComponent.new(href: edit_admin_application_path(application), variant: :link) do
+                = _('Edit')
             %td= render 'delete_form', application: application
 
 = paginate @applications, theme: 'gitlab'
diff --git a/app/views/admin/background_migrations/_migration.html.haml b/app/views/admin/background_migrations/_migration.html.haml
index f4906028e39..99cb63709f5 100644
--- a/app/views/admin/background_migrations/_migration.html.haml
+++ b/app/views/admin/background_migrations/_migration.html.haml
@@ -12,14 +12,17 @@
     = 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, 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')
+      = render Pajamas::ButtonComponent.new(icon: 'pause',
+        method: :post,
+        href: pause_admin_background_migration_path(migration, database: params[:database]),
+        button_options: { class: 'has-tooltip', title: _('Pause'), 'aria-label' => _('Pause') })
     - elsif migration.paused?
-      = 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')
+      = render Pajamas::ButtonComponent.new(icon: 'play',
+        method: :post,
+        href: resume_admin_background_migration_path(migration, database: params[:database]),
+        button_options: { class: 'has-tooltip', title: _('Resume'), 'aria-label' => _('Resume') })
     - elsif migration.failed?
-      = 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')
+      = render Pajamas::ButtonComponent.new(icon: 'retry',
+        method: :post,
+        href: retry_admin_background_migration_path(migration, database: params[:database]),
+        button_options: { class: 'has-tooltip', title: _('Retry'), 'aria-label' => _('Retry') })
diff --git a/app/views/admin/broadcast_messages/edit.html.haml b/app/views/admin/broadcast_messages/edit.html.haml
index bef435c07f7..212cc437d3d 100644
--- a/app/views/admin/broadcast_messages/edit.html.haml
+++ b/app/views/admin/broadcast_messages/edit.html.haml
@@ -1,4 +1,5 @@
-- breadcrumb_title _("Messages")
+- add_to_breadcrumbs _("Messages"), admin_broadcast_messages_path
+- breadcrumb_title @broadcast_message.id
 - page_title _("Broadcast Messages")
 
 #js-broadcast-message{ data: {
diff --git a/app/views/admin/impersonation_tokens/index.html.haml b/app/views/admin/impersonation_tokens/index.html.haml
index 8cf1d8555ce..0208b8ad836 100644
--- a/app/views/admin/impersonation_tokens/index.html.haml
+++ b/app/views/admin/impersonation_tokens/index.html.haml
@@ -18,6 +18,6 @@
         impersonation: true,
         token: @impersonation_token,
         scopes: @scopes,
-        help_path: help_page_path('api/index', anchor: 'impersonation-tokens')
+        help_path: help_page_path('api/rest/index', anchor: 'impersonation-tokens')
 
     #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_impersonation_tokens.to_json, information: _("To see all the user's personal access tokens you must impersonate them first.") } }
diff --git a/app/views/admin/jobs/index.html.haml b/app/views/admin/jobs/index.html.haml
index 667c90f0228..7b00019cc21 100644
--- a/app/views/admin/jobs/index.html.haml
+++ b/app/views/admin/jobs/index.html.haml
@@ -4,21 +4,25 @@
 - breadcrumb_title _("Jobs")
 - page_title _("Jobs")
 
-.top-area
-  .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
-    .fade-left= sprite_icon('chevron-lg-left', size: 12)
-    .fade-right= sprite_icon('chevron-lg-right', size: 12)
-    - build_path_proc = ->(scope) { admin_jobs_path(scope: scope) }
-    = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
+- if Feature.enabled?(:admin_jobs_vue)
+  #admin-jobs-app{ data: { job_statuses: job_statuses.to_json, empty_state_svg_path: image_path('jobs-empty-state.svg'), url: cancel_all_admin_jobs_path } }
 
-  - if @all_builds.running_or_pending.any?
-    #js-stop-jobs-modal
-    .nav-controls
-      = render Pajamas::ButtonComponent.new(variant: :danger, button_options: { id: 'js-stop-jobs-button', data: { url: cancel_all_admin_jobs_path } }) do
-        = s_('AdminArea|Stop all jobs')
+- else
+  .top-area
+    .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
+      .fade-left= sprite_icon('chevron-lg-left', size: 12)
+      .fade-right= sprite_icon('chevron-lg-right', size: 12)
+      - build_path_proc = ->(scope) { admin_jobs_path(scope: scope) }
+      = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
-.row-content-block.second-block
-  #{(@scope || 'all').capitalize} jobs
+    - if @all_builds.running_or_pending.any?
+      #js-stop-jobs-modal
+      .nav-controls
+        = render Pajamas::ButtonComponent.new(variant: :danger, button_options: { id: 'js-stop-jobs-button', data: { url: cancel_all_admin_jobs_path } }) do
+          = s_('AdminArea|Stop all jobs')
 
-%ul.content-list.builds-content-list.admin-builds-table
-  = render "projects/jobs/table", builds: @builds, admin: true
+  .row-content-block.second-block
+    #{(@scope || 'all').capitalize} jobs
+
+  %ul.content-list.builds-content-list.admin-builds-table
+    = render "projects/jobs/table", builds: @builds, admin: true
diff --git a/app/views/admin/labels/index.html.haml b/app/views/admin/labels/index.html.haml
index d6f2898a383..8d6df064c3c 100644
--- a/app/views/admin/labels/index.html.haml
+++ b/app/views/admin/labels/index.html.haml
@@ -1,7 +1,9 @@
 - page_title _("Labels")
 
 %div
-  = link_to new_admin_label_path, class: "float-right btn gl-button btn-confirm" do
+  = render Pajamas::ButtonComponent.new(variant: :confirm,
+    href: new_admin_label_path,
+    button_options: { class: 'float-right' }) do
     = _('New label')
   %h1.page-title.gl-font-size-h-display
     = _('Labels')
diff --git a/app/views/admin/projects/index.html.haml b/app/views/admin/projects/index.html.haml
index 18cd3400c60..e942a513166 100644
--- a/app/views/admin/projects/index.html.haml
+++ b/app/views/admin/projects/index.html.haml
@@ -2,7 +2,7 @@
 - add_page_specific_style 'page_bundles/search'
 - params[:visibility_level] ||= []
 
-.top-area
+.top-area.gl-flex-direction-column-reverse
   .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
     .fade-left= sprite_icon('chevron-lg-left', size: 12)
     .fade-right= sprite_icon('chevron-lg-right', size: 12)
@@ -12,19 +12,7 @@
       = gl_tab_link_to _('Internal'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL)
       = gl_tab_link_to _('Public'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC)
 
-
-  .nav-controls.gl-pl-2
-    .search-holder
-      = render 'shared/projects/search_form', autofocus: true, admin_view: true
-      - current_namespace = _('Namespace')
-      - if params[:namespace_id].present?
-        - namespace = Namespace.find(params[:namespace_id])
-        - current_namespace = "#{namespace.kind}: #{namespace.full_path}"
-      %button.dropdown-menu-toggle.btn.btn-default.btn-md.gl-button.js-namespace-select{ data: { show_any: 'true', field_name: 'namespace_id', placeholder: current_namespace, update_location: 'true' }, type: 'button' }
-        %span.gl-dropdown-button-text
-          = current_namespace
-
-      = link_to new_project_path, class: 'gl-button btn btn-confirm' do
-        = _('New Project')
+  .nav-controls
+    = render 'shared/projects/search_form', autofocus: true, admin_view: true
 
 = render 'projects'
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index bfa17daf1c2..464027e73f4 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -140,10 +140,7 @@
             .col-sm-3.col-form-label
               = f.label :new_namespace_id, _("Namespace")
             .col-sm-9
-              - placeholder = _('Search for Namespace')
-              %button.dropdown-menu-toggle.btn.btn-default.btn-md.gl-button.js-namespace-select{ data: { field_name: 'new_namespace_id', placeholder: placeholder }, type: 'button' }
-                %span.gl-dropdown-button-text
-                  = placeholder
+              .js-namespace-select{ data: { field_name: 'new_namespace_id', toggle_text_placeholder: _('Search for Namespace') } }
 
           .form-group.row
             .offset-sm-3.col-sm-9
diff --git a/app/views/admin/runners/new.html.haml b/app/views/admin/runners/new.html.haml
new file mode 100644
index 00000000000..dd93ecfcf8c
--- /dev/null
+++ b/app/views/admin/runners/new.html.haml
@@ -0,0 +1,5 @@
+- add_to_breadcrumbs _('Runners'), admin_runners_path
+- breadcrumb_title s_('Runners|New')
+- page_title s_('Runners|Create an instance runner')
+
+#js-admin-new-runner{ data: { legacy_registration_token: Gitlab::CurrentSettings.runners_registration_token } }
diff --git a/app/views/admin/users/_users.html.haml b/app/views/admin/users/_users.html.haml
index 73027441fe6..96dd16a96da 100644
--- a/app/views/admin/users/_users.html.haml
+++ b/app/views/admin/users/_users.html.haml
@@ -32,10 +32,9 @@
       = gl_tab_link_to admin_users_path(filter: "blocked"), { item_active: active_when(params[:filter] == 'blocked'), class: 'gl-border-0!' } do
         = s_('AdminUsers|Blocked')
         = gl_tab_counter_badge(limited_counter_with_delimiter(User.blocked))
-      - if ban_feature_available?
-        = gl_tab_link_to admin_users_path(filter: "banned"), { item_active: active_when(params[:filter] == 'banned'), class: 'gl-border-0!' } do
-          = s_('AdminUsers|Banned')
-          = gl_tab_counter_badge(limited_counter_with_delimiter(User.banned))
+      = gl_tab_link_to admin_users_path(filter: "banned"), { item_active: active_when(params[:filter] == 'banned'), class: 'gl-border-0!' } do
+        = s_('AdminUsers|Banned')
+        = gl_tab_counter_badge(limited_counter_with_delimiter(User.banned))
       = gl_tab_link_to admin_users_path(filter: "blocked_pending_approval"), { item_active: active_when(params[:filter] == 'blocked_pending_approval'), class: 'filter-blocked-pending-approval gl-border-0!', data: { qa_selector: 'pending_approval_tab' } } do
         = s_('AdminUsers|Pending approval')
         = gl_tab_counter_badge(limited_counter_with_delimiter(User.blocked_pending_approval))
@@ -64,7 +63,7 @@
         = button_tag s_('AdminUsers|Search users') if Rails.env.test?
       .dropdown.gl-sm-ml-3
         = label_tag s_('AdminUsers|Sort by')
-        = gl_redirect_listbox_tag admin_users_sort_options(filter: params[:filter], search_query: params[:search_query]), @sort, data: { right: true }
+        = gl_redirect_listbox_tag admin_users_sort_options(filter: params[:filter], search_query: params[:search_query]), @sort, data: { placement: 'right' }
 
 #js-admin-users-app{ data: admin_users_data_attributes(@users) }
   = render Pajamas::SpinnerComponent.new(size: :lg, class: 'gl-my-7')
diff --git a/app/views/authentication/_register.html.haml b/app/views/authentication/_register.html.haml
index 5eed969ed35..d6fe20e48bf 100644
--- a/app/views/authentication/_register.html.haml
+++ b/app/views/authentication/_register.html.haml
@@ -9,13 +9,18 @@
   - if current_user.two_factor_otp_enabled?
     .row.gl-mb-3
       .col-md-5
-        %button#js-setup-token-2fa-device.gl-button.btn.btn-confirm= _("Set up new device")
+        = render Pajamas::ButtonComponent.new(variant: :confirm,
+          button_options: { id: 'js-setup-token-2fa-device' }) do
+          = _("Set up new device")
       .col-md-7
         %p= _("Your device needs to be set up. Plug it in (if needed) and click the button on the left.")
   - else
     .row.gl-mb-3
       .col-md-4
-        %button#js-setup-token-2fa-device.gl-button.btn.btn-confirm.btn-block{ disabled: true }= _("Set up new device")
+        = render Pajamas::ButtonComponent.new(variant: :confirm,
+          disabled: true,
+          button_options: { id: 'js-setup-token-2fa-device' }) do
+          = _("Set up new device")
       .col-md-8
         %p= _("You need to register a two-factor authentication app before you can set up a device.")
 
@@ -24,7 +29,8 @@
   %div
     %p
       %span <%= error_message %> (<%= error_name %>)
-    %a.btn.btn-default.gl-button#js-token-2fa-try-again= _("Try again?")
+    = render Pajamas::ButtonComponent.new(button_options: { id: 'js-token-2fa-try-again' }) do
+      = _("Try again?")
 
 -# haml-lint:disable InlineJavaScript
 %script#js-register-token-2fa-registered{ type: "text/template" }
@@ -37,4 +43,5 @@
             = text_field_tag 'device_registration[name]', nil, class: 'form-control', placeholder: _("Pick a name")
           .col-md-3
             = hidden_field_tag 'device_registration[device_response]', nil, class: 'form-control', required: true, id: "js-device-response"
-            = submit_tag _("Register device"), class: "gl-button btn btn-confirm"
+            = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm) do
+              = _("Register device")
diff --git a/app/views/ci/runner/_setup_runner_in_aws.html.haml b/app/views/ci/runner/_setup_runner_in_aws.html.haml
deleted file mode 100644
index 09fa0176da6..00000000000
--- a/app/views/ci/runner/_setup_runner_in_aws.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-%h5= _('Use GitLab Runner in AWS')
-
-%p
-  = _('Use an AWS CloudFormation Template (CFT) to install and configure GitLab Runner in AWS.')
-
-%ol
-  %li
-    = _('Copy this registration token.')
-    %br
-    %code#registration_token{ data: { testid: 'registration_token' } }= registration_token
-    = 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'
-
-#js-runner-aws-deployments
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index af98025d257..8aaa09b7862 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -17,6 +17,7 @@
   is_group: is_group.to_s,
   group_id: @group&.id || '',
   group_path: @group&.full_path,
+  maskable_raw_regex: ci_variable_maskable_raw_regex,
   maskable_regex: ci_variable_maskable_regex,
   protected_by_default: ci_variable_protected_by_default?.to_s,
   aws_logo_svg_path: image_path('aws_logo.svg'),
@@ -24,7 +25,6 @@
   aws_tip_commands_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'use-an-image-to-run-aws-commands'),
   aws_tip_learn_link: help_page_path('ci/cloud_deployment/index.md'),
   contains_variable_reference_link: help_page_path('ci/variables/index', anchor: 'prevent-cicd-variable-expansion'),
-  protected_environment_variables_link: help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable'),
   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: 'limit-the-environment-scope-of-a-cicd-variable') } }
 
diff --git a/app/views/clusters/clusters/_advanced_settings.html.haml b/app/views/clusters/clusters/_advanced_settings.html.haml
index ddc3b7d05e1..b49f1aa061a 100644
--- a/app/views/clusters/clusters/_advanced_settings.html.haml
+++ b/app/views/clusters/clusters/_advanced_settings.html.haml
@@ -18,12 +18,18 @@
       %h4
         = s_('ClusterIntegration|Cluster management project')
 
-      %p
-        = project_select_tag('cluster[management_project_id]', class: 'hidden-filter-value', toggle_class: 'js-project-search js-project-filter js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
-            placeholder: _('Select project'), idAttribute: 'id', data: { order_by: 'last_activity_at', idattribute: 'id', simple_filter: true, allow_clear: true, include_groups: false, include_projects_in_subgroups: true, group_id: group_id, user_id: user_id }, value: @cluster.management_project_id)
-        .text-muted
-          = html_escape(s_('ClusterIntegration|A cluster management project can be used to run deployment jobs with Kubernetes %{code_open}cluster-admin%{code_close} privileges.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-          = link_to _('More information'), help_page_path('user/clusters/management_project.md'), target: '_blank', rel: 'noopener noreferrer'
+      .js-vue-project-select{ data: { label: _('Select a cluster management project'),
+          input_name: 'cluster[management_project_id]',
+          input_id: 'cluster[management_project_id]',
+          order_by: 'last_activity_at',
+          group_id: group_id,
+          user_id: user_id,
+          include_subgroups: true.to_s,
+          membership: true.to_s,
+          selected: @cluster.management_project_id } }
+      %p.text-muted.gl-mt-n5
+        = html_escape(s_('ClusterIntegration|A cluster management project can be used to run deployment jobs with Kubernetes %{code_open}cluster-admin%{code_close} privileges.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+        = link_to _('More information'), help_page_path('user/clusters/management_project.md'), target: '_blank', rel: 'noopener noreferrer'
       = field.submit _('Save changes'), pajamas_button: true
 
   .sub-section.form-group
diff --git a/app/views/clusters/clusters/_namespace.html.haml b/app/views/clusters/clusters/_namespace.html.haml
index 572f2d6d9a2..34576b6e5af 100644
--- a/app/views/clusters/clusters/_namespace.html.haml
+++ b/app/views/clusters/clusters/_namespace.html.haml
@@ -3,11 +3,12 @@
 - managed_namespace_help_link = link_to _('More information'), help_page_path('user/project/clusters/gitlab_managed_clusters.md'), target: '_blank', rel: 'noopener noreferrer'
 
 .js-namespace-prefixed
-  = platform_field.text_field :namespace,
-    label: s_('ClusterIntegration|Project namespace prefix (optional, unique)'), label_class: 'label-bold',
-    help: '%{help_text} %{help_link}'.html_safe % { help_text: managed_namespace_help_text, help_link: managed_namespace_help_link }
+  .form-group
+    = platform_field.label :namespace, s_('ClusterIntegration|Project namespace prefix (optional, unique)'), class: 'label-bold'
+    = platform_field.text_field :namespace, class: 'form-control'
+    %small.form-text.text-muted= '%{help_text} %{help_link}'.html_safe % { help_text: managed_namespace_help_text, help_link: managed_namespace_help_link }
 .js-namespace.hidden
-  = platform_field.text_field :namespace,
-    label: s_('ClusterIntegration|Project namespace (optional, unique)'), label_class: 'label-bold',
-    help: '%{help_text}'.html_safe % { help_text: non_managed_namespace_help_text },
-    disabled: true
+  .form-group
+    = platform_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)'), class: 'label-bold'
+    = platform_field.text_field :namespace, class: 'form-control', disabled: true
+    %small.form-text.text-muted= '%{help_text}'.html_safe % { help_text: non_managed_namespace_help_text }
diff --git a/app/views/clusters/clusters/_provider_details_form.html.haml b/app/views/clusters/clusters/_provider_details_form.html.haml
index 11277a83e3a..59706b6d8c4 100644
--- a/app/views/clusters/clusters/_provider_details_form.html.haml
+++ b/app/views/clusters/clusters/_provider_details_form.html.haml
@@ -1,52 +1,62 @@
-= bootstrap_form_for cluster, url: update_cluster_url_path, html: { class: 'js-provider-details gl-show-field-errors' },
+= gitlab_ui_form_for cluster, url: update_cluster_url_path, html: { class: 'js-provider-details gl-show-field-errors', role: 'form' },
   as: :cluster do |field|
-  - copy_name_btn = clipboard_button(text: cluster.name, title: s_('ClusterIntegration|Copy Kubernetes cluster name'),
-    class: 'input-group-text btn-default') if cluster.read_only_kubernetes_platform_fields?
-  = field.text_field :name, class: 'js-select-on-focus cluster-name', required: true,
-  title: s_('ClusterIntegration|Cluster name is required.'),
-  readonly: cluster.read_only_kubernetes_platform_fields?,
-  label: s_('ClusterIntegration|Kubernetes cluster name'), label_class: 'label-bold',
-  input_group_class: 'gl-field-error-anchor', append: copy_name_btn
+  .form-group
+    - copy_name_btn = clipboard_button(text: cluster.name, title: s_('ClusterIntegration|Copy Kubernetes cluster name'),
+      class: 'input-group-text btn-default') if cluster.read_only_kubernetes_platform_fields?
+    = field.label :name, s_('ClusterIntegration|Kubernetes cluster name'), class: 'label-bold required'
+    .input-group.gl-field-error-anchor
+      = field.text_field :name, class: 'form-control js-select-on-focus cluster-name', required: true,
+        title: s_('ClusterIntegration|Cluster name is required.'),
+        readonly: cluster.read_only_kubernetes_platform_fields?,
+        append: copy_name_btn
 
   = field.fields_for :platform_kubernetes, platform do |platform_field|
-    - copy_api_url = clipboard_button(text: platform.api_url, title: s_('ClusterIntegration|Copy API URL'),
-    class: 'input-group-text btn-default') if cluster.read_only_kubernetes_platform_fields?
-    = platform_field.text_field :api_url, class: 'js-select-on-focus', required: true,
-    title: s_('ClusterIntegration|API URL should be a valid http/https url.'),
-    readonly: cluster.read_only_kubernetes_platform_fields?,
-    label: s_('ClusterIntegration|API URL'), label_class: 'label-bold',
-    input_group_class: 'gl-field-error-anchor', append: copy_api_url
-
-    - copy_ca_cert_btn = clipboard_button(text: platform.ca_cert, title: s_('ClusterIntegration|Copy CA Certificate'),
-      class: 'input-group-text btn-default') if cluster.read_only_kubernetes_platform_fields?
-    = platform_field.text_area :ca_cert, class: 'js-select-on-focus', rows: '10',
-    readonly: cluster.read_only_kubernetes_platform_fields?,
-    placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'),
-    label: s_('ClusterIntegration|CA Certificate'), label_class: 'label-bold',
-    input_group_class: 'gl-field-error-anchor', append: copy_ca_cert_btn
-
-    = platform_field.password_field :token, type: 'password', class: 'js-select-on-focus js-cluster-token',
-    readonly: cluster.read_only_kubernetes_platform_fields?, autocomplete: 'new-password',
-    label: s_('ClusterIntegration|Enter new Service Token'), label_class: 'label-bold',
-    input_group_class: 'gl-field-error-anchor'
-
-    = platform_field.form_group :authorization_type do
-      = platform_field.check_box :authorization_type, { disabled: true, label: s_('ClusterIntegration|RBAC-enabled cluster'),
-      label_class: 'label-bold', inline: true }, 'rbac', 'abac'
+    .form-group
+      - copy_api_url = clipboard_button(text: platform.api_url, title: s_('ClusterIntegration|Copy API URL'),
+        class: 'input-group-text btn-default') if cluster.read_only_kubernetes_platform_fields?
+      = platform_field.label :api_url, s_('ClusterIntegration|API URL'), class: 'label-bold required'
+      .input-group.gl-field-error-anchor
+        = platform_field.text_field :api_url, class: 'form-control js-select-on-focus', required: true,
+          title: s_('ClusterIntegration|API URL should be a valid http/https url.'),
+          readonly: cluster.read_only_kubernetes_platform_fields?,
+          append: copy_api_url
+
+    .form-group
+      - copy_ca_cert_btn = clipboard_button(text: platform.ca_cert, title: s_('ClusterIntegration|Copy CA Certificate'),
+        class: 'input-group-text btn-default') if cluster.read_only_kubernetes_platform_fields?
+      = platform_field.label :ca_cert, s_('ClusterIntegration|CA Certificate'), class: 'label-bold'
+      .input-group.gl-field-error-anchor
+        = platform_field.text_area :ca_cert, class: 'form-control js-select-on-focus', rows: '10',
+          readonly: cluster.read_only_kubernetes_platform_fields?,
+          placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'),
+          append: copy_ca_cert_btn
+
+    .form-group
+      = platform_field.label :token, s_('ClusterIntegration|Enter new Service Token'), class: 'label-bold required'
+      .input-group.gl-field-error-anchor
+        = platform_field.password_field :token, type: 'password', class: 'form-control js-select-on-focus js-cluster-token',
+          readonly: cluster.read_only_kubernetes_platform_fields?, autocomplete: 'new-password'
+
+    .form-group
+      .form-check
+        = platform_field.check_box :authorization_type, { disabled: true, inline: true, class: 'form-check-input' }, 'rbac', 'abac'
+        = platform_field.label :authorization_type, s_('ClusterIntegration|RBAC-enabled cluster'), class: 'form-check-label label-bold'
       .form-text.text-muted
         = s_('ClusterIntegration|Enable this setting if using role-based access control (RBAC).')
         = s_('ClusterIntegration|This option will allow you to install applications on RBAC clusters.')
 
     .form-group
-      = field.check_box :managed, { label: s_('ClusterIntegration|GitLab-managed cluster'),
-        class: 'js-gl-managed',
-        label_class: 'label-bold' }
+      .form-check
+        = field.check_box :managed, { class: 'js-gl-managed form-check-input' }
+        = field.label :managed, s_('ClusterIntegration|GitLab-managed cluster'), class: 'form-check-label label-bold'
       .form-text.text-muted
         = s_('ClusterIntegration|Allow GitLab to manage namespaces and service accounts for this cluster.')
         = link_to _('More information'), 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-check
+        = field.check_box :namespace_per_environment, { class: 'form-check-input' }
+        = field.label :namespace_per_environment, s_('ClusterIntegration|Namespace per environment'), class: 'form-check-label 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 _('More information'), help_page_path('user/project/clusters/deploy_to_cluster.md', anchor: 'custom-namespace'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/clusters/clusters/user/_form.html.haml b/app/views/clusters/clusters/user/_form.html.haml
index 557c95f8478..ed169b2bfd1 100644
--- a/app/views/clusters/clusters/user/_form.html.haml
+++ b/app/views/clusters/clusters/user/_form.html.haml
@@ -7,48 +7,63 @@
 - rbac_help_text = s_('ClusterIntegration|Enable this setting if using role-based access control (RBAC).') + ' '
 - rbac_help_text << s_('ClusterIntegration|This option will allow you to install applications on RBAC clusters.')
 
-= bootstrap_form_for @user_cluster, html: { class: 'gl-show-field-errors' },
+= gitlab_ui_form_for @user_cluster, html: { class: 'gl-show-field-errors', role: 'form' },
   url: clusterable.create_user_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.text_field :environment_scope, required: true, title: s_('ClusterIntegration|Environment scope is required.'),
-    label: s_('ClusterIntegration|Environment scope'), label_class: 'label-bold',
-    help: s_('ClusterIntegration|Choose which of your environments will use this cluster.')
+  = form_errors(@user_cluster)
+
+  .form-group
+    = field.label :name, s_('ClusterIntegration|Kubernetes cluster name'), class: 'label-bold required'
+    = field.text_field :name, required: true, title: s_('ClusterIntegration|Cluster name is required.'), class: 'form-control'
+
+  .form-group
+    = field.label :environment_scope, s_('ClusterIntegration|Environment scope'), class: 'label-bold required'
+    = field.text_field :environment_scope, required: true, title: s_('ClusterIntegration|Environment scope is required.'), class: 'form-control'
+    %small.form-text.text-muted
+      = s_('ClusterIntegration|Choose which of your environments will use this cluster.')
 
   = field.fields_for :platform_kubernetes, @user_cluster.platform_kubernetes do |platform_kubernetes_field|
-    = platform_kubernetes_field.url_field :api_url, required: true,
-      title: s_('ClusterIntegration|API URL should be a valid http/https url.'),
-      label: s_('ClusterIntegration|API URL'), label_class: 'label-bold',
-      help: '%{help_text} %{help_link}'.html_safe % { help_text: api_url_help_text, help_link: more_info_link }
-
-    = platform_kubernetes_field.text_area :ca_cert,
-      rows: '10',
-      placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'),
-      label: s_('ClusterIntegration|CA Certificate'), label_class: 'label-bold',
-      help: '%{help_text} %{help_link}'.html_safe % { help_text: ca_cert_help_text, help_link: more_info_link }
-
-    = platform_kubernetes_field.text_field :token, required: true,
-      title: s_('ClusterIntegration|Service token is required.'), label: s_('ClusterIntegration|Service Token'),
-      autocomplete: 'off', label_class: 'label-bold',
-      help: '%{help_text} %{help_link}'.html_safe % { help_text: token_help_text, help_link: more_info_link }
-
-    = platform_kubernetes_field.form_group :authorization_type,
-      { help: '%{help_text} %{help_link}'.html_safe % { help_text: rbac_help_text, help_link: rbac_help_link } } do
-      = platform_kubernetes_field.check_box :authorization_type,
-        { data: { qa_selector: 'rbac_checkbox'}, label: s_('ClusterIntegration|RBAC-enabled cluster'),
-        label_class: 'label-bold', inline: true }, 'rbac', 'abac'
+    .form-group
+      = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL'), class: 'label-bold required'
+      = platform_kubernetes_field.url_field :api_url, required: true,
+        title: s_('ClusterIntegration|API URL should be a valid http/https url.'), class: 'form-control'
+      %small.form-text.text-muted
+        = '%{help_text} %{help_link}'.html_safe % { help_text: api_url_help_text, help_link: more_info_link }
+
+    .form-group
+      = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate'), class: 'label-bold'
+      = platform_kubernetes_field.text_area :ca_cert,
+        rows: '10',
+        placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'),
+        class: 'form-control'
+      %small.form-text.text-muted
+        = '%{help_text} %{help_link}'.html_safe % { help_text: ca_cert_help_text, help_link: more_info_link }
+
+    .form-group
+      = platform_kubernetes_field.label :token, s_('ClusterIntegration|Service Token'), class: 'label-bold required'
+      = platform_kubernetes_field.text_field :token, required: true, title: s_('ClusterIntegration|Service token is required.'), autocomplete: 'off', class: 'form-control'
+      %small.form-text.text-muted
+        = '%{help_text} %{help_link}'.html_safe % { help_text: token_help_text, help_link: more_info_link }
+
+    .form-group
+      .form-check
+        = platform_kubernetes_field.check_box :authorization_type, { data: { qa_selector: 'rbac_checkbox'}, inline: true, class: 'form-check-input' }, 'rbac', 'abac'
+        = platform_kubernetes_field.label :authorization_type, s_('ClusterIntegration|RBAC-enabled cluster'), class: 'form-check-label label-bold'
+      %small.form-text.text-muted
+        = '%{help_text} %{help_link}'.html_safe % { help_text: rbac_help_text, help_link: rbac_help_link }
 
   .form-group
-    = field.check_box :managed, { label: s_('ClusterIntegration|GitLab-managed cluster'),
-      class: 'js-gl-managed',
-      label_class: 'label-bold' }
+    .form-check
+      = field.check_box :managed, { class: 'js-gl-managed form-check-input' }
+      = field.label :managed, s_('ClusterIntegration|GitLab-managed cluster'), class: 'form-check-label 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-check
+      = field.check_box :namespace_per_environment, { class: 'form-check-input' }
+      = field.label :namespace_per_environment, s_('ClusterIntegration|Namespace per environment'), class: 'form-check-label 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'
diff --git a/app/views/dashboard/_activity_head.html.haml b/app/views/dashboard/_activity_head.html.haml
index ca9f69ab73a..f003b4f3339 100644
--- a/app/views/dashboard/_activity_head.html.haml
+++ b/app/views/dashboard/_activity_head.html.haml
@@ -3,6 +3,7 @@
 
 .top-area
   = gl_tabs_nav({ class: 'gl-border-b-0', data: { testid: 'dashboard-activity-tabs' } }) do
-    = gl_tab_link_to _("Your projects"), activity_dashboard_path, { item_active: params[:filter].nil? }
+    = gl_tab_link_to _("Your activity"), activity_dashboard_path, { item_active: params[:filter].nil? }
+    = gl_tab_link_to _("Your projects"), activity_dashboard_path(filter: 'projects')
     = gl_tab_link_to _("Starred projects"), activity_dashboard_path(filter: 'starred')
     = gl_tab_link_to _("Followed users"), activity_dashboard_path(filter: 'followed')
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index 10e653fd427..c58d4cff034 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -1,7 +1,7 @@
 = content_for :flash_message do
   = render 'shared/project_limit'
 
-.page-title-holder.d-flex.align-items-center
+.page-title-holder.gl-display-flex.gl-align-items-center
   %h1.page-title.gl-font-size-h-display= _('Projects')
 
   - if current_user.can_create_project?
@@ -10,7 +10,7 @@
         = _("New project")
 
 .top-area
-  .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0
+  .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-flex-basis-0.gl-min-w-0
     .fade-left= sprite_icon('chevron-lg-left', size: 12)
     .fade-right= sprite_icon('chevron-lg-right', size: 12)
     = render 'dashboard/projects_nav'
diff --git a/app/views/dashboard/issues.html.haml b/app/views/dashboard/issues.html.haml
index 5293f685d06..0933f6d6a94 100644
--- a/app/views/dashboard/issues.html.haml
+++ b/app/views/dashboard/issues.html.haml
@@ -13,7 +13,7 @@
 
   - if current_user
     .page-title-controls
-      = render 'shared/new_project_item_select', path: 'issues/new', label: _("issue"), with_feature_enabled: 'issues', type: :issues
+      = render 'shared/new_project_item_vue_select'
 
 - if ::Feature.enabled?(:vue_issues_dashboard)
   .js-issues-dashboard{ data: dashboard_issues_list_data(current_user) }
diff --git a/app/views/dashboard/merge_requests.html.haml b/app/views/dashboard/merge_requests.html.haml
index c921375edd1..712f987a783 100644
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@@ -10,14 +10,16 @@
 
   - if current_user
     .page-title-controls.ml-0.mb-3.ml-sm-auto.mb-sm-0
-      = render 'shared/new_project_item_select', path: 'merge_requests/new', label: _("merge request"), with_feature_enabled: 'merge_requests', type: :merge_requests
+      = render 'shared/new_project_item_vue_select'
 
 .top-area
-  = render 'shared/issuable/nav', type: :merge_requests, display_count: !@no_filters_set
+  = render 'shared/issuable/nav', type: :merge_requests, display_count: !(@no_filters_set || @search_timeout_occurred)
 
 = render 'shared/issuable/search_bar', type: :merge_requests, disable_target_branch: true
 
 - if current_user && @no_filters_set
   = render 'shared/dashboard/no_filter_selected'
+- elsif @search_timeout_occurred
+  = render 'shared/dashboard/search_timeout_occurred'
 - else
   = render 'shared/merge_requests'
diff --git a/app/views/dashboard/milestones/index.html.haml b/app/views/dashboard/milestones/index.html.haml
index bc8e3e6ab69..2556791da12 100644
--- a/app/views/dashboard/milestones/index.html.haml
+++ b/app/views/dashboard/milestones/index.html.haml
@@ -8,9 +8,7 @@
 
   - if current_user
     .page-title-controls
-      = render 'shared/new_project_item_select',
-        path: '-/milestones/new', label: _('Milestone'),
-        include_groups: true, type: :milestones
+      = render 'shared/new_project_item_vue_select'
 
 - if @milestone_states.any? { |name, count| count > 0 }
   .top-area
@@ -22,9 +20,7 @@
     = render 'shared/empty_states/milestones_tab', active_tab: params[:state] do
       - if current_user
         .page-title-controls
-          = render 'shared/new_project_item_select',
-            path: '-/milestones/new', label: _('Milestone'),
-            include_groups: true, type: :milestones
+          = render 'shared/new_project_item_vue_select'
   - else
     .milestones
       %ul.content-list
@@ -35,6 +31,4 @@
   = render 'shared/empty_states/milestones' do
     - if current_user
       .page-title-controls
-        = render 'shared/new_project_item_select',
-          path: '-/milestones/new', label: _('Milestone'),
-          include_groups: true, type: :milestones
+        = render 'shared/new_project_item_vue_select'
diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index f97c0e2b9b6..ebd7f20c54a 100644
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -25,7 +25,7 @@
           = author_avatar(todo, size: 24)
         .todo-note
           - if todo_author_display?(todo)
-            .author-name.bold.gl-display-inline<
+            .author-name.bold.gl-display-inline{ data: { qa_selector: "todo_author_name_content" } }<
               - if todo.author
                 = link_to_author(todo, self_added: todo.self_added?)
               - else
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index c0bd3ee3f0d..9e59f9d700f 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -23,10 +23,10 @@
     .nav-controls
       - if @allowed_todos.any?(&:pending?)
         .gl-mr-3
-          = link_to destroy_all_dashboard_todos_path(todos_filter_params), class: 'gl-button btn btn-default btn-loading align-items-center js-todos-mark-all', method: :delete, data: { href: destroy_all_dashboard_todos_path(todos_filter_params) } do
+          = render Pajamas::ButtonComponent.new(button_options: { class: 'btn-loading gl-align-items-center js-todos-mark-all'}, method: :delete, href: destroy_all_dashboard_todos_path(todos_filter_params)) do
             = gl_loading_icon(inline: true)
             = s_("Todos|Mark all as done")
-          = link_to bulk_restore_dashboard_todos_path, class: 'gl-button btn btn-default btn-loading align-items-center js-todos-undo-all hidden', method: :patch , data: { href: bulk_restore_dashboard_todos_path(todos_filter_params) } do
+          = render Pajamas::ButtonComponent.new(button_options: { class: 'btn-loading gl-align-items-center js-todos-undo-all hidden'}, method: :patch, href: bulk_restore_dashboard_todos_path(todos_filter_params)) do
             = gl_loading_icon(inline: true)
             = s_("Todos|Undo mark all as done")
 
@@ -37,7 +37,7 @@
           .filter-item.gl-m-2
             - if params[:group_id].present?
               = hidden_field_tag(:group_id, params[:group_id])
-            = dropdown_tag(group_dropdown_label(params[:group_id], _("Group")), options: { toggle_class: 'js-group-search js-filter-submit gl-xs-w-full!', title: s_("Todos|Filter by group"), filter: true, filterInput: 'input#group-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-group js-filter-submit', placeholder: _("Search groups"), data: { default_label: _("Group"), display: 'static' } })
+            = dropdown_tag(group_dropdown_label(params[:group_id], _("Group")), options: { toggle_class: 'js-group-search js-filter-submit gl-xs-w-full!', title: s_("Todos|Filter by group"), filter: true, filterInput: 'input#group-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-group js-filter-submit', placeholder: _("Search groups"), data: { default_label: _("Group"), display: 'static', qa_selector: 'group_dropdown' } })
           .filter-item.gl-m-2
             - if params[:project_id].present?
               = hidden_field_tag(:project_id, params[:project_id])
diff --git a/app/views/devise/shared/_language_switcher.html.haml b/app/views/devise/shared/_language_switcher.html.haml
index 4c47e3efd0f..9dc9a940149 100644
--- a/app/views/devise/shared/_language_switcher.html.haml
+++ b/app/views/devise/shared/_language_switcher.html.haml
@@ -1,3 +1 @@
-- return unless ::Feature.enabled?(:preferred_language_switcher)
-
 .js-language-switcher{ data: { locales: ordered_selectable_locales.to_json } }
diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml
index b9fe61229bc..f4f3965bdc1 100644
--- a/app/views/devise/shared/_signup_box.html.haml
+++ b/app/views/devise/shared/_signup_box.html.haml
@@ -66,7 +66,7 @@
     = render_if_exists 'devise/shared/phone_verification', form: f
     %div
 
-    - if Feature.enabled?(:arkose_labs_signup_challenge)
+    - if arkose_labs_challenge_enabled?
       = render_if_exists 'devise/registrations/arkose_labs'
     - elsif show_recaptcha_sign_up?
       = recaptcha_tags nonce: content_security_policy_nonce
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index 67a88f3d623..e49b3eb7781 100644
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@@ -4,4 +4,4 @@
 - if current_user
   - unless has_label
     %span.gl-float-left= _("Visibility:")
-  = gl_redirect_listbox_tag(projects_filter_items, selected, class: 'gl-ml-3', data: { right: true })
+  = gl_redirect_listbox_tag(projects_filter_items, selected, class: 'gl-ml-3', data: { placement: 'right' })
diff --git a/app/views/groups/_invite_members_modal.html.haml b/app/views/groups/_invite_members_modal.html.haml
index bf0e8b627fd..f0fd9026b30 100644
--- a/app/views/groups/_invite_members_modal.html.haml
+++ b/app/views/groups/_invite_members_modal.html.haml
@@ -1,6 +1,6 @@
 - return unless can_admin_group_member?(group)
 
 .js-invite-members-modal{ data: { is_project: 'false',
-  access_levels: GroupMember.access_level_roles.to_json,
+  access_levels: group.access_level_roles.to_json,
   reload_page_on_submit: local_assigns.fetch(:reload_page_on_submit, false).to_s,
   help_link: help_page_url('user/permissions') }.merge(common_invite_modal_dataset(group)).merge(users_filter_data(group)) }
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index 8763912438b..0c416d57b75 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -28,8 +28,10 @@
   .settings-content
     = render 'groups/settings/permissions'
 
+= render_if_exists 'groups/merge_requests', expanded: expanded, group: @group
 = render_if_exists 'groups/merge_request_approval_settings', expanded: expanded, group: @group, user: current_user
 = render_if_exists 'groups/insights', expanded: expanded
+= render_if_exists 'groups/analytics_dashboards', expanded: expanded
 
 %section.settings.no-animate#js-badge-settings{ class: ('expanded' if expanded) }
   .settings-header
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index 92f6c896e7b..8d858ad72d2 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/app/views/groups/merge_requests.html.haml
@@ -4,16 +4,19 @@
 - add_page_specific_style 'page_bundles/issuable_list'
 
 .top-area
-  = render 'shared/issuable/nav', type: :merge_requests
+  = render 'shared/issuable/nav', type: :merge_requests, display_count: !@search_timeout_occurred
   - if current_user
     .nav-controls
       - if @can_bulk_update
         = render_if_exists 'projects/merge_requests/bulk_update_button'
 
-      = render 'shared/new_project_item_select', path: 'merge_requests/new', label: _("merge request"), type: :merge_requests, with_feature_enabled: 'merge_requests', with_shared: false, include_projects_in_subgroups: true
+      = render 'shared/new_project_item_vue_select'
 
 = render 'shared/issuable/search_bar', type: :merge_requests
 - if @can_bulk_update
   = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :merge_requests
 
-= render 'shared/merge_requests'
+- if @search_timeout_occurred
+  = render 'shared/dashboard/search_timeout_occurred'
+- else
+  = render 'shared/merge_requests'
diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml
index cae347630ee..aaa42aaea3a 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -38,8 +38,12 @@
             = render 'project_badges', project: project
 
           .controls.gl-flex-shrink-0.gl-ml-5
-            = link_to _('Members'), project_project_members_path(project), id: dom_id(project, :edit), class: "btn gl-button", data: { qa_selector: 'project_members_button' }
-            = link_to _('Edit'), edit_project_path(project), id: dom_id(project, :edit), class: "btn gl-button", data: { qa_selector: 'project_edit_button' }
+            = render Pajamas::ButtonComponent.new(href: project_project_members_path(project),
+              button_options: { data: { qa_selector: 'project_members_button' } }) do
+              = _('Members')
+            = render Pajamas::ButtonComponent.new(href: edit_project_path(project),
+              button_options: { data: { qa_selector: 'project_edit_button' } }) do
+              = _('Edit')
             = render 'delete_project_button', project: project, data: { qa_selector: 'project_delete_button' }
       - if @projects.blank?
         .nothing-here-block= _("This group has no projects yet")
diff --git a/app/views/groups/runners/index.html.haml b/app/views/groups/runners/index.html.haml
index 9ea83397348..7e98f6035a6 100644
--- a/app/views/groups/runners/index.html.haml
+++ b/app/views/groups/runners/index.html.haml
@@ -1,3 +1,3 @@
 - page_title s_('Runners|Runners')
 
-#js-group-runners{ data: group_runners_data_attributes(@group).merge({ group_runners_limited_count: @group_runners_limited_count, registration_token: @group_runner_registration_token }) }
+#js-group-runners{ data: group_runners_data_attributes(@group).merge({ registration_token: @group_runner_registration_token }) }
diff --git a/app/views/groups/runners/show.html.haml b/app/views/groups/runners/show.html.haml
index 2fc314cc37f..43673d54478 100644
--- a/app/views/groups/runners/show.html.haml
+++ b/app/views/groups/runners/show.html.haml
@@ -1,8 +1,9 @@
+- add_page_specific_style 'page_bundles/ci_status'
 - add_page_specific_style 'page_bundles/runner_details'
 
-- add_to_breadcrumbs _('Runners'), group_runners_path(@group)
 - title = "##{@runner.id} (#{@runner.short_sha})"
 - breadcrumb_title title
 - page_title title
+- add_to_breadcrumbs _('Runners'), group_runners_path(@group)
 
 #js-group-runner-show{ data: {runner_id: @runner.id, runners_path: group_runners_path(@group), edit_group_runner_path: edit_group_runner_path(@group, @runner)} }
diff --git a/app/views/groups/settings/_transfer.html.haml b/app/views/groups/settings/_transfer.html.haml
index 3c76e8a864a..a4a83330fa9 100644
--- a/app/views/groups/settings/_transfer.html.haml
+++ b/app/views/groups/settings/_transfer.html.haml
@@ -1,12 +1,13 @@
 - form_id = "transfer-group-form"
-- initial_data = { button_text: s_('GroupSettings|Transfer group'), group_name: @group.name, group_id: @group.id, target_form_id: form_id, is_paid_group: group.paid?.to_s }
+- initial_data = { button_text: s_('GroupSettings|Transfer group'), group_full_path: @group.full_path, group_name: @group.name, group_id: @group.id, target_form_id: form_id, is_paid_group: group.paid?.to_s }
 
 .sub-section{ data: { qa_selector: 'transfer_group_content' } }
   %h4.warning-title= s_('GroupSettings|Transfer group')
   %p= _('Transfer group to another parent group.')
   = form_for group, url: transfer_group_path(group), method: :put, html: { id: form_id, class: 'js-group-transfer-form' } do |f|
     %ul
-      - learn_more_link_start = '<a href="https://docs.gitlab.com/ee/user/project/repository/index.html#what-happens-when-a-repository-path-changes" target="_blank" rel="noopener noreferrer">'.html_safe
+      - learn_more_link = help_page_url('user/project/repository/index', anchor: 'what-happens-when-a-repository-path-changes')
+      - learn_more_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_link }
       - warning_text = s_("GroupSettings|Be careful. Changing a group's parent can have unintended side effects. %{learn_more_link_start}Learn more.%{learn_more_link_end}") % { learn_more_link_start: learn_more_link_start, learn_more_link_end: '</a>'.html_safe }
       %li= warning_text.html_safe
       %li= s_('GroupSettings|You can only transfer the group to a group you manage.')
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 2861e696e31..faed486b20f 100644
--- a/app/views/groups/settings/packages_and_registries/show.html.haml
+++ b/app/views/groups/settings/packages_and_registries/show.html.haml
@@ -1,5 +1,5 @@
-- breadcrumb_title _('Package and registry settings')
-- page_title _('Package and registry settings')
+- breadcrumb_title _('Packages and registries settings')
+- page_title _('Packages and registries settings')
 - @content_class = 'limit-container-width' unless fluid_layout
 
 %section#js-packages-and-registries-settings{ data: { group_path: @group.full_path,
diff --git a/app/views/groups/usage_quotas/index.html.haml b/app/views/groups/usage_quotas/index.html.haml
index a8c1071b876..253894e5fb8 100644
--- a/app/views/groups/usage_quotas/index.html.haml
+++ b/app/views/groups/usage_quotas/index.html.haml
@@ -1,7 +1,3 @@
 - page_title s_("UsageQuota|Usage")
 
-.gl-alert.gl-alert-no-icon.gl-alert-info.gl-mt-6
-  %h2.gl-alert-title
-    Development
-  .gl-alert-content
-    Placeholder for usage quotas Vue app
+#js-usage-quotas-view{ data: { namespace_name: @group.name } }
diff --git a/app/views/ide/_show.html.haml b/app/views/ide/_show.html.haml
index c968d84fc36..5a6e93c3573 100644
--- a/app/views/ide/_show.html.haml
+++ b/app/views/ide/_show.html.haml
@@ -7,4 +7,4 @@
   - content_for :prefetch_asset_tags do
     - webpack_preload_asset_tag('monaco')
 
-= render partial: 'shared/ide_root', locals: { data: ide_data, loading_text: _('Loading the GitLab IDE...') }
+= render partial: 'shared/ide_root', locals: { data: ide_data(project: @project, branch: @branch, path: @path, merge_request: @merge_request, fork_info: @fork_info), loading_text: _('Loading the GitLab IDE...') }
diff --git a/app/views/import/github/new.html.haml b/app/views/import/github/new.html.haml
index 7d0a46f3630..5293013b813 100644
--- a/app/views/import/github/new.html.haml
+++ b/app/views/import/github/new.html.haml
@@ -10,8 +10,9 @@
   = import_github_authorize_message
 
 - if github_import_configured? && !has_ci_cd_only_params?
-  = link_to status_import_github_path(namespace_id: params[:namespace_id]), class: 'gl-button btn btn-confirm' do
-    = sprite_icon('github', css_class: 'gl-mr-2')
+  = render Pajamas::ButtonComponent.new(variant: :confirm,
+    href: status_import_github_path(namespace_id: params[:namespace_id]),
+    icon: 'github') do
     = title
 
   %hr
@@ -31,5 +32,9 @@
   = render_if_exists 'import/github/ci_cd_only'
 
   .form-actions.gl-display-flex.gl-justify-content-end
-    = link_to _('Cancel'), new_project_path, class: 'gl-button btn btn-default'
-    = submit_tag _('Authenticate'), class: 'gl-button btn btn-confirm gl-ml-3', data: { qa_selector: 'authenticate_button' }
+    = render Pajamas::ButtonComponent.new(href: new_project_path) do
+      = _('Cancel')
+    = render Pajamas::ButtonComponent.new(variant: :confirm,
+      type: :submit,
+      button_options: { class: 'gl-ml-3', data: { qa_selector: 'authenticate_button' } }) do
+      = _('Authenticate')
diff --git a/app/views/layouts/_bizible.html.haml b/app/views/layouts/_bizible.html.haml
index 8d173a7ab61..28ae34cd5e1 100644
--- a/app/views/layouts/_bizible.html.haml
+++ b/app/views/layouts/_bizible.html.haml
@@ -1,4 +1,4 @@
-- if bizible_enabled?
+- if bizible_enabled?(@invite_email)
   <!-- Bizible -->
   = javascript_tag nonce: content_security_policy_nonce do
     :plain
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index ea2f452b9e2..dd441d0d155 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -37,7 +37,7 @@
   = stylesheet_link_tag "disable_animations", media: "all" if Rails.env.test? || Gitlab.config.gitlab['disable_animations']
   = stylesheet_link_tag "test_environment", media: "all" if Rails.env.test?
 
-  = stylesheet_link_tag_defer "fonts" if use_new_fonts?
+  = stylesheet_link_tag_defer "fonts"
 
   = stylesheet_link_tag_defer "highlight/themes/#{user_color_scheme}"
 
diff --git a/app/views/layouts/_loading_hints.html.haml b/app/views/layouts/_loading_hints.html.haml
index 60ab6927fd2..9026bec84c3 100644
--- a/app/views/layouts/_loading_hints.html.haml
+++ b/app/views/layouts/_loading_hints.html.haml
@@ -13,7 +13,6 @@
   = 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: "https://#{Gitlab::Tracking.collector_hostname}", crossorigin: '' }
-  - if use_new_fonts?
     -# Do not use preload_link_tag for fonts, to work around Firefox double-fetch bug.
     -# See https://github.com/web-platform-tests/wpt/pull/36930
     %link{ rel: 'preload', href: font_path('gitlab-sans/GitLabSans.woff2'), as: 'font', crossorigin: css_crossorigin }
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 010ddd8da39..d2ed70d6b48 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -2,8 +2,12 @@
   - @left_sidebar = true
 .layout-page.hide-when-top-nav-responsive-open{ class: page_with_sidebar_class }
   - if show_super_sidebar?
-    - sidebar_data = super_sidebar_context(current_user).to_json
+    - sidebar_data = super_sidebar_context(current_user, group: @group, project: @project).to_json
     %aside.js-super-sidebar.nav-sidebar{ data: { root_path: root_path, sidebar: sidebar_data, toggle_new_nav_endpoint: profile_preferences_url } }
+
+    - if display_whats_new?
+      #whats-new-app{ data: { version_digest: whats_new_version_digest } }
+
   - elsif defined?(nav) && nav
     = render "layouts/nav/sidebar/#{nav}"
   .content-wrapper.content-wrapper-margin{ class: "#{@content_wrapper_class}" }
diff --git a/app/views/layouts/_snowplow.html.haml b/app/views/layouts/_snowplow.html.haml
index 0b5c4730b64..5db7f22e36b 100644
--- a/app/views/layouts/_snowplow.html.haml
+++ b/app/views/layouts/_snowplow.html.haml
@@ -15,6 +15,7 @@
     gl.snowplowStandardContext = #{Gitlab::Tracking::StandardContext.new(
       namespace: namespace,
       project: @project,
-      user: current_user
+      user: current_user,
+      new_nav: show_super_sidebar?
     ).to_context.to_json.to_json}
     gl.snowplowPseudonymizedPageUrl = #{masked_page_url(group: namespace, project: @project).to_json};
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index fa79219df4a..53e88d95893 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -8,7 +8,7 @@
   %body{ class: body_classes, data: body_data }
     = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/init_client_detection_flags"
-    = render "layouts/visual_review" if ENV['REVIEW_APPS_ENABLED']
+    = render "layouts/visual_review" if review_apps_enabled?
     = render 'peek/bar'
     = header_message
 
diff --git a/app/views/layouts/dashboard.html.haml b/app/views/layouts/dashboard.html.haml
index 028c22fe9e5..89f238eb6b3 100644
--- a/app/views/layouts/dashboard.html.haml
+++ b/app/views/layouts/dashboard.html.haml
@@ -1,9 +1,7 @@
 - page_title    _("Dashboard")
 - header_title  _("Dashboard"), root_path unless header_title
-- if Feature.enabled?(:your_work_sidebar, current_user)
-  - @left_sidebar = true
-  - nav "your_work"
-- else
-  - @hide_breadcrumbs = true
+
+- @left_sidebar = true
+- nav "your_work"
 
 = render template: "layouts/application"
diff --git a/app/views/layouts/explore.html.haml b/app/views/layouts/explore.html.haml
index 389dee853ba..c495bab4547 100644
--- a/app/views/layouts/explore.html.haml
+++ b/app/views/layouts/explore.html.haml
@@ -1,6 +1,6 @@
 - page_title _("Explore")
 
-- if current_user && Feature.enabled?(:your_work_sidebar, current_user)
+- if current_user
   - @left_sidebar = true
   - nav "your_work"
 
diff --git a/app/views/layouts/header/_current_user_dropdown.html.haml b/app/views/layouts/header/_current_user_dropdown.html.haml
index 8363d424c1b..af27026845e 100644
--- a/app/views/layouts/header/_current_user_dropdown.html.haml
+++ b/app/views/layouts/header/_current_user_dropdown.html.haml
@@ -3,7 +3,7 @@
 %ul
   %li.current-user
     - if current_user_menu?(:profile)
-      = link_to current_user, class: 'gl-line-height-20!', data: { user: current_user.username, testid: 'user-profile-link', qa_selector: 'user_profile_link' } do
+      = link_to current_user, class: 'gl-line-height-20!', data: { user: current_user.username, testid: 'user-profile-link', track_action: "click_link", track_label: "user_profile", track_property: "navigation_top", qa_selector: 'user_profile_link' } do
         = render 'layouts/header/current_user_dropdown_item'
     - else
       .gl-py-3.gl-px-4
@@ -23,28 +23,28 @@
         = emoji_icon('rocket')
   - if current_user_menu?(:settings)
     %li
-      = link_to s_("CurrentUser|Edit profile"), profile_path, data: { qa_selector: 'edit_profile_link' }
+      = link_to s_("CurrentUser|Edit profile"), profile_path, data: { qa_selector: 'edit_profile_link', track_action: "click_link", track_label: "user_edit_profile", track_property: "navigation_top" }
     %li
-      = link_to s_("CurrentUser|Preferences"), profile_preferences_path
+      = link_to s_("CurrentUser|Preferences"), profile_preferences_path, data: { track_action: "click_link", track_label: "user_preferences", track_property: "navigation_top" }
   = render_if_exists 'layouts/header/buy_pipeline_minutes', project: @project, namespace: @group
 
   - if current_user_menu?(:help)
     %li.divider.d-md-none
     %li.d-md-none
-      = link_to _("Help"), help_path
+      = link_to _("Help"), help_path, data: {track_action: 'click_link', track_label: 'help', track_property: 'navigation_top'}
     %li.d-md-none
-      = link_to _("Support"), support_url
+      = link_to _("Support"), support_url, data: {track_action: 'click_link', track_label: 'support', track_property: 'navigation_top'}
     %li.d-md-none
       = render 'shared/help_dropdown_forum_link'
   %li.d-md-none
-    = link_to _("Submit feedback"), Gitlab::Utils.append_path(promo_url, "submit-feedback")
+    = link_to _("Submit feedback"), Gitlab::Utils.append_path(promo_url, "submit-feedback"), data: {track_action: 'click_link', track_label: 'submit_feedback', track_property: 'navigation_top'}
   - if current_user_menu?(:help) || current_user_menu?(:settings) || current_user_menu?(:profile)
     %li.d-md-none
       = render 'shared/user_dropdown_contributing_link'
   = render 'shared/user_dropdown_instance_review'
   - if Gitlab.com_but_not_canary?
     %li.d-md-none
-      = link_to _("Switch to GitLab Next"), Gitlab::Saas.canary_toggle_com_url
+      = link_to _("Switch to GitLab Next"), Gitlab::Saas.canary_toggle_com_url, data: { track_action: "click_link", track_label: "switch_to_canary", track_property: "navigation_top" }
 
   - if Feature.enabled?(:super_sidebar_nav, current_user)
     %li.divider
@@ -53,4 +53,4 @@
   - if current_user_menu?(:sign_out)
     %li.divider
     %li
-      = link_to _("Sign out"), destroy_user_session_path, method: :post, class: "sign-out-link", data: { qa_selector: 'sign_out_link' }
+      = link_to _("Sign out"), destroy_user_session_path, method: :post, class: "sign-out-link", data: { qa_selector: 'sign_out_link', track_action: "click_link", track_label: "user_sign_out", track_property: "navigation_top" }
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 558af352ae9..6d000c3e9ad 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -8,7 +8,7 @@
       .title-container.hide-when-top-nav-responsive-open.gl-transition-medium.gl-display-flex.gl-align-items-stretch.gl-pt-0.gl-mr-3
         .title
           %span.gl-sr-only GitLab
-          = link_to root_path, title: _('Dashboard'), id: 'logo', class: 'has-tooltip', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation') do
+          = link_to root_path, title: _('Dashboard'), id: 'logo', class: 'has-tooltip', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation_top') do
             = brand_header_logo
         .gl-display-flex.gl-align-items-center
           - if Gitlab.com_and_canary?
@@ -36,7 +36,11 @@
                 - else
                   = render 'layouts/search'
             %li.nav-item{ class: 'd-none d-sm-inline-block d-lg-none' }
-              = link_to search_menu_item.fetch(:href), title: search_menu_item.fetch(:title), aria: { label: search_menu_item.fetch(:title) }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+              = link_to search_menu_item.fetch(:href), title: search_menu_item.fetch(:title), aria: { label: search_menu_item.fetch(:title) },
+                data: { toggle: 'tooltip', placement: 'bottom', container: 'body',
+                track_action: 'click_link',
+                track_label: 'global_search',
+                track_property: 'navigation_top' } do
                 = sprite_icon(search_menu_item.fetch(:icon))
 
       .navbar-collapse.gl-transition-medium.collapse
@@ -49,7 +53,7 @@
                 data: { qa_selector: 'issues_shortcut_button', toggle: 'tooltip', placement: 'bottom',
                 track_label: 'main_navigation',
                 track_action: 'click_issues_link',
-                track_property: 'navigation',
+                track_property: 'navigation_top',
                 container: 'body' } do
                 = sprite_icon('issues')
                 - issues_count = assigned_issuables_count(:issues)
@@ -62,9 +66,9 @@
                 data: { qa_selector: 'merge_requests_shortcut_button',
                 toggle: "dropdown",
                 placement: 'bottom',
-                track_label: 'main_navigation',
-                track_action: 'click_merge_link',
-                track_property: 'navigation',
+                track_label: 'merge_requests_menu',
+                track_action: 'click_dropdown',
+                track_property: 'navigation_top',
                 container: 'body' } do
                 = sprite_icon('git-merge')
                 = gl_badge_tag({ size: :sm, variant: :warning }, { class: "js-merge-requests-count gl-ml-n2 #{'gl-display-none' if user_merge_requests_counts[:total] == 0}", "aria-label": n_("%d merge request", "%d merge requests", user_merge_requests_counts[:total]) % user_merge_requests_counts[:total] }) do
@@ -75,13 +79,17 @@
                   %li.dropdown-header
                     = _('Merge requests')
                   %li
-                    = link_to assigned_mrs_dashboard_path, class: 'gl-display-flex! gl-align-items-center js-prefetch-document' do
-                      = _('Assigned to you')
+                    = link_to assigned_mrs_dashboard_path,
+                      class: 'gl-display-flex! gl-align-items-center js-prefetch-document',
+                      data: {track_action: 'click_link', track_label: 'merge_requests_assigned', track_property: 'navigation_top'} do
+                      = _('Assigned')
                       = 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: 'dashboard-shortcuts-review_requests gl-display-flex! gl-align-items-center js-prefetch-document' do
-                      = _('Review requests for you')
+                    = link_to reviewer_mrs_dashboard_path,
+                      class: 'dashboard-shortcuts-review_requests gl-display-flex! gl-align-items-center js-prefetch-document',
+                      data: {track_action: 'click_link', track_label: 'merge_requests_to_review', track_property: 'navigation_top'} do
+                      = _('Review requests')
                       = 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)
@@ -90,15 +98,15 @@
                 data: { qa_selector: 'todos_shortcut_button', toggle: 'tooltip', placement: 'bottom',
                 track_label: 'main_navigation',
                 track_action: 'click_to_do_link',
-                track_property: 'navigation',
+                track_property: 'navigation_top',
                 container: 'body' } do
                 = sprite_icon('todo-done')
                 -# The todos' counter badge's visibility is being toggled by adding or removing the .hidden class in Js.
                 -# We'll eventually migrate to .gl-display-none: https://gitlab.com/gitlab-org/gitlab/-/issues/351792.
                 = gl_badge_tag({ size: :sm, variant: :info }, { class: "js-todos-count gl-ml-n2 #{'hidden' if todos_pending_count == 0}", "aria-label": _("Todos count") }) do
                   = todos_count_format(todos_pending_count)
-          %li.nav-item.header-help.dropdown.d-none.d-md-block{ data: { track_action: 'click_question_mark_link', track_label: 'main_navigation', track_property: 'navigation', track_experiment: 'cross_stage_fdm' } }
-            = link_to help_path, class: 'header-help-dropdown-toggle gl-relative', data: { toggle: "dropdown" } do
+          %li.nav-item.header-help.dropdown.d-none.d-md-block
+            = link_to help_path, class: 'header-help-dropdown-toggle gl-relative', data: { toggle: "dropdown", track_action: 'click_question_mark_link', track_label: 'main_navigation', track_property: 'navigation_top', track_experiment: 'cross_stage_fdm' } do
               %span.gl-sr-only
                 = s_('Nav|Help')
               = sprite_icon('question-o')
@@ -110,8 +118,8 @@
             %li.nav-item.gl-display-none.gl-sm-display-block
               = render "layouts/nav/top_nav"
           - if header_link?(:user_dropdown)
-            %li.nav-item.header-user.js-nav-user-dropdown.dropdown{ data: { track_label: "profile_dropdown", track_action: "click_dropdown", track_value: "", qa_selector: 'user_menu', testid: 'user-menu' }, class: ('mr-0' if has_impersonation_link) }
-              = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
+            %li.nav-item.header-user.js-nav-user-dropdown.dropdown{ data: { qa_selector: 'user_menu', testid: 'user-menu' }, class: ('mr-0' if has_impersonation_link) }
+              = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown", track_label: "profile_dropdown", track_action: "click_dropdown", track_property: "navigation_top" } do
                 = render Pajamas::AvatarComponent.new(current_user, size: 24, class: 'header-user-avatar', avatar_options: { data: { qa_selector: 'user_avatar_content' } })
                 = render_if_exists 'layouts/header/user_notification_dot', project: project, namespace: group
                 = sprite_icon('chevron-down', css_class: 'caret-down')
@@ -121,15 +129,12 @@
             %li.nav-item.impersonation.ml-0
               = render Pajamas::ButtonComponent.new(href: admin_impersonation_path, icon: 'incognito', button_options: { title: _('Stop impersonation'), class: 'impersonation-btn', aria: { label: _('Stop impersonation') }, data: { method: :delete, toggle: 'tooltip', placement: 'bottom', container: 'body', qa_selector: 'stop_impersonation_link' } })
           - if header_link?(:sign_in)
-            - if Gitlab.com?
-              %li.nav-item.gl-display-none.gl-sm-display-block
+            - if allow_signup?
+              %li.nav-item
                 = render Pajamas::ButtonComponent.new(href: new_user_registration_path) do
-                  = _('Sign up now')
-              %li.nav-item.gl-display-none.gl-sm-display-block
-                = link_to _('Login'), new_session_path(:user, redirect_to_referer: 'yes')
-              = render 'layouts/header/sign_in_register_button', class: 'gl-sm-display-none'
-            - else
-              = render 'layouts/header/sign_in_register_button'
+                  = _('Register')
+            %li.nav-item{ class: 'gl-flex-grow-0! gl-flex-basis-half!' }
+              = link_to _('Sign in'), new_session_path(:user, redirect_to_referer: 'yes')
 
       %button.navbar-toggler.d-block.d-sm-none{ type: 'button', class: 'gl-border-none!', data: { testid: 'top-nav-responsive-toggle', qa_selector: 'mobile_navbar_button' } }
         %span.sr-only= _('Toggle navigation')
diff --git a/app/views/layouts/header/_gitlab_version.html.haml b/app/views/layouts/header/_gitlab_version.html.haml
index 581d4d498e1..22771ac09c9 100644
--- a/app/views/layouts/header/_gitlab_version.html.haml
+++ b/app/views/layouts/header/_gitlab_version.html.haml
@@ -7,7 +7,7 @@
       testid: 'gitlab-version-container',
       track_action: 'click_link',
       track_label: 'version_help_dropdown',
-      track_property: "#{Gitlab.version_info.major}.#{Gitlab.version_info.minor}"
+      track_property: 'navigation_top'
     }
   }
   %span
diff --git a/app/views/layouts/header/_help_dropdown.html.haml b/app/views/layouts/header/_help_dropdown.html.haml
index bdd1ae291fd..f50df72afbc 100644
--- a/app/views/layouts/header/_help_dropdown.html.haml
+++ b/app/views/layouts/header/_help_dropdown.html.haml
@@ -5,22 +5,22 @@
     = render_if_exists 'layouts/header/help_dropdown/cross_stage_fdm'
     = render 'layouts/header/whats_new_dropdown_item'
     %li
-      = link_to _("Help"), help_path
+      = link_to _("Help"), help_path, data: {track_action: 'click_link', track_label: 'help', track_property: 'navigation_top'}
     %li
-      = link_to _("Support"), support_url
+      = link_to _("Support"), support_url, data: {track_action: 'click_link', track_label: 'support', track_property: 'navigation_top'}
     %li
       = render 'shared/help_dropdown_forum_link'
     %li
-      %button.js-shortcuts-modal-trigger{ type: "button" }
+      %button.js-shortcuts-modal-trigger{ type: "button", data: {track_action: 'click_button', track_label: 'keyboard_shortcuts_help', track_property: 'navigation_top'} }
         = _("Keyboard shortcuts")
         %kbd.flat.float-right{ "aria-hidden": "true" }= '?'.html_safe
     %li.divider
   %li
-    = link_to _("Submit feedback"), "https://about.gitlab.com/submit-feedback"
+    = link_to _("Submit feedback"), "https://about.gitlab.com/submit-feedback", data: {track_action: 'click_link', track_label: 'submit_feedback', track_property: 'navigation_top'}
   - if current_user_menu?(:help) || current_user_menu?(:settings) || current_user_menu?(:profile)
     %li
       = render 'shared/user_dropdown_contributing_link'
   = render 'shared/user_dropdown_instance_review'
   - if Gitlab.com_but_not_canary?
     %li
-      = link_to _("Switch to GitLab Next"), Gitlab::Saas.canary_toggle_com_url
+      = link_to _("Switch to GitLab Next"), Gitlab::Saas.canary_toggle_com_url, data: {track_action: 'click_link', track_label: 'gitlab_next', track_property: 'navigation_top'}
diff --git a/app/views/layouts/header/_new_dropdown.html.haml b/app/views/layouts/header/_new_dropdown.html.haml
index f39fb53032d..372babea18e 100644
--- a/app/views/layouts/header/_new_dropdown.html.haml
+++ b/app/views/layouts/header/_new_dropdown.html.haml
@@ -6,8 +6,14 @@
 
 - return if menu_sections.empty?
 
-%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-flex", 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", track_property: "navigation_top" } }
+  = link_to new_project_path,
+    class: "header-new-dropdown-toggle has-tooltip gl-display-flex",
+    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', testid: 'new-dropdown' } 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/_sign_in_register_button.html.haml b/app/views/layouts/header/_sign_in_register_button.html.haml
deleted file mode 100644
index cadb7cfe683..00000000000
--- a/app/views/layouts/header/_sign_in_register_button.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-- top_class = local_assigns.fetch(:class, nil)
-
-%li.nav-item{ class: top_class }
-  %div
-    - sign_in_text = allow_signup? ? _('Sign in / Register') : _('Sign in')
-    = render Pajamas::ButtonComponent.new(href: new_session_path(:user, redirect_to_referer: 'yes'), button_options: { class: 'btn-sign-in'}) do
-      = sign_in_text
diff --git a/app/views/layouts/mailer/_user_deactivated_additional_text.html.haml b/app/views/layouts/mailer/_user_deactivated_additional_text.html.haml
new file mode 100644
index 00000000000..cabdd4b09ec
--- /dev/null
+++ b/app/views/layouts/mailer/_user_deactivated_additional_text.html.haml
@@ -0,0 +1,3 @@
+- return unless Feature.enabled?(:deactivation_email_additional_text) && Gitlab::CurrentSettings.deactivation_email_additional_text.present?
+%p
+  = Gitlab::Utils.nlbr(Gitlab::CurrentSettings.deactivation_email_additional_text)
diff --git a/app/views/layouts/mailer/_user_deactivated_additional_text.text.erb b/app/views/layouts/mailer/_user_deactivated_additional_text.text.erb
new file mode 100644
index 00000000000..5862c8059f9
--- /dev/null
+++ b/app/views/layouts/mailer/_user_deactivated_additional_text.text.erb
@@ -0,0 +1,3 @@
+<% return unless Feature.enabled?(:deactivation_email_additional_text) && Gitlab::CurrentSettings.deactivation_email_additional_text.present? %>
+
+<%= Gitlab::CurrentSettings.deactivation_email_additional_text %>
diff --git a/app/views/layouts/nav/sidebar/_profile.html.haml b/app/views/layouts/nav/sidebar/_profile.html.haml
index e1978009114..087eca3ba35 100644
--- a/app/views/layouts/nav/sidebar/_profile.html.haml
+++ b/app/views/layouts/nav/sidebar/_profile.html.haml
@@ -130,6 +130,18 @@
             = link_to profile_preferences_path do
               %strong.fly-out-top-item-name
                 = _('Preferences')
+      - if saved_replies_enabled?
+        = nav_link(controller: :saved_replies) do
+          = link_to profile_saved_replies_path do
+            .nav-icon-container
+              = sprite_icon('symlink')
+            %span.nav-item-name
+              = _('Saved Replies')
+          %ul.sidebar-sub-level-items.is-fly-out-only
+            = nav_link(controller: :saved_replies, html_options: { class: "fly-out-top-item" }) do
+              = link_to profile_saved_replies_path do
+                %strong.fly-out-top-item-name
+                  = _('Saved Replies')
       = nav_link(controller: :active_sessions) do
         = link_to profile_active_sessions_path do
           .nav-icon-container
diff --git a/app/views/layouts/service_desk.html.haml b/app/views/layouts/service_desk.html.haml
index bab7bc6b9da..7ac108e7f31 100644
--- a/app/views/layouts/service_desk.html.haml
+++ b/app/views/layouts/service_desk.html.haml
@@ -15,17 +15,20 @@
       = stylesheet_link_tag 'notify'
     = yield :head
   %body
+    = html_header_message
     .content
       = yield
     .footer{ style: "margin-top: 10px;" }
-    %p
-      &mdash;
-      %br
-      = link_to "Unsubscribe", @unsubscribe_url
-
-      -# EE-specific start
-      - if Gitlab::CurrentSettings.email_additional_text.present?
-        %br
+      %p
+        &mdash;
         %br
-          = Gitlab::Utils.nlbr(Gitlab::CurrentSettings.email_additional_text)
-      -# EE-specific end
+        = link_to "Unsubscribe", @unsubscribe_url
+
+        -# EE-specific start
+        - if Gitlab::CurrentSettings.email_additional_text.present?
+          %br
+          %br
+            = Gitlab::Utils.nlbr(Gitlab::CurrentSettings.email_additional_text)
+        -# EE-specific end
+
+        = html_footer_message
diff --git a/app/views/layouts/service_desk.text.erb b/app/views/layouts/service_desk.text.erb
new file mode 100644
index 00000000000..2b5b0b51483
--- /dev/null
+++ b/app/views/layouts/service_desk.text.erb
@@ -0,0 +1,7 @@
+<%= text_header_message %>
+
+<%= yield -%>
+
+<%= @unsubscribe_url %>
+<%# EE-specific start %><%= render_if_exists 'layouts/mailer/additional_text' %><%# EE-specific end %>
+<%= text_footer_message -%>
diff --git a/app/views/layouts/snippets.html.haml b/app/views/layouts/snippets.html.haml
index fd331d4b6c8..95a204a3319 100644
--- a/app/views/layouts/snippets.html.haml
+++ b/app/views/layouts/snippets.html.haml
@@ -2,7 +2,7 @@
 - header_title _("Snippets"), snippets_path
 - snippets_upload_path = snippets_upload_path(@snippet, current_user)
 
-- if current_user && Feature.enabled?(:your_work_sidebar, current_user)
+- if current_user
   - @left_sidebar = true
   - nav "your_work"
 
diff --git a/app/views/notify/autodevops_disabled_email.html.haml b/app/views/notify/autodevops_disabled_email.html.haml
index d6812821966..f634a749008 100644
--- a/app/views/notify/autodevops_disabled_email.html.haml
+++ b/app/views/notify/autodevops_disabled_email.html.haml
@@ -11,13 +11,13 @@
     - link_style = "color: #1b69b6; text-decoration:none;"
     - pipeline_link = link_to("\##{@pipeline.iid}", pipeline_url(@pipeline), style: link_style).html_safe
     - project_link = link_to(@project.name, project_url(@project), style: link_style).html_safe
-    - supported_langs_link = link_to(s_('Notify|currently supported languages'), 'https://docs.gitlab.com/ee/topics/autodevops/#currently-supported-languages', style: link_style).html_safe
+    - supported_langs_link = link_to(s_('Notify|currently supported languages'), help_page_url('topics/autodevops/stages', anchor: 'currently-supported-languages'), style: link_style).html_safe
     - settings_link = link_to(s_('Notify|CI/CD project settings'), project_settings_ci_cd_url(@project), style: link_style).html_safe
     = s_('Notify|The Auto DevOps pipeline failed for pipeline %{pipeline_link} and has been disabled for %{project_link}. In order to use the Auto DevOps pipeline with your project, please review the %{supported_langs_link}, adjust your project accordingly, and turn on the Auto DevOps pipeline within your %{settings_link}.').html_safe % { pipeline_link: pipeline_link, project_link: project_link, supported_langs_link: supported_langs_link, settings_link: settings_link }
 
 %tr.pre-section
   %td{ style: 'text-align: center;border-bottom:1px solid #ededed' }
-    %a{ href: 'https://docs.gitlab.com/ee/topics/autodevops/', style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+    %a{ href: help_page_url('topics/autodevops/index'), style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
       %button{ type: 'button', style: 'border-color: #dfdfdf; border-style: solid; border-width: 1px; border-radius: 4px; font-size: 14px; padding: 8px 16px; background-color:#fff; margin: 8px 0; cursor: pointer;' }
         = s_('Notify|Learn more about Auto DevOps')
 
diff --git a/app/views/notify/service_desk_new_note_email.text.erb b/app/views/notify/service_desk_new_note_email.text.erb
index 79144fc1bf4..bcac004f82c 100644
--- a/app/views/notify/service_desk_new_note_email.text.erb
+++ b/app/views/notify/service_desk_new_note_email.text.erb
@@ -3,4 +3,3 @@
 <%= _("Author: %{author_name}") % { author_name: sanitize_name(@note.author_name) } %>
 
 <%= @note.note %>
-<%# EE-specific start %><%= render_if_exists 'layouts/mailer/additional_text'%><%# EE-specific end %>
diff --git a/app/views/notify/service_desk_thank_you_email.text.erb b/app/views/notify/service_desk_thank_you_email.text.erb
index 8b52219c83b..9d9d5c7a1bf 100644
--- a/app/views/notify/service_desk_thank_you_email.text.erb
+++ b/app/views/notify/service_desk_thank_you_email.text.erb
@@ -1,6 +1,3 @@
 <%= _("Thank you for your support request! We are tracking your request as ticket #%{issue_iid}, and will respond as soon as we can.") % { issue_iid: @issue.iid } %>
 
 <%= _("To unsubscribe from this issue, please paste the following link into your browser:") %>
-
-<%= @unsubscribe_url %>
-<%# EE-specific start %><%= render_if_exists 'layouts/mailer/additional_text' %><%# EE-specific end %>
diff --git a/app/views/notify/two_factor_otp_attempt_failed_email.html.haml b/app/views/notify/two_factor_otp_attempt_failed_email.html.haml
index fec7083e524..83f028af500 100644
--- a/app/views/notify/two_factor_otp_attempt_failed_email.html.haml
+++ b/app/views/notify/two_factor_otp_attempt_failed_email.html.haml
@@ -42,7 +42,7 @@
       %tbody
         %tr{ style: 'width:100%;' }
           %td{ style: "#{default_style}text-align:center;" }
-            - password_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: 'https://docs.gitlab.com/ee/user/profile/user_passwords.html#change-your-password' }
+            - password_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_url('user/profile/user_passwords', anchor: 'change-your-password') }
             = _('If you recently tried to sign in, but mistakenly entered a wrong two-factor authentication code, you may ignore this email.')
 
             - if password_authentication_enabled_for_web?
diff --git a/app/views/notify/two_factor_otp_attempt_failed_email.text.haml b/app/views/notify/two_factor_otp_attempt_failed_email.text.haml
index 8f839cd83ee..8718ab034ff 100644
--- a/app/views/notify/two_factor_otp_attempt_failed_email.text.haml
+++ b/app/views/notify/two_factor_otp_attempt_failed_email.text.haml
@@ -3,5 +3,5 @@
 = _('We detected an attempt to sign in to your %{host} account using a wrong two-factor authentication code, from the following IP address: %{ip}, at %{time}') % { host: Gitlab.config.gitlab.host, ip: @ip, time: @time }
 
 = _('If you recently tried to sign in, but mistakenly entered a wrong two-factor authentication code, you may ignore this email.')
-= _('If you did not recently try to sign in, you should immediately change your password: %{password_link}.') % { password_link: 'https://docs.gitlab.com/ee/user/profile/user_passwords.html#change-your-password' }
+= _('If you did not recently try to sign in, you should immediately change your password: %{password_link}.') % { password_link: help_page_url('user/profile/user_passwords', anchor: 'change-your-password') }
 = _('Make sure you choose a strong, unique password.')
diff --git a/app/views/notify/unknown_sign_in_email.html.haml b/app/views/notify/unknown_sign_in_email.html.haml
index 64bf4e7b4e8..f8a0ae1352c 100644
--- a/app/views/notify/unknown_sign_in_email.html.haml
+++ b/app/views/notify/unknown_sign_in_email.html.haml
@@ -42,7 +42,7 @@
       %tbody
         %tr{ style: 'width:100%;' }
           %td{ style: "#{default_style}text-align:center;" }
-            - password_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: 'https://docs.gitlab.com/ee/user/profile/user_passwords.html#change-your-password' }
+            - password_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_url('user/profile/user_passwords', anchor: 'change-your-password') }
             = _('If you recently signed in and recognize the IP address, you may disregard this email.')
 
             - if password_authentication_enabled_for_web?
@@ -52,5 +52,6 @@
 
             - unless @user.two_factor_enabled?
               %p
-                - mfa_link_start = '<a href="https://docs.gitlab.com/ee/user/profile/account/two_factor_authentication.html" target="_blank">'.html_safe
+                - mfa_url = help_page_url('user/profile/account/two_factor_authentication')
+                - mfa_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: mfa_url }
                 = _('To further protect your account, consider configuring a %{mfa_link_start}two-factor authentication%{mfa_link_end} method.').html_safe % { mfa_link_start: mfa_link_start, mfa_link_end: '</a>'.html_safe }
diff --git a/app/views/notify/unknown_sign_in_email.text.haml b/app/views/notify/unknown_sign_in_email.text.haml
index 54c7a245ab9..f3e318f0d15 100644
--- a/app/views/notify/unknown_sign_in_email.text.haml
+++ b/app/views/notify/unknown_sign_in_email.text.haml
@@ -3,8 +3,8 @@
 = _('A sign-in to your account has been made from the following IP address: %{ip}') % { ip: @ip }
 
 = _('If you recently signed in and recognize the IP address, you may disregard this email.')
-= _('If you did not recently sign in, you should immediately change your password: %{password_link}.') % { password_link: 'https://docs.gitlab.com/ee/user/profile/user_passwords.html#change-your-password' }
+= _('If you did not recently sign in, you should immediately change your password: %{password_link}.') % { password_link: help_page_url('user/profile/user_passwords', anchor: 'change-your-password') }
 = _('Passwords should be unique and not used for any other sites or services.')
 
 - unless @user.two_factor_enabled?
-  = _('To further protect your account, consider configuring a two-factor authentication method: %{mfa_link}.') % { mfa_link: 'https://docs.gitlab.com/ee/user/profile/account/two_factor_authentication.html' }
+  = _('To further protect your account, consider configuring a two-factor authentication method: %{mfa_link}.') % { mfa_link: help_page_url('user/profile/account/two_factor_authentication') }
diff --git a/app/views/notify/user_deactivated_email.html.haml b/app/views/notify/user_deactivated_email.html.haml
index a9262cab219..d8ba2639fe6 100644
--- a/app/views/notify/user_deactivated_email.html.haml
+++ b/app/views/notify/user_deactivated_email.html.haml
@@ -15,3 +15,5 @@
 
 %p
   = _('Please contact your GitLab administrator if you think this is an error.')
+
+= render 'layouts/mailer/user_deactivated_additional_text'
diff --git a/app/views/notify/user_deactivated_email.text.erb b/app/views/notify/user_deactivated_email.text.erb
index 9e7d00f4ad1..6faeb5ba0f4 100644
--- a/app/views/notify/user_deactivated_email.text.erb
+++ b/app/views/notify/user_deactivated_email.text.erb
@@ -8,3 +8,4 @@
 <%= _('To reactivate your account, sign in to GitLab at %{gitlab_url}.') % { gitlab_url: root_url } %>
 
 <%= _('Please contact your GitLab administrator if you think this is an error.') %>
+<%= render 'layouts/mailer/user_deactivated_additional_text' %>
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index 219e7c4d2fe..825fb98782a 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -21,14 +21,23 @@
       .key-list-item-dates
         %span.last-used-at.gl-mr-3
           = s_('Profiles|Last used:')
-          = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : _('Never')
+          -# TODO: Remove this conditional when https://gitlab.com/gitlab-org/gitlab/-/issues/324764 is resolved.
+          - if Feature.enabled?(:disable_ssh_key_used_tracking)
+            = _('Unavailable')
+            = link_to sprite_icon('question-o'), help_page_path('user/ssh.md', anchor: 'view-your-accounts-ssh-keys')
+          - else
+            = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : _('Never')
         %span.expires.gl-mr-3
           = key.expired? ? s_('Profiles|Expired:') : s_('Profiles|Expires:')
           = key.expires_at ? key.expires_at.to_date : _('Never')
         %span.last-used-at.gl-mr-3
           = s_('Profiles|Usage type:')
           = ssh_key_usage_types.invert[key.usage_type]
-    %span.key-created-at.gl-display-flex.gl-align-items-center
-      - if key.can_delete?
-        .gl-ml-3
-          = render 'shared/ssh_keys/key_delete', icon: true, button_data: ssh_key_delete_modal_data(key, path_to_key(key, is_admin))
+      .gl-display-flex.gl-float-right
+        - if key.can_delete?
+          - if key.signing? && !is_admin && Feature.enabled?(:revoke_ssh_signatures)
+            = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-confirm-modal-button', data: ssh_key_revoke_modal_data(key, revoke_profile_key_path(key)) }) do
+              = _('Revoke')
+          .gl-pl-3
+            = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-confirm-modal-button', data: ssh_key_delete_modal_data(key, path_to_key(key, is_admin)) }) do
+              = _('Remove')
diff --git a/app/views/profiles/saved_replies/index.html.haml b/app/views/profiles/saved_replies/index.html.haml
new file mode 100644
index 00000000000..2ae7a092249
--- /dev/null
+++ b/app/views/profiles/saved_replies/index.html.haml
@@ -0,0 +1,10 @@
+- page_title _('Saved Replies')
+
+#js-saved-replies-root.row.gl-mt-5{ data: { base_path: profile_saved_replies_path } }
+  .col-lg-4
+    %h4.gl-mt-0
+      = page_title
+    %p
+      = _('Saved replies can be used when creating comments inside issues, merge requests, and epics.')
+  .col-lg-8
+    = gl_loading_icon(size: 'lg')
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index a140d780180..5ffffb80d97 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -53,7 +53,7 @@
           = status_form.hidden_field :emoji, data: { js_name: 'emoji' }
           = status_form.hidden_field :message, data: { js_name: 'message' }
           = status_form.hidden_field :availability, data: { js_name: 'availability' }
-          = status_form.hidden_field :clear_status_after, data: { js_name: 'clearStatusAfter' }
+          = status_form.hidden_field :clear_status_after, value: @user.status&.clear_status_at&.to_s(:iso8601), data: { js_name: 'clearStatusAfter' }
     .col-lg-12
       %hr
   .row.user-time-preferences.js-search-settings-section
@@ -104,6 +104,15 @@
         = f.label :twitter
         = f.text_field :twitter, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|@username")
       .form-group.gl-form-group
+        - external_accounts_help_url = help_page_path('user/profile/index', anchor: 'add-external-accounts-to-your-user-profile-page')
+        - external_accounts_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: external_accounts_help_url }
+        - external_accounts_docs_link = s_('Profiles|Your Discord user ID. Should be between %{min} and %{max} digits long. %{external_accounts_link_start}Learn more.%{external_accounts_link_end}').html_safe % { min: '17', max: '20', external_accounts_link_start: external_accounts_link_start, external_accounts_link_end: '</a>'.html_safe }
+        = f.label :discord
+        = f.text_field :discord, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|User ID")
+        %small.form-text.text-gl-muted
+          = external_accounts_docs_link
+
+      .form-group.gl-form-group
         = f.label :website_url, s_('Profiles|Website url')
         = f.text_field :website_url, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|https://website.com")
       .form-group.gl-form-group
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 4c045574834..3add3af3c65 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -125,7 +125,12 @@
                       %span.gl-text-gray-500
                         = _("no name set")
                   %td= registration[:created_at].to_date.to_s(:medium)
-                  %td= link_to _('Delete'), registration[:delete_path], method: :delete, class: "gl-button btn btn-danger float-right", data: { confirm: _('Are you sure you want to delete this device? This action cannot be undone.'), confirm_btn_variant: "danger" }, aria: { label: _('Delete') }
+                  %td
+                    = render Pajamas::ButtonComponent.new(variant: :danger,
+                      href: registration[:delete_path],
+                      method: :delete,
+                      button_options: { class: 'float-right', data: { confirm: _('Are you sure you want to delete this device? This action cannot be undone.'), confirm_btn_variant: "danger" }, aria: { label: _('Delete') }}) do
+                      = _('Delete')
 
       - else
         .settings-message.text-center
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index e4eed63f45a..e2d1a50ae5e 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -4,7 +4,6 @@
 - ref = local_assigns.fetch(:ref) { current_ref }
 - project = local_assigns.fetch(:project) { @project }
 - add_page_startup_api_call logs_file_project_ref_path(@project, ref, @path, format: "json", offset: 0)
-- source = visible_fork_source(@project)
 - if readme_path = @project.repository.readme_path
   - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, readme_path), viewer: "rich", format: "json")
 
@@ -18,7 +17,8 @@
     = render 'projects/tree/tree_header', tree: @tree, is_project_overview: is_project_overview
 
   - if project.forked? && Feature.enabled?(:fork_divergence_counts, @project.fork_source)
-    #js-fork-info{ data: { source_name: source ? source.full_name : '', source_path: source ? project_path(source) : '' } }
+
+    #js-fork-info{ data: vue_fork_divergence_data(project, ref), project_id: @project.id }
 
   - if is_project_overview
     .project-buttons.gl-mb-5.js-show-on-project-root{ data: { qa_selector: 'project_buttons' } }
diff --git a/app/views/projects/_merge_request_pipelines_and_threads_options.html.haml b/app/views/projects/_merge_request_pipelines_and_threads_options.html.haml
index 94f8d3cc4a3..a9609434f15 100644
--- a/app/views/projects/_merge_request_pipelines_and_threads_options.html.haml
+++ b/app/views/projects/_merge_request_pipelines_and_threads_options.html.haml
@@ -1,13 +1,13 @@
 - form = local_assigns.fetch(:form)
 
 = 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.")
+  s_('MergeChecks|Pipelines must succeed'),
+  help_text: s_("MergeChecks|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.'),
+    s_('MergeChecks|Skipped pipelines are considered successful'),
+    help_text: s_('MergeChecks|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' } }
+  s_('MergeChecks|All threads must be resolved'),
+  checkbox_options: { data: { qa_selector: 'only_allow_merge_if_all_discussions_are_resolved_checkbox' } }
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index ec83782985b..53a1abdff33 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -6,11 +6,13 @@
 
 .row{ id: project_name_id }
   = f.hidden_field :ci_cd_only, value: ci_cd_only
-  .form-group.project-name.col-sm-12
+  .form-group.gl-form-group.project-name.col-sm-12
     = f.label :name, class: 'label-bold' do
       %span= _("Project name")
     = f.text_field :name, placeholder: "My awesome project", class: "form-control gl-form-input input-lg", data: { qa_selector: 'project_name', track_label: "#{track_label}", track_action: "activate_form_input", track_property: "project_name", track_value: "" }, required: true, aria: { required: true }
-    #project_name_error.gl-field-error.hidden
+    %small#js-project-name-description.form-text.text-gl-muted
+      = s_("ProjectsNew|Must start with a lowercase or uppercase letter, digit, emoji, or underscore. Can also contain dots, pluses, dashes, or spaces.")
+    #js-project-name-error.gl-field-error.gl-mt-2.gl-display-none
   .form-group.project-path.col-sm-6.gl-pr-0
     = f.label :namespace_id, class: 'label-bold' do
       %span= _('Project URL')
diff --git a/app/views/projects/airflow/dags/index.html.haml b/app/views/projects/airflow/dags/index.html.haml
new file mode 100644
index 00000000000..d631d084db1
--- /dev/null
+++ b/app/views/projects/airflow/dags/index.html.haml
@@ -0,0 +1,11 @@
+- breadcrumb_title s_('Airflow|Airflow DAGs')
+- page_title s_('Airflow|Airflow DAGs')
+
+.page-title-holder
+  %h1.page-title.gl-font-size-h-display= s_('Airflow|Airflow DAGs')
+
+#js-show-airflow-dags{ data: {
+  dags: @dags.to_json,
+  pagination: @pagination.to_json
+  }
+}
diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml
index c91dfe6d28e..3359ea5f63b 100644
--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
@@ -1,6 +1,7 @@
 - breadcrumb_title _('Artifacts')
 - page_title @path.presence, _('Artifacts'), "#{@build.name} (##{@build.id})", _('Jobs')
 - add_page_specific_style 'page_bundles/tree'
+- add_page_specific_style 'page_bundles/ci_status'
 
 = render "projects/jobs/header"
 
diff --git a/app/views/projects/artifacts/index.html.haml b/app/views/projects/artifacts/index.html.haml
index 7fa47aed7c6..09970f7b12c 100644
--- a/app/views/projects/artifacts/index.html.haml
+++ b/app/views/projects/artifacts/index.html.haml
@@ -1,11 +1,3 @@
 - page_title _('Artifacts')
 
-%div{ class: container_class }
-  %h1.page-title.gl-font-size-h-display.gl-mb-0
-    = s_('Artifacts|Artifacts')
-  .gl-mb-6
-    %strong= s_('Artifacts|Total artifacts size')
-    = number_to_human_size(@total_size, precicion: 2)
-  #js-artifact-management{ data: { "project-path": @project.full_path,
-    "can-destroy-artifacts" => can?(current_user, :destroy_artifacts, @project).to_s,
-    "artifacts-management-feedback-image-path": image_path('illustrations/chat-bubble-sm.svg') } }
+#js-artifact-management{ data: artifacts_app_data(@project) }
diff --git a/app/views/projects/blame/_page.html.haml b/app/views/projects/blame/_page.html.haml
new file mode 100644
index 00000000000..92fb99c30a6
--- /dev/null
+++ b/app/views/projects/blame/_page.html.haml
@@ -0,0 +1,34 @@
+- current_line = @blame.first_line
+
+.file-content.blame.code{ class: user_color_scheme }
+  - groups_length = @blame.groups.size - 1
+  - @blame.groups.each_with_index do |blame_group, index|
+    - commit_data = @blame.commit_data(blame_group[:commit])
+    - line_count = blame_group[:lines].count
+
+    .tr{ class: ('last-row' if groups_length == index) }
+      .td.blame-commit.commit{ class: commit_data.age_map_class }
+        = commit_data.author_avatar
+
+        .commit-row-title
+          %span.item-title.str-truncated-100
+            = commit_data.commit_link
+          = commit_data.project_blame_link
+
+        .light
+          = commit_data.commit_author_link
+          = _('committed')
+          #{commit_data.time_ago_tooltip}
+
+      .td.line-numbers
+        - (current_line...(current_line + line_count)).each do |i|
+          %a.diff-line-num.file-line-num.no-link{ href: "#L#{i}", id: "L#{i}", 'data-line-number' => i }
+            = i
+
+      .td.lines
+        %pre.code.highlight
+          %code
+            - blame_group[:lines].each do |line|
+              #{line}
+
+    - current_line += line_count
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index dd041377b49..827aa86d61a 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -1,10 +1,11 @@
 - page_title _("Blame"), @blob.path, @ref
 - add_page_specific_style 'page_bundles/tree'
+- dataset = { testid: 'blob-content-holder', qa_selector: 'blame_file_content', per_page: @blame_per_page }
 
-#blob-content-holder.tree-holder.js-per-page{ data: { testid: 'blob-content-holder', per_page: @blame_per_page } }
+#blob-content-holder.tree-holder.js-per-page{ data: dataset }
   = render "projects/blob/breadcrumb", blob: @blob, blame: true
 
-  .file-holder.gl-overflow-hidden
+  .file-holder
     = render "projects/blob/header", blob: @blob, blame: true
 
     .file-blame-legend
@@ -21,44 +22,9 @@
       %span.legend-box.legend-box-9
       %span.right-label Older
 
-    .table-responsive.file-content.blame.code{ class: "#{user_color_scheme} gl-rounded-0!", data: { qa_selector: 'blame_file_content' } }
-      %table
-        - current_line = @blame.first_line
-        - @blame.groups.each do |blame_group|
-          - commit_data = @blame.commit_data(blame_group[:commit])
-          - line_count = blame_group[:lines].count
-
-          %tr{ style: intrinsic_row_css(line_count) }
-            %td.blame-commit{ class: commit_data.age_map_class }
-              .commit
-                = commit_data.author_avatar
-
-                .commit-row-title
-                  %span.item-title.str-truncated-100
-                    = commit_data.commit_link
-                  %span
-                    = commit_data.project_blame_link
-                  &nbsp;
-
-                .light
-                  = commit_data.commit_author_link
-                  = _('committed')
-                  #{commit_data.time_ago_tooltip}
-
-            %td.line-numbers
-              - (current_line...(current_line + line_count)).each do |i|
-                %a.diff-line-num.gl-justify-content-end{ href: "#L#{i}", id: "L#{i}", 'data-line-number' => i, class: "gl-display-flex!" }
-                  .file-line-num
-                    = i
-                \
-
-            %td.lines.gl-w-full
-              %pre.code.highlight
-                %code
-                  - blame_group[:lines].each do |line|
-                    #{line}
-
-          - current_line += line_count
+    .table-responsive.blame-table{ data: { qa_selector: 'blame_file_content' } }
+      .blame-table-wrapper
+        = render partial: 'page'
 
     - if @blame_pagination && @blame_pagination.total_pages > 1
       .gl-display-flex.gl-justify-content-center.gl-flex-direction-column.gl-align-items-center.gl-p-3.gl-bg-gray-50.gl-border-t-solid.gl-border-t-1.gl-border-gray-100
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 475bc9e1c20..f43d19e2542 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -2,6 +2,11 @@
 - page_title _('Branches')
 - add_to_breadcrumbs(_('Repository'), project_tree_path(@project))
 
+-# Possible values for variables passed down from the projects/branches_controller.rb
+-#
+-#   @mode   - overview|active|stale|all (default:overview)
+-#   @sort   - name_asc|updated_asc|updated_desc
+
 .top-area.gl-border-0
   = gl_tabs_nav({ class: 'gl-flex-grow-1 gl-border-b-0' }) do
     = gl_tab_link_to s_('Branches|Overview'), project_branches_path(@project), { item_active: @mode == 'overview', title: s_('Branches|Show overview of the branches') }
@@ -10,7 +15,12 @@
     = gl_tab_link_to s_('Branches|All'), project_branches_filtered_path(@project, state: 'all'), { item_active: %w[overview active stale].exclude?(@mode), title: s_('Branches|Show all branches') }
 
   .nav-controls
-    #js-branches-sort-dropdown{ data: { project_branches_filtered_path: project_branches_path(@project, state: 'all'), sort_options: branches_sort_options_hash.to_json, mode: @mode } }
+    #js-branches-sort-dropdown{ data: {
+        project_branches_filtered_path: project_branches_path(@project, state: 'all'),
+        sort_options: branches_sort_options_hash.to_json,
+        show_dropdown: @mode == 'overview' ? 'false' : 'true',
+        sorted_by: @sort }
+    }
 
     - if can? current_user, :push_code, @project
       .js-delete-merged-branches{ data: {
diff --git a/app/views/projects/buttons/_clone.html.haml b/app/views/projects/buttons/_clone.html.haml
index a755cb9f5b0..a8a911adb7d 100644
--- a/app/views/projects/buttons/_clone.html.haml
+++ b/app/views/projects/buttons/_clone.html.haml
@@ -1,54 +1,55 @@
 - project = project || @project
 - dropdown_class = local_assigns.fetch(:dropdown_class, '')
 
-.git-clone-holder.js-git-clone-holder
-  %a#clone-dropdown.gl-button.btn.btn-confirm.clone-dropdown-btn{ href: '#', data: { toggle: 'dropdown', qa_selector: 'clone_dropdown' } }
-    %span.gl-mr-2.js-clone-dropdown-label
-      = _('Clone')
-    = sprite_icon("chevron-down", css_class: "icon")
-  %ul.dropdown-menu.dropdown-menu-large.dropdown-menu-selectable.clone-options-dropdown{ class: dropdown_class, data: { qa_selector: 'clone_dropdown_content' } }
-    - if ssh_enabled?
-      %li{ class: 'gl-px-4!' }
-        %label.label-bold
-          = _('Clone with SSH')
-        .input-group.btn-group
-          = text_field_tag :ssh_project_clone, project.ssh_url_to_repo, class: "js-select-on-focus form-control", readonly: true, aria: { label: _('Repository clone URL') }, data: { qa_selector: 'ssh_clone_url_content' }
-          .input-group-append
-            = clipboard_button(target: '#ssh_project_clone', title: _("Copy URL"), class: "input-group-text gl-button btn btn-icon btn-default")
-            = render_if_exists 'projects/buttons/geo'
-    - if http_enabled?
-      %li.pt-2{ class: 'gl-px-4!' }
-        %label.label-bold
-          = _('Clone with %{http_label}') % { http_label: gitlab_config.protocol.upcase }
-        .input-group.btn-group
-          = text_field_tag :http_project_clone, project.http_url_to_repo, class: "js-select-on-focus form-control", readonly: true, aria: { label: _('Repository clone URL') }, data: { qa_selector: 'http_clone_url_content' }
-          .input-group-append
-            = clipboard_button(target: '#http_project_clone', title: _("Copy URL"), class: "input-group-text gl-button btn btn-icon btn-default")
-            = render_if_exists 'projects/buttons/geo'
-      = render_if_exists 'projects/buttons/kerberos_clone_field'
-    %li.divider.mt-2
-    %li.pt-2.gl-dropdown-item
-      %label.label-bold{ class: 'gl-px-4!' }
-        = _('Open in your IDE')
+- if can?(current_user, :download_code, @project)
+  .git-clone-holder.js-git-clone-holder
+    %a#clone-dropdown.gl-button.btn.btn-confirm.clone-dropdown-btn{ href: '#', data: { toggle: 'dropdown', qa_selector: 'clone_dropdown' } }
+      %span.gl-mr-2.js-clone-dropdown-label
+        = _('Clone')
+      = sprite_icon("chevron-down", css_class: "icon")
+    %ul.dropdown-menu.dropdown-menu-large.dropdown-menu-selectable.clone-options-dropdown{ class: dropdown_class, data: { qa_selector: 'clone_dropdown_content' } }
       - if ssh_enabled?
-        - 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-dropdown-item-text-wrapper
-            = _('Visual Studio Code (SSH)')
+        %li{ class: 'gl-px-4!' }
+          %label.label-bold
+            = _('Clone with SSH')
+          .input-group.btn-group
+            = text_field_tag :ssh_project_clone, project.ssh_url_to_repo, class: "js-select-on-focus form-control", readonly: true, aria: { label: _('Repository clone URL') }, data: { qa_selector: 'ssh_clone_url_content' }
+            .input-group-append
+              = clipboard_button(target: '#ssh_project_clone', title: _("Copy URL"), class: "input-group-text gl-button btn btn-icon btn-default")
+              = render_if_exists 'projects/buttons/geo'
       - if http_enabled?
-        - 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-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-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-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-dropdown-item-text-wrapper
-            = _("Xcode")
+        %li.pt-2{ class: 'gl-px-4!' }
+          %label.label-bold
+            = _('Clone with %{http_label}') % { http_label: gitlab_config.protocol.upcase }
+          .input-group.btn-group
+            = text_field_tag :http_project_clone, project.http_url_to_repo, class: "js-select-on-focus form-control", readonly: true, aria: { label: _('Repository clone URL') }, data: { qa_selector: 'http_clone_url_content' }
+            .input-group-append
+              = clipboard_button(target: '#http_project_clone', title: _("Copy URL"), class: "input-group-text gl-button btn btn-icon btn-default")
+              = render_if_exists 'projects/buttons/geo'
+        = render_if_exists 'projects/buttons/kerberos_clone_field'
+      %li.divider.mt-2
+      %li.pt-2.gl-dropdown-item
+        %label.label-bold{ class: 'gl-px-4!' }
+          = _('Open in your IDE')
+        - if ssh_enabled?
+          - 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-dropdown-item-text-wrapper
+              = _('Visual Studio Code (SSH)')
+        - if http_enabled?
+          - 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-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-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-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-dropdown-item-text-wrapper
+              = _("Xcode")
diff --git a/app/views/projects/commit/_ajax_signature.html.haml b/app/views/projects/commit/_ajax_signature.html.haml
index e1bf0940f59..87ccf01c011 100644
--- a/app/views/projects/commit/_ajax_signature.html.haml
+++ b/app/views/projects/commit/_ajax_signature.html.haml
@@ -1,2 +1,2 @@
 - if commit.has_signature?
-  %button{ tabindex: 0, class: commit_signature_badge_classes('js-loading-gpg-badge'), data: { toggle: 'tooltip', placement: 'top', title: _('GPG signature (loading...)'), 'commit-sha' => commit.sha } }
+  %a.js-loading-signature-badge{ tabindex: 0, role: 'button', data: { toggle: 'tooltip', placement: 'top', title: _('GPG signature (loading...)'), 'commit-sha' => commit.sha } }
diff --git a/app/views/projects/commit/_multiple_signatures_signature_badge.html.haml b/app/views/projects/commit/_multiple_signatures_signature_badge.html.haml
index 2568a69cc2c..f80f194bd4d 100644
--- a/app/views/projects/commit/_multiple_signatures_signature_badge.html.haml
+++ b/app/views/projects/commit/_multiple_signatures_signature_badge.html.haml
@@ -1,5 +1,5 @@
 - title = _('Multiple signatures')
 - description = _('This commit was signed with multiple signatures.')
-- locals = { signature: signature, title: title, description: description, label: _('Unverified'), css_class: 'invalid' }
+- locals = { signature: signature, title: title, description: description, label: _('Unverified'), variant: 'muted' }
 
 = render partial: 'projects/commit/signature_badge', locals: locals
diff --git a/app/views/projects/commit/_other_user_signature_badge.html.haml b/app/views/projects/commit/_other_user_signature_badge.html.haml
index ffc4b25dc21..345a1964259 100644
--- a/app/views/projects/commit/_other_user_signature_badge.html.haml
+++ b/app/views/projects/commit/_other_user_signature_badge.html.haml
@@ -1,5 +1,5 @@
 - title = _("Different user's signature")
 - description = _("This commit was signed with a different user's verified signature.")
-- locals = { signature: signature, title: title, description: description, label: _('Unverified'), css_class: 'invalid' }
+- locals = { signature: signature, title: title, description: description, label: _('Unverified'), variant: 'muted' }
 
 = render partial: 'projects/commit/signature_badge', locals: locals
diff --git a/app/views/projects/commit/_revoked_key_signature_badge.html.haml b/app/views/projects/commit/_revoked_key_signature_badge.html.haml
new file mode 100644
index 00000000000..cbcc39249ce
--- /dev/null
+++ b/app/views/projects/commit/_revoked_key_signature_badge.html.haml
@@ -0,0 +1,5 @@
+- title = s_('CommitSignature|Unverified signature')
+- description = s_('CommitSignature|This commit was signed with a key that was revoked.')
+- locals = { signature: signature, title: title, description: description, label: s_('CommitSignature|Unverified'), variant: 'muted' }
+
+= render partial: 'projects/commit/signature_badge', locals: locals
diff --git a/app/views/projects/commit/_same_user_different_email_signature_badge.html.haml b/app/views/projects/commit/_same_user_different_email_signature_badge.html.haml
index 61fdf6fc87a..afce5c10065 100644
--- a/app/views/projects/commit/_same_user_different_email_signature_badge.html.haml
+++ b/app/views/projects/commit/_same_user_different_email_signature_badge.html.haml
@@ -1,5 +1,5 @@
 - title = _('GPG key mismatch')
 - description = _('This commit was signed with a verified signature, but the committer email is not associated with the GPG Key.')
-- locals = { signature: signature, title: title, description: description, label: _('Unverified'), css_class: ['invalid'] }
+- locals = { signature: signature, title: title, description: description, label: _('Unverified'), variant: 'muted' }
 
 = render partial: 'projects/commit/signature_badge', locals: locals
diff --git a/app/views/projects/commit/_signature_badge.html.haml b/app/views/projects/commit/_signature_badge.html.haml
index 41ba581b9d9..88631f14e56 100644
--- a/app/views/projects/commit/_signature_badge.html.haml
+++ b/app/views/projects/commit/_signature_badge.html.haml
@@ -2,12 +2,10 @@
 - title = local_assigns.fetch(:title)
 - description = local_assigns.fetch(:description, nil)
 - label = local_assigns.fetch(:label)
-- css_class = local_assigns.fetch(:css_class)
-
-- css_classes = commit_signature_badge_classes(css_class)
+- variant = local_assigns.fetch(:variant)
 
 - title = capture do
-  .gpg-popover-status
+  .signature-popover
     %div
       %strong
         = title
@@ -31,5 +29,5 @@
 
     = link_to(_('Learn about signing commits'), help_page_path('user/project/repository/gpg_signed_commits/index.md'), class: 'gl-link gl-display-block gl-mt-3')
 
-%a{ role: 'button', tabindex: 0, class: css_classes, data: { toggle: 'popover', html: 'true', placement: 'top', title: title, content: content } }
-  = label
+%a.signature-badge.gl-display-flex{ role: 'button', tabindex: 0, data: { toggle: 'popover', html: 'true', placement: 'top', title: title, content: content } }
+  = gl_badge_tag label, variant: variant
diff --git a/app/views/projects/commit/_unverified_signature_badge.html.haml b/app/views/projects/commit/_unverified_signature_badge.html.haml
index 0eae8d5564d..62a27aea60e 100644
--- a/app/views/projects/commit/_unverified_signature_badge.html.haml
+++ b/app/views/projects/commit/_unverified_signature_badge.html.haml
@@ -1,5 +1,5 @@
 - title = _('Unverified signature')
 - description = _('This commit was signed with an unverified signature.')
-- locals = { signature: signature, title: title, description: description, label: _('Unverified'), css_class: 'invalid' }
+- locals = { signature: signature, title: title, description: description, label: _('Unverified'), variant: 'muted' }
 
 = render partial: 'projects/commit/signature_badge', locals: locals
diff --git a/app/views/projects/commit/_verified_signature_badge.html.haml b/app/views/projects/commit/_verified_signature_badge.html.haml
index 417d816c711..dd5d0d7d6eb 100644
--- a/app/views/projects/commit/_verified_signature_badge.html.haml
+++ b/app/views/projects/commit/_verified_signature_badge.html.haml
@@ -1,5 +1,5 @@
 - title = _('Verified commit')
 - description = _('This commit was signed with a verified signature and the committer email was verified to belong to the same user.')
-- locals = { signature: signature, title: title, description: description, label: _('Verified'), css_class: 'valid' }
+- locals = { signature: signature, title: title, description: description, label: _('Verified'), variant: 'success' }
 
 = render partial: 'projects/commit/signature_badge', locals: locals
diff --git a/app/views/projects/commit/x509/_unverified_signature_badge.html.haml b/app/views/projects/commit/x509/_unverified_signature_badge.html.haml
index 6204a6977c0..94b9abda69e 100644
--- a/app/views/projects/commit/x509/_unverified_signature_badge.html.haml
+++ b/app/views/projects/commit/x509/_unverified_signature_badge.html.haml
@@ -1,6 +1,6 @@
 - title = capture do
   = html_escape(_('This commit was signed with an %{strong_open}unverified%{strong_close} signature.')) % { strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
 
-- locals = { signature: signature, title: title, label: _('Unverified'), css_class: 'invalid', icon: 'status_notfound_borderless', show_user: true }
+- locals = { signature: signature, title: title, label: _('Unverified'), variant: 'muted', icon: 'status_notfound_borderless', show_user: true }
 
 = render partial: 'projects/commit/signature_badge', locals: locals
diff --git a/app/views/projects/commit/x509/_verified_signature_badge.html.haml b/app/views/projects/commit/x509/_verified_signature_badge.html.haml
index 357ad467539..a10516d275a 100644
--- a/app/views/projects/commit/x509/_verified_signature_badge.html.haml
+++ b/app/views/projects/commit/x509/_verified_signature_badge.html.haml
@@ -1,6 +1,6 @@
 - title = capture do
   = html_escape(_('This commit was signed with a %{strong_open}verified%{strong_close} signature and the committer email is verified to belong to the same user.')) % { strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
 
-- locals = { signature: signature, title: title, label: _('Verified'), css_class: 'valid', icon: 'status_success_borderless', show_user: true }
+- locals = { signature: signature, title: title, label: _('Verified'), variant: 'success', icon: 'status_success_borderless', show_user: true }
 
 = render partial: 'projects/commit/signature_badge', locals: locals
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 8f802792e6a..689862eae8a 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -9,7 +9,7 @@
   .tree-holder
     .nav-block
       .tree-ref-container
-        .tree-ref-holder
+        .tree-ref-holder.gl-max-w-26
           #js-project-commits-ref-switcher{ data: { "project-id" => @project.id, "ref" => @ref, "commits_path": project_commits_path(@project), "ref_type": @ref_type.to_s } }
 
         %ul.breadcrumb.repo-breadcrumb
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index f6e3c15c08b..e87005434e4 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -36,6 +36,8 @@
       = c.body do
         = _('On the left sidebar, select %{merge_requests_link} to view them.').html_safe % { merge_requests_link: link_to('Settings > Merge requests', project_settings_merge_requests_path(@project)).html_safe }
 
+= render_if_exists 'projects/settings/analytics_dashboards', expanded: expanded
+
 %section.settings.no-animate{ class: ('expanded' if expanded), data: { qa_selector: 'badges_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
@@ -72,6 +74,9 @@
       = link_to _('Run housekeeping'), housekeeping_project_path(@project),
         method: :post, class: "btn gl-button btn-default"
 
+      .gl-display-inline-flex
+        #js-project-prune-unreachable-objects-button{ data: { prune_objects_path: housekeeping_project_path(@project, prune: true), prune_objects_doc_path: help_page_path('administration/housekeeping', anchor: 'prune-unreachable-objects') } }
+
     = render 'export', project: @project
 
     = render_if_exists 'projects/settings/archive'
diff --git a/app/views/projects/environments/edit.html.haml b/app/views/projects/environments/edit.html.haml
index dcd5fb2574e..7a275b51c74 100644
--- a/app/views/projects/environments/edit.html.haml
+++ b/app/views/projects/environments/edit.html.haml
@@ -3,4 +3,5 @@
 
 #js-edit-environment{ data: { project_environments_path: project_environments_path(@project),
                               update_environment_path: project_environment_path(@project, @environment),
+                              protected_environment_settings_path: (project_settings_ci_cd_path(@project, anchor: 'js-protected-environments-settings') if @project.licensed_feature_available?(:protected_environments)),
                               environment: environment_data(@environment)} }
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index 7cd4ab08680..1d4e907dd61 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -4,7 +4,7 @@
 .file-finder-holder.tree-holder.clearfix.js-file-finder{ 'data-file-find-url': "#{escape_javascript(project_files_path(@project, @ref, format: :json))}", 'data-find-tree-url': escape_javascript(project_tree_path(@project, @ref)), 'data-blob-url-template': escape_javascript(project_blob_path(@project, @ref)) }
   .nav-block
     .tree-ref-holder
-      = render 'shared/ref_switcher', destination: 'find_file', path: @path
+      #js-blob-ref-switcher{ data: { project_id: @project.id, ref: @ref, namespace: "/-/find_file" } }
     %ul.breadcrumb.repo-breadcrumb
       %li.breadcrumb-item
         = link_to project_tree_path(@project, @ref) do
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index 905c5779c7d..d28ee30b6f9 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -15,8 +15,7 @@
 
     .dropdown.gl-display-inline.gl-md-ml-3.issue-sort-dropdown.gl-mt-3.gl-md-mt-0
       .btn-group{ role: 'group' }
-        .btn-group{ role: 'group' }
-          = gl_redirect_listbox_tag [created_at, activity], @sort
+        = gl_redirect_listbox_tag [created_at, activity], @sort
         = forks_sort_direction_button(sort_value)
 
     - if current_user && can?(current_user, :fork_project, @project)
diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml
index edf8f71c673..f026a6158cb 100644
--- a/app/views/projects/graphs/charts.html.haml
+++ b/app/views/projects/graphs/charts.html.haml
@@ -34,7 +34,7 @@
     .col-md-6
       .tree-ref-container
         .tree-ref-holder
-          = render 'shared/ref_switcher', destination: 'graphs_commits', path: @path
+          #js-project-graph-ref-switcher{ data: { project_id: @project.id, graph_path: project_graph_path(@project, @id), project_branch: current_ref } }
         %ul.breadcrumb.repo-breadcrumb
           = commits_breadcrumbs
 
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index a27f076d5dd..754de2db8f3 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -1,14 +1,5 @@
 - page_title _('Contributors')
-- if Feature.enabled?(:use_ref_type_parameter, @project)
-  - graph_path = project_graph_path(@project, current_ref, ref_type: @ref_type, format: :json)
-  - commits_path = project_commits_path(@project, current_ref, ref_type: @ref_type)
-- else
-  - graph_path = project_graph_path(@project, current_ref, format: :json)
-  - commits_path = project_commits_path(@project, current_ref)
+- graph_path = project_graph_path(@project, current_ref, ref_type: @ref_type, format: :json)
+- commits_path = project_commits_path(@project, current_ref, ref_type: @ref_type)
 
-.sub-header-block.gl-bg-gray-10.gl-p-5
-  .tree-ref-holder.gl-display-inline-block.gl-vertical-align-middle.gl-mr-3>
-    = render 'shared/ref_switcher', destination: 'graphs'
-  = link_to s_('Commits|History'), commits_path, class: 'btn gl-button btn-default'
-
-.js-contributors-graph{ class: container_class, data: { project_graph_path: graph_path, project_branch: current_ref, default_branch: @project.default_branch } }
+.js-contributors-graph{ class: container_class, data: { project_graph_path: graph_path, project_branch: current_ref, default_branch: @project.default_branch, project_id: @project.id, commits_path: commits_path } }
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index 40935ab6f70..c86f9c79912 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -11,4 +11,5 @@
     target_type: 'issue',
     show_timeline_view_toggle: show_timeline_view_toggle?(@issue).to_s,
     current_user_data: UserSerializer.new.represent(current_user, {only_path: true}, CurrentUserEntity).to_json,
-    can_add_timeline_events: "#{can?(current_user, :admin_incident_management_timeline_event, @issue)}" } }
+    can_add_timeline_events: "#{can?(current_user, :admin_incident_management_timeline_event, @issue)}",
+    report_abuse_path: add_category_abuse_reports_path } }
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 1d3320e4f82..18975bc3db6 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -20,7 +20,7 @@
         %span.issuable-authored.d-none.d-sm-inline-block
           &middot;
           - if issue.service_desk_reply_to
-            #{_('created %{timeAgoString} by %{email} via %{user}').html_safe % { timeAgoString: time_ago_with_tooltip(issue.created_at, placement: 'bottom'), email: issue.service_desk_reply_to, user: link_to_member(@project, issue.author, avatar: false) }}
+            #{_('created %{timeAgoString} by %{email} via %{user}').html_safe % { timeAgoString: time_ago_with_tooltip(issue.created_at, placement: 'bottom'), email: issue.present(current_user: current_user).service_desk_reply_to, user: link_to_member(@project, issue.author, avatar: false) }}
           - else
             #{s_('IssueList|created %{timeAgoString} by %{user}').html_safe % { timeAgoString: time_ago_with_tooltip(issue.created_at, placement: 'bottom'), user: link_to_member(@project, issue.author, avatar: false) }}
           = render_if_exists 'shared/issuable/gitlab_team_member_badge', author: issue.author
diff --git a/app/views/projects/learn_gitlab/index.html.haml b/app/views/projects/learn_gitlab/index.html.haml
deleted file mode 100644
index 0e950c26d34..00000000000
--- a/app/views/projects/learn_gitlab/index.html.haml
+++ /dev/null
@@ -1,8 +0,0 @@
-- breadcrumb_title _("Learn GitLab")
-- page_title _("Learn GitLab")
-- add_page_specific_style 'page_bundles/learn_gitlab'
-- data = learn_gitlab_data(@project)
-
-= render 'projects/invite_members_modal', project: @project
-
-#js-learn-gitlab-app{ data: data }
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 0123c5efd3d..92b0a5a0b90 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
@@ -47,6 +47,6 @@
               - if moved_mr_sidebar_enabled?
                 %li.gl-dropdown-divider
                   %hr.dropdown-divider
-              #js-report-abuse-dropdown-item{ data: { report_abuse_path: add_category_abuse_reports_path, reported_user_id: @merge_request.author.id, reported_from_url: merge_request_url(@merge_request) } }
+              .js-report-abuse-dropdown-item{ data: { report_abuse_path: add_category_abuse_reports_path, reported_user_id: @merge_request.author.id, reported_from_url: merge_request_url(@merge_request) } }
 
 #js-report-abuse-drawer
diff --git a/app/views/projects/merge_requests/_page.html.haml b/app/views/projects/merge_requests/_page.html.haml
index 47eb3e016d3..880bffc43ab 100644
--- a/app/views/projects/merge_requests/_page.html.haml
+++ b/app/views/projects/merge_requests/_page.html.haml
@@ -19,11 +19,10 @@
 - if mr_action == 'diffs'
   - add_page_startup_api_call @endpoint_diff_batch_url
 
-.merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
+.merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version, diffs_batch_cache_key: @diffs_batch_cache_key } }
+  = render "projects/merge_requests/mr_title"
   - if moved_mr_sidebar_enabled?
     #js-merge-sticky-header{ data: { data: sticky_header_data.to_json } }
-  = render "projects/merge_requests/mr_title"
-
   .merge-request-details.issuable-details{ data: { id: @merge_request.project.id } }
     = render "projects/merge_requests/mr_box"
     .merge-request-tabs-holder{ class: "#{'js-tabs-affix' unless ENV['RAILS_ENV'] == 'test'} #{'gl-static' if moved_mr_sidebar_enabled?}" }
@@ -81,7 +80,8 @@
                 target_type: 'merge_request',
                 help_page_path: suggest_changes_help_path,
                 current_user_data: @current_user_data,
-                is_locked: @merge_request.discussion_locked.to_s } }
+                is_locked: @merge_request.discussion_locked.to_s,
+                report_abuse_path: add_category_abuse_reports_path } }
           - 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
 
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 48334023cf0..0570d22529b 100644
--- a/app/views/projects/merge_requests/creations/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml
@@ -9,66 +9,16 @@
       .card-new-merge-request
         %h2.gl-font-size-h2
           = _('Source branch')
-        .clearfix
-          .merge-request-select.dropdown
-            = f.hidden_field :source_project_id
-            = dropdown_toggle @merge_request.source_project_path, { toggle: "dropdown", 'field-name': "#{f.object_name}[source_project_id]", disabled: @merge_request.persisted?, default_text: _("Select source project") }, { toggle_class: "js-compare-dropdown js-source-project" }
-            .dropdown-menu.dropdown-menu-selectable.dropdown-source-project
-              = dropdown_title(_("Select source project"))
-              = dropdown_filter(_("Search projects"))
-              = dropdown_content do
-                = render 'projects/merge_requests/dropdowns/project',
-                  projects: [@merge_request.source_project],
-                  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, default_text: _("Select target 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"))
-              = dropdown_content
-              = dropdown_loading
-        .gl-bg-gray-50.gl-rounded-base.gl-mx-2.gl-my-4
-          .compare-commit-empty.js-source-commit-empty.gl-display-flex.gl-align-items-center.gl-p-5{ style: 'display: none;' }
-            = sprite_icon('branch', size: 16, css_class: 'gl-mr-3')
-            = _('Select a branch to compare')
-          = gl_loading_icon(css_class: 'js-source-loading gl-py-3')
-          %ul.list-unstyled.mr_source_commit
+        #js-source-project-dropdown{ data: { current_project: { value: f.object.source_project_id.to_s, text: f.object.source_project.full_path, refsUrl: refs_project_path(f.object.source_project) }.to_json, current_branch: { value: f.object.source_branch.presence, text: f.object.source_branch.presence }.to_json } }
 
     .col-lg-6
       .card-new-merge-request
         %h2.gl-font-size-h2
           = _('Target branch')
-        .clearfix
-          .merge-request-select.dropdown
-            - if Feature.enabled?(:mr_compare_dropdowns, @project)
-              #js-target-project-dropdown{ data: { target_projects_path: project_new_merge_request_json_target_projects_path(@project), current_project: { value: f.object.target_project_id.to_s, text: f.object.target_project.full_path }.to_json } }
-            - else
-              - projects = target_projects(@project)
-              = f.hidden_field :target_project_id
-              = dropdown_toggle f.object.target_project.full_path, { toggle: "dropdown", 'field-name': "#{f.object_name}[target_project_id]", disabled: @merge_request.persisted?, default_text: _("Select target project") }, { toggle_class: "js-compare-dropdown js-target-project" }
-              .dropdown-menu.dropdown-menu-selectable.dropdown-target-project
-                = dropdown_title(_("Select target project"))
-                = dropdown_filter(_("Search projects"))
-                = dropdown_content do
-                  = render 'projects/merge_requests/dropdowns/project',
-                    projects: projects,
-                    selected: f.object.target_project_id
-          .merge-request-select.dropdown
-            = f.hidden_field :target_branch
-            = dropdown_toggle f.object.target_branch.presence || _("Select target branch"), { toggle: "dropdown", 'field-name': "#{f.object_name}[target_branch]", 'refs-url': refs_project_path(f.object.target_project), selected: f.object.target_branch, default_text: _("Select target branch") }, { toggle_class: "js-compare-dropdown js-target-branch monospace" }
-            .dropdown-menu.dropdown-menu-selectable.js-target-branch-dropdown.git-revision-dropdown
-              = dropdown_title(_("Select target branch"))
-              = dropdown_filter(_("Search branches"))
-              = dropdown_content
-              = dropdown_loading
-        .gl-bg-gray-50.gl-rounded-base.gl-mx-2.gl-my-4
-          .compare-commit-empty.js-target-commit-empty.gl-display-flex.gl-align-items-center.gl-p-5{ style: 'display: none;' }
-            = sprite_icon('branch', size: 16, css_class: 'gl-mr-3')
-            = _('Select a branch to compare')
-          = gl_loading_icon(css_class: 'js-target-loading gl-py-3')
-          %ul.list-unstyled.mr_target_commit
+        #js-target-project-dropdown{ data: { target_projects_path: project_new_merge_request_json_target_projects_path(@project), current_project: { value: f.object.target_project_id.to_s, text: f.object.target_project.full_path, refsUrl: refs_project_path(f.object.target_project) }.to_json, current_branch: { value: f.object.target_branch.presence, text: f.object.target_branch.presence }.to_json } }
 
   - if @merge_request.errors.any?
     = form_errors(@merge_request)
-  = f.submit _('Compare branches and continue'), data: { qa_selector: 'compare_branches_button' }, pajamas_button: true
+  .row
+    .col-12
+      = f.submit _('Compare branches and continue'), data: { qa_selector: 'compare_branches_button' }, pajamas_button: true
diff --git a/app/views/projects/mirrors/_branch_filter.html.haml b/app/views/projects/mirrors/_branch_filter.html.haml
new file mode 100644
index 00000000000..b9db9898d49
--- /dev/null
+++ b/app/views/projects/mirrors/_branch_filter.html.haml
@@ -0,0 +1,6 @@
+.form-check.gl-mb-3
+  = check_box_tag :only_protected_branches, '1', false, class: 'js-mirror-protected form-check-input'
+  = label_tag :only_protected_branches, _('Mirror only protected branches'), class: 'form-check-label'
+  .form-text.text-muted
+    = _('If enabled, only protected branches will be mirrored.')
+    = link_to _('Learn more.'), help_page_path('user/project/repository/mirror/index.md', anchor: 'mirror-only-protected-branches'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index f4e57450aa1..4cfe463fa38 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -27,12 +27,7 @@
 
             = render 'projects/mirrors/mirror_repos_form', f: f
 
-            .form-check.gl-mb-3
-              = check_box_tag :only_protected_branches, '1', false, class: 'js-mirror-protected form-check-input'
-              = label_tag :only_protected_branches, _('Mirror only protected branches'), class: 'form-check-label'
-              .form-text.text-muted
-                = _('If enabled, only protected branches will be mirrored.')
-                = link_to _('Learn more.'), help_page_path('user/project/repository/mirror/index.md', anchor: 'mirror-only-protected-branches'), target: '_blank', rel: 'noopener noreferrer'
+            = render 'projects/mirrors/branch_filter'
 
           .panel-footer
             = f.submit _('Mirror repository'), class: 'js-mirror-submit', name: :update_remote_mirror, pajamas_button: true, data: { qa_selector: 'mirror_repository_button' }
diff --git a/app/views/projects/mirrors/_mirror_repos_list.html.haml b/app/views/projects/mirrors/_mirror_repos_list.html.haml
index fb8133e6de8..46833b5986b 100644
--- a/app/views/projects/mirrors/_mirror_repos_list.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos_list.html.haml
@@ -26,7 +26,9 @@
           - @project.remote_mirrors.each_with_index do |mirror, index|
             - next if mirror.new_record?
             %tr.rspec-mirrored-repository-row{ class: ('bg-secondary' if mirror.disabled?), data: { qa_selector: 'mirrored_repository_row_container' } }
-              %td{ data: { qa_selector: 'mirror_repository_url_content' } }= mirror.safe_url || _('Invalid URL')
+              %td{ data: { qa_selector: 'mirror_repository_url_content' } }
+                = mirror.safe_url || _('Invalid URL')
+                = render_if_exists 'projects/mirrors/mirror_branches_setting_badge', record: mirror
               %td= _('Push')
               %td
                 = mirror.last_update_started_at.present? ? time_ago_with_tooltip(mirror.last_update_started_at) : _('Never')
diff --git a/app/views/projects/mirrors/_mirror_repos_push.html.haml b/app/views/projects/mirrors/_mirror_repos_push.html.haml
index 339c5d82919..136f504084e 100644
--- a/app/views/projects/mirrors/_mirror_repos_push.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos_push.html.haml
@@ -4,6 +4,7 @@
   = rm_f.hidden_field :enabled, value: '1'
   = rm_f.hidden_field :url, class: 'js-mirror-url-hidden', required: true, pattern: "(#{protocols}):\/\/.+"
   = rm_f.hidden_field :only_protected_branches, class: 'js-mirror-protected-hidden'
+  = render_if_exists partial: 'projects/mirrors/branch_name_regex', locals: { f: rm_f }
   = rm_f.hidden_field :keep_divergent_refs, class: 'js-mirror-keep-divergent-refs-hidden'
   = render partial: 'projects/mirrors/ssh_host_keys', locals: { f: rm_f }
   = render partial: 'projects/mirrors/authentication_method', locals: { f: rm_f }
diff --git a/app/views/projects/ml/candidates/show.html.haml b/app/views/projects/ml/candidates/show.html.haml
index 7fa98f69edf..77262243efb 100644
--- a/app/views/projects/ml/candidates/show.html.haml
+++ b/app/views/projects/ml/candidates/show.html.haml
@@ -2,6 +2,5 @@
 - add_to_breadcrumbs _("Experiments"), project_ml_experiments_path(@project)
 - add_to_breadcrumbs experiment.name, project_ml_experiment_path(@project, experiment.iid)
 - breadcrumb_title "Candidate #{@candidate.iid}"
-- data = candidate_as_data(@candidate)
 
-#js-show-ml-candidate{ data: { candidate: data } }
+#js-show-ml-candidate{ data: { view_model: show_candidate_view_model(@candidate) } }
diff --git a/app/views/projects/ml/experiments/index.html.haml b/app/views/projects/ml/experiments/index.html.haml
index a84cb15d940..dd064239e36 100644
--- a/app/views/projects/ml/experiments/index.html.haml
+++ b/app/views/projects/ml/experiments/index.html.haml
@@ -1,11 +1,7 @@
-- breadcrumb_title _('ML Experiments')
-- page_title _('ML Experiments')
+- breadcrumb_title s_('MlExperimentTracking|Model experiments')
+- page_title s_('MlExperimentTracking|Model experiments')
 
-.page-title-holder.d-flex.align-items-center
-  %h1.page-title.gl-font-size-h-display= _('Machine Learning Experiments')
-
-= render "incubation_banner"
-
-%div{ class: container_class }
-  .content-list.builds-content-list
-    = render "experiment_list", experiments: @experiments, project: @project
+#js-project-ml-experiments-index{ data: {
+  experiments: experiments_as_data(@project, @experiments),
+  page_info: formatted_page_info(@page_info)
+} }
diff --git a/app/views/projects/ml/experiments/show.html.haml b/app/views/projects/ml/experiments/show.html.haml
index 143981eebe6..4433d1fafe9 100644
--- a/app/views/projects/ml/experiments/show.html.haml
+++ b/app/views/projects/ml/experiments/show.html.haml
@@ -4,6 +4,7 @@
 - items = candidates_table_items(@candidates)
 - metrics = unique_logged_names(@candidates, &:latest_metrics)
 - params = unique_logged_names(@candidates, &:params)
+- page_info = formatted_page_info(@page_info)
 
 .page-title-holder.d-flex.align-items-center
   %h1.page-title.gl-font-size-h-display= @experiment.name
@@ -12,5 +13,5 @@
   candidates: items,
   metrics: metrics,
   params: params,
-  pagination: @pagination.to_json
+  page_info: page_info
 } }
diff --git a/app/views/projects/network/_head.html.haml b/app/views/projects/network/_head.html.haml
index e430dc2f372..097ffb0b7fe 100644
--- a/app/views/projects/network/_head.html.haml
+++ b/app/views/projects/network/_head.html.haml
@@ -1,6 +1,6 @@
 .row-content-block.second-block.content-component-block.gl-px-0.gl-py-3
-  .tree-ref-holder
-    = render partial: 'shared/ref_switcher', locals: {destination: 'graph'}
+  .gl-w-20
+    #js-graph-ref-switcher{ data: { project_id: @project.id, ref: @ref, network_path: project_network_path(@project) } }
 
   .oneline
     = _("You can move around the graph by using the arrow keys.")
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 70bb97b7625..c8d4f02274b 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -1,6 +1,6 @@
 - breadcrumb_title _("Graph")
 - page_title _("Graph"), @ref
-- network_path = Feature.enabled?(:use_ref_type_parameter) ? project_network_path(@project, @id, ref_type: @ref_type) : project_network_path(@project, @id)
+- network_path = project_network_path(@project, @id, ref_type: @ref_type)
 = render "head"
 .gl-mt-5
   .project-network.gl-border-1.gl-border-solid.gl-border-gray-300
diff --git a/app/views/projects/notes/_more_actions_dropdown.html.haml b/app/views/projects/notes/_more_actions_dropdown.html.haml
index 2351bd209a7..8c94a18e1b0 100644
--- a/app/views/projects/notes/_more_actions_dropdown.html.haml
+++ b/app/views/projects/notes/_more_actions_dropdown.html.haml
@@ -8,9 +8,8 @@
       %li
         = clipboard_button(text: noteable_note_url(note), title: _('Copy reference'), button_text: _('Copy link'), class: 'btn-clipboard', hide_tooltip: true, hide_button_icon: true)
       - unless is_current_user
-        %li
-          = link_to new_abuse_report_path(user_id: note.author.id, ref_url: noteable_note_url(note)) do
-            = _('Report abuse to administrator')
+        .gl-ml-n2
+          .js-report-abuse-dropdown-item{ data: { report_abuse_path: add_category_abuse_reports_path, reported_user_id: note.author.id, reported_from_url: noteable_note_url(note) } }
       - if note_editable
         %li
           = link_to note_url(note), method: :delete, data: { confirm: _('Are you sure you want to delete this comment?'), confirm_btn_variant: 'danger', qa_selector: 'delete_comment_button' }, aria: { label: _('Delete comment') }, remote: true, class: 'js-note-delete' do
diff --git a/app/views/projects/runners/_specific_runners.html.haml b/app/views/projects/runners/_project_runners.html.haml
index f3a7037bdab..543a564568b 100644
--- a/app/views/projects/runners/_specific_runners.html.haml
+++ b/app/views/projects/runners/_project_runners.html.haml
@@ -1,17 +1,13 @@
 %h4
-  = _('Specific runners')
+  = s_('Runners|Project runners')
 
 .bs-callout.help-callout
   - if can?(current_user, :register_project_runners, @project)
-    = _('These runners are specific to this project.')
-    - if params[:ci_runner_templates]
-      %hr
-      = render partial: 'ci/runner/setup_runner_in_aws',
-               locals: { registration_token: @project.runners_token }
+    = s_('Runners|These runners are assigned to this project.')
     %hr
     = render partial: 'ci/runner/how_to_setup_runner',
             locals: { registration_token: @project.runners_token,
-                      type: s_('Runners|specific'),
+                      type: _('project'),
                       reset_token_url: reset_registration_token_namespace_project_settings_ci_cd_path,
                       project_path: @project.path_with_namespace,
                       group_path: '' }
@@ -22,13 +18,13 @@
 %hr
 
 - if @project_runners.any?
-  %h4.underlined-title= _('Available specific runners')
-  %ul.bordered-list.activated-specific-runners
+  %h4.underlined-title= s_('Runners|Assigned project runners')
+  %ul.bordered-list{ data: { testid: 'assigned_project_runners' } }
     = render partial: 'projects/runners/runner', collection: @project_runners, as: :runner
   = paginate @project_runners, theme: "gitlab", param_name: "project_page", params: { expand_runners: true, anchor: 'js-runners-settings' }
 
 - if @assignable_runners.any?
   %h4.underlined-title= _('Other available runners')
-  %ul.bordered-list.available-specific-runners
+  %ul.bordered-list{ data: { testid: 'available_project_runners' } }
     = render partial: 'projects/runners/runner', collection: @assignable_runners, as: :runner
   = paginate @assignable_runners, theme: "gitlab", param_name: "specific_page", :params => { :anchor => 'js-runners-settings'}
diff --git a/app/views/projects/runners/_settings.html.haml b/app/views/projects/runners/_settings.html.haml
index a02bdac442b..f85b5fd9866 100644
--- a/app/views/projects/runners/_settings.html.haml
+++ b/app/views/projects/runners/_settings.html.haml
@@ -2,7 +2,7 @@
 
 .row
   .col-sm-6
-    = render 'projects/runners/specific_runners'
+    = render 'projects/runners/project_runners'
   .col-sm-6
     = render 'projects/runners/shared_runners'
     = render 'projects/runners/group_runners'
diff --git a/app/views/projects/settings/packages_and_registries/cleanup_tags.html.haml b/app/views/projects/settings/packages_and_registries/cleanup_tags.html.haml
index 5244587c16d..d27d268d65e 100644
--- a/app/views/projects/settings/packages_and_registries/cleanup_tags.html.haml
+++ b/app/views/projects/settings/packages_and_registries/cleanup_tags.html.haml
@@ -1,6 +1,6 @@
-- add_to_breadcrumbs _('Package and registry settings'), project_settings_packages_and_registries_path(@project)
+- add_to_breadcrumbs _('Packages and registries settings'), project_settings_packages_and_registries_path(@project)
 - breadcrumb_title s_('ContainerRegistry|Clean up image tags')
-- page_title s_('ContainerRegistry|Clean up image tags'), _('Package and registry settings')
+- page_title s_('ContainerRegistry|Clean up image tags'), _('Packages and registries settings')
 - @content_class = 'limit-container-width' unless fluid_layout
 
 #js-registry-settings-cleanup-image-tags{ data: cleanup_settings_data }
diff --git a/app/views/projects/settings/packages_and_registries/show.html.haml b/app/views/projects/settings/packages_and_registries/show.html.haml
index e0ac07f5f31..c81b38f44dd 100644
--- a/app/views/projects/settings/packages_and_registries/show.html.haml
+++ b/app/views/projects/settings/packages_and_registries/show.html.haml
@@ -1,5 +1,5 @@
-- breadcrumb_title _('Package and registry settings')
-- page_title _('Package and registry settings')
+- breadcrumb_title _('Packages and registries settings')
+- page_title _('Packages and registries settings')
 - @content_class = 'limit-container-width' unless fluid_layout
 
 #js-registry-settings{ data: settings_data }
diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml
index 953bfcf71ab..de171a25e8d 100644
--- a/app/views/projects/settings/repository/show.html.haml
+++ b/app/views/projects/settings/repository/show.html.haml
@@ -15,7 +15,7 @@
 -# reused in EE.
 = render "projects/settings/repository/protected_branches", protected_branch_entity: @project
 = render "shared/deploy_tokens/index", group_or_project: @project, description: deploy_token_description
-= render @deploy_keys
+= render 'shared/deploy_keys/index'
 = render "projects/cleanup/show"
 
 = render_if_exists 'shared/promotions/promote_repository_features'
diff --git a/app/views/projects/starrers/index.html.haml b/app/views/projects/starrers/index.html.haml
index 23578652862..2d5581fc1c5 100644
--- a/app/views/projects/starrers/index.html.haml
+++ b/app/views/projects/starrers/index.html.haml
@@ -14,7 +14,7 @@
             %button.user-search-btn{ type: "submit", "aria-label" => _("Submit search") }
               = sprite_icon('search')
           - starrers_sort_options = starrers_sort_options_hash.map { |value, text| { value: value, text: text, href: filter_starrer_path(sort: value) } }
-          = gl_redirect_listbox_tag starrers_sort_options, @sort, class: 'gl-ml-3', data: { right: true }
+          = gl_redirect_listbox_tag starrers_sort_options, @sort, class: 'gl-ml-3', data: { placement: 'right' }
 - if @starrers.size > 0
   .row.gl-mt-3
     = render partial: 'starrer', collection: @starrers, as: :starrer
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index fd807350245..6cd3c584f2a 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,7 +1,7 @@
 - is_project_overview = local_assigns.fetch(:is_project_overview, false)
 
-.tree-ref-container.gl-display-flex.mb-2.mb-md-0
-  .tree-ref-holder
+.tree-ref-container.gl-display-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
+  .tree-ref-holder.gl-max-w-26
     #js-tree-ref-switcher{ data: { project_id: @project.id, project_root_path: project_path(@project) } }
 
   #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
diff --git a/app/views/protected_branches/shared/_branches_list.html.haml b/app/views/protected_branches/shared/_branches_list.html.haml
index c35895e000c..8235411d240 100644
--- a/app/views/protected_branches/shared/_branches_list.html.haml
+++ b/app/views/protected_branches/shared/_branches_list.html.haml
@@ -22,7 +22,7 @@
           %th
             = s_("ProtectedBranch|Allowed to merge")
           %th
-            = s_("ProtectedBranch|Allowed to push")
+            = s_("ProtectedBranch|Allowed to push and merge")
           %th
             = s_("ProtectedBranch|Allowed to force push")
             %span.has-tooltip{ data: { container: 'body' }, title: s_('ProtectedBranch|Allow all users with push access to force push.'), 'aria-hidden': 'true' }
diff --git a/app/views/protected_branches/shared/_create_protected_branch.html.haml b/app/views/protected_branches/shared/_create_protected_branch.html.haml
index 315daa5e029..109d92af8a7 100644
--- a/app/views/protected_branches/shared/_create_protected_branch.html.haml
+++ b/app/views/protected_branches/shared/_create_protected_branch.html.haml
@@ -25,7 +25,7 @@
         .col-sm-12
           = yield :merge_access_levels
       .form-group.row
-        = f.label :push_access_levels_attributes, s_("ProtectedBranch|Allowed to push:"), class: 'col-sm-12'
+        = f.label :push_access_levels_attributes, s_("ProtectedBranch|Allowed to push and merge:"), class: 'col-sm-12'
         .col-sm-12
           = yield :push_access_levels
       .form-group.row
diff --git a/app/views/protected_branches/shared/_protected_branch.html.haml b/app/views/protected_branches/shared/_protected_branch.html.haml
index b4fd7a24b41..c2a5dd8a9b0 100644
--- a/app/views/protected_branches/shared/_protected_branch.html.haml
+++ b/app/views/protected_branches/shared/_protected_branch.html.haml
@@ -1,14 +1,15 @@
 - can_admin_entity = protected_branch_can_admin_entity?(protected_branch_entity)
 - url = protected_branch_path_by_entity(protected_branch, protected_branch_entity)
+- protected_branch_test_type = protected_branch.project_level? ? 'project-level' : 'group-level'
 
-%tr.js-protected-branch-edit-form{ data: { url: url, testid: 'protected-branch' } }
+%tr.js-protected-branch-edit-form{ data: { url: url, testid: 'protected-branch', test_type: protected_branch_test_type } }
   %td
     %span.ref-name= protected_branch.name
 
-    - if protected_branch_entity.is_a?(Project) && protected_branch_entity.root_ref?(protected_branch.name)
-      = gl_badge_tag s_('ProtectedBranch|default'), variant: :info
+    - if protected_branch.project_level?
+      - if protected_branch_entity.root_ref?(protected_branch.name)
+        = gl_badge_tag s_('ProtectedBranch|default'), variant: :info
 
-    - if protected_branch_entity.is_a?(Project)
       %div
         - if protected_branch.wildcard?
           - matching_branches = protected_branch.matching(repository.branch_names)
@@ -18,8 +19,12 @@
 
   = yield
 
-  = render_if_exists 'protected_branches/ee/code_owner_approval_table', protected_branch: protected_branch, protected_branch_entity: protected_branch_entity
+  = render_if_exists 'protected_branches/ee/code_owner_approval_table', can_update: local_assigns[:can_update], protected_branch: protected_branch, protected_branch_entity: protected_branch_entity
 
   - if can_admin_entity
-    %td
-      = link_to s_('ProtectedBranch|Unprotect'), [protected_branch_entity, protected_branch, { update_section: 'js-protected-branches-settings' }], disabled: local_assigns[:disabled], aria: { label: s_('ProtectedBranch|Unprotect branch') }, data: { confirm: s_('ProtectedBranch|Branch will be writable for developers. Are you sure?'), confirm_btn_variant: 'danger' }, method: :delete, class: "btn gl-button btn-danger btn-sm"
+    %td.text-right{ data: { testid: 'protected-branch-action' } }
+      - if local_assigns[:is_inherited]
+        %span.has-tooltip{ data: { container: 'body' }, title: s_('ProtectedBranch|Inherited - This setting can be changed at the group level'), 'aria-hidden': 'true' }
+          = sprite_icon 'lock'
+      - else
+        = link_to s_('ProtectedBranch|Unprotect'), [protected_branch_entity, protected_branch, { update_section: 'js-protected-branches-settings' }], disabled: local_assigns[:disabled], aria: { label: s_('ProtectedBranch|Unprotect branch') }, data: { confirm: s_('ProtectedBranch|Branch will be writable for developers. Are you sure?'), confirm_btn_variant: 'danger' }, method: :delete, class: "btn gl-button btn-danger btn-sm"
diff --git a/app/views/pwa/manifest.json.erb b/app/views/pwa/manifest.json.erb
index 9abb759389d..65501b27451 100644
--- a/app/views/pwa/manifest.json.erb
+++ b/app/views/pwa/manifest.json.erb
@@ -1,27 +1,35 @@
 {
-  "name": "<%= Appearance.current&.title.presence || _('GitLab') %>",
-  "short_name": "<%= appearance_short_name %>",
-  "description": "<%= Appearance.current&.description.presence || _("The complete DevOps platform. One application with endless possibilities. Organizations rely on GitLab’s source code management, CI/CD, security, and more to deliver software rapidly.") %>",
+  "name": "<%= appearance_pwa_name %>",
+  "short_name": "<%= appearance_pwa_short_name %>",
+  "description": "<%= appearance_pwa_description %>",
   "start_url": "<%= explore_projects_path %>",
   "scope": "<%= root_path %>",
   "display": "browser",
   "orientation": "any",
   "background_color": "#fff",
   "theme_color": "<%= user_theme_primary_color %>",
-  "icons": [{
-    "src": "<%= Gitlab::Utils.append_path(Gitlab.config.gitlab.relative_url_root, '/-/pwa-icons/logo-192.png') %>",
-    "sizes": "192x192",
-    "type": "image/png"
-  },
+  "icons": [
+  <% widths = Appearance::ALLOWED_PWA_ICON_SCALER_WIDTHS %>
+  <% widths.each do |width| -%>
   {
-    "src": "<%= Gitlab::Utils.append_path(Gitlab.config.gitlab.relative_url_root, '/-/pwa-icons/logo-512.png') %>",
-    "sizes": "512x512",
+    <% if source = appearance_pwa_icon_path_scaled(width) -%>
+    "src": "<%= source %>",
+    "sizes": "<%=  width.to_s + "x" + width.to_s %>",
     "type": "image/png"
-  },
-  {
-    "src": "<%= Gitlab::Utils.append_path(Gitlab.config.gitlab.relative_url_root, '/-/pwa-icons/maskable-logo.png') %>",
+    <% else -%>
+    "error": "<%= "#{width} is not an allowed PWA scale" %>"
+    <% end -%>
+  }
+  <% unless width == widths.last -%>
+  ,
+  <% end -%>
+  <% end -%>
+  <% unless current_appearance&.pwa_icon.present? -%>
+  ,{
+    "src": "<%= appearance_maskable_logo %>",
     "sizes": "512x512",
     "type": "image/png",
     "purpose": "maskable"
-  }]
+  }
+  <% end -%>]
 }
diff --git a/app/views/search/_category.html.haml b/app/views/search/_category.html.haml
deleted file mode 100644
index 74a5d5fb425..00000000000
--- a/app/views/search/_category.html.haml
+++ /dev/null
@@ -1,37 +0,0 @@
-- users = capture_haml do
-  - if show_user_search_tab?
-    = search_filter_link 'users', _("Users")
-
-.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-  .fade-left= sprite_icon('chevron-lg-left', size: 12)
-  .fade-right= sprite_icon('chevron-lg-right', size: 12)
-  = gl_tabs_nav({ class: 'scrolling-tabs nav-links', data: { testid: 'search-filter' } }) do
-    - if @project
-      - if project_search_tabs?(:blobs)
-        = search_filter_link 'blobs', _("Code"), data: { qa_selector: 'code_tab' }
-      - if project_search_tabs?(:issues)
-        = search_filter_link 'issues', _("Issues")
-      - if project_search_tabs?(:merge_requests)
-        = search_filter_link 'merge_requests', _("Merge requests")
-      - if project_search_tabs?(:wiki)
-        = search_filter_link 'wiki_blobs', _("Wiki")
-      - if project_search_tabs?(:commits)
-        = search_filter_link 'commits', _("Commits")
-      - if project_search_tabs?(:notes)
-        = search_filter_link 'notes', _("Comments")
-      - if project_search_tabs?(:milestones)
-        = search_filter_link 'milestones', _("Milestones")
-      = users
-
-    - elsif @search_service_presenter.show_snippets?
-      = search_filter_link 'snippet_titles', _("Titles and Descriptions"), search: { snippets: true, group_id: nil, project_id: nil }
-    - else
-      = search_filter_link 'projects', _("Projects"), data: { qa_selector: 'projects_tab' }
-      = render_if_exists 'search/category_code' if feature_flag_tab_enabled?(:global_search_code_tab)
-      = render_if_exists 'search/epics_filter_link'
-      = search_filter_link 'issues', _("Issues") if feature_flag_tab_enabled?(:global_search_issues_tab)
-      = search_filter_link 'merge_requests', _("Merge requests") if feature_flag_tab_enabled?(:global_search_merge_requests_tab)
-      = render_if_exists 'search/category_wiki' if feature_flag_tab_enabled?(:global_search_wiki_tab)
-      = render_if_exists 'search/category_elasticsearch'
-      = search_filter_link 'milestones', _("Milestones")
-      = users
diff --git a/app/views/search/_results.html.haml b/app/views/search/_results.html.haml
index 5c952042663..fee943042f9 100644
--- a/app/views/search/_results.html.haml
+++ b/app/views/search/_results.html.haml
@@ -1,18 +1,9 @@
 - search_bar_classes = 'search-sidebar gl-display-flex gl-flex-direction-column gl-mr-4'
 
 = render_if_exists 'shared/promotions/promote_advanced_search'
-- if Feature.enabled?(:search_page_vertical_nav, current_user)
-  .results.gl-md-display-flex.gl-mt-0
-    #js-search-sidebar{ class: search_bar_classes, data: { navigation_json: search_navigation_json } }
-    .gl-w-full.gl-flex-grow-1.gl-overflow-x-hidden
-      = render partial: 'search/results_status' unless @search_objects.to_a.empty?
-      = render partial: 'search/results_list'
-- else
-  = render partial: 'search/results_status' unless @search_objects.to_a.empty?
 
-  .results.gl-md-display-flex.gl-mt-3
-    - if %w[issues merge_requests].include?(@scope)
-      #js-search-sidebar{ class: search_bar_classes, data: { navigation_json: search_navigation_json } }
-
-    .gl-w-full.gl-flex-grow-1.gl-overflow-x-hidden
-      = render partial: 'search/results_list'
+.results.gl-md-display-flex.gl-mt-0
+  #js-search-sidebar{ class: search_bar_classes, data: { navigation_json: search_navigation_json } }
+  .gl-w-full.gl-flex-grow-1.gl-overflow-x-hidden
+    = render partial: 'search/results_status' unless @search_objects.to_a.empty?
+    = render partial: 'search/results_list'
diff --git a/app/views/search/_results_list.html.haml b/app/views/search/_results_list.html.haml
index 195f0f3ad8a..7a57b5cc0fc 100644
--- a/app/views/search/_results_list.html.haml
+++ b/app/views/search/_results_list.html.haml
@@ -1,5 +1,7 @@
 - if @timeout
   = render partial: "search/results/timeout"
+- elsif @search_results.respond_to?(:failed?) && @search_results.failed?
+  = render partial: "search/results/error"
 - elsif @search_objects.to_a.empty?
   = render partial: "search/results/empty"
 - else
diff --git a/app/views/search/_results_status.html.haml b/app/views/search/_results_status.html.haml
index 3cd100db8b7..27405631360 100644
--- a/app/views/search/_results_status.html.haml
+++ b/app/views/search/_results_status.html.haml
@@ -1,6 +1,25 @@
 - return unless @search_service_presenter.show_results_status?
 
-- if Feature.enabled?(:search_page_vertical_nav, current_user)
-  = render partial: 'search/results_status_vert_nav'
-- else
-  = render partial: 'search/results_status_horiz_nav'
+.search-results-status
+  .gl-display-flex.gl-flex-direction-column
+    .gl-p-5.gl-display-flex
+      .gl-md-display-flex.gl-text-left.gl-align-items-center.gl-flex-grow-1.gl-white-space-nowrap.gl-max-w-full
+        - unless @search_service_presenter.without_count?
+          = search_entries_info(@search_objects, @scope, @search_term)
+        - unless @search_service_presenter.show_snippets?
+          - if @project
+            - link_to_project = link_to(@project.full_name, @project, class: 'ml-md-1 gl-text-truncate search-wrap-f-md-down')
+            - if @scope == 'blobs'
+              = _("in")
+              .mx-md-1
+                #js-blob-ref-switcher{ data: { "project-id" => @project.id, "ref" => repository_ref(@project), "field-name": "repository_ref" } }
+              = s_('SearchCodeResults|of %{link_to_project}').html_safe % { link_to_project: link_to_project }
+            - else
+              = _("in project %{link_to_project}").html_safe % { link_to_project: link_to_project }
+          - elsif @group
+            - link_to_group = link_to(@group.name, @group, class: 'ml-md-1')
+            = _("in group %{link_to_group}").html_safe % { link_to_group: link_to_group }
+      - if @search_service_presenter.show_sort_dropdown?
+        .gl-md-display-flex.gl-flex-direction-column
+          #js-search-sort{ data: { "search-sort-options" => search_sort_options.to_json } }
+    %hr.gl-mb-5.gl-mt-0.gl-border-gray-100.gl-w-full
diff --git a/app/views/search/_results_status_horiz_nav.html.haml b/app/views/search/_results_status_horiz_nav.html.haml
deleted file mode 100644
index c0778b70c04..00000000000
--- a/app/views/search/_results_status_horiz_nav.html.haml
+++ /dev/null
@@ -1,22 +0,0 @@
-.search-results-status
-  .row-content-block.gl-display-flex
-    .gl-md-display-flex.gl-text-left.gl-align-items-center.gl-flex-grow-1
-      - unless @search_service_presenter.without_count?
-        = search_entries_info(@search_objects, @scope, @search_term)
-      - unless @search_service_presenter.show_snippets?
-        - if @project
-          - link_to_project = link_to(@project.full_name, @project, class: 'ml-md-1')
-          - if @scope == 'blobs'
-            = _("in")
-            .mx-md-1
-              #js-blob-ref-switcher{ data: { "project-id" => @project.id, "ref" => repository_ref(@project), "field-name": "repository_ref" } }
-            = s_('SearchCodeResults|of %{link_to_project}').html_safe % { link_to_project: link_to_project }
-          - else
-            = _("in project %{link_to_project}").html_safe % { link_to_project: link_to_project }
-        - elsif @group
-          - link_to_group = link_to(@group.name, @group, class: 'ml-md-1')
-          = _("in group %{link_to_group}").html_safe % { link_to_group: link_to_group }
-    - if @search_service_presenter.show_sort_dropdown?
-      .gl-md-display-flex.gl-flex-direction-column
-        #js-search-sort{ data: { "search-sort-options" => search_sort_options.to_json } }
-
diff --git a/app/views/search/_results_status_vert_nav.html.haml b/app/views/search/_results_status_vert_nav.html.haml
deleted file mode 100644
index 29cc0a20123..00000000000
--- a/app/views/search/_results_status_vert_nav.html.haml
+++ /dev/null
@@ -1,23 +0,0 @@
-.search-results-status
-  .gl-display-flex.gl-flex-direction-column
-    .gl-p-5.gl-display-flex
-      .gl-md-display-flex.gl-text-left.gl-align-items-center.gl-flex-grow-1
-        - unless @search_service_presenter.without_count?
-          = search_entries_info(@search_objects, @scope, @search_term)
-        - unless @search_service_presenter.show_snippets?
-          - if @project
-            - link_to_project = link_to(@project.full_name, @project, class: 'ml-md-1')
-            - if @scope == 'blobs'
-              = _("in")
-              .mx-md-1
-                #js-blob-ref-switcher{ data: { "project-id" => @project.id, "ref" => repository_ref(@project), "field-name": "repository_ref" } }
-              = s_('SearchCodeResults|of %{link_to_project}').html_safe % { link_to_project: link_to_project }
-            - else
-              = _("in project %{link_to_project}").html_safe % { link_to_project: link_to_project }
-          - elsif @group
-            - link_to_group = link_to(@group.name, @group, class: 'ml-md-1')
-            = _("in group %{link_to_group}").html_safe % { link_to_group: link_to_group }
-      - if @search_service_presenter.show_sort_dropdown?
-        .gl-md-display-flex.gl-flex-direction-column
-          #js-search-sort{ data: { "search-sort-options" => search_sort_options.to_json } }
-    %hr.gl-mb-5.gl-mt-0.gl-border-gray-100.gl-w-full
diff --git a/app/views/search/results/_error.html.haml b/app/views/search/results/_error.html.haml
new file mode 100644
index 00000000000..f0d9283c620
--- /dev/null
+++ b/app/views/search/results/_error.html.haml
@@ -0,0 +1,7 @@
+.gl-display-flex.gl-flex-direction-column.gl-align-items-center
+  %div
+    .svg-content.svg-150
+      = image_tag 'illustrations/search-timeout-md.svg'
+  %div
+    %h4.gl-text-center.gl-font-weight-bold= s_('SearchError|A search query problem has occurred')
+    %p.gl-text-center= s_('SearchError|To resolve the problem, check the query syntax and try again.')
diff --git a/app/views/search/results/_note.html.haml b/app/views/search/results/_note.html.haml
index 67f16075649..c7c91e768df 100644
--- a/app/views/search/results/_note.html.haml
+++ b/app/views/search/results/_note.html.haml
@@ -3,11 +3,11 @@
 - noteable_identifier = note.noteable.try(:iid) || note.noteable.try(:id)
 
 .search-result-row
-  %h5.note-search-caption.str-truncated
-    = sprite_icon('comment', css_class: 'gl-vertical-align-text-bottom')
-    = link_to_member(project, note.author, avatar: false)
-    - link_to_project = link_to(project.full_name, project)
-    = _("commented on %{link_to_project}").html_safe % { link_to_project: link_to_project }
+  %h5.note-search-caption.gl-max-w-full
+    %span.gl-display-inline-block.gl-text-truncate.search-max-w-inherit.gl-vertical-align-bottom
+      = sprite_icon('comment', css_class: 'gl-vertical-align-text-bottom')
+      = link_to_member(project, note.author, avatar: false)
+      = _("commented on %{link_to_project}").html_safe % { link_to_project: link_to(project.full_name, project) }
     &middot;
 
     - if note.for_commit?
diff --git a/app/views/search/show.html.haml b/app/views/search/show.html.haml
index 2eb6af94008..04103794e60 100644
--- a/app/views/search/show.html.haml
+++ b/app/views/search/show.html.haml
@@ -8,7 +8,7 @@
 - group_attributes = @group&.attributes&.slice('id', 'name')&.merge(full_name: @group&.full_name)
 - project_attributes = @project&.attributes&.slice('id', 'namespace_id', 'name')&.merge(name_with_namespace: @project&.name_with_namespace)
 
-- if @search_results
+- if @search_results && !(@search_results.respond_to?(:failed?) && @search_results.failed?)
   - if @search_service_presenter.without_count?
     - page_description(_("%{scope} results for term '%{term}'") % { scope: @scope, term: @search_term })
   - else
@@ -22,6 +22,4 @@
 .gl-mt-3
   #js-search-topbar{ data: { "group-initial-json": group_attributes.to_json, "project-initial-json": project_attributes.to_json, "elasticsearch-enabled": @search_service_presenter.advanced_search_enabled?.to_s, "default-branch-name": @project&.default_branch } }
 - if @search_term
-  - if Feature.disabled?(:search_page_vertical_nav, current_user)
-    = render 'search/category'
   = render 'search/results'
diff --git a/app/views/shared/_flash_user_callout.html.haml b/app/views/shared/_flash_user_callout.html.haml
deleted file mode 100644
index c549c4e6e4d..00000000000
--- a/app/views/shared/_flash_user_callout.html.haml
+++ /dev/null
@@ -1,11 +0,0 @@
-- callout_data = { uid: "callout_feature_#{feature_name}_dismissed", feature_id: feature_name, dismiss_endpoint: callouts_path }
-- extra_flash_class = local_assigns.fetch(:extra_flash_class, nil)
-
-.flash-container.flash-container-page.user-callout{ data: callout_data }
-  -# We currently only support `alert`, `warning`, `notice`, `success`
-  %div{ class: "flash-#{flash_type}" }
-    %div{ class: "#{container_class unless fluid_layout} #{extra_flash_class unless @no_container} #{@content_class}" }
-      %span= message
-      %button.btn.gl-button.btn-default.close.js-close{ type: 'button',
-        'aria-label' => _('Dismiss') }
-        = sprite_icon('close', css_class: 'dismiss-icon')
diff --git a/app/views/shared/_help_dropdown_forum_link.html.haml b/app/views/shared/_help_dropdown_forum_link.html.haml
index 06889428e82..6d65f2e61bd 100644
--- a/app/views/shared/_help_dropdown_forum_link.html.haml
+++ b/app/views/shared/_help_dropdown_forum_link.html.haml
@@ -1,2 +1,2 @@
 = link_to _("Community forum"), ApplicationHelper.community_forum, target: '_blank', class: 'text-nowrap',
-  rel: 'noopener noreferrer', data: { 'track_action': 'click_forum', 'track_property': 'question_menu' }
+  rel: 'noopener noreferrer', data: { 'track_action': 'click_link', 'track_label': 'community_forum', 'track_property': 'navigation_top' }
diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml
index 42a146a4f65..360a3f3eb89 100644
--- a/app/views/shared/_issues.html.haml
+++ b/app/views/shared/_issues.html.haml
@@ -5,5 +5,4 @@
     = render partial: 'projects/issues/issue', collection: @issues
   = paginate @issues, theme: "gitlab"
 - else
-  - project_select_button = local_assigns.fetch(:project_select_button, false)
-  = render 'shared/empty_states/issues', project_select_button: project_select_button
+  = render 'shared/empty_states/issues'
diff --git a/app/views/shared/_new_project_item_select.html.haml b/app/views/shared/_new_project_item_select.html.haml
deleted file mode 100644
index d080d8be8fe..00000000000
--- a/app/views/shared/_new_project_item_select.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-- if any_projects?(@projects)
-  .dropdown.b-dropdown.gl-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{ 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{ 'aria-label': _('Toggle project select') }
diff --git a/app/views/shared/_new_project_item_vue_select.html.haml b/app/views/shared/_new_project_item_vue_select.html.haml
new file mode 100644
index 00000000000..9ea99df106e
--- /dev/null
+++ b/app/views/shared/_new_project_item_vue_select.html.haml
@@ -0,0 +1,2 @@
+- if any_projects?(@projects)
+  .js-new-resource-dropdown{ data: { group_id: @group&.id, full_path: @group&.full_path, username: @current_user&.username } }
diff --git a/app/views/shared/_user_dropdown_contributing_link.html.haml b/app/views/shared/_user_dropdown_contributing_link.html.haml
index d4c3e11d051..70d9db998fc 100644
--- a/app/views/shared/_user_dropdown_contributing_link.html.haml
+++ b/app/views/shared/_user_dropdown_contributing_link.html.haml
@@ -1,2 +1,2 @@
-= link_to "https://about.gitlab.com/contributing", target: '_blank', class: 'text-nowrap' do
+= link_to "https://about.gitlab.com/contributing", target: '_blank', class: 'text-nowrap', data: {track_action: 'click_link', track_label: 'contribute_to_gitlab', track_property: 'navigation_top'} do
   = _("Contribute to GitLab")
diff --git a/app/views/shared/_user_dropdown_instance_review.html.haml b/app/views/shared/_user_dropdown_instance_review.html.haml
index 18bfb5d7e3e..1a02f9958b0 100644
--- a/app/views/shared/_user_dropdown_instance_review.html.haml
+++ b/app/views/shared/_user_dropdown_instance_review.html.haml
@@ -2,5 +2,5 @@
 
 %li.divider
 %li
-  = link_to admin_instance_review_path, target: '_blank', class: 'text-nowrap' do
+  = link_to admin_instance_review_path, target: '_blank', class: 'text-nowrap', data: {track_action: 'click_link', track_label: 'instance_review', track_property: 'navigation_top'} do
     = _("Get a free instance review")
diff --git a/app/views/shared/dashboard/_search_timeout_occurred.html.haml b/app/views/shared/dashboard/_search_timeout_occurred.html.haml
new file mode 100644
index 00000000000..4b6331ee986
--- /dev/null
+++ b/app/views/shared/dashboard/_search_timeout_occurred.html.haml
@@ -0,0 +1,8 @@
+.row.empty-state.text-center
+  .col-12
+    .svg-130.gl-mt-3
+      = image_tag 'illustrations/issue-dashboard_results-without-filter.svg'
+  .col-12
+    .text-content
+      %h4
+        = _("Too many results to display. Edit your search or add a filter.")
diff --git a/app/views/shared/doorkeeper/applications/_delete_form.html.haml b/app/views/shared/doorkeeper/applications/_delete_form.html.haml
index b30ec2e7b3a..512daf7b96b 100644
--- a/app/views/shared/doorkeeper/applications/_delete_form.html.haml
+++ b/app/views/shared/doorkeeper/applications/_delete_form.html.haml
@@ -1,10 +1,10 @@
-- submit_btn_css ||= 'gl-button btn btn-danger btn-sm'
+- submit_btn_css ||= 'btn btn-danger btn-md gl-button btn-danger-secondary'
 = form_tag path do
   %input{ :name => "_method", :type => "hidden", :value => "delete" }
   - if defined? small
-    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, icon: 'remove', button_options: { data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } }) do
+    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, icon: 'remove', button_options: { class: submit_btn_css, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } }) do
       %span.sr-only
         = _('Destroy')
   - else
-    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, button_options: { aria: { label: _('Destroy') }, class: submit_btn_css, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } }) do
+    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, button_options: { class: submit_btn_css, aria: { label: _('Destroy') }, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } }) do
       = _('Destroy')
diff --git a/app/views/shared/doorkeeper/applications/_show.html.haml b/app/views/shared/doorkeeper/applications/_show.html.haml
index 562b1aee4ca..5b0cff2c1c0 100644
--- a/app/views/shared/doorkeeper/applications/_show.html.haml
+++ b/app/views/shared/doorkeeper/applications/_show.html.haml
@@ -51,4 +51,4 @@
     - if @created
       = link_to _('Continue'), index_path, class: 'btn btn-confirm btn-md gl-button gl-mr-3'
     = link_to _('Edit'), edit_path, class: 'btn btn-default btn-md gl-button'
-  = render 'shared/doorkeeper/applications/delete_form', path: delete_path, submit_btn_css: 'btn btn-danger btn-md gl-button btn-danger-secondary'
+  = render 'shared/doorkeeper/applications/delete_form', path: delete_path
diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml
index fb410274859..37f7fbc0de5 100644
--- a/app/views/shared/empty_states/_issues.html.haml
+++ b/app/views/shared/empty_states/_issues.html.haml
@@ -1,7 +1,5 @@
 - button_path = local_assigns.fetch(:new_project_issue_button_path, false)
-- project_select_button = local_assigns.fetch(:project_select_button, false)
 - show_import_button = local_assigns.fetch(:show_import_button, false) && can?(current_user, :import_issues, @project)
-- has_button = button_path || project_select_button
 - closed_issues_count = issuables_count_for_state(:issues, :closed)
 - opened_issues_count = issuables_count_for_state(:issues, :opened)
 - is_opened_state = params[:state] == 'opened'
@@ -39,11 +37,9 @@
           = _("The Issue Tracker is the place to add things that need to be improved or solved in a project")
         %p
           = _("Issues can be bugs, tasks or ideas to be discussed. Also, issues are searchable and filterable.")
-        - if has_button
+        - if button_path
           .text-center
-            - if project_select_button
-              = render 'shared/new_project_item_select', path: 'issues/new', label: _('issue'), type: :issues, with_feature_enabled: 'issues'
-            - elsif show_new_issue_link?(@project)
+            - if show_new_issue_link?(@project)
               = link_to _('New issue'), button_path, class: 'gl-button btn btn-confirm', id: 'new_issue_link'
 
             - if show_import_button
diff --git a/app/views/shared/empty_states/_merge_requests.html.haml b/app/views/shared/empty_states/_merge_requests.html.haml
index fe602db4393..8e4051fa335 100644
--- a/app/views/shared/empty_states/_merge_requests.html.haml
+++ b/app/views/shared/empty_states/_merge_requests.html.haml
@@ -1,6 +1,4 @@
 - button_path = local_assigns.fetch(:button_path, false)
-- project_select_button = local_assigns.fetch(:project_select_button, false)
-- has_button = button_path || project_select_button
 - closed_merged_count = issuables_count_for_state(:merged, :closed)
 - opened_merged_count = issuables_count_for_state(:merged, :opened)
 - is_opened_state = params[:state] == 'opened'
@@ -37,9 +35,6 @@
           = _("Merge requests are a place to propose changes you've made to a project and discuss those changes with others")
         %p
           = _("Interested parties can even contribute by pushing commits if they want to.")
-        - if has_button
+        - if button_path
           .text-center
-            - 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', data: { qa_selector: "new_merge_request_button" }
+            = 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/groups/_dropdown.html.haml b/app/views/shared/groups/_dropdown.html.haml
index 80edce8e7c4..0b39f42165f 100644
--- a/app/views/shared/groups/_dropdown.html.haml
+++ b/app/views/shared/groups/_dropdown.html.haml
@@ -2,4 +2,4 @@
 - groups_sort_options = options_hash.map { |value, title| { value: value, text: title, href: filter_groups_path(sort: value) } }
 
 %div{ data: { testid: 'group_sort_by_dropdown' } }
-  = gl_redirect_listbox_tag groups_sort_options, project_list_sort_by, data: { right: true }
+  = gl_redirect_listbox_tag groups_sort_options, project_list_sort_by, data: { placement: 'right' }
diff --git a/app/views/shared/integrations/mattermost_slash_commands/_detailed_help.html.haml b/app/views/shared/integrations/mattermost_slash_commands/_detailed_help.html.haml
index fec443738c3..db1754c1864 100644
--- a/app/views/shared/integrations/mattermost_slash_commands/_detailed_help.html.haml
+++ b/app/views/shared/integrations/mattermost_slash_commands/_detailed_help.html.haml
@@ -5,13 +5,13 @@
 %ul.list-unstyled.indent-list
   %li
     1.
-    = link_to 'https://docs.gitlab.com/ee/user/project/integrations/mattermost_slash_commands.html#enable-custom-slash-commands', target: '_blank', rel: 'noopener noreferrer nofollow' do
+    = link_to help_page_url('user/project/integrations/mattermost_slash_commands', anchor: 'enable-custom-slash-commands-in-mattermost'), target: '_blank', rel: 'noopener noreferrer nofollow' do
       Enable custom slash commands
       = sprite_icon('external-link')
     on your Mattermost installation.
   %li
     2.
-    = link_to 'https://docs.gitlab.com/ee/user/project/integrations/mattermost_slash_commands.html#create-a-slash-command', target: '_blank', rel: 'noopener noreferrer nofollow' do
+    = link_to help_page_url('user/project/integrations/mattermost_slash_commands', anchor: 'create-a-slash-command-in-mattermost'), target: '_blank', rel: 'noopener noreferrer nofollow' do
       Add a slash command
       = sprite_icon('external-link')
     in your Mattermost team with the options listed below.
diff --git a/app/views/shared/issuable/_bulk_update_sidebar.html.haml b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
index da8477f4b2e..b125fe34464 100644
--- a/app/views/shared/issuable/_bulk_update_sidebar.html.haml
+++ b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
@@ -20,9 +20,8 @@
         .title
           = _('Assignee')
         .filter-item
-          - field_name = "update[assignee_ids][]"
-          = dropdown_tag(_("Select assignee"), options: { toggle_class: "js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: _("Assign to"), filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
-            placeholder: _("Search authors"), data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: field_name } })
+          %input.js-assignee-ids-input{ type: "hidden", name: "update[assignee_ids][]" }
+          .js-assignee-dropdown{ data: { full_path: @project.full_path } }
       - if is_issue
         = render_if_exists 'shared/issuable/epic_dropdown', parent: @project.group
       .block
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 39a123f4775..f54354674e2 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -14,7 +14,7 @@
 %aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class} #{'right-sidebar-merge-requests' if moved_sidebar_enabled}", 'aria-live' => 'polite', 'aria-label': issuable_type }
   .issuable-sidebar{ class: "#{'is-merge-request' if moved_sidebar_enabled}" }
     .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-lg-display-none!' if moved_sidebar_enabled}" }
-      %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", class: "#{'gl-display-block' if moved_sidebar_enabled}", href: "#", "aria-label" => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
+      %button.btn.gl-button.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ type: "reset", class: "gl-shadow-none! #{'gl-display-block' if moved_sidebar_enabled}", "aria-label" => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
         = sidebar_gutter_toggle_icon
       - if signed_in && !moved_sidebar_enabled
         .js-sidebar-todo-widget-root{ data: { project_path: issuable_sidebar[:project_full_path], iid: issuable_sidebar[:iid], id: issuable_sidebar[:id] } }
@@ -24,7 +24,7 @@
         = render "shared/issuable/sidebar_assignees", issuable_sidebar: issuable_sidebar, assignees: assignees, signed_in: signed_in
 
       - if issuable_sidebar[:supports_severity]
-        .js-sidebar-severity-root
+        .js-sidebar-severity-widget-root
 
       - if reviewers
         .block.reviewer{ data: { qa_selector: 'reviewers_block_container' } }
@@ -97,21 +97,8 @@
         .block
           .js-sidebar-copy-email-root
       - if issuable_sidebar.dig(:current_user, :can_move)
-        .block.js-sidebar-move-issue-block
-          .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body', boundary: 'viewport' }, title: _('Move issue') }
-            = sprite_icon('long-arrow')
-          .dropdown.sidebar-move-issue-dropdown.hide-collapsed
-            = render Pajamas::ButtonComponent.new(block: true, button_options: { class: 'js-sidebar-dropdown-toggle js-move-issue', data: { toggle: 'dropdown', display: 'static', track_label: "right_sidebar", track_property: "move_issue", track_action: "click_button", track_value: "" } }) do
-              = _('Move issue')
-            .dropdown-menu.dropdown-menu-selectable.dropdown-extended-height
-              = dropdown_title(_('Move issue'))
-              = dropdown_filter(_('Search project'), search_id: 'sidebar-move-issue-dropdown-search')
-              = dropdown_content
-              = dropdown_loading
-              = dropdown_footer add_content_class: true do
-                %button.gl-button.btn.btn-confirm.sidebar-move-issue-confirmation-button.js-move-issue-confirmation-button{ type: 'button', disabled: true }
-                  = gl_loading_icon(inline: true, css_class: 'sidebar-move-issue-confirmation-loading-icon gl-mr-2')
-                  = _('Move')
+        .block
+          .js-sidebar-move-issue-block{ data: { project_full_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
 
     -# haml-lint:disable InlineJavaScript
     %script.js-sidebar-options{ type: "application/json" }= issuable_sidebar_options(issuable_sidebar).to_json.html_safe
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
index 8ca30d7ca97..c6f3e4d97a8 100644
--- a/app/views/shared/issuable/_sidebar_assignees.html.haml
+++ b/app/views/shared/issuable/_sidebar_assignees.html.haml
@@ -39,7 +39,7 @@
   - data[:multi_select] = true
   - data['dropdown-title'] = title
   - data['dropdown-header'] = dropdown_options[:data][:'dropdown-header']
-  - data['max-select'] = dropdown_max_select(dropdown_options[:data], nil)
+  - data['max-select'] = dropdown_max_select(dropdown_options[:data])
   - options[:data].merge!(data)
 
   = render 'shared/issuable/sidebar_user_dropdown',
diff --git a/app/views/shared/issuable/_sidebar_reviewers.html.haml b/app/views/shared/issuable/_sidebar_reviewers.html.haml
index 4df393eeb67..b360fac0a55 100644
--- a/app/views/shared/issuable/_sidebar_reviewers.html.haml
+++ b/app/views/shared/issuable/_sidebar_reviewers.html.haml
@@ -35,7 +35,7 @@
   - data[:suggested_reviewers_header] = dropdown_options[:data][:suggested_reviewers_header]
   - data[:all_members_header] = dropdown_options[:data][:all_members_header]
   - data[:show_suggested] = dropdown_options[:data][:show_suggested]
-  - data['max-select'] = dropdown_max_select(dropdown_options[:data], :limit_reviewer_and_assignee_size)
+  - data['max-select'] = dropdown_max_select(dropdown_options[:data])
   - options[:data].merge!(data)
 
   = render 'shared/issuable/sidebar_user_dropdown',
diff --git a/app/views/shared/issuable/_sort_dropdown.html.haml b/app/views/shared/issuable/_sort_dropdown.html.haml
index ccc1a9fda6e..0a3fd4f8b9e 100644
--- a/app/views/shared/issuable/_sort_dropdown.html.haml
+++ b/app/views/shared/issuable/_sort_dropdown.html.haml
@@ -5,5 +5,5 @@
 
 .gl-ml-3
   .btn-group{ role: 'group' }
-    = gl_redirect_listbox_tag(items, selected, data: { right: true })
+    = gl_redirect_listbox_tag(items, selected, data: { placement: 'right' })
     = issuable_sort_direction_button(@sort)
diff --git a/app/views/shared/issuable/form/_title.html.haml b/app/views/shared/issuable/form/_title.html.haml
index 0f6ef33d532..4d31baee25b 100644
--- a/app/views/shared/issuable/form/_title.html.haml
+++ b/app/views/shared/issuable/form/_title.html.haml
@@ -1,27 +1,18 @@
 - issuable = local_assigns.fetch(:issuable)
-- has_wip_commits = local_assigns.fetch(:has_wip_commits)
 - form = local_assigns.fetch(:form)
 - no_issuable_templates = issuable_templates(ref_project, issuable.to_ability_name).empty?
-- toggle_wip_link_start = '<a href="" class="js-toggle-wip">'
-- toggle_wip_link_end = '</a>'
-- add_wip_text = (_('%{link_start}Start the title with %{draft_snippet}%{link_end} to prevent a merge request draft from merging before it\'s ready.') % { link_start: toggle_wip_link_start, link_end: toggle_wip_link_end, draft_snippet: '<code>Draft:</code>'.html_safe }).html_safe
-- remove_wip_text = (_('%{link_start}Remove the %{draft_snippet} prefix%{link_end} from the title to allow this merge request to be merged when it\'s ready.') % { link_start: toggle_wip_link_start, link_end: toggle_wip_link_end, draft_snippet: '<code>Draft</code>'.html_safe }).html_safe
 
 %div{ data: { testid: 'issue-title-input-field' } }
   = form.text_field :title, required: true, aria: { required: true }, maxlength: 255, autofocus: true,
     autocomplete: 'off', class: 'form-control pad', dir: 'auto', data: { qa_selector: 'issuable_form_title_field' }
 
   - if issuable.respond_to?(:draft?)
-    .form-text.text-muted
-      .js-wip-explanation{ style: "display: none;" }
-        = remove_wip_text
-      .js-no-wip-explanation
-        - if has_wip_commits
-          = _('It looks like you have some draft commits in this branch.')
-          %br
-        .invisible
-          .js-unwrap-on-load
-            = add_wip_text
+    .gl-pt-3
+      = render Pajamas::CheckboxTagComponent.new(name: 'mark_as_draft', checkbox_options: { class: 'js-toggle-draft' }) do |c|
+        = c.label do
+          = s_('MergeRequests|Mark as draft')
+        = c.help_text do
+          = s_('MergeRequests|Drafts cannot be merged until marked ready.')
 
   - if no_issuable_templates && can?(current_user, :push_code, issuable.project)
     = render 'shared/issuable/form/default_templates'
diff --git a/app/views/shared/labels/_sort_dropdown.html.haml b/app/views/shared/labels/_sort_dropdown.html.haml
index bb582b159ba..f8bafaedd59 100644
--- a/app/views/shared/labels/_sort_dropdown.html.haml
+++ b/app/views/shared/labels/_sort_dropdown.html.haml
@@ -1,3 +1,3 @@
 - label_sort_options = label_sort_options_hash.map { |value, text| { value: value, text: text, href: page_filter_path(sort: value) } }
 
-= gl_redirect_listbox_tag label_sort_options, @sort, data: { right: true }
+= gl_redirect_listbox_tag label_sort_options, @sort, data: { placement: 'right' }
diff --git a/app/views/shared/members/_access_request_links.html.haml b/app/views/shared/members/_access_request_links.html.haml
index 0b38b9d7945..94086636d5a 100644
--- a/app/views/shared/members/_access_request_links.html.haml
+++ b/app/views/shared/members/_access_request_links.html.haml
@@ -14,4 +14,5 @@
               data: { confirm: remove_member_message(requester) }
 - elsif source.request_access_enabled && can?(current_user, :request_access, source)
   = link_to _('Request Access'), polymorphic_path([:request_access, source, :members]),
-            method: :post
+            method: :post,
+            data: { qa_selector: 'request_access_link' }
diff --git a/app/views/shared/nav/_sidebar_menu_item.html.haml b/app/views/shared/nav/_sidebar_menu_item.html.haml
index 5452cd486da..eea36127745 100644
--- a/app/views/shared/nav/_sidebar_menu_item.html.haml
+++ b/app/views/shared/nav/_sidebar_menu_item.html.haml
@@ -1,8 +1,11 @@
 = nav_link(**sidebar_menu_item.active_routes, html_options: sidebar_menu_item.nav_link_html_options) do
   = link_to sidebar_menu_item.link, **sidebar_menu_item.link_html_options, data: { qa_selector: 'sidebar_menu_item_link', qa_menu_item: sidebar_menu_item.title } do
-    %span
+    %span.gl-flex-grow-1
       = sidebar_menu_item.title
       - if sidebar_menu_item.sprite_icon
         = sprite_icon(sidebar_menu_item.sprite_icon, **sidebar_menu_item.sprite_icon_html_options)
+    - if sidebar_menu_item.has_pill?
+      = gl_badge_tag({ size: :sm, variant: :neutral }, { class: "count fly-out-badge gl-ml-3" }) do
+        = number_with_delimiter(sidebar_menu_item.pill_count)
     - if sidebar_menu_item.show_hint?
       .js-feature-highlight{ **sidebar_menu_item.hint_html_options }
diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml
index e34f412baa4..eb36de8167c 100644
--- a/app/views/shared/notes/_notes_with_form.html.haml
+++ b/app/views/shared/notes/_notes_with_form.html.haml
@@ -27,3 +27,5 @@
         = html_escape(_("This %{issuable} is locked. Only %{strong_open}project members%{strong_close} can comment.")) % { issuable: issuable.class.to_s.titleize.downcase, strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
 -# haml-lint:disable InlineJavaScript
 %script.js-notes-data{ type: "application/json" }= initial_notes_data(autocomplete).to_json.html_safe
+
+#js-report-abuse-drawer
diff --git a/app/views/shared/projects/_dropdown.html.haml b/app/views/shared/projects/_dropdown.html.haml
index 59f8bf0e875..3d0564a5e64 100644
--- a/app/views/shared/projects/_dropdown.html.haml
+++ b/app/views/shared/projects/_dropdown.html.haml
@@ -1,5 +1,5 @@
 - @sort ||= sort_value_latest_activity
-.dropdown.js-project-filter-dropdown-wrap.gl-display-inline
+.dropdown.js-project-filter-dropdown-wrap.gl-display-inline{ class: 'gl-m-0!' }
   = dropdown_toggle(projects_sort_options_hash[@sort], { toggle: 'dropdown', display: 'static' }, { id: 'sort-projects-dropdown' })
   %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
     %li.dropdown-header
diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml
index 813d8c5ed2b..09d63347ed6 100644
--- a/app/views/shared/projects/_list.html.haml
+++ b/app/views/shared/projects/_list.html.haml
@@ -37,7 +37,7 @@
         - css_class = (i >= projects_limit) || project.pending_delete? ? 'hide' : nil
         = render "shared/projects/project", project: project, skip_namespace: skip_namespace,
           avatar: avatar, stars: stars, css_class: css_class, use_creator_avatar: use_creator_avatar,
-          forks: project.forking_enabled?, show_last_commit_as_description: show_last_commit_as_description,
+          forks: able_to_see_forks_count?(project, user), show_last_commit_as_description: show_last_commit_as_description,
           user: user, merge_requests: able_to_see_merge_requests?(project, user), issues: able_to_see_issues?(project, user),
           pipeline_status: pipeline_status, compact_mode: compact_mode
     = paginate_collection(projects, remote: remote) unless skip_pagination
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 40cd81ab3da..2adc7844a67 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -97,15 +97,15 @@
           = link_to project_starrers_path(project), class: "#{css_metadata_classes} stars", title: _('Stars'), data: { container: 'body', placement: 'top' } do
             = sprite_icon('star-o', size: 14, css_class: 'gl-mr-2')
             = badge_count(project.star_count)
-        - if forks
+        - if show_count?(disabled: !forks, compact_mode: compact_mode)
           = link_to project_forks_path(project), class: "#{css_metadata_classes} forks", title: _('Forks'), data: { container: 'body', placement: 'top' } do
             = sprite_icon('fork', size: 14, css_class: 'gl-mr-2')
             = badge_count(project.forks_count)
-        - if show_merge_request_count?(disabled: !merge_requests, compact_mode: compact_mode)
+        - if show_count?(disabled: !merge_requests, compact_mode: compact_mode)
           = link_to project_merge_requests_path(project), class: "#{css_metadata_classes} merge-requests", title: _('Merge requests'), data: { container: 'body', placement: 'top' } do
             = sprite_icon('git-merge', size: 14, css_class: 'gl-mr-2')
             = badge_count(project.open_merge_requests_count)
-        - if show_issue_count?(disabled: !issues, compact_mode: compact_mode)
+        - if show_count?(disabled: !issues, compact_mode: compact_mode)
           = link_to project_issues_path(project), class: "#{css_metadata_classes} issues", title: _('Issues'), data: { container: 'body', placement: 'top' } do
             = sprite_icon('issues', size: 14, css_class: 'gl-mr-2')
             = badge_count(project.open_issues_count)
diff --git a/app/views/shared/projects/_search_form.html.haml b/app/views/shared/projects/_search_form.html.haml
index 07a6d5bec78..47e0e165276 100644
--- a/app/views/shared/projects/_search_form.html.haml
+++ b/app/views/shared/projects/_search_form.html.haml
@@ -1,9 +1,11 @@
 - placeholder = local_assigns[:search_form_placeholder] ? search_form_placeholder : _('Filter by name')
+- admin_view ||= false
+- top_padding = admin_view ? 'gl-lg-pt-3' : ''
 
-= form_tag filter_projects_path, method: :get, class: 'project-filter-form', data: { qa_selector: 'project_filter_form_container' }, id: 'project-filter-form' do |f|
+= form_tag filter_projects_path, method: :get, class: "project-filter-form gl-display-flex! gl-flex-wrap-wrap gl-w-full gl-gap-3 #{top_padding}", data: { qa_selector: 'project_filter_form_container' }, id: 'project-filter-form' do |f|
   = search_field_tag :name, params[:name],
     placeholder: placeholder,
-    class: "project-filter-form-field form-control input-short js-projects-list-filter",
+    class: "project-filter-form-field form-control input-short js-projects-list-filter gl-m-0!",
     spellcheck: false,
     id: 'project-filter-form-field',
     autofocus: local_assigns[:autofocus]
@@ -26,19 +28,28 @@
   - if params[:language].present?
     = hidden_field_tag :language, params[:language]
 
-  - if Feature.enabled?(:project_language_search, current_user)
-    .dropdown.inline
-      = dropdown_toggle(search_language_placeholder, { toggle: 'dropdown', testid: 'project-language-dropdown' })
-      %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
+  .dropdown{ class: 'gl-m-0!' }
+    = dropdown_toggle(search_language_placeholder, { toggle: 'dropdown', testid: 'project-language-dropdown' })
+    %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
+      %li
+        = link_to _('Any'), filter_projects_path(language: nil, name: nil)
+      - programming_languages.each do |language|
         %li
-          = link_to _('Any'), filter_projects_path(language: nil)
-        - programming_languages.each do |language|
-          %li
-            = link_to filter_projects_path(language: language.id), class: language_state_class(language) do
-              = language.name
+          = link_to filter_projects_path(language: language.id, name: nil), class: language_state_class(language) do
+            = language.name
 
   = submit_tag nil, class: 'gl-display-none!'
 
   = render 'shared/projects/dropdown'
 
   = render_if_exists 'shared/projects/search_fields'
+
+  - if admin_view
+    - if params[:namespace_id].present?
+      - namespace = Namespace.find(params[:namespace_id])
+    - selected_text = "#{namespace.kind}: #{namespace.full_path}" if namespace
+    .gl-display-flex.gl-w-full.gl-md-w-auto{ class: 'gl-m-0!' }
+      .js-namespace-select{ data: { field_name: 'namespace_id', selected_id: namespace&.id, selected_text: selected_text, update_location: 'true' } }
+
+    = link_to new_project_path, class: 'gl-button btn btn-confirm gl-display-inline gl-mb-0!' do
+      = _('New Project')
diff --git a/app/views/shared/runners/_runner_type_alert.html.haml b/app/views/shared/runners/_runner_type_alert.html.haml
index a1599b3ec49..63ecdaf4149 100644
--- a/app/views/shared/runners/_runner_type_alert.html.haml
+++ b/app/views/shared/runners/_runner_type_alert.html.haml
@@ -12,5 +12,5 @@
     title: s_('Runners|This runner is associated with specific projects.'),
     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 or group runner.')
-      = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'specific-runners'), target: '_blank', rel: 'noopener noreferrer'
+      = s_('Runners|You can set up a project runner to be used by multiple projects but you cannot make this a shared or group runner.')
+      = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'project-runners'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/shared/runners/_runner_type_badge.html.haml b/app/views/shared/runners/_runner_type_badge.html.haml
index c6a18c804da..a8a93f3dd76 100644
--- a/app/views/shared/runners/_runner_type_badge.html.haml
+++ b/app/views/shared/runners/_runner_type_badge.html.haml
@@ -4,4 +4,4 @@
 - elsif runner.group_type?
   = gl_badge_tag s_('Runners|group'), variant: :success
 - else
-  = gl_badge_tag s_('Runners|specific'), variant: :info
+  = gl_badge_tag s_('Runners|project'), variant: :info
diff --git a/app/views/shared/ssh_keys/_key_delete.html.haml b/app/views/shared/ssh_keys/_key_delete.html.haml
index 4b89b2a0cbf..80cd23989a0 100644
--- a/app/views/shared/ssh_keys/_key_delete.html.haml
+++ b/app/views/shared/ssh_keys/_key_delete.html.haml
@@ -1,7 +1,5 @@
-- icon = local_assigns[:icon]
 - category = local_assigns[:category] || :primary
 
 .gl-p-2
-  = render Pajamas::ButtonComponent.new(variant: :danger, category: category, icon: ('remove' if icon), button_options: { class: 'js-confirm-modal-button', data: button_data }) do
-    - unless icon
-      = _('Delete')
+  = render Pajamas::ButtonComponent.new(variant: :danger, category: category, button_options: { class: 'js-confirm-modal-button', data: button_data }) do
+    = _('Delete')
diff --git a/app/views/shared/web_hooks/_hook.html.haml b/app/views/shared/web_hooks/_hook.html.haml
index c19b518acd6..155a7b1827f 100644
--- a/app/views/shared/web_hooks/_hook.html.haml
+++ b/app/views/shared/web_hooks/_hook.html.haml
@@ -19,7 +19,9 @@
             = gl_badge_tag(integration_webhook_event_human_name(trigger), size: :sm)
         = gl_badge_tag(sslBadgeText, size: :sm)
 
-    .col-md-4.col-lg-5.text-right-md.gl-mt-2
-      %span>= render 'shared/web_hooks/test_button', hook: hook, button_class: 'btn-sm btn-default gl-mr-3'
-      %span>= link_to _('Edit'), edit_hook_path(hook), class: 'btn gl-button btn-default btn-sm gl-mr-3'
-      = link_to _('Delete'), destroy_hook_path(hook), aria: { label: s_('Webhooks|Delete webhook') }, data: { confirm_btn_variant: "danger", confirm: s_('Webhooks|Are you sure you want to delete this webhook?') }, method: :delete, class: 'btn gl-button btn-secondary btn-danger-secondary btn-sm'
+    .col-md-4.col-lg-5.gl-mt-2.gl-display-flex.gl-md-justify-content-end.gl-align-items-baseline.gl-gap-3
+      = render 'shared/web_hooks/test_button', hook: hook, size: 'small'
+      = render Pajamas::ButtonComponent.new(href: edit_hook_path(hook), size: :small) do
+        = _('Edit')
+      = render Pajamas::ButtonComponent.new(href: destroy_hook_path(hook), category: :secondary, variant: :danger, size: :small, method: :delete, button_options: { 'aria-label' => s_('Webhooks|Delete webhook'), data: { confirm_btn_variant: "danger", confirm: s_('Webhooks|Are you sure you want to delete this webhook?') } }) do
+        = _('Delete')
diff --git a/app/views/shared/web_hooks/_test_button.html.haml b/app/views/shared/web_hooks/_test_button.html.haml
index 7a78a32fe87..dbd26e5bd07 100644
--- a/app/views/shared/web_hooks/_test_button.html.haml
+++ b/app/views/shared/web_hooks/_test_button.html.haml
@@ -1,13 +1,5 @@
-- button_class = local_assigns.fetch(:button_class, '')
 - hook = local_assigns.fetch(:hook)
-- triggers = hook.class.triggers
+- size = local_assigns.fetch(:size, 'medium')
+- triggers = hook.class.triggers.each_value
 
-.hook-test-button.dropdown.gl-dropdown.inline>
-  %button.btn.gl-button{ 'data-toggle' => 'dropdown', class: button_class }
-    = _('Test')
-    = sprite_icon('chevron-down')
-  %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
-    .gl-dropdown-inner
-      - triggers.each_value do |event|
-        %li.gl-dropdown-item
-          = link_to_test_hook(hook, event)
+.js-webhook-test-dropdown{ data: { items: webhook_test_items(hook, triggers).to_json, size: size } }
diff --git a/app/views/shared/wikis/_sidebar.html.haml b/app/views/shared/wikis/_sidebar.html.haml
index cb6a67bd8d4..8b8c981da96 100644
--- a/app/views/shared/wikis/_sidebar.html.haml
+++ b/app/views/shared/wikis/_sidebar.html.haml
@@ -28,7 +28,8 @@
           = render_wiki_content(@sidebar_page)
         - elsif @sidebar_wiki_entries
           %ul.wiki-pages
-            = render @sidebar_wiki_entries, context: 'sidebar'
+            - @sidebar_wiki_entries.each do |entry|
+              = render partial: entry.to_partial_path, object: entry, locals: { context: 'sidebar' }
       .block.w-100
         - if @sidebar_limited
           = link_to wiki_path(@wiki, action: :pages), class: 'btn gl-button btn-block', data: { qa_selector: 'view_all_pages_button' } do
diff --git a/app/views/shared/wikis/_wiki_directory.html.haml b/app/views/shared/wikis/_wiki_directory.html.haml
index a492d1e5aa0..5c2233a4db2 100644
--- a/app/views/shared/wikis/_wiki_directory.html.haml
+++ b/app/views/shared/wikis/_wiki_directory.html.haml
@@ -1,4 +1,6 @@
-%li{ data: { qa_selector: 'wiki_directory_content' } }
-  = wiki_directory.title
+%li{ class: active_when(params[:id] == wiki_directory.slug), data: { qa_selector: 'wiki_directory_content' } }
+  = link_to wiki_page_path(@wiki, wiki_directory), data: { qa_selector: 'wiki_dir_page_link', qa_page_name: wiki_directory.title } do
+    = wiki_directory.title
   %ul
-    = render wiki_directory.entries, context: context
+    - wiki_directory.entries.each do |entry|
+      = render partial: entry.to_partial_path, object: entry, locals: { context: context }
diff --git a/app/views/shared/wikis/pages.html.haml b/app/views/shared/wikis/pages.html.haml
index e1252e91c10..f35649d031c 100644
--- a/app/views/shared/wikis/pages.html.haml
+++ b/app/views/shared/wikis/pages.html.haml
@@ -17,6 +17,7 @@
         = wiki_sort_controls(@wiki, params[:direction])
 
 %ul.wiki-pages-list.content-list
-  = render @wiki_entries, context: 'pages'
+  - @wiki_entries.each do |entry|
+    = render partial: entry.to_partial_path, object: entry, locals: { context: 'pages' }
 
 = paginate @wiki_pages, theme: 'gitlab'
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index af29de6b0c4..b9290972656 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -101,6 +101,10 @@
               = render 'middle_dot_divider', breakpoint: 'sm' do
                 = link_to twitter_url(@user), class: 'gl-hover-text-decoration-none', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow' do
                   = sprite_icon('twitter', css_class: 'twitter-icon')
+            - unless @user.discord.blank?
+              = render 'middle_dot_divider', breakpoint: 'sm' do
+                = link_to discord_url(@user), class: 'gl-hover-text-decoration-none', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow' do
+                  = sprite_icon('discord', css_class: 'discord-icon')
             - unless @user.website_url.blank?
               = render 'middle_dot_divider', stacking: true do
                 - if Feature.enabled?(:security_auto_fix) && @user.bot?
@@ -125,94 +129,98 @@
               = @user.bio
 
     - unless profile_tabs.empty?
-      .scrolling-tabs-container
-        .fade-left= sprite_icon('chevron-lg-left', size: 12)
-        .fade-right= sprite_icon('chevron-lg-right', size: 12)
-        %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs
-          - if profile_tab?(:overview)
-            %li.js-overview-tab
-              = link_to user_path, data: { target: 'div#js-overview', action: 'overview', toggle: 'tab' } do
-                = s_('UserProfile|Overview')
-          - if profile_tab?(:activity)
-            %li.js-activity-tab
-              = link_to user_activity_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
-                = s_('UserProfile|Activity')
-          - unless Feature.enabled?(:security_auto_fix) && @user.bot?
-            - if profile_tab?(:groups)
-              %li.js-groups-tab
-                = link_to user_groups_path, data: { target: 'div#groups', action: 'groups', toggle: 'tab', endpoint: user_groups_path(format: :json) } do
-                  = s_('UserProfile|Groups')
-            - if profile_tab?(:contributed)
-              %li.js-contributed-tab
-                = link_to user_contributed_projects_path, data: { target: 'div#contributed', action: 'contributed', toggle: 'tab', endpoint: user_contributed_projects_path(format: :json) } do
-                  = s_('UserProfile|Contributed projects')
-            - if profile_tab?(:projects)
-              %li.js-projects-tab
-                = link_to user_projects_path, data: { target: 'div#projects', action: 'projects', toggle: 'tab', endpoint: user_projects_path(format: :json) } do
-                  = s_('UserProfile|Personal projects')
-            - if profile_tab?(:starred)
-              %li.js-starred-tab
-                = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json) } do
-                  = s_('UserProfile|Starred projects')
-            - if profile_tab?(:snippets)
-              %li.js-snippets-tab
-                = link_to user_snippets_path, data: { target: 'div#snippets', action: 'snippets', toggle: 'tab', endpoint: user_snippets_path(format: :json) } do
-                  = s_('UserProfile|Snippets')
-            - if profile_tab?(:followers)
-              %li.js-followers-tab
-                = link_to user_followers_path, data: { target: 'div#followers', action: 'followers', toggle: 'tab', endpoint: user_followers_path(format: :json) } do
-                  = s_('UserProfile|Followers')
-            - if profile_tab?(:following)
-              %li.js-following-tab
-                = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json) } do
-                  = s_('UserProfile|Following')
+      - if Feature.enabled?(:profile_tabs_vue, current_user)
+        #js-profile-tabs
+      - else
+        .scrolling-tabs-container
+          .fade-left= sprite_icon('chevron-lg-left', size: 12)
+          .fade-right= sprite_icon('chevron-lg-right', size: 12)
+          %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs
+            - if profile_tab?(:overview)
+              %li.js-overview-tab
+                = link_to user_path, data: { target: 'div#js-overview', action: 'overview', toggle: 'tab' } do
+                  = s_('UserProfile|Overview')
+            - if profile_tab?(:activity)
+              %li.js-activity-tab
+                = link_to user_activity_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
+                  = s_('UserProfile|Activity')
+            - unless Feature.enabled?(:security_auto_fix) && @user.bot?
+              - if profile_tab?(:groups)
+                %li.js-groups-tab
+                  = link_to user_groups_path, data: { target: 'div#groups', action: 'groups', toggle: 'tab', endpoint: user_groups_path(format: :json) } do
+                    = s_('UserProfile|Groups')
+              - if profile_tab?(:contributed)
+                %li.js-contributed-tab
+                  = link_to user_contributed_projects_path, data: { target: 'div#contributed', action: 'contributed', toggle: 'tab', endpoint: user_contributed_projects_path(format: :json) } do
+                    = s_('UserProfile|Contributed projects')
+              - if profile_tab?(:projects)
+                %li.js-projects-tab
+                  = link_to user_projects_path, data: { target: 'div#projects', action: 'projects', toggle: 'tab', endpoint: user_projects_path(format: :json) } do
+                    = s_('UserProfile|Personal projects')
+              - if profile_tab?(:starred)
+                %li.js-starred-tab
+                  = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json) } do
+                    = s_('UserProfile|Starred projects')
+              - if profile_tab?(:snippets)
+                %li.js-snippets-tab
+                  = link_to user_snippets_path, data: { target: 'div#snippets', action: 'snippets', toggle: 'tab', endpoint: user_snippets_path(format: :json) } do
+                    = s_('UserProfile|Snippets')
+              - if profile_tab?(:followers)
+                %li.js-followers-tab
+                  = link_to user_followers_path, data: { target: 'div#followers', action: 'followers', toggle: 'tab', endpoint: user_followers_path(format: :json) } do
+                    = s_('UserProfile|Followers')
+              - if profile_tab?(:following)
+                %li.js-following-tab
+                  = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json) } do
+                    = s_('UserProfile|Following')
 
   %div{ class: container_class }
-    .tab-content
-      - if profile_tab?(:overview)
-        #js-overview.tab-pane
-          = render "users/overview"
-
-      - if profile_tab?(:activity)
-        #activity.tab-pane
-          .flash-container
-          - if can?(current_user, :read_cross_project)
-            %h4.prepend-top-20
-              = s_('UserProfile|Most Recent Activity')
-            .content_list{ data: { href: user_activity_path } }
-            .loading
-              = gl_loading_icon(size: 'md')
-      - unless @user.bot?
-        - if profile_tab?(:groups)
-          #groups.tab-pane
-            -# This tab is always loaded via AJAX
-
-        - if profile_tab?(:contributed)
-          #contributed.tab-pane
-            -# This tab is always loaded via AJAX
-
-        - if profile_tab?(:projects)
-          #projects.tab-pane
-            -# This tab is always loaded via AJAX
-
-        - if profile_tab?(:starred)
-          #starred.tab-pane
-            -# This tab is always loaded via AJAX
-
-        - if profile_tab?(:snippets)
-          #snippets.tab-pane
-            -# This tab is always loaded via AJAX
-
-        - if profile_tab?(:followers)
-          #followers.tab-pane
-            -# This tab is always loaded via AJAX
-
-        - if profile_tab?(:following)
-          #following.tab-pane
-            -# This tab is always loaded via AJAX
-
-    .loading.hide
-      .gl-spinner.gl-spinner-md
+    - unless Feature.enabled?(:profile_tabs_vue, current_user)
+      .tab-content
+        - if profile_tab?(:overview)
+          #js-overview.tab-pane
+            = render "users/overview"
+
+        - if profile_tab?(:activity)
+          #activity.tab-pane
+            .flash-container
+            - if can?(current_user, :read_cross_project)
+              %h4.prepend-top-20
+                = s_('UserProfile|Most Recent Activity')
+              .content_list{ data: { href: user_activity_path } }
+              .loading
+                = gl_loading_icon(size: 'md')
+        - unless @user.bot?
+          - if profile_tab?(:groups)
+            #groups.tab-pane
+              -# This tab is always loaded via AJAX
+
+          - if profile_tab?(:contributed)
+            #contributed.tab-pane
+              -# This tab is always loaded via AJAX
+
+          - if profile_tab?(:projects)
+            #projects.tab-pane
+              -# This tab is always loaded via AJAX
+
+          - if profile_tab?(:starred)
+            #starred.tab-pane
+              -# This tab is always loaded via AJAX
+
+          - if profile_tab?(:snippets)
+            #snippets.tab-pane
+              -# This tab is always loaded via AJAX
+
+          - if profile_tab?(:followers)
+            #followers.tab-pane
+              -# This tab is always loaded via AJAX
+
+          - if profile_tab?(:following)
+            #following.tab-pane
+              -# This tab is always loaded via AJAX
+
+      .loading.hide
+        .gl-spinner.gl-spinner-md
 
     - if profile_tabs.empty?
       .svg-content