Add latest changes from gitlab-org/gitlab@16-2-stable-eev16.2.0-rc42

105 files changed, 335 insertions, 502 deletions

diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index 118f6fb1296..00da6c73081 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -3,8 +3,7 @@
 .nav-block.d-none.d-sm-flex.activities.gl-static
   = render 'shared/event_filter'
   .controls.gl-display-flex
-    = link_to project_path(@project, rss_url_options), title: s_("ProjectActivityRSS|Subscribe"), class: 'btn gl-button btn-default btn-icon d-none d-sm-inline-flex has-tooltip' do
-      = sprite_icon('rss', css_class: 'gl-icon')
+    = link_button_to nil, project_path(@project, rss_url_options), title: s_("ProjectActivityRSS|Subscribe"), class: 'd-none d-sm-inline-flex has-tooltip', icon: 'rss'
     - if is_project_overview && can?(current_user, :download_code, @project)
       .project-clone-holder.d-none.d-md-inline-flex.gl-ml-2
         = render "projects/buttons/clone", dropdown_class: 'dropdown-menu-right'
diff --git a/app/views/projects/_customize_workflow.html.haml b/app/views/projects/_customize_workflow.html.haml
index ded43a34b48..da4b257f224 100644
--- a/app/views/projects/_customize_workflow.html.haml
+++ b/app/views/projects/_customize_workflow.html.haml
@@ -5,4 +5,4 @@
     %p
       Get started with GitLab by enabling features that work best for your project. From issues and wikis, to merge requests and pipelines, GitLab can help manage your workflow from idea to production!
     - if can?(current_user, :admin_project, @project)
-      = link_to "Get started", edit_project_path(@project), class: "gl-button btn btn-confirm"
+      = link_button_to "Get started", edit_project_path(@project), variant: :confirm
diff --git a/app/views/projects/_export.html.haml b/app/views/projects/_export.html.haml
index 97f5cdb54e5..3ef2c722e98 100644
--- a/app/views/projects/_export.html.haml
+++ b/app/views/projects/_export.html.haml
@@ -20,10 +20,12 @@
       %li= _('Webhooks')
       %li= _('Any encrypted tokens')
   - if project.export_status == :finished
-    = link_to _('Download export'), download_export_project_path(project),
-            rel: 'nofollow', download: '', method: :get, class: "btn gl-button btn-default", data: { qa_selector: 'download_export_link' }
-    = link_to _('Generate new export'), generate_new_export_project_path(project),
-            method: :post, class: "btn gl-button btn-default"
+    = render Pajamas::ButtonComponent.new(href: download_export_project_path(project),
+      method: :get,
+      button_options: { ref: 'nofollow', download: '', data: { qa_selector: 'download_export_link' } }) do
+      = _('Download export')
+    = render Pajamas::ButtonComponent.new(href: generate_new_export_project_path(project), method: :post) do
+      = _('Generate new export')
   - else
-    = link_to _('Export project'), export_project_path(project),
-          method: :post, class: "btn gl-button btn-default", data: { qa_selector: 'export_project_link' }
+    = render Pajamas::ButtonComponent.new(href: export_project_path(project), method: :post, button_options: { data: { qa_selector: 'export_project_link' } }) do
+      = _('Export project')
diff --git a/app/views/projects/_find_file_link.html.haml b/app/views/projects/_find_file_link.html.haml
index a4bf72edf12..4ad2c339bcc 100644
--- a/app/views/projects/_find_file_link.html.haml
+++ b/app/views/projects/_find_file_link.html.haml
@@ -1,2 +1,2 @@
-= link_to project_find_file_path(@project, @ref), class: 'gl-button btn btn-default shortcuts-find-file', rel: 'nofollow' do
+= link_button_to project_find_file_path(@project, @ref), 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 9cb5ec39de2..59147138834 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -27,9 +27,7 @@
     .project-repo-buttons.gl-display-flex.gl-justify-content-md-end.gl-align-items-center.gl-flex-wrap.gl-gap-3
       - if current_user
         - if current_user.admin?
-          = link_to [:admin, @project], class: 'btn btn-default gl-button btn-icon', title: _('View project in admin area'),
-            data: {toggle: 'tooltip', placement: 'top', container: 'body'} do
-            = sprite_icon('admin')
+          = link_button_to nil, [:admin, @project], icon: 'admin', title: _('View project in admin area'), data: {toggle: 'tooltip', placement: 'top', container: 'body'}
         - if @notification_setting
           .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: @project.id, no_flip: 'true' } }
 
diff --git a/app/views/projects/_import_project_pane.html.haml b/app/views/projects/_import_project_pane.html.haml
index 947a1007fd5..6315c6dc52d 100644
--- a/app/views/projects/_import_project_pane.html.haml
+++ b/app/views/projects/_import_project_pane.html.haml
@@ -43,9 +43,7 @@
 
       - if gitea_import_enabled?
         %div
-          = link_to new_import_gitea_path(namespace_id: namespace_id), class: 'gl-button btn-default btn import_gitea js-import-project-btn', data: { platform: 'gitea', **tracking_attrs_data(track_label, 'click_button', 'gitea') } do
-            .gl-button-icon
-              = custom_icon('gitea_logo')
+          = render Pajamas::ButtonComponent.new(href: new_import_gitea_path(namespace_id: namespace_id), icon: 'gitea', button_options: { class: 'import_gitea js-import-project-btn', data: { platform: 'gitea', **tracking_attrs_data(track_label, 'click_button', 'gitea') } }) do
             Gitea
 
       - if git_import_enabled?
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 6049d1cc110..983b8056358 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -98,4 +98,4 @@
 -# this partial is from JiHu, see details in https://jihulab.com/gitlab-cn/gitlab/-/merge_requests/675
 = render_if_exists 'shared/other_project_options', f: f, visibility_level: visibility_level, track_label: track_label
 = f.submit _('Create project'), class: "js-create-project-button", data: { qa_selector: 'project_create_button', track_label: "#{track_label}", track_action: "click_button", track_property: "create_project", track_value: "" }, pajamas_button: true
-= link_to _('Cancel'), @parent_group || dashboard_groups_path, class: 'btn gl-button btn-default btn-cancel', data: { track_label: "#{track_label}", track_action: "click_button", track_property: "cancel", track_value: "" }
+= link_button_to _('Cancel'), @parent_group || dashboard_groups_path, data: { track_label: "#{track_label}", track_action: "click_button", track_property: "cancel", track_value: "" }
diff --git a/app/views/projects/_readme.html.haml b/app/views/projects/_readme.html.haml
index 85a53edc160..c3d66396256 100644
--- a/app/views/projects/_readme.html.haml
+++ b/app/views/projects/_readme.html.haml
@@ -24,4 +24,4 @@
         distributed with computer software, forming part of its documentation.
         GitLab will render it here instead of this message.
       %p
-        = link_to "Add Readme", @project.add_readme_path, class: 'gl-button btn btn-confirm'
+        = link_button_to "Add Readme", @project.add_readme_path, variant: :confirm
diff --git a/app/views/projects/_service_desk_settings.html.haml b/app/views/projects/_service_desk_settings.html.haml
index 14991ce3824..0a83efdb3b8 100644
--- a/app/views/projects/_service_desk_settings.html.haml
+++ b/app/views/projects/_service_desk_settings.html.haml
@@ -12,8 +12,8 @@
         enabled: "#{@project.service_desk_enabled}",
         issue_tracker_enabled: "#{@project.project_feature.issues_enabled?}",
         incoming_email: (@project.service_desk_incoming_address if @project.service_desk_enabled),
-        custom_email: (@project.service_desk_custom_address if @project.service_desk_enabled),
-        custom_email_enabled: "#{Gitlab::Email::ServiceDeskEmail.enabled?}",
+        service_desk_email: (@project.service_desk_custom_address if @project.service_desk_enabled),
+        service_desk_email_enabled: "#{Gitlab::Email::ServiceDeskEmail.enabled?}",
         selected_template: "#{@project.service_desk_setting&.issue_template_key}",
         selected_file_template_project_id: "#{@project.service_desk_setting&.file_template_project_id}",
         outgoing_name: "#{@project.service_desk_setting&.outgoing_name}",
diff --git a/app/views/projects/_wiki.html.haml b/app/views/projects/_wiki.html.haml
index 45d0aee4332..e82e0972d82 100644
--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
@@ -14,4 +14,4 @@
       - if can_create_wiki
         %p
           = _("Add a homepage to your wiki that contains information about your project and GitLab will display it here instead of this message.")
-        = link_to _("Create your first page"), wiki_path(@project.wiki) + '?view=create', class: "btn gl-button btn-confirm"
+        = link_button_to _("Create your first page"), wiki_path(@project.wiki) + '?view=create', variant: :confirm
diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml
index ccda06c7e4c..ebeeaed7ae9 100644
--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
@@ -18,10 +18,8 @@
           = link_to truncate(title, length: 40), browse_project_job_artifacts_path(@project, @build, path)
 
     .tree-controls<
-      = link_to download_project_job_artifacts_path(@project, @build),
-        rel: 'nofollow', download: '', class: 'gl-button btn btn-default download' do
-        = sprite_icon('download', css_class: 'gl-mr-2')
-        Download artifacts archive
+      = link_button_to download_project_job_artifacts_path(@project, @build), rel: 'nofollow', download: '', class: 'download', icon: 'download' do
+        = _('Download artifacts archive')
 
   .tree-content-holder
     %table.table.tree-table
diff --git a/app/views/projects/artifacts/external_file.html.haml b/app/views/projects/artifacts/external_file.html.haml
index a014d134e31..67f6ccd5695 100644
--- a/app/views/projects/artifacts/external_file.html.haml
+++ b/app/views/projects/artifacts/external_file.html.haml
@@ -1,3 +1,4 @@
+- external_url = @blob.external_url(@build)
 - page_title @path, _('Artifacts'), "#{@build.name} (##{@build.id})", _('Jobs')
 
 = render "projects/jobs/header"
@@ -8,8 +9,8 @@
   %h2= _("You are being redirected away from GitLab")
   %p= _("This page is hosted on GitLab pages but contains user-generated content and may contain malicious code. Do not accept unless you trust the author and source.")
 
-  = link_to @blob.external_url(@project, @build),
-      @blob.external_url(@project, @build),
+  = link_to external_url,
+      external_url,
       target: '_blank',
       title: _('Opens in a new window'),
       rel: 'noopener noreferrer'
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
index 79b13dc861a..417c11ba37a 100644
--- a/app/views/projects/blob/_breadcrumb.html.haml
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -22,14 +22,11 @@
     -# only show normal/blame view links for text files
     - if blob.readable_text?
       - if blame
-        = link_to 'Normal view', project_blob_path(@project, @id),
-            class: 'gl-button btn btn-default'
+        = link_button_to _('Normal view'), project_blob_path(@project, @id)
       - else
-        = link_to 'Blame', project_blame_path(@project, @id),
-            class: 'gl-button btn btn-default js-blob-blame-link' unless blob.empty?
+        = link_button_to _('Blame'), project_blame_path(@project, @id), class: 'js-blob-blame-link' unless blob.empty?
 
-    = link_to 'History', project_commits_path(@project, @id),
-        class: 'gl-button btn btn-default'
+    = link_button_to _('History'), project_commits_path(@project, @id)
 
-    = link_to 'Permalink', project_blob_path(@project,
-        tree_join(@commit.sha, @path)), class: 'gl-button btn btn-default js-data-file-blob-permalink-url'
+    = 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/_new_dir.html.haml b/app/views/projects/blob/_new_dir.html.haml
index 3ae7741d24d..f1da9154df9 100644
--- a/app/views/projects/blob/_new_dir.html.haml
+++ b/app/views/projects/blob/_new_dir.html.haml
@@ -16,6 +16,6 @@
 
           .form-actions
             = submit_tag _("Create directory"), class: 'btn gl-button btn-confirm'
-            = link_to _('Cancel'), '#', class: "btn gl-button btn-default btn-cancel", "data-dismiss" => "modal"
+            = link_button_to _('Cancel'), '#', "data-dismiss" => "modal"
 
             = render 'shared/projects/edit_information'
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index adff64fad5a..ae8d230f356 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -11,13 +11,13 @@
         = branch.name
       = clipboard_button(text: branch.name, title: _("Copy branch name"))
       - if is_default_branch
-        = gl_badge_tag s_('DefaultBranchLabel|default'), { variant: :neutral, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
+        = gl_badge_tag s_('DefaultBranchLabel|default'), { variant: :neutral, size: :sm }, { class: 'gl-ml-2' }
       - if protected_branch?(@project, branch)
-        = gl_badge_tag s_('Branches|protected'), { variant: :muted, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
+        = gl_badge_tag s_('Branches|protected'), { variant: :muted, size: :sm }, { class: 'gl-ml-2' }
 
       = render_if_exists 'projects/branches/diverged_from_upstream', branch: branch
 
-    .block-truncated
+    .gl-text-truncate
       - if commit
         = render 'projects/branches/commit', commit: commit, project: @project
       - else
@@ -28,35 +28,33 @@
 
   .pipeline-status.d-none.d-md-block<
     - if commit_status
-      = render 'ci/status/icon', size: 16, status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-5'
+      = render 'ci/status/icon', size: 16, status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-3'
     - elsif show_commit_status
-      .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-5
+      .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-3
         %svg.s16
 
-
-  - if mr_status.present?
-    .issuable-reference.gl-display-flex.gl-justify-content-end.gl-min-w-10.gl-ml-5.gl-mr-4
-      = gl_badge_tag issuable_reference(related_merge_request),
-        { icon: mr_status[:icon], variant: mr_status[:variant], size: :md, href: merge_request_path(related_merge_request) },
-        { class: 'gl-mr-2', title: mr_status[:title], data: { toggle: 'tooltip', container: 'body', qa_selector: 'badge_content' } }
-
-  .controls.d-none.d-md-block<
-    - if mr_status.nil? && create_mr_button?(from: branch.name, source_project: @project)
-      = render Pajamas::ButtonComponent.new(icon: 'merge-request', href: create_mr_path(from: branch.name, source_project: @project), button_options: { class: 'has-tooltip gl-mr-2!', title: _('New merge request') }) do
-        = _('New')
-
-    = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name], css_class: 'gl-mr-1!'
-
-    - if !is_default_branch
-      .js-branch-more-actions{ data: {
-          branch_name: branch.name,
-          default_branch_name: @repository.root_ref,
-          can_delete_branch: user_access(@project).can_delete_branch?(branch.name).to_s,
-          is_protected_branch: protected_branch?(@project, branch).to_s,
-          merged: merged.to_s,
-          compare_path: project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
-          delete_path: project_branch_path(@project, branch.name),
-      } }
-    - else
-      .gl-display-inline-flex.gl-w-7
-        &nbsp;
+  .right-block.gl-display-flex.gl-align-items-center.gl-justify-content-end
+    .gl-mr-3
+      - if mr_status.present?
+        .issuable-reference.gl-display-flex.gl-justify-content-end.gl-overflow-hidden
+          = gl_badge_tag issuable_reference(related_merge_request),
+            { icon: mr_status[:icon], variant: mr_status[:variant], size: :md, href: merge_request_path(related_merge_request) },
+            { class: 'gl-display-block gl-text-truncate', title: mr_status[:title], data: { toggle: 'tooltip', container: 'body' } }
+
+      - elsif mr_status.nil? && create_mr_button?(from: branch.name, source_project: @project)
+        = render Pajamas::ButtonComponent.new(icon: 'merge-request', href: create_mr_path(from: branch.name, source_project: @project), button_options: { class: 'has-tooltip', title: _('New merge request') }) do
+          = _('New')
+
+    = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name], css_class: 'gl-mr-2!'
+
+    .gl-w-7
+      - if !is_default_branch
+        .js-branch-more-actions{ data: {
+            branch_name: branch.name,
+            default_branch_name: @repository.root_ref,
+            can_delete_branch: user_access(@project).can_delete_branch?(branch.name).to_s,
+            is_protected_branch: protected_branch?(@project, branch).to_s,
+            merged: merged.to_s,
+            compare_path: project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
+            delete_path: project_branch_path(@project, branch.name),
+        } }
diff --git a/app/views/projects/branches/_commit.html.haml b/app/views/projects/branches/_commit.html.haml
index 6bbd0617598..7662caceb15 100644
--- a/app/views/projects/branches/_commit.html.haml
+++ b/app/views/projects/branches/_commit.html.haml
@@ -1,7 +1,7 @@
-.branch-commit.gl-font-sm.gl-text-gray-500
+.branch-commit.gl-font-sm.gl-text-gray-500.gl-text-truncate
   = link_to commit.short_id, project_commit_path(project, commit.id), class: "commit-sha"
   &middot;
-  %span.str-truncated
+  %span
     = link_to_markdown commit.title, project_commit_path(project, commit.id), class: "commit-row-message gl-text-gray-500!"
   &middot;
   %span.gl-text-secondary= time_ago_with_tooltip(commit.committed_date)
diff --git a/app/views/projects/branches/_panel.html.haml b/app/views/projects/branches/_panel.html.haml
index a632e29d34f..c01e3677c19 100644
--- a/app/views/projects/branches/_panel.html.haml
+++ b/app/views/projects/branches/_panel.html.haml
@@ -7,9 +7,9 @@
 
 - return unless branches.any?
 
-= render Pajamas::CardComponent.new(card_options: {class: 'gl-mt-5 gl-bg-gray-10'}, header_options: {class: 'gl-px-5 gl-py-4 gl-bg-white'}, body_options: {class: 'gl-px-3 gl-py-0'}, footer_options: {class: 'gl-bg-white'}) do |c|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }, footer_options: { class: 'gl-new-card-footer' }) do |c|
   - c.with_header do
-    %h3.card-title.h5.gl-line-height-24.gl-m-0
+    %h3.gl-new-card-title.h5
       = panel_title
   - c.with_body do
     %ul.content-list.branches-list.all-branches{ data: { qa_selector: 'all_branches_container' } }
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 8992753c676..c03de6646cf 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -1,8 +1,6 @@
 - add_page_specific_style 'page_bundles/branches'
 - page_title _('Branches')
 - add_to_breadcrumbs(_('Repository'), project_tree_path(@project))
-- can_access_branch_rules = can?(current_user, :maintainer_access, @project)
-- can_push_code = (can? current_user, :push_code, @project)
 
 -# Possible values for variables passed down from the projects/branches_controller.rb
 -#
@@ -24,21 +22,21 @@
         sorted_by: @sort }
     }
 
-    - if can_access_branch_rules
-      = link_to project_settings_repository_path(@project, anchor: 'js-branch-rules'), class: 'gl-button btn btn-default' do
+    - if can_view_branch_rules?
+      = link_button_to project_settings_repository_path(@project, anchor: 'js-branch-rules') do
         = s_('Branches|View branch rules')
 
-    - if can_push_code
-      = link_to new_project_branch_path(@project), class: 'gl-button btn btn-confirm' do
+    - if can_push_code?
+      = link_button_to new_project_branch_path(@project), variant: :confirm do
         = s_('Branches|New branch')
-      .js-delete-merged-branches{ data: {
+      .js-delete-merged-branches.gl-w-7{ data: {
           default_branch: @project.repository.root_ref,
           form_path: project_merged_branches_path(@project) }
         }
 
 = render_if_exists 'projects/commits/mirror_status'
 
-- if can_access_branch_rules
+- if can_view_branch_rules?
   = render 'branch_rules_info'
 
 .js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json), default_branch: @project.default_branch } }
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 9fd9943fd26..7f6a37fc210 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -20,4 +20,4 @@
       = _('Existing branch name, tag, or commit SHA')
   = render Pajamas::ButtonComponent.new(variant: :confirm, button_options: { type: 'submit', class: 'gl-mr-3' }) do
     = _('Create branch')
-  = link_to _('Cancel'), project_branches_path(@project), class: 'gl-button btn btn-default btn-cancel'
+  = link_button_to _('Cancel'), project_branches_path(@project)
diff --git a/app/views/projects/buttons/_clone.html.haml b/app/views/projects/buttons/_clone.html.haml
index ab026d9c6ac..db5d1ff5693 100644
--- a/app/views/projects/buttons/_clone.html.haml
+++ b/app/views/projects/buttons/_clone.html.haml
@@ -3,7 +3,7 @@
 
 - if can?(current_user, :download_code, @project)
   .git-clone-holder.js-git-clone-holder
-    %a#clone-dropdown.gl-button.btn.btn-confirm.clone-dropdown-btn{ href: '#', data: { toggle: 'dropdown', qa_selector: 'clone_dropdown' } }
+    = render Pajamas::ButtonComponent.new(variant: :confirm, button_options: { id: 'clone-dropdown', class: 'clone-dropdown-btn', data: { toggle: 'dropdown', qa_selector: 'clone_dropdown' } }) do
       %span.gl-mr-2.js-clone-dropdown-label
         = _('Clone')
       = sprite_icon("chevron-down", css_class: "icon")
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index bbee7d66dcb..23d18236738 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 }>
-    %button.gl-button.btn.btn-default.dropdown-toggle.gl-dropdown-toggle.dropdown-icon-only.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { qa_selector: 'download_source_code_button' } }
+    = 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
       = 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')
diff --git a/app/views/projects/buttons/_download_links.html.haml b/app/views/projects/buttons/_download_links.html.haml
index d36aed44e18..31185fc1532 100644
--- a/app/views/projects/buttons/_download_links.html.haml
+++ b/app/views/projects/buttons/_download_links.html.haml
@@ -1,4 +1,4 @@
 .btn-group.ml-0.w-100
   - Gitlab::Workhorse::ARCHIVE_FORMATS.each_with_index do |fmt, index|
     - archive_path = project_archive_path(project, id: tree_join(ref, archive_prefix), path: path, format: fmt)
-    = link_to fmt, external_storage_url_or_path(archive_path), rel: 'nofollow', download: '', class: "gl-button btn btn-sm #{index == 0 ? 'btn-confirm' : 'btn-default'}"
+    = link_button_to fmt, external_storage_url_or_path(archive_path), rel: 'nofollow', download: '', variant: index == 0 ? :confirm : :default, size: :small
diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml
index 6d05f1dc955..c9dcfaff8c6 100644
--- a/app/views/projects/buttons/_fork.html.haml
+++ b/app/views/projects/buttons/_fork.html.haml
@@ -2,17 +2,15 @@
   - if current_user
     .count-badge.btn-group
       - if current_user.already_forked?(@project) && current_user.forkable_namespaces.size < 2
-        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: s_('ProjectOverview|Go to your fork'), class: 'gl-button btn btn-default has-tooltip fork-btn' do
-          = sprite_icon('fork', css_class: 'icon')
-          %span= s_('ProjectOverview|Fork')
+        = link_button_to namespace_project_path(current_user, current_user.fork_of(@project)), title: s_('ProjectOverview|Go to your fork'), class: 'has-tooltip fork-btn', icon: 'fork' do
+          = s_('ProjectOverview|Fork')
       - else
         - disabled_tooltip = fork_button_disabled_tooltip(@project)
         - count_class = 'disabled' unless can?(current_user, :read_code, @project)
         - button_class = 'disabled' if disabled_tooltip
 
         %span.btn-group{ class: ('has-tooltip' if disabled_tooltip), title: disabled_tooltip }
-          = link_to new_project_fork_path(@project), class: "gl-button btn btn-default fork-btn #{button_class}", data: { qa_selector: 'fork_button' } do
-            = sprite_icon('fork', css_class: 'icon')
-            %span= s_('ProjectOverview|Fork')
-      = link_to project_forks_path(@project), title: n_(s_('ProjectOverview|Forks'), s_('ProjectOverview|Forks'), @project.forks_count), class: "gl-button btn btn-default count has-tooltip fork-count #{count_class}" do
+          = link_button_to new_project_fork_path(@project), class: "fork-btn #{button_class}", data: { qa_selector: 'fork_button' }, icon: 'fork' do
+            = s_('ProjectOverview|Fork')
+      = link_button_to project_forks_path(@project), title: n_(s_('ProjectOverview|Forks'), s_('ProjectOverview|Forks'), @project.forks_count), class: "count has-tooltip fork-count #{count_class}" do
         = @project.forks_count
diff --git a/app/views/projects/buttons/_star.html.haml b/app/views/projects/buttons/_star.html.haml
index d4dcfbdff54..35318f68f57 100644
--- a/app/views/projects/buttons/_star.html.haml
+++ b/app/views/projects/buttons/_star.html.haml
@@ -6,12 +6,11 @@
   .count-badge.d-inline-flex.align-item-stretch.btn-group
     = render Pajamas::ButtonComponent.new(size: :medium, icon: icon, button_text_classes: button_text_classes, button_options: { class: 'star-btn toggle-star', data: { endpoint: toggle_star_project_path(@project, :json) } }) do
       - button_text
-    = link_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'gl-button btn btn-default has-tooltip star-count count' do
+    = link_button_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'has-tooltip star-count count' do
       = @project.star_count
 - else
   .count-badge.d-inline-flex.align-item-stretch.btn-group
-    = link_to new_user_session_path, class: 'gl-button btn btn-default has-tooltip star-btn', title: s_('ProjectOverview|You must sign in to star a project') do
-      = sprite_icon('star-o', css_class: 'icon')
-      %span= s_('ProjectOverview|Star')
-    = link_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'gl-button btn btn-default has-tooltip star-count count' do
+    = link_button_to new_user_session_path, class: 'has-tooltip star-btn', title: s_('ProjectOverview|You must sign in to star a project'), icon: 'star-o' do
+      = s_('ProjectOverview|Star')
+    = link_button_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'has-tooltip star-count count' do
       = @project.star_count
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index ecdd43a54f9..4017db459a9 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -103,33 +103,28 @@
     .gl-text-right
       .btn-group
         - if can?(current_user, :read_job_artifacts, job) && job.artifacts?
-          = link_to download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: _('Download artifacts'), class: 'gl-button btn btn-default btn-icon' do
-            = sprite_icon('download', css_class: 'gl-icon')
+          = link_button_to nil, download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: _('Download artifacts'), icon: 'download'
         - if can?(current_user, :update_build, job)
           - if job.active?
-            = link_to cancel_project_job_path(job.project, job, continue: { to: request.fullpath }), method: :post, title: _('Cancel'), class: 'gl-button btn btn-default btn-icon' do
-              = sprite_icon('cancel', css_class: 'gl-icon')
+            = link_button_to nil, cancel_project_job_path(job.project, job, continue: { to: request.fullpath }), method: :post, title: _('Cancel'), icon: 'cancel'
           - elsif job.scheduled?
-            .gl-button.btn.btn-default.btn-icon.disabled{ disabled: true }
-              = sprite_icon('planning', css_class: 'gl-icon')
+            = render Pajamas::ButtonComponent.new(disabled: true, icon: 'planning') do
               %time.js-remaining-time{ datetime: job.scheduled_at.utc.iso8601 }
                 = duration_in_numbers(job.execute_in)
             - confirmation_message = s_("DelayedJobs|Are you sure you want to run %{job_name} immediately? This job will run automatically after it's timer finishes.") % { job_name: job.name }
-            = link_to play_project_job_path(job.project, job, return_to: request.original_url),
+            = link_button_to nil, play_project_job_path(job.project, job, return_to: request.original_url),
               method: :post,
               title: s_('DelayedJobs|Start now'),
-              class: 'gl-button btn btn-default btn-icon has-tooltip',
-              data: { confirm: confirmation_message } do
-              = sprite_icon('play', css_class: 'gl-icon')
-            = link_to unschedule_project_job_path(job.project, job, return_to: request.original_url),
+              class: 'has-tooltip',
+              data: { confirm: confirmation_message },
+              icon: 'play'
+            = link_button_to nil, unschedule_project_job_path(job.project, job, return_to: request.original_url),
               method: :post,
               title: s_('DelayedJobs|Unschedule'),
-              class: 'gl-button btn btn-default btn-icon has-tooltip' do
-              = sprite_icon('time-out', css_class: 'gl-icon')
+              class: 'has-tooltip',
+              icon: 'time-out'
           - elsif allow_retry
             - if job.playable? && !admin && can?(current_user, :update_build, job)
-              = link_to play_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Play'), class: 'gl-button btn btn-default btn-icon' do
-                = sprite_icon('play', css_class: 'gl-icon')
+              = link_button_to nil, play_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Play'), icon: 'play'
             - elsif job.retryable?
-              = link_to retry_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Retry'), class: 'gl-button btn btn-default btn-icon' do
-                = sprite_icon('retry', css_class: 'gl-icon')
+              = link_button_to nil, retry_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Retry'), icon: 'retry'
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index c161e1c9d2a..24d063d3b4d 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -19,7 +19,7 @@
       #{time_ago_with_tooltip(@commit.committed_date)}
 
   #js-commit-comments-button{ data: { comments_count: @notes_count.to_i } }
-  = link_to _('Browse files'), project_tree_path(@project, @commit), class: "btn gl-button btn-default gl-mr-3 gl-xs-w-full gl-xs-mb-3"
+  = link_button_to _('Browse files'), project_tree_path(@project, @commit), class: 'gl-mr-3 gl-xs-w-full gl-xs-mb-3'
   #js-commit-options-dropdown{ data: commit_options_dropdown_data(@project, @commit) }
 
 .commit-box{ data: { project_path: project_path(@project) } }
diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml
index f7ae462e8f9..382cb499fe1 100644
--- a/app/views/projects/commit/_pipelines_list.haml
+++ b/app/views/projects/commit/_pipelines_list.haml
@@ -4,6 +4,7 @@
 #commit-pipeline-table-view{ data: { disable_initialization: disable_initialization,
   endpoint: endpoint,
   full_path: @project.full_path,
+  graphql_path: api_graphql_path,
   "empty-state-svg-path" => image_path('illustrations/empty-state/empty-pipeline-md.svg'),
   "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
   "project-id": @project.id,
diff --git a/app/views/projects/commit/_signature_badge_user.html.haml b/app/views/projects/commit/_signature_badge_user.html.haml
deleted file mode 100644
index 656adef6a72..00000000000
--- a/app/views/projects/commit/_signature_badge_user.html.haml
+++ /dev/null
@@ -1,21 +0,0 @@
-- user = signature.signed_by_user
-
-- if user
-  = link_to user_path(user), class: 'gpg-popover-user-link' do
-    %div
-      = user_avatar_without_link(user: user, size: 32)
-
-    %div
-      %strong= user.name
-      %div= user.to_reference
-- elsif signature.gpg? # SSH signatures do not have an email embedded in them
-  - user_name = signature.gpg_key_user_name
-  - user_email = signature.gpg_key_user_email
-  - if user_name && user_email
-    = mail_to user_email do
-      %div
-        = user_avatar_without_link(user_name: user_name, user_email: user_email, size: 32)
-
-      %div
-        %strong= user_name
-        %div= user_email
diff --git a/app/views/projects/commit/_verified_system_signature_badge.html.haml b/app/views/projects/commit/_verified_system_signature_badge.html.haml
new file mode 100644
index 00000000000..96ff26ecbd7
--- /dev/null
+++ b/app/views/projects/commit/_verified_system_signature_badge.html.haml
@@ -0,0 +1,5 @@
+- title = _('Verified commit')
+- description = _('This commit was created in the GitLab UI, and signed with a GitLab-verified signature.')
+- locals = { signature: signature, title: title, description: description, label: _('Verified'), variant: 'success' }
+
+= render partial: 'projects/commit/signature_badge', locals: locals
diff --git a/app/views/projects/commit/x509/_signature_badge_user.html.haml b/app/views/projects/commit/x509/_signature_badge_user.html.haml
deleted file mode 100644
index da749172369..00000000000
--- a/app/views/projects/commit/x509/_signature_badge_user.html.haml
+++ /dev/null
@@ -1,19 +0,0 @@
-- user_email = signature.x509_certificate.email
-- user = signature.signed_by_user
-
-- if user
-  = link_to user_path(user), class: 'gpg-popover-user-link' do
-    %div
-      = user_avatar_without_link(user: user, size: 32)
-
-    %div
-      %strong= user.name
-      %div= user.to_reference
-
-- else
-  = mail_to user_email do
-    %div
-      = user_avatar_without_link(user_email: user_email, size: 32)
-
-    %div
-      %strong= user_email
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 6209ef48f96..13a406d442d 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -25,7 +25,7 @@
   .avatar-cell.d-none.d-sm-block
     = author_avatar(commit, size: 40, has_tooltip: false)
 
-  .commit-detail.flex-list.gl-display-flex.gl-justify-content-space-between.gl-align-items-flex-start.gl-flex-grow-1.gl-min-w-0
+  .commit-detail.flex-list.gl-display-flex.gl-justify-content-space-between.gl-align-items-center.gl-flex-grow-1.gl-min-w-0
     .commit-content{ data: { qa_selector: 'commit_content' } }
       - if view_details && merge_request
         = link_to commit.title, project_commit_path(project, commit.id, merge_request_iid: merge_request.iid), class: ["commit-row-message item-title js-onboarding-commit-item", ("font-italic" if commit.message.empty?)]
diff --git a/app/views/projects/commits/_commit_list.html.haml b/app/views/projects/commits/_commit_list.html.haml
index 22f4594c1d5..721040f9a09 100644
--- a/app/views/projects/commits/_commit_list.html.haml
+++ b/app/views/projects/commits/_commit_list.html.haml
@@ -4,7 +4,7 @@
 
 = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5'}, body_options: { class: 'gl-py-0'}) do |c|
   - c.with_header do
-    Commits (#{@total_commit_count})
+    = s_('CompareRevisions|Commits on Source (%{commits_amount})').html_safe % { commits_amount: @total_commit_count }
   - c.with_body do
     - if hidden > 0
       %ul.content-list
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 4c5a9acdf83..8afc9ade3e1 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -18,7 +18,7 @@
       .tree-controls
         - if @merge_request.present?
           .control.d-none.d-md-block
-            = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn gl-button'
+            = link_button_to _("View open merge request"), project_merge_request_path(@project, @merge_request)
         - elsif create_mr_button?(from: @ref, source_project: @project)
           .control.d-none.d-md-block
             = render Pajamas::ButtonComponent.new(variant: :confirm, href: create_mr_path(from: @ref, source_project: @project)) do
@@ -28,8 +28,7 @@
           = form_tag(project_commits_path(@project, @id, ref_type: @ref_type), method: :get, class: 'commits-search-form js-signature-container', data: { 'signatures-path' => namespace_project_signatures_path(ref_type: @ref_type)}) do
             = search_field_tag :search, params[:search], { placeholder: _('Search by message'), id: 'commits-search', class: 'form-control gl-form-input input-short gl-mt-3 gl-sm-mt-0 gl-min-w-full', spellcheck: false }
         .control.d-none.d-md-block
-          = link_to project_commits_path(@project, @id, rss_url_options), title: _("Commits feed"), class: 'btn gl-button btn-default btn-icon' do
-            = sprite_icon('rss')
+          = link_button_to nil, project_commits_path(@project, @id, rss_url_options), title: _("Commits feed"), icon: 'rss'
 
   = render_if_exists 'projects/commits/mirror_status'
 
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index 58da76a3231..4a29402bfe7 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -1,16 +1,6 @@
-- breadcrumb_title _("Compare revisions")
-- page_title _("Compare revisions")
+- breadcrumb_title s_("CompareRevisions|Compare revisions")
 
-%h1.page-title.gl-font-size-h-display
-  = _("Compare Git revisions")
-%div
-  - example_branch = capture do
-    %code.ref-name= @project.default_branch_or_main
-  - example_sha = capture do
-    %code.ref-name 4eedf23
-  = html_escape(_("To see what's changed or create a merge request, choose a branch or tag (like %{branch}), or enter a commit (like %{sha}).")) % { branch: example_branch.html_safe, sha: example_sha.html_safe }
-  %br
-  = html_escape(_("Changes are shown as if the %{b_open}source%{b_close} revision was being merged into the %{b_open}target%{b_close} revision.")) % { b_open: '<b>'.html_safe, b_close: '</b>'.html_safe }
+- page_title _("CompareRevisions|Compare revisions")
 
 .prepend-top-20
   #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, @compare_params) }
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 9185afc0771..5b6f7c392dd 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -1,7 +1,7 @@
-- add_to_breadcrumbs _("Compare revisions"), project_compare_index_path(@project)
-- page_title "#{params[:from]}...#{params[:to]}"
+- add_to_breadcrumbs s_("CompareRevisions|Compare revisions"), project_compare_index_path(@project)
+- page_title "#{params[:from]} to #{params[:to]}"
 
-.sub-header-block.gl-border-b-0.gl-mb-0
+.sub-header-block.gl-border-b-0.gl-mb-0.gl-pt-4
   .js-signature-container{ data: { 'signatures-path' => signatures_namespace_project_compare_index_path } }
     #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, params) }
 
@@ -20,13 +20,13 @@
   = render Pajamas::CardComponent.new(card_options: { class: "gl-bg-gray-50 gl-mb-5 gl-border-none gl-text-center" }) do |c|
     - c.with_body do
       %h4
-        = s_("CompareBranches|There isn't anything to compare.")
+        = s_("CompareRevisions|There isn't anything to compare.")
       %p.gl-mb-4.gl-line-height-24
         - if params[:to] == params[:from]
           - source_branch = capture do
             %span.ref-name= params[:from]
           - target_branch = capture do
             %span.ref-name= params[:to]
-          = (s_("CompareBranches|%{source_branch} and %{target_branch} are the same.") % { source_branch: source_branch, target_branch: target_branch }).html_safe
+          = (s_("CompareRevisions|%{source_branch} and %{target_branch} are the same.") % { source_branch: source_branch, target_branch: target_branch }).html_safe
         - else
           = _("You'll need to use different branch names to get a valid comparison.")
diff --git a/app/views/projects/confluences/show.html.haml b/app/views/projects/confluences/show.html.haml
index 6fec9b501ea..283408ffa63 100644
--- a/app/views/projects/confluences/show.html.haml
+++ b/app/views/projects/confluences/show.html.haml
@@ -8,6 +8,6 @@
     - wiki_confluence_epic_link_url = 'https://gitlab.com/groups/gitlab-org/-/epics/3629'
     - wiki_confluence_epic_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wiki_confluence_epic_link_url }
     = html_escape(s_("WikiEmpty|You've enabled the Confluence Workspace integration. Your wiki will be viewable directly within Confluence. We are hard at work integrating Confluence more seamlessly into GitLab. If you'd like to stay up to date, follow our %{wiki_confluence_epic_link_start}Confluence epic%{wiki_confluence_epic_link_end}.")) % { wiki_confluence_epic_link_start: wiki_confluence_epic_link_start, wiki_confluence_epic_link_end: '</a>'.html_safe }
-  = link_to @project.confluence_integration.confluence_url, target: '_blank', rel: 'noopener noreferrer', class: 'gl-button btn btn-confirm external-url', title: s_('WikiEmpty|Go to Confluence') do
+  = link_button_to @project.confluence_integration.confluence_url, target: '_blank', rel: 'noopener noreferrer', class: 'external-url', title: s_('WikiEmpty|Go to Confluence'), variant: :confirm do
     = s_('WikiEmpty|Go to Confluence')
     = sprite_icon('external-link')
diff --git a/app/views/projects/deploy_keys/edit.html.haml b/app/views/projects/deploy_keys/edit.html.haml
index 91444a00334..997443d5fa9 100644
--- a/app/views/projects/deploy_keys/edit.html.haml
+++ b/app/views/projects/deploy_keys/edit.html.haml
@@ -7,4 +7,4 @@
     = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
     .form-actions
       = f.submit _('Save changes'), pajamas_button: true
-      = link_to _('Cancel'), project_settings_repository_path(@project), class: 'gl-button btn btn-default btn-cancel'
+      = link_button_to _('Cancel'), project_settings_repository_path(@project)
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 982ecbbae51..9193fc4ef25 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -12,7 +12,7 @@
   .files-changed-inner
     .inline-parallel-buttons.gl-display-none.gl-md-display-flex.gl-relative
       - if !diffs_expanded? && diff_files.any?(&:collapsed?)
-        = link_to _('Expand all'), url_for(safe_params.merge(expanded: 1, format: nil)), class: 'gl-button btn btn-default'
+        = link_button_to _('Expand all'), url_for(safe_params.merge(expanded: 1, format: nil))
       - if show_whitespace_toggle
         - if current_controller?(:commit)
           = commit_diff_whitespace_link(diffs.project, @commit, class: 'd-none d-sm-inline-block')
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 5ec95c3095d..3db1467df60 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -18,9 +18,7 @@
         #js-diff-stats{ data: diff_file_stats_data(diff_file) }
         - if diff_file.blob&.readable_text?
           - unless @diff_notes_disabled
-            %span.has-tooltip{ title: _("Toggle comments for this file") }
-              = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default btn-icon selected' do
-                = sprite_icon('comment')
+            = link_button_to nil, '#', class: 'js-toggle-diff-comments has-tooltip', icon: 'comment', title: _("Toggle comments for this file")
           \
           - if editable_diff?(diff_file)
             - link_opts = @merge_request.persisted? ? { from_merge_request_iid: @merge_request.iid } : {}
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index a5224db1be9..98e8c2dd61b 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -7,12 +7,10 @@
 
 = render_if_exists 'shared/ultimate_feature_removal_banner', project: @project
 
-- if Feature.enabled?(:show_pages_in_deployments_menu, current_user, type: :experiment)
-  = render Pajamas::AlertComponent.new(variant: :info,
-      title: _('GitLab Pages has moved'),
-      alert_options: { class: 'gl-my-5', data: { feature_id: Users::CalloutsHelper::PAGES_MOVED_CALLOUT, dismiss_endpoint: callouts_path, defer_links: 'true' } }) do |c|
-    - c.with_body do
-      = _('To go to GitLab Pages, on the left sidebar, select %{pages_link}.').html_safe % {pages_link: link_to('Deployments > Pages', project_pages_path(@project)).html_safe}
+= render Pajamas::AlertComponent.new(title: _('GitLab Pages has moved'),
+    alert_options: { class: 'gl-my-5', data: { feature_id: Users::CalloutsHelper::PAGES_MOVED_CALLOUT, dismiss_endpoint: callouts_path, defer_links: 'true' } }) do |c|
+  - c.with_body do
+    = _('To go to GitLab Pages, on the left sidebar, select %{pages_link}.').html_safe % {pages_link: link_to('Deploy > Pages', project_pages_path(@project)).html_safe}
 
 %section.settings.general-settings.no-animate.expanded#js-general-settings
   .settings-header
@@ -79,8 +77,8 @@
       %p
         = _('Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.')
         = link_to _('Learn more.'), help_page_path('administration/housekeeping'), target: '_blank', rel: 'noopener noreferrer'
-      = link_to _('Run housekeeping'), housekeeping_project_path(@project),
-        method: :post, class: "btn gl-button btn-default"
+      = render Pajamas::ButtonComponent.new(method: :post, href: housekeeping_project_path(@project)) do
+        = _('Run housekeeping')
 
       .gl-display-inline-flex
         #js-project-prune-unreachable-objects-button{ data: { prune_objects_path: housekeeping_project_path(@project, prune: true), prune_objects_doc_path: help_page_path('administration/housekeeping', anchor: 'prune-unreachable-objects') } }
diff --git a/app/views/projects/environments/edit.html.haml b/app/views/projects/environments/edit.html.haml
index c7752a45c63..1c107784e08 100644
--- a/app/views/projects/environments/edit.html.haml
+++ b/app/views/projects/environments/edit.html.haml
@@ -2,7 +2,7 @@
 - add_page_specific_style 'page_bundles/environments'
 
 #js-edit-environment{ data: { project_environments_path: project_environments_path(@project),
-                              update_environment_path: project_environment_path(@project, @environment),
                               protected_environment_settings_path: (project_settings_ci_cd_path(@project, anchor: 'js-protected-environments-settings') if @project.licensed_feature_available?(:protected_environments)),
                               project_path: @project.full_path,
-                              environment: environment_data(@environment) } }
+                              environment_name: @environment.name,
+                              kas_tunnel_url: ::Gitlab::Kas.tunnel_url } }
diff --git a/app/views/projects/environments/empty_metrics.html.haml b/app/views/projects/environments/empty_metrics.html.haml
deleted file mode 100644
index df05909e8ef..00000000000
--- a/app/views/projects/environments/empty_metrics.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-- page_title _("Metrics")
-
-.row.empty-state
-  .col-sm-12
-    .svg-content
-      = image_tag 'illustrations/operations_metrics_empty.svg'
-  .col-12
-    .text-content
-      %h4.text-center
-        = s_('Environments|No deployed environments')
-      %p.state-description
-        = s_('Metrics|Check out the CI/CD documentation on deploying to an environment')
-      .text-center
-        = link_to s_("Environments|Learn about environments"), help_page_path('ci/environments/index.md'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
deleted file mode 100644
index 31041d124e4..00000000000
--- a/app/views/projects/environments/metrics.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-- add_page_specific_style 'page_bundles/prometheus'
-
-- page_title _("Metrics Dashboard"), @environment.name
-
-.prometheus-container
-  #prometheus-graphs{ data: metrics_data(@project, @environment) }
diff --git a/app/views/projects/environments/new.html.haml b/app/views/projects/environments/new.html.haml
index 9e8484b88b9..301c19ee6f0 100644
--- a/app/views/projects/environments/new.html.haml
+++ b/app/views/projects/environments/new.html.haml
@@ -3,4 +3,4 @@
 - page_title s_("Environments|New Environment")
 - add_page_specific_style 'page_bundles/environments'
 
-#js-new-environment{ data: { project_environments_path: project_environments_path(@project), project_path: @project.full_path, } }
+#js-new-environment{ data: { project_environments_path: project_environments_path(@project), project_path: @project.full_path, kas_tunnel_url: ::Gitlab::Kas.tunnel_url } }
diff --git a/app/views/projects/environments/terminal.html.haml b/app/views/projects/environments/terminal.html.haml
index 7c837d4ded0..c2ad9191800 100644
--- a/app/views/projects/environments/terminal.html.haml
+++ b/app/views/projects/environments/terminal.html.haml
@@ -13,8 +13,7 @@
     .col-sm-6
       .nav-controls
         - if @environment.external_url.present?
-          = link_to @environment.external_url, class: 'gl-button btn btn-default', target: '_blank', rel: 'noopener noreferrer nofollow' do
-            = sprite_icon('external-link')
+          = link_button_to nil, @environment.external_url, target: '_blank', rel: 'noopener noreferrer nofollow', icon: 'external-link'
         = render 'projects/deployments/actions', deployment: @environment.last_deployment
 
 .terminal-container{ class: container_class }
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index afb49c48146..7e93e44c463 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -2,11 +2,11 @@
 - add_page_specific_style 'page_bundles/tree'
 
 .file-finder-holder.tree-holder.clearfix.js-file-finder{ 'data-file-find-url': "#{escape_javascript(project_files_path(@project, @ref, format: :json))}", 'data-find-tree-url': escape_javascript(project_tree_path(@project, @ref)), 'data-blob-url-template': escape_javascript(project_blob_path(@project, @ref)) }
-  .nav-block
-    .tree-ref-holder
+  .nav-block.gl-xs-mr-0
+    .tree-ref-holder.gl-xs-mb-3.gl-xs-w-full
       #js-blob-ref-switcher{ data: { project_id: @project.id, ref: @ref, namespace: "/-/find_file" } }
-    %ul.breadcrumb.repo-breadcrumb
-      %li.breadcrumb-item
+    %ul.breadcrumb.repo-breadcrumb.gl-flex-nowrap
+      %li.breadcrumb-item.gl-white-space-nowrap
         = link_to project_tree_path(@project, @ref) do
           = @project.path
       %li.file-finder.breadcrumb-item
diff --git a/app/views/projects/forks/error.html.haml b/app/views/projects/forks/error.html.haml
index cff5899b960..f589c8f9566 100644
--- a/app/views/projects/forks/error.html.haml
+++ b/app/views/projects/forks/error.html.haml
@@ -18,4 +18,4 @@
             = error
 
     - c.with_actions do
-      = link_to _('Try to fork again'), new_project_fork_path(@project), title: _("Fork"), class: "btn gl-alert-action btn-info btn-md gl-button"
+      = link_button_to _('Try to fork again'), new_project_fork_path(@project), title: _("Fork"), class: 'gl-alert-action', variant: :confirm
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index d28ee30b6f9..49047749b71 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -20,12 +20,10 @@
 
     - if current_user && can?(current_user, :fork_project, @project)
       - if current_user.already_forked?(@project) && current_user.forkable_namespaces.size < 2
-        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: _('Go to your fork'), class: 'btn gl-button btn-confirm gl-md-ml-3' do
-          = sprite_icon('fork', size: 12)
-          %span= _('Fork')
+        = link_button_to namespace_project_path(current_user, current_user.fork_of(@project)), title: _('Go to your fork'), class: 'gl-md-ml-3', variant: :confirm, icon: 'fork' do
+          = _('Fork')
       - else
-        = link_to new_project_fork_path(@project), title: _("Fork project"), class: 'btn gl-button btn-confirm gl-md-ml-3 gl-mt-3 gl-md-mt-0' do
-          = sprite_icon('fork', size: 12)
-          %span= _('Fork')
+        = link_button_to new_project_fork_path(@project), title: _("Fork project"), class: 'gl-md-ml-3 gl-mt-3 gl-md-mt-0', variant: :confirm, icon: 'fork' do
+          = _('Fork')
 
 = render 'projects', projects: @forks
diff --git a/app/views/projects/hook_logs/show.html.haml b/app/views/projects/hook_logs/show.html.haml
index 0f4dc4b5e32..30084e3310b 100644
--- a/app/views/projects/hook_logs/show.html.haml
+++ b/app/views/projects/hook_logs/show.html.haml
@@ -9,6 +9,6 @@
 - if @hook_log.oversize?
   = button_tag _("Resend Request"), class: "btn gl-button btn-default float-right gl-ml-3 has-tooltip", disabled: true, title: _("Request data is too large")
 - else
-  = link_to _("Resend Request"), @hook_log.present.retry_path, method: :post, class: "btn gl-button btn-default float-right gl-ml-3"
+  = link_button_to _("Resend Request"), @hook_log.present.retry_path, method: :post, class: 'float-right gl-ml-3'
 
 = render partial: 'shared/hook_logs/content', locals: { hook_log: @hook_log }
diff --git a/app/views/projects/hooks/edit.html.haml b/app/views/projects/hooks/edit.html.haml
index b553249c4b8..26ec09c76db 100644
--- a/app/views/projects/hooks/edit.html.haml
+++ b/app/views/projects/hooks/edit.html.haml
@@ -3,17 +3,16 @@
 
 = render 'shared/web_hooks/hook_errors', hook: @hook
 
-.row.gl-mt-3
-  .col-lg-3
-    = render 'shared/web_hooks/title_and_docs', hook: @hook
+.gl-mt-5
+  = render 'shared/web_hooks/title_and_docs', hook: @hook
 
-  .col-lg-9.gl-mb-3
-    = gitlab_ui_form_for [@project, @hook], as: :hook, url: project_hook_path(@project, @hook), html: { class: 'js-webhook-form' } do |f|
-      = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
+  = gitlab_ui_form_for [@project, @hook], as: :hook, url: project_hook_path(@project, @hook), html: { class: 'js-webhook-form' } do |f|
+    = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
 
-      = f.submit _('Save changes'), pajamas_button: true
+    %div
+      = f.submit _('Save changes'), pajamas_button: true, class: 'gl-sm-mr-3'
       = render 'shared/web_hooks/test_button', hook: @hook
-      = link_to _('Delete'), project_hook_path(@project, @hook), method: :delete, class: 'btn gl-button btn-danger float-right', aria: { label: s_('Webhooks|Delete webhook') }, data: { confirm: s_('Webhooks|Are you sure you want to delete this project hook?'), confirm_btn_variant: 'danger' }
+      = link_button_to _('Delete'), project_hook_path(@project, @hook), method: :delete, class: 'gl-float-right', aria: { label: s_('Webhooks|Delete webhook') }, data: { confirm: s_('Webhooks|Are you sure you want to delete this project hook?'), confirm_btn_variant: 'danger' }, variant: :danger
 
 %hr
 
diff --git a/app/views/projects/hooks/index.html.haml b/app/views/projects/hooks/index.html.haml
index 4d71161c96e..b57adc0ef0d 100644
--- a/app/views/projects/hooks/index.html.haml
+++ b/app/views/projects/hooks/index.html.haml
@@ -2,13 +2,6 @@
 - page_title _('Webhooks')
 - @force_desktop_expanded_sidebar = true
 
-.row.gl-mt-3.js-search-settings-section
-  .col-lg-4
-    = render 'shared/web_hooks/title_and_docs', hook: @hook
-
-  .col-lg-8.gl-mb-3
-    = gitlab_ui_form_for @hook, as: :hook, url: polymorphic_path([@project, :hooks]), html: { class: 'js-webhook-form' } do |f|
-      = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
-      = f.submit _('Add webhook'), pajamas_button: true, data: { qa_selector: "create_webhook_button" }
-
-    = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class
+.gl-mt-3.js-search-settings-section
+  = render 'shared/web_hooks/title_and_docs', hook: @hook
+  = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class, partial: 'shared/web_hooks/form', url: polymorphic_path([@project, :hooks])
diff --git a/app/views/projects/integrations/shimos/show.html.haml b/app/views/projects/integrations/shimos/show.html.haml
index 92b9e03d5bd..e6cd8c15809 100644
--- a/app/views/projects/integrations/shimos/show.html.haml
+++ b/app/views/projects/integrations/shimos/show.html.haml
@@ -6,5 +6,5 @@
     = s_('Shimo|Shimo Workspace integration is enabled')
   %p
     = s_("Shimo|You've enabled the Shimo Workspace integration. You can view your wiki directly in Shimo.")
-  = link_to @project.shimo_integration.external_wiki_url, target: '_blank', rel: 'noopener noreferrer', class: 'gl-button btn btn-confirm', title: s_('Shimo|Go to Shimo Workspace') do
+  = link_button_to @project.shimo_integration.external_wiki_url, target: '_blank', rel: 'noopener noreferrer', title: s_('Shimo|Go to Shimo Workspace'), variant: :confirm do
     = s_('Shimo|Go to Shimo Workspace')
diff --git a/app/views/projects/issues/_related_branches.html.haml b/app/views/projects/issues/_related_branches.html.haml
index 3d6a266dc4d..21f1a4d19fa 100644
--- a/app/views/projects/issues/_related_branches.html.haml
+++ b/app/views/projects/issues/_related_branches.html.haml
@@ -1,24 +1,25 @@
 - if @related_branches.any?
   - if @related_branches.any?
-    = render Pajamas::CardComponent.new(card_options: { class: 'gl-bg-gray-10 gl-mt-5 gl-mb-0' }, header_options: { class: 'gl-bg-white gl-pl-5 gl-pr-4 gl-py-4' } , body_options: { class: 'gl-py-3 gl-px-4' }) do |c|
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' } , body_options: { class: 'gl-new-card-body' }) do |c|
       - c.with_header do
-        %h3.card-title.h5.gl-my-0.gl-display-flex.gl-align-items-center.gl-flex-grow-1.gl-relative.gl-line-height-24
-          = link_to "", "#related-branches", class: "gl-link anchor position-absolute gl-text-decoration-none", "aria-hidden": true
-          = _('Related branches')
-          .gl-display-inline-flex.gl-mx-3.gl-text-gray-500
-            .gl-display-inline-flex.gl-align-items-center
-              = sprite_icon('branch', css_class: "gl-mr-2 gl-text-gray-500 gl-icon")
-              = @related_branches.size
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = link_to "", "#related-branches", class: "gl-link anchor position-absolute gl-text-decoration-none", "aria-hidden": true
+            = _('Related branches')
+          .gl-new-card-count
+            = sprite_icon('branch', css_class: "gl-mr-2 gl-text-gray-500 gl-icon")
+            = @related_branches.size
       - c.with_body do
-        %ul.related-merge-requests.content-list.gl-p-3!
-          - @related_branches.each do |branch|
-            %li.list-item{ class: "gl-py-0! gl-border-0!" }
-              .item-body.gl-display-flex.align-items-center.gl-px-3.gl-pr-2.gl-mx-n2
-                .item-contents.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-flex-grow-1.gl-min-h-7
-                  .item-title.gl-display-flex.mb-xl-0.gl-min-w-0
-                    - if branch[:pipeline_status].present?
-                      %span.related-branch-ci-status
-                        = render 'ci/status/icon', status: branch[:pipeline_status]
-                    %span.related-branch-info
-                      %strong
-                        = link_to branch[:name], branch[:link], class: "ref-name"
+        .gl-new-card-content
+          %ul.related-merge-requests.content-list
+            - @related_branches.each do |branch|
+              %li.list-item{ class: "gl-py-0! gl-border-0!" }
+                .item-body.gl-display-flex.align-items-center.gl-px-3.gl-pr-2.gl-mx-n2
+                  .item-contents.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-flex-grow-1.gl-min-h-7
+                    .item-title.gl-display-flex.mb-xl-0.gl-min-w-0
+                      - if branch[:pipeline_status].present?
+                        %span.related-branch-ci-status
+                          = render 'ci/status/icon', status: branch[:pipeline_status]
+                      %span.related-branch-info
+                        %strong
+                          = link_to branch[:name], branch[:link], class: "ref-name"
diff --git a/app/views/projects/issues/service_desk.html.haml b/app/views/projects/issues/service_desk.html.haml
index 3cc419716e5..9793f21e4a9 100644
--- a/app/views/projects/issues/service_desk.html.haml
+++ b/app/views/projects/issues/service_desk.html.haml
@@ -8,15 +8,26 @@
 - support_bot_attrs = { service_desk_enabled: @project.service_desk_enabled?, **UserSerializer.new.represent(User.support_bot) }.to_json
 
 .js-service-desk-issues.service-desk-issues{ data: { support_bot: support_bot_attrs } }
-  .top-area
-    = render 'shared/issuable/nav', type: :issues
-    .nav-controls.d-block.d-sm-none
-      = render "projects/issues/service_desk/nav_btns", show_feed_buttons: false, show_import_button: false, show_export_button: false
+  - if ::Feature.enabled?(:service_desk_vue_list, @project)
+    .js-service-desk-list{ data: { project_data: project_issues_list_data(@project, current_user),
+      service_desk_email_address: @project.service_desk_address,
+      can_admin_issues: can?(current_user, :admin_issue, @project).to_s,
+      can_edit_project_settings: can?(current_user, :admin_project, @project).to_s,
+      service_desk_callout_svg_path: image_path('service_desk_callout.svg'),
+      service_desk_settings_path: edit_project_path(@project, anchor: 'js-service-desk'),
+      service_desk_help_path: help_page_path('user/project/service_desk'),
+      is_service_desk_supported: Gitlab::ServiceDesk.supported?.to_s,
+      is_service_desk_enabled: @project.service_desk_enabled?.to_s } }
+  - else
+    .top-area
+      = render 'shared/issuable/nav', type: :issues
+      .nav-controls.gl-display-block.gl-sm-display-none
+        = render "projects/issues/service_desk/nav_btns", show_feed_buttons: false, show_import_button: false, show_export_button: false
 
-  - if @issues.present?
-    = render 'shared/issuable/search_bar', type: :issues
-    - if Gitlab::ServiceDesk.supported?
-      = render 'projects/issues/service_desk/service_desk_info_content'
+    - if @issues.present?
+      = render 'shared/issuable/search_bar', type: :issues
+      - if Gitlab::ServiceDesk.supported?
+        = render 'projects/issues/service_desk/service_desk_info_content'
 
-  .issues-holder
-    = render 'projects/issues/issues', empty_state_path: 'projects/issues/service_desk/service_desk_empty_state'
+    .issues-holder
+      = render 'projects/issues/issues', empty_state_path: 'projects/issues/service_desk/service_desk_empty_state'
diff --git a/app/views/projects/issues/service_desk/_issue.html.haml b/app/views/projects/issues/service_desk/_issue.html.haml
index 04ea6103b83..5b98712d3eb 100644
--- a/app/views/projects/issues/service_desk/_issue.html.haml
+++ b/app/views/projects/issues/service_desk/_issue.html.haml
@@ -33,7 +33,7 @@
           %span.issuable-due-date.d-none.d-sm-inline-block.has-tooltip{ class: "#{'cred' if issue.overdue? && !issue.closed?}", title: _('Due date') }
             &nbsp;
             = sprite_icon('calendar')
-            = issue.due_date.to_s(:medium)
+            = issue.due_date.to_fs(:medium)
 
         = render_if_exists "projects/issues/issue_weight", issue: issue
         = render_if_exists "projects/issues/health_status", issue: issue
diff --git a/app/views/projects/issues/service_desk/_nav_btns.html.haml b/app/views/projects/issues/service_desk/_nav_btns.html.haml
index a0a290f340a..3b7b3f57abd 100644
--- a/app/views/projects/issues/service_desk/_nav_btns.html.haml
+++ b/app/views/projects/issues/service_desk/_nav_btns.html.haml
@@ -7,12 +7,13 @@
 
 .nav-controls.issues-nav-controls.gl-font-size-0
   - if @can_bulk_update
-    = button_tag _("Bulk edit"), class: "gl-button btn btn-default gl-mr-3 js-bulk-update-toggle"
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-mr-3 js-bulk-update-toggle' }) do
+      = _("Bulk edit")
   - if show_new_issue_link?(@project)
-    = link_to _("New issue"), new_project_issue_path(@project,
-                                                  issue: { milestone_id: finder.milestones.first.try(:id) }),
-                                                  class: "gl-button btn btn-confirm gl-mr-3",
-                                                  id: "new_issue_link"
+    = render Pajamas::ButtonComponent.new(variant: :confirm,
+                                          href: new_project_issue_path(@project, issue: { milestone_id: finder.milestones.first.try(:id) }),
+                                          button_options: { id: 'new_issue_link', class: 'gl-mr-3' }) do
+      = _("New issue")
 
 .dropdown.gl-dropdown
   = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md gl-button gl-dropdown gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret has-tooltip gl-display-none! gl-md-display-inline-flex!", data: { toggle: 'dropdown', title: _('Actions') } do
diff --git a/app/views/projects/issues/service_desk/_service_desk_empty_state.html.haml b/app/views/projects/issues/service_desk/_service_desk_empty_state.html.haml
index 855625368a9..831bd107961 100644
--- a/app/views/projects/issues/service_desk/_service_desk_empty_state.html.haml
+++ b/app/views/projects/issues/service_desk/_service_desk_empty_state.html.haml
@@ -21,7 +21,7 @@
 
       - if can_edit_project_settings && !service_desk_enabled
         .text-center
-          = link_to s_("ServiceDesk|Enable Service Desk"), edit_project_path(@project), class: 'gl-button btn btn-confirm'
+          = link_button_to s_("ServiceDesk|Enable Service Desk"), edit_project_path(@project), variant: :confirm
 - else
   .empty-state
     .svg-content
diff --git a/app/views/projects/issues/service_desk/_service_desk_info_content.html.haml b/app/views/projects/issues/service_desk/_service_desk_info_content.html.haml
index 95837748c7f..093a47e63be 100644
--- a/app/views/projects/issues/service_desk/_service_desk_info_content.html.haml
+++ b/app/views/projects/issues/service_desk/_service_desk_info_content.html.haml
@@ -21,4 +21,4 @@
 
     - if can_edit_project_settings && !service_desk_enabled
       .gl-mt-3
-        = link_to s_("ServiceDesk|Enable Service Desk"), edit_project_path(@project), class: 'gl-button btn btn-confirm'
+        = link_button_to s_("ServiceDesk|Enable Service Desk"), edit_project_path(@project), variant: :confirm
diff --git a/app/views/projects/jobs/_table.html.haml b/app/views/projects/jobs/_table.html.haml
index 954c77a21f3..0bb512b4035 100644
--- a/app/views/projects/jobs/_table.html.haml
+++ b/app/views/projects/jobs/_table.html.haml
@@ -12,7 +12,7 @@
             = s_('Jobs|Use jobs to automate your tasks')
           %p
             = s_('Jobs|Jobs are the building blocks of a GitLab CI/CD pipeline. Each job has a specific task, like testing code. To set up jobs in a CI/CD pipeline, add a CI/CD configuration file to your project.')
-          = link_to s_('Jobs|Create CI/CD configuration file'), project_ci_pipeline_editor_path(project), class: 'btn gl-button btn-confirm js-empty-state-button'
+          = link_button_to s_('Jobs|Create CI/CD configuration file'), project_ci_pipeline_editor_path(project), class: 'js-empty-state-button', variant: :confirm
   - else
     .nothing-here-block= s_('Jobs|No jobs to show')
 - else
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index 5f249f693ff..b151c355b3e 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -7,4 +7,4 @@
 
 = render_if_exists "shared/shared_runners_minutes_limit_flash_message"
 
-#js-job-page{ data: jobs_data }
+#js-job-page{ data: jobs_data(@project, @build) }
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index 7a4ae409ee2..e1c904d000f 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -16,12 +16,13 @@
   .labels-container
     -# Only show it in the first page
     - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
-    .prioritized-labels.gl-rounded-base.gl-border.gl-bg-gray-10.gl-mt-4{ class: [('hide' if hide), ('is-not-draggable' unless can_admin_label)] }
-      .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-top-base.gl-border-b
-        %h3.card-title.h5.gl-m-0.gl-relative.gl-line-height-24
-          = _('Prioritized labels')
-        .gl-font-sm.gl-font-weight-semibold.gl-text-gray-500
-          = _('Drag to reorder prioritized labels and change their relative priority.')
+    .prioritized-labels.gl-new-card{ class: [('hide' if hide), ('is-not-draggable' unless can_admin_label)] }
+      .gl-new-card-header
+        .gl-new-card-title-wrapper.gl-flex-direction-column
+          %h3.gl-new-card-title
+            = _('Prioritized labels')
+          .gl-new-card-description
+            = _('Drag to reorder prioritized labels and change their relative priority.')
       .js-prioritized-labels.gl-px-3.gl-rounded-base.manage-labels-list{ data: { url: set_priorities_project_labels_path(@project), sortable: can_admin_label } }
         #js-priority-labels-empty-state.priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty? && search.blank?}" }
           = render 'shared/empty_states/priority_labels'
@@ -32,12 +33,14 @@
             = _('No prioritized labels with such name or description')
 
     - if @labels.any?
-      .other-labels.gl-rounded-base.gl-border.gl-bg-gray-10.gl-mt-4
-        .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-top-base.gl-border-b
-          %h3.card-title.h5.gl-m-0.gl-relative.gl-line-height-24{ class: ('hide' if hide) }= _('Other labels')
-        .js-other-labels.gl-px-3.gl-rounded-base.manage-labels-list
-          = render partial: 'shared/label', collection: @labels, as: :label, locals: { subject: @project }
-          = paginate @labels, theme: 'gitlab'
+      .other-labels.gl-new-card
+        .gl-new-card-header
+          .gl-new-card-title-wrapper
+            %h3.gl-new-card-title{ class: ('hide' if hide) }= _('Other labels')
+        .gl-new-card-body
+          .js-other-labels.manage-labels-list.gl-new-card-content
+            = render partial: 'shared/label', collection: @labels, as: :label, locals: { subject: @project }
+            = paginate @labels, theme: 'gitlab'
 
     - elsif search.present?
       .other-labels
diff --git a/app/views/projects/mattermosts/_no_teams.html.haml b/app/views/projects/mattermosts/_no_teams.html.haml
index 5886c0565b1..c53e805fae1 100644
--- a/app/views/projects/mattermosts/_no_teams.html.haml
+++ b/app/views/projects/mattermosts/_no_teams.html.haml
@@ -9,4 +9,4 @@
   and try again.
 %hr
 .clearfix
-  = link_to 'Go back', edit_project_settings_integration_path(@project, @integration), class: 'gl-button btn btn-lg float-right'
+  = link_button_to 'Go back', edit_project_settings_integration_path(@project, @integration), class: 'float-right'
diff --git a/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml b/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
index a3536ead240..ab841d4f1b2 100644
--- a/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
+++ b/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
@@ -1,6 +1,7 @@
 .js-mr-more-dropdown{ data: {
   merge_request: @merge_request.to_json,
   project_path: @project.full_path,
+  url: merge_request_url(@merge_request),
   edit_url: edit_project_merge_request_path(@project, @merge_request),
   is_current_user: issuable_author_is_current_user(@merge_request),
   is_logged_in: current_user,
@@ -11,5 +12,4 @@
   clipboard_text: @merge_request.to_reference(full: true),
   report_abuse_path: add_category_abuse_reports_path,
   reported_user_id: @merge_request.author.id,
-  reported_from_url: merge_request_url(@merge_request),
 } }
diff --git a/app/views/projects/merge_requests/_form.html.haml b/app/views/projects/merge_requests/_form.html.haml
index 5f1c72156eb..6d2e2cfcc54 100644
--- a/app/views/projects/merge_requests/_form.html.haml
+++ b/app/views/projects/merge_requests/_form.html.haml
@@ -1,3 +1,4 @@
 = gitlab_ui_form_for [@project, @merge_request],
            html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f|
+  = render 'source_and_target', mr: @merge_request
   = render 'shared/issuable/form', f: f, issuable: @merge_request, presenter: @mr_presenter
diff --git a/app/views/projects/merge_requests/_mr_box.html.haml b/app/views/projects/merge_requests/_mr_box.html.haml
index 6f662b81dd7..1774401ed78 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-center.gl-flex-wrap{ class: "#{'is-merge-request' if moved_mr_sidebar_enabled? && !fluid_layout}" }
+.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
   = merge_request_header(@project, @merge_request)
diff --git a/app/views/projects/merge_requests/_source_and_target.html.haml b/app/views/projects/merge_requests/_source_and_target.html.haml
new file mode 100644
index 00000000000..68cd4fe9372
--- /dev/null
+++ b/app/views/projects/merge_requests/_source_and_target.html.haml
@@ -0,0 +1,10 @@
+%span{
+  id: "js-merge-request-metadata",
+  class: ["js-merge-request-metadata", "gl-display-none"],
+  data: {
+    "source-project-id": mr.source_project_id,
+    "source-branch": mr.source_branch,
+    "target-project-id": mr.target_project_id,
+    "target-branch": mr.target_branch
+  }
+}
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 576fed58609..606d4e06d33 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -23,4 +23,9 @@
     window.gl.mrWidgetData.user_preferences_gitpod_path = '#{profile_preferences_path(anchor: 'user_gitpod_enabled')}';
     window.gl.mrWidgetData.user_profile_enable_gitpod_path = '#{profile_path(user: { gitpod_enabled: true })}';
 
-#js-vue-mr-widget.mr-widget
+%h2#merge-request-widgets-heading.gl-sr-only
+  = _("Merge request reports")
+#js-vue-mr-widget.mr-widget{
+  role: 'region',
+  'aria-labelledby': 'merge-request-widgets-heading'
+}
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index bec7cb3fd34..a7151421acb 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -1,6 +1,7 @@
 %h1.page-title.gl-font-size-h-display
   = _('New merge request')
 = gitlab_ui_form_for [@project, @merge_request], html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f|
+  = render "projects/merge_requests/source_and_target", mr: @merge_request
   = render 'shared/issuable/form', f: f, issuable: @merge_request, commits: @commits, presenter: @mr_presenter
   = f.hidden_field :source_project_id
   = f.hidden_field :source_branch
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index be6f9ac83dc..a592062a17d 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -12,13 +12,16 @@
   = render 'shared/milestones/form_dates', f: f
   .form-group
     = f.label :description, _('Description')
-    = render layout: 'shared/md_preview', locals: { url: preview_markdown_path(@project) } do
-      = render 'shared/zen', f: f, attr: :description,
-                              classes: 'note-textarea',
-                              qa_selector: 'milestone_description_field',
-                              supports_autocomplete: true,
-                              placeholder: _('Write milestone description...')
-      = render 'shared/notes/hints'
+    - @gfm_form = true
+    .js-markdown-editor{ data: { render_markdown_path: preview_markdown_path(@project),
+                               markdown_docs_path: help_page_path('user/markdown'),
+                               qa_selector: 'milestone_description_field',
+                               form_field_placeholder: _('Write milestone description...'),
+                               supports_quick_actions: 'false',
+                               enable_autocomplete: 'true',
+                               autofocus: 'false',
+                               form_field_classes: 'note-textarea js-gfm-input markdown-area' } }
+      = f.hidden_field :description
     .clearfix
     .error-alert
 
@@ -26,7 +29,7 @@
 
   - if @milestone.new_record?
     = f.submit _('Create milestone'), data: { qa_selector: 'create_milestone_button' }, class: 'gl-mr-2', pajamas_button: true
-    = link_to _('Cancel'), project_milestones_path(@project), class: 'gl-button btn btn-default btn-cancel'
+    = link_button_to _('Cancel'), project_milestones_path(@project)
   - else
     = f.submit _('Save changes'), class: 'gl-mr-2', pajamas_button: true
-    = link_to _('Cancel'), project_milestone_path(@project, @milestone), class: 'gl-button btn btn-default btn-cancel'
+    = link_button_to _('Cancel'), project_milestone_path(@project, @milestone)
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index 326a7c4027f..a7a21ef0440 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_to new_project_milestone_path(@project), class: 'gl-button btn btn-confirm gl-ml-3', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
+        = 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
           = _('New milestone')
 
   - if @milestones.blank?
     = render 'shared/empty_states/milestones_tab' do
       - if can?(current_user, :admin_milestone, @project)
         .text-center
-          = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-confirm', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
+          = link_button_to new_project_milestone_path(@project), data: { qa_selector: "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_to new_project_milestone_path(@project), class: 'gl-button btn btn-confirm', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
+        = link_button_to new_project_milestone_path(@project), data: { qa_selector: "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
new file mode 100644
index 00000000000..2caba2ae9be
--- /dev/null
+++ b/app/views/projects/ml/models/index.html.haml
@@ -0,0 +1,5 @@
+- breadcrumb_title s_('ModelRegistry|Model registry')
+- page_title s_('ModelRegistry|Model registry')
+- presenter = ::Ml::ModelsIndexPresenter.new(@models)
+
+#js-index-ml-models{ data: { view_model: presenter.present } }
diff --git a/app/views/projects/no_repo.html.haml b/app/views/projects/no_repo.html.haml
index e3f46d601a3..3abec75b971 100644
--- a/app/views/projects/no_repo.html.haml
+++ b/app/views/projects/no_repo.html.haml
@@ -13,14 +13,14 @@
 %hr
 
 .no-repo-actions
-  = link_to project_repository_path(@project), method: :post, class: 'btn gl-button btn-confirm' do
-    #{ _('Create empty repository') }
+  = link_button_to project_repository_path(@project), method: :post, variant: :confirm do
+    = _('Create empty repository')
 
   %strong.gl-ml-3.gl-mr-3 or
 
-  = link_to new_project_import_path(@project), class: 'btn gl-button btn-default' do
-    #{ _('Import repository') }
+  = link_button_to new_project_import_path(@project) do
+    = _('Import repository')
 
 - if can? current_user, :remove_project, @project
   .prepend-top-20
-    = link_to _('Delete project'), project_path(@project), data: { confirm: remove_project_message(@project), confirm_btn_variant: 'danger' }, aria: { label: _('Delete project') }, method: :delete, class: "btn gl-button btn-danger float-right"
+    = link_button_to _('Delete project'), project_path(@project), data: { confirm: remove_project_message(@project), confirm_btn_variant: 'danger' }, aria: { label: _('Delete project') }, method: :delete, class: 'float-right', variant: :danger
diff --git a/app/views/projects/packages/packages/index.html.haml b/app/views/projects/packages/packages/index.html.haml
index 48aaf0884c8..5397828d48e 100644
--- a/app/views/projects/packages/packages/index.html.haml
+++ b/app/views/projects/packages/packages/index.html.haml
@@ -10,4 +10,5 @@
       npm_instance_url: package_registry_instance_url(:npm),
       project_list_url: project_packages_path(@project),
       settings_path: show_package_registry_settings(@project) ? project_settings_packages_and_registries_path(@project) : '',
+      can_delete_packages: can_delete_packages?(@project).to_s,
       group_list_url: '' } }
diff --git a/app/views/projects/pages/_access.html.haml b/app/views/projects/pages/_access.html.haml
index 50e48187be3..6eab31075d4 100644
--- a/app/views/projects/pages/_access.html.haml
+++ b/app/views/projects/pages/_access.html.haml
@@ -1,5 +1,5 @@
 - if @project.pages_deployed?
-  - pages_url = @project.pages_url(with_unique_domain: true)
+  - pages_url = build_pages_url(@project, with_unique_domain: true)
 
   = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5', data: { qa_selector: 'access_page_container' } }, footer_options: { class: 'gl-alert-warning' }) do |c|
     - c.with_header do
diff --git a/app/views/projects/pages/_list.html.haml b/app/views/projects/pages/_list.html.haml
index 57371aa49f6..38e15d02a39 100644
--- a/app/views/projects/pages/_list.html.haml
+++ b/app/views/projects/pages/_list.html.haml
@@ -26,8 +26,8 @@
                       - if domain.expired?
                         = gl_badge_tag s_('GitLabPages|Expired'), variant: :danger
               %div
-                = link_to s_('GitLabPages|Edit'), project_pages_domain_path(@project, domain), class: "btn gl-button btn-sm btn-grouped btn-confirm btn-inverted"
-                = link_to s_('GitLabPages|Remove'), project_pages_domain_path(@project, domain), data: { confirm: s_('GitLabPages|Are you sure?'), 'confirm-btn-variant': 'danger'}, "aria-label": s_("GitLabPages|Remove domain"), method: :delete, class: "btn gl-button btn-danger btn-sm btn-grouped"
+                = link_button_to s_('GitLabPages|Edit'), project_pages_domain_path(@project, domain), class: 'btn-grouped', variant: :confirm, category: :secondary, size: :small
+                = link_button_to s_('GitLabPages|Remove'), project_pages_domain_path(@project, domain), data: { confirm: s_('GitLabPages|Are you sure?'), 'confirm-btn-variant': 'danger'}, "aria-label": s_("GitLabPages|Remove domain"), method: :delete, class: 'btn-grouped', variant: :danger, size: :small
             - if domain.needs_verification?
               %li.list-group-item.bs-callout-warning
                 - details_link_start = "<a href='#{project_pages_domain_path(@project, domain)}'>".html_safe
diff --git a/app/views/projects/pages/new.html.haml b/app/views/projects/pages/new.html.haml
index b9d2af9cf19..89f8f62ea83 100644
--- a/app/views/projects/pages/new.html.haml
+++ b/app/views/projects/pages/new.html.haml
@@ -1,9 +1,5 @@
-- if Feature.enabled?(:show_pages_in_deployments_menu, current_user, type: :experiment)
-  - @breadcrumb_link = project_pages_path(@project)
-  - breadcrumb_title s_('GitLabPages|Pages')
-  - page_title s_('GitLabPages|Pages')
-- else
-  %section.js-search-settings-section
+- @breadcrumb_link = project_pages_path(@project)
+- page_title s_('GitLabPages|Pages')
 
 - if Feature.enabled?(:use_pipeline_wizard_for_pages, @project.group)
   #js-pages{ data: @pipeline_wizard_data }
diff --git a/app/views/projects/pages/show.html.haml b/app/views/projects/pages/show.html.haml
index 01477967394..698ce404be8 100644
--- a/app/views/projects/pages/show.html.haml
+++ b/app/views/projects/pages/show.html.haml
@@ -1,4 +1,4 @@
-- page_title _('Pages')
+- page_title s_('GitLabPages|Pages')
 
 - unless @project.pages_deployed?
   = render 'waiting'
@@ -11,7 +11,7 @@
   = render 'pages_settings'
 
   %hr.clearfix
-    = render 'ssl_limitations_warning' if @project.pages_subdomain.include?(".")
+    = render 'ssl_limitations_warning' if pages_subdomain(@project).include?(".")
     = render 'access'
     - if Gitlab.config.pages.external_http || Gitlab.config.pages.external_https
       = render 'list'
diff --git a/app/views/projects/pages_domains/_dns.html.haml b/app/views/projects/pages_domains/_dns.html.haml
index 3e6a92d8bc0..0edce28bb9d 100644
--- a/app/views/projects/pages_domains/_dns.html.haml
+++ b/app/views/projects/pages_domains/_dns.html.haml
@@ -1,5 +1,5 @@
 - verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
-- dns_record = "#{domain_presenter.domain} ALIAS #{domain_presenter.project.pages_subdomain}.#{Settings.pages.host}."
+- dns_record = "#{domain_presenter.domain} ALIAS #{pages_subdomain(domain_presenter.project)}.#{Settings.pages.host}."
 
 .form-group.border-section
   .row
@@ -21,11 +21,11 @@
         .gl-mb-3
           - text, status = domain_presenter.unverified? ? [_('Unverified'), :danger] : [_('Verified'), :success]
           = gl_badge_tag text, variant: status
-          = link_to sprite_icon("redo"), verify_project_pages_domain_path(@project, domain_presenter), method: :post, class: "gl-ml-2 gl-button btn btn-sm btn-default has-tooltip", title: _("Retry verification")
+          = link_button_to sprite_icon("redo"), verify_project_pages_domain_path(@project, domain_presenter), method: :post, class: 'gl-ml-2 has-tooltip', title: _("Retry verification"), size: :small
         .input-group
           = text_field_tag :domain_verification, domain_presenter.verification_record, class: "monospace js-select-on-focus form-control", readonly: true
           .input-group-append
             = clipboard_button(target: '#domain_verification', class: 'btn-default d-none d-sm-block')
         %p.form-text.text-muted
           - link_to_help = link_to(_('verify ownership'), help_page_path('user/project/pages/custom_domains_ssl_tls_certification/index.md', anchor: '4-verify-the-domains-ownership'))
-          = _("To %{link_to_help} of your domain, add the above key to a TXT record within your DNS configuration.").html_safe % { link_to_help: link_to_help }
+          = _("To %{link_to_help} of your domain, add the above key to a TXT record within your DNS configuration within seven days.").html_safe % { link_to_help: link_to_help }
diff --git a/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml b/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
index d6c213571f2..68b6884c4f5 100644
--- a/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
+++ b/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
@@ -9,7 +9,7 @@
                 = sprite_icon('warning-solid', css_class: ' mr-2 gl-text-orange-600')
                 = _("Something went wrong while obtaining the Let's Encrypt certificate.")
               .row.mx-0.mt-3
-                = link_to s_('GitLabPagesDomains|Retry'), retry_auto_ssl_project_pages_domain_path(@project, domain_presenter), class: "gl-button btn btn-default btn-sm btn-grouped", method: :post
+                = link_button_to s_('GitLabPagesDomains|Retry'), retry_auto_ssl_project_pages_domain_path(@project, domain_presenter), class: 'btn-grouped', method: :post, size: :small
     - elsif !domain_presenter.certificate_gitlab_provided?
       .form-group.border-section.js-shown-if-auto-ssl{ class: ("d-none" unless auto_ssl_available_and_enabled) }
         .row
diff --git a/app/views/projects/pages_domains/new.html.haml b/app/views/projects/pages_domains/new.html.haml
index c88255e23f9..c58209f8806 100644
--- a/app/views/projects/pages_domains/new.html.haml
+++ b/app/views/projects/pages_domains/new.html.haml
@@ -8,4 +8,4 @@
     = render 'form', { f: f }
     .form-actions.gl-display-flex
       = f.submit _('Create New Domain'), class: 'gl-mr-3', pajamas_button: true
-      = link_to _('Cancel'), project_pages_path(@project), class: 'gl-button btn btn-default btn-cancel'
+      = link_button_to _('Cancel'), project_pages_path(@project)
diff --git a/app/views/projects/pages_domains/show.html.haml b/app/views/projects/pages_domains/show.html.haml
index b8de364babc..d34650d3f5a 100644
--- a/app/views/projects/pages_domains/show.html.haml
+++ b/app/views/projects/pages_domains/show.html.haml
@@ -10,4 +10,4 @@
     = render 'form', { f: f }
     .form-actions.gl-display-flex
       = f.submit _('Save Changes'), class: 'gl-mr-3', pajamas_button: true
-      = link_to _('Cancel'), project_pages_path(@project), class: 'gl-button btn btn-default btn-inverse'
+      = link_button_to _('Cancel'), project_pages_path(@project)
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
index 235b89b8c5b..df85963218d 100644
--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -40,4 +40,4 @@
         = f.gitlab_ui_checkbox_component :active, _('Active'), checkbox_options: { value: @schedule.active, required: false }
   .footer-block
     = f.submit _('Save pipeline schedule'), pajamas_button: true
-    = link_to _('Cancel'), pipeline_schedules_path(@project), class: 'btn gl-button btn-default btn-cancel'
+    = link_button_to _('Cancel'), pipeline_schedules_path(@project)
diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
index 37b2b3ecfde..a050808f13c 100644
--- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
+++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
@@ -35,14 +35,11 @@
     %td{ role: 'cell', data: { label: _('Actions') } }
       .float-right.btn-group
         - if can?(current_user, :play_pipeline_schedule, pipeline_schedule)
-          = link_to play_pipeline_schedule_path(pipeline_schedule), method: :post, title: _('Play'), class: 'btn gl-button btn-default btn-icon' do
-            = sprite_icon('play')
+          = link_button_to nil, play_pipeline_schedule_path(pipeline_schedule), method: :post, title: _('Play'), icon: 'play'
         - if can?(current_user, :admin_pipeline_schedule, pipeline_schedule) && pipeline_schedule.owner != current_user
           = render Pajamas::ButtonComponent.new(button_options: { class: 'js-take-ownership-button has-tooltip', title: s_('PipelineSchedule|Take ownership to edit'), data: { url: take_ownership_pipeline_schedule_path(pipeline_schedule) } }) do
             = s_('PipelineSchedules|Take ownership')
         - if can?(current_user, :update_pipeline_schedule, pipeline_schedule)
-          = link_to edit_pipeline_schedule_path(pipeline_schedule), title: _('Edit'), class: 'btn gl-button btn-default btn-icon' do
-            = sprite_icon('pencil')
+          = link_button_to nil, edit_pipeline_schedule_path(pipeline_schedule), title: _('Edit'), icon: 'pencil'
         - if can?(current_user, :admin_pipeline_schedule, pipeline_schedule)
-          = link_to pipeline_schedule_path(pipeline_schedule), title: _('Delete'), method: :delete, class: 'btn gl-button btn-danger btn-icon', aria: { label: _('Delete pipeline schedule') }, data: { confirm: _("Are you sure you want to delete this pipeline schedule?"), confirm_btn_variant: 'danger' } do
-            = sprite_icon('remove')
+          = link_button_to nil, pipeline_schedule_path(pipeline_schedule), title: _('Delete'), method: :delete, aria: { label: _('Delete pipeline schedule') }, data: { confirm: _("Are you sure you want to delete this pipeline schedule?"), confirm_btn_variant: 'danger' }, variant: :danger, icon: 'remove'
diff --git a/app/views/projects/pipeline_schedules/edit.html.haml b/app/views/projects/pipeline_schedules/edit.html.haml
index 3f843ce6aec..4e1ae53a101 100644
--- a/app/views/projects/pipeline_schedules/edit.html.haml
+++ b/app/views/projects/pipeline_schedules/edit.html.haml
@@ -5,9 +5,8 @@
 
 %h1.page-title.gl-font-size-h-display
   = _("Edit Pipeline Schedule")
-%hr
 
 - if Feature.enabled?(:pipeline_schedules_vue, @project)
-  #pipeline-schedules-form-edit{ data: { full_path: @project.full_path } }
+  #pipeline-schedules-form-edit{ data: js_pipeline_schedules_form_data(@project, @schedule) }
 - else
   = render "form"
diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml
index ab86d505f0f..88a60b1fb06 100644
--- a/app/views/projects/pipeline_schedules/index.html.haml
+++ b/app/views/projects/pipeline_schedules/index.html.haml
@@ -6,7 +6,7 @@
 #pipeline-schedules-callout{ data: { docs_url: help_page_path('ci/pipelines/schedules'), illustration_url: image_path('illustrations/pipeline_schedule_callout.svg') } }
 
 - if Feature.enabled?(:pipeline_schedules_vue, @project)
-  #pipeline-schedules-app{ data: { full_path: @project.full_path, pipelines_path: project_pipelines_path(@project) } }
+  #pipeline-schedules-app{ data: { full_path: @project.full_path, pipelines_path: project_pipelines_path(@project), new_schedule_path: new_project_pipeline_schedule_path(@project) } }
 - else
   .top-area
     - schedule_path_proc = ->(scope) { pipeline_schedules_path(@project, scope: scope) }
@@ -14,8 +14,8 @@
 
     - if can?(current_user, :create_pipeline_schedule, @project)
       .nav-controls
-        = link_to new_project_pipeline_schedule_path(@project), class: 'btn gl-button btn-confirm' do
-          %span= _('New schedule')
+        = link_button_to new_project_pipeline_schedule_path(@project), variant: :confirm do
+          = _('New schedule')
 
   - if @schedules.present?
     %ul.content-list
diff --git a/app/views/projects/pipeline_schedules/new.html.haml b/app/views/projects/pipeline_schedules/new.html.haml
index 2d4ed5a9872..ef99a79b06f 100644
--- a/app/views/projects/pipeline_schedules/new.html.haml
+++ b/app/views/projects/pipeline_schedules/new.html.haml
@@ -9,6 +9,6 @@
   = _("Schedule a new pipeline")
 
 - if Feature.enabled?(:pipeline_schedules_vue, @project)
-  #pipeline-schedules-form-new{ data: { full_path: @project.full_path, cron: @schedule.cron, daily_limit: @schedule.daily_limit, timezone_data: timezone_data.to_json, cron_timezone: @schedule.cron_timezone, project_id: @project.id, default_branch: @project.default_branch, settings_link: project_settings_ci_cd_path(@project), } }
+  #pipeline-schedules-form-new{ data: js_pipeline_schedules_form_data(@project, @schedule) }
 - else
   = render "form"
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
deleted file mode 100644
index 753bb77e755..00000000000
--- a/app/views/projects/pipelines/_info.html.haml
+++ /dev/null
@@ -1,75 +0,0 @@
-- if @pipeline.name
-  .gl-border-t.gl-p-5.gl-px-0
-    %h3.gl-m-0.gl-text-body
-      = @pipeline.name
-- else
-  .commit-box
-    %h3.commit-title
-      = markdown(commit.title, pipeline: :single_line)
-    - if commit.description.present?
-      %pre.commit-description<
-        = preserve(markdown(commit.description, pipeline: :single_line))
-
-.info-well
-  .well-segment.pipeline-info{ class: "gl-align-items-baseline! gl-flex-direction-column" }
-    %div
-      .icon-container
-        = sprite_icon('clock', css_class: 'gl-top-0!')
-      = n_('%d job', '%d jobs', @pipeline.total_size) % @pipeline.total_size
-      = @pipeline.ref_text_legacy
-    - if @pipeline.finished_at
-      - duration = time_interval_in_words(@pipeline.duration)
-      - queued_duration = time_interval_in_words(@pipeline.queued_duration)
-      %span.gl-pl-7{ 'data-testid': 'pipeline-stats-text' }
-        = render_if_exists 'projects/pipelines/pipeline_stats_text', duration: duration, pipeline: @pipeline, queued_duration: queued_duration
-
-  - if has_pipeline_badges?(@pipeline)
-    .well-segment
-      .icon-container
-        = sprite_icon('flag', css_class: 'gl-top-0!')
-      - if @pipeline.schedule?
-        = gl_badge_tag _('Scheduled'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-scheduled', title: _('This pipeline was triggered by a schedule.') }
-      - if @pipeline.child?
-        - text = sprintf(s_('Pipelines|Child pipeline (%{link_start}parent%{link_end})'), { link_start: "<a href='#{pipeline_path(@pipeline.triggered_by_pipeline)}' class='text-underline'>", link_end: "</a>"}).html_safe
-        = gl_badge_tag text, { variant: :info, size: :sm }, { class: 'js-pipeline-child has-tooltip', title: s_("Pipelines|This is a child pipeline within the parent pipeline") }
-      - if @pipeline.latest?
-        = gl_badge_tag s_('Pipelines|latest'), { variant: :success, size: :sm }, { class: 'js-pipeline-url-latest has-tooltip', title: _("Latest pipeline for the most recent commit on this branch") }
-      - if @pipeline.merge_train_pipeline?
-        = gl_badge_tag s_('Pipelines|merge train'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-train has-tooltip', title: s_("Pipelines|This pipeline ran on the contents of this merge request combined with the contents of all other merge requests queued for merging into the target branch.") }
-      - if @pipeline.has_yaml_errors?
-        = gl_badge_tag s_('Pipelines|yaml invalid'), { variant: :danger, size: :sm }, { class: 'js-pipeline-url-yaml has-tooltip', title: @pipeline.yaml_errors }
-      - if @pipeline.failure_reason?
-        = gl_badge_tag s_('Pipelines|error'), { variant: :danger, size: :sm }, { class: 'js-pipeline-url-failure has-tooltip', title: @pipeline.failure_reason }
-      - if @pipeline.auto_devops_source?
-        - popover_title_text = html_escape(_('This pipeline makes use of a predefined CI/CD configuration enabled by %{b_open}Auto DevOps.%{b_close}')) % { b_open: '<b>'.html_safe, b_close: '</b>'.html_safe }
-        - popover_content_url = help_page_path('topics/autodevops/index.md')
-        - popover_content_text = _('Learn more about Auto DevOps')
-        = gl_badge_tag s_('Pipelines|Auto DevOps'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-autodevops', href: "#", tabindex: "0", role: "button", data: { container: 'body', toggle: 'popover', placement: 'top', html: 'true', triggers: 'focus', title: "<div class='gl-font-weight-normal gl-line-height-normal'>#{popover_title_text}</div>", content: "<a href='#{popover_content_url}' target='_blank' rel='noopener noreferrer nofollow'>#{popover_content_text}</a>" } }
-      - if @pipeline.detached_merge_request_pipeline?
-        = gl_badge_tag s_('Pipelines|merge request'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-mergerequest has-tooltip', data: { qa_selector: 'merge_request_badge_tag' }, title: s_("Pipelines|This pipeline ran on the contents of this merge request's source branch, not the target branch.") }
-      - if @pipeline.stuck?
-        = gl_badge_tag s_('Pipelines|stuck'), { variant: :warning, size: :sm }, { class: 'js-pipeline-url-stuck has-tooltip' }
-
-  .well-segment{ 'data-testid': 'commit-row' }
-    .icon-container.commit-icon
-      = sprite_icon('commit', css_class: 'gl-top-0!')
-    - if @pipeline.name
-      = markdown(commit.title, pipeline: :single_line)
-      = clipboard_button(text: @pipeline.sha, title: _("Copy commit SHA"))
-      = link_to commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha"
-    - else
-      = link_to commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha"
-      = clipboard_button(text: @pipeline.sha, title: _("Copy commit SHA"))
-
-  .well-segment.related-merge-request-info
-    .icon-container
-      = sprite_icon("git-merge", css_class: 'gl-top-0!')
-    %span.related-merge-requests
-      %span.js-truncated-mr-list
-        = @pipeline.all_related_merge_request_text(limit: 1)
-      - if @pipeline.has_many_merge_requests?
-        = link_to("#", class: "js-toggle-mr-list") do
-          %span.text-expander
-            = sprite_icon('ellipsis_h', size: 12)
-        %span.js-full-mr-list.hide
-          = @pipeline.all_related_merge_request_text
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 46e1cd07a17..bdf09e5356f 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -9,16 +9,10 @@
 - add_page_startup_graphql_call('pipelines/get_pipeline_details', { projectPath: @project.full_path, iid: @pipeline.iid })
 
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
-  - if Feature.enabled?(:pipeline_details_header_vue, @project)
-    #js-pipeline-details-header-vue{ data: js_pipeline_details_header_data(@project, @pipeline) }
-  - else
-    #js-pipeline-header-vue.pipeline-header-container{ data: { full_path: @project.full_path, graphql_resource_etag: graphql_etag_pipeline_path(@pipeline), pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id, pipelines_path: project_pipelines_path(@project) } }
+  #js-pipeline-details-header-vue{ data: js_pipeline_details_header_data(@project, @pipeline) }
 
   = render_if_exists 'projects/pipelines/cc_validation_required_alert', pipeline: @pipeline
 
-  - if @pipeline.commit.present? && !Feature.enabled?(:pipeline_details_header_vue, @project)
-    = render "projects/pipelines/info", commit: @pipeline.commit
-
   - if pipeline_has_errors
     = render Pajamas::AlertComponent.new(title: s_('Pipelines|Unable to create pipeline'),
       variant: :danger,
diff --git a/app/views/projects/project_templates/_template.html.haml b/app/views/projects/project_templates/_template.html.haml
index 9dde86f77b4..93c53fc99fc 100644
--- a/app/views/projects/project_templates/_template.html.haml
+++ b/app/views/projects/project_templates/_template.html.haml
@@ -8,7 +8,7 @@
     .text-muted
       = template.description
   .controls.d-flex.align-items-center
-    %a.btn.gl-button.btn-default.gl-mr-3{ href: template.preview, rel: 'noopener noreferrer', target: '_blank', data: { track_label: "template_preview", track_property: template.name, track_action: "click_button", track_value: "" } }
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-mr-3', data: { track_label: "template_preview", track_property: template.name, track_action: "click_button", track_value: "" }, rel: 'noopener noreferrer' }, href: template.preview, target: '_blank') do
       = _("Preview")
     %label.btn.gl-button.btn-confirm.template-button.choose-template.gl-mb-0{ for: template.name,
       'data-testid': "use_template_#{template.name}" }
diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/shared/_index.html.haml
index 11e09d843e0..a016ccf8656 100644
--- a/app/views/projects/protected_tags/shared/_index.html.haml
+++ b/app/views/projects/protected_tags/shared/_index.html.haml
@@ -8,7 +8,7 @@
       = expanded ? _('Collapse') : _('Expand')
     %p
       = s_("ProtectedTag|Limit access to creating and updating tags.")
-      =  link_to s_("ProtectedTag|What are protected tags?"), help_page_path("user/project/protected_tags")
+      = link_to s_("ProtectedTag|What are protected tags?"), help_page_path("user/project/protected_tags")
   .settings-content
     %p
       = s_("ProtectedTag|By default, protected tags restrict who can modify the tag.")
diff --git a/app/views/projects/protected_tags/shared/_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
index ed5b5b17942..4fe1c8bd3cb 100644
--- a/app/views/projects/protected_tags/shared/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
@@ -19,4 +19,4 @@
 
   - if can? current_user, :admin_project, @project
     %td
-      = link_to 'Unprotect', [@project, protected_tag, { update_section: 'js-protected-tags-settings' }], aria: { label: s_('ProtectedTags|Unprotect tag') }, data: { confirm: 'Tag will be writable for developers. Are you sure?', confirm_btn_variant: 'danger' }, method: :delete, class: 'gl-button btn btn-danger-secondary'
+      = link_button_to 'Unprotect', [@project, protected_tag, { update_section: 'js-protected-tags-settings' }], aria: { label: s_('ProtectedTags|Unprotect tag') }, data: { confirm: 'Tag will be writable for developers. Are you sure?', confirm_btn_variant: 'danger' }, method: :delete, variant: :danger, category: :secondary
diff --git a/app/views/projects/runners/_group_runners.html.haml b/app/views/projects/runners/_group_runners.html.haml
index d71bcd12e64..32a2e36c779 100644
--- a/app/views/projects/runners/_group_runners.html.haml
+++ b/app/views/projects/runners/_group_runners.html.haml
@@ -13,10 +13,10 @@
     %br
     %br
     - if @project.group_runners_enabled?
-      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn gl-button btn-default', method: :post do
+      = link_button_to toggle_group_runners_project_runners_path(@project), method: :post do
         = _('Disable group runners')
     - else
-      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn gl-button btn-confirm-secondary', method: :post do
+      = link_button_to toggle_group_runners_project_runners_path(@project), method: :post, variant: :confirm, category: :secondary do
         = _('Enable group runners')
     &nbsp;
     = _('for this project')
diff --git a/app/views/projects/runners/_project_runners.html.haml b/app/views/projects/runners/_project_runners.html.haml
index af8f39ce0ad..0f2f0c3f21c 100644
--- a/app/views/projects/runners/_project_runners.html.haml
+++ b/app/views/projects/runners/_project_runners.html.haml
@@ -3,26 +3,14 @@
 
 .bs-callout.help-callout
   %p= s_('Runners|These runners are assigned to this project.')
-  - if Feature.enabled?(:create_runner_workflow_for_namespace, @project.namespace)
-    - if can?(current_user, :create_runner, @project)
-      = render Pajamas::ButtonComponent.new(href: new_project_runner_path(@project), variant: :confirm) do
-        = s_('Runners|New project runner')
-      .gl-display-inline
-        #js-project-runner-registration-dropdown{ data: { registration_token: @project.runners_token, project_id: @project.id } }
-    - else
-      = _('Please contact an admin to create runners.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'restrict-runner-registration-by-all-users-in-an-instance'), target: '_blank', rel: 'noopener noreferrer'
+  - if can?(current_user, :create_runner, @project)
+    = render Pajamas::ButtonComponent.new(href: new_project_runner_path(@project), variant: :confirm) do
+      = s_('Runners|New project runner')
+    .gl-display-inline
+      #js-project-runner-registration-dropdown{ data: { registration_token: @project.runners_token, project_id: @project.id } }
   - else
-    - if can?(current_user, :register_project_runners, @project)
-      = render partial: 'ci/runner/how_to_setup_runner',
-              locals: { registration_token: @project.runners_token,
-                        type: _('project'),
-                        reset_token_url: reset_registration_token_namespace_project_settings_ci_cd_path,
-                        project_path: @project.path_with_namespace,
-                        group_path: '' }
-    - else
-      = _('Please contact an admin to register runners.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'restrict-runner-registration-by-all-users-in-an-instance'), target: '_blank', rel: 'noopener noreferrer'
+    = _('Please contact an admin to create runners.')
+    = link_to _('Learn more.'), help_page_path('administration/settings/continuous_integration', anchor: 'restrict-runner-registration-by-all-users-in-an-instance'), target: '_blank', rel: 'noopener noreferrer'
 
 %hr
 
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index e517b37aae9..12432cd3484 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -13,19 +13,16 @@
     .gl-ml-2
       .btn-group.btn-group-sm
         - if @project_runners.include?(runner)
-          = link_to edit_project_runner_path(@project, runner), class: 'btn gl-button btn-icon', title: _('Edit'), aria: { label: _('Edit') }, data: { testid: 'edit-runner-link', toggle: 'tooltip', placement: 'top', container: 'body' } do
-            = sprite_icon('pencil')
+          = link_button_to nil, edit_project_runner_path(@project, runner), title: _('Edit'), aria: { label: _('Edit') }, data: { testid: 'edit-runner-link', toggle: 'tooltip', placement: 'top', container: 'body' }, icon: 'pencil'
           - if runner.active?
-            = link_to pause_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-icon', title: s_('Runners|Pause from accepting jobs'), aria: { label: _('Pause') }, data: { toggle: 'tooltip', container: 'body', confirm: _("Are you sure?") } do
-              = sprite_icon('pause')
+            = link_button_to nil, pause_project_runner_path(@project, runner), method: :post, title: s_('Runners|Pause from accepting jobs'), aria: { label: _('Pause') }, data: { toggle: 'tooltip', container: 'body', confirm: _("Are you sure?") }, icon: 'pause'
           - else
-            = link_to resume_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-icon', title: s_('Runners|Resume accepting jobs'), aria: { label: _('Resume') }, data: { toggle: 'tooltip', container: 'body' } do
-              = sprite_icon('play')
+            = link_button_to nil, resume_project_runner_path(@project, runner), method: :post, title: s_('Runners|Resume accepting jobs'), aria: { label: _('Resume') }, data: { toggle: 'tooltip', container: 'body' }, icon: 'play'
           - if runner.belongs_to_one_project?
-            = link_to _('Remove runner'), project_runner_path(@project, runner), aria: { label: _('Remove') }, data: { confirm: _("Are you sure?"), 'confirm-btn-variant': 'danger' }, method: :delete, class: 'btn gl-button btn-danger'
+            = link_button_to _('Remove runner'), project_runner_path(@project, runner), aria: { label: _('Remove') }, data: { confirm: _("Are you sure?"), 'confirm-btn-variant': 'danger' }, method: :delete, variant: :danger
           - else
             - runner_project = @project.runner_projects.find_by(runner_id: runner) # rubocop: disable CodeReuse/ActiveRecord
-            = link_to _('Disable for this project'), project_runner_project_path(@project, runner_project), aria: { label: _('Disable') }, data: { confirm: _("Are you sure?"), 'confirm-btn-variant': 'danger' }, method: :delete, class: 'btn gl-button btn-danger'
+            = link_button_to _('Disable for this project'), project_runner_project_path(@project, runner_project), aria: { label: _('Disable') }, data: { confirm: _("Are you sure?"), 'confirm-btn-variant': 'danger' }, method: :delete, variant: :danger
         - elsif runner.project_type?
           = form_for [@project, @project.runner_projects.new] do |f|
             = f.hidden_field :runner_id, value: runner.id
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index 70e14eadaf9..05685c26ac5 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -9,14 +9,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 }
-    = link_to _('Unarchive project'), unarchive_project_path(@project),
-        aria: { label: _('Unarchive project') },
-        data: { confirm: _("Are you sure that you want to unarchive this project?"), qa_selector: 'unarchive_project_link' },
-        method: :post, class: "gl-button btn btn-confirm"
+    = 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
+      =  _('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 }
-    = link_to _('Archive project'), archive_project_path(@project),
-      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' },
-      method: :post, class: "gl-button btn btn-confirm"
+    = 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
+      =  _('Archive project')
diff --git a/app/views/projects/settings/_general.html.haml b/app/views/projects/settings/_general.html.haml
index 847f9ad3e2a..f5c275827fc 100644
--- a/app/views/projects/settings/_general.html.haml
+++ b/app/views/projects/settings/_general.html.haml
@@ -35,6 +35,6 @@
     = render 'shared/choose_avatar_button', f: f
     - if @project.avatar?
       %hr
-      = link_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, class: 'gl-button btn btn-danger-secondary'
+      = 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' }
diff --git a/app/views/projects/settings/access_tokens/index.html.haml b/app/views/projects/settings/access_tokens/index.html.haml
index df517b5d642..e4af6d59cad 100644
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
@@ -4,31 +4,28 @@
 - type_plural = _('project access tokens')
 - @force_desktop_expanded_sidebar = true
 
-.row.gl-mt-3.js-search-settings-section
-  .col-lg-4
-    %h4.gl-mt-0
-      = page_title
-    %p
-    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/project_access_tokens') }
+.gl-mt-5.js-search-settings-section
+  %h4.gl-my-0
+    = page_title
+  %p.gl-text-secondary
+    - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/project_access_tokens') }
     - if current_user.can?(:create_resource_access_tokens, @project)
       = _('Generate project access tokens scoped to this project for your applications that need access to the GitLab API.')
-      %p
-        = _('You can also use project access tokens with Git to authenticate over HTTP(S). %{link_start}Learn more.%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+      = _('You can also use project access tokens with Git to authenticate over HTTP(S). %{link_start}Learn more.%{link_end}').html_safe % { link_start: help_link_start, link_end: '</a>'.html_safe }
     - else
-      = _('Project access token creation is disabled in this group. You can still use and manage existing tokens. %{link_start}Learn more.%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-      %p
+      = _('Project access token creation is disabled in this group.')
       - root_group = @project.group.root_ancestor
       - if current_user.can?(:admin_group, root_group)
         - group_settings_link = edit_group_path(root_group)
         - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: group_settings_link }
         = _('You can enable project access token creation in %{link_start}group settings%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+      = html_escape(_('You can still use and manage existing tokens. %{link_start}Learn more.%{link_end}')) % { link_start: help_link_start, link_end: '</a>'.html_safe }
 
-  .col-lg-8
-    #js-new-access-token-app{ data: { access_token_type: type } }
+  #js-new-access-token-app{ data: { access_token_type: type } }
 
-    - if current_user.can?(:create_resource_access_tokens, @project)
-      = render_if_exists 'projects/settings/access_tokens/form',
-        type: type
+  - if current_user.can?(:create_resource_access_tokens, @project)
+    = render_if_exists 'projects/settings/access_tokens/form',
+      type: type
 
-    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This project has no active access tokens.'), show_role: true
+  #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This project has no active access tokens.'), show_role: true
  } }
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index 6f64d3f3f76..6eccbd245af 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -75,7 +75,7 @@
             = f.number_field :max_artifacts_size, class: 'form-control gl-form-input'
             %p.form-text.text-muted
               = _("The maximum file size in megabytes for individual job artifacts.")
-              = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank', rel: 'noopener noreferrer'
+              = link_to sprite_icon('question-o'), help_page_path('administration/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank', rel: 'noopener noreferrer'
 
         = f.submit _('Save changes'), pajamas_button: true
 
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index c7bb6a7f5da..007169809c9 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -33,12 +33,13 @@
 
 = render_if_exists 'projects/settings/ci_cd/protected_environments', expanded: expanded
 
-%section.settings.no-animate#js-runners-settings{ class: ('expanded' if expanded || params[:expand_runners]), data: { qa_selector: 'runners_settings_content' } }
+- expand_runners = expanded || params[:expand_runners]
+%section.settings.no-animate#js-runners-settings{ class: ('expanded' if expand_runners), data: { qa_selector: 'runners_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _("Runners")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
+      = expand_runners ? _('Collapse') : _('Expand')
     %p
       = _("Runners are processes that pick up and execute CI/CD jobs for GitLab.")
       = link_to s_('What is GitLab Runner?'), 'https://docs.gitlab.com/runner/', target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/projects/settings/slacks/edit.html.haml b/app/views/projects/settings/slacks/edit.html.haml
index 867b90655e3..537ae767b1d 100644
--- a/app/views/projects/settings/slacks/edit.html.haml
+++ b/app/views/projects/settings/slacks/edit.html.haml
@@ -17,4 +17,4 @@
       .footer-block.row-content-block
         = form.submit _('Save changes'), pajamas_button: true
         &nbsp;
-        = link_to _('Cancel'), edit_project_settings_integration_path(@project, @service), class: 'btn gl-button btn-cancel'
+        = link_button_to _('Cancel'), edit_project_settings_integration_path(@project, @service)
diff --git a/app/views/projects/snippets/index.html.haml b/app/views/projects/snippets/index.html.haml
index 7c936c849d0..ae9a8307eb9 100644
--- a/app/views/projects/snippets/index.html.haml
+++ b/app/views/projects/snippets/index.html.haml
@@ -9,7 +9,7 @@
 
       - if new_project_snippet_link.present?
         .nav-controls
-          = link_to _("New snippet"), new_project_snippet_link, class: "gl-button btn btn-confirm", title: _("New snippet")
+          = link_button_to _("New snippet"), new_project_snippet_link, title: _("New snippet"), variant: :confirm
 
   = render 'shared/snippets/list'
 - else
diff --git a/app/views/projects/tags/_edit_release_button.html.haml b/app/views/projects/tags/_edit_release_button.html.haml
index 9a6c18df2ca..42af8d4f59f 100644
--- a/app/views/projects/tags/_edit_release_button.html.haml
+++ b/app/views/projects/tags/_edit_release_button.html.haml
@@ -1,9 +1,8 @@
 - release_btn_text = s_('TagsPage|Create release')
 - release_btn_path = new_project_release_path(project, tag_name: tag.name)
 - option_css_classes = local_assigns.fetch(:option_css_classes, '')
-- css_classes = "btn gl-button btn-default btn-icon btn-edit has-tooltip #{option_css_classes}"
 - if release
   - release_btn_text = s_('TagsPage|Edit release')
   - release_btn_path = edit_project_release_path(project, release)
-= link_to release_btn_path, class: css_classes do
+= render Pajamas::ButtonComponent.new(href: release_btn_path, button_options: { class: option_css_classes }) do
   = release_btn_text
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index fda797f3228..b0be748eb36 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -9,10 +9,9 @@
 
     .nav-controls
       #js-tags-sort-dropdown{ data: { filter_tags_path: filter_tags_path(search: @search, sort: @sort), sort_options: tags_sort_options_hash.to_json } }
-      = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn gl-button btn-default btn-icon has-tooltip gl-ml-auto' do
-        = sprite_icon('rss', css_class: 'gl-icon')
+      = link_button_to nil, project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'has-tooltip gl-ml-auto', icon: 'rss'
       - if can?(current_user, :admin_tag, @project)
-        = link_to new_project_tag_path(@project), class: 'btn gl-button btn-confirm', data: { qa_selector: "new_tag_button" } do
+        = link_button_to new_project_tag_path(@project), data: { qa_selector: "new_tag_button" }, variant: :confirm do
           = s_('TagsPage|New tag')
 
   = render_if_exists 'projects/commits/mirror_status'
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index 5127972c406..1649e56043e 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -45,10 +45,8 @@
       = render partial: 'projects/commit/signature', object: @tag.signature
     - if can?(current_user, :admin_tag, @project)
       = render 'edit_release_button', tag: @tag, project: @project, release: @release
-    = link_to project_tree_path(@project, @tag.name), class: 'btn btn-icon gl-button btn-default has-tooltip', title: s_('TagsPage|Browse files') do
-      = sprite_icon('folder-open', css_class: 'gl-icon')
-    = link_to project_commits_path(@project, @tag.name), class: 'btn btn-icon gl-button btn-default has-tooltip', title: s_('TagsPage|Browse commits') do
-      = sprite_icon('history', css_class: 'gl-icon')
+    = link_button_to nil, project_tree_path(@project, @tag.name), class: 'has-tooltip', title: s_('TagsPage|Browse files'), icon: 'folder-open'
+    = link_button_to nil, project_commits_path(@project, @tag.name), class: 'has-tooltip', title: s_('TagsPage|Browse commits'), icon: 'history'
     = render 'projects/buttons/download', project: @project, ref: @tag.name
     - if can?(current_user, :admin_tag, @project)
       = render 'projects/buttons/remove_tag', project: @project, tag: @tag
diff --git a/app/views/projects/tracing/index.html.haml b/app/views/projects/tracing/index.html.haml
new file mode 100644
index 00000000000..ae6608cf343
--- /dev/null
+++ b/app/views/projects/tracing/index.html.haml
@@ -0,0 +1,4 @@
+- page_title _('Tracing')
+
+#js-tracing{ data: { view_model: observability_tracing_view_model(@project) } }
+