Add latest changes from gitlab-org/gitlab@16-5-stable-eev16.5.0-rc42

196 files changed, 425 insertions, 491 deletions

diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml
index b65649b5a07..4e55c99e445 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -17,7 +17,7 @@
 
     .form-group
       = f.label :receive_max_input_size, _('Maximum push size (MiB)'), class: 'label-light'
-      = f.number_field :receive_max_input_size, class: 'form-control gl-form-input', title: _('Maximum size limit for a single commit.'), data: { toggle: 'tooltip', container: 'body', qa_selector: 'receive_max_input_size_field' }
+      = f.number_field :receive_max_input_size, class: 'form-control gl-form-input', title: _('Maximum size limit for a single commit.'), data: { toggle: 'tooltip', container: 'body', testid: 'receive-max-input-size-field' }
     .form-group
       = f.label :session_expire_delay, _('Session duration (minutes)'), class: 'label-light'
       = f.number_field :session_expire_delay, class: 'form-control gl-form-input', title: _('Maximum duration of a session.'), data: { toggle: 'tooltip', container: 'body' }
@@ -70,4 +70,4 @@
     = render_if_exists 'admin/application_settings/availability_on_namespace_setting', form: f
     -# This is added for Jihu edition which should not be deleted without notifying Jihu
     = render_if_exists 'admin/application_settings/password_expiration_setting', form: f
-  = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), pajamas_button: true, data: { testid: 'save-changes-button' }
diff --git a/app/views/admin/application_settings/_email.html.haml b/app/views/admin/application_settings/_email.html.haml
index 65049fa5466..2d45391a839 100644
--- a/app/views/admin/application_settings/_email.html.haml
+++ b/app/views/admin/application_settings/_email.html.haml
@@ -18,11 +18,10 @@
     .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.')
+    .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' }
+  = f.submit _('Save changes'), pajamas_button: true, data: { testid: 'save-changes-button' }
diff --git a/app/views/admin/application_settings/_ip_limits.html.haml b/app/views/admin/application_settings/_ip_limits.html.haml
index 01d7bf0af67..cba37527606 100644
--- a/app/views/admin/application_settings/_ip_limits.html.haml
+++ b/app/views/admin/application_settings/_ip_limits.html.haml
@@ -8,7 +8,7 @@
     .form-group
       = f.gitlab_ui_checkbox_component :throttle_unauthenticated_api_enabled,
         _("Enable unauthenticated API request rate limit"),
-        checkbox_options: { data: { qa_selector: 'throttle_unauthenticated_api_checkbox' } },
+        checkbox_options: { data: { testid: 'throttle-unauthenticated-api-checkbox' } },
         label_options: { class: 'label-bold' }
     .form-group
       = f.label :throttle_unauthenticated_api_requests_per_period, _('Maximum unauthenticated API requests per rate limit period per IP'), class: 'label-bold'
@@ -21,7 +21,7 @@
     .form-group
       = f.gitlab_ui_checkbox_component :throttle_unauthenticated_enabled,
         _("Enable unauthenticated web request rate limit"),
-        checkbox_options: { data: { qa_selector: 'throttle_unauthenticated_web_checkbox' } },
+        checkbox_options: { data: { testid: 'throttle-unauthenticated-web-checkbox' } },
         label_options: { class: 'label-bold' }
     .form-group
       = f.label :throttle_unauthenticated_requests_per_period, _('Maximum unauthenticated web requests per rate limit period per IP'), class: 'label-bold'
@@ -34,7 +34,7 @@
     .form-group
       = f.gitlab_ui_checkbox_component :throttle_authenticated_api_enabled,
         _("Enable authenticated API request rate limit"),
-        checkbox_options: { data: { qa_selector: 'throttle_authenticated_api_checkbox' }},
+        checkbox_options: { data: { testid: 'throttle-authenticated-api-checkbox' }},
         label_options: { class: 'label-bold' }
     .form-group
       = f.label :throttle_authenticated_api_requests_per_period, _('Maximum authenticated API requests per rate limit period per user'), class: 'label-bold'
@@ -47,7 +47,7 @@
     .form-group
       = f.gitlab_ui_checkbox_component :throttle_authenticated_web_enabled,
         _("Enable authenticated web request rate limit"),
-        checkbox_options: { data: { qa_selector: 'throttle_authenticated_web_checkbox' } },
+        checkbox_options: { data: { testid: 'throttle-authenticated-web-checkbox' } },
         label_options: { class: 'label-bold' }
     .form-group
       = f.label :throttle_authenticated_web_requests_per_period, _('Maximum authenticated web requests per rate limit period per user'), class: 'label-bold'
@@ -57,6 +57,11 @@
       = f.number_field :throttle_authenticated_web_period_in_seconds, class: 'form-control gl-form-input'
 
   %fieldset
+    .form-group
+      = f.label :project_jobs_api_rate_limit, safe_format('Maximum authenticated requests to %{open}project/:id/jobs%{close} per minute', tag_pair(tag.code, :open, :close)), class: 'label-bold'
+      = f.number_field :project_jobs_api_rate_limit, class: 'form-control gl-form-input'
+
+  %fieldset
     %legend.h5.gl-border-none
       = _('Response text')
     .form-group
@@ -66,4 +71,4 @@
       .form-text.text-muted
         = html_escape(_("If blank, defaults to %{code_open}Retry later%{code_close}.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
 
-  = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
+  = f.submit _('Save changes'), data: { testid: 'save-changes-button' }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_jira_connect.html.haml b/app/views/admin/application_settings/_jira_connect.html.haml
index 23ad85334cb..0a96268a0a3 100644
--- a/app/views/admin/application_settings/_jira_connect.html.haml
+++ b/app/views/admin/application_settings/_jira_connect.html.haml
@@ -9,10 +9,10 @@
     %p.gl-text-secondary
       = s_('JiraConnect|Configure your Jira Connect Application ID.')
       = link_to sprite_icon('question-o'),
-          help_page_path('integration/jira/connect-app',
+          help_page_path('administration/settings/jira_cloud_app',
           aria: { label: _('GitLab for Jira Cloud') },
           class: 'has-tooltip',
-          anchor: 'connect-the-gitlab-for-jira-cloud-app-for-self-managed-instances'),
+          anchor: 'connect-the-gitlab-for-jira-cloud-app'),
           title: _('More information')
 
   .settings-content
diff --git a/app/views/admin/application_settings/_localization.html.haml b/app/views/admin/application_settings/_localization.html.haml
index 4002aa076f7..25038e6f221 100644
--- a/app/views/admin/application_settings/_localization.html.haml
+++ b/app/views/admin/application_settings/_localization.html.haml
@@ -7,7 +7,7 @@
       = f.select :first_day_of_week, first_day_of_week_choices, {}, class: 'form-control'
       .form-text.text-muted
         = _('Default first day of the week in calendars and date pickers.')
-        = link_to _('Learn more.'), help_page_path('administration/settings/index.md', anchor: 'change-the-default-first-day-of-the-week'), target: '_blank', rel: 'noopener noreferrer'
+        = link_to _('Learn more.'), help_page_path('administration/settings/localization.md', anchor: 'change-the-default-first-day-of-the-week'), target: '_blank', rel: 'noopener noreferrer'
 
     .form-group
       = f.label :time_tracking, _('Time tracking'), class: 'label-bold'
diff --git a/app/views/admin/application_settings/_outbound.html.haml b/app/views/admin/application_settings/_outbound.html.haml
index 8cb25627dfa..f36fbd8d68c 100644
--- a/app/views/admin/application_settings/_outbound.html.haml
+++ b/app/views/admin/application_settings/_outbound.html.haml
@@ -15,7 +15,7 @@
           = s_('OutboundRequests|Webhooks and integrations might not work properly.')
       = f.gitlab_ui_checkbox_component :allow_local_requests_from_web_hooks_and_services,
           s_('OutboundRequests|Allow requests to the local network from webhooks and integrations'),
-          checkbox_options: { disabled: deny_all_requests, class: 'js-allow-local-requests', data: { qa_selector: 'allow_requests_from_services_checkbox' } }
+          checkbox_options: { disabled: deny_all_requests, class: 'js-allow-local-requests', data: { testid: 'allow-requests-from-services-checkbox' } }
       = f.gitlab_ui_checkbox_component :allow_local_requests_from_system_hooks,
           s_('OutboundRequests|Allow requests to the local network from system hooks'),
           checkbox_options: { disabled: deny_all_requests, class: 'js-allow-local-requests' }
@@ -33,4 +33,4 @@
           s_('OutboundRequests|Enforce DNS-rebinding attack protection'),
           help_text: s_('OutboundRequests|Resolve IP addresses for outbound requests to prevent DNS-rebinding attacks.')
 
-  = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), pajamas_button: true, data: { testid: 'save-changes-button' }
diff --git a/app/views/admin/application_settings/_performance_bar.html.haml b/app/views/admin/application_settings/_performance_bar.html.haml
index c09ba01b7ed..017fce3be47 100644
--- a/app/views/admin/application_settings/_performance_bar.html.haml
+++ b/app/views/admin/application_settings/_performance_bar.html.haml
@@ -5,9 +5,9 @@
     .form-group
       = f.gitlab_ui_checkbox_component :performance_bar_enabled,
         _("Allow non-administrators access to the performance bar"),
-        checkbox_options: { data: { qa_selector: 'enable_performance_bar_checkbox' } }
+        checkbox_options: { data: { testid: 'enable-performance-bar-checkbox' } }
     .form-group
       = f.label :performance_bar_allowed_group_path, _('Allow access to members of the following group'), class: 'label-bold'
       = f.text_field :performance_bar_allowed_group_path, class: 'form-control gl-form-input', placeholder: 'my-org/my-group', value: @application_setting.performance_bar_allowed_group&.full_path
 
-  = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), pajamas_button: true, data: { testid: 'save-changes-button' }
diff --git a/app/views/admin/application_settings/_sentry.html.haml b/app/views/admin/application_settings/_sentry.html.haml
index 9f2a40e4e54..7058a4b5cca 100644
--- a/app/views/admin/application_settings/_sentry.html.haml
+++ b/app/views/admin/application_settings/_sentry.html.haml
@@ -1,28 +1,31 @@
 = gitlab_ui_form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-sentry-settings'), html: { class: 'fieldset-form', id: 'sentry-settings' } do |f|
   = form_errors(@application_setting)
 
-  %span.text-muted
-    = _('Changing any setting here requires an application restart')
+  %fieldset.gl-text-secondary
+    = safe_format(s_('AdminSettings|GitLab uses the %{bold_start}Rails%{bold_end} and %{bold_start}Browser JavaScript%{bold_end} Sentry SDKs to send events to Sentry. For changes to Rails integration settings to take effect, restart GitLab.'), tag_pair(tag.b, :bold_start, :bold_end))
 
   %fieldset
     .form-group
-      = f.gitlab_ui_checkbox_component :sentry_enabled, _('Enable Sentry error tracking')
+      = f.gitlab_ui_checkbox_component :sentry_enabled, s_('AdminSettings|Enable Sentry for Rails and Browser JavaScript')
+    .form-group
+      = f.label :sentry_environment, _('Environment'), class: 'label-light'
+      = f.text_field :sentry_environment, class: 'form-control gl-form-input', placeholder: Rails.env
+      .form-text.text-muted
+        = safe_format(s_('AdminSettings|%{setting_name} value used by both Rails and Browser JavaScript SDKs.'), setting_name: content_tag(:code, 'environment'))
     .form-group
       = f.label :sentry_dsn, _('DSN'), class: 'label-light'
       = f.text_field :sentry_dsn, class: 'form-control gl-form-input', placeholder: 'https://public@sentry.example.com/1'
+      .form-text.text-muted
+        = safe_format(s_('AdminSettings|%{setting_name} value used by the Rails SDK.'), setting_name: content_tag(:code, 'dsn'))
     .form-group
       = f.label :sentry_clientside_dsn, _('Clientside DSN'), class: 'label-light'
       = f.text_field :sentry_clientside_dsn, class: 'form-control gl-form-input', placeholder: 'https://public@sentry.example.com/2'
-    .form-group
-      = f.label :sentry_environment, _('Environment'), class: 'label-light'
-      = f.text_field :sentry_environment, class: 'form-control gl-form-input', placeholder: Rails.env
-
-  %p.text-muted
-    = _("Changing any setting bellow doesn't require an application restart")
-
-  %fieldset
+      .form-text.text-muted
+        = safe_format(s_('AdminSettings|%{setting_name} value used by the Browser JavaScript SDK.'), setting_name: content_tag(:code, 'dsn'))
     .form-group
       = f.label :sentry_clientside_traces_sample_rate, _('Clientside traces sample rate'), class: 'label-light'
       = f.number_field :sentry_clientside_traces_sample_rate, class: 'form-control gl-form-input', placeholder: '0.5', min: 0, max: 1, step: 0.001
+      .form-text.text-muted
+        = safe_format(s_('AdminSettings|%{setting_name} value used by the Browser JavaScript SDK.'), setting_name: content_tag(:code, 'tracesSampleRate'))
 
   = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_snowplow.html.haml b/app/views/admin/application_settings/_snowplow.html.haml
index 1b90432e1f3..1049f42673d 100644
--- a/app/views/admin/application_settings/_snowplow.html.haml
+++ b/app/views/admin/application_settings/_snowplow.html.haml
@@ -1,12 +1,12 @@
 - expanded = integration_expanded?('snowplow_')
-%section.settings.as-snowplow.no-animate#js-snowplow-settings{ class: ('expanded' if expanded), data: { qa_selector: 'snowplow_settings_content' } }
+%section.settings.as-snowplow.no-animate#js-snowplow-settings{ class: ('expanded' if expanded), data: { testid: 'snowplow-settings-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Snowplow')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
     %p.gl-text-secondary
-      - help_link = link_to('', help_page_path('development/internal_analytics/snowplow/index'), target: '_blank', rel: 'noopener noreferrer')
+      - help_link = link_to('', help_page_path('development/internal_analytics/internal_event_instrumentation/index'), target: '_blank', rel: 'noopener noreferrer')
       - snowplow_link = link_to('', 'https://snowplow.io/', target: '_blank', rel: 'noopener noreferrer')
       = safe_format(_('Configure %{snowplow_link_start}Snowplow%{snowplow_link_end} to track events. %{help_link_start}Learn more.%{help_link_end}'), tag_pair(snowplow_link, :snowplow_link_start, :snowplow_link_end), tag_pair(help_link, :help_link_start, :help_link_end))
   .settings-content
@@ -15,7 +15,7 @@
 
       %fieldset
         .form-group
-          = f.gitlab_ui_checkbox_component :snowplow_enabled, _('Enable Snowplow tracking'), checkbox_options: { data: { qa_selector: 'snowplow_enabled_checkbox' } }
+          = f.gitlab_ui_checkbox_component :snowplow_enabled, _('Enable Snowplow tracking'), checkbox_options: { data: { testid: 'snowplow-enabled-checkbox' } }
         .form-group
           = f.label :snowplow_collector_hostname, _('Collector hostname'), class: 'label-light'
           = f.text_field :snowplow_collector_hostname, class: 'form-control gl-form-input', placeholder: 'snowplow.example.com'
@@ -32,4 +32,4 @@
           .form-text.text-muted
             = _('The Snowplow cookie domain.')
 
-      = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
+      = f.submit _('Save changes'), data: { testid: 'save-changes-button' }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index 5a3814ca83d..2d51dc2a6f2 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -18,7 +18,7 @@
       - disabled_help_text = s_('AdminSettings|Service ping is disabled in your configuration file, and cannot be enabled through this form. For more information, see the documentation on %{link_start}deactivating service ping%{link_end}.').html_safe % { link_start: deactivating_service_ping_link_start, link_end: link_end }
       = f.gitlab_ui_checkbox_component :usage_ping_enabled, s_('AdminSettings|Enable Service Ping'),
         help_text: can_be_configured ? usage_ping_help_text : disabled_help_text,
-        checkbox_options: { disabled: !can_be_configured, data: { qa_selector: 'enable_usage_data_checkbox' } }
+        checkbox_options: { disabled: !can_be_configured, data: { testid: 'enable-usage-data-checkbox' } }
       .form-text.gl-pl-6
         - if can_be_configured
           = render Pajamas::ButtonComponent.new(button_options: { class: 'js-payload-preview-trigger', data: { payload_selector: ".#{payload_class}" } }) do
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index 5aa2684f084..dad0bf08bb0 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -14,7 +14,7 @@
   .settings-content
     = render 'visibility_and_access'
 
-%section.settings.as-account-limit.no-animate#js-account-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'account_and_limit_settings_content', testid: 'account-limit' } }
+%section.settings.as-account-limit.no-animate#js-account-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'account-and-limit-settings-content'} }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Account and limit')
@@ -47,7 +47,7 @@
   .settings-content
     = render 'diff_limits'
 
-%section.settings.as-signup.no-animate#js-signup-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'sign_up_restrictions_settings_content' } }
+%section.settings.as-signup.no-animate#js-signup-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'sign-up-restrictions-settings-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Sign-up restrictions')
diff --git a/app/views/admin/application_settings/metrics_and_profiling.html.haml b/app/views/admin/application_settings/metrics_and_profiling.html.haml
index 4739a204147..188359158ef 100644
--- a/app/views/admin/application_settings/metrics_and_profiling.html.haml
+++ b/app/views/admin/application_settings/metrics_and_profiling.html.haml
@@ -29,7 +29,7 @@
   .settings-content
     = render 'grafana'
 
-%section.settings.as-performance-bar.no-animate#js-performance-bar-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'performance_bar_settings_content' } }
+%section.settings.as-performance-bar.no-animate#js-performance-bar-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'performance-bar-settings-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Profiling - Performance bar')
diff --git a/app/views/admin/application_settings/network.html.haml b/app/views/admin/application_settings/network.html.haml
index 9ccfc6cbc0a..849c5c749e0 100644
--- a/app/views/admin/application_settings/network.html.haml
+++ b/app/views/admin/application_settings/network.html.haml
@@ -14,7 +14,7 @@
   .settings-content
     = render 'performance'
 
-%section.settings.as-ip-limits.no-animate#js-ip-limits-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'ip_limits_content' } }
+%section.settings.as-ip-limits.no-animate#js-ip-limits-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'ip-limits-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('User and IP rate limits')
@@ -87,7 +87,7 @@
 
 = render 'gitlab_shell_operation_limits'
 
-%section.settings.as-outbound.no-animate#js-outbound-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'outbound_requests_content' } }
+%section.settings.as-outbound.no-animate#js-outbound-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'outbound-requests-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_('OutboundRequests|Outbound requests')
diff --git a/app/views/admin/application_settings/preferences.html.haml b/app/views/admin/application_settings/preferences.html.haml
index bea399ee926..4590b6f4586 100644
--- a/app/views/admin/application_settings/preferences.html.haml
+++ b/app/views/admin/application_settings/preferences.html.haml
@@ -3,7 +3,7 @@
 - add_page_specific_style 'page_bundles/settings'
 - @force_desktop_expanded_sidebar = true
 
-%section.settings.as-email.no-animate#js-email-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'email_content' } }
+%section.settings.as-email.no-animate#js-email-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'email-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Email')
diff --git a/app/views/admin/applications/_form.html.haml b/app/views/admin/applications/_form.html.haml
index 27622dfa0bb..8d2e7366dcc 100644
--- a/app/views/admin/applications/_form.html.haml
+++ b/app/views/admin/applications/_form.html.haml
@@ -4,13 +4,13 @@
   = content_tag :div, class: 'form-group row' do
     .col-12
       = f.label :name
-      = f.text_field :name, class: 'form-control gl-form-input', data: { qa_selector: 'name_field' }
+      = f.text_field :name, class: 'form-control gl-form-input', data: { testid: 'name-field' }
       = doorkeeper_errors_for application, :name
 
   = content_tag :div, class: 'form-group row' do
     .col-12
       = f.label :redirect_uri
-      = f.text_area :redirect_uri, class: 'form-control gl-form-input', data: { qa_selector: 'redirect_uri_field' }
+      = f.text_area :redirect_uri, class: 'form-control gl-form-input', data: { testid: 'redirect-uri-field' }
       = doorkeeper_errors_for application, :redirect_uri
       %span.form-text.text-muted
         Use one line per URI
@@ -18,7 +18,7 @@
   = content_tag :div, class: 'form-group row' do
     .col-12
       = f.label :trusted
-      = f.gitlab_ui_checkbox_component :trusted, _('Trusted applications are automatically authorized on GitLab OAuth flow. It\'s highly recommended for the security of users that trusted applications have the confidential setting set to true.'), checkbox_options: { data: { qa_selector: 'trusted_checkbox' } }
+      = f.gitlab_ui_checkbox_component :trusted, _('Trusted applications are automatically authorized on GitLab OAuth flow. It\'s highly recommended for the security of users that trusted applications have the confidential setting set to true.'), checkbox_options: { data: { testid: 'trusted-checkbox' } }
 
   = content_tag :div, class: 'form-group row' do
     .col-12
@@ -31,5 +31,5 @@
       = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes, f: f
 
   .gl-mt-5
-    = f.submit _('Save application'), pajamas_button: true, data: { qa_selector: 'save_application_button' }
+    = f.submit _('Save application'), pajamas_button: true, data: { testid: 'save-application-button' }
     = link_button_to _('Cancel'), admin_applications_path
diff --git a/app/views/admin/applications/index.html.haml b/app/views/admin/applications/index.html.haml
index 6846fe8f4aa..07ccb8bb066 100644
--- a/app/views/admin/applications/index.html.haml
+++ b/app/views/admin/applications/index.html.haml
@@ -14,7 +14,7 @@
         = s_('AdminArea|Manage applications for your instance that can use GitLab as an %{docs_link_start}OAuth provider%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: '</a>'.html_safe }
 
     .gl-new-card-actions
-      = render Pajamas::ButtonComponent.new(size: :small, href: new_admin_application_path, button_options: { data: { qa_selector: 'new_application_button' } }) do
+      = render Pajamas::ButtonComponent.new(size: :small, href: new_admin_application_path, button_options: { data: { testid: 'new-application-button' } }) do
         = _('Add new application')
   - c.with_body do
     - if @applications.empty?
diff --git a/app/views/admin/health_check/show.html.haml b/app/views/admin/health_check/show.html.haml
index 728c748d01a..90859b5c170 100644
--- a/app/views/admin/health_check/show.html.haml
+++ b/app/views/admin/health_check/show.html.haml
@@ -2,12 +2,11 @@
 - no_errors = @errors.blank?
 
 %h1.page-title.gl-font-size-h-display= page_title
-.bs-callout.clearfix
-  .float-left
-    %p
-  #{ s_('HealthCheck|Access token is') }
-  %code#health-check-token= Gitlab::CurrentSettings.health_check_access_token
-  .gl-mt-3
+= render Pajamas::AlertComponent.new(variant: :tip, dismissible: false, alert_options: { class: 'gl-mb-5' }) do |c|
+  - c.with_body do
+    #{ s_('HealthCheck|Access token is') }
+    %code#health-check-token= Gitlab::CurrentSettings.health_check_access_token
+  - c.with_actions do
     = render Pajamas::ButtonComponent.new(href: reset_health_check_token_admin_application_settings_path, method: :put, button_options: { data: { confirm: _('Are you sure you want to reset the health check token?') } }) do
       = _("Reset health check access token")
 %p.light
diff --git a/app/views/admin/identities/_form.html.haml b/app/views/admin/identities/_form.html.haml
index ad78c677da1..dec35e9cf15 100644
--- a/app/views/admin/identities/_form.html.haml
+++ b/app/views/admin/identities/_form.html.haml
@@ -7,6 +7,7 @@
     .col-sm-10
       - values = Gitlab::Auth::OAuth::Provider.providers.map { |name| ["#{Gitlab::Auth::OAuth::Provider.label_for(name)} (#{name})", name] }
       = f.select :provider, values, { allow_blank: false }, class: 'form-control'
+  = render_if_exists partial: 'admin/identities/provider_id', locals: { f: f }
   .form-group.row
     .col-sm-2.col-form-label
       = f.label :extern_uid, _("Identifier")
@@ -15,4 +16,3 @@
 
   .form-actions
     = f.submit _('Save changes'), pajamas_button: true
-
diff --git a/app/views/admin/jobs/index.html.haml b/app/views/admin/jobs/index.html.haml
index b8a9ad32259..9af5ffd7936 100644
--- a/app/views/admin/jobs/index.html.haml
+++ b/app/views/admin/jobs/index.html.haml
@@ -4,4 +4,4 @@
 - page_title _("Jobs")
 
 
-#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 } }
+#admin-jobs-app{ data: { job_statuses: job_statuses.to_json, empty_state_svg_path: image_path('illustrations/empty-state/empty-pipeline-md.svg'), url: cancel_all_admin_jobs_path } }
diff --git a/app/views/admin/labels/_label.html.haml b/app/views/admin/labels/_label.html.haml
index 19460ddb0e5..c3857f4933d 100644
--- a/app/views/admin/labels/_label.html.haml
+++ b/app/views/admin/labels/_label.html.haml
@@ -1,4 +1,4 @@
-%li.label-list-item.gl-list-style-none.gl-py-3{ id: dom_id(label) }
+%li.js-label-list-item.gl-list-style-none.gl-py-3.gl-border-b.gl-last-of-type-border-b-0{ id: dom_id(label) }
   .label-content.gl-px-3.gl-py-2.gl-rounded-base
     = render "shared/label_row", label: label.present(issuable_subject: nil)
     .label-actions-list.gl-display-inline-block
diff --git a/app/views/admin/labels/index.html.haml b/app/views/admin/labels/index.html.haml
index 3d392a86566..b3d04e4f576 100644
--- a/app/views/admin/labels/index.html.haml
+++ b/app/views/admin/labels/index.html.haml
@@ -1,4 +1,5 @@
 - page_title _("Labels")
+- add_page_specific_style 'page_bundles/labels'
 
 = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card labels other-labels js-toggle-container js-admin-labels-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
   - c.with_header do
diff --git a/app/views/admin/projects/index.html.haml b/app/views/admin/projects/index.html.haml
index 31ec4935f64..412d8e64e89 100644
--- a/app/views/admin/projects/index.html.haml
+++ b/app/views/admin/projects/index.html.haml
@@ -1,5 +1,6 @@
 - page_title _('Projects')
 - add_page_specific_style 'page_bundles/search'
+- add_page_specific_style 'page_bundles/projects'
 - params[:visibility_level] ||= []
 
 .top-area.gl-flex-direction-column-reverse
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index 85dce00752b..6be5aa003fc 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -1,4 +1,5 @@
 - add_page_specific_style 'page_bundles/members'
+- add_page_specific_style 'page_bundles/projects'
 - add_to_breadcrumbs _("Projects"), admin_projects_path
 - breadcrumb_title @project.full_name
 - page_title @project.full_name, _("Projects")
diff --git a/app/views/admin/sessions/_new_base.html.haml b/app/views/admin/sessions/_new_base.html.haml
index f880c2631ed..35b75e425f9 100644
--- a/app/views/admin/sessions/_new_base.html.haml
+++ b/app/views/admin/sessions/_new_base.html.haml
@@ -1,7 +1,7 @@
 = gitlab_ui_form_for(:user, url: admin_session_path, html: { class: 'gl-p-5 gl-show-field-errors', aria: { live: 'assertive' } }) do |f|
   .form-group
     = f.label :password, _('Password')
-    = f.password_field :password, class: 'form-control js-password', data: { id: 'user_password', name: 'user[password]', qa_selector: 'password_field', testid: 'password-field' }
+    = f.password_field :password, class: 'form-control js-password', data: { id: 'user_password', name: 'user[password]', testid: 'password-field' }
 
-  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { qa_selector: 'enter_admin_mode_button' } }) do
+  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { testid: 'enter-admin-mode-button' } }) do
     = _('Enter admin mode')
diff --git a/app/views/admin/users/_profile.html.haml b/app/views/admin/users/_profile.html.haml
index bb89b5baf28..df0a59ccfc3 100644
--- a/app/views/admin/users/_profile.html.haml
+++ b/app/views/admin/users/_profile.html.haml
@@ -1,4 +1,4 @@
-= render Pajamas::CardComponent.new(body_options: { class: 'gl-py-0' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-0' }) do |c|
   - c.with_header do
     = _('Profile')
   - c.with_body do
diff --git a/app/views/admin/users/show.html.haml b/app/views/admin/users/show.html.haml
index 4cc3e12a8ad..bee7e10906b 100644
--- a/app/views/admin/users/show.html.haml
+++ b/app/views/admin/users/show.html.haml
@@ -69,6 +69,7 @@
               = @user.external? ? _('Yes') : _('No')
 
           = render_if_exists 'admin/users/provisioned_by', user: @user
+          = render_if_exists 'admin/users/enterprise_group', user: @user
 
           %li
             %span.light= _('Can create top level groups:')
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index 5062599c261..fd4801b7941 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -1,8 +1,9 @@
 - api_awards_path = local_assigns.fetch(:api_awards_path, nil)
+- new_custom_emoji_path = local_assigns.fetch(:new_custom_emoji_path, nil)
 
 - if api_awards_path
   .gl-display-flex.gl-flex-wrap.gl-justify-content-space-between.gl-pt-3
-    #js-vue-awards-block{ data: { path: api_awards_path, can_award_emoji: can?(current_user, :award_emoji, awardable).to_s } }
+    #js-vue-awards-block{ data: { path: api_awards_path, can_award_emoji: can?(current_user, :award_emoji, awardable).to_s, new_custom_emoji_path: new_custom_emoji_path, show_default_award_emojis: @project&.show_default_award_emojis?.to_s } }
     = yield
 - else
   - grouped_emojis = awardable.grouped_awards(with_thumbs: inline)
diff --git a/app/views/ci/status/_icon.html.haml b/app/views/ci/status/_icon.html.haml
index fdaacb732c7..9fa5734d6b6 100644
--- a/app/views/ci/status/_icon.html.haml
+++ b/app/views/ci/status/_icon.html.haml
@@ -1,14 +1,10 @@
 - status             = local_assigns.fetch(:status)
-- size               = local_assigns.fetch(:size, 16)
 - tooltip_placement  = local_assigns.fetch(:tooltip_placement, "left")
 - path               = local_assigns.fetch(:path, status.has_details? ? status.details_path : nil)
 - option_css_classes = local_assigns.fetch(:option_css_classes, '')
-- css_classes       = "ci-status-link ci-status-icon ci-status-icon-#{status.group} has-tooltip #{option_css_classes}"
-- title             = s_("PipelineStatusTooltip|Pipeline: %{ci_status}") % {ci_status: status.label}
+- css_classes        = "gl-px-2 #{option_css_classes}"
+- ci_css_classes     = "ci-status-link ci-status-icon ci-status-icon-#{status.group} gl-line-height-1"
+- title              = s_("PipelineStatusTooltip|Pipeline: %{ci_status}") % {ci_status: status.label}
 
-- if path
-  = link_to path, class: css_classes, title: title, data: { placement: tooltip_placement } do
-    = sprite_icon(status.icon, size: size)
-- else
-  %span{ class: css_classes, title: title, data: { placement: tooltip_placement } }
-    = sprite_icon(status.icon, size: size)
+= gl_badge_tag(variant: badge_variant(status), size: :md, href: path, class: css_classes, title: title, data: { toggle: 'tooltip', placement: tooltip_placement, testid: "ci-status-badge" }) do
+  = content_tag :span, sprite_icon(status.icon, size: 16), class: ci_css_classes
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index b72b252a852..74dc2277f54 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -7,7 +7,7 @@
   .page-title-controls.gl-display-flex.gl-align-items-center.gl-gap-5
     = link_to _("Explore projects"), explore_projects_path
     - if current_user.can_create_project?
-      = render Pajamas::ButtonComponent.new(href: new_project_path, variant: :confirm, button_options: { data: { qa_selector: 'new_project_button' } }) do
+      = render Pajamas::ButtonComponent.new(href: new_project_path, variant: :confirm, button_options: { data: { testid: 'new-project-button' } }) do
         = _("New project")
 
 .top-area
diff --git a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
index 94f956896d6..1d2e6e1e332 100644
--- a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
@@ -4,7 +4,7 @@
   - if has_start_trial?
     = render_if_exists "dashboard/projects/blank_state_ee_trial"
 
-  = link_to new_project_path, class: link_classes, data: { qa_selector: 'new_project_button' } do
+  = link_to new_project_path, class: link_classes, data: { testid: 'new-project-button' } do
     .blank-state-icon
       = custom_icon("add_new_project", size: 50)
     .blank-state-body.gl-sm-pl-6
diff --git a/app/views/dashboard/projects/_blank_state_welcome.html.haml b/app/views/dashboard/projects/_blank_state_welcome.html.haml
index 08b914a218d..032c5206d99 100644
--- a/app/views/dashboard/projects/_blank_state_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_welcome.html.haml
@@ -2,7 +2,7 @@
 
 .gl-display-flex.gl-flex-wrap.gl-justify-content-space-between
   - if current_user.can_create_project?
-    = link_to new_project_path, class: link_classes, data: { qa_selector: 'new_project_button' } do
+    = link_to new_project_path, class: link_classes, data: { testid: 'new-project-button' } do
       .blank-state-icon
         = custom_icon("add_new_project", size: 50)
       .blank-state-body.gl-sm-pl-6
diff --git a/app/views/dashboard/projects/_zero_authorized_projects.html.haml b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
index e72762f2ae5..da25dee1e88 100644
--- a/app/views/dashboard/projects/_zero_authorized_projects.html.haml
+++ b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
@@ -1,6 +1,6 @@
 .container
   .gl-text-center.gl-pt-6.gl-pb-7
-    %h2.gl-font-size-h1{ data: { qa_selector: 'welcome_title_content' } }
+    %h2.gl-font-size-h1{ data: { testid: 'welcome-title-content' } }
       = _('Welcome to GitLab')
     %p.gl-m-0
       = _('Faster releases. Better code. Less pain.')
diff --git a/app/views/dashboard/projects/index.html.haml b/app/views/dashboard/projects/index.html.haml
index 140bc6e06c3..c74a9f4cbe6 100644
--- a/app/views/dashboard/projects/index.html.haml
+++ b/app/views/dashboard/projects/index.html.haml
@@ -5,6 +5,7 @@
 
 - page_title _("Projects")
 - add_page_specific_style 'page_bundles/dashboard_projects'
+- add_page_specific_style 'page_bundles/projects'
 
 = render "projects/last_push"
 - if show_projects?(@projects, params)
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 3feb30085c0..ab97507b3c8 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -5,6 +5,9 @@
 = render_if_exists 'dashboard/todos/saml_reauth_notice'
 - add_page_specific_style 'page_bundles/todos'
 - add_page_specific_style 'page_bundles/issuable'
+- filter_by_done = params[:state] == 'done'
+- open_todo_count = todos_has_filtered_results? && !filter_by_done ? @allowed_todos.count : todos_pending_count
+- done_todo_count = todos_has_filtered_results? && filter_by_done ? @allowed_todos.count : todos_done_count
 
 .page-title-holder.d-flex.align-items-center
   %h1.page-title.gl-font-size-h-display= _("To-Do List")
@@ -14,10 +17,10 @@
     = gl_tabs_nav({ class: 'gl-flex-grow-1 gl-border-0' }) do
       = gl_tab_link_to todos_filter_path(state: 'pending'), item_active: params[:state].blank? || params[:state] == 'pending', class: "js-todos-pending" do
         = _("To Do")
-        = gl_tab_counter_badge(number_with_delimiter(todos_pending_count), { class: 'js-todos-badge' })
-      = gl_tab_link_to todos_filter_path(state: 'done'), item_active: params[:state] == 'done', class: "js-todos-done" do
+        = gl_tab_counter_badge(number_with_delimiter(open_todo_count), { class: 'js-todos-badge' })
+      = gl_tab_link_to todos_filter_path(state: 'done'), item_active: filter_by_done, class: "js-todos-done" do
         = _("Done")
-        = gl_tab_counter_badge(number_with_delimiter(todos_done_count), { class: 'js-todos-badge' })
+        = gl_tab_counter_badge(number_with_delimiter(done_todo_count), { class: 'js-todos-badge' })
 
     .nav-controls
       - if @allowed_todos.any?(&:pending?)
@@ -80,31 +83,38 @@
         %ul.content-list.todos-list
           = render @allowed_todos
       = paginate @todos, theme: "gitlab"
-    .js-nothing-here-container.empty-state.hidden
+    .js-nothing-here-container.gl-empty-state.gl-text-center.hidden
       .svg-content.svg-150
         = image_tag 'illustrations/empty-todos-all-done-md.svg'
       .text-content.gl-text-center
-        %h4
+        %h1.gl-font-size-h-display.gl-line-height-36.gl-mt-0
           = s_("Todos|You're all done!")
   - elsif current_user.todos.any?
-    .col.todos-all-done.empty-state
+    .col.todos-all-done.gl-empty-state.gl-text-center
       .svg-content.svg-150
-        = image_tag 'illustrations/empty-todos-all-done-md.svg'
-      .text-content.gl-text-center
-        - if todos_filter_empty?
-          %h4
+        = image_tag (!todos_filter_empty? && !todos_has_filtered_results?) ? 'illustrations/empty-todos-all-done-md.svg' : 'illustrations/empty-todos-md.svg'
+      .text-content.gl-text-center.gl-m-auto{ class: "gl-max-w-88!" }
+        %h1.gl-font-size-h-display.gl-line-height-36.gl-mt-0
+          - if todos_filter_empty?
             = no_todos_messages.sample
+          - elsif todos_has_filtered_results?
+            = _("Sorry, your filter produced no results")
+          - else
+            = s_("Todos|Nothing is on your to-do list. Nice work!")
+
+        - if todos_filter_empty?
           %p
             = (s_("Todos|Are you looking for things to do? Take a look at %{strongStart}%{openIssuesLinkStart}open issues%{openIssuesLinkEnd}%{strongEnd}, contribute to %{strongStart}%{mergeRequestLinkStart}a merge request%{mergeRequestLinkEnd}%{mergeRequestLinkEnd}%{strongEnd}, or mention someone in a comment to automatically assign them a new to-do item.") % { strongStart: '<strong>', strongEnd: '</strong>', openIssuesLinkStart: "<a href=\"#{issues_dashboard_path}\">", openIssuesLinkEnd: '</a>', mergeRequestLinkStart: "<a href=\"#{merge_requests_dashboard_path}\">", mergeRequestLinkEnd: '</a>' }).html_safe
-        - else
-          %h4
-            = s_("Todos|Nothing is on your to-do list. Nice work!")
+        - elsif todos_has_filtered_results?
+          %p
+            = link_to s_("Todos|Do you want to remove the filters?"), todos_filter_path(without: [:project_id, :author_id, :type, :action_id])
+
   - else
-    .col.empty-state
+    .col.gl-empty-state.gl-text-center
       .svg-content.svg-150
         = image_tag 'illustrations/empty-todos-md.svg'
-      .text-content.gl-text-center
-        %h4
+      .text-content.gl-text-center.gl-m-auto{ class: "gl-max-w-88!" }
+        %h1.gl-font-size-h-display.gl-line-height-36.gl-mt-0
           = s_("Todos|Your To-Do List shows what to work on next")
         %p
           = (s_("Todos|When an issue or merge request is assigned to you, or when you receive a %{strongStart}@mention%{strongEnd} in a comment, this automatically triggers a new item in your To-Do List.") % { strongStart: '<strong>', strongEnd: '</strong>' }).html_safe
diff --git a/app/views/devise/confirmations/almost_there.haml b/app/views/devise/confirmations/almost_there.haml
index 1760e6e0f84..8075697b758 100644
--- a/app/views/devise/confirmations/almost_there.haml
+++ b/app/views/devise/confirmations/almost_there.haml
@@ -3,10 +3,10 @@
 - registration_link_start = '<a href="%{new_user_registration_path}">'.html_safe % { new_user_registration_path: new_user_registration_path }
 - link_end = '</a>'.html_safe
 - content_for :page_specific_javascripts do
-  = render "layouts/google_tag_manager_head"
+  = render_if_exists "layouts/google_tag_manager_head"
   = render "layouts/one_trust"
   = render "layouts/bizible"
-= render "layouts/google_tag_manager_body"
+= render_if_exists "layouts/google_tag_manager_body"
 
 = render_if_exists 'devise/shared/delete_unconfirmed_users_flash'
 
diff --git a/app/views/devise/registrations/new.html.haml b/app/views/devise/registrations/new.html.haml
index 18856e04eb8..29f1a1f398b 100644
--- a/app/views/devise/registrations/new.html.haml
+++ b/app/views/devise/registrations/new.html.haml
@@ -2,10 +2,10 @@
 - page_description _("Join GitLab today! You and your team can plan, build, and ship secure code all in one application. Get started here for free!")
 - add_page_specific_style 'page_bundles/signup'
 - content_for :page_specific_javascripts do
-  = render "layouts/google_tag_manager_head"
+  = render_if_exists "layouts/google_tag_manager_head"
   = render "layouts/one_trust"
   = render "layouts/bizible"
-= render "layouts/google_tag_manager_body"
+= render_if_exists "layouts/google_tag_manager_body"
 
 - content_for :omniauth_providers_bottom do
   = render 'devise/shared/signup_omniauth_providers'
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index e6551adffde..88dd4fd1721 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -15,14 +15,12 @@
         = link_to _('Forgot your password?'), new_password_path(:user)
 
   .form-group
-    - if Feature.enabled?(:arkose_labs_login_challenge)
-      = render_if_exists 'devise/sessions/arkose_labs'
-    - elsif captcha_enabled? || captcha_on_login_required?
+    - if captcha_enabled? || captcha_on_login_required?
       = recaptcha_tags nonce: content_security_policy_nonce
 
   - if remember_me_enabled?
     .form-group
       = f.gitlab_ui_checkbox_component :remember_me, _('Remember me'), checkbox_options: { autocomplete: 'off' }
 
-  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { class: "js-sign-in-button #{'js-no-auto-disable' if Feature.enabled?(:arkose_labs_login_challenge)}", data: { qa_selector: 'sign_in_button', testid: 'sign-in-button' } }) do
+  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { class: 'js-sign-in-button', data: { qa_selector: 'sign_in_button', testid: 'sign-in-button' } }) do
     = _('Sign in')
diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml
index 0fd27f7f7e7..acfb16b64cd 100644
--- a/app/views/devise/sessions/new.html.haml
+++ b/app/views/devise/sessions/new.html.haml
@@ -1,13 +1,13 @@
 - page_title _("Sign in")
 
 - content_for :page_specific_javascripts do
-  = render "layouts/google_tag_manager_head"
+  = render_if_exists "layouts/google_tag_manager_head"
   = render "layouts/one_trust"
 
 - content_for :sessions_broadcast do
   = render "devise/sessions/broadcast"
 
-= render "layouts/google_tag_manager_body"
+= render_if_exists "layouts/google_tag_manager_body"
 
 #signin-container
   - if any_form_based_providers_enabled?
diff --git a/app/views/devise/shared/_signup_omniauth_providers.haml b/app/views/devise/shared/_signup_omniauth_providers.haml
index 399c23741a9..4e62c10b258 100644
--- a/app/views/devise/shared/_signup_omniauth_providers.haml
+++ b/app/views/devise/shared/_signup_omniauth_providers.haml
@@ -3,4 +3,4 @@
     = _("or")
 = render 'devise/shared/signup_omniauth_provider_list',
   providers: enabled_button_based_providers,
-  tracking_label: ::Onboarding::Status.tracking_label[:free]
+  tracking_label: oauth_tracking_label
diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
index ca7798257cb..544acd5ae56 100644
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -35,7 +35,7 @@
 
         - if can_create_projects
           .gl-sm-w-auto.gl-w-full
-            = render Pajamas::ButtonComponent.new(href: new_project_path(namespace_id: @group.id), variant: :confirm, button_options: { data: { qa_selector: 'new_project_button' }, class: 'gl-sm-w-auto gl-w-full' }) do
+            = render Pajamas::ButtonComponent.new(href: new_project_path(namespace_id: @group.id), variant: :confirm, button_options: { data: { testid: 'new-project-button' }, class: 'gl-sm-w-auto gl-w-full' }) do
               = _('New project')
 
   - if @group.description.present?
diff --git a/app/views/groups/custom_emoji/index.html.haml b/app/views/groups/custom_emoji/index.html.haml
new file mode 100644
index 00000000000..d8c28ac8959
--- /dev/null
+++ b/app/views/groups/custom_emoji/index.html.haml
@@ -0,0 +1,8 @@
+- page_title _('Custom emoji')
+
+#js-custom-emojis-root.row.gl-mt-5{ data: { base_path: group_custom_emoji_index_path(@group), group_path: @group.full_path } }
+  .col-12
+    %h4.gl-mt-0
+      = page_title
+    %p= _('Custom emoji will be available to use in every project in the group.')
+    = gl_loading_icon(size: 'lg')
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index 8d6eebc27b0..b2ea15d0e47 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -49,7 +49,7 @@
 = render_if_exists 'groups/templates_setting', expanded: expanded
 = render_if_exists 'shared/groups/max_pages_size_setting'
 
-%section.settings.gs-advanced.no-animate#js-advanced-settings{ class: ('expanded' if expanded), data: { qa_selector: 'advanced_settings_content' } }
+%section.settings.gs-advanced.no-animate#js-advanced-settings{ class: ('expanded' if expanded), data: { testid: 'advanced-settings-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only{ role: 'button' }
       = _('Advanced')
diff --git a/app/views/groups/labels/index.html.haml b/app/views/groups/labels/index.html.haml
index 6b4832d81aa..e174d6318e9 100644
--- a/app/views/groups/labels/index.html.haml
+++ b/app/views/groups/labels/index.html.haml
@@ -3,6 +3,7 @@
 - search = params[:search]
 - subscribed = params[:subscribed]
 - labels_or_filters = @labels.exists? || search.present? || subscribed.present?
+- add_page_specific_style 'page_bundles/labels'
 
 - if labels_or_filters
   #js-promote-label-modal
diff --git a/app/views/groups/milestones/_form.html.haml b/app/views/groups/milestones/_form.html.haml
index 7665da08582..ea36aae1c2f 100644
--- a/app/views/groups/milestones/_form.html.haml
+++ b/app/views/groups/milestones/_form.html.haml
@@ -6,7 +6,7 @@
 
   .form-group
     = f.label :title, _("Title")
-    = f.text_field :title, maxlength: 255, class: "form-control", data: { qa_selector: "milestone_title_field" }, required: true, autofocus: true
+    = f.text_field :title, maxlength: 255, class: "form-control", data: { testid: "milestone-title-field" }, required: true, autofocus: true
   = render "shared/milestones/form_dates", f: f
   .form-group
     = f.label :description, _("Description")
@@ -26,7 +26,7 @@
   = f.hidden_field :lock_version
 
   - if @milestone.new_record?
-    = f.submit _('Create milestone'), data: { qa_selector: "create_milestone_button" }, class: 'gl-mr-2', pajamas_button: true
+    = f.submit _('Create milestone'), data: { testid: "create-milestone-button" }, class: 'gl-mr-2', pajamas_button: true
     = render Pajamas::ButtonComponent.new(href: group_milestones_path(@group)) do
       = _("Cancel")
   - else
diff --git a/app/views/groups/milestones/index.html.haml b/app/views/groups/milestones/index.html.haml
index f49b69f821d..0235e252a9d 100644
--- a/app/views/groups/milestones/index.html.haml
+++ b/app/views/groups/milestones/index.html.haml
@@ -9,13 +9,13 @@
       = render 'shared/milestones/search_form'
       = render 'shared/milestones_sort_dropdown'
       - if can?(current_user, :admin_milestone, @group)
-        = render Pajamas::ButtonComponent.new(href: new_group_milestone_path(@group), variant: :confirm, button_options: { data: { qa_selector: "new_group_milestone_link" }, class: "gl-ml-3" }) do
+        = render Pajamas::ButtonComponent.new(href: new_group_milestone_path(@group), variant: :confirm, button_options: { data: { testid: "new-group-milestone-link" }, class: "gl-ml-3" }) do
           = _('New milestone')
   - if @milestones.blank?
     = render 'shared/empty_states/milestones_tab', learn_more_path: help_page_path('user/project/milestones/index') do
       - if can?(current_user, :admin_milestone, @group)
         .text-center
-          = render Pajamas::ButtonComponent.new(href: new_group_milestone_path(@group), variant: :confirm, button_options: { data: { qa_selector: "new_group_milestone_link" }}) do
+          = render Pajamas::ButtonComponent.new(href: new_group_milestone_path(@group), variant: :confirm, button_options: { data: { testid: "new-group-milestone-link" }}) do
             = _('New milestone')
   - else
     .milestones
@@ -30,5 +30,5 @@
   = render 'shared/empty_states/milestones', learn_more_path: help_page_path('user/project/milestones/index') do
     - if can?(current_user, :admin_milestone, @group)
       .text-center
-        = render Pajamas::ButtonComponent.new(href: new_group_milestone_path(@group), variant: :confirm, button_options: { data: { qa_selector: "new_group_milestone_link" }}) do
+        = render Pajamas::ButtonComponent.new(href: new_group_milestone_path(@group), variant: :confirm, button_options: { data: { testid: "new-group-milestone-link" }}) do
           = _('New milestone')
diff --git a/app/views/groups/observability/observability.html.haml b/app/views/groups/observability/observability.html.haml
deleted file mode 100644
index 834fa0e027c..00000000000
--- a/app/views/groups/observability/observability.html.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-- page_title observability_page_title
-
-#js-observability-app{ data: { observability_iframe_src: observability_iframe_src(@group) } }
diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml
index 22e9f9f5071..76758769d01 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -1,5 +1,6 @@
 - breadcrumb_title _("Projects")
 - page_title _("Projects")
+- add_page_specific_style 'page_bundles/projects'
 - @force_desktop_expanded_sidebar = true
 
 = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-search-settings-section' }, header_options: { class: 'gl-new-card-header gl-display-flex' }, body_options: { class: 'gl-new-card-body' }) do |c|
diff --git a/app/views/groups/settings/_git_access_protocols.html.haml b/app/views/groups/settings/_git_access_protocols.html.haml
index db177da1d84..d23f72a3055 100644
--- a/app/views/groups/settings/_git_access_protocols.html.haml
+++ b/app/views/groups/settings/_git_access_protocols.html.haml
@@ -1,7 +1,7 @@
 - if group.root?
   .form-group
     = f.label _('Enabled Git access protocols'), class: 'label-bold'
-    = f.select :enabled_git_access_protocol, options_for_select(enabled_git_access_protocol_options_for_group, group.enabled_git_access_protocol), {}, class: 'form-control', data: { qa_selector: 'enabled_git_access_protocol_dropdown' }, disabled: !::Gitlab::CurrentSettings.enabled_git_access_protocol.blank?
+    = f.select :enabled_git_access_protocol, options_for_select(enabled_git_access_protocol_options_for_group(group), group.enabled_git_access_protocol), {}, class: 'form-control', data: { qa_selector: 'enabled_git_access_protocol_dropdown' }, disabled: !::Gitlab::CurrentSettings.enabled_git_access_protocol.blank?
     - if !::Gitlab::CurrentSettings.enabled_git_access_protocol.blank?
       .form-text.text-muted
         = _("This setting has been configured at the instance level and cannot be overridden per group")
diff --git a/app/views/groups/settings/_transfer.html.haml b/app/views/groups/settings/_transfer.html.haml
index 368e4a981bc..aa533d54b1a 100644
--- a/app/views/groups/settings/_transfer.html.haml
+++ b/app/views/groups/settings/_transfer.html.haml
@@ -1,7 +1,7 @@
 - form_id = "transfer-group-form"
 - 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 }
 
-= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { qa_selector: 'transfer_group_content' } }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { testid: 'transfer-group-content' } }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
   - c.with_header do
     .gl-new-card-title-wrapper
       %h4.gl-new-card-title.warning-title= s_('GroupSettings|Transfer group')
diff --git a/app/views/groups/settings/access_tokens/index.html.haml b/app/views/groups/settings/access_tokens/index.html.haml
index ef85eab6778..832fd6e8ceb 100644
--- a/app/views/groups/settings/access_tokens/index.html.haml
+++ b/app/views/groups/settings/access_tokens/index.html.haml
@@ -50,6 +50,7 @@
               access_levels: GroupMember.access_level_roles,
               default_access_level: Gitlab::Access::GUEST,
               prefix: :resource_access_token,
+              description_prefix: :group_access_token,
               help_path: help_page_path('user/group/settings/group_access_tokens', anchor: 'scopes-for-a-group-access-token')
 
   #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This group has no active access tokens.'), show_role: true } }
diff --git a/app/views/groups/work_items/show.html.haml b/app/views/groups/work_items/show.html.haml
index eb962cc0b69..7def8b0d6e6 100644
--- a/app/views/groups/work_items/show.html.haml
+++ b/app/views/groups/work_items/show.html.haml
@@ -1 +1,7 @@
-.h1 Work Item
+- page_title "##{request.params['iid']}"
+- add_to_breadcrumbs _("Issues"), issues_group_path(@group)
+- add_page_specific_style 'page_bundles/work_items'
+- @gfm_form = true
+- @noteable_type = 'WorkItem'
+
+#js-work-items{ data: work_items_index_data(@group).merge(iid: request.params['iid']) }
diff --git a/app/views/import/github/status.html.haml b/app/views/import/github/status.html.haml
index b07374e5b5f..6f25bc75ca1 100644
--- a/app/views/import/github/status.html.haml
+++ b/app/views/import/github/status.html.haml
@@ -5,10 +5,8 @@
     = sprite_icon('github', css_class: 'gl-mr-2')
   = _('Import repositories from GitHub')
 
-- paginatable = Feature.enabled?(:remove_legacy_github_client)
-
 = render 'import/githubish_status',
-  provider: 'github', paginatable: paginatable,
+  provider: 'github', paginatable: true,
   default_namespace: @namespace,
   cancel_path: cancel_import_github_path,
   details_path: details_import_github_path,
diff --git a/app/views/layouts/_flash.html.haml b/app/views/layouts/_flash.html.haml
index 5a558d42802..c08abfeb813 100644
--- a/app/views/layouts/_flash.html.haml
+++ b/app/views/layouts/_flash.html.haml
@@ -15,3 +15,4 @@
     - elsif value
       = render Pajamas::AlertComponent.new(variant: type_to_variant[key], dismissible: closable.include?(key), alert_options: {class: "flash-#{key}", data: { testid: "alert-#{type_to_variant[key]}" }}) do |c|
         = c.with_body { value }
+  #js-global-alerts
diff --git a/app/views/layouts/_google_tag_manager_body.html.haml b/app/views/layouts/_google_tag_manager_body.html.haml
deleted file mode 100644
index 98d7bf5d138..00000000000
--- a/app/views/layouts/_google_tag_manager_body.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-- return unless google_tag_manager_enabled?
-
-<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=#{google_tag_manager_id}"
-height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
diff --git a/app/views/layouts/_google_tag_manager_head.html.haml b/app/views/layouts/_google_tag_manager_head.html.haml
deleted file mode 100644
index 711a3d66ff7..00000000000
--- a/app/views/layouts/_google_tag_manager_head.html.haml
+++ /dev/null
@@ -1,51 +0,0 @@
-- return unless google_tag_manager_enabled?
-
-- if Feature.enabled?(:gitlab_gtm_datalayer, type: :ops)
-  = javascript_tag do
-    :plain
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-
-      gtag('consent', 'default', {
-        'analytics_storage': 'granted',
-        'ad_storage': 'granted',
-        'functionality_storage': 'granted',
-        'wait_for_update': 500
-      });
-
-      gtag('consent', 'default', {
-        'analytics_storage': 'denied',
-        'ad_storage': 'denied',
-        'functionality_storage': 'denied',
-        'region': ['AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'IS', 'LI', 'NO', 'GB', 'PE', 'RU'],
-        'wait_for_update': 500
-      });
-
-       window.geofeed = (options) => {
-          dataLayer.push({
-            'event' : 'OneTrustCountryLoad',
-            'oneTrustCountryId': options.country.toString()
-          })
-        }
-
-        const json = document.createElement('script');
-        json.setAttribute('src', 'https://geolocation.onetrust.com/cookieconsentpub/v1/geo/location/geofeed');
-        document.head.appendChild(json);
-
-- if Feature.enabled?(:gtm_nonce, type: :ops)
-  = javascript_tag nonce: content_security_policy_nonce do
-    :plain
-      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-      'https://www.googletagmanager.com/gtm.js?id='+i+dl;j.setAttribute('nonce',
-      '#{content_security_policy_nonce}');f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer','#{google_tag_manager_id}');
-- else
-  = javascript_tag do
-    :plain
-      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer','#{google_tag_manager_id}');
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index bbde5f2843b..37d03bde72e 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -1,6 +1,11 @@
 - page_description brand_title unless page_description
 - site_name = _('GitLab')
 - omit_og = sign_in_with_redirect?
+
+-# This is a temporary place for the page specific style migrations to be included on all pages like page_specific_files
+- if Feature.disabled?(:page_specific_styles, current_user)
+  - add_page_specific_style('page_bundles/projects')
+
 %head{ omit_og ? { } : { prefix: "og: http://ogp.me/ns#" } }
   %meta{ charset: "utf-8" }
   %meta{ 'http-equiv' => 'X-UA-Compatible', content: 'IE=edge' }
@@ -38,6 +43,7 @@
   = stylesheet_link_tag_defer "highlight/themes/#{user_color_scheme}"
 
   = stylesheet_link_tag 'performance_bar' if performance_bar_enabled?
+
   = render 'layouts/snowplow'
   = render 'layouts/loading_hints'
 
diff --git a/app/views/layouts/_img_loader.html.haml b/app/views/layouts/_img_loader.html.haml
index c1fe3ae0924..ac00a18f0bc 100644
--- a/app/views/layouts/_img_loader.html.haml
+++ b/app/views/layouts/_img_loader.html.haml
@@ -13,6 +13,6 @@
         img.removeAttribute('data-src');
         img.classList.remove('lazy');
         img.classList.add('js-lazy-loaded');
-        img.dataset.testid = 'js_lazy_loaded_content';
+        img.dataset.testid = 'js-lazy-loaded-content';
       });
     }
diff --git a/app/views/layouts/_loading_hints.html.haml b/app/views/layouts/_loading_hints.html.haml
index 1e6f671aacb..bf0421e9624 100644
--- a/app/views/layouts/_loading_hints.html.haml
+++ b/app/views/layouts/_loading_hints.html.haml
@@ -17,6 +17,7 @@
     -# Do not use preload_link_tag for fonts, to work around Firefox double-fetch bug.
     -# See https://github.com/web-platform-tests/wpt/pull/36930
     %link{ rel: 'preload', href: font_path('gitlab-sans/GitLabSans.woff2'), as: 'font', crossorigin: css_crossorigin }
+    %link{ rel: 'preload', href: font_path('gitlab-sans/GitLabSans-Italic.woff2'), as: 'font', crossorigin: css_crossorigin }
     %link{ rel: 'preload', href: font_path('gitlab-mono/GitLabMono.woff2'), as: 'font', crossorigin: css_crossorigin }
     %link{ rel: 'preload', href: font_path('gitlab-mono/GitLabMono-Italic.woff2'), as: 'font', crossorigin: css_crossorigin }
     = preload_link_tag(path_to_stylesheet('fonts'), crossorigin: css_crossorigin)
diff --git a/app/views/layouts/_snowplow.html.haml b/app/views/layouts/_snowplow.html.haml
index 10b2002dfef..3582deea902 100644
--- a/app/views/layouts/_snowplow.html.haml
+++ b/app/views/layouts/_snowplow.html.haml
@@ -2,7 +2,7 @@
 
 - namespace = @group || @project&.namespace || @namespace
 = webpack_bundle_tag 'tracker'
-- if Gitlab.com? && Feature.enabled?(:browsersdk_tracking)
+- if Gitlab.com? && Feature.enabled?(:browsersdk_tracking) && Feature.enabled?(:gl_analytics_tracking, Feature.current_request)
   = webpack_bundle_tag 'analytics'
 = javascript_tag do
   :plain
diff --git a/app/views/layouts/component_preview.html.haml b/app/views/layouts/component_preview.html.haml
index 8217ac13c52..82ad5e3e3bb 100644
--- a/app/views/layouts/component_preview.html.haml
+++ b/app/views/layouts/component_preview.html.haml
@@ -1,10 +1,12 @@
 %head
+  = stylesheet_link_tag "fonts"
   - if params[:lookbook][:display][:theme] == "light"
     = stylesheet_link_tag "application"
     = stylesheet_link_tag "application_utilities"
   - else
     = stylesheet_link_tag "application_dark"
     = stylesheet_link_tag "application_utilities_dark"
+
 %body
   .gl-mt-6{ class: (params[:lookbook][:display][:layout] == "fluid" ? "container-fluid" : "container") }
     - if params[:lookbook][:display][:bg_dark]
diff --git a/app/views/layouts/header/_super_sidebar_logged_out.haml b/app/views/layouts/header/_super_sidebar_logged_out.haml
index 31dfdfb2bb3..76c7ea03c2a 100644
--- a/app/views/layouts/header/_super_sidebar_logged_out.haml
+++ b/app/views/layouts/header/_super_sidebar_logged_out.haml
@@ -1,7 +1,7 @@
 %header.navbar.navbar-gitlab.super-sidebar-logged-out{ data: { testid: 'navbar' } }
   %a.gl-sr-only.gl-accessibility{ href: "#content-body" } Skip to content
   .container-fluid
-    .header-content.gl-displax-flex
+    %nav.header-content.gl-displax-flex{ 'aria-label': s_('LoggedOutMarketingHeader|Explore GitLab') }
       .title-container.gl-display-flex.gl-align-items-stretch.gl-pt-0.gl-mr-3
         = render 'layouts/header/title'
 
diff --git a/app/views/layouts/header/_title.html.haml b/app/views/layouts/header/_title.html.haml
index 0e57c6809c2..59141cfa2a3 100644
--- a/app/views/layouts/header/_title.html.haml
+++ b/app/views/layouts/header/_title.html.haml
@@ -1,6 +1,6 @@
 .title
   %span.gl-sr-only GitLab
-  = link_to root_path, title: _('Homepage'), id: 'logo', class: 'has-tooltip', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation_top') do
+  = link_to root_path, title: _('Homepage'), id: 'logo', class: 'has-tooltip', aria: { label: _('Homepage') }, **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?
diff --git a/app/views/layouts/mailer/_user_deactivated_additional_text.html.haml b/app/views/layouts/mailer/_user_deactivated_additional_text.html.haml
index cabdd4b09ec..5104d4f6e11 100644
--- a/app/views/layouts/mailer/_user_deactivated_additional_text.html.haml
+++ b/app/views/layouts/mailer/_user_deactivated_additional_text.html.haml
@@ -1,3 +1,3 @@
-- return unless Feature.enabled?(:deactivation_email_additional_text) && Gitlab::CurrentSettings.deactivation_email_additional_text.present?
+- return unless 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
index 5862c8059f9..0de59fe7a75 100644
--- a/app/views/layouts/mailer/_user_deactivated_additional_text.text.erb
+++ b/app/views/layouts/mailer/_user_deactivated_additional_text.text.erb
@@ -1,3 +1,3 @@
-<% return unless Feature.enabled?(:deactivation_email_additional_text) && Gitlab::CurrentSettings.deactivation_email_additional_text.present? %>
+<% return unless Gitlab::CurrentSettings.deactivation_email_additional_text.present? %>
 
 <%= Gitlab::CurrentSettings.deactivation_email_additional_text %>
diff --git a/app/views/layouts/nav/_ask_duo_button.html.haml b/app/views/layouts/nav/_ask_duo_button.html.haml
index f17ccfc8afe..e37ce50352c 100644
--- a/app/views/layouts/nav/_ask_duo_button.html.haml
+++ b/app/views/layouts/nav/_ask_duo_button.html.haml
@@ -1,5 +1,5 @@
 - if Gitlab.ee? && ::Gitlab::Llm::TanukiBot.show_breadcrumbs_entry_point_for?(user: current_user)
-  - label = s_('TanukiBot|Ask GitLab Duo')
+  - label = s_('TanukiBot|GitLab Duo Chat')
   = render Pajamas::ButtonComponent.new(variant: :confirm,
     category: :secondary,
     icon: 'tanuki-ai',
diff --git a/app/views/layouts/nav/_top_bar.html.haml b/app/views/layouts/nav/_top_bar.html.haml
index 73b253e18bd..ef783b688e0 100644
--- a/app/views/layouts/nav/_top_bar.html.haml
+++ b/app/views/layouts/nav/_top_bar.html.haml
@@ -8,8 +8,8 @@
 %div{ class: top_bar_class, data: { testid: 'top-bar' } }
   .top-bar-container.gl-display-flex.gl-align-items-center.gl-gap-2{ :class => top_bar_container_class }
     - if show_super_sidebar?
-      = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: :tertiary, button_options: { class: 'js-super-sidebar-toggle-expand super-sidebar-toggle gl-ml-n3', title: _('Expand sidebar'), aria: { controls: 'super-sidebar', expanded: 'false', label: _('Navigation sidebar') } })
+      = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: :tertiary, button_options: { class: 'js-super-sidebar-toggle-expand super-sidebar-toggle gl-ml-n3', aria: { controls: 'super-sidebar', expanded: 'false', label: _('Primary navigation sidebar') } })
     - elsif defined?(@left_sidebar)
-      = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: :tertiary, button_options: { class: 'toggle-mobile-nav gl-ml-n3', data: { testid: 'toggle_mobile_nav_button' }, aria: { label: _('Open sidebar') } })
+      = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: :tertiary, button_options: { class: 'toggle-mobile-nav gl-ml-n3', data: { testid: 'toggle-mobile-nav-button' }, aria: { label: _('Open sidebar') } })
     = render "layouts/nav/breadcrumbs/breadcrumbs"
     = render "layouts/nav/ask_duo_button"
diff --git a/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml b/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml
index b5f067cf42f..040793d616f 100644
--- a/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml
@@ -2,7 +2,7 @@
 - unless @skip_current_level_breadcrumb
   - push_to_schema_breadcrumb(@breadcrumb_title, breadcrumb_title_link)
 
-%nav.breadcrumbs{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links', qa_selector: 'breadcrumb_links_content' } }
+%nav.breadcrumbs{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links' } }
   %ul.list-unstyled.breadcrumbs-list.js-breadcrumbs-list
     - unless hide_top_links
       = header_title
@@ -11,7 +11,7 @@
         = breadcrumb_list_item link_to(extra[:text], extra[:link])
     = render "layouts/nav/breadcrumbs/collapsed_inline_list", location: :after
     - unless @skip_current_level_breadcrumb
-      %li{ data: { testid: 'breadcrumb-current-link', qa_selector: 'breadcrumb_current_link' } }
+      %li{ data: { testid: 'breadcrumb-current-link' } }
         = link_to @breadcrumb_title, breadcrumb_title_link
   -# haml-lint:disable InlineJavaScript
   %script{ type: 'application/ld+json' }
diff --git a/app/views/layouts/project_settings.html.haml b/app/views/layouts/project_settings.html.haml
index 29e30c4434f..7e5dd0d37c9 100644
--- a/app/views/layouts/project_settings.html.haml
+++ b/app/views/layouts/project_settings.html.haml
@@ -1,6 +1,7 @@
 - page_title  _("Settings")
 - nav         "project"
 - add_page_specific_style 'page_bundles/settings'
+- add_page_specific_style 'page_bundles/projects'
 
 - enable_search_settings locals: { container_class: 'gl-my-5' }
 
diff --git a/app/views/layouts/terms.html.haml b/app/views/layouts/terms.html.haml
index 29a561ae1a9..32f00a4c0c6 100644
--- a/app/views/layouts/terms.html.haml
+++ b/app/views/layouts/terms.html.haml
@@ -20,14 +20,11 @@
             = render Pajamas::CardComponent.new do |c|
               - c.with_header do
                 = brand_header_logo({add_gitlab_black_text: true})
+                - if current_user
+                  .gl-display-flex.gl-gap-2.gl-align-items-center
+                    .gl-text-right.gl-line-height-normal
+                      .gl-font-weight-bold= current_user.name
+                      .gl-text-gray-700 @#{current_user.username}
+                    = render Pajamas::AvatarComponent.new(current_user, size: 32, avatar_options: { data: { qa_selector: 'user_avatar_content' } })
               - c.with_body do
-                - if header_link?(:user_dropdown)
-                  .navbar-collapse
-                    %ul.nav.navbar-nav
-                      %li.header-user.dropdown
-                        = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
-                          = render Pajamas::AvatarComponent.new(current_user, size: 24, class: 'gl-mr-3', avatar_options: { data: { qa_selector: 'user_avatar_content' } })
-                          = sprite_icon('chevron-down')
-                        .dropdown-menu.dropdown-menu-right
-                          = render 'layouts/header/current_user_dropdown'
                 = yield
diff --git a/app/views/notify/build_ios_app_guide_email.html.haml b/app/views/notify/build_ios_app_guide_email.html.haml
deleted file mode 100644
index e9f23d3c0f9..00000000000
--- a/app/views/notify/build_ios_app_guide_email.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-%tr
-  %td{ bgcolor: "#ffffff", height: "auto", style: "max-width: 600px; width: 100%; text-align: center; height: 200px; padding: 25px 15px; mso-line-height-rule: exactly; min-height: 40px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;", valign: "middle", width: "100%" }
-    = inline_image_link(@message.logo_path, { width: '150', style: 'width: 150px;' })
-    %h1{ style: "font-size: 40px; line-height: 46x; color: #000000; padding: 20px 0 0 0; font-weight: normal;" }
-      = @message.title
-%tr
-  %td{ style: "padding: 10px 20px 30px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#000000; font-size: 18px; line-height: 24px;" }
-    %p{ style: "margin: 0 0 20px 0;" }
-      = @message.body_line1.html_safe
-%tr
-  %td{ align: "center", style: "padding: 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
-    .cta_link.cta_link_primary= @message.cta_link
-    .cta_link.cta_link_secondary= @message.cta2_link
diff --git a/app/views/notify/build_ios_app_guide_email.text.erb b/app/views/notify/build_ios_app_guide_email.text.erb
deleted file mode 100644
index 59757b7c1b0..00000000000
--- a/app/views/notify/build_ios_app_guide_email.text.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<%= @message.title %>
-
-<%= @message.body_line1 %>
-
-<%= @message.cta_link %>
-
-<%= @message.cta2_link %>
-
-<%= @message.footer_links %>
-
-<%= @message.address %>
-
-<%= @message.unsubscribe %>
diff --git a/app/views/notify/resource_access_tokens_about_to_expire_email.html.haml b/app/views/notify/resource_access_tokens_about_to_expire_email.html.haml
index e4e34f6c8ee..35c2260f24f 100644
--- a/app/views/notify/resource_access_tokens_about_to_expire_email.html.haml
+++ b/app/views/notify/resource_access_tokens_about_to_expire_email.html.haml
@@ -11,3 +11,5 @@
 %p
   - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: @target_url }
   = html_escape(_('You can create a new one or check them in your %{link_start}access tokens%{link_end} settings.')) % { link_start: link_start, link_end: '</a>'.html_safe }
+%p
+  = @reason_text
diff --git a/app/views/notify/resource_access_tokens_about_to_expire_email.text.erb b/app/views/notify/resource_access_tokens_about_to_expire_email.text.erb
index bea74f09129..f57c3e7b0d0 100644
--- a/app/views/notify/resource_access_tokens_about_to_expire_email.text.erb
+++ b/app/views/notify/resource_access_tokens_about_to_expire_email.text.erb
@@ -9,3 +9,5 @@
 <% end %>
 
 <%= _('You can create a new one or check them in your access token settings: %{target_url}') % { target_url: @target_url } %>
+
+<%= @reason_text %>
diff --git a/app/views/organizations/organizations/index.html.haml b/app/views/organizations/organizations/index.html.haml
index 04a90b7589f..4e58cc7b9c2 100644
--- a/app/views/organizations/organizations/index.html.haml
+++ b/app/views/organizations/organizations/index.html.haml
@@ -1,2 +1,5 @@
+- add_page_specific_style 'page_bundles/organizations'
 - page_title s_('Organization|Organizations')
 - header_title _("Your work"), root_path
+
+#js-organizations-index{ data: organization_index_app_data }
diff --git a/app/views/organizations/organizations/new.html.haml b/app/views/organizations/organizations/new.html.haml
index 4d7f552c87b..1a6c5a79ff6 100644
--- a/app/views/organizations/organizations/new.html.haml
+++ b/app/views/organizations/organizations/new.html.haml
@@ -1,3 +1,6 @@
+- add_page_specific_style 'page_bundles/organizations'
 - page_title s_('Organization|New organization')
 - header_title _("Your work"), root_path
 - add_to_breadcrumbs s_('Organization|Organizations'), organizations_path
+
+#js-organizations-new{ data: { app_data: organization_new_app_data } }
diff --git a/app/views/organizations/settings/general.html.haml b/app/views/organizations/settings/general.html.haml
new file mode 100644
index 00000000000..94892ef9fbb
--- /dev/null
+++ b/app/views/organizations/settings/general.html.haml
@@ -0,0 +1 @@
+- page_title _("General settings")
diff --git a/app/views/profiles/chat_names/index.html.haml b/app/views/profiles/chat_names/index.html.haml
index 7a63fc30d9c..99284abb73d 100644
--- a/app/views/profiles/chat_names/index.html.haml
+++ b/app/views/profiles/chat_names/index.html.haml
@@ -13,7 +13,7 @@
 
   - if @chat_names.present?
     .table-responsive
-      %table.table
+      %table.table.gl-table
         %thead
           %tr
             %th= _('Team domain')
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index 1307c388041..94671b69b5e 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -46,7 +46,7 @@
       .gl-display-flex
         %pre.well-pre.gl-pl-5.gl-mb-0.gl-border-0
           = @key.key
-        = deprecated_clipboard_button(title: s_('Profiles|Copy SSH key'), text: @key.key, class: 'gl-bg-gray-10 gl-px-3! gl-border-none! gl-rounded-top-left-none! gl-rounded-bottom-left-none!')
+        = clipboard_button(title: s_('Profiles|Copy SSH key'), text: @key.key, category: :tertiary, size: :medium)
 
   = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0'}) do |c|
     - c.with_header do
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 42297a0cf3d..ff0b31da022 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -18,24 +18,22 @@
           - register_2fa_token = _('We recommend using cloud-based authenticator applications that can restore access if you lose your hardware device.')
           = register_2fa_token.html_safe
           = link_to _('What are some examples?'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'enable-one-time-password'), target: '_blank', rel: 'noopener noreferrer'
-        .row.gl-mb-3
-          .col-md-4.gl-min-w-fit-content
-            .gl-p-2.gl-mb-3{ style: 'background: #fff' }
-              = raw @qr_code
-          .col-md-8
-            = render Pajamas::CardComponent.new do |c|
-              - c.with_body do
-                %p.gl-mt-0.gl-mb-3.gl-font-weight-bold
-                  = _("Can't scan the code?")
-                %p.gl-mt-0.gl-mb-3
-                  = _('To add the entry manually, provide the following details to the application on your phone.')
-                %p.gl-mt-0.gl-mb-0
-                  = _('Account: %{account}') % { account: @account_string }
-                %p.gl-mt-0.gl-mb-0{ data: { qa_selector: 'otp_secret_content' } }
-                  = _('Key:')
-                  %code.two-factor-secret= current_user.otp_secret.scan(/.{4}/).join(' ')
-                %p.gl-mb-0.two-factor-new-manual-content
-                  = _('Time based: Yes')
+        .gl-p-2.gl-mb-3{ style: 'background: #fff' }
+          = raw @qr_code
+        .gl-mb-5
+          = render Pajamas::CardComponent.new do |c|
+            - c.with_body do
+              %p.gl-mt-0.gl-mb-3.gl-font-weight-bold
+                = _("Can't scan the code?")
+              %p.gl-mt-0.gl-mb-3
+                = _("To add the entry manually, provide the following details to the application on your phone.")
+              %p.gl-mt-0.gl-mb-0
+                = _('Account: %{account}') % { account: @account_string }
+              %p.gl-mt-0.gl-mb-0{ data: { qa_selector: 'otp_secret_content' } }
+                = _('Key:')
+                %code.two-factor-secret= current_user.otp_secret.scan(/.{4}/).join(' ')
+              %p.gl-mb-0.two-factor-new-manual-content
+                = _('Time based: Yes')
         = form_tag profile_two_factor_auth_path, method: :post do |f|
           - if @error
             = render Pajamas::AlertComponent.new(title: @error[:message],
diff --git a/app/views/projects/_commit_button.html.haml b/app/views/projects/_commit_button.html.haml
index 19943aa68a3..afb241dba7c 100644
--- a/app/views/projects/_commit_button.html.haml
+++ b/app/views/projects/_commit_button.html.haml
@@ -1,5 +1,5 @@
 .gl-display-flex.gl-mt-7
-  - submit_button_options = { type: :submit, variant: :confirm, button_options: { id: 'commit-changes', class: 'js-commit-button', data: { qa_selector: 'commit_button' } } }
+  - submit_button_options = { type: :submit, variant: :confirm, button_options: { id: 'commit-changes', class: 'js-commit-button', data: { testid: 'commit-button' } } }
   = render Pajamas::ButtonComponent.new(**submit_button_options) do
     = _('Commit changes')
   = render Pajamas::ButtonComponent.new(loading: true, disabled: true, **submit_button_options.merge({ button_options: { class: 'js-commit-button-loading gl-display-none' } })) do
diff --git a/app/views/projects/_export.html.haml b/app/views/projects/_export.html.haml
index 58c760c54e8..cc11997d809 100644
--- a/app/views/projects/_export.html.haml
+++ b/app/views/projects/_export.html.haml
@@ -2,7 +2,7 @@
 
 - project = local_assigns.fetch(:project)
 
-= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { qa_selector: 'export_project_content' } }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { testid: 'export-project-content' } }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
   - c.with_header do
     .gl-new-card-title-wrapper
       %h4.gl-new-card-title= _('Export project')
@@ -27,10 +27,10 @@
     - if project.export_status == :finished
       = render Pajamas::ButtonComponent.new(href: download_export_project_path(project),
         method: :get,
-        button_options: { ref: 'nofollow', download: '', data: { qa_selector: 'download_export_link' } }) do
+        button_options: { ref: 'nofollow', download: '', data: { testid: 'download-export-link' } }) do
         = _('Download export')
       = render Pajamas::ButtonComponent.new(href: generate_new_export_project_path(project), method: :post) do
         = _('Generate new export')
     - else
-      = render Pajamas::ButtonComponent.new(href: export_project_path(project), method: :post, button_options: { data: { qa_selector: 'export_project_link' } }) do
+      = render Pajamas::ButtonComponent.new(href: export_project_path(project), method: :post, button_options: { data: { testid: 'export-project-link' } }) do
         = _('Export project')
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index cb341ede9de..7445a403865 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -21,7 +21,7 @@
     #js-fork-info{ data: vue_fork_divergence_data(project, ref) }
 
   - if is_project_overview && has_project_shortcut_buttons
-    .project-buttons.gl-mb-5.js-show-on-project-root{ data: { qa_selector: 'project_buttons' } }
+    .project-buttons.gl-mb-5.js-show-on-project-root{ data: { testid: 'project-buttons' } }
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout), project_buttons: true
 
   #js-tree-list{ data: vue_file_list_data(project, ref) }
diff --git a/app/views/projects/_find_file_link.html.haml b/app/views/projects/_find_file_link.html.haml
index 4ad2c339bcc..83f1370b88e 100644
--- a/app/views/projects/_find_file_link.html.haml
+++ b/app/views/projects/_find_file_link.html.haml
@@ -1,2 +1,2 @@
-= link_button_to project_find_file_path(@project, @ref), class: 'shortcuts-find-file', rel: 'nofollow' do
+= link_button_to project_find_file_path(@project, @ref, ref_type: @ref_type), class: 'shortcuts-find-file', rel: 'nofollow' do
   = _('Find file')
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 759ec541af5..93f4fe62568 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -8,17 +8,17 @@
       %div{ class: 'avatar-container rect-avatar s64 home-panel-avatar gl-flex-shrink-0 gl-w-11 gl-h-11 gl-mr-3! float-none' }
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'image')
       %div
-        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex.gl-word-break-word{ data: { qa_selector: 'project_name_content' }, itemprop: 'name' }
+        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex.gl-word-break-word{ data: { testid: 'project-name-content' }, itemprop: 'name' }
           = @project.name
           = visibility_level_content(@project, css_class: 'visibility-icon gl-text-secondary gl-ml-2', icon_css_class: 'icon')
           = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project, additional_classes: 'gl-align-self-center gl-ml-2'
           - if @project.group
             = render_if_exists 'shared/tier_badge', source: @project, source_type: 'Project'
-        .home-panel-metadata.gl-font-sm.gl-text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { qa_selector: 'project_id_content' }, itemprop: 'identifier' }
+        .home-panel-metadata.gl-font-sm.gl-text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { testid: 'project-id-content' }, itemprop: 'identifier' }
           - if can?(current_user, :read_project, @project)
             %span.gl-display-inline-block.gl-vertical-align-middle
               = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
-              = deprecated_clipboard_button(title: s_('ProjectPage|Copy project ID'), text: @project.id)
+              = clipboard_button(title: s_('ProjectPage|Copy project ID'), text: @project.id)
           - if current_user
             %span.gl-ml-3.gl-mb-3
               = render 'shared/members/access_request_links', source: @project
@@ -52,13 +52,13 @@
     = render_if_exists "projects/home_mirror"
 
   - if @project.badges.present?
-    .project-badges.mb-2{ data: { qa_selector: 'project_badges_content' } }
+    .project-badges.mb-2{ data: { testid: 'project-badges-content' } }
       - @project.badges.each do |badge|
         - badge_link_url = badge.rendered_link_url(@project)
         %a.gl-mr-3{ href: badge_link_url,
           target: '_blank',
           rel: 'noopener noreferrer',
-          data: { qa_selector: 'badge_image_link', qa_link_url: badge_link_url } }>
+          data: { testid: 'badge-image-link', qa_link_url: badge_link_url } }>
           %img.project-badge{ src: badge.rendered_image_url(@project),
             'aria-hidden': true,
             alt: 'Project badge' }>
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 89c91887d19..240e9519975 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -16,5 +16,5 @@
 
     - if create_mr_button_from_event?(event)
       - c.with_actions do
-        = render Pajamas::ButtonComponent.new(variant: :confirm, href: create_mr_path_from_push_event(event), button_options: { data: { qa_selector: 'create_merge_request_button' }}) do
+        = render Pajamas::ButtonComponent.new(variant: :confirm, href: create_mr_path_from_push_event(event), button_options: { data: { testid: 'create-merge-request-button' }}) do
           = _('Create merge request')
diff --git a/app/views/projects/_transfer.html.haml b/app/views/projects/_transfer.html.haml
index cf0634ee411..43bb3627c4f 100644
--- a/app/views/projects/_transfer.html.haml
+++ b/app/views/projects/_transfer.html.haml
@@ -3,7 +3,7 @@
 - hidden_input_id = "new_namespace_id"
 - initial_data = { button_text: s_('ProjectSettings|Transfer project'), confirm_danger_message: transfer_project_message(@project), phrase: @project.name, target_form_id: form_id, target_hidden_input_id: hidden_input_id, project_id: @project.id }
 
-= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { qa_selector: 'transfer_project_content' } }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { testid: 'transfer-project-content' } }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
   - c.with_header do
     .gl-new-card-title-wrapper
       %h4.gl-new-card-title.warning-title= _('Transfer project')
diff --git a/app/views/projects/artifacts/file.html.haml b/app/views/projects/artifacts/file.html.haml
index 5b9e5ad584f..d24df0d3472 100644
--- a/app/views/projects/artifacts/file.html.haml
+++ b/app/views/projects/artifacts/file.html.haml
@@ -12,8 +12,6 @@
       = render 'projects/blob/header_content', blob: blob
 
       .file-actions.d-none.d-sm-block
-        = render 'projects/blob/viewer_switcher', blob: blob
-
         .btn-group{ role: "group" }<
           = copy_blob_source_button(blob)
           = download_blob_button(blob)
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index e2cad2fb3d7..bd0f4577a32 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -1,5 +1,6 @@
 - page_title _("Blame"), @blob.path, @ref
 - add_page_specific_style 'page_bundles/tree'
+- add_page_specific_style 'page_bundles/projects'
 - blame_streaming_url = blame_pages_streaming_url(@id, @project)
 
 - if @blame_mode.streaming? && @blame_pagination.total_extra_pages > 0
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 543bdaf46df..2d9b7ada015 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -2,6 +2,7 @@
 - project = @project.present(current_user: current_user)
 - ref = local_assigns[:ref] || @ref
 - expanded = params[:expanded].present?
+- add_page_specific_style 'page_bundles/projects'
 -# If the blob has a RichViewer we preload the content except for GeoJSON since it is handled by Vue
 - if blob.rich_viewer && blob.extension != 'geojson'
   - add_page_startup_api_call local_assigns.fetch(:viewer_url) { url_for(safe_params.merge(viewer: blob.rich_viewer.type, format: :json)) }
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
index 539453bf6af..c140eecd8c1 100644
--- a/app/views/projects/blob/_breadcrumb.html.haml
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -22,11 +22,11 @@
     -# only show normal/blame view links for text files
     - if blob.readable_text?
       - if blame
-        = link_button_to _('Normal view'), project_blob_path(@project, @id)
+        = link_button_to _('Normal view'), project_blob_path(@project, @id, ref_type: @ref_type)
       - else
-        = link_button_to _('Blame'), project_blame_path(@project, @id), class: 'js-blob-blame-link' unless blob.empty?
+        = link_button_to _('Blame'), project_blame_path(@project, @id, ref_type: @ref_type), class: 'js-blob-blame-link' unless blob.empty?
 
-    = link_button_to _('History'), project_commits_path(@project, @id)
+    = link_button_to _('History'), project_commits_path(@project, @id, ref_type: @ref_type)
 
     = link_button_to _('Permalink'), project_blob_path(@project, tree_join(@commit.sha, @path)),
         class: 'js-data-file-blob-permalink-url'
diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml
index 9c07713b9f8..a1d3bef2914 100644
--- a/app/views/projects/blob/_header.html.haml
+++ b/app/views/projects/blob/_header.html.haml
@@ -4,7 +4,6 @@
   = render 'projects/blob/header_content', blob: blob
 
   .file-actions.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-md-justify-content-end<
-    = render 'projects/blob/viewer_switcher', blob: blob unless blame
     = render 'shared/web_ide_button', blob: blob
     .btn-group.gl-ml-3{ role: "group" }
       = copy_blob_source_button(blob) unless blame
diff --git a/app/views/projects/blob/_viewer_switcher.html.haml b/app/views/projects/blob/_viewer_switcher.html.haml
deleted file mode 100644
index 043b8629289..00000000000
--- a/app/views/projects/blob/_viewer_switcher.html.haml
+++ /dev/null
@@ -1,12 +0,0 @@
-- if blob.show_viewer_switcher?
-  - simple_viewer = blob.simple_viewer
-  - rich_viewer = blob.rich_viewer
-
-  .btn-group.js-blob-viewer-switcher.gl-ml-3{ role: "group" }>
-    - simple_label = "Display #{simple_viewer.switcher_title}"
-    %button.btn.gl-button.btn-default.btn-icon.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => simple_label, title: simple_label, data: { viewer: 'simple', container: 'body' } }>
-      = sprite_icon(simple_viewer.switcher_icon)
-
-    - rich_label = "Display #{rich_viewer.switcher_title}"
-    %button.btn.gl-button.btn-default.btn-icon.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
-      = sprite_icon(rich_viewer.switcher_icon)
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index 195dc03632a..74f1688a2db 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -12,7 +12,7 @@
       - link_end = '</a>'.html_safe
       - external_link_icon = content_tag 'span', { aria: { label: _('Opens new window') }} do
         - sprite_icon('external-link', css_class: 'gl-icon').html_safe
-      - if @different_project
+      - if commit_to_fork
         = _("Error: Can't edit this file. The fork and upstream project have diverged. %{link_start}Edit the file on the fork %{icon}%{link_end}, and create a merge request.").html_safe % {link_start: blob_link_start % { url: project_blob_path(@project_to_commit_into, @id) } , link_end: link_end, icon: external_link_icon }
       - else
         - blob_url = project_blob_path(@project, @id)
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index 9ec824f64d4..82f517e8a84 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/app/views/projects/blob/show.html.haml
@@ -4,7 +4,7 @@
 - signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit, limit: 1)
 - content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
-- add_page_startup_graphql_call('repository/blob_info', { projectPath: @project.full_path, ref: current_ref, refType: @ref_type.to_s, filePath: @blob.path, shouldFetchRawText: @blob.rendered_as_text? && !@blob.rich_viewer })
+- add_page_startup_graphql_call('repository/blob_info', { projectPath: @project.full_path, ref: current_ref, refType: @ref_type.to_s.upcase, filePath: @blob.path, shouldFetchRawText: @blob.rendered_as_text? && !@blob.rich_viewer })
 
 .js-signature-container{ data: { 'signatures-path': signatures_path } }
 
diff --git a/app/views/projects/blob/viewers/_loading.html.haml b/app/views/projects/blob/viewers/_loading.html.haml
index d8efaf9ad95..40b64cac1f7 100644
--- a/app/views/projects/blob/viewers/_loading.html.haml
+++ b/app/views/projects/blob/viewers/_loading.html.haml
@@ -1 +1 @@
-= gl_loading_icon(size: "md", css_class: "gl-my-4", data: { qa_selector: 'spinner_placeholder' })
+= gl_loading_icon(size: "md", css_class: "gl-my-4", data: { testid: 'spinner-placeholder' })
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 7c52350f101..61961172eb2 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -28,7 +28,7 @@
 
   .pipeline-status.d-none.d-md-block<
     - if commit_status
-      = render 'ci/status/icon', size: 16, status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-3'
+      = render 'ci/status/icon', size: 16, status: commit_status
     - elsif show_commit_status
       .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-3
         %svg.s16
diff --git a/app/views/projects/buttons/_clone.html.haml b/app/views/projects/buttons/_clone.html.haml
index b5679bc512c..0e645eda678 100644
--- a/app/views/projects/buttons/_clone.html.haml
+++ b/app/views/projects/buttons/_clone.html.haml
@@ -15,7 +15,7 @@
           .input-group.btn-group
             = text_field_tag :ssh_project_clone, ssh_clone_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true, aria: { label: _('Repository clone URL') }, data: { qa_selector: 'ssh_clone_url_content' }
             .input-group-append
-              = deprecated_clipboard_button(target: '#ssh_project_clone', title: _("Copy URL"), class: "input-group-text gl-button btn btn-icon btn-default")
+              = clipboard_button(target: '#ssh_project_clone', title: _("Copy URL"), category: :primary, size: :medium)
               = render_if_exists 'projects/buttons/geo'
       - if http_enabled?
         %li.pt-2{ class: 'gl-px-4!' }
@@ -24,7 +24,7 @@
           .input-group.btn-group
             = text_field_tag :http_project_clone, http_clone_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true, aria: { label: _('Repository clone URL') }, data: { qa_selector: 'http_clone_url_content' }
             .input-group-append
-              = deprecated_clipboard_button(target: '#http_project_clone', title: _("Copy URL"), class: "input-group-text gl-button btn btn-icon btn-default")
+              = clipboard_button(target: '#http_project_clone', title: _("Copy URL"), category: :primary, size: :medium)
               = render_if_exists 'projects/buttons/geo'
         = render_if_exists 'projects/buttons/kerberos_clone_field'
       %li.divider.mt-2
diff --git a/app/views/projects/buttons/_compare.html.haml b/app/views/projects/buttons/_compare.html.haml
new file mode 100644
index 00000000000..82b1b837fbb
--- /dev/null
+++ b/app/views/projects/buttons/_compare.html.haml
@@ -0,0 +1,8 @@
+- project = local_assigns.fetch(:project)
+- ref = local_assigns.fetch(:ref, nil)
+- root_ref = local_assigns.fetch(:root_ref, nil)
+- unless ref.blank? || root_ref == ref
+  - compare_path = project_compare_index_path(project, from: root_ref, to: ref)
+
+  = link_button_to compare_path, class: 'shortcuts-compare', rel: 'nofollow' do
+    = _('Compare')
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 23d18236738..b3282742407 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -6,7 +6,7 @@
 - if !project.empty_repo? && can?(current_user, :download_code, project)
   - archive_prefix = "#{project.path}-#{ref.tr('/', '-')}"
   .project-action-button.dropdown.gl-dropdown.inline{ class: css_class }>
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'dropdown-toggle gl-dropdown-toggle dropdown-icon-only has-tooltip', title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { qa_selector: 'download_source_code_button' } }) do
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'dropdown-toggle gl-dropdown-toggle dropdown-icon-only has-tooltip', title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { testid: 'download-source-code-button' } }) do
       = sprite_icon('download', css_class: 'gl-icon dropdown-icon')
       %span.sr-only=  _('Select Archive Format')
       = sprite_icon('chevron-down', css_class: 'gl-icon dropdown-chevron')
@@ -15,7 +15,7 @@
         %h5.m-0.dropdown-bold-header= _('Download source code')
         .dropdown-menu-content
           = render 'projects/buttons/download_links', project: project, ref: ref, archive_prefix: archive_prefix, path: nil
-      #js-directory-downloads{ data: { links: directory_download_links(project, ref, archive_prefix).to_json } }
+      .js-directory-downloads{ data: { links: directory_download_links(project, ref, archive_prefix).to_json } }
       - if pipeline && pipeline.latest_builds_with_artifacts.any?
         %section.border-top.pt-1.mt-1
           %h5.m-0.dropdown-bold-header= _('Download artifacts')
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 1034f06f722..be2bf43cbb9 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -1,6 +1,7 @@
 - breadcrumb_title _("Commits")
 - add_page_specific_style 'page_bundles/tree'
 - add_page_specific_style 'page_bundles/merge_request'
+- add_page_specific_style 'page_bundles/projects'
 - page_title _("Commits"), @ref
 
 = content_for :meta_tags do
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 0158018ecc0..4e84a6ef7e7 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -18,7 +18,7 @@
     %p.gl-text-secondary= _('Update your project name, topics, description, and avatar.')
   .settings-content= render 'projects/settings/general'
 
-%section.settings.sharing-permissions.no-animate#js-shared-permissions{ class: ('expanded' if expanded), data: { qa_selector: 'visibility_features_permissions_content' } }
+%section.settings.sharing-permissions.no-animate#js-shared-permissions{ class: ('expanded' if expanded), data: { testid: 'visibility-features-permissions-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Visibility, project features, permissions')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
@@ -38,7 +38,7 @@
       - c.with_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 }
 
-%section.settings.no-animate{ class: ('expanded' if expanded), data: { qa_selector: 'badges_settings_content' } }
+%section.settings.no-animate{ class: ('expanded' if expanded), data: { testid: 'badges-settings-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_('ProjectSettings|Badges')
@@ -56,7 +56,7 @@
 
 = render 'projects/service_desk_settings'
 
-%section.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded), data: { qa_selector: 'advanced_settings_content' } }
+%section.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded), data: { testid: 'advanced-settings-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Advanced')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
@@ -107,8 +107,8 @@
                 .input-group-prepend
                   .input-group-text
                     #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
-                = f.text_field :path, class: 'form-control gl-form-input-xl', data: { qa_selector: 'project_path_field' }
-          = f.submit _('Change path'), class: "btn-danger", data: { qa_selector: 'change_path_button' }, pajamas_button: true
+                = f.text_field :path, class: 'form-control gl-form-input-xl', data: { testid: 'project-path-field' }
+          = f.submit _('Change path'), class: "btn-danger", data: { testid: 'change-path-button' }, pajamas_button: true
 
     = render 'transfer', project: @project
 
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index deb3c33f733..902a5df9394 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -17,7 +17,7 @@
   %p
     = _('You can get started by cloning the repository or start adding files to it with one of the following options.')
 
-.project-buttons{ data: { qa_selector: 'quick_actions_container' } }
+.project-buttons{ data: { testid: 'quick-actions-container' } }
   .project-clone-holder.d-block.d-md-none.gl-mt-3.gl-mr-3
     = render "shared/mobile_clone_panel"
 
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index 541b8c1147d..0c760ab82c9 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -1,13 +1,16 @@
 - page_title _("Find File"), @ref
 - add_page_specific_style 'page_bundles/tree'
+- add_page_specific_style 'page_bundles/projects'
 
-.file-finder-holder.tree-holder.clearfix.js-file-finder.gl-pt-4{ '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)) }
+- tree_path = project_tree_path(@project, @ref)
+- blob_path = project_blob_path(@project, @ref)
+.file-finder-holder.tree-holder.clearfix.js-file-finder.gl-pt-4{ data: { file_find_url: "#{escape_javascript(project_files_path(@project, @ref, ref_type: @ref_type, format: :json))}", find_tree_url: escape_javascript(tree_path), blob_url_template: escape_javascript(blob_path), ref_type: @ref_type } }
   .nav-block.gl-xs-mr-0
     .tree-ref-holder.gl-xs-mb-3.gl-xs-w-full.gl-max-w-26
-      #js-blob-ref-switcher{ data: { project_id: @project.id, ref: @ref, namespace: "/-/find_file" } }
+      #js-blob-ref-switcher{ data: { project_id: @project.id, ref: @ref, ref_type: @ref_type, namespace: "/-/find_file" } }
     %ul.breadcrumb.repo-breadcrumb.gl-flex-nowrap
       %li.breadcrumb-item.gl-white-space-nowrap
-        = link_to project_tree_path(@project, @ref) do
+        = link_to project_tree_path(@project, @ref, ref_type: @ref_type) do
           = @project.path
       %li.file-finder.breadcrumb-item
         %input#file_find.form-control.file-finder-input{ type: "text", placeholder: _('Find by path'), autocomplete: 'off' }
diff --git a/app/views/projects/issues/_details_content.html.haml b/app/views/projects/issues/_details_content.html.haml
index 51ffb68f4e5..881e6863040 100644
--- a/app/views/projects/issues/_details_content.html.haml
+++ b/app/views/projects/issues/_details_content.html.haml
@@ -16,7 +16,7 @@
       = edited_time_ago_with_tooltip(issuable, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')
 
     .js-issue-widgets
-      = render 'projects/issues/emoji_block', issuable: issuable, api_awards_path: api_awards_path
+      = render 'projects/issues/emoji_block', issuable: issuable, api_awards_path: api_awards_path, new_custom_emoji_path: new_custom_emoji_path(@project.group)
 
   .js-issue-widgets
     = render 'projects/issues/sentry_stack_trace', issuable: issuable
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index c6e5102889a..5cb7fa8816e 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -13,4 +13,5 @@
     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)}",
     report_abuse_path: add_category_abuse_reports_path,
-    new_comment_template_path: profile_comment_templates_path } }
+    new_comment_template_path: profile_comment_templates_path,
+    new_custom_emoji_path: new_custom_emoji_path(@project.group) } }
diff --git a/app/views/projects/issues/_emoji_block.html.haml b/app/views/projects/issues/_emoji_block.html.haml
index 7eb3c0f5c9f..f9eee9ec99e 100644
--- a/app/views/projects/issues/_emoji_block.html.haml
+++ b/app/views/projects/issues/_emoji_block.html.haml
@@ -1,8 +1,9 @@
 - api_awards_path = local_assigns.fetch(:api_awards_path, nil)
+- new_custom_emoji_path = local_assigns.fetch(:new_custom_emoji_path, nil)
 
 .emoji-block.emoji-block-sticky
   .row.gl-m-0.gl-justify-content-space-between
     .js-noteable-awards
-      = render 'award_emoji/awards_block', awardable: issuable, inline: true, api_awards_path: api_awards_path
+      = render 'award_emoji/awards_block', awardable: issuable, inline: true, api_awards_path: api_awards_path, new_custom_emoji_path: new_custom_emoji_path
     .new-branch-col.gl-font-size-0.gl-my-2
       = render 'new_branch' if show_new_branch_button?
diff --git a/app/views/projects/issues/new.html.haml b/app/views/projects/issues/new.html.haml
index 64143502b77..57f78152159 100644
--- a/app/views/projects/issues/new.html.haml
+++ b/app/views/projects/issues/new.html.haml
@@ -1,4 +1,5 @@
 - add_page_specific_style 'page_bundles/merge_request'
+- add_page_specific_style 'page_bundles/labels'
 - add_to_breadcrumbs _("Issues"), project_issues_path(@project)
 - breadcrumb_title _("New")
 - page_title _("New Issue")
diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml
index 0073c6b89cd..8f6efbf9c83 100644
--- a/app/views/projects/jobs/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -3,4 +3,4 @@
 - add_page_specific_style 'page_bundles/merge_request'
 - admin = local_assigns.fetch(:admin, false)
 
-#js-jobs-table{ data: { admin: admin, full_path: @project.full_path, job_statuses: job_statuses.to_json, pipeline_editor_path: project_ci_pipeline_editor_path(@project), empty_state_svg_path: image_path('jobs-empty-state.svg') } }
+#js-jobs-table{ data: { admin: admin, full_path: @project.full_path, job_statuses: job_statuses.to_json, pipeline_editor_path: project_ci_pipeline_editor_path(@project), empty_state_svg_path: image_path('illustrations/empty-state/empty-pipeline-md.svg') } }
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index 4b27b344498..03086b19984 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -3,6 +3,7 @@
 - search = params[:search]
 - subscribed = params[:subscribed]
 - labels_or_filters = @labels.exists? || @prioritized_labels.exists? || search.present? || subscribed.present?
+- add_page_specific_style 'page_bundles/labels'
 
 - if labels_or_filters
   #js-promote-label-modal
diff --git a/app/views/projects/merge_requests/_awards_block.html.haml b/app/views/projects/merge_requests/_awards_block.html.haml
index c1952793e72..f657f683a6d 100644
--- a/app/views/projects/merge_requests/_awards_block.html.haml
+++ b/app/views/projects/merge_requests/_awards_block.html.haml
@@ -1,2 +1,2 @@
 .emoji-block.emoji-list-container.js-noteable-awards
-  = render 'award_emoji/awards_block', awardable: @merge_request, inline: true, api_awards_path: award_emoji_merge_request_api_path(@merge_request)
+  = render 'award_emoji/awards_block', awardable: @merge_request, inline: true, api_awards_path: award_emoji_merge_request_api_path(@merge_request), new_custom_emoji_path: new_custom_emoji_path(@project.group)
diff --git a/app/views/projects/merge_requests/_description.html.haml b/app/views/projects/merge_requests/_description.html.haml
index 5590f9e6184..89eed0789e8 100644
--- a/app/views/projects/merge_requests/_description.html.haml
+++ b/app/views/projects/merge_requests/_description.html.haml
@@ -1,6 +1,6 @@
 %div
   - if @merge_request.description.present?
-    .description{ class: ['gl-mt-4!', can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''], data: { qa_selector: 'description_content' } }
+    .description{ class: ['gl-mt-4!', can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''], data: { testid: 'description-content' } }
       .md
         = markdown_field(@merge_request, :description)
       %textarea.hidden.js-task-list-field{ data: { value: @merge_request.description } }
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 4a7aa9a86ab..21a74d30ba5 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -43,7 +43,7 @@
               = link_to_label(label, type: :merge_request, small: true)
 
     .issuable-meta
-      %ul.controls.d-flex.align-items-end
+      %ul.controls.d-flex.align-items-center
         - if merge_request.merged?
           - merged_at = merge_request.merged_at ? l(merge_request.merged_at.to_time) : _("Merge date & time could not be determined")
           %li.d-none.d-sm-flex
diff --git a/app/views/projects/merge_requests/_mr_box.html.haml b/app/views/projects/merge_requests/_mr_box.html.haml
index 1774401ed78..08b3eb4e5b6 100644
--- a/app/views/projects/merge_requests/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/_mr_box.html.haml
@@ -1,3 +1,3 @@
 .detail-page-description.gl-pt-2.gl-pb-4.gl-display-flex.gl-align-items-baseline.gl-flex-wrap{ class: "#{'is-merge-request' if moved_mr_sidebar_enabled? && !fluid_layout}" }
-  = render 'shared/issuable/status_box', issuable: @merge_request
+  .js-mr-header{ data: { project_path: @merge_request.project.path_with_namespace, hidden: @merge_request.hidden?.to_s, iid: @merge_request.iid, state: @merge_request.state } }
   = merge_request_header(@project, @merge_request)
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index f0e7df8a379..1b0aba8d496 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -2,7 +2,7 @@
 - can_reopen_merge_request = can?(current_user, :reopen_merge_request, @merge_request)
 - are_close_and_open_buttons_hidden = merge_request_button_hidden?(@merge_request, true) && merge_request_button_hidden?(@merge_request, false)
 - hide_gutter_toggle = local_assigns.fetch(:hide_gutter_toggle, false)
-- cache_key = [@project, @merge_request, can_update_merge_request, can_reopen_merge_request, are_close_and_open_buttons_hidden, current_user&.preferred_language, "1.1-updated_header", moved_mr_sidebar_enabled?, hide_gutter_toggle, fluid_layout]
+- cache_key = [@project, @merge_request, can_update_merge_request, can_reopen_merge_request, are_close_and_open_buttons_hidden, current_user&.preferred_language, "1.1-updated_header", moved_mr_sidebar_enabled?, hide_gutter_toggle, fluid_layout, Gitlab::CurrentSettings.gitpod_enabled, current_user&.gitpod_enabled]
 
 = cache(cache_key, expires_in: 1.day) do
   - if @merge_request.closed_or_merged_without_fork?
@@ -14,10 +14,8 @@
 
   .detail-page-header.border-bottom-0.gl-display-block.gl-pt-5{ class: "gl-md-display-flex! #{'is-merge-request' if moved_mr_sidebar_enabled? && !fluid_layout}" }
     .detail-page-header-body
-      .issuable-meta.gl-display-flex
-        .js-header-metadata-root{ data: { hidden: @merge_request.hidden?.to_s } }
-        %h1.title.page-title.gl-font-size-h-display.gl-my-0.gl-display-inline-block{ data: { qa_selector: 'title_content' } }
-          = markdown_field(@merge_request, :title)
+      %h1.title.page-title.gl-font-size-h-display.gl-my-0.gl-display-inline-block.gl-flex-grow-1{ data: { testid: 'title-content' } }
+        = markdown_field(@merge_request, :title)
 
       - unless hide_gutter_toggle
         %div
@@ -26,7 +24,7 @@
 
     .detail-page-header-actions.gl-align-self-start.is-merge-request.js-issuable-actions.gl-display-flex
       - if can_update_merge_request
-        = render Pajamas::ButtonComponent.new(href: edit_project_merge_request_path(@project, @merge_request), button_options: {class: "gl-display-none gl-md-display-block js-issuable-edit", data: { qa_selector: "edit_title_button" }}) do
+        = render Pajamas::ButtonComponent.new(href: edit_project_merge_request_path(@project, @merge_request), button_options: {class: "gl-display-none gl-md-display-block js-issuable-edit", data: { testid: "edit-title-button" }}) do
           = _('Edit')
 
       - if @merge_request.source_project
diff --git a/app/views/projects/merge_requests/_page.html.haml b/app/views/projects/merge_requests/_page.html.haml
index dfb18b52021..637980bd2f8 100644
--- a/app/views/projects/merge_requests/_page.html.haml
+++ b/app/views/projects/merge_requests/_page.html.haml
@@ -50,7 +50,11 @@
           #js-vue-discussion-counter{ data: { blocks_merge: @project.only_allow_merge_if_all_discussions_are_resolved?.to_s } }
           - if moved_mr_sidebar_enabled?
             - if !!@issuable_sidebar.dig(:current_user, :id)
-              .js-sidebar-todo-widget-root{ data: { project_path: @issuable_sidebar[:project_full_path], iid: @issuable_sidebar[:iid], id: @issuable_sidebar[:id] } }
+              .gl-display-flex.gl-gap-3
+                .js-sidebar-todo-widget-root{ data: { project_path: @issuable_sidebar[:project_full_path], iid: @issuable_sidebar[:iid], id: @issuable_sidebar[:id] } }
+                - if notifications_todos_buttons_enabled?
+                  .js-sidebar-subscriptions-widget-root{ data: { full_path: @issuable_sidebar[:project_full_path], iid: @issuable_sidebar[:iid] } }
+
             .gl-ml-auto.gl-align-items-center.gl-display-none.gl-md-display-flex.gl-ml-3.js-expand-sidebar.gl-absolute.gl-right-5{ class: "gl-lg-display-none!" }
               = render Pajamas::ButtonComponent.new(icon: 'chevron-double-lg-left',
                 button_options: { class: 'js-sidebar-toggle' }) do
@@ -83,7 +87,8 @@
                 current_user_data: @current_user_data,
                 is_locked: @merge_request.discussion_locked.to_s,
                 report_abuse_path: add_category_abuse_reports_path,
-                new_comment_template_path: profile_comment_templates_path } }
+                new_comment_template_path: profile_comment_templates_path,
+                new_custom_emoji_path: new_custom_emoji_path(@project.group) } }
           - 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/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index abf2949938c..954bd48fb41 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -8,7 +8,7 @@
     = f.hidden_field(:redirect_path, name: :redirect_path, id: :redirect_path, value: @redirect_path)
   .form-group
     = f.label :title, _('Title')
-    = f.text_field :title, maxlength: 255, class: 'form-control gl-form-input', data: { qa_selector: 'milestone_title_field' }, required: true, autofocus: true
+    = f.text_field :title, maxlength: 255, class: 'form-control gl-form-input', data: { testid: 'milestone-title-field' }, required: true, autofocus: true
   = render 'shared/milestones/form_dates', f: f
   .form-group
     = f.label :description, _('Description')
@@ -28,7 +28,7 @@
   = f.hidden_field :lock_version
 
   - if @milestone.new_record?
-    = f.submit _('Create milestone'), data: { qa_selector: 'create_milestone_button' }, class: 'gl-mr-2', pajamas_button: true
+    = f.submit _('Create milestone'), data: { testid: 'create-milestone-button' }, class: 'gl-mr-2', pajamas_button: true
     = link_button_to _('Cancel'), project_milestones_path(@project)
   - else
     = f.submit _('Save changes'), class: 'gl-mr-2', pajamas_button: true
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index a7a21ef0440..a6c49d8000d 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -9,14 +9,14 @@
       = render 'shared/milestones/search_form'
       = render 'shared/milestones_sort_dropdown'
       - if can?(current_user, :admin_milestone, @project)
-        = link_button_to new_project_milestone_path(@project), class: 'gl-ml-3', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone'), variant: :confirm do
+        = link_button_to new_project_milestone_path(@project), class: 'gl-ml-3', data: { testid: "new-project-milestone-link" }, title: _('New milestone'), variant: :confirm do
           = _('New milestone')
 
   - if @milestones.blank?
     = render 'shared/empty_states/milestones_tab' do
       - if can?(current_user, :admin_milestone, @project)
         .text-center
-          = link_button_to new_project_milestone_path(@project), data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone'), variant: :confirm do
+          = link_button_to new_project_milestone_path(@project), data: { testid: "new-project-milestone-link" }, title: _('New milestone'), variant: :confirm do
             = _('New milestone')
 
   - else
@@ -32,5 +32,5 @@
   = render 'shared/empty_states/milestones' do
     - if can?(current_user, :admin_milestone, @project)
       .text-center
-        = link_button_to new_project_milestone_path(@project), data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone'), variant: :confirm do
+        = link_button_to new_project_milestone_path(@project), data: { testid: "new-project-milestone-link" }, title: _('New milestone'), variant: :confirm do
           = _('New milestone')
diff --git a/app/views/projects/ml/models/index.html.haml b/app/views/projects/ml/models/index.html.haml
index a1c6376e9b4..08f0db257ae 100644
--- a/app/views/projects/ml/models/index.html.haml
+++ b/app/views/projects/ml/models/index.html.haml
@@ -1,4 +1,4 @@
 - breadcrumb_title s_('ModelRegistry|Model registry')
 - page_title s_('ModelRegistry|Model registry')
 
-= render(Projects::Ml::ModelsIndexComponent.new(models: @models))
+= render(Projects::Ml::ModelsIndexComponent.new(paginator: @paginator))
diff --git a/app/views/projects/ml/models/show.html.haml b/app/views/projects/ml/models/show.html.haml
new file mode 100644
index 00000000000..be611e55304
--- /dev/null
+++ b/app/views/projects/ml/models/show.html.haml
@@ -0,0 +1,5 @@
+- add_to_breadcrumbs s_('ModelRegistry|Model registry'), project_ml_models_path(@model.project)
+- breadcrumb_title @model.name
+- page_title @model.name
+
+= render(Projects::Ml::ShowMlModelComponent.new(model: @model))
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index bf288d3601b..40acd123aaa 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -3,6 +3,7 @@
 - page_title    _('New Project')
 - header_title  _("Projects"), dashboard_projects_path
 - add_page_specific_style 'page_bundles/new_namespace'
+- add_page_specific_style 'page_bundles/projects'
 
 .project-edit-container
   .project-edit-errors
diff --git a/app/views/projects/notes/_actions.html.haml b/app/views/projects/notes/_actions.html.haml
index 6b875ff904c..68b7bcd5bb5 100644
--- a/app/views/projects/notes/_actions.html.haml
+++ b/app/views/projects/notes/_actions.html.haml
@@ -19,6 +19,6 @@
     .note-actions-item.gl-ml-0
       = render Pajamas::ButtonComponent.new(category: :tertiary,
         icon: 'pencil',
-        button_options: { class: 'note-action-button js-note-edit has-tooltip', data: { container: 'body', qa_selector: 'edit_comment_button' }, title: _('Edit comment'), 'aria-label': _('Edit comment') })
+        button_options: { class: 'note-action-button js-note-edit has-tooltip', data: { container: 'body', testid: 'edit-comment-button' }, title: _('Edit comment'), 'aria-label': _('Edit comment') })
 
   = render 'projects/notes/more_actions_dropdown', note: note, note_editable: note_editable
diff --git a/app/views/projects/notes/_more_actions_dropdown.html.haml b/app/views/projects/notes/_more_actions_dropdown.html.haml
index 54d1bf012f3..b64824bf509 100644
--- a/app/views/projects/notes/_more_actions_dropdown.html.haml
+++ b/app/views/projects/notes/_more_actions_dropdown.html.haml
@@ -2,7 +2,7 @@
 
 - if note_editable || !is_current_user
   %div{ class: "dropdown more-actions note-actions-item gl-ml-0!" }
-    = render Pajamas::ButtonComponent.new(icon: 'ellipsis_v', category: :tertiary, button_options: { class: 'note-action-button more-actions-toggle has-tooltip', data: { title: 'More actions', toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' }})
+    = render Pajamas::ButtonComponent.new(icon: 'ellipsis_v', category: :tertiary, button_options: { class: 'note-action-button more-actions-toggle has-tooltip', data: { title: 'More actions', toggle: 'dropdown', container: 'body', testid: 'more-actions-dropdown' }})
     %ul.dropdown-menu.more-actions-dropdown.dropdown-open-left
       %li
         = deprecated_clipboard_button(text: noteable_note_url(note), title: _('Copy reference'), button_text: _('Copy link'), class: 'btn-clipboard', hide_tooltip: true, hide_button_icon: true)
@@ -11,6 +11,6 @@
           .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
+          = link_to note_url(note), method: :delete, data: { confirm: _('Are you sure you want to delete this comment?'), confirm_btn_variant: 'danger', testid: 'delete-comment-button' }, aria: { label: _('Delete comment') }, remote: true, class: 'js-note-delete' do
             %span.text-danger
               = _('Delete comment')
diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml
index 210f9c35c79..d47de725603 100644
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -4,7 +4,6 @@
 
 %h1.page-title.gl-font-size-h-display
   = s_('Pipeline|Run pipeline')
-%hr
 
 #js-new-pipeline{ data: { project_id: @project.id,
   pipelines_path: project_pipelines_path(@project),
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index e7da3177cde..dcb37541a04 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -13,10 +13,10 @@
     - if @project.archived?
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'unarchive-a-project') }
       %p= _("Unarchiving the project restores its members' ability to make commits, and create issues, comments, and other entities. %{strong_start}After you unarchive the project, it displays in the search and on the dashboard.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
-      = render Pajamas::ButtonComponent.new(method: :post, href: unarchive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Unarchive project') }, data: { confirm: _("Are you sure that you want to unarchive this project?"), qa_selector: 'unarchive_project_link' } }) do
+      = render Pajamas::ButtonComponent.new(method: :post, href: unarchive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Unarchive project') }, data: { confirm: _("Are you sure that you want to unarchive this project?"), testid: 'unarchive-project-link' } }) do
         =  _('Unarchive project')
     - else
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'archive-a-project') }
       %p= _("Archiving the project makes it entirely read-only. It is hidden from the dashboard and doesn't display in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
-      = render Pajamas::ButtonComponent.new(method: :post, href: archive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Archive project') }, data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link', 'confirm-btn-variant': 'confirm' } }) do
+      = render Pajamas::ButtonComponent.new(method: :post, href: archive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Archive project') }, data: { confirm: _("Are you sure that you want to archive this project?"), testid: 'archive-project-link', 'confirm-btn-variant': 'confirm' } }) do
         =  _('Archive project')
diff --git a/app/views/projects/settings/_general.html.haml b/app/views/projects/settings/_general.html.haml
index f5c275827fc..47ea2f1a544 100644
--- a/app/views/projects/settings/_general.html.haml
+++ b/app/views/projects/settings/_general.html.haml
@@ -7,7 +7,7 @@
       .form-group.col-md-5
         = f.label :name, class: 'label-bold', for: 'project_name_edit' do
           = _('Project name')
-        = f.text_field :name, class: 'form-control gl-form-input', id: "project_name_edit", data: { qa_selector: 'project_name_field' }
+        = f.text_field :name, class: 'form-control gl-form-input', id: "project_name_edit", data: { testid: 'project-name-field' }
 
       .form-group.col-md-7
         = f.label :id, class: 'label-bold' do
@@ -37,4 +37,4 @@
       %hr
       = link_button_to _('Remove avatar'), project_avatar_path(@project), aria: { label: _('Remove avatar') }, data: { confirm: _('Avatar will be removed. Are you sure?'), 'confirm-btn-variant': 'danger' }, method: :delete, variant: :danger, category: :secondary
 
-  = f.submit _('Save changes'), pajamas_button: true, class: "gl-mt-6", data: { qa_selector: 'save_naming_topics_avatar_button' }
+  = f.submit _('Save changes'), pajamas_button: true, class: "gl-mt-6", data: { testid: 'save-naming-topics-avatar-button' }
diff --git a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
index 46cfcf20535..fd27b125602 100644
--- a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
@@ -20,7 +20,7 @@
       %fieldset.builds-feature.js-auto-devops-settings
         .form-group
           = f.fields_for :auto_devops_attributes, @auto_devops do |form|
-            = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-3' }, footer_options: { class: auto_devops_enabled || 'hidden' }) do |c|
+            = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-3' }, footer_options: { class: "js-extra-settings #{auto_devops_enabled || 'hidden'}", data: { testid: 'extra-auto-devops-settings' } }) do |c|
               - c.with_body do
                 - autodevops_help_link = link_to _('Learn more.'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer'
                 - auto_devops_badge = auto_devops_enabled ? (gl_badge_tag badge_for_auto_devops_scope(@project), { variant: :info }, { class: 'js-instance-default-badge gl-ml-3 gl-mt-n1'}) : ''
diff --git a/app/views/projects/settings/integrations/_form.html.haml b/app/views/projects/settings/integrations/_form.html.haml
index d2df01c22bb..6f37eb1b32d 100644
--- a/app/views/projects/settings/integrations/_form.html.haml
+++ b/app/views/projects/settings/integrations/_form.html.haml
@@ -14,13 +14,14 @@
 - if integration.to_param === 'slack'
   = render 'shared/integrations/slack_notifications_deprecation_alert'
 
-%h2.gl-mb-0.gl-display-flex.gl-align-items-center.gl-gap-3
+.gl-display-flex.gl-align-items-center.gl-gap-3
   = render Pajamas::AvatarComponent.new(integration, size: 64, alt: '')
-  = integration.title
-  - if integration.operating?
-    = render Pajamas::BadgeComponent.new(_('Active'), variant: 'success', icon: 'status-success')
-  - elsif integration.persisted?
-    = render Pajamas::BadgeComponent.new(_('Inactive'), variant: 'neutral', icon: 'status-paused')
+  %h2.gl-m-0
+    = integration.title
+    - if integration.operating?
+      = render Pajamas::BadgeComponent.new(_('Active'), variant: 'success', icon: 'status-success')
+    - elsif integration.persisted?
+      = render Pajamas::BadgeComponent.new(_('Inactive'), variant: 'neutral', icon: 'status-paused')
 
 = render 'shared/integration_settings', integration: integration
 - if lookup_context.template_exists?('show', "shared/integrations/#{integration.to_param}", true)
diff --git a/app/views/projects/settings/merge_requests/show.html.haml b/app/views/projects/settings/merge_requests/show.html.haml
index 01af028f30c..e877be704a2 100644
--- a/app/views/projects/settings/merge_requests/show.html.haml
+++ b/app/views/projects/settings/merge_requests/show.html.haml
@@ -2,7 +2,7 @@
 - page_title _('Merge requests')
 - @force_desktop_expanded_sidebar = true
 
-%section.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings.expanded{ class: [('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)], data: { qa_selector: 'merge_request_settings_content' } }
+%section.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings.expanded{ class: [('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)], data: { testid: 'merge-request-settings-content' } }
   .settings-header
     %h4= _('Merge requests')
     = render_if_exists 'projects/settings/merge_requests/merge_request_settings_description_text'
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 58e86ebffa0..7ff798d7324 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -6,6 +6,6 @@
 #js-snippet-view{ data: { 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet), 'can-report-spam': @snippet.submittable_as_spam_by?(current_user).to_s } }
 
 .gl-px-0.gl-py-2
-  = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet)
+  = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet), new_custom_emoji_path: new_custom_emoji_path(@project.group)
 
 #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index a4ed19c2fc9..37f27aa7caf 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,5 +1,7 @@
+- add_page_specific_style 'page_bundles/projects'
+
 .tree-ref-container.gl-display-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
-  .tree-ref-holder.gl-max-w-26{ data: { qa_selector: 'ref_dropdown_container' } }
+  .tree-ref-holder.gl-max-w-26{ data: { testid: 'ref-dropdown-container' } }
     #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
 
   #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
@@ -10,6 +12,7 @@
     = render_if_exists 'projects/tree/lock_link'
     #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
 
+    = render 'projects/buttons/compare', project: @project, ref: @ref, root_ref: @repository&.root_ref
     = render 'projects/find_file_link'
     = render 'shared/web_ide_button', blob: nil
     = render 'projects/buttons/download', project: @project, ref: @ref
diff --git a/app/views/projects/work_items/index.html.haml b/app/views/projects/work_items/show.html.haml
index 01b27eed267..7e0bddf1b5d 100644
--- a/app/views/projects/work_items/index.html.haml
+++ b/app/views/projects/work_items/show.html.haml
@@ -1,4 +1,4 @@
-- page_title "##{request.params['work_items_path']}"
+- page_title "##{request.params['iid']}"
 - add_to_breadcrumbs _("Issues"), project_issues_path(@project)
 - add_page_specific_style 'page_bundles/work_items'
 - @gfm_form = true
diff --git a/app/views/protected_branches/shared/_dropdown.html.haml b/app/views/protected_branches/shared/_dropdown.html.haml
index c5dbf8991cd..678c2a1631d 100644
--- a/app/views/protected_branches/shared/_dropdown.html.haml
+++ b/app/views/protected_branches/shared/_dropdown.html.haml
@@ -6,13 +6,13 @@
                options: { toggle_class: "js-protected-branch-select js-filter-submit wide monospace #{toggle_classes}",
                           filter: true,
                           dropdown_class: "dropdown-menu-selectable git-revision-dropdown",
-                          dropdown_qa_selector: "protected_branch_dropdown_content",
+                          dropdown_testid: "protected-branch-dropdown-content",
                           placeholder: _("Search protected branches"),
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
                                   selected: params[:protected_branch_name],
                                   project_id: @project.try(:id),
-                                  qa_selector: "protected_branch_dropdown" } }) do
+                                  testid: "protected-branch-dropdown" } }) do
 
   %ul.dropdown-footer-list
     %li
diff --git a/app/views/registrations/welcome/show.html.haml b/app/views/registrations/welcome/show.html.haml
deleted file mode 100644
index 0f161855cdb..00000000000
--- a/app/views/registrations/welcome/show.html.haml
+++ /dev/null
@@ -1,43 +0,0 @@
-- @html_class = "subscriptions-layout-html"
-- page_title _('Your profile')
-- add_page_specific_style 'page_bundles/signup'
-- add_page_specific_style 'page_bundles/login'
-- gitlab_experience_text = _('To personalize your GitLab experience, we\'d like to know a bit more about you')
-- content_for :page_specific_javascripts do
-  = render "layouts/google_tag_manager_head"
-  = render "layouts/one_trust"
-  = render "layouts/bizible"
-= render "layouts/google_tag_manager_body"
-
-.row.gl-flex-grow-1
-  .d-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full.gl-px-5.gl-pb-5
-    .edit-profile.login-page.d-flex.flex-column.gl-align-items-center
-      %h2.gl-text-center= html_escape(_('Welcome to GitLab,%{br_tag}%{name}!')) % { name: html_escape(current_user.first_name), br_tag: '<br/>'.html_safe }
-      - if Gitlab.com?
-        %p.gl-text-center= html_escape(_('%{gitlab_experience_text}. We won\'t share this information with anyone.')) % { gitlab_experience_text: gitlab_experience_text }
-      - else
-        %p.gl-text-center= html_escape(_('%{gitlab_experience_text}. Don\'t worry, this information isn\'t shared outside of your self-managed GitLab instance.')) % { gitlab_experience_text: gitlab_experience_text }
-      = gitlab_ui_form_for(current_user,
-        url: users_sign_up_welcome_path(welcome_update_params),
-        html: { class: 'gl-w-full! gl-p-5 js-users-signup-welcome',
-                'aria-live' => 'assertive',
-                data: { testid: 'welcome-form' } }) do |f|
-        = render Pajamas::CardComponent.new do |c|
-          - c.with_body do
-            .devise-errors
-              = render 'devise/shared/error_messages', resource: current_user
-            .row
-              .form-group.col-sm-12
-                = f.label :role, _('Role'), class: 'label-bold'
-                = f.select :role, ::User.roles.keys.map { |role| [role.titleize, role] }, { include_blank: _('Select a role') }, class: 'form-control js-user-role-dropdown', required: true, data: { qa_selector: 'role_dropdown' }
-            = render_if_exists "registrations/welcome/jobs_to_be_done", f: f
-            = render_if_exists "registrations/welcome/setup_for_company", f: f
-            = render_if_exists "registrations/welcome/joining_project"
-            = render_if_exists "registrations/welcome/opt_in_to_email"
-            .row
-              .form-group.col-sm-12.gl-mb-0
-                - if partial_exists? "registrations/welcome/button"
-                  = render "registrations/welcome/button"
-                - else
-                  = render Pajamas::ButtonComponent.new(block: true, type: :submit, variant: :confirm, button_options: { class: 'gl-mb-0', data: { qa_selector: 'get_started_button' }}) do
-                    = _('Get started!')
diff --git a/app/views/search/results/_error.html.haml b/app/views/search/results/_error.html.haml
index f0d9283c620..33e74b08dde 100644
--- a/app/views/search/results/_error.html.haml
+++ b/app/views/search/results/_error.html.haml
@@ -1,7 +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'
+      = image_tag 'illustrations/empty-state/empty-search-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/_timeout.html.haml b/app/views/search/results/_timeout.html.haml
index 740e2bedd54..530096ead43 100644
--- a/app/views/search/results/_timeout.html.haml
+++ b/app/views/search/results/_timeout.html.haml
@@ -1,7 +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'
+      = image_tag 'illustrations/empty-state/empty-search-md.svg'
   %div
     %h4.gl-text-center.gl-font-weight-bold= _('Your search timed out')
     %p.gl-text-center= _('To resolve this, try to:')
diff --git a/app/views/search/show.html.haml b/app/views/search/show.html.haml
index 2fd6e4a5ca5..9c1f4c8643f 100644
--- a/app/views/search/show.html.haml
+++ b/app/views/search/show.html.haml
@@ -21,7 +21,7 @@
   %h1.page-title.gl-font-size-h-display.gl-mr-5= _('Search')
   = render_if_exists 'search/form_elasticsearch', attrs: { class: 'mb-2 mb-sm-0 align-self-center' }
 
-#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 } }
+#js-search-topbar{ data: { "group-initial-json": group_attributes.to_json, "project-initial-json": project_attributes.to_json, "default-branch-name": @project&.default_branch } }
 .results.gl-lg-display-flex.gl-mt-0
   #js-search-sidebar{ class: search_bar_classes, data: { navigation_json: search_navigation_json, search_type: search_service.search_type } }
   - if @search_term
diff --git a/app/views/shared/_broadcast_message.html.haml b/app/views/shared/_broadcast_message.html.haml
index 2f470d5ef53..12571ef5b73 100644
--- a/app/views/shared/_broadcast_message.html.haml
+++ b/app/views/shared/_broadcast_message.html.haml
@@ -24,7 +24,7 @@
 - else
   - notification_class = "js-broadcast-notification-#{message.id}"
   - notification_class << ' preview' if preview
-  .gl-broadcast-message.broadcast-notification-message.gl-mt-3{ role: "alert", class: notification_class, data: { qa_selector: 'broadcast_notification_container' } }
+  .gl-broadcast-message.broadcast-notification-message.gl-mt-3{ role: "alert", class: notification_class, data: { testid: 'broadcast-notification-container' } }
     .gl-broadcast-message-content
       .gl-broadcast-message-icon
         = sprite_icon(icon_name, css_class: 'vertical-align-text-top')
@@ -38,4 +38,4 @@
       = render Pajamas::ButtonComponent.new(category: :tertiary,
         icon: 'close',
         size: :small,
-        button_options: { class: 'js-dismiss-current-broadcast-notification', 'aria-label': _('Close'), data: { id: message.id, expire_date: message.ends_at.iso8601, qa_selector: 'close_button' } })
+        button_options: { class: 'js-dismiss-current-broadcast-notification', 'aria-label': _('Close'), data: { id: message.id, expire_date: message.ends_at.iso8601, testid: 'close-button' } })
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index dde4ec3cf52..4b39ec52837 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -5,18 +5,18 @@
         %span.js-clone-dropdown-label
           = enabled_protocol_button(container, enabled_protocol)
     - else
-      %a#clone-dropdown.input-group-text.gl-button.btn.btn-default.btn-icon.clone-dropdown-btn{ href: '#', data: { toggle: 'dropdown', qa_selector: 'clone_dropdown' } }
+      %a#clone-dropdown.input-group-text.gl-button.btn.btn-default.btn-icon.clone-dropdown-btn{ href: '#', data: { toggle: 'dropdown', testid: 'clone-dropdown' } }
         %span.js-clone-dropdown-label
           = default_clone_protocol.upcase
         = sprite_icon('chevron-down', css_class: 'gl-icon')
-      %ul.dropdown-menu.dropdown-menu-selectable.clone-options-dropdown{ data: { qa_selector: 'clone_dropdown_content' } }
+      %ul.dropdown-menu.dropdown-menu-selectable.clone-options-dropdown{ data: { testid: 'clone-dropdown-content' } }
         %li
           = ssh_clone_button(container)
         %li
           = http_clone_button(container)
         = render_if_exists 'shared/kerberos_clone_button', container: container
 
-  = text_field_tag :clone_url, default_url_to_repo(container), class: "js-select-on-focus btn gl-button", readonly: true, aria: { label: _('Repository clone URL') }, data: { qa_selector: 'clone_url_content' }
+  = text_field_tag :clone_url, default_url_to_repo(container), class: "js-select-on-focus btn gl-button", readonly: true, aria: { label: _('Repository clone URL') }, data: { testid: 'clone-url-content' }
   .input-group-append
     = clipboard_button(target: '#clone_url', title: _("Copy URL"), variant: :default, category: :primary, size: :medium)
 
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index bb21c4a28fd..ceacd5c48cd 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -6,7 +6,7 @@
 - toggle_subscription_path = toggle_subscription_label_path(label, @project) if current_user
 - tooltip_title = label_status_tooltip(label, status) if status
 
-%li.label-list-item.gl-list-style-none{ id: label_css_id, data: { id: label.id } }
+%li.js-label-list-item.gl-list-style-none.gl-border-b.gl-last-of-type-border-b-0{ id: label_css_id, data: { id: label.id } }
   .label-content.gl-pl-5.gl-pr-3.gl-py-4.gl-rounded-base{ class: "#{ 'gl-py-3' if force_priority }" }
     = render "shared/label_row", label: label, force_priority: force_priority
     %ul.label-actions-list
diff --git a/app/views/shared/_logo.svg b/app/views/shared/_logo.svg
index dfc35856366..df65de87fb9 100644
--- a/app/views/shared/_logo.svg
+++ b/app/views/shared/_logo.svg
@@ -1,4 +1,4 @@
-<svg role="img" class="tanuki-logo" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg aria-hidden="true" role="img" class="tanuki-logo" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path class="tanuki-shape tanuki" d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
         fill="#E24329"/>
   <path class="tanuki-shape right-cheek" d="m24.507 9.5-.034-.09a11.44 11.44 0 0 0-4.56 2.051l-7.447 5.632 4.742 3.584 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
diff --git a/app/views/shared/_logo_with_black_text.svg b/app/views/shared/_logo_with_black_text.svg
index f5b0b70618b..bf59618bade 100644
--- a/app/views/shared/_logo_with_black_text.svg
+++ b/app/views/shared/_logo_with_black_text.svg
@@ -1,4 +1,4 @@
-<svg class="tanuki-logo" width="111" height="24" viewBox="0 0 111 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg aria-hidden="true" class="tanuki-logo" width="111" height="24" viewBox="0 0 111 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path class="logo-text" d="M44.814 9.042h3.645c-.608-3.875-3.963-6.574-8.33-6.574-5.166 0-9.043 3.798-9.043 10.16 0 6.248 3.703 10.123 9.15 10.123 4.887 0 8.386-3.144 8.386-8.234v-2.37h-8.01v2.794h4.55c-.058 2.816-1.938 4.599-4.908 4.599-3.305 0-5.57-2.477-5.57-6.95 0-4.445 2.303-6.913 5.494-6.913 2.38 0 4.01 1.272 4.636 3.365Zm6.218 13.438h3.49V7.68h-3.49v14.8Zm1.76-17.151c1.109 0 2.014-.85 2.014-1.89s-.905-1.9-2.014-1.9c-1.109 0-2.024.849-2.024 1.9s.9 1.89 2.017 1.89h.007ZM64.971 7.68H62.05V4.126h-3.49v3.556h-2.1v2.699h2.1v8.233c-.018 2.786 2.007 4.16 4.628 4.079a7.089 7.089 0 0 0 2.055-.348l-.59-2.73a4.247 4.247 0 0 1-1.02.137c-.878 0-1.582-.309-1.582-1.717v-7.662h2.921V7.68Zm2.701 14.8h12.272v-2.998H71.25V2.737h-3.578V22.48Zm18.957.3c2.323 0 3.71-1.09 4.347-2.333h.115v2.033h3.36v-9.91c0-3.913-3.19-5.09-6.016-5.09-3.113 0-5.504 1.388-6.275 4.087l3.26.464c.345-1.013 1.329-1.88 3.04-1.88 1.62 0 2.506.829 2.506 2.285v.057c0 1.002-1.05 1.051-3.664 1.33-2.872.309-5.619 1.166-5.619 4.502-.01 2.912 2.12 4.455 4.946 4.455Zm1.147-2.56c-1.456 0-2.498-.666-2.498-1.948 0-1.34 1.167-1.899 2.72-2.121.917-.125 2.75-.357 3.2-.722v1.744c.01 1.643-1.321 3.042-3.422 3.042v.005Zm9.244 2.26h3.433v-2.332h.201c.551 1.08 1.698 2.593 4.244 2.593 3.489 0 6.102-2.768 6.102-7.644 0-4.936-2.69-7.616-6.112-7.616-2.613 0-3.702 1.57-4.234 2.641h-.147V2.737h-3.486V22.48Zm3.423-7.403c0-2.88 1.234-4.734 3.48-4.734 2.323 0 3.52 1.976 3.52 4.734 0 2.759-1.214 4.8-3.52 4.8-2.227 0-3.48-1.928-3.48-4.8Z"
         fill="#171321"/>
   <path class="tanuki-shape tanuki" d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
diff --git a/app/views/shared/_logo_with_white_text.svg b/app/views/shared/_logo_with_white_text.svg
index d0067538058..b47c7c55d59 100644
--- a/app/views/shared/_logo_with_white_text.svg
+++ b/app/views/shared/_logo_with_white_text.svg
@@ -1,4 +1,4 @@
-<svg class="tanuki-logo" width="111" height="24" viewBox="0 0 111 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg aria-hidden="true" class="tanuki-logo" width="111" height="24" viewBox="0 0 111 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path class="logo-text" d="M44.814 9.042h3.645c-.608-3.875-3.963-6.574-8.33-6.574-5.166 0-9.043 3.798-9.043 10.16 0 6.248 3.703 10.123 9.15 10.123 4.887 0 8.386-3.144 8.386-8.234v-2.37h-8.01v2.794h4.55c-.058 2.816-1.938 4.599-4.908 4.599-3.305 0-5.57-2.477-5.57-6.95 0-4.445 2.303-6.913 5.494-6.913 2.38 0 4.01 1.272 4.636 3.365Zm6.218 13.438h3.49V7.68h-3.49v14.8Zm1.76-17.151c1.109 0 2.014-.85 2.014-1.89s-.905-1.9-2.014-1.9c-1.109 0-2.024.849-2.024 1.9s.9 1.89 2.017 1.89h.007ZM64.971 7.68H62.05V4.126h-3.49v3.556h-2.1v2.699h2.1v8.233c-.018 2.786 2.007 4.16 4.628 4.079a7.089 7.089 0 0 0 2.055-.348l-.59-2.73a4.247 4.247 0 0 1-1.02.137c-.878 0-1.582-.309-1.582-1.717v-7.662h2.921V7.68Zm2.701 14.8h12.272v-2.998H71.25V2.737h-3.578V22.48Zm18.957.3c2.323 0 3.71-1.09 4.347-2.333h.115v2.033h3.36v-9.91c0-3.913-3.19-5.09-6.016-5.09-3.113 0-5.504 1.388-6.275 4.087l3.26.464c.345-1.013 1.329-1.88 3.04-1.88 1.62 0 2.506.829 2.506 2.285v.057c0 1.002-1.05 1.051-3.664 1.33-2.872.309-5.619 1.166-5.619 4.502-.01 2.912 2.12 4.455 4.946 4.455Zm1.147-2.56c-1.456 0-2.498-.666-2.498-1.948 0-1.34 1.167-1.899 2.72-2.121.917-.125 2.75-.357 3.2-.722v1.744c.01 1.643-1.321 3.042-3.422 3.042v.005Zm9.244 2.26h3.433v-2.332h.201c.551 1.08 1.698 2.593 4.244 2.593 3.489 0 6.102-2.768 6.102-7.644 0-4.936-2.69-7.616-6.112-7.616-2.613 0-3.702 1.57-4.234 2.641h-.147V2.737h-3.486V22.48Zm3.423-7.403c0-2.88 1.234-4.734 3.48-4.734 2.323 0 3.52 1.976 3.52 4.734 0 2.759-1.214 4.8-3.52 4.8-2.227 0-3.48-1.928-3.48-4.8Z"
         fill="#fff"/>
   <path class="tanuki-shape tanuki" d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
diff --git a/app/views/shared/_zen.html.haml b/app/views/shared/_zen.html.haml
index 05bee9e4d42..039db4eec59 100644
--- a/app/views/shared/_zen.html.haml
+++ b/app/views/shared/_zen.html.haml
@@ -2,7 +2,7 @@
 - current_text ||= nil
 - supports_autocomplete = local_assigns.fetch(:supports_autocomplete, true)
 - supports_quick_actions = local_assigns.fetch(:supports_quick_actions, false)
-- qa_selector = local_assigns.fetch(:qa_selector, '')
+- testid = local_assigns.fetch(:testid, '')
 - autofocus = local_assigns.fetch(:autofocus, false)
 
 .zen-backdrop
@@ -14,9 +14,9 @@
       dir: 'auto',
       data: { supports_quick_actions: supports_quick_actions,
         supports_autocomplete: supports_autocomplete,
-        qa_selector: qa_selector,
+        testid: testid,
         autofocus: autofocus }
   - else
-    = text_area_tag attr, current_text, data: { qa_selector: qa_selector }, class: classes, placeholder: placeholder
+    = text_area_tag attr, current_text, data: { testid: testid }, class: classes, placeholder: placeholder
   %a.zen-control.zen-control-leave.js-zen-leave.gl-text-gray-500{ href: "#" }
     = sprite_icon('minimize')
diff --git a/app/views/shared/boards/_show.html.haml b/app/views/shared/boards/_show.html.haml
index e5aa4c58da1..882730f536d 100644
--- a/app/views/shared/boards/_show.html.haml
+++ b/app/views/shared/boards/_show.html.haml
@@ -15,5 +15,6 @@
 
 - page_title("#{board.name}", _("Boards"))
 - add_page_specific_style 'page_bundles/boards'
+- add_page_specific_style 'page_bundles/labels'
 
 #js-issuable-board-app{ data: board_data }
diff --git a/app/views/shared/doorkeeper/applications/_show.html.haml b/app/views/shared/doorkeeper/applications/_show.html.haml
index d309a335166..9bf29f3ce64 100644
--- a/app/views/shared/doorkeeper/applications/_show.html.haml
+++ b/app/views/shared/doorkeeper/applications/_show.html.haml
@@ -8,7 +8,7 @@
       %td
         .clipboard-group
           .input-group
-            %input.label.label-monospace.monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true, data: { qa_selector: 'application_id_field' } }
+            %input.label.label-monospace.monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true, data: { testid: 'application-id-field' } }
             .input-group-append
               = clipboard_button(target: "#application_id", title: _("Copy ID"), category: :primary, size: :medium)
     %tr
@@ -48,4 +48,4 @@
   = render 'shared/doorkeeper/applications/delete_form', path: delete_path
 
 -# Create a hidden field to save the ID of application created
-= hidden_field_tag(:id_of_application, @application.id, data: { qa_selector: 'id_of_application_field' })
+= hidden_field_tag(:id_of_application, @application.id, data: { testid: 'id-of-application-field' })
diff --git a/app/views/shared/empty_states/_labels.html.haml b/app/views/shared/empty_states/_labels.html.haml
index 4d2127c0161..9dd9cdcd051 100644
--- a/app/views/shared/empty_states/_labels.html.haml
+++ b/app/views/shared/empty_states/_labels.html.haml
@@ -1,6 +1,6 @@
 .row.empty-state.labels
   .col-12
-    .svg-content.svg-150{ data: { qa_selector: 'label_svg_content' } }
+    .svg-content.svg-150{ data: { testid: 'label-svg-content' } }
       = image_tag 'illustrations/empty-state/empty-labels-md.svg'
   .col-12
     .text-content
diff --git a/app/views/shared/empty_states/_merge_requests.html.haml b/app/views/shared/empty_states/_merge_requests.html.haml
index 5b377818c6e..5a96b51be61 100644
--- a/app/views/shared/empty_states/_merge_requests.html.haml
+++ b/app/views/shared/empty_states/_merge_requests.html.haml
@@ -5,7 +5,7 @@
 - is_closed_state = params[:state] == 'closed'
 - can_create_merge_request = merge_request_source_project_for_project(@project)
 
-.row.empty-state.merge-requests
+.row.empty-state.merge-requests{ data: { testid: 'issuable-empty-state' } }
   .col-12
     .svg-content.svg-150
       = image_tag 'illustrations/empty-state/empty-merge-requests-md.svg', { auto_dark: true }
@@ -37,4 +37,4 @@
           = _("Interested parties can even contribute by pushing commits if they want to.")
         - if button_path
           .text-center
-            = link_button_to _('New merge request'), button_path, title: _('New merge request'), id: 'new_merge_request_link', data: { qa_selector: "new_merge_request_button" }, variant: :confirm
+            = link_button_to _('New merge request'), button_path, title: _('New merge request'), id: 'new_merge_request_link', data: { testid: "new-merge-request-button" }, variant: :confirm
diff --git a/app/views/shared/empty_states/_priority_labels.html.haml b/app/views/shared/empty_states/_priority_labels.html.haml
index 688df1705aa..ad9dee10205 100644
--- a/app/views/shared/empty_states/_priority_labels.html.haml
+++ b/app/views/shared/empty_states/_priority_labels.html.haml
@@ -1,5 +1,5 @@
 .text-center.gl-mt-1.gl-mb-5
-  .svg-content{ data: { qa_selector: 'label_svg_content' } }
+  .svg-content{ data: { testid: 'label-svg-content' } }
     = image_tag 'illustrations/empty-state/empty-labels-starred-md.svg'
   - if can?(current_user, :admin_label, @project)
     %h5.gl-my-0
diff --git a/app/views/shared/empty_states/_snippets.html.haml b/app/views/shared/empty_states/_snippets.html.haml
index 6fe36d75453..a2457fb0810 100644
--- a/app/views/shared/empty_states/_snippets.html.haml
+++ b/app/views/shared/empty_states/_snippets.html.haml
@@ -2,7 +2,7 @@
 
 .row.empty-state
   .col-12
-    .svg-content.svg-150{ data: { qa_selector: 'svg_content' } }
+    .svg-content.svg-150{ data: { testid: 'svg-content' } }
       = image_tag 'illustrations/empty-state/empty-snippets-md.svg'
     .text-content.gl-text-center.gl-pt-0
       - if current_user
@@ -12,7 +12,7 @@
           = s_('SnippetsEmptyState|Store, share, and embed small pieces of code and text.')
         .gl-mt-3<
           - if button_path
-            = link_button_to s_('SnippetsEmptyState|New snippet'), button_path, title: s_('SnippetsEmptyState|New snippet'), id: 'new_snippet_link', data: { qa_selector: 'create_first_snippet_link' }, variant: :confirm
+            = link_button_to s_('SnippetsEmptyState|New snippet'), button_path, title: s_('SnippetsEmptyState|New snippet'), id: 'new_snippet_link', data: { testid: 'create-first-snippet-link' }, variant: :confirm
           = link_button_to s_('SnippetsEmptyState|Documentation'), help_page_path('user/snippets.md'), title: s_('SnippetsEmptyState|Documentation')
       - else
         %h4.gl-text-center= s_('SnippetsEmptyState|There are no snippets to show.')
diff --git a/app/views/shared/empty_states/_wikis.html.haml b/app/views/shared/empty_states/_wikis.html.haml
index 567c4a2d444..e152390b0df 100644
--- a/app/views/shared/empty_states/_wikis.html.haml
+++ b/app/views/shared/empty_states/_wikis.html.haml
@@ -4,7 +4,7 @@
 
 - if !hide_create && can?(current_user, :create_wiki, @wiki.container)
   - create_path = wiki_page_path(@wiki, params[:id], view: 'create')
-  - create_link = link_button_to s_('WikiEmpty|Create your first page'), create_path, title: s_('WikiEmpty|Create your first page'), data: { qa_selector: 'create_first_page_link' }, variant: :confirm
+  - create_link = link_button_to s_('WikiEmpty|Create your first page'), create_path, title: s_('WikiEmpty|Create your first page'), data: { testid: 'create-first-page-link' }, variant: :confirm
 
   = render layout: layout_path, locals: { image_path: 'illustrations/empty-state/empty-wiki-md.svg' } do
     %h4.text-left
diff --git a/app/views/shared/empty_states/_wikis_layout.html.haml b/app/views/shared/empty_states/_wikis_layout.html.haml
index 03054c959fd..831bdcac073 100644
--- a/app/views/shared/empty_states/_wikis_layout.html.haml
+++ b/app/views/shared/empty_states/_wikis_layout.html.haml
@@ -1,6 +1,6 @@
 .row.empty-state.empty-state-wiki
   .col-12
-    .svg-content.svg-150{ data: { qa_selector: 'svg_content' } }
+    .svg-content.svg-150{ data: { testid: 'svg-content' } }
       = image_tag image_path
   .col-12
     .text-content.text-center
diff --git a/app/views/shared/file_hooks/_index.html.haml b/app/views/shared/file_hooks/_index.html.haml
index 9f1b11d6ab5..478f047e9cc 100644
--- a/app/views/shared/file_hooks/_index.html.haml
+++ b/app/views/shared/file_hooks/_index.html.haml
@@ -23,7 +23,7 @@
           - if file_hooks.any?
             %ul.content-list{ class: 'gl-my-n3!' }
               - file_hooks.each do |file|
-                %li.label-list-item
+                %li.gl-border-b.gl-last-of-type-border-b-0
                   .monospace
                     = File.basename(file)
           - else
diff --git a/app/views/shared/integrations/edit.html.haml b/app/views/shared/integrations/edit.html.haml
index 9d613d2ad94..3361dfba5d2 100644
--- a/app/views/shared/integrations/edit.html.haml
+++ b/app/views/shared/integrations/edit.html.haml
@@ -2,8 +2,10 @@
 - breadcrumb_title @integration.title
 - page_title @integration.title, _('Integrations')
 
-%h2.gl-mb-4
-  = @integration.title
+.gl-display-flex.gl-align-items-center.gl-gap-3.gl-mt-5
+  = render Pajamas::AvatarComponent.new(@integration, size: 64, alt: '')
+  %h2.gl-m-0
+    = @integration.title
 
 = render 'shared/integrations/tabs', integration: @integration, active_tab: 'edit' do
   = render 'shared/integration_settings', integration: @integration
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 5aaae5eb4ec..f1e2b8fff47 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
@@ -48,7 +48,7 @@
   .form-group
     = label_tag :request_url, s_('MattermostService|Request URL'), class: 'col-12 col-form-label label-bold'
     .col-12.input-group
-      = text_field_tag :request_url, service_trigger_url(integration), class: 'form-control form-control-sm', readonly: 'readonly'
+      = text_field_tag :request_url, integration_trigger_url(integration), class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
         = clipboard_button(target: '#request_url', category: :primary, size: :medium)
 
diff --git a/app/views/shared/integrations/slack_slash_commands/_help.html.haml b/app/views/shared/integrations/slack_slash_commands/_help.html.haml
index defaf50efea..fd30c5b0da3 100644
--- a/app/views/shared/integrations/slack_slash_commands/_help.html.haml
+++ b/app/views/shared/integrations/slack_slash_commands/_help.html.haml
@@ -38,9 +38,9 @@
         .form-group
           = label_tag :url, 'URL', class: 'col-12 col-form-label label-bold'
           .col-12.input-group
-            = text_field_tag :url, service_trigger_url(integration), class: 'form-control form-control-sm', readonly: 'readonly'
+            = text_field_tag :url, integration_trigger_url(integration), class: 'form-control form-control-sm', readonly: 'readonly'
             .input-group-append
-              = deprecated_clipboard_button(target: '#url', class: 'input-group-text')
+              = clipboard_button(target: '#url', category: :primary, size: :medium)
 
         .form-group
           = label_tag nil, _('Method'), class: 'col-12 col-form-label label-bold'
@@ -51,7 +51,7 @@
           .col-12.input-group
             = text_field_tag :customize_name, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly'
             .input-group-append
-              = deprecated_clipboard_button(target: '#customize_name', class: 'input-group-text')
+              = clipboard_button(target: '#customize_name', category: :primary, size: :medium)
 
         .form-group
           = label_tag nil, _('Customize icon'), class: 'col-12 col-form-label label-bold'
@@ -68,21 +68,21 @@
           .col-12.input-group
             = text_field_tag :autocomplete_description, run_actions_text.html_safe, class: 'form-control form-control-sm', readonly: 'readonly'
             .input-group-append
-              = deprecated_clipboard_button(target: '#autocomplete_description', class: 'input-group-text')
+              = clipboard_button(target: '#autocomplete_description', category: :primary, size: :medium)
 
         .form-group
           = label_tag :autocomplete_usage_hint, _('Autocomplete usage hint'), class: 'col-12 col-form-label label-bold'
           .col-12.input-group
             = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly'
             .input-group-append
-              = deprecated_clipboard_button(target: '#autocomplete_usage_hint', class: 'input-group-text')
+              = clipboard_button(target: '#autocomplete_usage_hint', category: :primary, size: :medium)
 
         .form-group
           = label_tag :descriptive_label, _('Descriptive label'), class: 'col-12 col-form-label label-bold'
           .col-12.input-group
             = text_field_tag :descriptive_label, _('Perform common operations on GitLab project'), class: 'form-control form-control-sm', readonly: 'readonly'
             .input-group-append
-              = deprecated_clipboard_button(target: '#descriptive_label', class: 'input-group-text')
+              = clipboard_button(target: '#descriptive_label', category: :primary, size: :medium)
 
       %hr
 
diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml
index 3c4ee01d04f..286b3c7f66f 100644
--- a/app/views/shared/issuable/_label_dropdown.html.haml
+++ b/app/views/shared/issuable/_label_dropdown.html.haml
@@ -1,3 +1,4 @@
+- add_page_specific_style 'page_bundles/labels'
 - project = @target_project || @project
 - edit_context = local_assigns.fetch(:edit_context, nil) || project
 - show_create = local_assigns.fetch(:show_create, true)
@@ -11,7 +12,7 @@
 - dropdown_title = local_assigns.fetch(:dropdown_title, _('Filter by label'))
 - dropdown_data = label_dropdown_data(edit_context, labels: labels_filter_path_with_defaults(only_group_labels: edit_context.is_a?(Group)), default_label: _('Labels'))
 
-- dropdown_data.merge!(data_options, qa_selector: "issuable_label_dropdown")
+- dropdown_data.merge!(data_options, testid: "issuable-label-dropdown")
 - label_name = local_assigns.fetch(:label_name, _('Labels'))
 - no_default_styles = local_assigns.fetch(:no_default_styles, false)
 - classes << 'js-extra-options' if extra_options
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 93e1a53ccb4..1392c7ab89f 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -11,24 +11,28 @@
 - is_merge_request = issuable_type === 'merge_request'
 - moved_sidebar_enabled = moved_mr_sidebar_enabled?
 - is_merge_request_with_flag = is_merge_request && moved_sidebar_enabled
+- add_page_specific_style 'page_bundles/labels'
 
 %aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { always_show_toggle: true, signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class(is_merge_request_with_flag)} #{'right-sidebar-merge-requests' if is_merge_request_with_flag}", 'aria-live' => 'polite', 'aria-label': issuable_type }
   .issuable-sidebar{ class: "#{'is-merge-request' if is_merge_request_with_flag}" }
-    .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-lg-display-none!' if is_merge_request_with_flag}" }
+    .issuable-sidebar-header{ class: "gl-pb-4! #{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-lg-display-none!' if is_merge_request_with_flag}" }
       = render Pajamas::ButtonComponent.new(button_options: { class: "gutter-toggle float-right js-sidebar-toggle has-tooltip gl-shadow-none! #{'gl-display-block' if moved_sidebar_enabled}", type: 'button', 'aria-label' => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }) do
         = sidebar_gutter_toggle_icon
-      - if signed_in && !is_merge_request_with_flag
-        .js-sidebar-todo-widget-root{ data: { project_path: issuable_sidebar[:project_full_path], iid: issuable_sidebar[:iid], id: issuable_sidebar[:id] } }
+      - if signed_in
+        - if !is_merge_request_with_flag
+          .js-sidebar-todo-widget-root{ data: { project_path: issuable_sidebar[:project_full_path], iid: issuable_sidebar[:iid], id: issuable_sidebar[:id] } }
+        - if notifications_todos_buttons_enabled?
+          .js-sidebar-subscriptions-widget-root
 
     = form_for issuable_type, url: issuable_sidebar[:issuable_json_path], remote: true, html: { class: 'issuable-context-form inline-update js-issuable-update' } do |f|
-      .block.assignee{ class: "#{'gl-mt-3' if !signed_in && moved_sidebar_enabled}", data: { qa_selector: 'assignee_block_container', testid: 'assignee-block-container' } }
+      .block.assignee{ class: "#{'gl-mt-3' if !signed_in && moved_sidebar_enabled}", data: { testid: 'assignee-block-container' } }
         = render "shared/issuable/sidebar_assignees", issuable_sidebar: issuable_sidebar, assignees: assignees, signed_in: signed_in
 
       - if issuable_sidebar[:supports_severity]
         .js-sidebar-severity-widget-root
 
       - if reviewers
-        .block.reviewer{ data: { qa_selector: 'reviewers_block_container' } }
+        .block.reviewer{ data: { testid: 'reviewers-block-container' } }
           = render "shared/issuable/sidebar_reviewers", issuable_sidebar: issuable_sidebar, reviewers: reviewers, signed_in: signed_in
 
       - if issuable_sidebar[:supports_escalation]
@@ -42,7 +46,7 @@
       .js-sidebar-labels-widget-root{ data: sidebar_labels_data(issuable_sidebar, @project) }
 
       - if issuable_sidebar[:supports_milestone]
-        .block.milestone{ data: { qa_selector: 'milestone_block', testid: 'sidebar-milestones' } }
+        .block.milestone{ data: { testid: 'sidebar-milestones' } }
           .js-sidebar-milestone-widget-root{ data: { can_edit: can_edit_issuable.to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
 
       - if in_group_context_with_iterations
@@ -88,11 +92,11 @@
           - if is_merge_request && !moved_sidebar_enabled
             .sub-block.js-sidebar-source-branch
               .sidebar-collapsed-icon.js-dont-change-state
-                = deprecated_clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport', class: 'btn-clipboard gl-button btn-default-tertiary btn-icon btn-sm js-source-branch-copy')
+                = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport', class: 'js-source-branch-copy')
               .gl-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-mb-2.hide-collapsed
                 %span.gl-overflow-hidden.gl-text-overflow-ellipsis.gl-white-space-nowrap
                   = _('Source branch: %{source_branch_open}%{source_branch}%{source_branch_close}').html_safe % { source_branch_open: "<span class='gl-font-monospace' data-testid='ref-name' title='#{html_escape(source_branch)}'>".html_safe, source_branch_close: "</span>".html_safe, source_branch: html_escape(source_branch) }
-                = deprecated_clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport', class: 'btn-clipboard gl-button btn-default-tertiary btn-icon btn-sm js-source-branch-copy')
+                = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport', class: 'js-source-branch-copy')
 
       - if show_forwarding_email && !moved_sidebar_enabled
         .block
diff --git a/app/views/shared/issuable/_status_box.html.haml b/app/views/shared/issuable/_status_box.html.haml
deleted file mode 100644
index f2e4e22788a..00000000000
--- a/app/views/shared/issuable/_status_box.html.haml
+++ /dev/null
@@ -1,8 +0,0 @@
-- badge_text = state_name_with_icon(issuable)[0]
-- badge_icon = state_name_with_icon(issuable)[1]
-- badge_variant = issuable.open? ? :success : issuable.merged? ? :info : :danger
-- badge_classes = "js-mr-status-box gl-mr-3 gl-align-self-center"
-
-= gl_badge_tag({ variant: badge_variant, icon: badge_icon, icon_classes: 'gl-mr-0!' }, { class: badge_classes, data: { project_path: issuable.project.path_with_namespace, iid: issuable.iid, issuable_type: 'merge_request', state: issuable.state } }) do
-  %span.gl-display-none.gl-sm-display-block.gl-ml-2
-    = badge_text
diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml
index 1da0b82b634..a0ec7ca20ff 100644
--- a/app/views/shared/issuable/form/_metadata.html.haml
+++ b/app/views/shared/issuable/form/_metadata.html.haml
@@ -3,6 +3,7 @@
 - presenter = local_assigns.fetch(:presenter)
 - has_due_date = issuable.has_attribute?(:due_date)
 - form = local_assigns.fetch(:form)
+- add_page_specific_style 'page_bundles/labels'
 
 - if @add_related_issue
   .form-group
@@ -37,15 +38,7 @@
             .issuable-form-select-holder
               = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]"
 
-      - if Feature.enabled?(:visible_label_selection_on_metadata, project)
-        .js-issuable-form-label-selector{ data: issuable_label_selector_data(project, issuable) }
-      - else
-        .form-group.row
-          = form.label :label_ids, _('Labels'), class: "col-12"
-          = form.hidden_field :label_ids, multiple: true, value: ''
-          .col-12
-            .issuable-form-select-holder
-              = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false }, dropdown_title: "Select label"
+      .js-issuable-form-label-selector{ data: issuable_label_selector_data(project, issuable) }
 
       = render_if_exists "shared/issuable/form/merge_request_blocks", issuable: issuable, form: form
 
diff --git a/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml b/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml
index d25ef3f4e83..1167d68534f 100644
--- a/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml
+++ b/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml
@@ -8,4 +8,4 @@
       = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", 0, id: nil, data: { meta: '' }
 
     = dropdown_tag(users_dropdown_label(issuable.assignees), options: assignees_dropdown_options(issuable.to_ability_name))
-  = link_to _('Assign to me'), '#', class: "assign-to-me-link gl-white-space-nowrap gl-md-pl-3 #{'hide' if issuable.assignees.include?(current_user)}", data: { qa_selector: 'assign_to_me_link' }
+  = link_to _('Assign to me'), '#', class: "assign-to-me-link gl-white-space-nowrap gl-md-pl-3 #{'hide' if issuable.assignees.include?(current_user)}", data: { testid: 'assign-to-me-link' }
diff --git a/app/views/shared/issuable/form/_template_selector.html.haml b/app/views/shared/issuable/form/_template_selector.html.haml
index c870bb17a85..bad2f4fdfb0 100644
--- a/app/views/shared/issuable/form/_template_selector.html.haml
+++ b/app/views/shared/issuable/form/_template_selector.html.haml
@@ -3,7 +3,7 @@
 - return unless issuable && issuable_templates(ref_project, issuable.to_ability_name).any?
 
 .issuable-form-select-holder.selectbox.form-group
-  .js-issuable-selector-wrap{ data: { issuable_type: issuable.to_ability_name.pluralize, qa_selector: 'template_dropdown' } }
+  .js-issuable-selector-wrap{ data: { issuable_type: issuable.to_ability_name.pluralize, testid: 'template-dropdown' } }
     = template_dropdown_tag(issuable) do
       %ul.dropdown-footer-list
         %li
diff --git a/app/views/shared/labels/_form.html.haml b/app/views/shared/labels/_form.html.haml
index 53fbe3dac03..5ac172315be 100644
--- a/app/views/shared/labels/_form.html.haml
+++ b/app/views/shared/labels/_form.html.haml
@@ -1,3 +1,4 @@
+- add_page_specific_style 'page_bundles/labels'
 - show_lock_on_merge = local_assigns.fetch(:show_lock_on_merge, false)
 
 = gitlab_ui_form_for @label, as: :label, url: url, html: { class: 'label-form js-quick-submit js-requires-input' } do |f|
@@ -6,20 +7,20 @@
   .form-group.row
     .col-12
       = f.label :title
-      = f.text_field :title, class: "gl-form-input form-control js-label-title", required: true, autofocus: true, data: { qa_selector: 'label_title_field' }
+      = f.text_field :title, class: "gl-form-input form-control js-label-title", required: true, autofocus: true, data: { testid: 'label-title-field' }
     = render_if_exists 'shared/labels/create_label_help_text'
 
   .form-group.row
     .col-12
       = f.label :description, _("Description (optional)")
-      = f.text_area :description, class: "gl-form-input form-control js-quick-submit", rows: 4, data: { qa_selector: 'label_description_field' }
+      = f.text_area :description, class: "gl-form-input form-control js-quick-submit", rows: 4, data: { testid: 'label-description-field' }
   .form-group.row
     .col-12
       = f.label :color, _("Background color")
       .input-group
         .input-group-prepend
           %input.label-color-preview.gl-w-7.gl-h-full.gl-border-1.gl-border-solid.gl-border-gray-500.gl-border-r-0.gl-rounded-top-right-none.gl-rounded-bottom-right-none{ type: "color", placeholder: _('Select color') }
-        = f.text_field :color, class: "gl-form-input form-control", data: { qa_selector: 'label_color_field' }
+        = f.text_field :color, class: "gl-form-input form-control", data: { testid: 'label-color-field' }
       .form-text.text-muted
         = _('Select a color from the color picker or from the presets below.')
       = render_suggested_colors
@@ -35,7 +36,7 @@
       - if @label.persisted?
         = f.submit _('Save changes'), class: 'js-save-button gl-mr-2', pajamas_button: true
       - else
-        = f.submit _('Create label'), class: 'js-save-button gl-mr-2', data: { qa_selector: 'label_create_button' }, pajamas_button: true
+        = f.submit _('Create label'), class: 'js-save-button gl-mr-2', data: { testid: 'label-create-button' }, pajamas_button: true
       = render Pajamas::ButtonComponent.new(href: back_path) do
         = _('Cancel')
 
diff --git a/app/views/shared/labels/_nav.html.haml b/app/views/shared/labels/_nav.html.haml
index c82a22c73b8..21255e655ea 100644
--- a/app/views/shared/labels/_nav.html.haml
+++ b/app/views/shared/labels/_nav.html.haml
@@ -14,8 +14,8 @@
           = render Pajamas::ButtonComponent.new(icon: 'search', button_options: { type: "submit", "aria-label" => _('Submit search') })
     = render 'shared/labels/sort_dropdown'
     - if labels_or_filters && can_admin_label && @project
-      = render Pajamas::ButtonComponent.new(variant: :confirm, href: new_project_label_path(@project), button_options: { data: { qa_selector: 'create_new_label_button' } }) do
+      = render Pajamas::ButtonComponent.new(variant: :confirm, href: new_project_label_path(@project), button_options: { data: { testid: 'create-new-label-button' } }) do
         = _('New label')
     - if labels_or_filters && can_admin_label && @group
-      = render Pajamas::ButtonComponent.new(variant: :confirm, href: new_group_label_path(@group), button_options: { data: { qa_selector: 'create_new_label_button' } }) do
+      = render Pajamas::ButtonComponent.new(variant: :confirm, href: new_group_label_path(@group), button_options: { data: { testid: 'create-new-label-button' } }) do
         = _('New label')
diff --git a/app/views/shared/milestones/_description.html.haml b/app/views/shared/milestones/_description.html.haml
index 3774fb0869f..ff1224f89d0 100644
--- a/app/views/shared/milestones/_description.html.haml
+++ b/app/views/shared/milestones/_description.html.haml
@@ -1,14 +1,14 @@
 .detail-page-description.milestone-detail.gl-py-4
-  %h2.gl-m-0{ data: { qa_selector: "milestone_title_content" } }
+  %h2.gl-m-0{ data: { testid: "milestone-title-content" } }
     = markdown_field(milestone, :title)
-    .gl-font-sm.gl-text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { qa_selector: 'milestone_id_content' }, itemprop: 'identifier' }
+    .gl-font-sm.gl-text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ itemprop: 'identifier' }
       - if can?(current_user, :read_milestone, @milestone)
         %span.gl-display-inline-block.gl-vertical-align-middle
           = s_('MilestonePage|Milestone ID: %{milestone_id}') % { milestone_id: @milestone.id }
           = clipboard_button(title: s_('MilestonePage|Copy milestone ID'), text: @milestone.id)
 
   - if milestone.try(:description).present?
-    %div{ data: { qa_selector: "milestone_description_content" } }
+    %div{ data: { testid: "milestone-description-content" } }
       .description.md.gl-px-0.gl-pt-4{ class: ('js-task-list-container' if can?(current_user, :admin_milestone, milestone)), data: { lock_version: @milestone.lock_version } }
         = markdown_field(milestone, :description)
         -# This textarea is necessary for `task_list.js` to work.
diff --git a/app/views/shared/milestones/_form_dates.html.haml b/app/views/shared/milestones/_form_dates.html.haml
index 3e75775bf73..22bdcb1f80f 100644
--- a/app/views/shared/milestones/_form_dates.html.haml
+++ b/app/views/shared/milestones/_form_dates.html.haml
@@ -3,12 +3,12 @@
     = f.label :start_date, _('Start Date')
   %div
     .issuable-form-select-holder
-      = f.gitlab_ui_datepicker :start_date, data: { qa_selector: "start_date_field" }, placeholder: _('Select start date'), autocomplete: 'off'
+      = f.gitlab_ui_datepicker :start_date, data: { testid: "start-date-field" }, placeholder: _('Select start date'), autocomplete: 'off'
     %a.gl-white-space-nowrap.gl-pl-4.js-clear-start-date{ href: "#" }= _('Clear start date')
 .gl-form-group
   %div
     = f.label :due_date, _('Due Date')
   %div
     .issuable-form-select-holder
-      = f.gitlab_ui_datepicker :due_date, data: { qa_selector: "due_date_field" }, placeholder: _('Select due date'), autocomplete: 'off'
+      = f.gitlab_ui_datepicker :due_date, data: { testid: "due-date-field" }, placeholder: _('Select due date'), autocomplete: 'off'
     %a.gl-white-space-nowrap.gl-pl-4.js-clear-due-date{ href: "#" }= _('Clear due date')
diff --git a/app/views/shared/milestones/_labels_tab.html.haml b/app/views/shared/milestones/_labels_tab.html.haml
index 1e856bf4355..1abf4b46d09 100644
--- a/app/views/shared/milestones/_labels_tab.html.haml
+++ b/app/views/shared/milestones/_labels_tab.html.haml
@@ -1,3 +1,5 @@
+- add_page_specific_style 'page_bundles/labels'
+
 %ul.bordered-list.manage-labels-list
   - labels.each do |label|
     - options = { milestone_title: @milestone.title, label_name: label.title }
diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml
index c36d3a8b92b..6554f557c89 100644
--- a/app/views/shared/milestones/_milestone.html.haml
+++ b/app/views/shared/milestones/_milestone.html.haml
@@ -6,7 +6,7 @@
   .row
     .col-md-6
       .gl-mb-2
-        %strong{ data: { qa_selector: "milestone_link", qa_milestone_title: milestone.title } }
+        %strong{ data: { testid: "milestone-link", qa_milestone_title: milestone.title } }
           = link_to truncate(milestone.title, length: 100), milestone_path(milestone)
         - if @group || dashboard
           = " - #{milestone_type}"
diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml
index 9387d8d3ad1..7d1e9c06966 100644
--- a/app/views/shared/milestones/_sidebar.html.haml
+++ b/app/views/shared/milestones/_sidebar.html.haml
@@ -24,7 +24,7 @@
         - if @project && can?(current_user, :admin_milestone, @project)
           = link_to s_('MilestoneSidebar|Edit'), edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link float-right'
       .value
-        %span.value-content{ data: { qa_selector: 'start_date_content' } }
+        %span.value-content{ data: { testid: 'start-date-content' } }
           - if milestone.start_date
             %span.bold= milestone.start_date.to_fs(:medium)
           - else
@@ -61,7 +61,7 @@
         - if @project && can?(current_user, :admin_milestone, @project)
           = link_to s_('MilestoneSidebar|Edit'), edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link float-right'
       .value.hide-collapsed
-        %span.value-content{ data: { qa_selector: 'due_date_content' } }
+        %span.value-content{ data: { testid: 'due-date-content' } }
           - if milestone.due_date
             %span.bold= milestone.due_date.to_fs(:medium)
           - else
diff --git a/app/views/shared/notes/_comment_button.html.haml b/app/views/shared/notes/_comment_button.html.haml
index bbcd072c762..53205301ec7 100644
--- a/app/views/shared/notes/_comment_button.html.haml
+++ b/app/views/shared/notes/_comment_button.html.haml
@@ -1,5 +1,5 @@
 - noteable_name = @note.noteable.human_class_name
 
 .js-comment-type-dropdown.float-left.gl-sm-mr-3{ data: { noteable_name: noteable_name } }
-  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, button_options: { class: 'js-comment-button js-comment-submit-button', value: _('Comment'), data: { qa_selector: 'comment_button' }}) do
+  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, button_options: { class: 'js-comment-button js-comment-submit-button', value: _('Comment'), data: { testid: 'comment-button' }}) do
     = _('Comment')
diff --git a/app/views/shared/notes/_edit_form.html.haml b/app/views/shared/notes/_edit_form.html.haml
index 40a71aa53dc..d4dec49c367 100644
--- a/app/views/shared/notes/_edit_form.html.haml
+++ b/app/views/shared/notes/_edit_form.html.haml
@@ -4,13 +4,13 @@
     = hidden_field_tag :target_type, '', class: 'js-form-target-type'
     .flash-container
     = render layout: 'shared/md_preview', locals: { url: preview_markdown_path(project), referenced_users: true } do
-      = render 'shared/zen', attr: 'note[note]', classes: 'note-textarea js-note-text js-task-list-field', qa_selector: 'edit_note_field', placeholder: _("Write a comment or drag your files here…")
+      = render 'shared/zen', attr: 'note[note]', classes: 'note-textarea js-note-text js-task-list-field', testid: 'edit-note-field', placeholder: _("Write a comment or drag your files here…")
       = render 'shared/notes/hints'
 
     .note-form-actions.clearfix
       .settings-message.note-edit-warning.js-finish-edit-warning
         = _("Finish editing this message first!")
-      = render Pajamas::ButtonComponent.new(type: 'submit', variant: :confirm, button_options: { class: 'js-comment-save-button', data: { qa_selector: 'save_comment_button' } }) do
+      = render Pajamas::ButtonComponent.new(type: 'submit', variant: :confirm, button_options: { class: 'js-comment-save-button', data: { testid: 'save-comment-button' } }) do
         = _("Save comment")
       = render Pajamas::ButtonComponent.new(button_options: { class: 'note-edit-cancel' }) do
         = _("Cancel")
diff --git a/app/views/shared/notes/_form.html.haml b/app/views/shared/notes/_form.html.haml
index 9a5e9b2179f..d37d707e935 100644
--- a/app/views/shared/notes/_form.html.haml
+++ b/app/views/shared/notes/_form.html.haml
@@ -26,7 +26,7 @@
 
   .discussion-form-container.discussion-with-resolve-btn.flex-column.p-0
     = render layout: 'shared/md_preview', locals: { url: preview_url, referenced_users: true, supports_quick_actions: supports_quick_actions } do
-      = render 'shared/zen', f: f, qa_selector: 'note_field',
+      = render 'shared/zen', f: f, testid: 'note-field',
         attr: :note,
         classes: 'note-textarea js-note-text',
         placeholder: _("Write a comment or drag your files here…"),
@@ -38,5 +38,5 @@
     .note-form-actions.clearfix.gl-display-flex.gl-flex-wrap
       = render partial: 'shared/notes/comment_button'
 
-      %a.btn.gl-button.btn-cancel.js-close-discussion-note-form.hide{ role: "button", data: { cancel_text: _("Cancel") } }
+      = render Pajamas::ButtonComponent.new(button_options: { class: 'js-close-discussion-note-form hide' }) do
         = _('Cancel')
diff --git a/app/views/shared/notes/_note.html.haml b/app/views/shared/notes/_note.html.haml
index 95e0beee5e0..3e72a66561b 100644
--- a/app/views/shared/notes/_note.html.haml
+++ b/app/views/shared/notes/_note.html.haml
@@ -35,7 +35,7 @@
             %span.note-header-author-name.bold
               = note.author.name
             = user_status(note.author)
-            %spannote-headline-light{ data: { qa_selector: 'note_author_content' } }
+            %spannote-headline-light{ data: { testid: 'note-author-content' } }
               = note.author.to_reference
           %span.note-headline-ligh.note-headline-meta
             - if note.system
@@ -52,7 +52,7 @@
             - else
               = render 'projects/notes/actions', note: note, note_editable: note_editable
       .note-body{ class: note_editable ? 'js-task-list-container' : '' }
-        .note-text.md{ data: { qa_selector: 'note_content' } }
+        .note-text.md{ data: { testid: 'note-content' } }
           = markdown_field(note, :note)
         = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago')
         .original-note-content.hidden{ data: { post_url: note_url(note), target_id: note.noteable.id, target_type: note.noteable.class.name.underscore } }
diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml
index 0fed59aaff3..336fdedf89b 100644
--- a/app/views/shared/notes/_notes_with_form.html.haml
+++ b/app/views/shared/notes/_notes_with_form.html.haml
@@ -1,7 +1,7 @@
 - issuable = @issue || @merge_request
 - discussion_locked = issuable&.discussion_locked?
 
-%ul#notes-list.notes.main-notes-list.timeline{ data: { 'qa_selector': 'notes_list' } }
+%ul#notes-list.notes.main-notes-list.timeline{ data: { 'testid': 'notes-list' } }
   = render "shared/notes/notes"
 
 = render 'shared/notes/edit_form', project: @project
diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml
index a2c831bfd1c..14785870dc0 100644
--- a/app/views/shared/projects/_list.html.haml
+++ b/app/views/shared/projects/_list.html.haml
@@ -1,3 +1,4 @@
+- add_page_specific_style 'page_bundles/projects'
 - projects_limit = 20 unless local_assigns[:projects_limit]
 - avatar = true unless local_assigns[:avatar] == false
 - use_creator_avatar = false unless local_assigns[:use_creator_avatar] == true
@@ -27,7 +28,7 @@
 - explore_groups_button_label = _('Explore groups')
 - explore_groups_button_link = explore_groups_path
 
-.js-projects-list-holder{ data: { qa_selector: 'projects_list' } }
+.js-projects-list-holder{ data: { testid: 'projects-list' } }
   - if any_projects?(projects)
     - load_pipeline_status(projects) if pipeline_status
     - load_max_project_member_accesses(projects) # Prime cache used in shared/projects/project view rendered below
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index ac5e65747d5..2de4a9d7780 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -24,7 +24,7 @@
         - else
           = render Pajamas::AvatarComponent.new(project, size: 48, alt: '', class: 'gl-mr-5')
   .project-cell{ class: css_class }
-    .project-details.gl-pr-9.gl-sm-pr-0.gl-w-full.gl-display-flex.gl-flex-direction-column{ data: { qa_selector: 'project_content', qa_project_name: project.name } }
+    .project-details.gl-pr-9.gl-sm-pr-0.gl-w-full.gl-display-flex.gl-flex-direction-column{ data: { testid: 'project-content', qa_project_name: project.name } }
       .gl-display-flex.gl-align-items-center.gl-flex-wrap
         %h2.gl-font-base.gl-line-height-20.gl-my-0.gl-overflow-wrap-anywhere
           = link_to project_path(project), class: 'text-plain gl-mr-3 js-prefetch-document', title: project.name do
@@ -45,7 +45,7 @@
         - if !explore_projects_tab? && access&.nonzero?
           -# haml-lint:disable UnnecessaryStringOutput
           = ' ' # prevent haml from eating the space between elements
-          %span.user-access-role.gl-display-block.gl-m-0{ data: { qa_selector: 'user_role_content' } }= Gitlab::Access.human_access(access)
+          %span.user-access-role.gl-display-block.gl-m-0{ data: { testid: 'user-role-content' } }= localized_project_human_access(access)
 
         - if !explore_projects_tab?
           = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: project, additional_classes: 'gl-ml-3!'
diff --git a/app/views/shared/projects/_search_form.html.haml b/app/views/shared/projects/_search_form.html.haml
index 2388bf2f0be..de54cc2810b 100644
--- a/app/views/shared/projects/_search_form.html.haml
+++ b/app/views/shared/projects/_search_form.html.haml
@@ -2,7 +2,7 @@
 - admin_view ||= false
 - top_padding = admin_view ? 'gl-lg-pt-3' : ''
 
-= form_tag filter_projects_path, method: :get, class: "project-filter-form gl-display-flex! gl-flex-wrap gl-w-full gl-gap-3 #{top_padding}", 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 gl-w-full gl-gap-3 #{top_padding}", data: { testid: '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 gl-m-0!",
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index 6caadeb0ba4..9767f7929d0 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -1,13 +1,13 @@
 - link_project = local_assigns.fetch(:link_project, false)
 - notes_count = @noteable_meta_data[snippet.id].user_notes_count
 
-%li.snippet-row.py-3{ data: { qa_selector: 'snippet_link', qa_snippet_title: snippet.title } }
+%li.snippet-row.py-3{ data: { testid: 'snippet-link', qa_snippet_title: snippet.title } }
   = render Pajamas::AvatarComponent.new(snippet.author, size: 48, alt: "", class: 'gl-display-none gl-sm-display-block gl-float-left gl-mr-3')
 
   = link_to gitlab_snippet_path(snippet), class: "title" do
     = snippet.title
 
-  %ul.controls{ data: { qa_selector: 'snippet_file_count_content', qa_snippet_files: snippet.statistics&.file_count } }
+  %ul.controls{ data: { testid: 'snippet-file-count-content', qa_snippet_files: snippet.statistics&.file_count } }
     %li
       = snippet_file_count(snippet)
     %li
@@ -15,7 +15,7 @@
         = sprite_icon('comments', css_class: 'gl-vertical-align-text-bottom')
         = notes_count
     %li
-      %span.sr-only{ data: { qa_selector: 'snippet_visibility_content', qa_snippet_visibility: visibility_level_label(snippet.visibility_level) } }
+      %span.sr-only{ data: { testid: 'snippet-visibility-content', qa_snippet_visibility: visibility_level_label(snippet.visibility_level) } }
         = visibility_level_label(snippet.visibility_level)
       = visibility_level_icon(snippet.visibility_level)
 
diff --git a/app/views/shared/tokens/_scopes_form.html.haml b/app/views/shared/tokens/_scopes_form.html.haml
index 1c63ce490ed..8e363f6c86a 100644
--- a/app/views/shared/tokens/_scopes_form.html.haml
+++ b/app/views/shared/tokens/_scopes_form.html.haml
@@ -9,7 +9,7 @@
     - help_text = t scope, scope: scope_description(description_prefix)
     = f.gitlab_ui_checkbox_component :scopes, scope,
       help_text: help_text,
-      checkbox_options: { checked: token.scopes.include?(scope), id: "#{prefix}_scopes_#{scope}", multiple: true, data: { qa_selector: "#{scope}_checkbox" } },
+      checkbox_options: { checked: token.scopes.include?(scope), id: "#{prefix}_scopes_#{scope}", multiple: true, data: { testid: "#{scope}-checkbox" } },
       checked_value: scope,
       unchecked_value: nil,
-      label_options: { data: { qa_selector: "#{scope}_label" } }
+      label_options: { data: { testid: "#{scope}-label" } }
diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml
index f040ea8e542..7c713e63cd7 100644
--- a/app/views/shared/web_hooks/_form.html.haml
+++ b/app/views/shared/web_hooks/_form.html.haml
@@ -63,7 +63,7 @@
     %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :releases_events,
           integration_webhook_event_human_name(:releases_events),
-          help_text: s_('Webhooks|A release is created or updated.')
+          help_text: s_('Webhooks|A release is created, updated, or deleted.')
     - if Feature.enabled?(:emoji_webhooks, hook.parent)
       %li.gl-pb-5
         - emoji_help_link = link_to s_('Which emoji events trigger webhooks'), help_page_path('user/project/integrations/webhook_events.md', anchor: 'emoji-events')
diff --git a/app/views/shared/web_hooks/_hook.html.haml b/app/views/shared/web_hooks/_hook.html.haml
index 9b84222e920..a332fd9cce7 100644
--- a/app/views/shared/web_hooks/_hook.html.haml
+++ b/app/views/shared/web_hooks/_hook.html.haml
@@ -1,7 +1,7 @@
 - sslStatus = hook.enable_ssl_verification ? _('enabled') : _('disabled')
 - sslBadgeText = _('SSL Verification:') + ' ' + sslStatus
 
-%li.label-list-item
+%li.gl-border-b.gl-last-of-type-border-b-0
   .gl-display-flex.lgl-align-items-center.row.gl-mx-0
     .col-md-8.col-lg-7.gl-px-5
       .light-header.gl-mb-2
diff --git a/app/views/shared/wikis/_form.html.haml b/app/views/shared/wikis/_form.html.haml
index 34bedbd928a..cdf4b50a99d 100644
--- a/app/views/shared/wikis/_form.html.haml
+++ b/app/views/shared/wikis/_form.html.haml
@@ -1,4 +1,4 @@
-- page_info = { last_commit_sha: @page.last_commit_sha, persisted: @page.persisted?, title: @page.title, content: @page.content || '', format: @page.format.to_s, uploads_path: uploads_path, path: wiki_page_path(@wiki, @page), wiki_path: wiki_path(@wiki), help_path: help_page_path('user/project/wiki/index'), markdown_help_path: help_page_path('user/markdown'), markdown_preview_path: wiki_page_path(@wiki, @page, action: :preview_markdown), create_path: wiki_path(@wiki, action: :create) }
+- page_info = { last_commit_sha: @page.last_commit_sha, persisted: @page.persisted?, title: @page.title, content: @page.raw_content || '', format: @page.format.to_s, uploads_path: uploads_path, path: wiki_page_path(@wiki, @page), wiki_path: wiki_path(@wiki), help_path: help_page_path('user/project/wiki/index'), markdown_help_path: help_page_path('user/markdown'), markdown_preview_path: wiki_page_path(@wiki, @page, action: :preview_markdown), create_path: wiki_path(@wiki, action: :create) }
 
 .gl-mt-3
   = form_errors(@page, truncate: :title)
diff --git a/app/views/shared/wikis/_main_links.html.haml b/app/views/shared/wikis/_main_links.html.haml
index 41831c95198..9a76069e8f6 100644
--- a/app/views/shared/wikis/_main_links.html.haml
+++ b/app/views/shared/wikis/_main_links.html.haml
@@ -1,6 +1,6 @@
 - if @page&.persisted?
-  = link_button_to wiki_page_path(@wiki, @page, action: :history), role: "button", data: { qa_selector: 'page_history_button' } do
+  = link_button_to wiki_page_path(@wiki, @page, action: :history), role: "button", data: { testid: 'page-history-button' } do
     = s_("Wiki|Page history")
   - if can?(current_user, :create_wiki, @wiki.container)
-    = link_button_to wiki_path(@wiki, action: :new), role: "button", data: { qa_selector: 'new_page_button' }, variant: :confirm, category: :secondary do
+    = link_button_to wiki_path(@wiki, action: :new), role: "button", data: { testid: 'new-page-button' }, variant: :confirm, category: :secondary do
       = s_("Wiki|New page")
diff --git a/app/views/shared/wikis/_pages_wiki_page.html.haml b/app/views/shared/wikis/_pages_wiki_page.html.haml
index fb6f58d044d..23931bbbc32 100644
--- a/app/views/shared/wikis/_pages_wiki_page.html.haml
+++ b/app/views/shared/wikis/_pages_wiki_page.html.haml
@@ -1,5 +1,5 @@
 %li
-  = link_to wiki_page.human_title, wiki_page_path(@wiki, wiki_page), data: { qa_selector: 'wiki_page_link', qa_page_name: wiki_page.slug }
+  = link_to wiki_page.human_title, wiki_page_path(@wiki, wiki_page), data: { testid: 'wiki-page-link', qa_page_name: wiki_page.slug }
   %small (#{wiki_page.format})
   .float-right
     - if wiki_page.last_version
diff --git a/app/views/shared/wikis/_sidebar.html.haml b/app/views/shared/wikis/_sidebar.html.haml
index a34827602ab..cd752d31643 100644
--- a/app/views/shared/wikis/_sidebar.html.haml
+++ b/app/views/shared/wikis/_sidebar.html.haml
@@ -8,7 +8,7 @@
 
       .gl-display-flex.gl-flex-wrap
         - git_access_url = wiki_path(@wiki, action: :git_access)
-        = link_to git_access_url, class: 'gl-mr-5' + (active_nav_link?(path: 'wikis#git_access') ? ' active' : ''), data: { qa_selector: 'clone_repository_link' } do
+        = link_to git_access_url, class: 'gl-mr-5' + (active_nav_link?(path: 'wikis#git_access') ? ' active' : ''), data: { testid: 'clone-repository-link' } do
           = sprite_icon('download', css_class: 'gl-mr-2')
           %span= _("Clone repository")
 
@@ -32,5 +32,5 @@
               = render partial: entry.to_partial_path, object: entry, locals: { context: 'sidebar' }
       .block.w-100
         - if @sidebar_limited
-          = link_button_to wiki_path(@wiki, action: :pages), data: { qa_selector: 'view_all_pages_button' }, block: true do
+          = link_button_to wiki_path(@wiki, action: :pages), data: { testid: 'view-all-pages-button' }, block: true do
             = s_("Wiki|View All Pages")
diff --git a/app/views/shared/wikis/_sidebar_wiki_page.html.haml b/app/views/shared/wikis/_sidebar_wiki_page.html.haml
index 2c5c3aa68a3..710ecf6196e 100644
--- a/app/views/shared/wikis/_sidebar_wiki_page.html.haml
+++ b/app/views/shared/wikis/_sidebar_wiki_page.html.haml
@@ -3,5 +3,5 @@
 %li{ class: active_when(params[:id] == wiki_page.slug) }
   .gl-relative.gl-display-flex.gl-align-items-center.js-wiki-list-toggle.wiki-list{ data: { testid: 'wiki-list' } }
     = render Pajamas::ButtonComponent.new(icon: 'plus', href: "#{wiki_path}/{new_page_title}", button_options: { class: 'wiki-list-create-child-button gl-bg-transparent! gl-hover-bg-gray-50! gl-focus-bg-gray-50! gl-absolute gl-top-half gl-translate-y-n50 gl-cursor-pointer gl-right-3' })
-    = link_to wiki_path, data: { qa_selector: 'wiki_page_link', qa_page_name: wiki_page.human_title } do
+    = link_to wiki_path, data: { testid: 'wiki-page-link', qa_page_name: wiki_page.human_title } do
       = wiki_page.human_title
diff --git a/app/views/shared/wikis/_wiki_content.html.haml b/app/views/shared/wikis/_wiki_content.html.haml
index 780e4c4746d..b5210b340f3 100644
--- a/app/views/shared/wikis/_wiki_content.html.haml
+++ b/app/views/shared/wikis/_wiki_content.html.haml
@@ -1,2 +1,2 @@
-.js-wiki-page-content.md.gl-pt-2{ data: { qa_selector: 'wiki_page_content', testid: 'wiki-page-content', tracking_context: wiki_page_tracking_context(@page).to_json } }
+.js-wiki-page-content.md.gl-pt-2{ data: { testid: 'wiki-page-content', tracking_context: wiki_page_tracking_context(@page).to_json } }
   = render_wiki_content(@page)
diff --git a/app/views/shared/wikis/_wiki_directory.html.haml b/app/views/shared/wikis/_wiki_directory.html.haml
index 6a066e0a838..cce81257691 100644
--- a/app/views/shared/wikis/_wiki_directory.html.haml
+++ b/app/views/shared/wikis/_wiki_directory.html.haml
@@ -1,11 +1,11 @@
 - wiki_path = wiki_page_path(@wiki, wiki_directory)
 
-%li{ class: active_when(params[:id] == wiki_directory.slug), data: { qa_selector: 'wiki_directory_content' } }
+%li{ class: active_when(params[:id] == wiki_directory.slug), data: { testid: 'wiki-directory-content' } }
   .gl-relative.gl-display-flex.gl-align-items-center.js-wiki-list-toggle.wiki-list{ data: { testid: 'wiki-list' } }<
     = sprite_icon('chevron-right', css_class: 'js-wiki-list-expand-button wiki-list-expand-button gl-mr-2 gl-cursor-pointer')
     = sprite_icon('chevron-down', css_class: 'js-wiki-list-collapse-button wiki-list-collapse-button gl-mr-2 gl-cursor-pointer')
     = render Pajamas::ButtonComponent.new(icon: 'plus', href: "#{wiki_path}/{new_page_title}", button_options: { class: 'wiki-list-create-child-button gl-bg-transparent! gl-hover-bg-gray-50! gl-focus-bg-gray-50! gl-absolute gl-top-half gl-translate-y-n50 gl-cursor-pointer gl-right-3' })
-    = link_to wiki_path, data: { qa_selector: 'wiki_dir_page_link', qa_page_name: wiki_directory.title } do
+    = link_to wiki_path, data: { testid: 'wiki-dir-page-link', qa_page_name: wiki_directory.title } do
       = wiki_directory.title
   %ul
     - wiki_directory.entries.each do |entry|
diff --git a/app/views/shared/wikis/show.html.haml b/app/views/shared/wikis/show.html.haml
index be1f43f44de..9537d6fec15 100644
--- a/app/views/shared/wikis/show.html.haml
+++ b/app/views/shared/wikis/show.html.haml
@@ -29,10 +29,10 @@
 
 .gl-mt-5.gl-mb-3
   .gl-display-flex.gl-justify-content-space-between
-    %h2.gl-mt-0.gl-mb-5{ data: { qa_selector: 'wiki_page_title', testid: 'wiki_page_title' } }= @page.human_title
+    %h2.gl-mt-0.gl-mb-5{ data: { testid: 'wiki-page-title' } }= @page.human_title
     %div
       - if can?(current_user, :create_wiki, @wiki.container) && @page.latest? && @valid_encoding
-        = render Pajamas::ButtonComponent.new(href: wiki_page_path(@wiki, @page, action: :edit), icon: 'pencil', button_options: { class: 'js-wiki-edit', title: "Edit", data: { qa_selector: 'edit_page_button', testid: 'wiki_edit_button' }})
+        = render Pajamas::ButtonComponent.new(href: wiki_page_path(@wiki, @page, action: :edit), icon: 'pencil', button_options: { class: 'js-wiki-edit', title: "Edit", data: { testid: 'wiki-edit-button' }})
 
   .js-async-wiki-page-content.md.gl-pt-2{ data: { qa_selector: 'wiki_page_content', testid: 'wiki-page-content', tracking_context: wiki_page_tracking_context(@page).to_json, get_wiki_content_url: wiki_page_render_api_endpoint(@page) } }
 
diff --git a/app/views/snippets/notes/_actions.html.haml b/app/views/snippets/notes/_actions.html.haml
index e3a14b0454e..07640f579a2 100644
--- a/app/views/snippets/notes/_actions.html.haml
+++ b/app/views/snippets/notes/_actions.html.haml
@@ -8,6 +8,6 @@
 
   - if note_editable
     .note-actions-item.gl-ml-0
-      = render Pajamas::ButtonComponent.new(category: :tertiary, icon: 'pencil', button_options: { title: _('Edit comment'), class: 'note-action-button js-note-edit has-tooltip', data: { container: 'body', qa_selector: 'edit_comment_button' } })
+      = render Pajamas::ButtonComponent.new(category: :tertiary, icon: 'pencil', button_options: { title: _('Edit comment'), class: 'note-action-button js-note-edit has-tooltip', data: { container: 'body', testid: 'edit-comment-button' } })
 
   = render 'projects/notes/more_actions_dropdown', note: note, note_editable: note_editable
diff --git a/app/views/users/_cover_controls.html.haml b/app/views/users/_cover_controls.html.haml
index 43278e9d232..899a08c8a17 100644
--- a/app/views/users/_cover_controls.html.haml
+++ b/app/views/users/_cover_controls.html.haml
@@ -1,2 +1,2 @@
-.cover-controls.d-flex.px-2.pb-4.d-sm-block.p-sm-0
+.cover-controls.gl-display-flex.gl-gap-3.gl-pb-4
   = yield
diff --git a/app/views/users/_follow_user.html.haml b/app/views/users/_follow_user.html.haml
index 3ee8c81496c..71f8a462cbf 100644
--- a/app/views/users/_follow_user.html.haml
+++ b/app/views/users/_follow_user.html.haml
@@ -7,5 +7,5 @@
         = _('Unfollow')
   - else
     = form_tag user_follow_path(@user, :json), class: link_classes do
-      = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { class: 'gl-w-full', data: { qa_selector: 'follow_user_link', track_action: 'click_button', track_label: 'follow_from_profile' } }) do
+      = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { class: 'gl-w-full', data: { testid: 'follow-user-link', track_action: 'click_button', track_label: 'follow_from_profile' } }) do
         = _('Follow')
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index 0b76ed6c086..3649f72c956 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -33,7 +33,7 @@
             %h4.gl-flex-grow-1
               = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
             = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
-          .overview-content-list{ data: { href: user_activity_path, qa_selector: 'user_activity_content' } }
+          .overview-content-list{ data: { href: user_activity_path, testid: 'user-activity-content' } }
             = gl_loading_icon(size: 'md', css_class: 'loading')
 
   - unless Feature.enabled?(:security_auto_fix) && @user.bot?
diff --git a/app/views/users/_profile_basic_info.html.haml b/app/views/users/_profile_basic_info.html.haml
index fb9721028d5..6de9e80008e 100644
--- a/app/views/users/_profile_basic_info.html.haml
+++ b/app/views/users/_profile_basic_info.html.haml
@@ -5,6 +5,6 @@
     - unless Feature.enabled?(:user_profile_overflow_menu_vue)
       = render 'middle_dot_divider', stacking: true do
         = s_('UserProfile|User ID: %{id}') % { id: @user.id }
-        = deprecated_clipboard_button(title: s_('UserProfile|Copy user ID'), text: @user.id)
+        = clipboard_button(title: s_('UserProfile|Copy user ID'), text: @user.id)
     = render 'middle_dot_divider', stacking: true do
       = s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
diff --git a/app/views/users/_view_user_in_admin_area.html.haml b/app/views/users/_view_user_in_admin_area.html.haml
index b13f22956f6..36b3c33d8ab 100644
--- a/app/views/users/_view_user_in_admin_area.html.haml
+++ b/app/views/users/_view_user_in_admin_area.html.haml
@@ -1,4 +1,4 @@
 - if current_user && current_user.admin?
   = render Pajamas::ButtonComponent.new(href: [:admin, @user],
     icon: 'user',
-    button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: s_('UserProfile|View user in admin area'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } })
+    button_options: { class: 'gl-flex-grow-1 has-tooltip', title: s_('UserProfile|View user in admin area'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } })
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index a2f6b3da746..0881c5bba54 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -5,6 +5,7 @@
 - page_description @user.bio unless @user.blocked? || !@user.confirmed?
 - page_itemtype    'http://schema.org/Person'
 - add_page_specific_style 'page_bundles/profile'
+- add_page_specific_style 'page_bundles/projects'
 - if show_super_sidebar?
   - @left_sidebar = true
   - @force_desktop_expanded_sidebar = true
@@ -17,7 +18,7 @@
   .cover-block.user-cover-block.gl-border-t.gl-border-b.gl-mt-n1
     %div{ class: container_class }
       - if Feature.enabled?(:user_profile_overflow_menu_vue)
-        .cover-controls.d-flex.px-2.pb-4.d-sm-block.p-sm-0
+        .cover-controls.gl-display-flex.gl-gap-3.gl-pb-4
           = render 'users/follow_user'
           -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
           - if @user == current_user
@@ -32,14 +33,14 @@
           - if @user == current_user
             = render Pajamas::ButtonComponent.new(href: profile_path,
               icon: 'pencil',
-              button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: s_('UserProfile|Edit profile'), 'aria-label': 'Edit profile', data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
+              button_options: { class: 'gl-flex-grow-1 has-tooltip', title: s_('UserProfile|Edit profile'), 'aria-label': 'Edit profile', data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
           - elsif current_user
             #js-report-abuse{ data: { report_abuse_path: add_category_abuse_reports_path, reported_user_id: @user.id, reported_from_url: user_url(@user) } }
           = render 'users/view_gpg_keys'
           - if can?(current_user, :read_user_profile, @user)
             = render Pajamas::ButtonComponent.new(href: user_path(@user, rss_url_options),
               icon: 'rss',
-              button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: s_('UserProfile|Subscribe'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
+              button_options: { class: 'gl-flex-grow-1 has-tooltip', title: s_('UserProfile|Subscribe'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
           = render 'users/view_user_in_admin_area'
           = render 'users/follow_user'
 
diff --git a/app/views/users/terms/index.html.haml b/app/views/users/terms/index.html.haml
index afe257c2fc2..9f7c17dad9a 100644
--- a/app/views/users/terms/index.html.haml
+++ b/app/views/users/terms/index.html.haml
@@ -1,7 +1,7 @@
 - content_for :page_specific_javascripts do
-  = render "layouts/google_tag_manager_head"
+  = render_if_exists "layouts/google_tag_manager_head"
   = render "layouts/one_trust"
   = render "layouts/bizible"
-= render "layouts/google_tag_manager_body"
+= render_if_exists "layouts/google_tag_manager_body"
 
 #js-terms-of-service{ data: { terms_data: terms_data(@term, @redirect) } }