Add latest changes from gitlab-org/gitlab@16-3-stable-eev16.3.0-rc42

82 files changed, 471 insertions, 382 deletions

diff --git a/app/views/projects/_deletion_failed.html.haml b/app/views/projects/_deletion_failed.html.haml
index 29551505a7e..7ddb80c90f9 100644
--- a/app/views/projects/_deletion_failed.html.haml
+++ b/app/views/projects/_deletion_failed.html.haml
@@ -5,5 +5,7 @@
   dismissible: false,
   alert_options: { class: 'project-deletion-failed-message' }) do |c|
   - c.with_body do
-    This project was scheduled for deletion, but failed with the following message:
+    = _('This project was scheduled for deletion, but failed with the following message:')
     = project.delete_error
+    %br
+    = _('The project visibility may have been made more restrictive if the parent group\'s visibility changed while the deletion was scheduled.')
diff --git a/app/views/projects/_export.html.haml b/app/views/projects/_export.html.haml
index 3ef2c722e98..20fb2b43c63 100644
--- a/app/views/projects/_export.html.haml
+++ b/app/views/projects/_export.html.haml
@@ -2,30 +2,35 @@
 
 - project = local_assigns.fetch(:project)
 
-.sub-section{ data: { qa_selector: 'export_project_content' } }
-  %h4= _('Export project')
-  - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/import_export') }
-  %p= _('Export this project with all its related data in order to move it to a new GitLab instance. When the exported file is ready, you can download it from this page or from the download link in the email notification you will receive. You can then import it when creating a new project. %{link_start}Learn more.%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-  %p.gl-mb-0
-    %p= _('The following items will be exported:')
-    %ul
-      - project_export_descriptions.each do |desc|
-        %li= desc
-    %p= _('The following items will NOT be exported:')
-    %ul
-      %li= _('Job logs and artifacts')
-      %li= _('Container registry images')
-      %li= _('CI variables')
-      %li= _('Pipeline triggers')
-      %li= _('Webhooks')
-      %li= _('Any encrypted tokens')
-  - if project.export_status == :finished
-    = render Pajamas::ButtonComponent.new(href: download_export_project_path(project),
-      method: :get,
-      button_options: { ref: 'nofollow', download: '', data: { qa_selector: 'download_export_link' } }) do
-      = _('Download export')
-    = render Pajamas::ButtonComponent.new(href: generate_new_export_project_path(project), method: :post) do
-      = _('Generate new export')
-  - else
-    = render Pajamas::ButtonComponent.new(href: export_project_path(project), method: :post, button_options: { data: { qa_selector: 'export_project_link' } }) do
-      = _('Export project')
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { qa_selector: 'export_project_content' } }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title= _('Export project')
+
+  - c.with_body do
+    %p
+      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/import_export') }
+      = _('Export this project with all its related data in order to move it to a new GitLab instance. When the exported file is ready, you can download it from this page or from the download link in the email notification you will receive. You can then import it when creating a new project. %{link_start}Learn more.%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+    .gl-mb-0
+      %p.gl-font-weight-bold= _('The following items will be exported:')
+      %ul
+        - project_export_descriptions.each do |desc|
+          %li= desc
+      %p.gl-font-weight-bold= _('The following items will NOT be exported:')
+      %ul
+        %li= _('Job logs and artifacts')
+        %li= _('Container registry images')
+        %li= _('CI variables')
+        %li= _('Pipeline triggers')
+        %li= _('Webhooks')
+        %li= _('Any encrypted tokens')
+    - if project.export_status == :finished
+      = render Pajamas::ButtonComponent.new(href: download_export_project_path(project),
+        method: :get,
+        button_options: { ref: 'nofollow', download: '', data: { qa_selector: 'download_export_link' } }) do
+        = _('Download export')
+      = render Pajamas::ButtonComponent.new(href: generate_new_export_project_path(project), method: :post) do
+        = _('Generate new export')
+    - else
+      = render Pajamas::ButtonComponent.new(href: export_project_path(project), method: :post, button_options: { data: { qa_selector: 'export_project_link' } }) do
+        = _('Export project')
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index b5bbb57d58f..cb341ede9de 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -3,19 +3,19 @@
 - ref = local_assigns.fetch(:ref) { current_ref }
 - project = local_assigns.fetch(:project) { @project }
 - has_project_shortcut_buttons = !current_user || current_user.project_shortcut_buttons
-- add_page_startup_api_call logs_file_project_ref_path(@project, ref, @path, format: "json", offset: 0)
+- add_page_startup_api_call logs_file_project_ref_path(@project, ref, @path, format: "json", offset: 0, ref_type: @ref_type)
 - if readme_path = @project.repository.readme_path
   - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, readme_path), viewer: "rich", format: "json")
 
 #tree-holder.tree-holder.clearfix.js-per-page{ data: { blame_per_page: Gitlab::Git::BlamePagination::PAGINATION_PER_PAGE } }
   .info-well.gl-display-none.gl-sm-display-flex.project-last-commit.gl-flex-direction-column.gl-mt-5
-    #js-last-commit.gl-m-auto
+    #js-last-commit.gl-m-auto{ data: {ref_type: @ref_type.to_s} }
       = gl_loading_icon(size: 'md')
     - if project.licensed_feature_available?(:code_owners)
       #js-code-owners{ data: { branch: @ref, can_view_branch_rules: can_view_branch_rules?, branch_rules_path: branch_rules_path } }
 
   .nav-block.gl-display-flex.gl-xs-flex-direction-column.gl-align-items-stretch
-    = render 'projects/tree/tree_header', tree: @tree, is_project_overview: is_project_overview
+    = render 'projects/tree/tree_header', tree: @tree
 
   - if project.forked?
     #js-fork-info{ data: vue_fork_divergence_data(project, ref) }
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 59147138834..4ac30547ce3 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -8,10 +8,9 @@
       %div{ class: 'avatar-container rect-avatar s64 home-panel-avatar gl-flex-shrink-0 gl-w-11 gl-h-11 gl-mr-3! float-none' }
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'image')
       %div
-        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex{ data: { qa_selector: 'project_name_content' }, itemprop: 'name' }
+        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex.gl-word-break-word{ data: { qa_selector: 'project_name_content' }, itemprop: 'name' }
           = @project.name
-          %span.visibility-icon.gl-text-secondary.has-tooltip.gl-ml-2{ data: { container: 'body' }, title: visibility_icon_description(@project) }
-            = visibility_level_icon(@project.visibility_level, options: { class: 'icon' })
+          = visibility_level_content(@project, css_class: 'visibility-icon gl-text-secondary gl-ml-2', icon_css_class: 'icon')
           = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project, additional_classes: 'gl-align-self-center gl-ml-2'
           - if @project.group
             = render_if_exists 'shared/tier_badge', source: @project, source_type: 'Project'
diff --git a/app/views/projects/_merge_request_settings_description_text.html.haml b/app/views/projects/_merge_request_settings_description_text.html.haml
index dc9dc92675d..123520acad8 100644
--- a/app/views/projects/_merge_request_settings_description_text.html.haml
+++ b/app/views/projects/_merge_request_settings_description_text.html.haml
@@ -1 +1 @@
-%p= s_('ProjectSettings|Choose your merge method, merge options, merge checks, and merge suggestions.')
+%p.gl-text-secondary= s_('ProjectSettings|Choose your merge method, merge options, merge checks, and merge suggestions.')
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 983b8056358..ca1fef6eb32 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -9,7 +9,7 @@
   .form-group.gl-form-group.project-name.col-sm-12
     = f.label :name, class: 'label-bold' do
       %span= _("Project name")
-    = f.text_field :name, placeholder: "My awesome project", class: "form-control gl-form-input input-lg", data: { qa_selector: 'project_name', track_label: "#{track_label}", track_action: "activate_form_input", track_property: "project_name", track_value: "" }, required: true, aria: { required: true }
+    = f.text_field :name, placeholder: "My awesome project", class: "form-control gl-form-input input-lg", data: { testid: 'project-name', track_label: "#{track_label}", track_action: "activate_form_input", track_property: "project_name", track_value: "" }, required: true, aria: { required: true }
     %small#js-project-name-description.form-text.text-gl-muted
       = s_("ProjectsNew|Must start with a lowercase or uppercase letter, digit, emoji, or underscore. Can also contain dots, pluses, dashes, or spaces.")
     #js-project-name-error.gl-field-error.gl-mt-2.gl-display-none
@@ -35,7 +35,7 @@
   .form-group.project-path.col-sm-6
     = f.label :path, class: 'label-bold' do
       %span= _("Project slug")
-    = f.text_field :path, placeholder: "my-awesome-project", class: "form-control gl-form-input", required: true, aria: { required: true }, data: { qa_selector: 'project_path', username: current_user.username }
+    = f.text_field :path, placeholder: "my-awesome-project", class: "form-control gl-form-input", required: true, aria: { required: true }, data: { testid: 'project-path', username: current_user.username }
 .js-group-namespace-error.form-text.gl-text-red-500.gl-display-none
   = s_('ProjectsNew|Pick a group or namespace where you want to create this project.')
 - if current_user.can_create_group?
@@ -59,7 +59,7 @@
       class: "form-control gl-form-input",
       rows: 3,
       maxlength: 250,
-      data: { qa_selector: 'project_description',
+      data: { testid: 'project-description',
               track_label: track_label,
               track_action: "activate_form_input",
               track_property: "project_description" }
@@ -71,7 +71,7 @@
   = f.label :visibility_level, class: 'label-bold' do
     = s_('ProjectsNew|Visibility Level')
     = link_to sprite_icon('question-o'), help_page_path('user/public_access'), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
-  = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false, data: { qa_selector: 'visibility_radios'}
+  = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false, data: { testid: 'visibility-radios'}
 
 - if !hide_init_with_readme
   = f.label :project_configuration, class: 'label-bold' do
@@ -80,7 +80,7 @@
   .form-group
     = render Pajamas::CheckboxTagComponent.new(name: 'project[initialize_with_readme]',
       checked: true,
-      checkbox_options: { data: { qa_selector: 'initialize_with_readme_checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_readme' } }) do |c|
+      checkbox_options: { data: { testid: 'initialize-with-readme-checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_readme' } }) do |c|
       - c.with_label do
         = s_('ProjectsNew|Initialize repository with a README')
       - c.with_help_text do
@@ -88,7 +88,7 @@
 
   .form-group
     = render Pajamas::CheckboxTagComponent.new(name: 'project[initialize_with_sast]',
-      checkbox_options: { data: { qa_selector: 'initialize_with_sast_checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' } }) do |c|
+      checkbox_options: { data: { testid: 'initialize-with-sast-checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' } }) do |c|
       - c.with_label do
         = s_('ProjectsNew|Enable Static Application Security Testing (SAST)')
       - c.with_help_text do
@@ -97,5 +97,5 @@
 
 -# 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
+= f.submit _('Create project'), class: "js-create-project-button", data: { testid: 'project-create-button', track_label: "#{track_label}", track_action: "click_button", track_property: "create_project", track_value: "" }, pajamas_button: true
 = 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/_remove.html.haml b/app/views/projects/_remove.html.haml
index dec3199ffe1..12b310f8ba0 100644
--- a/app/views/projects/_remove.html.haml
+++ b/app/views/projects/_remove.html.haml
@@ -3,10 +3,14 @@
 - issues_count = Projects::AllIssuesCountService.new(project).count
 - forks_count = Projects::ForksCountService.new(project).count
 
-.sub-section
-  %h4.danger-title= _('Delete project')
-  %p
-    %strong= _('Deleting the project will delete its repository and all related resources, including issues and merge requests.')
-  %p
-    %strong= _('Deleted projects cannot be restored!')
-  #js-project-delete-button{ data: { form_path: project_path(project), confirm_phrase: delete_confirm_phrase(project), is_fork: project.forked?.to_s, issues_count: number_with_delimiter(issues_count), merge_requests_count: number_with_delimiter(merge_requests_count), forks_count: number_with_delimiter(forks_count), stars_count: number_with_delimiter(project.star_count) } }
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-bg-red-50 gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.danger-title= _('Delete project')
+
+  - c.with_body do
+    %p
+      %strong= _('Deleting the project will delete its repository and all related resources, including issues and merge requests.')
+    %p
+      %strong= _('Deleted projects cannot be restored!')
+    #js-project-delete-button{ data: { form_path: project_path(project), confirm_phrase: delete_confirm_phrase(project), is_fork: project.forked?.to_s, issues_count: number_with_delimiter(issues_count), merge_requests_count: number_with_delimiter(merge_requests_count), forks_count: number_with_delimiter(forks_count), stars_count: number_with_delimiter(project.star_count) } }
diff --git a/app/views/projects/_remove_fork.html.haml b/app/views/projects/_remove_fork.html.haml
index 260c2b2272e..2db78d0f62a 100644
--- a/app/views/projects/_remove_fork.html.haml
+++ b/app/views/projects/_remove_fork.html.haml
@@ -1,11 +1,15 @@
 - return unless @project.forked? && can?(current_user, :remove_fork_project, @project)
 - remove_form_id = "js-remove-project-fork-form"
 
-.sub-section
-  %h4.danger-title= _('Remove fork relationship')
-  %p= remove_fork_project_description_message(@project)
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.danger-title= _('Remove fork relationship')
+    %p.gl-new-card-description
+      = remove_fork_project_description_message(@project)
 
-  = form_for @project, url: remove_fork_project_path(@project), method: :delete, html: { id: remove_form_id } do |f|
-    %p
-      %strong= _('After it is removed, the fork relationship can only be restored by using the API. This project will no longer be able to receive or send merge requests to the upstream project or other forks.')
-    .js-confirm-danger{ data: remove_fork_project_confirm_json(@project, remove_form_id) }
+  - c.with_body do
+    = form_for @project, url: remove_fork_project_path(@project), method: :delete, html: { id: remove_form_id } do |f|
+      %p
+        %strong= _('After it is removed, the fork relationship can only be restored by using the API. This project will no longer be able to receive or send merge requests to the upstream project or other forks.')
+      .js-confirm-danger{ data: remove_fork_project_confirm_json(@project, remove_form_id) }
diff --git a/app/views/projects/_service_desk_settings.html.haml b/app/views/projects/_service_desk_settings.html.haml
index 0a83efdb3b8..c2382a66132 100644
--- a/app/views/projects/_service_desk_settings.html.haml
+++ b/app/views/projects/_service_desk_settings.html.haml
@@ -5,7 +5,7 @@
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
     - link_start = "<a href='#{help_page_path('user/project/service_desk')}' target='_blank' rel='noopener noreferrer'>".html_safe
-    %p= _('Enable and disable Service Desk. Some additional configuration might be required. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+    %p.gl-text-secondary= _('Enable and disable Service Desk. Some additional configuration might be required. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
   .settings-content
     - if ::Gitlab::ServiceDesk.supported?
       .js-service-desk-setting-root{ data: { endpoint: project_service_desk_path(@project),
@@ -19,6 +19,7 @@
         outgoing_name: "#{@project.service_desk_setting&.outgoing_name}",
         project_key: "#{@project.service_desk_setting&.project_key}",
         templates: available_service_desk_templates_for(@project),
-        public_project: "#{@project.public?}" } }
+        public_project: "#{@project.public?}",
+        custom_email_endpoint: project_service_desk_custom_email_path(@project) } }
     - elsif show_callout?('promote_service_desk_dismissed')
       = render 'shared/promotions/promote_servicedesk'
diff --git a/app/views/projects/_transfer.html.haml b/app/views/projects/_transfer.html.haml
index 93fc8d12960..fe84a83c43c 100644
--- a/app/views/projects/_transfer.html.haml
+++ b/app/views/projects/_transfer.html.haml
@@ -3,21 +3,29 @@
 - hidden_input_id = "new_namespace_id"
 - initial_data = { button_text: s_('ProjectSettings|Transfer project'), confirm_danger_message: transfer_project_message(@project), phrase: @project.name, target_form_id: form_id, target_hidden_input_id: hidden_input_id, project_id: @project.id }
 
-.sub-section{ data: { qa_selector: 'transfer_project_content' } }
-  %h4.danger-title= _('Transfer project')
-  = form_for @project, url: transfer_project_path(@project), method: :put, html: { class: 'js-project-transfer-form', id: form_id } do |f|
-    .form-group
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { qa_selector: 'transfer_project_content' } }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.warning-title= _('Transfer project')
+    %p.gl-new-card-description
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'transfer-a-project-to-another-namespace') }
-      %p= _("Transfer your project into another namespace. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-      %p= _('When you transfer your project to a group, you can easily manage multiple projects, view usage quotas for storage, pipeline minutes, and users, and start a trial or upgrade to a paid tier.')
-      %p
-        = _("Don't have a group?")
-        = link_to _('Create one'), new_group_path, target: '_blank'
-      = _('Things to be aware of before transferring:')
-      %ul
-        %li= _("Be careful. Changing the project's namespace can have unintended side effects.")
-        %li= _('You can only transfer the project to namespaces you manage.')
-        %li= _('You will need to update your local repositories to point to the new location.')
-        %li= _('Project visibility level will be changed to match namespace rules when transferring to a group.')
-      = hidden_field_tag(hidden_input_id)
-      .js-transfer-project-form{ data: initial_data }
+      = _("Transfer your project into another namespace. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+
+  - c.with_body do
+    = form_for @project, url: transfer_project_path(@project), method: :put, html: { class: 'js-project-transfer-form', id: form_id } do |f|
+      .form-group.gl-mb-0
+        %p
+          - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'rename-a-repository') }
+          = _("A project’s repository name defines its URL (the one you use to access the project via a browser) and its place on the file disk where GitLab is installed. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+        %p= _('When you transfer your project to a group, you can easily manage multiple projects, view usage quotas for storage, pipeline minutes, and users, and start a trial or upgrade to a paid tier.')
+        %p
+          = _("Don't have a group?")
+          = link_to _('Create one'), new_group_path, target: '_blank'
+        %p.gl-font-weight-bold= _('Things to be aware of before transferring:')
+        %ul
+          %li= _("Be careful. Changing the project's namespace can have unintended side effects.")
+          %li= _('You can only transfer the project to namespaces you manage.')
+          %li= _('You will need to update your local repositories to point to the new location.')
+          %li= _('Project visibility level will be changed to match namespace rules when transferring to a group.')
+        = hidden_field_tag(hidden_input_id)
+        .js-transfer-project-form{ data: initial_data }
diff --git a/app/views/projects/_wiki.html.haml b/app/views/projects/_wiki.html.haml
index e82e0972d82..82cfb0435c7 100644
--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
@@ -7,7 +7,7 @@
   .landing{ class: [('row-content-block row p-0 align-items-center' if can_create_wiki), ('content-block' unless can_create_wiki)] }
     .col-12.col-md-3.p-0
       .svg-content
-        = image_tag 'illustrations/wiki_login_empty.svg'
+        = image_tag 'illustrations/empty-state/empty-wiki-md.svg'
     .col-12.col-md-9.text-center.text-md-left.pl-md-0.pl-sm-3.mb-4
       %h4
         = _("This project does not have a wiki homepage yet")
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index e5566882371..543bdaf46df 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -24,7 +24,7 @@
   - if !expanded
     -# Data info will be removed once we migrate this to use GraphQL
     -# Follow-up issue: https://gitlab.com/gitlab-org/gitlab/-/issues/330406
-    #js-view-blob-app{ data: vue_blob_app_data(project, blob, ref) }
+    #js-view-blob-app{ data: vue_blob_app_data(project, blob, ref).merge(ref_type: @ref_type.to_s) }
       = gl_loading_icon(size: 'md')
   - else
     %article.file-holder
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
index 417c11ba37a..539453bf6af 100644
--- a/app/views/projects/blob/_breadcrumb.html.haml
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -1,21 +1,21 @@
 - blame = local_assigns.fetch(:blame, false)
 .nav-block
   .tree-ref-container
-    .tree-ref-holder
+    .tree-ref-holder.gl-max-w-26
       #js-tree-ref-switcher{ data: { project_id: @project.id, project_root_path: project_path(@project), ref: current_ref, ref_type: @ref_type.to_s } }
 
     %ul.breadcrumb.repo-breadcrumb
       %li.breadcrumb-item
-        = link_to project_tree_path(@project, @ref) do
+        = link_to project_tree_path(@project, @ref, ref_type: @ref_type) do
           = @project.path
       - path_breadcrumbs do |title, path|
         - title = truncate(title, length: 40)
         %li.breadcrumb-item
           - if path == @path
-            = link_to project_blob_path(@project, tree_join(@ref, path)) do
+            = link_to project_blob_path(@project, tree_join(@ref, path), ref_type: @ref_type) do
               %strong= title
           - else
-            = link_to title, project_tree_path(@project, tree_join(@ref, path))
+            = link_to title, project_tree_path(@project, tree_join(@ref, path), ref_type: @ref_type)
 
   .tree-controls.gl-children-ml-sm-3<
     = render 'projects/find_file_link'
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 68520d36858..49a29e1dcb7 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -8,23 +8,17 @@
       = sprite_icon('branch', size: 12)
       = ref
     - if current_action?(:edit) || current_action?(:update)
-      %span.float-left.gl-mr-3
-      = text_field_tag 'file_path', (params[:file_path] || @path),
-        class: 'form-control gl-form-input new-file-path js-file-path-name-input'
-      = render 'template_selectors'
+      - input_options = { id: 'file_path', name: 'file_path', value: (params[:file_path] || @path), class: 'new-file-path js-file-path-name-input' }
+      = render 'filepath_form', input_options: input_options
 
     - if current_action?(:new) || current_action?(:create)
-      %span.float-left.gl-mr-3
-        \/
-      = text_field_tag 'file_name', params[:file_name], placeholder: "Filename", data: { qa_selector: 'file_name_field' },
-        required: true, class: 'form-control gl-form-input new-file-name js-file-path-name-input', value: params[:file_name] || (should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : '')
-      = render 'template_selectors'
+      - input_options = { id: 'file_name', name: 'file_name', value: params[:file_name] || (should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : ''), required: true, placeholder: "Filename", testid: 'file_name_field', class: 'new-file-name js-file-path-name-input' }
+      = render 'filepath_form', input_options: input_options
       - if should_suggest_gitlab_ci_yml?
-        .js-suggest-gitlab-ci-yml{ data: { target: '#gitlab-ci-yml-selector',
-          track_label: 'suggest_gitlab_ci_yml',
-          merge_request_path: params[:mr_path],
-          dismiss_key: @project.id,
-          human_access: human_access } }
+        .js-suggest-gitlab-ci-yml{ data: { track_label: 'suggest_gitlab_ci_yml',
+              merge_request_path: params[:mr_path],
+              dismiss_key: @project.id,
+              human_access: human_access } }
 
     - if Feature.enabled?(:source_editor_toolbar, current_user)
       #editor-toolbar
diff --git a/app/views/projects/blob/_filepath_form.html.haml b/app/views/projects/blob/_filepath_form.html.haml
new file mode 100644
index 00000000000..53c681fd264
--- /dev/null
+++ b/app/views/projects/blob/_filepath_form.html.haml
@@ -0,0 +1 @@
+= dropdown_data_attr(options: { data: { templates: { licenses: licenses_for_select(@project), gitignore_names: gitignore_names(@project), gitlab_ci_ymls: gitlab_ci_ymls(@project), dockerfile_names: dockerfile_names(@project) }, selected: params[:template], input_options: input_options }})
diff --git a/app/views/projects/blob/_pipeline_tour_success.html.haml b/app/views/projects/blob/_pipeline_tour_success.html.haml
index 0fa4a90e28b..f645d23aa1c 100644
--- a/app/views/projects/blob/_pipeline_tour_success.html.haml
+++ b/app/views/projects/blob/_pipeline_tour_success.html.haml
@@ -1,6 +1,6 @@
 .js-success-pipeline-modal{ data: { 'commit-cookie': suggest_pipeline_commit_cookie_name,
   'go-to-pipelines-path': project_pipelines_path(@project),
   'project-merge-requests-path': project_merge_requests_path(@project),
-  'example-link': help_page_path('ci/examples/index.md', anchor: 'gitlab-cicd-examples'),
+  'example-link': help_page_path('ci/examples/index.md'),
   'code-quality-link': help_page_path('ci/testing/code_quality'),
   'human-access': @project.team.human_max_access(current_user&.id) } }
diff --git a/app/views/projects/blob/_template_selectors.html.haml b/app/views/projects/blob/_template_selectors.html.haml
deleted file mode 100644
index 0bd29ceb563..00000000000
--- a/app/views/projects/blob/_template_selectors.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-.template-selectors-menu.gl-pl-3
-  .template-selector-dropdowns-wrap
-    .license-selector.js-license-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-license-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: licenses_for_select(@project), project: @project.name, fullname: @project.namespace.human_name, qa_selector: 'license_dropdown' } })
-    .gitignore-selector.js-gitignore-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-gitignore-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitignore_names(@project), qa_selector: 'gitignore_dropdown' } })
-    #gitlab-ci-yml-selector.gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-gitlab-ci-yml-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls(@project), selected: params[:template], qa_selector: 'gitlab_ci_yml_dropdown' } })
-    .dockerfile-selector.js-dockerfile-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-dockerfile-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: dockerfile_names(@project), qa_selector: 'dockerfile_dropdown' } })
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index c8cf12c36f9..9ec824f64d4 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/app/views/projects/blob/show.html.haml
@@ -4,13 +4,13 @@
 - signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit, limit: 1)
 - content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
-- add_page_startup_graphql_call('repository/blob_info', { projectPath: @project.full_path, ref: current_ref, filePath: @blob.path, shouldFetchRawText: @blob.rendered_as_text? && !@blob.rich_viewer })
+- add_page_startup_graphql_call('repository/blob_info', { projectPath: @project.full_path, ref: current_ref, refType: @ref_type.to_s, filePath: @blob.path, shouldFetchRawText: @blob.rendered_as_text? && !@blob.rich_viewer })
 
 .js-signature-container{ data: { 'signatures-path': signatures_path } }
 
 = render 'projects/last_push'
 
-#tree-holder.tree-holder
+#tree-holder.tree-holder.gl-pt-4
   = render 'blob', blob: @blob
 
 = render partial: 'pipeline_tour_success' if show_suggest_pipeline_creation_celebration?
diff --git a/app/views/projects/branch_defaults/_show.html.haml b/app/views/projects/branch_defaults/_show.html.haml
index 4ecbc3b7fc8..5906cd34c17 100644
--- a/app/views/projects/branch_defaults/_show.html.haml
+++ b/app/views/projects/branch_defaults/_show.html.haml
@@ -5,7 +5,7 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Branch defaults')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('ProjectSettings|Select the default branch for this project, and configure the template for branch names.')
 
   .settings-content
diff --git a/app/views/projects/branch_rules/_show.html.haml b/app/views/projects/branch_rules/_show.html.haml
index 605715e2899..c16c03953c6 100644
--- a/app/views/projects/branch_rules/_show.html.haml
+++ b/app/views/projects/branch_rules/_show.html.haml
@@ -8,9 +8,9 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Branch rules')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Define rules for who can push, merge, and the required approvals for each branch.')
       = link_to(_('Leave feedback.'), 'https://gitlab.com/gitlab-org/gitlab/-/issues/388149', target: '_blank', rel: 'noopener noreferrer')
 
-  .settings-content.gl-pr-0
+  .settings-content
     #js-branch-rules{ data: { project_path: @project.full_path, branch_rules_path: project_settings_repository_branch_rules_path(@project), show_code_owners: show_code_owners.to_s, show_status_checks: show_status_checks.to_s, show_approvers: show_approvers.to_s } }
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index ae8d230f356..7c52350f101 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -4,10 +4,10 @@
 - mr_status = merge_request_status(related_merge_request)
 - is_default_branch = branch.name == @repository.root_ref
 
-%li{ class: "branch-item gl-display-flex! gl-align-items-center! js-branch-item js-branch-#{branch.name} gl-pl-3!", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
+%li{ class: "branch-item gl-display-flex! gl-align-items-center! js-branch-item js-branch-#{branch.name} gl-pl-5! gl-pr-2!", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
   .branch-info
     .gl-display-flex.gl-align-items-center
-      = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name', data: { qa_selector: 'branch_link' } do
+      = link_to project_tree_path(@project, branch.name, ref_type: 'heads'), class: 'item-title str-truncated-100 ref-name', data: { qa_selector: 'branch_link' } do
         = branch.name
       = clipboard_button(text: branch.name, title: _("Copy branch name"))
       - if is_default_branch
diff --git a/app/views/projects/branches/_panel.html.haml b/app/views/projects/branches/_panel.html.haml
index c01e3677c19..8ef7d435420 100644
--- a/app/views/projects/branches/_panel.html.haml
+++ b/app/views/projects/branches/_panel.html.haml
@@ -7,7 +7,7 @@
 
 - return unless branches.any?
 
-= 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|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }, footer_options: { class: 'gl-new-card-footer' }) do |c|
   - c.with_header do
     %h3.gl-new-card-title.h5
       = panel_title
diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml
index c9dcfaff8c6..963c416ed42 100644
--- a/app/views/projects/buttons/_fork.html.haml
+++ b/app/views/projects/buttons/_fork.html.haml
@@ -1,16 +1,3 @@
 - unless @project.empty_repo?
   - if current_user
-    .count-badge.btn-group
-      - if current_user.already_forked?(@project) && current_user.forkable_namespaces.size < 2
-        = 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_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
+    #js-forks-button{ data: fork_button_data_attributes(@project) }
diff --git a/app/views/projects/cleanup/_show.html.haml b/app/views/projects/cleanup/_show.html.haml
index d00d9f62999..fffa1ff36b9 100644
--- a/app/views/projects/cleanup/_show.html.haml
+++ b/app/views/projects/cleanup/_show.html.haml
@@ -5,7 +5,7 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Repository cleanup')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       - link_url = 'https://github.com/newren/git-filter-repo'
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: link_url }
       - link_end = '</a>'.html_safe
@@ -21,7 +21,7 @@
         .gl-mb-3
           %h5.gl-mt-0
             = _("Upload object map")
-          %button.gl-button.btn.btn-default.js-choose-file{ type: "button" }
+          = render Pajamas::ButtonComponent.new(button_options: { class: 'js-choose-file' }) do
             = _("Choose a file")
           %span.gl-ml-3.js-filename
             = _("No file selected")
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index a0f47f375f7..010f15ec6f2 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -7,7 +7,7 @@
 - context_commits = @context_commits&.map { |commit| commit.present(current_user: current_user) }
 - hidden = @hidden_commit_count
 
-- commits.chunk { |c| c.committed_date.in_time_zone.to_date }.each do |day, daily_commits|
+- commits.chunk { |commit| local_committed_date(commit, current_user) }.each do |day, daily_commits|
   %li.js-commit-header.gl-py-2.gl-border-b{ data: { day: day } }
     %span.day.font-weight-bold= l(day, format: '%b %d, %Y')
 
@@ -44,7 +44,8 @@
 
 - if commits.size == 0 && context_commits.nil?
   .commits-empty.gl-mt-6
-    = custom_icon('illustration_no_commits')
+    .svg-content.svg-150
+      = image_tag('illustrations/empty-state/empty-search-md.svg')
     %h4
       = _('Your search didn\'t match any commits.')
     %p
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 8afc9ade3e1..1034f06f722 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -1,5 +1,6 @@
 - breadcrumb_title _("Commits")
 - add_page_specific_style 'page_bundles/tree'
+- add_page_specific_style 'page_bundles/merge_request'
 - page_title _("Commits"), @ref
 
 = content_for :meta_tags do
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 5b6f7c392dd..69c7a497c7d 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -1,13 +1,14 @@
 - add_to_breadcrumbs s_("CompareRevisions|Compare revisions"), project_compare_index_path(@project)
 - page_title "#{params[:from]} to #{params[:to]}"
+- has_diff = @commits.present? || @diffs.present? && @diffs.diff_files.present?
+-# Only show commit list in the first page
+- hide_commit_list = params[:page].present? && params[:page] != '1'
 
 .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) }
 
-- if @commits.present? || @diffs.present?
-  -# Only show commit list in the first page
-  - hide_commit_list = params[:page].present? && params[:page] != '1'
+- if has_diff
   = render "projects/commits/commit_list" unless hide_commit_list
   = render "projects/diffs/diffs",
     diffs: @diffs,
diff --git a/app/views/projects/confluences/show.html.haml b/app/views/projects/confluences/show.html.haml
index 283408ffa63..cdf3562a8ed 100644
--- a/app/views/projects/confluences/show.html.haml
+++ b/app/views/projects/confluences/show.html.haml
@@ -1,7 +1,7 @@
 - breadcrumb_title _('Confluence')
 - page_title _('Confluence')
 - add_page_specific_style 'page_bundles/wiki'
-= render layout: 'shared/empty_states/wikis_layout', locals: { image_path: 'illustrations/wiki_login_empty.svg' } do
+= render layout: 'shared/empty_states/wikis_layout', locals: { image_path: 'illustrations/empty-state/empty-wiki-md.svg' } do
   %h4
     = s_('WikiEmpty|Confluence is enabled')
   %p
diff --git a/app/views/projects/deploy_keys/edit.html.haml b/app/views/projects/deploy_keys/edit.html.haml
index 997443d5fa9..0044ff4dc24 100644
--- a/app/views/projects/deploy_keys/edit.html.haml
+++ b/app/views/projects/deploy_keys/edit.html.haml
@@ -1,10 +1,8 @@
 - page_title _('Edit Deploy Key')
 %h1.page-title.gl-font-size-h-display= _('Edit Deploy Key')
-%hr
 
-%div
-  = gitlab_ui_form_for [@project, @deploy_key], include_id: false, html: { class: 'js-requires-input' } do |f|
-    = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
-    .form-actions
-      = f.submit _('Save changes'), pajamas_button: true
-      = link_button_to _('Cancel'), project_settings_repository_path(@project)
+= gitlab_ui_form_for [@project, @deploy_key], include_id: false, html: { class: 'js-requires-input' } do |f|
+  = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
+  .gl-display-flex.gl-mt-6.gl-gap-3
+    = f.submit _('Save changes'), pajamas_button: true
+    = link_button_to _('Cancel'), project_settings_repository_path(@project, anchor: 'js-deploy-keys-settings')
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 98e8c2dd61b..662f1bb158d 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -17,7 +17,7 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Naming, topics, avatar')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = _('Collapse')
-    %p= _('Update your project name, topics, description, and avatar.')
+    %p.gl-text-secondary= _('Update your project name, topics, description, and avatar.')
   .settings-content= render 'projects/settings/general'
 
 %section.settings.sharing-permissions.no-animate#js-shared-permissions{ class: ('expanded' if expanded), data: { qa_selector: 'visibility_features_permissions_content' } }
@@ -25,7 +25,7 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Visibility, project features, permissions')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p= _('Choose visibility level, enable/disable project features and their permissions, disable email notifications, and show default award emoji.')
+    %p.gl-text-secondary= _('Choose visibility level, enable/disable project features and their permissions, disable email notifications, and show default emoji reactions.')
 
   .settings-content
     = form_for @project, html: { multipart: true, class: "sharing-permissions-form", id: reduce_visibility_form_id }, authenticity_token: true do |f|
@@ -40,15 +40,13 @@
       - c.with_body do
         = _('On the left sidebar, select %{merge_requests_link} to view them.').html_safe % { merge_requests_link: link_to('Settings > Merge requests', project_settings_merge_requests_path(@project)).html_safe }
 
-= render_if_exists 'projects/settings/analytics', expanded: expanded
-
 %section.settings.no-animate{ class: ('expanded' if expanded), data: { qa_selector: 'badges_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_('ProjectSettings|Badges')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('ProjectSettings|Customize this project\'s badges.')
       = link_to s_('ProjectSettings|What are badges?'), help_page_path('user/project/badges')
   .settings-content
@@ -60,52 +58,59 @@
 
 = render 'projects/service_desk_settings'
 
-= render_if_exists 'product_analytics/project_settings', expanded: expanded
-
 %section.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded), data: { qa_selector: 'advanced_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Advanced')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p= s_('ProjectSettings|Housekeeping, export, archive, change path, transfer, and delete.')
+    %p.gl-text-secondary= s_('ProjectSettings|Housekeeping, export, archive, change path, transfer, and delete.')
 
   .settings-content
     = render_if_exists 'projects/settings/restore', project: @project
 
-    .sub-section
-      %h4= _('Housekeeping')
-      %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'
-      = render Pajamas::ButtonComponent.new(method: :post, href: housekeeping_project_path(@project)) do
-        = _('Run housekeeping')
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-mt-0' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h4.gl-new-card-title= _('Housekeeping')
+        %p.gl-new-card-description
+          = _('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'
 
-      .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') } }
+      - c.with_body do
+        .gl-display-flex.gl-flex-wrap.gl-gap-3
+          = render Pajamas::ButtonComponent.new(method: :post, href: housekeeping_project_path(@project)) do
+            = _('Run housekeeping')
+          #js-project-prune-unreachable-objects-button{ data: { prune_objects_path: housekeeping_project_path(@project, prune: true), prune_objects_doc_path: help_page_path('administration/housekeeping', anchor: 'prune-unreachable-objects') } }
 
     = render 'export', project: @project
 
     = render_if_exists 'projects/settings/archive'
-    .sub-section.rename-repository
-      %h4.warning-title= _('Change path')
-      = render 'projects/errors'
-      = gitlab_ui_form_for @project do |f|
-        .form-group
+
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card rename-repository' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h4.gl-new-card-title.warning-title= _('Change path')
+        %p.gl-new-card-description
           - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'rename-a-repository') }
-          %p= _("A project’s repository name defines its URL (the one you use to access the project via a browser) and its place on the file disk where GitLab is installed. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-          %ul
-            %li= _("Be careful. Renaming a project's repository can have unintended side effects.")
-            %li= _('You will need to update your local repositories to point to the new location.')
-            - if @project.deployment_platform.present?
-              %li= _('Your deployment services will be broken, you will need to manually fix the services after renaming.')
-          = f.label :path, _('Path'), class: 'label-bold'
+          = _("A project’s repository name defines its URL (the one you use to access the project via a browser) and its place on the file disk where GitLab is installed. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+
+      - c.with_body do
+        = render 'projects/errors'
+        = gitlab_ui_form_for @project do |f|
           .form-group
-            .input-group
-              .input-group-prepend
-                .input-group-text
-                  #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
-              = f.text_field :path, class: 'form-control', data: { qa_selector: 'project_path_field' }
-        = f.submit _('Change path'), class: "btn-danger", data: { qa_selector: 'change_path_button' }, pajamas_button: true
+            %p
+              %span.gl-font-weight-bold= _("Be careful. Renaming a project's repository can have unintended side effects.")
+              = _('You will need to update your local repositories to point to the new location.')
+            - if @project.deployment_platform.present?
+              %p= _('Your deployment services will be broken, you will need to manually fix the services after renaming.')
+            = f.label :path, _('Path'), class: 'label-bold'
+            .form-group
+              .input-group
+                .input-group-prepend
+                  .input-group-text
+                    #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
+                = f.text_field :path, class: 'form-control gl-form-input-xl', data: { qa_selector: 'project_path_field' }
+          = f.submit _('Change path'), class: "btn-danger", data: { qa_selector: 'change_path_button' }, pajamas_button: true
 
     = render 'transfer', project: @project
 
diff --git a/app/views/projects/feature_flags/index.html.haml b/app/views/projects/feature_flags/index.html.haml
index e473a6f3cfd..ec0830ad153 100644
--- a/app/views/projects/feature_flags/index.html.haml
+++ b/app/views/projects/feature_flags/index.html.haml
@@ -3,7 +3,7 @@
 #feature-flags-vue{ data: { endpoint: project_feature_flags_path(@project, format: :json),
   "project-id" => @project.id,
   "project-name" => @project.name,
-  "error-state-svg-path" => image_path('illustrations/feature_flag.svg'),
+  "error-state-svg-path" => image_path('illustrations/empty-state/empty-feature-flag-md.svg'),
   "feature-flags-help-page-path" => help_page_path("operations/feature_flags"),
   "feature-flags-client-libraries-help-page-path" => help_page_path("operations/feature_flags", anchor: "choose-a-client-library"),
   "feature-flags-client-example-help-page-path" => help_page_path("operations/feature_flags", anchor: "go-application-example"),
diff --git a/app/views/projects/feature_flags_user_lists/index.html.haml b/app/views/projects/feature_flags_user_lists/index.html.haml
index c0e98b27d29..2e279d71758 100644
--- a/app/views/projects/feature_flags_user_lists/index.html.haml
+++ b/app/views/projects/feature_flags_user_lists/index.html.haml
@@ -5,4 +5,4 @@
 #js-user-lists{ data: { project_id: @project.id,
   feature_flags_help_page_path: help_page_path("operations/feature_flags"),
   new_user_list_path: can?(current_user, :create_feature_flag, @project) ? new_project_feature_flags_user_list_path(@project): nil,
-  error_state_svg_path: image_path('illustrations/feature_flag.svg') } }
+  error_state_svg_path: image_path('illustrations/empty-state/empty-feature-flag-md.svg') } }
diff --git a/app/views/projects/feature_flags_user_lists/show.html.haml b/app/views/projects/feature_flags_user_lists/show.html.haml
index 5c4e93e7707..58276eedc09 100644
--- a/app/views/projects/feature_flags_user_lists/show.html.haml
+++ b/app/views/projects/feature_flags_user_lists/show.html.haml
@@ -5,4 +5,4 @@
 
 #js-edit-user-list{ data: { project_id: @project.id,
   user_list_iid: @user_list.iid,
-  empty_state_path: image_path('illustrations/feature_flag.svg') } }
+  empty_state_path: image_path('illustrations/empty-state/empty-feature-flag-md.svg') } }
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index 7e93e44c463..541b8c1147d 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -1,9 +1,9 @@
 - page_title _("Find File"), @ref
 - 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)) }
+.file-finder-holder.tree-holder.clearfix.js-file-finder.gl-pt-4{ 'data-file-find-url': "#{escape_javascript(project_files_path(@project, @ref, format: :json))}", 'data-find-tree-url': escape_javascript(project_tree_path(@project, @ref)), 'data-blob-url-template': escape_javascript(project_blob_path(@project, @ref)) }
   .nav-block.gl-xs-mr-0
-    .tree-ref-holder.gl-xs-mb-3.gl-xs-w-full
+    .tree-ref-holder.gl-xs-mb-3.gl-xs-w-full.gl-max-w-26
       #js-blob-ref-switcher{ data: { project_id: @project.id, ref: @ref, namespace: "/-/find_file" } }
     %ul.breadcrumb.repo-breadcrumb.gl-flex-nowrap
       %li.breadcrumb-item.gl-white-space-nowrap
diff --git a/app/views/projects/hook_logs/show.html.haml b/app/views/projects/hook_logs/show.html.haml
index 30084e3310b..2eaf89be4ef 100644
--- a/app/views/projects/hook_logs/show.html.haml
+++ b/app/views/projects/hook_logs/show.html.haml
@@ -7,7 +7,8 @@
 %hr
 
 - 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")
+  = render Pajamas::ButtonComponent.new(button_options: { class: "float-right gl-ml-3 has-tooltip", disabled: true, title: _("Request data is too large") }) do
+    = _("Resend Request")
 - else
   = link_button_to _("Resend Request"), @hook_log.present.retry_path, method: :post, class: 'float-right gl-ml-3'
 
diff --git a/app/views/projects/integrations/shimos/show.html.haml b/app/views/projects/integrations/shimos/show.html.haml
index e6cd8c15809..165e414f75b 100644
--- a/app/views/projects/integrations/shimos/show.html.haml
+++ b/app/views/projects/integrations/shimos/show.html.haml
@@ -1,7 +1,7 @@
 - breadcrumb_title s_('Shimo|Shimo Workspace')
 - page_title s_('Shimo|Shimo Workspace')
 - add_page_specific_style 'page_bundles/wiki'
-= render layout: 'shared/empty_states/wikis_layout', locals: { image_path: 'illustrations/wiki_login_empty.svg' } do
+= render layout: 'shared/empty_states/wikis_layout', locals: { image_path: 'illustrations/empty-state/empty-wiki-md.svg' } do
   %h4
     = s_('Shimo|Shimo Workspace integration is enabled')
   %p
diff --git a/app/views/projects/issuable/_show.html.haml b/app/views/projects/issuable/_show.html.haml
index ec233bc9aff..e502457808d 100644
--- a/app/views/projects/issuable/_show.html.haml
+++ b/app/views/projects/issuable/_show.html.haml
@@ -7,5 +7,4 @@
 
 = render "projects/issues/service_desk/alert_moved_from_service_desk", issue: issuable
 
-= render 'shared/issue_type/details_header', issuable: issuable
 = render 'shared/issue_type/details_content', issuable: issuable, api_awards_path: api_awards_path
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index f8f57934303..8bfad64c369 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -1,6 +1,7 @@
 - page_title _('Issues')
 - add_page_specific_style 'page_bundles/issuable_list'
 - add_page_specific_style 'page_bundles/issues_list'
+- add_page_specific_style 'page_bundles/work_items'
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")
 
diff --git a/app/views/projects/issues/new.html.haml b/app/views/projects/issues/new.html.haml
index d344ae6a4e6..64143502b77 100644
--- a/app/views/projects/issues/new.html.haml
+++ b/app/views/projects/issues/new.html.haml
@@ -1,3 +1,4 @@
+- add_page_specific_style 'page_bundles/merge_request'
 - add_to_breadcrumbs _("Issues"), project_issues_path(@project)
 - breadcrumb_title _("New")
 - page_title _("New Issue")
diff --git a/app/views/projects/issues/service_desk.html.haml b/app/views/projects/issues/service_desk.html.haml
index 9793f21e4a9..2d17719a8c2 100644
--- a/app/views/projects/issues/service_desk.html.haml
+++ b/app/views/projects/issues/service_desk.html.haml
@@ -15,7 +15,7 @@
       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'),
+      service_desk_help_path: help_page_path('user/project/service_desk/index'),
       is_service_desk_supported: Gitlab::ServiceDesk.supported?.to_s,
       is_service_desk_enabled: @project.service_desk_enabled?.to_s } }
   - else
diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml
index d39d292fb53..0073c6b89cd 100644
--- a/app/views/projects/jobs/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -1,5 +1,6 @@
 - page_title _("Jobs")
 - add_page_specific_style 'page_bundles/ci_status'
+- add_page_specific_style 'page_bundles/merge_request'
 - admin = local_assigns.fetch(:admin, false)
 
 #js-jobs-table{ data: { admin: admin, full_path: @project.full_path, job_statuses: job_statuses.to_json, pipeline_editor_path: project_ci_pipeline_editor_path(@project), empty_state_svg_path: image_path('jobs-empty-state.svg') } }
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index b151c355b3e..d81855b12ed 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -4,6 +4,7 @@
 - add_page_specific_style 'page_bundles/build'
 - add_page_specific_style 'page_bundles/xterm'
 - add_page_specific_style 'page_bundles/ci_status'
+- add_page_specific_style 'page_bundles/merge_request'
 
 = render_if_exists "shared/shared_runners_minutes_limit_flash_message"
 
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index e1c904d000f..8855e8024b3 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -23,7 +23,7 @@
             = _('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-prioritized-labels.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'
         - if @prioritized_labels.any?
@@ -37,8 +37,8 @@
         .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
+        .gl-new-card-body.gl-px-0
+          .js-other-labels.manage-labels-list
             = render partial: 'shared/label', collection: @labels, as: :label, locals: { subject: @project }
             = paginate @labels, theme: 'gitlab'
 
diff --git a/app/views/projects/merge_requests/_page.html.haml b/app/views/projects/merge_requests/_page.html.haml
index 5ea67376a86..69e2487152e 100644
--- a/app/views/projects/merge_requests/_page.html.haml
+++ b/app/views/projects/merge_requests/_page.html.haml
@@ -106,7 +106,7 @@
 - if @merge_request.can_be_cherry_picked?
   = render "projects/commit/change", type: 'cherry-pick', commit: @merge_request.merge_commit
 
-#js-review-bar{ data: { new_comment_template_path: profile_comment_templates_path } }
+#js-review-bar{ data: review_bar_data(@merge_request, current_user) }
 
 - if current_user && Feature.enabled?(:mr_experience_survey, current_user)
   #js-mr-experience-survey{ data: { account_age: current_user.account_age_in_days } }
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 606d4e06d33..9ec4363fa9a 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -13,7 +13,7 @@
     window.gl.mrWidgetData.pipeline_must_succeed_docs_path = '#{help_page_path('user/project/merge_requests/merge_when_pipeline_succeeds.md', anchor: 'require-a-successful-pipeline-for-merge')}';
     window.gl.mrWidgetData.code_coverage_check_help_page_path = '#{help_page_path('ci/testing/code_coverage.md', anchor: 'coverage-check-approval-rule')}';
     window.gl.mrWidgetData.security_configuration_path = '#{project_security_configuration_path(@project)}';
-    window.gl.mrWidgetData.license_compliance_docs_path = '#{help_page_path('user/compliance/license_compliance/index.md')}';
+    window.gl.mrWidgetData.license_compliance_docs_path = '#{help_page_path('user/compliance/license_scanning_of_cyclonedx_files')}';
     window.gl.mrWidgetData.eligible_approvers_docs_path = '#{help_page_path('user/project/merge_requests/approvals/rules.md', anchor: 'eligible-approvers')}';
     window.gl.mrWidgetData.approvals_help_path = '#{help_page_path("user/project/merge_requests/approvals/index.md")}';
     window.gl.mrWidgetData.pipelines_empty_svg_path = '#{image_path('illustrations/empty-state/empty-pipeline-md.svg')}';
diff --git a/app/views/projects/merge_requests/conflicts/show.html.haml b/app/views/projects/merge_requests/conflicts/show.html.haml
index 3facca4d4f7..f8d0e2d2a15 100644
--- a/app/views/projects/merge_requests/conflicts/show.html.haml
+++ b/app/views/projects/merge_requests/conflicts/show.html.haml
@@ -3,6 +3,7 @@
 - breadcrumb_title _("Merge conflicts")
 - page_title _("Merge Conflicts"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge requests")
 - add_page_specific_style 'page_bundles/merge_conflicts'
+- add_page_specific_style 'page_bundles/merge_request'
 
 = render "projects/merge_requests/mr_title", hide_gutter_toggle: true
 
diff --git a/app/views/projects/merge_requests/creations/new.html.haml b/app/views/projects/merge_requests/creations/new.html.haml
index 6a8894384df..f2c2700b012 100644
--- a/app/views/projects/merge_requests/creations/new.html.haml
+++ b/app/views/projects/merge_requests/creations/new.html.haml
@@ -3,8 +3,15 @@
 - page_title _("New merge request")
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/ci_status'
+- add_page_specific_style 'page_bundles/merge_request'
 
-- if @merge_request.can_be_created && !params[:change_branches]
+- conflicting_mr = @merge_request.existing_mrs_targeting_same_branch.first
+
+- if @merge_request.can_be_created && !params[:change_branches] && !conflicting_mr
   = render 'new_submit'
 - else
+  - if conflicting_mr
+    - link_to_mr = link_to(conflicting_mr.to_reference, project_merge_request_path(@project, conflicting_mr))
+    - flash.now[:alert] = safe_format(s_("These branches already have an open merge request: %{link_to_mr}. Select a different source or target branch."), link_to_mr: link_to_mr)
+
   = render 'new_compare'
diff --git a/app/views/projects/merge_requests/diffs.html.haml b/app/views/projects/merge_requests/diffs.html.haml
index 1ef212ee5ce..03306e98407 100644
--- a/app/views/projects/merge_requests/diffs.html.haml
+++ b/app/views/projects/merge_requests/diffs.html.haml
@@ -1 +1,3 @@
+- add_page_specific_style 'page_bundles/merge_request'
+
 = render 'page'
diff --git a/app/views/projects/merge_requests/edit.html.haml b/app/views/projects/merge_requests/edit.html.haml
index 77cc69f32ab..3aca4783241 100644
--- a/app/views/projects/merge_requests/edit.html.haml
+++ b/app/views/projects/merge_requests/edit.html.haml
@@ -1,3 +1,4 @@
+- add_page_specific_style 'page_bundles/merge_request'
 - add_to_breadcrumbs _("Merge requests"), project_merge_requests_path(@project)
 - breadcrumb_title @merge_request.to_reference
 - page_title _("Edit"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge requests")
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 79da09c5205..e2d3e082289 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -6,6 +6,7 @@
 - page_title _("Merge requests")
 - new_merge_request_email = @project.new_issuable_address(current_user, 'merge_request')
 - add_page_specific_style 'page_bundles/issuable_list'
+- add_page_specific_style 'page_bundles/merge_request'
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} merge requests")
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 1ef212ee5ce..03306e98407 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -1 +1,3 @@
+- add_page_specific_style 'page_bundles/merge_request'
+
 = render 'page'
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index 110bc8d82f8..a1c89a9dd30 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -8,32 +8,49 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Mirroring repositories')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set up your project to automatically push and/or pull changes to/from another repository. Branches, tags, and commits will be synced automatically.')
       = link_to _('How do I mirror repositories?'), help_page_path('user/project/repository/mirror/index.md'), target: '_blank', rel: 'noopener noreferrer'
 
-  .settings-content
-    - if mirror_settings_enabled
-      = gitlab_ui_form_for @project, url: project_mirror_path(@project), html: { class: 'gl-show-field-errors js-mirror-form', autocomplete: 'new-password', data: mirrors_form_data_attributes } do |f|
-        .panel.panel-default
-          .panel-body
-            %div= form_errors(@project)
-
-            .form-group.has-feedback
-              = label_tag :url, _('Git repository URL'), class: 'label-light'
-              = text_field_tag :url, nil, class: 'form-control gl-form-input js-mirror-url js-repo-url', placeholder: _('Input the remote repository URL'), required: true, pattern: "(#{protocols}):\/\/.+", autocomplete: 'new-password', data: { qa_selector: 'mirror_repository_url_field' }
-
-            = render 'projects/mirrors/instructions'
-
-            = render 'projects/mirrors/mirror_repos_form', f: f
 
-            = render 'projects/mirrors/branch_filter'
-
-          .panel-footer
-            = f.submit _('Mirror repository'), class: 'js-mirror-submit', name: :update_remote_mirror, pajamas_button: true, data: { qa_selector: 'mirror_repository_button' }
-    - else
-      = render Pajamas::AlertComponent.new(dismissible: false) do |c|
-        - c.with_body do
-          = _('Mirror settings are only available to GitLab administrators.')
-
-    = render 'projects/mirrors/mirror_repos_list'
+  .settings-content
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h5.gl-new-card-title
+            = _('Mirrored repositories')
+          .gl-new-card-count
+            = sprite_icon('earth', css_class: 'gl-mr-2')
+            %span.js-mirrored-repo-count
+              = mirrored_repositories_count
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content", data: { testid: 'add-new-mirror' } }) do
+            = _('Add new')
+      - c.with_body do
+        - if mirror_settings_enabled
+          .gl-new-card-add-form.gl-m-3.gl-mb-4.gl-display-none.js-toggle-content
+            %h4.gl-mt-0
+              = s_('Profiles|Add new mirror repository')
+            = gitlab_ui_form_for @project, url: project_mirror_path(@project), html: { class: 'gl-show-field-errors js-mirror-form', autocomplete: 'new-password', data: mirrors_form_data_attributes } do |f|
+              %div= form_errors(@project)
+              .form-group.has-feedback
+                = label_tag :url, _('Git repository URL'), class: 'label-light'
+                = text_field_tag :url, nil, class: 'form-control gl-form-input js-mirror-url js-repo-url', placeholder: _('Input the remote repository URL'), required: true, pattern: "(#{protocols}):\/\/.+", autocomplete: 'new-password', data: { qa_selector: 'mirror_repository_url_field' }
+
+              = render 'projects/mirrors/instructions'
+
+              = render 'projects/mirrors/mirror_repos_form', f: f
+
+              = render 'projects/mirrors/branch_filter'
+
+              = f.submit _('Mirror repository'), class: 'js-mirror-submit', name: :update_remote_mirror, pajamas_button: true, data: { qa_selector: 'mirror_repository_button' }
+
+              = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+                = _('Cancel')
+
+        - else
+          = render Pajamas::AlertComponent.new(dismissible: false) do |c|
+            - c.with_body do
+              = _('Mirror settings are only available to GitLab administrators.')
+
+        = render 'projects/mirrors/mirror_repos_list'
diff --git a/app/views/projects/mirrors/_mirror_repos_list.html.haml b/app/views/projects/mirrors/_mirror_repos_list.html.haml
index 185d86245c5..0debd13709d 100644
--- a/app/views/projects/mirrors/_mirror_repos_list.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos_list.html.haml
@@ -1,49 +1,41 @@
 - mirror_settings_enabled = can?(current_user, :admin_remote_mirror, @project)
 
-.panel.panel-default
-  .table-responsive
-    - if !@project.mirror? && @project.remote_mirrors.count == 0
-      = render Pajamas::CardComponent.new(card_options: { class: 'gl-mt-5' }) do |c|
-        - c.with_header do
-          %strong
-            = _('Mirrored repositories') + ' (0)'
-        - c.with_body do
-          = _('There are currently no mirrored repositories.')
-    - else
-      %table.table.gl-table.gl-mt-5
-        %thead
-          %tr
-            %th
-              = _('Mirrored repositories')
-              = render_if_exists 'projects/mirrors/mirrored_repositories_count'
-            %th= _('Direction')
-            %th= _('Last update attempt')
-            %th= _('Last successful update')
-            %th
-            %th
-        %tbody.js-mirrors-table-body
-          = render_if_exists 'projects/mirrors/table_pull_row'
-          - @project.remote_mirrors.each_with_index do |mirror, index|
-            - next if mirror.new_record?
-            %tr.rspec-mirrored-repository-row{ class: ('bg-secondary' if mirror.disabled?), data: { qa_selector: 'mirrored_repository_row_container' } }
-              %td{ data: { qa_selector: 'mirror_repository_url_content' } }
-                = mirror.safe_url || _('Invalid URL')
-                = render_if_exists 'projects/mirrors/mirror_branches_setting_badge', record: mirror
-              %td= _('Push')
-              %td
-                = mirror.last_update_started_at.present? ? time_ago_with_tooltip(mirror.last_update_started_at) : _('Never')
-              %td{ data: { qa_selector: 'mirror_last_update_at_content' } }= mirror.last_update_at.present? ? time_ago_with_tooltip(mirror.last_update_at) : _('Never')
-              %td
-                - if mirror.disabled?
-                  = render 'projects/mirrors/disabled_mirror_badge'
-                - if mirror.last_error.present?
-                  = gl_badge_tag _('Error'), { variant: :danger }, { data: { toggle: 'tooltip', html: 'true', qa_selector: 'mirror_error_badge_content' }, title: html_escape(mirror.last_error.try(:strip)) }
-              %td.gl-display-flex
-                - if mirror_settings_enabled
-                  .btn-group.mirror-actions-group{ role: 'group' }
-                    - if mirror.ssh_key_auth?
-                      = clipboard_button(text: mirror.ssh_public_key, class: 'gl-button btn btn-default btn-icon', title: _('Copy SSH public key'), qa_selector: 'copy_public_key_button')
-                    = render 'shared/remote_mirror_update_button', remote_mirror: mirror
-                    = render Pajamas::ButtonComponent.new(variant: :danger,
-                      icon: 'remove',
-                      button_options: { class: 'js-delete-mirror rspec-delete-mirror', title: _('Remove'), data: { mirror_id: mirror.id, toggle: 'tooltip', container: 'body' } })
+.table-responsive.gl-mb-0
+  - if !@project.mirror? && @project.remote_mirrors.count == 0
+    .gl-new-card-empty.gl-px-5.gl-py-4= _('There are currently no mirrored repositories.')
+  - else
+    %table.table.b-table.gl-table.b-table-stacked-md
+      %thead.d-none.d-md-table-header-group
+        %tr
+          %th= _('Repository')
+          %th= _('Direction')
+          %th= _('Last update attempt')
+          %th= _('Last successful update')
+          %th
+          %th
+      %tbody.js-mirrors-table-body
+        = render_if_exists 'projects/mirrors/table_pull_row'
+        - @project.remote_mirrors.each_with_index do |mirror, index|
+          - next if mirror.new_record?
+          %tr.rspec-mirrored-repository-row{ class: ('bg-secondary' if mirror.disabled?), data: { qa_selector: 'mirrored_repository_row_container' } }
+            %td{ data: { qa_selector: 'mirror_repository_url_content' } }
+              = mirror.safe_url || _('Invalid URL')
+              = render_if_exists 'projects/mirrors/mirror_branches_setting_badge', record: mirror
+            %td= _('Push')
+            %td
+              = mirror.last_update_started_at.present? ? time_ago_with_tooltip(mirror.last_update_started_at) : _('Never')
+            %td{ data: { qa_selector: 'mirror_last_update_at_content' } }= mirror.last_update_at.present? ? time_ago_with_tooltip(mirror.last_update_at) : _('Never')
+            %td
+              - if mirror.disabled?
+                = render 'projects/mirrors/disabled_mirror_badge'
+              - if mirror.last_error.present?
+                = gl_badge_tag _('Error'), { variant: :danger }, { data: { toggle: 'tooltip', html: 'true', qa_selector: 'mirror_error_badge_content' }, title: html_escape(mirror.last_error.try(:strip)) }
+            %td
+              - if mirror_settings_enabled
+                .btn-group.mirror-actions-group{ role: 'group' }
+                  - if mirror.ssh_key_auth?
+                    = clipboard_button(text: mirror.ssh_public_key, class: 'gl-button btn btn-default btn-icon', title: _('Copy SSH public key'), qa_selector: 'copy_public_key_button')
+                  = render 'shared/remote_mirror_update_button', remote_mirror: mirror
+                  = render Pajamas::ButtonComponent.new(variant: :danger,
+                    icon: 'remove',
+                    button_options: { class: 'js-delete-mirror rspec-delete-mirror', title: _('Remove'), data: { mirror_id: mirror.id, toggle: 'tooltip', container: 'body' } })
diff --git a/app/views/projects/ml/models/index.html.haml b/app/views/projects/ml/models/index.html.haml
index 2caba2ae9be..a1c6376e9b4 100644
--- a/app/views/projects/ml/models/index.html.haml
+++ b/app/views/projects/ml/models/index.html.haml
@@ -1,5 +1,4 @@
 - 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 } }
+= render(Projects::Ml::ModelsIndexComponent.new(models: @models))
diff --git a/app/views/projects/notes/_more_actions_dropdown.html.haml b/app/views/projects/notes/_more_actions_dropdown.html.haml
index 8c94a18e1b0..e3cc9199352 100644
--- a/app/views/projects/notes/_more_actions_dropdown.html.haml
+++ b/app/views/projects/notes/_more_actions_dropdown.html.haml
@@ -2,8 +2,7 @@
 
 - if note_editable || !is_current_user
   %div{ class: "dropdown more-actions note-actions-item gl-ml-0!" }
-    = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn gl-button btn-default-tertiary btn-icon', data: { toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' } do
-      = sprite_icon('ellipsis_v', css_class: 'gl-button-icon gl-icon')
+    = render Pajamas::ButtonComponent.new(icon: 'ellipsis_v', category: :tertiary, button_options: { class: 'note-action-button more-actions-toggle has-tooltip', data: { title: 'More actions', toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' }})
     %ul.dropdown-menu.more-actions-dropdown.dropdown-open-left
       %li
         = clipboard_button(text: noteable_note_url(note), title: _('Copy reference'), button_text: _('Copy link'), class: 'btn-clipboard', hide_tooltip: true, hide_button_icon: true)
diff --git a/app/views/projects/packages/infrastructure_registry/show.html.haml b/app/views/projects/packages/infrastructure_registry/show.html.haml
index 8624fdacda7..8410ac0091d 100644
--- a/app/views/projects/packages/infrastructure_registry/show.html.haml
+++ b/app/views/projects/packages/infrastructure_registry/show.html.haml
@@ -7,7 +7,7 @@
   .col-12
     #js-vue-packages-detail{ data: { package: package_from_presenter(@package),
       can_delete: can?(current_user, :destroy_package, @project).to_s,
-      svg_path: image_path('illustrations/no-packages.svg'),
+      svg_path: image_path('illustrations/empty-state/empty-package-md.svg'),
       project_name: @project.name,
       project_path: @project.root_ancestor.full_path,
       gitlab_host: Gitlab.config.gitlab.host,
diff --git a/app/views/projects/packages/packages/index.html.haml b/app/views/projects/packages/packages/index.html.haml
index 5397828d48e..9fb265b08c2 100644
--- a/app/views/projects/packages/packages/index.html.haml
+++ b/app/views/projects/packages/packages/index.html.haml
@@ -6,7 +6,7 @@
       full_path: @project.full_path,
       endpoint: project_packages_path(@project),
       page_type: 'projects',
-      empty_list_illustration: image_path('illustrations/no-packages.svg'),
+      empty_list_illustration: image_path('illustrations/empty-state/empty-package-md.svg'),
       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) : '',
diff --git a/app/views/projects/pages/_pages_settings.html.haml b/app/views/projects/pages/_pages_settings.html.haml
index 4c8ec21db39..b1ec7a362b7 100644
--- a/app/views/projects/pages/_pages_settings.html.haml
+++ b/app/views/projects/pages/_pages_settings.html.haml
@@ -1,7 +1,6 @@
-- can_edit_max_page_size=can?(current_user, :update_max_pages_size)
-- can_enforce_https_only=Gitlab.config.pages.external_http || Gitlab.config.pages.external_https
+- can_edit_max_page_size = can?(current_user, :update_max_pages_size)
+- can_enforce_https_only = Gitlab.config.pages.external_http || Gitlab.config.pages.external_https
 
-- return unless can_edit_max_page_size || can_enforce_https_only
 = gitlab_ui_form_for @project, url: project_pages_path(@project), html: { class: 'inline', title: pages_https_only_title } do |f|
   - if can_edit_max_page_size
     = render_if_exists 'shared/pages/max_pages_size_input', form: f
@@ -17,14 +16,13 @@
       %p.gl-pl-6
         = s_("GitLabPages|When enabled, all attempts to visit your website through HTTP are automatically redirected to HTTPS using a response with status code 301. Requires a valid certificate for all domains. %{docs_link_start}Learn more.%{link_end}").html_safe % { docs_link_start: docs_link_start, link_end: link_end }
 
-  - if Feature.enabled?(:pages_unique_domain, @project)
-    .form-group
-      = f.fields_for :project_setting do |settings|
-        = settings.gitlab_ui_checkbox_component :pages_unique_domain_enabled,
-          s_('GitLabPages|Use unique domain'),
-          label_options: { class: 'label-bold' }
-        %p.gl-pl-6
-          = s_("GitLabPages|When enabled, a unique domain is generated to access pages.").html_safe
+  .form-group
+    = f.fields_for :project_setting do |settings|
+      = settings.gitlab_ui_checkbox_component :pages_unique_domain_enabled,
+        s_('GitLabPages|Use unique domain'),
+        label_options: { class: 'label-bold' }
+      %p.gl-pl-6
+        = s_("GitLabPages|When enabled, a unique domain is generated to access pages.").html_safe
 
   .gl-mt-3
     = f.submit s_('GitLabPages|Save changes'), pajamas_button: true
diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml
index 88a60b1fb06..5051fc6a5f5 100644
--- a/app/views/projects/pipeline_schedules/index.html.haml
+++ b/app/views/projects/pipeline_schedules/index.html.haml
@@ -2,6 +2,7 @@
 - page_title _("Pipeline Schedules")
 - add_page_specific_style 'page_bundles/pipeline_schedules'
 - add_page_specific_style 'page_bundles/ci_status'
+- add_page_specific_style 'page_bundles/merge_request'
 
 #pipeline-schedules-callout{ data: { docs_url: help_page_path('ci/pipelines/schedules'), illustration_url: image_path('illustrations/pipeline_schedule_callout.svg') } }
 
diff --git a/app/views/projects/pipelines/charts.html.haml b/app/views/projects/pipelines/charts.html.haml
index e16a2235e53..c3d6d0c5971 100644
--- a/app/views/projects/pipelines/charts.html.haml
+++ b/app/views/projects/pipelines/charts.html.haml
@@ -1,6 +1,7 @@
 - page_title _('CI/CD Analytics')
 
 #js-project-pipelines-charts-app{ data: { project_path: @project.full_path,
+  project_id: @project.id,
   should_render_dora_charts: should_render_dora_charts.to_s,
   should_render_quality_summary: should_render_quality_summary.to_s,
   failed_pipelines_link: project_pipelines_path(@project, page: '1', scope: 'all', status: 'failed'),
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index bdf09e5356f..435edde319b 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -6,6 +6,7 @@
 - add_page_specific_style 'page_bundles/pipeline'
 - add_page_specific_style 'page_bundles/reports'
 - add_page_specific_style 'page_bundles/ci_status'
+- add_page_specific_style 'page_bundles/merge_request'
 - 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}" } }
diff --git a/app/views/projects/project_templates/_template.html.haml b/app/views/projects/project_templates/_template.html.haml
index 93c53fc99fc..a0677ee2385 100644
--- a/app/views/projects/project_templates/_template.html.haml
+++ b/app/views/projects/project_templates/_template.html.haml
@@ -1,4 +1,4 @@
-.template-option.d-flex.align-items-center{ data: { qa_selector: 'template_option_container' } }
+.template-option.d-flex.align-items-center{ data: { testid: 'template-option-container' } }
   .logo.gl-mr-3.px-1
     = image_tag template.logo, size: 32, class: "btn-template-icon icon-#{template.name}"
   .description
@@ -13,5 +13,5 @@
     %label.btn.gl-button.btn-confirm.template-button.choose-template.gl-mb-0{ for: template.name,
       'data-testid': "use_template_#{template.name}" }
       %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name, data: { track_label: "template_use", track_property: template.name, track_action: "click_button", track_value: "" } }
-      %span{ data: { qa_selector: 'use_template_button' } }
+      %span{ data: { testid: 'use-template-button' } }
         = _("Use template")
diff --git a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
index d67c3dc19d7..8dcc59a09d0 100644
--- a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
@@ -1,23 +1,20 @@
 = gitlab_ui_form_for [@project, @protected_tag], html: { class: 'new-protected-tag js-new-protected-tag' } do |f|
   %input{ type: 'hidden', name: 'update_section', value: 'js-protected-tags-settings' }
-  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }) do |c|
-    - c.with_header do
-      = _('Protect a tag')
-    - c.with_body do
-      = form_errors(@protected_tag)
-      .form-group.row
-        = f.label :name, _('Tag:'), class: 'col-md-2 text-left text-md-right'
-        .col-md-10.protected-tags-dropdown
-          = render partial: "projects/protected_tags/shared/dropdown", locals: { f: f }
-          .form-text.text-muted
-            - wildcards_url = help_page_path('user/project/protected_tags', anchor: 'wildcard-protected-tags')
-            - wildcards_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wildcards_url }
-            = html_escape(_("%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}v*%{code_tag_end} or %{code_tag_start}*-release%{code_tag_end} are supported.")) % { wildcards_link_start: wildcards_link_start, wildcards_link_end: '</a>'.html_safe, code_tag_start: '<code>'.html_safe, code_tag_end: '</code>'.html_safe }
-      .form-group.row
-        = f.label :create_access_levels_attributes, _('Allowed to create:'), class: 'col-md-2 text-left text-md-right'
-        .col-md-10
-          .create_access_levels-container
-            = yield :create_access_levels
+  = form_errors(@protected_tag)
+  .form-group
+    = f.label :name, _('Tag')
+    .protected-tags-dropdown
+      = render partial: "projects/protected_tags/shared/dropdown", locals: { f: f }
+      .form-text.text-muted
+        - wildcards_url = help_page_path('user/project/protected_tags', anchor: 'wildcard-protected-tags')
+        - wildcards_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wildcards_url }
+        = html_escape(_("%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}v*%{code_tag_end} or %{code_tag_start}*-release%{code_tag_end} are supported.")) % { wildcards_link_start: wildcards_link_start, wildcards_link_end: '</a>'.html_safe, code_tag_start: '<code>'.html_safe, code_tag_end: '</code>'.html_safe }
+  .form-group
+    = f.label :create_access_levels_attributes, _('Allowed to create')
+    .create_access_levels-container
+      = yield :create_access_levels
+
+  = f.submit _('Protect'), pajamas_button: true, disabled: true, data: { qa_selector: 'protect_tag_button' }
+  = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+    = _('Cancel')
 
-    - c.with_footer do
-      = f.submit _('Protect'), pajamas_button: true, disabled: true, data: { qa_selector: 'protect_tag_button' }
diff --git a/app/views/projects/protected_tags/shared/_dropdown.html.haml b/app/views/projects/protected_tags/shared/_dropdown.html.haml
index 9d5d649bc40..758df7b3c1e 100644
--- a/app/views/projects/protected_tags/shared/_dropdown.html.haml
+++ b/app/views/projects/protected_tags/shared/_dropdown.html.haml
@@ -1,7 +1,7 @@
 = f.hidden_field(:name)
 
 = dropdown_tag(s_('ProtectedBranch|Select tag or create wildcard'),
-               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide monospace',
+               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide monospace gl-w-auto!',
                           filter: true, dropdown_class: "dropdown-menu-selectable capitalize-header git-revision-dropdown", placeholder: s_("ProtectedBranch|Search protected tags"),
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/shared/_index.html.haml
index a016ccf8656..f71ecc3a7c5 100644
--- a/app/views/projects/protected_tags/shared/_index.html.haml
+++ b/app/views/projects/protected_tags/shared/_index.html.haml
@@ -6,15 +6,30 @@
       = s_("ProtectedTag|Protected tags")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_("ProtectedTag|Limit access to creating and updating tags.")
       = link_to s_("ProtectedTag|What are protected tags?"), help_page_path("user/project/protected_tags")
   .settings-content
-    %p
+    %p.gl-text-secondary
       = s_("ProtectedTag|By default, protected tags restrict who can modify the tag.")
       = link_to s_("ProtectedTag|Learn more."), help_page_path("user/project/protected_tags", anchor: "who-can-modify-a-protected-tag")
 
-    - if can? current_user, :admin_project, @project
-      = yield :create_protected_tag
-
-    = yield :tag_list
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = _('Protected tags')
+          .gl-new-card-count
+            = sprite_icon('tag', css_class: 'gl-mr-2')
+            = @protected_tags_count
+        - if can? current_user, :admin_project, @project
+          .gl-new-card-actions
+            = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content" }) do
+              = _('Add tag')
+      - c.with_body do
+        - if can? current_user, :admin_project, @project
+          .gl-new-card-add-form.gl-m-3.gl-mb-4.gl-display-none.js-toggle-content
+            %h4.gl-mt-0
+              = _('Protect a tag')
+            = yield :create_protected_tag
+        = yield :tag_list
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 4fe1c8bd3cb..11e8d3a81c2 100644
--- a/app/views/projects/protected_tags/shared/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
@@ -1,10 +1,10 @@
 %tr.js-protected-tag-edit-form{ data: { url: project_protected_tag_path(@project, protected_tag) } }
-  %td
+  %td{ data: { label: s_('ProtectedBranch|Tag') }, class: 'gl-vertical-align-middle!' }
     %span.ref-name= protected_tag.name
 
     - if @project.root_ref?(protected_tag.name)
       = gl_badge_tag s_('ProtectedTags|default'), variant: :info, class: 'gl-ml-2'
-  %td
+  %td{ data: { label: s_('ProtectedBranch|Last commit') }, class: 'gl-vertical-align-middle!' }
     - if protected_tag.wildcard?
       - matching_tags = protected_tag.matching(repository.tag_names)
       = link_to pluralize(matching_tags.count, "matching tag"), project_protected_tag_path(@project, protected_tag)
@@ -18,5 +18,5 @@
   = yield
 
   - if can? current_user, :admin_project, @project
-    %td
-      = 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
+    %td{ data: { label: _('Actions') }, class: 'gl-vertical-align-middle!' }
+      = 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, size: :small
diff --git a/app/views/projects/protected_tags/shared/_tags_list.html.haml b/app/views/projects/protected_tags/shared/_tags_list.html.haml
index 0a85a353e27..66b030a194b 100644
--- a/app/views/projects/protected_tags/shared/_tags_list.html.haml
+++ b/app/views/projects/protected_tags/shared/_tags_list.html.haml
@@ -1,31 +1,27 @@
 .protected-tags-list.js-protected-tags-list
   - if @protected_tags.empty?
-    .card-header
-      = s_('ProtectedBranch|Protected tags (%{tags_count})') % { tags_count: 0 }
-    %p.settings-message.text-center
+    .gl-new-card-empty.gl-px-5.gl-py-4
       = s_('ProtectedBranch|No tags are protected.')
   - else
     - can_admin_project = can?(current_user, :admin_project, @project)
 
-    %table.table.table-bordered
+    %table.table.b-table.gl-table.b-table-stacked-md
       %colgroup
         %col{ width: "25%" }
         %col{ width: "25%" }
         %col{ width: "50%" }
         - if can_admin_project
           %col
-      %thead
+      %thead.d-none.d-md-table-header-group
         %tr
           %th
-            = s_('ProtectedBranch|Protected tags (%{tags_count})') % { tags_count: @protected_tags_count }
+            = s_('ProtectedBranch|Tag')
           %th
             = s_('ProtectedBranch|Last commit')
           %th
             = s_('ProtectedBranch|Allowed to create')
           - if can_admin_project
             %th
-      %tbody
-        %tr
-        = yield
+      %tbody= yield
 
     = paginate @protected_tags, theme: 'gitlab'
diff --git a/app/views/projects/runners/_group_runners.html.haml b/app/views/projects/runners/_group_runners.html.haml
index 32a2e36c779..2d435a7ce9d 100644
--- a/app/views/projects/runners/_group_runners.html.haml
+++ b/app/views/projects/runners/_group_runners.html.haml
@@ -27,7 +27,7 @@
 - elsif @group_runners.empty?
   = _('This group does not have any group runners yet.')
 
-  - if can?(current_user, :admin_group_runners, @project.group)
+  - if can?(current_user, :register_group_runners, @project.group) || can?(current_user, :create_runner, @project.group)
     - group_link_start = "<a href='#{group_runners_path(@project.group)}'>".html_safe
     - group_link_end = '</a>'.html_safe
     = s_("Runners|To register them, go to the %{link_start}group's Runners page%{link_end}.").html_safe % { link_start: group_link_start, link_end: group_link_end }
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index 05685c26ac5..e7da3177cde 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -1,18 +1,22 @@
 - return unless can?(current_user, :archive_project, @project)
 
-.sub-section
-  %h4.warning-title
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { qa_selector: 'export_project_content' } }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.warning-title
+        - if @project.archived?
+          = _('Unarchive project')
+        - else
+          = _('Archive project')
+
+  - c.with_body do
     - if @project.archived?
-      = _('Unarchive project')
+      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'unarchive-a-project') }
+      %p= _("Unarchiving the project restores its members' ability to make commits, and create issues, comments, and other entities. %{strong_start}After you unarchive the project, it displays in the search and on the dashboard.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
+      = render Pajamas::ButtonComponent.new(method: :post, href: unarchive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Unarchive project') }, data: { confirm: _("Are you sure that you want to unarchive this project?"), qa_selector: 'unarchive_project_link' } }) do
+        =  _('Unarchive project')
     - else
-      = _('Archive project')
-  - if @project.archived?
-    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'unarchive-a-project') }
-    %p= _("Unarchiving the project restores its members' ability to make commits, and create issues, comments, and other entities. %{strong_start}After you unarchive the project, it displays in the search and on the dashboard.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
-    = render Pajamas::ButtonComponent.new(method: :post, href: unarchive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Unarchive project') }, data: { confirm: _("Are you sure that you want to unarchive this project?"), qa_selector: 'unarchive_project_link' } }) do
-      =  _('Unarchive project')
-  - else
-    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'archive-a-project') }
-    %p= _("Archiving the project makes it entirely read-only. It is hidden from the dashboard and doesn't display in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
-    = render Pajamas::ButtonComponent.new(method: :post, href: archive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Archive project') }, data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link', 'confirm-btn-variant': 'confirm' } }) do
-      =  _('Archive project')
+      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'archive-a-project') }
+      %p= _("Archiving the project makes it entirely read-only. It is hidden from the dashboard and doesn't display in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
+      = render Pajamas::ButtonComponent.new(method: :post, href: archive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Archive project') }, data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link', 'confirm-btn-variant': 'confirm' } }) do
+        =  _('Archive project')
diff --git a/app/views/projects/settings/access_tokens/index.html.haml b/app/views/projects/settings/access_tokens/index.html.haml
index e4af6d59cad..b81c3bc9704 100644
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
@@ -4,9 +4,11 @@
 - type_plural = _('project access tokens')
 - @force_desktop_expanded_sidebar = true
 
-.gl-mt-5.js-search-settings-section
-  %h4.gl-my-0
-    = page_title
+.settings-section.js-search-settings-section
+  .settings-sticky-header
+    .settings-sticky-header-inner
+      %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)
@@ -23,9 +25,21 @@
 
   #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
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-border-b-0 gl-rounded-bottom-left-none gl-rounded-bottom-right-none js-toggle-container js-token-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        %h3.gl-new-card-title
+          = _('Active project access tokens')
+        .gl-new-card-count
+          = sprite_icon('token', css_class: 'gl-mr-2')
+          %span.js-token-count= @active_access_tokens.size
+      - if current_user.can?(:create_resource_access_tokens, @project)
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content', data: { testid: 'add-new-token-button' } }) do
+            = _('Add new token')
+    - c.with_body do
+      - if current_user.can?(:create_resource_access_tokens, @project)
+        .gl-new-card-add-form.gl-mt-3.gl-display-none.js-toggle-content.js-add-new-token-form
+          = 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 6eccbd245af..d51acc5e708 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -1,6 +1,7 @@
 - help_link_public_pipelines = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'change-which-users-can-view-your-pipelines'), target: '_blank', rel: 'noopener noreferrer'
 - help_link_auto_canceling = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'auto-cancel-redundant-pipelines'), target: '_blank', rel: 'noopener noreferrer'
-- help_link_skip_outdated = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'prevent-outdated-deployment-jobs'), target: '_blank', rel: 'noopener noreferrer'
+- help_link_prevent_outdated = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'prevent-outdated-deployment-jobs'), target: '_blank', rel: 'noopener noreferrer'
+- help_link_prevent_outdated_allow_rollback = link_to sprite_icon('question-o'), help_page_path('ci/environments/deployment_safety', anchor: 'job-retries-for-rollback-deployments'), target: '_blank', rel: 'noopener noreferrer'
 - help_link_separated_caches = link_to sprite_icon('question-o'), help_page_path('ci/caching/index', anchor: 'cache-key-names'), target: '_blank', rel: 'noopener noreferrer'
 
 .row.gl-mt-3
@@ -23,7 +24,12 @@
         .form-group
           = f.fields_for :ci_cd_settings_attributes, @project.ci_cd_settings do |form|
             = form.gitlab_ui_checkbox_component :forward_deployment_enabled, _("Prevent outdated deployment jobs"),
-              help_text: (_('When a deployment job is successful, prevent older deployment jobs that are still pending.') + ' ' + help_link_skip_outdated).html_safe
+              help_text: (_('When a deployment job is successful, prevent older deployment jobs that are still pending.') + ' ' + help_link_prevent_outdated).html_safe
+          .gl-pl-6
+            = f.fields_for :ci_cd_settings_attributes, @project.ci_cd_settings do |form|
+              = form.gitlab_ui_checkbox_component :forward_deployment_rollback_allowed, _("Allow job retries for rollback deployments"),
+                help_text: (_('Allow job retries even if the deployment job is outdated.') + ' ' + help_link_prevent_outdated_allow_rollback).html_safe,
+                checkbox_options: { class: 'gl-pl-6' }
 
         .form-group
           = f.gitlab_ui_checkbox_component :ci_separated_caches,
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index 007169809c9..6de39058455 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -11,7 +11,7 @@
       = _("General pipelines")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _("Customize your pipeline configuration.")
   .settings-content
     = render 'form'
@@ -22,7 +22,7 @@
       = s_('CICD|Auto DevOps')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       - auto_devops_url = help_page_path('topics/autodevops/index')
       - quickstart_url = help_page_path('topics/autodevops/cloud_deployments/auto_devops_with_gke')
       - auto_devops_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: auto_devops_url }
@@ -40,7 +40,7 @@
       = _("Runners")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expand_runners ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _("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'
   .settings-content
@@ -56,7 +56,7 @@
         = _("Artifacts")
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary
         = _("A job artifact is an archive of files and directories saved by a job when it finishes.")
     .settings-content
       #js-artifacts-settings-app{ data: { full_path: @project.full_path, help_page_path: help_page_path('ci/jobs/job_artifacts', anchor: 'keep-artifacts-from-most-recent-successful-jobs') } }
@@ -70,10 +70,10 @@
 %section.settings.no-animate#js-pipeline-triggers{ class: ('expanded' if expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _("Pipeline triggers")
+      = _("Pipeline trigger tokens")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _("Trigger a pipeline for a branch or tag by generating a trigger token and using it with an API call. The token impersonates a user's project access and permissions.")
       = link_to _('Learn more.'), help_page_path('ci/triggers/index'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
@@ -88,7 +88,7 @@
         = _("Deploy freezes")
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary
         - freeze_period_docs = help_page_path('user/project/releases/index', anchor: 'prevent-unintentional-releases-by-setting-a-deploy-freeze')
         - freeze_period_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: freeze_period_docs }
         = html_escape(s_('DeployFreeze|Add a freeze period to prevent unintended releases during a period of time for a given environment. You must update the deployment jobs in %{filename} according to the deploy freezes added here. %{freeze_period_link_start}Learn more.%{freeze_period_link_end}')) % { freeze_period_link_start: freeze_period_link_start, freeze_period_link_end: '</a>'.html_safe, filename: tag.code('.gitlab-ci.yml') }
@@ -106,7 +106,7 @@
       = _("Token Access")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _("Control how the CI_JOB_TOKEN CI/CD variable is used for API access between projects.")
   .settings-content
     = render 'ci/token_access/index'
@@ -118,7 +118,7 @@
         = _("Secure Files")
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary
         = _("Use Secure Files to store files used by your pipelines such as Android keystores, or Apple provisioning profiles and signing certificates.")
         = link_to _('Learn more'), help_page_path('ci/secure_files/index'), target: '_blank', rel: 'noopener noreferrer'
     .settings-content
diff --git a/app/views/projects/settings/integrations/_form.html.haml b/app/views/projects/settings/integrations/_form.html.haml
index 39dfd410727..97c7729de44 100644
--- a/app/views/projects/settings/integrations/_form.html.haml
+++ b/app/views/projects/settings/integrations/_form.html.haml
@@ -14,10 +14,10 @@
 - if integration.to_param === 'slack'
   = render 'shared/integrations/slack_notifications_deprecation_alert'
 
-%h2.gl-mb-4
+%h2.gl-mb-0.gl-display-flex.gl-align-items-center.gl-gap-3
   = integration.title
   - if integration.operating?
-    = sprite_icon('check', css_class: 'gl-text-green-500')
+    = render Pajamas::BadgeComponent.new(s_('FeatureFlags|Active'), variant: 'success')
 
 = render 'shared/integration_settings', integration: integration
 - if lookup_context.template_exists?('show', "shared/integrations/#{integration.to_param}", true)
diff --git a/app/views/projects/settings/integrations/index.html.haml b/app/views/projects/settings/integrations/index.html.haml
index 59cdda5bb92..6c0c99543cc 100644
--- a/app/views/projects/settings/integrations/index.html.haml
+++ b/app/views/projects/settings/integrations/index.html.haml
@@ -8,5 +8,5 @@
   %h3= _('Integrations')
   - integrations_link_start = '<a href="%{url}">'.html_safe % { url: help_page_url('user/project/integrations/index') }
   - webhooks_link_start = '<a href="%{url}">'.html_safe % { url: project_hooks_path(@project) }
-  %p= _("%{integrations_link_start}Integrations%{link_end} enable you to make third-party applications part of your GitLab workflow. If the available integrations don't meet your needs, consider using a %{webhooks_link_start}webhook%{link_end}.").html_safe % { integrations_link_start: integrations_link_start, webhooks_link_start: webhooks_link_start, link_end: '</a>'.html_safe }
+  %p.gl-text-secondary= _("%{integrations_link_start}Integrations%{link_end} enable you to make third-party applications part of your GitLab workflow. If the available integrations don't meet your needs, consider using a %{webhooks_link_start}webhook%{link_end}.").html_safe % { integrations_link_start: integrations_link_start, webhooks_link_start: webhooks_link_start, link_end: '</a>'.html_safe }
   = render 'shared/integrations/index', integrations: @integrations
diff --git a/app/views/projects/settings/operations/_alert_management.html.haml b/app/views/projects/settings/operations/_alert_management.html.haml
index 7433e81c11c..398c7758d66 100644
--- a/app/views/projects/settings/operations/_alert_management.html.haml
+++ b/app/views/projects/settings/operations/_alert_management.html.haml
@@ -9,7 +9,7 @@
       = _('Alerts')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Display alerts from all configured monitoring tools.')
       = link_to _('Learn more.'), help_page_path('operations/incident_management/integrations.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/app/views/projects/settings/operations/_error_tracking.html.haml b/app/views/projects/settings/operations/_error_tracking.html.haml
index 5d89790ef9f..1cfdd7086d9 100644
--- a/app/views/projects/settings/operations/_error_tracking.html.haml
+++ b/app/views/projects/settings/operations/_error_tracking.html.haml
@@ -8,7 +8,7 @@
       = _('Error tracking')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Link Sentry to GitLab to discover and view the errors your application generates.')
       = link_to _('Learn more.'), help_page_path('operations/error_tracking'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/app/views/projects/tracing/show.html.haml b/app/views/projects/tracing/show.html.haml
new file mode 100644
index 00000000000..4ba316a0b5c
--- /dev/null
+++ b/app/views/projects/tracing/show.html.haml
@@ -0,0 +1,5 @@
+- page_title _('Trace Details')
+- add_to_breadcrumbs _('Tracing'), project_tracing_index_path(@project)
+
+#js-tracing-details{ data: { view_model: observability_tracing_details_model(@project, @trace_id) } }
+
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index c834a0bc818..a4ed19c2fc9 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,5 +1,3 @@
-- is_project_overview = local_assigns.fetch(:is_project_overview, false)
-
 .tree-ref-container.gl-display-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
   .tree-ref-holder.gl-max-w-26{ data: { qa_selector: 'ref_dropdown_container' } }
     #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
@@ -10,7 +8,7 @@
 .tree-controls
   .d-block.d-sm-flex.flex-wrap.align-items-start.gl-children-ml-sm-3.gl-first-child-ml-sm-0<
     = render_if_exists 'projects/tree/lock_link'
-    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref), is_project_overview: is_project_overview.to_s } }
+    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
 
     = render 'projects/find_file_link'
     = render 'shared/web_ide_button', blob: nil
diff --git a/app/views/projects/tree/show.html.haml b/app/views/projects/tree/show.html.haml
index fbbf1c04613..3c3f9eb7390 100644
--- a/app/views/projects/tree/show.html.haml
+++ b/app/views/projects/tree/show.html.haml
@@ -1,8 +1,9 @@
+- ref_type_enum_value = @ref_type&.upcase
 - add_page_specific_style 'page_bundles/tree'
 - current_route_path = request.fullpath.match(%r{-/tree/[^/]+/(.+$)}).to_a[1]
-- add_page_startup_graphql_call('repository/path_last_commit', { projectPath: @project.full_path, ref: current_ref, path: current_route_path || "" })
+- add_page_startup_graphql_call('repository/path_last_commit', { projectPath: @project.full_path, ref: current_ref, path: current_route_path || "", refType: ref_type_enum_value})
 - add_page_startup_graphql_call('repository/permissions', { projectPath: @project.full_path })
-- add_page_startup_graphql_call('repository/files', { nextPageCursor: "", pageSize: 100, projectPath: @project.full_path, ref: current_ref, path: current_route_path || "/"})
+- add_page_startup_graphql_call('repository/files', { nextPageCursor: "", pageSize: 100, projectPath: @project.full_path, ref: current_ref, path: current_route_path || "/", refType: ref_type_enum_value})
 - breadcrumb_title _("Repository")
 
 - page_title @path.presence || _("Files"), @ref
diff --git a/app/views/projects/triggers/_form.html.haml b/app/views/projects/triggers/_form.html.haml
index b621f1ab3ed..b7e226b009c 100644
--- a/app/views/projects/triggers/_form.html.haml
+++ b/app/views/projects/triggers/_form.html.haml
@@ -1,3 +1,4 @@
+- show_cancel_button = local_assigns.fetch(:show_cancel_button, false)
 = gitlab_ui_form_for [@project, @trigger], html: { class: 'gl-show-field-errors' } do |f|
   = form_errors(@trigger)
 
@@ -9,3 +10,6 @@
     = f.label :key, s_("Trigger|Description"), class: "label-bold"
     = f.text_field :description, class: 'form-control gl-form-input', required: true, title: 'Trigger description is required.', placeholder: s_("Trigger|Trigger description")
   = f.submit btn_text, pajamas_button: true
+  - if show_cancel_button
+    = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+      = _('Cancel')
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
index b68aad24b50..7b6915b7b85 100644
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
@@ -1,17 +1,38 @@
+- add_form_class = 'gl-display-none' if !form_errors(@trigger)
+- hide_class = 'gl-display-none' if form_errors(@trigger)
+
 .row.gl-mt-3.gl-mb-3
   .col-lg-12
-    = render Pajamas::CardComponent.new do |c|
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header gl-flex-wrap gl-sm-flex-nowrap' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
       - c.with_header do
-        = _("Manage your project's triggers")
+        .gl-new-card-title-wrapper
+          %h5.gl-new-card-title
+            = _("Active pipeline trigger tokens")
+            .gl-new-card-count
+              = sprite_icon('token', css_class: 'gl-mr-2')
+              = @triggers.size
+        .gl-new-card-actions.gl-display-flex.gl-justify-content-end.gl-w-full.gl-sm-w-auto.gl-mt-3.gl-sm-mt-0
+          = render Pajamas::ButtonComponent.new(size: :small, category: :tertiary, button_options: { data: { testid: 'reveal-hide-values-button' } }) do
+            = _('Reveal values')
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "gl-ml-2 js-toggle-button js-toggle-content #{hide_class}" }) do
+            = _('Add new token')
+
       - c.with_body do
-        = render 'projects/triggers/form', btn_text: _('Add trigger')
-        .gl-mb-5
+        .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class }
+          %h4.gl-mt-0
+            = _('Add new pipeline trigger token')
+          = render 'projects/triggers/form', btn_text: _('Create pipeline trigger token'), show_cancel_button: true
+
         #js-ci-pipeline-triggers-list.triggers-list{ data: { triggers: @triggers_json } }
-      - c.with_footer do
-        %p
-          = _("These examples show how to trigger this project's pipeline for a branch or tag.")
 
-        %p.light
+    %details.gl-mt-5.gl-border.gl-rounded-base
+      %summary.gl-py-3.gl-px-5.gl-font-weight-semibold
+        = _("View trigger token usage examples")
+      .gl-p-5
+        %p.gl-text-secondary
+          = _("These examples show common methods of triggering a pipeline with a pipeline trigger token. The URL and ID for this project is prefilled.")
+
+        %p.gl-text-secondary
           = _('In each example, replace %{code_start}TOKEN%{code_end} with the trigger token you generated and replace %{code_start}REF_NAME%{code_end} with the branch or tag name.').html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
 
         %h5.gl-mt-3
@@ -40,10 +61,10 @@
         %h5.gl-mt-3
           = _('Pass job variables')
 
-        %p.light
+        %p.gl-text-secondary
           = _('To pass variables to the triggered pipeline, add %{code_start}variables[VARIABLE]=VALUE%{code_end} to the API request.').html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
 
-        %p.light
+        %p.gl-text-secondary
           = _('cURL:')
 
         %pre
@@ -54,7 +75,7 @@
                  -F "ref=REF_NAME" \
                  -F "variables[RUN_NIGHTLY_BUILD]=true" \
                  #{builds_trigger_url(@project.id)}
-        %p.light
+        %p.gl-text-secondary
           = _('Webhook:')
 
         %pre.gl-mb-0
diff --git a/app/views/projects/usage_quotas/index.html.haml b/app/views/projects/usage_quotas/index.html.haml
index aad96151678..616af3f3338 100644
--- a/app/views/projects/usage_quotas/index.html.haml
+++ b/app/views/projects/usage_quotas/index.html.haml
@@ -15,9 +15,10 @@
 
 .row
   .col-sm-12
-    = s_('UsageQuota|Usage of project resources across the %{strong_start}%{project_name}%{strong_end} project').html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, project_name: @project.name } + '.'
-    %a{ href: help_page_path('user/usage_quotas.md'), target: '_blank', rel: 'noopener noreferrer' }
-      = s_('UsageQuota|Learn more about usage quotas') + '.'
+    %p.gl-text-secondary
+      = s_('UsageQuota|Usage of project resources across the %{strong_start}%{project_name}%{strong_end} project').html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, project_name: @project.name } + '.'
+      %a{ href: help_page_path('user/usage_quotas.md'), target: '_blank', rel: 'noopener noreferrer' }
+        = s_('UsageQuota|Learn more about usage quotas') + '.'
 
 = gl_tabs_nav({ id: 'js-project-usage-quotas-tabs' }) do
   = gl_tab_link_to '#storage-quota-tab', item_active: true do