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

52 files changed, 104 insertions, 89 deletions

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