Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

85 files changed, 360 insertions, 393 deletions

diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index db0f13843dd..c5a0b6a1428 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -11,4 +11,4 @@
 
 .content_list.project-activity{ :"data-href" => activity_project_path(@project) }
 .loading
-  .spinner.spinner-md
+  .gl-spinner.gl-spinner-md
diff --git a/app/views/projects/_archived_notice.html.haml b/app/views/projects/_archived_notice.html.haml
index dcece8ab42f..5489e41d37b 100644
--- a/app/views/projects/_archived_notice.html.haml
+++ b/app/views/projects/_archived_notice.html.haml
@@ -2,4 +2,4 @@
   .text-warning.center.prepend-top-20
     %p
       = sprite_icon('warning-solid')
-      = _('Archived project! Repository and other project resources are read only')
+      = _('Archived project! Repository and other project resources are read-only')
diff --git a/app/views/projects/_commit_button.html.haml b/app/views/projects/_commit_button.html.haml
index 4b41231ba20..987ec74e4ba 100644
--- a/app/views/projects/_commit_button.html.haml
+++ b/app/views/projects/_commit_button.html.haml
@@ -1,7 +1,7 @@
-.form-actions
+.form-actions.gl-display-flex
   = button_tag 'Commit changes', id: 'commit-changes', class: 'gl-button btn btn-confirm js-commit-button  qa-commit-button'
 
   = link_to 'Cancel', cancel_path,
-            class: 'gl-button btn btn-default btn-cancel', data: {confirm: leave_edit_message}
+            class: 'gl-button btn btn-default gl-ml-3', data: {confirm: leave_edit_message}
 
   = render 'shared/projects/edit_information'
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 0369ee50c40..8642dc5fc8c 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -7,7 +7,7 @@
   - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, readme_path), viewer: "rich", format: "json")
 
 #tree-holder.tree-holder.clearfix
-  .nav-block
+  .nav-block.gl-display-flex.gl-align-items-center
     = render 'projects/tree/tree_header', tree: @tree
 
   #js-last-commit
diff --git a/app/views/projects/_fork_suggestion.html.haml b/app/views/projects/_fork_suggestion.html.haml
index 9888ce417f8..55e609c0ffb 100644
--- a/app/views/projects/_fork_suggestion.html.haml
+++ b/app/views/projects/_fork_suggestion.html.haml
@@ -1,10 +1,7 @@
+- message_base = s_("ForkSuggestion|You can’t %{edit_start}edit%{edit_end} files directly in this project. Fork this project and submit a merge request with your changes.").html_safe
+- message = message_base.html_safe % { edit_start: '<span class="js-file-fork-suggestion-section-action">'.html_safe, edit_end: '</span>'.html_safe }
 .js-file-fork-suggestion-section.file-fork-suggestion.hidden
-  %span.file-fork-suggestion-note
-    You're not allowed to
-    %span.js-file-fork-suggestion-section-action
-      edit
-    files in this project directly. Please fork this project,
-    make your changes there, and submit a merge request.
-  = link_to 'Fork', nil, method: :post, class: 'js-fork-suggestion-button gl-button btn btn-grouped btn-confirm-secondary'
+  %span.file-fork-suggestion-note= message
+  = link_to s_('ForkSuggestion|Fork'), nil, method: :post, class: 'js-fork-suggestion-button gl-button btn btn-grouped btn-confirm-secondary'
   %button.js-cancel-fork-suggestion-button.gl-button.btn.btn-grouped{ type: 'button' }
-    Cancel
+    = s_('ForkSuggestion|Cancel')
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index b2380a3ba57..a70679dab5f 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -2,6 +2,7 @@
 - show_auto_devops_callout = show_auto_devops_callout?(@project)
 - max_project_topic_length = 15
 - emails_disabled = @project.emails_disabled?
+- cache_enabled = Feature.enabled?(:cache_home_panel, @project, type: :development, default_enabled: :yaml)
 
 .project-home-panel.js-show-on-project-root.gl-my-5{ class: [("empty-project" if empty_repo)] }
   .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-sm-flex-direction-column.gl-mb-3
@@ -23,42 +24,45 @@
           - if current_user
             %span.access-request-links.gl-ml-3
               = render 'shared/members/access_request_links', source: @project
-          - if @project.tag_list.present?
-            %span.home-panel-topic-list.mt-2.w-100.d-inline-flex.gl-font-base.gl-font-weight-normal.gl-align-items-center
-              = sprite_icon('tag', css_class: 'icon gl-relative gl-mr-2')
 
-              - @project.topics_to_show.each do |topic|
-                - project_topics_classes = "badge badge-pill badge-secondary gl-mr-2"
-                - explore_project_topic_path = explore_projects_path(tag: topic)
-                - if topic.length > max_project_topic_length
-                  %a{ class: "#{ project_topics_classes } str-truncated-30 has-tooltip", data: { container: "body" }, title: topic, href: explore_project_topic_path, itemprop: 'keywords' }
-                    = topic.titleize
-                - else
-                  %a{ class: project_topics_classes, href: explore_project_topic_path, itemprop: 'keywords' }
-                    = topic.titleize
+          - if @project.tag_list.present?
+            = cache_if(cache_enabled, [@project, :tag_list], expires_in: 1.day) do
+              %span.home-panel-topic-list.mt-2.w-100.d-inline-flex.gl-font-base.gl-font-weight-normal.gl-align-items-center
+                = sprite_icon('tag', css_class: 'icon gl-relative gl-mr-2')
 
-              - if @project.has_extra_topics?
-                .text-nowrap.has-tooltip{ data: { container: 'body' }, title: @project.has_extra_topics? ? @project.topics_not_shown.join(', ') : nil }
-                  = _("+ %{count} more") % { count: @project.count_of_extra_topics_not_shown }
+                - @project.topics_to_show.each do |topic|
+                  - project_topics_classes = "badge badge-pill badge-secondary gl-mr-2"
+                  - explore_project_topic_path = explore_projects_path(tag: topic)
+                  - if topic.length > max_project_topic_length
+                    %a{ class: "#{ project_topics_classes } str-truncated-30 has-tooltip", data: { container: "body" }, title: topic, href: explore_project_topic_path, itemprop: 'keywords' }
+                      = topic.titleize
+                  - else
+                    %a{ class: project_topics_classes, href: explore_project_topic_path, itemprop: 'keywords' }
+                      = topic.titleize
 
+                - if @project.has_extra_topics?
+                  .text-nowrap.has-tooltip{ data: { container: 'body' }, title: @project.has_extra_topics? ? @project.topics_not_shown.join(', ') : nil }
+                    = _("+ %{count} more") % { count: @project.count_of_extra_topics_not_shown }
 
-    .project-repo-buttons.gl-display-flex.gl-justify-content-md-end.gl-align-items-start.gl-flex-wrap.gl-mt-5
-      - if current_user
-        .gl-display-flex.gl-align-items-start.gl-mr-3
-          - if @notification_setting
-            .js-vue-notification-dropdown{ data: { button_size: "small", disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: @project.id } }
+    = cache_if(cache_enabled, [@project, :buttons, current_user, @notification_setting], expires_in: 1.day) do
+      .project-repo-buttons.gl-display-flex.gl-justify-content-md-end.gl-align-items-start.gl-flex-wrap.gl-mt-5
+        - if current_user
+          .gl-display-flex.gl-align-items-start.gl-mr-3
+            - if @notification_setting
+              .js-vue-notification-dropdown{ data: { button_size: "small", disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: @project.id } }
 
-      .count-buttons.gl-display-flex.gl-align-items-flex-start
-        = render 'projects/buttons/star'
-        = render 'projects/buttons/fork'
+        .count-buttons.gl-display-flex.gl-align-items-flex-start
+          = render 'projects/buttons/star'
+          = render 'projects/buttons/fork'
 
   - if can?(current_user, :download_code, @project)
-    %nav.project-stats
-      .nav-links.quick-links
-        - if @project.empty_repo?
-          = render 'stat_anchor_list', anchors: @project.empty_repo_statistics_anchors
-        - else
-          = render 'stat_anchor_list', anchors: @project.statistics_anchors(show_auto_devops_callout: show_auto_devops_callout)
+    = cache_if(cache_enabled, [@project, :download_code], expires_in: 1.minute) do
+      %nav.project-stats
+        .nav-links.quick-links
+          - if @project.empty_repo?
+            = render 'stat_anchor_list', anchors: @project.empty_repo_statistics_anchors
+          - else
+            = render 'stat_anchor_list', anchors: @project.statistics_anchors(show_auto_devops_callout: show_auto_devops_callout)
 
   .home-panel-home-desc.mt-1
     - if @project.description.present?
@@ -80,11 +84,12 @@
     = render_if_exists "projects/home_mirror"
 
   - if @project.badges.present?
-    .project-badges.mb-2
-      - @project.badges.each do |badge|
-        %a.gl-mr-3{ href: badge.rendered_link_url(@project),
-          target: '_blank',
-          rel: 'noopener noreferrer' }>
-          %img.project-badge{ src: badge.rendered_image_url(@project),
-            'aria-hidden': true,
-            alt: 'Project badge' }>
+    = cache_if(cache_enabled, [@project, :badges], expires_in: 1.day) do
+      .project-badges.mb-2
+        - @project.badges.each do |badge|
+          %a.gl-mr-3{ href: badge.rendered_link_url(@project),
+            target: '_blank',
+            rel: 'noopener noreferrer' }>
+            %img.project-badge{ src: badge.rendered_image_url(@project),
+              'aria-hidden': true,
+              alt: 'Project badge' }>
diff --git a/app/views/projects/_import_project_pane.html.haml b/app/views/projects/_import_project_pane.html.haml
index e6ded3ad912..c0fe788b56a 100644
--- a/app/views/projects/_import_project_pane.html.haml
+++ b/app/views/projects/_import_project_pane.html.haml
@@ -83,7 +83,7 @@
 
 
   .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
-    = form_for @project, html: { class: 'new_project' } do |f|
+    = form_for @project, html: { class: 'new_project gl-show-field-errors' } do |f|
       %hr
       = render "shared/import_form", f: f
       = render 'projects/new_project_fields', f: f, project_name_id: "import-url-name", hide_init_with_readme: true, track_label: track_label
diff --git a/app/views/projects/_merge_request_merge_method_settings.html.haml b/app/views/projects/_merge_request_merge_method_settings.html.haml
index f55d840e14b..2d18285ba80 100644
--- a/app/views/projects/_merge_request_merge_method_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_method_settings.html.haml
@@ -22,7 +22,7 @@
         = s_('ProjectSettings|When there is a merge conflict, the user is given the option to rebase.')
 
   .form-check.mb-2
-    = form.radio_button :merge_method, :ff, class: "js-merge-method-radio form-check-input", data: { qa_selector: 'merge_ff_radio_button' }
+    = form.radio_button :merge_method, :ff, class: "js-merge-method-radio form-check-input", data: { qa_selector: 'merge_ff_radio' }
     = label_tag :project_merge_method_ff, class: 'form-check-label' do
       = s_('ProjectSettings|Fast-forward merge')
       .text-secondary
diff --git a/app/views/projects/_merge_request_merge_suggestions_settings.html.haml b/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
index 12ab905479a..6e3c366da82 100644
--- a/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
@@ -3,7 +3,7 @@
 .form-group
   %b= s_('ProjectSettings|Merge suggestions')
   %p.text-secondary
-    - configure_the_commit_message_for_applied_suggestions_help_link_url = help_page_path('user/discussions/index.md', anchor: 'configure-the-commit-message-for-applied-suggestions')
+    - configure_the_commit_message_for_applied_suggestions_help_link_url = help_page_path('user/project/merge_requests/reviews/suggestions.md', anchor: 'configure-the-commit-message-for-applied-suggestions')
     - configure_the_commit_message_for_applied_suggestions_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: configure_the_commit_message_for_applied_suggestions_help_link_url }
     = s_('ProjectSettings|The commit message used when applying merge request suggestions. %{link_start}Learn more about suggestions.%{link_end}').html_safe % { link_start: configure_the_commit_message_for_applied_suggestions_help_link_start, link_end: '</a>'.html_safe }
   .mb-2
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 4695cd59f32..66fc313213a 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -8,7 +8,7 @@
   .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 input-lg", autofocus: true, data: { track_label: "#{track_label}", track_event: "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", autofocus: true, data: { track_label: "#{track_label}", track_event: "activate_form_input", track_property: "project_name", track_value: "" }, required: true, aria: { required: true }
   .form-group.project-path.col-sm-6
     = f.label :namespace_id, class: 'label-bold' do
       %span= s_("Project URL")
@@ -33,7 +33,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", required: true, aria: { required: true }
+    = f.text_field :path, placeholder: "my-awesome-project", class: "form-control gl-form-input", required: true, aria: { required: true }
 - if current_user.can_create_group?
   .form-text.text-muted
     - link_start_group_path = '<a href="%{path}">' % { path: new_group_path }
@@ -43,7 +43,7 @@
 .form-group
   = f.label :description, class: 'label-bold' do
     = s_('ProjectsNew|Project description %{tag_start}(optional)%{tag_end}').html_safe % { tag_start: '<span>'.html_safe, tag_end: '</span>'.html_safe }
-  = f.text_area :description, placeholder: s_('ProjectsNew|Description format'), class: "form-control", rows: 3, maxlength: 250, data: { track_label: "#{track_label}", track_event: "activate_form_input", track_property: "project_description", track_value: "" }
+  = f.text_area :description, placeholder: s_('ProjectsNew|Description format'), class: "form-control gl-form-input", rows: 3, maxlength: 250, data: { track_label: "#{track_label}", track_event: "activate_form_input", track_property: "project_description", track_value: "" }
 
 = f.label :visibility_level, class: 'label-bold' do
   = s_('ProjectsNew|Visibility Level')
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 84f2d352bc9..e50b964a253 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -12,7 +12,7 @@
   - if @code_navigation_path
     #js-code-navigation{ data: { code_navigation_path: @code_navigation_path, blob_path: blob.path, definition_path_prefix: project_blob_path(@project, @ref) } }
   - if Feature.enabled?(:refactor_blob_viewer, @project, default_enabled: :yaml)
-    #js-view-blob-app{ data: { blob_path: blob.path } }
+    #js-view-blob-app{ data: { blob_path: blob.path, project_path: @project.full_path } }
       .gl-spinner-container
         = loading_icon(size: 'md')
   - else
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 7d3a0c4a026..f2f753b4e86 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -3,7 +3,7 @@
 - is_markdown = Gitlab::MarkupHelper.gitlab_markdown?(file_name)
 
 .file-holder-bottom-radius.file-holder.file.gl-mb-3
-  .js-file-title.file-title.align-items-center.clearfix{ data: { current_action: action } }
+  .js-file-title.file-title.gl-display-flex.gl-align-items-center.clearfix{ data: { current_action: action } }
     .editor-ref.block-truncated.has-tooltip{ title: ref }
       = sprite_icon('fork', size: 12)
       = ref
@@ -26,16 +26,18 @@
           dismiss_key: @project.id,
           human_access: human_access } }
 
-    .file-buttons
+    .file-buttons.gl-display-flex.gl-align-items-center.gl-justify-content-end
       - if is_markdown
         = render 'shared/blob/markdown_buttons', show_fullscreen_button: false
-      = button_tag class: 'soft-wrap-toggle btn gl-button', type: 'button', tabindex: '-1' do
-        %span.no-wrap
-          = custom_icon('icon_no_wrap')
-          No wrap
-        %span.soft-wrap
-          = custom_icon('icon_soft_wrap')
-          Soft wrap
+      = button_tag class: 'soft-wrap-toggle btn gl-button btn-default', type: 'button', tabindex: '-1' do
+        .no-wrap
+          = sprite_icon('soft-unwrap', css_class: 'gl-button-icon')
+          %span.gl-button-text
+            No wrap
+        .soft-wrap
+          = sprite_icon('soft-wrap', css_class: 'gl-button-icon')
+          %span.gl-button-text
+            Soft wrap
 
   .file-editor.code
     .js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }<
diff --git a/app/views/projects/blob/_template_selectors.html.haml b/app/views/projects/blob/_template_selectors.html.haml
index 24a4db010c8..a76e61bc3dd 100644
--- a/app/views/projects/blob/_template_selectors.html.haml
+++ b/app/views/projects/blob/_template_selectors.html.haml
@@ -11,8 +11,5 @@
       = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-metrics-dashboard-selector qa-metrics-dashboard-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: metrics_dashboard_ymls(@project) } } )
     #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 qa-gitlab-ci-yml-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls(@project), selected: params[:template] } } )
-    - if experiment_enabled?(:ci_syntax_templates_b, subject: current_user) && @project.namespace.recent?
-      .gitlab-ci-syntax-yml-selector.js-gitlab-ci-syntax-yml-selector-wrap.js-template-selector-wrap.hidden
-        = dropdown_tag(_("Learn CI/CD syntax"), options: { toggle_class: 'js-gitlab-ci-syntax-yml-selector qa-gitlab-ci-syntax-yml-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitlab_ci_syntax_ymls(@project) } } )
     .dockerfile-selector.js-dockerfile-selector-wrap.js-template-selector-wrap.hidden
       = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-dockerfile-selector qa-dockerfile-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: dockerfile_names(@project) } } )
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index c42b54ec61d..28e33e3ac9b 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -21,7 +21,7 @@
 
           .form-actions
             = button_tag class: 'btn gl-button btn-confirm btn-upload-file', id: 'submit-all', type: 'button' do
-              .spinner.spinner-sm.gl-mr-2.js-loading-icon.hidden
+              .gl-spinner.gl-mr-2.js-loading-icon.hidden
               = button_title
             = link_to _("Cancel"), '#', class: "btn gl-button btn-default btn-cancel", "data-dismiss" => "modal"
 
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index abfed450316..9f89981e7ca 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -1,5 +1,7 @@
 - breadcrumb_title _("Repository")
 - page_title _("Edit"), @blob.path, @ref
+- content_for :prefetch_asset_tags do
+  - webpack_preload_asset_tag('monaco')
 
 - if @conflict
   .gl-alert.gl-alert-danger.gl-mb-5.gl-mt-5
diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml
index 8722819fe4f..2aeffa88c8f 100644
--- a/app/views/projects/blob/new.html.haml
+++ b/app/views/projects/blob/new.html.haml
@@ -1,16 +1,19 @@
 - breadcrumb_title _("Repository")
 - page_title _("New File"), @path.presence, @ref
 
-%h3.page-title.blob-new-page-title
-  New file
+%h3.page-title.blob-new-page-title#js-code-quality-walkthrough
+  = _('New file')
+  .js-code-quality-walkthrough{ data: { step: 'commit_ci_file' } }
 .file-editor
   = form_tag(project_create_blob_path(@project, @id), method: :post, class: 'js-edit-blob-form js-new-blob-form js-quick-submit js-requires-input', data: blob_editor_paths(@project)) do
     = render 'projects/blob/editor', ref: @ref
     = render 'shared/new_commit_form', placeholder: "Add new file"
 
+    - if params[:code_quality_walkthrough]
+      = hidden_field_tag 'code_quality_walkthrough', 'true'
     = hidden_field_tag 'content', '', id: 'file-content'
     = render 'projects/commit_button', ref: @ref,
-              cancel_path: project_tree_path(@project, @id)
+      cancel_path: project_tree_path(@project, @id)
     - if should_suggest_gitlab_ci_yml?
       .js-suggest-gitlab-ci-yml-commit-changes{ data: { target: '#commit-changes',
         merge_request_path: params[:mr_path],
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index c66300aa947..1ba38808937 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/app/views/projects/blob/show.html.haml
@@ -1,6 +1,8 @@
 - breadcrumb_title "Repository"
 - page_title @blob.path, @ref
 - 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)
 
 .js-signature-container{ data: { 'signatures-path': signatures_path } }
 
diff --git a/app/views/projects/blob/viewers/_changelog.html.haml b/app/views/projects/blob/viewers/_changelog.html.haml
index 80ead53beff..cac858c1444 100644
--- a/app/views/projects/blob/viewers/_changelog.html.haml
+++ b/app/views/projects/blob/viewers/_changelog.html.haml
@@ -1,4 +1,3 @@
 = sprite_icon('history', css_class: 'gl-mr-1 gl-vertical-align-text-bottom')
 = succeed '.' do
-  To find the state of this project's repository at the time of any of these versions, check out
-  = link_to "the tags", project_tags_path(viewer.project)
+  = _("To find the state of this project's repository at the time of any of these versions, check out %{link_start}the tags%{link_end}.").html_safe % { link_start: "<a href='#{project_tags_path(viewer.project)}'>".html_safe, link_end: "</a>".html_safe }
diff --git a/app/views/projects/blob/viewers/_contributing.html.haml b/app/views/projects/blob/viewers/_contributing.html.haml
index 18559e2908f..eac8c17b7ff 100644
--- a/app/views/projects/blob/viewers/_contributing.html.haml
+++ b/app/views/projects/blob/viewers/_contributing.html.haml
@@ -1,9 +1,9 @@
 = sprite_icon('book')
-After you've reviewed these contribution guidelines, you'll be all set to
+= _("After you've reviewed these contribution guidelines, you'll be all set to")
 
 - options = contribution_options(viewer.project)
 - if options.any?
   = succeed '.' do
     = Gitlab::Utils.to_exclusive_sentence(options).html_safe
 - else
-  contribute to this project.
+  = _("contribute to this project.")
diff --git a/app/views/projects/blob/viewers/_download.html.haml b/app/views/projects/blob/viewers/_download.html.haml
index fda4b9c92cd..61f64177be8 100644
--- a/app/views/projects/blob/viewers/_download.html.haml
+++ b/app/views/projects/blob/viewers/_download.html.haml
@@ -4,4 +4,4 @@
       %h1.light
         = sprite_icon('download')
       %h4
-        Download (#{number_to_human_size(viewer.blob.raw_size)})
+        = _('Download (%{size})').html_safe % { size: number_to_human_size(viewer.blob.raw_size) }
diff --git a/app/views/projects/blob/viewers/_license.html.haml b/app/views/projects/blob/viewers/_license.html.haml
index d2bd90a898a..320d7dd4b9f 100644
--- a/app/views/projects/blob/viewers/_license.html.haml
+++ b/app/views/projects/blob/viewers/_license.html.haml
@@ -1,8 +1,6 @@
 - license = viewer.license
 
 = sprite_icon('scale')
-This project is licensed under the
-= succeed '.' do
-  %strong= license.name
+= _("This project is licensed under the %{strong_start}%{license_name}%{strong_end}.").html_safe % { license_name: license.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
 
-= link_to 'Learn more', license.url, target: '_blank', rel: 'noopener noreferrer'
+= link_to _('Learn more'), license.url, target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/projects/blob/viewers/_readme.html.haml b/app/views/projects/blob/viewers/_readme.html.haml
index 86f59146cda..e06ff4edf71 100644
--- a/app/views/projects/blob/viewers/_readme.html.haml
+++ b/app/views/projects/blob/viewers/_readme.html.haml
@@ -1,4 +1,4 @@
 = sprite_icon('information-o', css_class: 'gl-vertical-align-middle! gl-mr-2')
 = succeed '.' do
-  To learn more about this project, read
-  = link_to "the wiki", wiki_path(viewer.project.wiki)
+  - link_to_wiki = link_to(_("the wiki"), wiki_path(viewer.project.wiki))
+  = _("To learn more about this project, read %{link_to_wiki}.").html_safe % { link_to_wiki: link_to_wiki }
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 3071e5ea5f8..2f89a3f62ed 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -4,9 +4,9 @@
   - archive_prefix = "#{project.path}-#{ref.tr('/', '-')}"
   .project-action-button.dropdown.inline>
     %button.gl-button.btn.btn-default.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { qa_selector: 'download_source_code_button' } }
-      = sprite_icon('download')
+      = sprite_icon('download', css_class: 'gl-icon')
       %span.sr-only=  _('Select Archive Format')
-      = sprite_icon("chevron-down")
+      = sprite_icon('chevron-down', css_class: 'gl-icon')
     .dropdown-menu.dropdown-menu-right{ role: 'menu' }
       %section
         %h5.m-0.dropdown-bold-header= _('Download source code')
diff --git a/app/views/projects/buttons/_dropdown.html.haml b/app/views/projects/buttons/_dropdown.html.haml
index 5effa5a9e92..12ce4667e1a 100644
--- a/app/views/projects/buttons/_dropdown.html.haml
+++ b/app/views/projects/buttons/_dropdown.html.haml
@@ -28,14 +28,14 @@
         %li.dropdown-header= _('This repository')
 
       - if can_push_code
-        %li.qa-new-file-option= link_to _('New file'), project_new_blob_path(@project, @project.default_branch || 'master')
+        %li.qa-new-file-option= link_to _('New file'), project_new_blob_path(@project, @project.default_branch_or_main)
         - unless @project.empty_repo?
           %li= link_to _('New branch'), new_project_branch_path(@project)
           %li= link_to _('New tag'), new_project_tag_path(@project)
       - elsif can_collaborate_with_project?(@project)
-        %li= link_to _('New file'), project_new_blob_path(@project, @project.default_branch || 'master')
+        %li= link_to _('New file'), project_new_blob_path(@project, @project.default_branch_or_main)
       - elsif create_mr_from_new_fork
-        - continue_params = { to: project_new_blob_path(@project, @project.default_branch || 'master'),
+        - continue_params = { to: project_new_blob_path(@project, @project.default_branch_or_main),
                               notice: edit_in_new_fork_notice,
                               notice_now: edit_in_new_fork_notice_now }
         - fork_path = project_forks_path(@project, namespace_key: current_user.namespace.id, continue: continue_params)
diff --git a/app/views/projects/buttons/_remove_tag.html.haml b/app/views/projects/buttons/_remove_tag.html.haml
index cdf6336a259..58af0d91f30 100644
--- a/app/views/projects/buttons/_remove_tag.html.haml
+++ b/app/views/projects/buttons/_remove_tag.html.haml
@@ -2,5 +2,5 @@
 - tag = local_assigns.fetch(:tag, nil)
 - return unless project && tag
 
-%button{ type: "button", class: "js-remove-tag js-confirm-modal-button gl-button btn btn-danger btn-icon has-tooltip gl-ml-3 #{protected_tag?(project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), data: { container: 'body', path: project_tag_path(@project, tag.name), modal_attributes: delete_tag_modal_attributes(tag.name) } }
-  = sprite_icon("remove")
+%button{ type: "button", class: "js-remove-tag js-confirm-modal-button gl-button btn btn-default btn-icon has-tooltip gl-ml-3\! #{protected_tag?(project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), data: { container: 'body', path: project_tag_path(@project, tag.name), modal_attributes: delete_tag_modal_attributes(tag.name) } }
+  = sprite_icon('remove', css_class: 'gl-icon')
diff --git a/app/views/projects/ci/pipeline_editor/show.html.haml b/app/views/projects/ci/pipeline_editor/show.html.haml
index eb588e150f7..674765e9f89 100644
--- a/app/views/projects/ci/pipeline_editor/show.html.haml
+++ b/app/views/projects/ci/pipeline_editor/show.html.haml
@@ -1,3 +1,5 @@
 - page_title s_('Pipelines|Pipeline Editor')
+- content_for :prefetch_asset_tags do
+  - webpack_preload_asset_tag('monaco')
 
 #js-pipeline-editor{ data: js_pipeline_editor_data(@project) }
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 1b28136e82c..67007aa7448 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -37,13 +37,13 @@
     - @commit.parents.each do |parent|
       = link_to parent.short_id, project_commit_path(@project, parent), class: "commit-sha"
     .commit-info.branches
-      .spinner.vertical-align-middle
+      .gl-spinner.vertical-align-middle
 
   .well-segment.merge-request-info
     .icon-container
       = custom_icon('mr_bold')
     %span.commit-info.merge-requests{ 'data-project-commit-path' => merge_requests_project_commit_path(@project, @commit.id, format: :json) }
-      .spinner.vertical-align-middle
+      .gl-spinner.vertical-align-middle
 
   - if can?(current_user, :read_pipeline, @last_pipeline)
     .well-segment.pipeline-info
diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml
index 7f52e6ed7eb..16df743475d 100644
--- a/app/views/projects/commit/_pipelines_list.haml
+++ b/app/views/projects/commit/_pipelines_list.haml
@@ -1,7 +1,11 @@
 - disable_initialization = local_assigns.fetch(:disable_initialization, false)
+- artifacts_endpoint_placeholder = ':pipeline_artifacts_id'
+
 #commit-pipeline-table-view{ data: { disable_initialization: disable_initialization,
   endpoint: endpoint,
   "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
   "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
   "project-id": @project.id,
+  "artifacts-endpoint" => downloadable_artifacts_project_pipeline_path(@project, artifacts_endpoint_placeholder, format: :json),
+  "artifacts-endpoint-placeholder" => artifacts_endpoint_placeholder,
 } }
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index 5652b503a6d..c3fdfeb6f4e 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -12,7 +12,12 @@
 .container-fluid{ class: [limited_container_width, container_class] }
   = render "commit_box"
   = render "ci_menu"
-  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, diff_page_context: "is-commit", paginate_diffs: true
+  = render "projects/diffs/diffs",
+    diffs: @diffs,
+    environment: @environment,
+    diff_page_context: "is-commit",
+    paginate_diffs: true,
+    paginate_diffs_per_page: Projects::CommitController::COMMIT_DIFFS_PER_PAGE
 
   .limited-width-notes
     = render "shared/notes/notes_with_form", :autocomplete => true
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index ceb312450be..bc0d14743b9 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -3,22 +3,24 @@
   - `assets/javascripts/diffs/components/commit_item.vue`
 
   EXCEPTION WARNING - see above `.vue` file for de-sync drift
--#-----------------------------------------------------------------
-- view_details  = local_assigns.fetch(:view_details, false)
-- merge_request = local_assigns.fetch(:merge_request, nil)
-- project       = local_assigns.fetch(:project) { merge_request&.project }
-- ref           = local_assigns.fetch(:ref) { merge_request&.source_branch }
-- commit        = commit.present(current_user: current_user)
-- commit_status = commit.status_for(ref)
-- collapsible = local_assigns.fetch(:collapsible, true)
-- link_data_attrs = local_assigns.fetch(:link_data_attrs, {})
-
-- link = commit_path(project, commit, merge_request: merge_request)
 
+  WARNING: When introducing new content here, please consider what
+           changes may need to be made in the cache keys used to
+           wrap this view, found in
+           CommitsHelper#commit_partial_cache_key
+-#-----------------------------------------------------------------
+- view_details      = local_assigns.fetch(:view_details, false)
+- merge_request     = local_assigns.fetch(:merge_request, nil)
+- project           = local_assigns.fetch(:project) { merge_request&.project }
+- ref               = local_assigns.fetch(:ref) { merge_request&.source_branch }
+- commit            = commit.present(current_user: current_user)
+- commit_status     = commit.status_for(ref)
+- collapsible       = local_assigns.fetch(:collapsible, true)
+- link_data_attrs   = local_assigns.fetch(:link_data_attrs, {})
+- link              = commit_path(project, commit, merge_request: merge_request)
 - show_project_name = local_assigns.fetch(:show_project_name, false)
 
 %li{ class: ["commit flex-row", ("js-toggle-container" if collapsible)], id: "commit-#{commit.short_id}" }
-
   .avatar-cell.d-none.d-sm-block
     = author_avatar(commit, size: 40, has_tooltip: false)
 
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 9e2dca3ad71..e6c9a7166a9 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -3,8 +3,8 @@
 - ref = local_assigns.fetch(:ref) { merge_request&.source_branch }
 - can_update_merge_request = can?(current_user, :update_merge_request, @merge_request)
 
-- commits = @commits
-- context_commits = @context_commits
+- commits = @commits&.map { |commit| commit.present(current_user: current_user) }
+- 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|
@@ -14,7 +14,10 @@
 
   %li.commits-row{ data: { day: day } }
     %ul.content-list.commit-list.flex-list
-      = render partial: 'projects/commits/commit', collection: daily_commits, locals: { project: project, ref: ref, merge_request: merge_request }
+      - if Feature.enabled?(:cached_commits, project, default_enabled: :yaml)
+        = render partial: 'projects/commits/commit', collection: daily_commits, locals: { project: project, ref: ref, merge_request: merge_request }, cached: -> (commit) { commit_partial_cache_key(commit, ref: ref, merge_request: merge_request, request: request) }
+      - else
+        = render partial: 'projects/commits/commit', collection: daily_commits, locals: { project: project, ref: ref, merge_request: merge_request }
 
 - if context_commits.present?
   %li.commit-header.js-commit-header
@@ -25,7 +28,10 @@
 
   %li.commits-row
     %ul.content-list.commit-list.flex-list
-      = render partial: 'projects/commits/commit', collection: context_commits, locals: { project: project, ref: ref, merge_request: merge_request }
+      - if Feature.enabled?(:cached_commits, project, default_enabled: :yaml)
+        = render partial: 'projects/commits/commit', collection: context_commits, locals: { project: project, ref: ref, merge_request: merge_request }, cached: -> (commit) { commit_partial_cache_key(commit, ref: ref, merge_request: merge_request, request: request) }
+      - else
+        = render partial: 'projects/commits/commit', collection: context_commits, locals: { project: project, ref: ref, merge_request: merge_request }
 
 - if hidden > 0
   %li.gl-alert.gl-alert-warning
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index e3ab184ec6f..426d022da26 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -4,11 +4,11 @@
 %h3.page-title
   = _("Compare Git revisions")
 .sub-header-block
-  - example_master = capture do
-    %code.ref-name master
+  - example_branch = capture do
+    %code.ref-name= @project.default_branch_or_main
   - example_sha = capture do
     %code.ref-name 4eedf23
-  = html_escape(_("Choose a branch/tag (e.g. %{master}) or enter a commit (e.g. %{sha}) to see what's changed or to create a merge request.")) % { master: example_master.html_safe, sha: example_sha.html_safe }
+  = html_escape(_("Choose a branch/tag (e.g. %{branch}) or enter a commit (e.g. %{sha}) to see what's changed or to create a merge request.")) % { branch: example_branch.html_safe, sha: example_sha.html_safe }
   %br
   = html_escape(_("Changes are shown as if the %{b_open}source%{b_close} revision was being merged into the %{b_open}target%{b_close} revision.")) % { b_open: '<b>'.html_safe, b_close: '</b>'.html_safe }
 
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 9e9c271e7be..1fc067b6be1 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -6,8 +6,15 @@
     #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, params) }
 
 - if @commits.present?
-  = render "projects/commits/commit_list"
-  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, diff_page_context: "is-compare"
+  -# Only show commit list in the first page
+  - hide_commit_list = params[:page].present? && params[:page] != '1'
+  = render "projects/commits/commit_list" unless hide_commit_list
+  = render "projects/diffs/diffs",
+    diffs: @diffs,
+    environment: @environment,
+    diff_page_context: "is-compare",
+    paginate_diffs: true,
+    paginate_diffs_per_page: Projects::CompareController::COMMIT_DIFFS_PER_PAGE
 - else
   .card.bg-light
     .center
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 1c7a9ffe0bb..bb2682bb7c0 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -4,7 +4,8 @@
 - diff_page_context = local_assigns.fetch(:diff_page_context, nil)
 - load_diff_files_async = Feature.enabled?(:async_commit_diff_files, @project) && diff_page_context == "is-commit"
 - paginate_diffs = local_assigns.fetch(:paginate_diffs, false) && !load_diff_files_async
-- diff_files = conditionally_paginate_diff_files(diffs, paginate: paginate_diffs)
+- paginate_diffs_per_page = local_assigns.fetch(:paginate_diffs_per_page, nil)
+- diff_files = conditionally_paginate_diff_files(diffs, paginate: paginate_diffs, per: paginate_diffs_per_page)
 
 .content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed
   .files-changed-inner
@@ -33,7 +34,7 @@
     - url = url_for(safe_params.merge(action: 'diff_files'))
     .js-diffs-batch{ data: { diff_files_path: url } }
       .text-center
-        %span.spinner.spinner-md
+        %span.gl-spinner.gl-spinner-md
   - else
     = render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment, diff_page_context: diff_page_context }
 
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index ecaf3467cd2..187fe608a68 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -106,7 +106,7 @@
 .save-project-loader.hide
   .center
     %h2
-      .spinner.spinner-md.align-text-bottom
+      .gl-spinner.gl-spinner-md.align-text-bottom
       = _('Saving project.')
     %p= _('Please wait a moment, this page will automatically refresh when ready.')
 
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 171222368d6..b76f6b27aa8 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -1,5 +1,5 @@
 - @content_class = "limit-container-width" unless fluid_layout
-- default_branch_name = @project.default_branch_or_master
+- default_branch_name = @project.default_branch_or_main
 - @skip_current_level_breadcrumb = true
 
 = render partial: 'flash_messages', locals: { project: @project }
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index 06a2ed46805..0136184f80d 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -7,4 +7,4 @@
   "new-environment-path" => new_project_environment_path(@project),
   "help-page-path" => help_page_path("ci/environments/index.md"),
   "project-path" => @project.full_path,
-  "default-branch-name" => @project.default_branch_or_master } }
+  "default-branch-name" => @project.default_branch_or_main } }
diff --git a/app/views/projects/feature_flags/edit.html.haml b/app/views/projects/feature_flags/edit.html.haml
index 028595aba0b..1549f5cf6d6 100644
--- a/app/views/projects/feature_flags/edit.html.haml
+++ b/app/views/projects/feature_flags/edit.html.haml
@@ -12,5 +12,5 @@
                       user_callout_id: UserCalloutsHelper::FEATURE_FLAGS_NEW_VERSION,
                       show_user_callout: show_feature_flags_new_version?.to_s,
                       strategy_type_docs_page_path: help_page_path('operations/feature_flags', anchor: 'feature-flag-strategies'),
-                      environments_scope_docs_path: help_page_path('ci/environments', anchor: 'scoping-environments-with-specs'),
+                      environments_scope_docs_path: help_page_path('ci/environments/index.md', anchor: 'scoping-environments-with-specs'),
                       feature_flag_issues_endpoint: feature_flag_issues_links_endpoint(@project, @feature_flag, current_user) } }
diff --git a/app/views/projects/feature_flags/new.html.haml b/app/views/projects/feature_flags/new.html.haml
index 3bad1d9773c..bc52f52ecf7 100644
--- a/app/views/projects/feature_flags/new.html.haml
+++ b/app/views/projects/feature_flags/new.html.haml
@@ -10,5 +10,5 @@
                      user_callout_id: UserCalloutsHelper::FEATURE_FLAGS_NEW_VERSION,
                      show_user_callout: show_feature_flags_new_version?.to_s,
                      strategy_type_docs_page_path: help_page_path('operations/feature_flags', anchor: 'feature-flag-strategies'),
-                     environments_scope_docs_path: help_page_path('ci/environments', anchor: 'scoping-environments-with-specs'),
+                     environments_scope_docs_path: help_page_path('ci/environments/index.md', anchor: 'scoping-environments-with-specs'),
                      project_id: @project.id } }
diff --git a/app/views/projects/hook_logs/_index.html.haml b/app/views/projects/hook_logs/_index.html.haml
index a8a4eef65b3..ee4dbf5c05c 100644
--- a/app/views/projects/hook_logs/_index.html.haml
+++ b/app/views/projects/hook_logs/_index.html.haml
@@ -4,7 +4,7 @@
       Recent Deliveries
     %p When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.
   .col-lg-9
-    - if hook_logs.any?
+    - if hook_logs.present?
       %table.table
         %thead
           %tr
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 838b4538cad..9c01d93f7d0 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -3,7 +3,9 @@
   .issuable-info-container
     - if @can_bulk_update
       .issue-check.hidden
-        = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected-issuable"
+        - checkbox_id = dom_id(issue, "selected")
+        %label.gl-sr-only{ for: checkbox_id }= issue.title
+        = check_box_tag checkbox_id, nil, false, 'data-id' => issue.id, class: "selected-issuable"
     .issuable-main-info
       .issue-title.title
         %span.issue-title-text.js-onboarding-issue-item{ dir: "auto" }
diff --git a/app/views/projects/issues/_issues.html.haml b/app/views/projects/issues/_issues.html.haml
index ef602da72e5..e4d072a9472 100644
--- a/app/views/projects/issues/_issues.html.haml
+++ b/app/views/projects/issues/_issues.html.haml
@@ -1,4 +1,5 @@
 - is_project_overview = local_assigns.fetch(:is_project_overview, false)
+= render 'shared/alerts/positioning_disabled'
 
 - if Feature.enabled?(:vue_issuables_list, @project) && !is_project_overview
   - data_endpoint = local_assigns.fetch(:data_endpoint, expose_path(api_v4_projects_issues_path(id: @project.id)))
@@ -15,7 +16,7 @@
     'scoped-labels-available': scoped_labels_available?(@project).to_json } }
 - else
   - empty_state_path = local_assigns.fetch(:empty_state_path, 'shared/empty_states/issues')
-  %ul.content-list.issues-list.issuable-list{ class: ("manual-ordering" if @sort == 'relative_position') }
+  %ul.content-list.issues-list.issuable-list{ class: issue_manual_ordering_class }
     = render partial: "projects/issues/issue", collection: @issues
     - if @issues.blank?
       = render empty_state_path
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 45b2f86c03d..07fec195899 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -13,13 +13,13 @@
   .create-mr-dropdown-wrap.d-inline-block.full-width-mobile.js-create-mr{ data: { project_path: @project.full_path, project_id: @project.id, can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path, is_confidential: can_create_confidential_merge_request?.to_s } }
     .btn-group.unavailable
       %button.gl-button.btn{ type: 'button', disabled: 'disabled' }
-        .spinner.align-text-bottom.gl-button-icon.hide
+        .gl-spinner.align-text-bottom.gl-button-icon.hide
         %span.text
           Checking branch availability…
 
     .btn-group.available.hidden
       %button.gl-button.btn.js-create-merge-request.btn-confirm{ type: 'button', data: { action: data_action } }
-        .spinner.js-spinner.gl-mr-2.gl-display-none
+        .gl-spinner.js-spinner.gl-mr-2.gl-display-none
         = value
 
       %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.create-merge-request-dropdown-toggle.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 9b043ea3c47..3e8442eee86 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -29,7 +29,7 @@
   .issues-holder
     = render 'issues'
     - if new_issue_email
-      .issuable-footer.text-center
+      .gl-text-center.gl-pt-5.gl-pb-7
         .js-issueable-by-email{ data: { initial_email: new_issue_email, issuable_type: issuable_type, emails_help_page_path: help_page_path('development/emails', anchor: 'email-namespace'), quick_actions_help_path: help_page_path('user/project/quick_actions'), markdown_help_path: help_page_path('user/markdown'), reset_path: new_issuable_address_project_path(@project, issuable_type: issuable_type) } }
 - else
   - new_project_issue_button_path = @project.archived? ? false : new_project_issue_path(@project)
diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml
index f2aab3d9394..1da3881c104 100644
--- a/app/views/projects/jobs/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -2,7 +2,7 @@
 - add_page_specific_style 'page_bundles/ci_status'
 
 - if Feature.enabled?(:jobs_table_vue, @project, default_enabled: :yaml)
-  #js-jobs-table{ data: { full_path: @project.full_path, job_counts: job_counts.to_json, job_statuses: job_statuses.to_json } }
+  #js-jobs-table{ data: { full_path: @project.full_path, job_counts: job_counts.to_json, 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') } }
 - else
   .top-area
     - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }
diff --git a/app/views/projects/learn_gitlab/index.html.haml b/app/views/projects/learn_gitlab/index.html.haml
index 94023b21aab..4935b72d3fa 100644
--- a/app/views/projects/learn_gitlab/index.html.haml
+++ b/app/views/projects/learn_gitlab/index.html.haml
@@ -2,4 +2,4 @@
 - page_title _("Learn GitLab")
 - add_page_specific_style 'page_bundles/learn_gitlab'
 
-#js-learn-gitlab-app{ data: { actions: onboarding_actions_data(@project).to_json } }
+#js-learn-gitlab-app{ data: { actions: onboarding_actions_data(@project).to_json, sections: onboarding_sections_data.to_json } }
diff --git a/app/views/projects/merge_requests/_description.html.haml b/app/views/projects/merge_requests/_description.html.haml
index c20479662dd..1dd4cc6495c 100644
--- a/app/views/projects/merge_requests/_description.html.haml
+++ b/app/views/projects/merge_requests/_description.html.haml
@@ -1,6 +1,6 @@
 %div
   - if @merge_request.description.present?
-    .description.qa-description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' }
+    .description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' , data: { qa_selector: 'description_content' } }
       .md
         = markdown_field(@merge_request, :description)
       %textarea.hidden.js-task-list-field{ data: { value: @merge_request.description } }
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 6c0fc9575fc..b70bc740175 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -1,7 +1,9 @@
 %li{ id: dom_id(merge_request), class: mr_css_classes(merge_request), data: { labels: merge_request.label_ids, id: merge_request.id } }
   - if @can_bulk_update
     .issue-check.hidden
-      = check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected-issuable"
+      - checkbox_id = dom_id(merge_request, "selected")
+      %label.gl-sr-only{ for: checkbox_id }= merge_request.title
+      = check_box_tag checkbox_id, nil, false, 'data-id' => merge_request.id, class: "selected-issuable"
 
   .issuable-info-container
     .issuable-main-info
diff --git a/app/views/projects/merge_requests/_mr_box.html.haml b/app/views/projects/merge_requests/_mr_box.html.haml
index c38cf62b36c..916b841e350 100644
--- a/app/views/projects/merge_requests/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/_mr_box.html.haml
@@ -1,3 +1,3 @@
 .detail-page-description.py-2
-  %h2.title.qa-title.mb-0
+  %h2.title.mb-0{ data: { qa_selector: 'title_content' } }
     = markdown_field(@merge_request, :title)
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 26d8e571973..e42032fef66 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -1,53 +1,51 @@
 - @no_breadcrumb_border = true
 - can_update_merge_request = can?(current_user, :update_merge_request, @merge_request)
 - can_reopen_merge_request = can?(current_user, :reopen_merge_request, @merge_request)
-- state_human_name, state_icon_name = state_name_with_icon(@merge_request)
 - are_close_and_open_buttons_hidden = merge_request_button_hidden?(@merge_request, true) && merge_request_button_hidden?(@merge_request, false)
+- cache_key = [@project, @merge_request, can_update_merge_request, can_reopen_merge_request, are_close_and_open_buttons_hidden]
 
-- if @merge_request.closed_or_merged_without_fork?
-  .gl-alert.gl-alert-danger.gl-mb-5
-    = sprite_icon('error', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-    .gl-alert-body
-      The source project of this merge request has been removed.
+= cache_if(Feature.enabled?(:cached_mr_title, @project, default_enabled: :yaml), cache_key, expires_in: 1.day) do
+  - if @merge_request.closed_or_merged_without_fork?
+    .gl-alert.gl-alert-danger.gl-mb-5
+      = sprite_icon('error', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+      .gl-alert-body
+        The source project of this merge request has been removed.
 
-.detail-page-header.border-bottom-0.pt-0.pb-0
-  .detail-page-header-body
-    .issuable-status-box.status-box.js-mr-status-box{ class: status_box_class(@merge_request), data: { state: @merge_request.state } }
-      = sprite_icon(state_icon_name, css_class: 'gl-display-block gl-sm-display-none!')
-      %span.gl-display-none.gl-sm-display-block
-        = state_human_name
+  .detail-page-header.border-bottom-0.pt-0.pb-0
+    .detail-page-header-body
+      = render "shared/issuable/status_box", issuable: @merge_request
 
-    .issuable-meta
-      #js-issuable-header-warnings
-      = issuable_meta(@merge_request, @project)
+      .issuable-meta
+        #js-issuable-header-warnings
+        = issuable_meta(@merge_request, @project)
 
-    %a.gl-button.btn.btn-default.btn-icon.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
-      = sprite_icon('chevron-double-lg-left')
+      %a.gl-button.btn.btn-default.btn-icon.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
+        = sprite_icon('chevron-double-lg-left')
 
-  .detail-page-header-actions.js-issuable-actions
-    .clearfix.dropdown
-      %button.gl-button.btn.btn-default.float-left.gl-md-display-none.gl-w-full{ type: "button", data: { toggle: "dropdown" } }
-        Options
-        = sprite_icon('chevron-down', css_class: 'gl-text-gray-500')
-      .dropdown-menu.dropdown-menu-right
-        %ul
-          - if can_update_merge_request
-            %li= link_to 'Edit', edit_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
-            - if @merge_request.opened?
-              %li
-                = link_to @merge_request.work_in_progress? ? _('Mark as ready') : _('Mark as draft'), toggle_draft_merge_request_path(@merge_request), method: :put, class: "js-draft-toggle-button"
-            %li{ class: [merge_request_button_visibility(@merge_request, true), 'js-close-item'] }
-              = link_to 'Close', merge_request_path(@merge_request, merge_request: { state_event: :close }), method: :put, title: 'Close merge request'
-          - if can_reopen_merge_request
-            %li{ class: merge_request_button_visibility(@merge_request, false) }
-              = link_to 'Reopen', merge_request_path(@merge_request, merge_request: { state_event: :reopen }), method: :put, title: 'Reopen merge request'
-          - unless @merge_request.merged? || current_user == @merge_request.author
-            %li= link_to 'Report abuse', new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request))
+    .detail-page-header-actions.js-issuable-actions
+      .clearfix.dropdown
+        %button.gl-button.btn.btn-default.float-left.gl-md-display-none.gl-w-full{ type: "button", data: { toggle: "dropdown" } }
+          Options
+          = sprite_icon('chevron-down', css_class: 'gl-text-gray-500')
+        .dropdown-menu.dropdown-menu-right
+          %ul
+            - if can_update_merge_request
+              %li= link_to 'Edit', edit_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
+              - if @merge_request.opened?
+                %li
+                  = link_to @merge_request.work_in_progress? ? _('Mark as ready') : _('Mark as draft'), toggle_draft_merge_request_path(@merge_request), method: :put, class: "js-draft-toggle-button"
+              %li{ class: [merge_request_button_visibility(@merge_request, true), 'js-close-item'] }
+                = link_to 'Close', merge_request_path(@merge_request, merge_request: { state_event: :close }), method: :put, title: 'Close merge request'
+            - if can_reopen_merge_request
+              %li{ class: merge_request_button_visibility(@merge_request, false) }
+                = link_to 'Reopen', merge_request_path(@merge_request, merge_request: { state_event: :reopen }), method: :put, title: 'Reopen merge request'
+            - unless @merge_request.merged? || current_user == @merge_request.author
+              %li= link_to 'Report abuse', new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request))
 
-      - if can_update_merge_request
-        = link_to 'Edit', edit_project_merge_request_path(@project, @merge_request), class: "d-none d-md-block btn gl-button btn-default btn-grouped js-issuable-edit", data: { qa_selector: "edit_button" }
+        - if can_update_merge_request
+          = link_to 'Edit', edit_project_merge_request_path(@project, @merge_request), class: "d-none d-md-block btn gl-button btn-default btn-grouped js-issuable-edit", data: { qa_selector: "edit_button" }
 
-      - if can_update_merge_request && !are_close_and_open_buttons_hidden
-        = render 'projects/merge_requests/close_reopen_draft_report_toggle'
-      - elsif !@merge_request.merged?
-        = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-md-display-block gl-button btn btn-default float-right gl-ml-3', title: _('Report abuse')
+        - if can_update_merge_request && !are_close_and_open_buttons_hidden
+          = render 'projects/merge_requests/close_reopen_draft_report_toggle'
+        - elsif !@merge_request.merged?
+          = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-md-display-block gl-button btn btn-default float-right gl-ml-3', title: _('Report abuse')
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 6e6046eba14..606442d71a9 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -1,11 +1,15 @@
+- artifacts_endpoint_placeholder = ':pipeline_artifacts_id'
+
 = javascript_tag do
   :plain
     window.gl = window.gl || {};
     window.gl.mrWidgetData = #{serialize_issuable(@merge_request, serializer: 'widget', issues_links: true)}
 
+    window.gl.mrWidgetData.artifacts_endpoint = '#{downloadable_artifacts_project_pipeline_path(@project, artifacts_endpoint_placeholder, format: :json)}';
+    window.gl.mrWidgetData.artifacts_endpoint_placeholder = '#{artifacts_endpoint_placeholder}';
     window.gl.mrWidgetData.squash_before_merge_help_path = '#{help_page_path("user/project/merge_requests/squash_and_merge")}';
     window.gl.mrWidgetData.ci_troubleshooting_docs_path = '#{help_page_path('ci/troubleshooting.md')}';
-    window.gl.mrWidgetData.mr_troubleshooting_docs_path = '#{help_page_path('user/project/merge_requests/reviewing_and_managing_merge_requests.md', anchor: 'troubleshooting')}';
+    window.gl.mrWidgetData.mr_troubleshooting_docs_path = '#{help_page_path('user/project/merge_requests/reviews/index.md', anchor: 'troubleshooting')}';
     window.gl.mrWidgetData.pipeline_must_succeed_docs_path = '#{help_page_path('user/project/merge_requests/merge_when_pipeline_succeeds.md', anchor: 'only-allow-merge-requests-to-be-merged-if-the-pipeline-succeeds')}';
     window.gl.mrWidgetData.security_approvals_help_page_path = '#{help_page_path('user/application_security/index.md', anchor: 'security-approvals-in-merge-requests')}';
     window.gl.mrWidgetData.license_compliance_docs_path = '#{help_page_path('user/compliance/license_compliance/index.md', anchor: 'policies')}';
diff --git a/app/views/projects/merge_requests/creations/_new_compare.html.haml b/app/views/projects/merge_requests/creations/_new_compare.html.haml
index 7082bf4b8b0..b99714c1794 100644
--- a/app/views/projects/merge_requests/creations/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml
@@ -30,7 +30,7 @@
               = dropdown_loading
         .card-footer
           .text-center
-            .js-source-loading.mt-1.spinner.spinner-sm
+            .js-source-loading.mt-1.gl-spinner
           %ul.list-unstyled.mr_source_commit
 
     .col-lg-6
@@ -59,7 +59,7 @@
               = dropdown_loading
         .card-footer
           .text-center
-            .js-target-loading.mt-1.spinner.spinner-sm
+            .js-target-loading.mt-1.gl-spinner
           %ul.list-unstyled.mr_target_commit
 
   - if @merge_request.errors.any?
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index a8facf1c6fd..7e1ca19d9b6 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -26,16 +26,16 @@
             %li.commits-tab.new-tab
               = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tabvue'} do
                 Commits
-                %span.badge.badge-pill= @total_commit_count
+                %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @total_commit_count
             - if @pipelines.any?
               %li.builds-tab
                 = link_to url_for(safe_params.merge(action: 'pipelines')), data: {target: 'div#pipelines', action: 'pipelines', toggle: 'tabvue'} do
                   Pipelines
-                  %span.badge.badge-pill= @pipelines.size
+                  %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @pipelines.size
             %li.diffs-tab
               = link_to url_for(safe_params.merge(action: 'diffs')), data: {target: 'div#diffs', action: 'diffs', toggle: 'tabvue', qa_selector: 'diffs_tab'} do
                 Changes
-                %span.badge.badge-pill= @merge_request.diff_size
+                %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @merge_request.diff_size
 
     #diff-notes-app.tab-content
       #new.commits.tab-pane.active
@@ -48,4 +48,4 @@
 
   .mr-loading-status
     .loading.hide
-      .spinner.spinner-md
+      .gl-spinner.gl-spinner-md
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 22d78418c5b..289f88c9705 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -22,7 +22,7 @@
   .merge-requests-holder
     = render 'merge_requests'
     - if new_merge_request_email
-      .issuable-footer.text-center
+      .gl-text-center.gl-pt-5.gl-pb-7
         .js-issueable-by-email{ data: { initial_email: new_merge_request_email, issuable_type: issuable_type, emails_help_page_path: help_page_path('development/emails', anchor: 'email-namespace'), quick_actions_help_path: help_page_path('user/project/quick_actions'), markdown_help_path: help_page_path('user/markdown'), reset_path: new_issuable_address_project_path(@project, issuable_type: issuable_type) } }
 - else
   = render 'shared/empty_states/merge_requests', button_path: new_merge_request_path
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 416cb932ec9..49f2795538c 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -5,7 +5,7 @@
 - page_title "#{@merge_request.title} (#{@merge_request.to_reference})", _("Merge requests")
 - page_description @merge_request.description_html
 - page_card_attributes @merge_request.card_attributes
-- suggest_changes_help_path = help_page_path('user/discussions/index.md', anchor: 'suggest-changes')
+- suggest_changes_help_path = help_page_path('user/project/merge_requests/reviews/suggestions.md')
 - number_of_pipelines = @pipelines.size
 - mr_action = j(params[:tab].presence || 'show')
 - add_page_specific_style 'page_bundles/merge_requests'
@@ -40,7 +40,7 @@
           = render "projects/merge_requests/tabs/tab", name: "diffs", class: "diffs-tab", id: "diffs-tab", qa_selector: "diffs_tab" do
             = tab_link_for @merge_request, :diffs do
               = _("Changes")
-              %span.badge.badge-pill.gl-badge.badge-muted.sm= @merge_request.diff_size
+              %span.badge.badge-pill.gl-badge.badge-muted.sm= @diffs_count
         .d-flex.flex-wrap.align-items-center.justify-content-lg-end
           #js-vue-discussion-counter
 
@@ -85,7 +85,7 @@
 
     .mr-loading-status
       .loading.hide
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
 
 = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, reviewers: @merge_request.reviewers, source_branch: @merge_request.source_branch
 
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index 56906eb6e66..dfb9defb91c 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -7,13 +7,17 @@
         .col-form-label.col-sm-2
           = f.label :title, _('Title')
         .col-sm-10
-          = f.text_field :title, maxlength: 255, class: 'form-control', data: { qa_selector: 'milestone_title_field' }, required: true, autofocus: true
+          = f.text_field :title, maxlength: 255, class: 'form-control gl-form-input', data: { qa_selector: 'milestone_title_field' }, required: true, autofocus: true
       .form-group.row.milestone-description
         .col-form-label.col-sm-2
           = f.label :description, _('Description')
         .col-sm-10
           = render layout: 'shared/md_preview', locals: { url: preview_markdown_path(@project) } do
-            = render 'shared/zen', f: f, attr: :description, classes: 'note-textarea', qa_selector: 'milestone_description_field', placeholder: _('Write milestone description...')
+            = render 'shared/zen', f: f, attr: :description,
+                                    classes: 'note-textarea',
+                                    qa_selector: 'milestone_description_field',
+                                    supports_autocomplete: true,
+                                    placeholder: _('Write milestone description...')
             = render 'shared/notes/hints'
           .clearfix
           .error-alert
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index 2185df3a994..5a6c2c5faaf 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -4,6 +4,8 @@
 - page_description @milestone.description_html
 - add_page_specific_style 'page_bundles/milestone'
 
+- add_page_startup_api_call milestone_tab_path(@milestone, 'issues', show_project_name: false)
+
 = render 'shared/milestones/header', milestone: @milestone
 = render 'shared/milestones/description', milestone: @milestone
 
diff --git a/app/views/projects/mirrors/_ssh_host_keys.html.haml b/app/views/projects/mirrors/_ssh_host_keys.html.haml
index 4e3cd609d75..4411bc474b8 100644
--- a/app/views/projects/mirrors/_ssh_host_keys.html.haml
+++ b/app/views/projects/mirrors/_ssh_host_keys.html.haml
@@ -4,7 +4,7 @@
 
 .form-group.js-ssh-host-keys-section{ class: ('collapse' unless mirror.ssh_mirror_url?) }
   %button.btn.gl-button.btn-inverted.btn-secondary.inline.js-detect-host-keys.gl-mr-3{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
-    .js-spinner.d-none.spinner.mr-1
+    .js-spinner.d-none.gl-spinner.mr-1
     = _('Detect host keys')
   .fingerprint-ssh-info.js-fingerprint-ssh-info.gl-mt-3.gl-mb-3{ class: ('collapse' unless mirror.ssh_mirror_url?) }
     %label.label-bold
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 3cff85a4979..4cabb930433 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -17,4 +17,4 @@
     - if @commit
       .network-graph.gl-bg-white.gl-overflow-scroll.gl-overflow-x-hidden{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
         .text-center.gl-mt-3
-          .spinner.spinner-md
+          .gl-spinner.gl-spinner-md
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 059d6eb28c5..c62853145b6 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -2,80 +2,38 @@
 - @hide_top_links = true
 - page_title    _('New Project')
 - header_title  _("Projects"), dashboard_projects_path
-- active_tab = local_assigns.fetch(:active_tab, 'blank')
+- add_page_specific_style 'page_bundles/new_namespace'
 
 .project-edit-container.gl-mt-5
   .project-edit-errors
     = render 'projects/errors'
 
-  .js-experiment-new-project-creation{ data: { is_ci_cd_available: (ci_cd_projects_available? if Gitlab.ee?), has_errors: @project.errors.any?, new_project_guidelines: brand_new_project_guidelines, push_to_create_project_command: push_to_create_project_command, working_with_projects_help_path: help_page_path("user/project/working_with_projects") } }
+  .js-new-project-creation{ data: { is_ci_cd_available: (ci_cd_projects_available? if Gitlab.ee?).to_s, has_errors: @project.errors.any?.to_s, new_project_guidelines: brand_new_project_guidelines, push_to_create_project_command: push_to_create_project_command, working_with_projects_help_path: help_page_path("user/project/working_with_projects") } }
 
   .row{ 'v-cloak': true }
-    .col-lg-3.profile-settings-sidebar
-      %h4.gl-mt-0
-        = _('New project')
-      %p
-        - among_other_things_link = link_to _('among other things'), help_page_path("user/project/index.md", anchor: "project-features"), target: '_blank'
-        = _('A project is where you house your files (repository), plan your work (issues), and publish your documentation (wiki), %{among_other_things_link}.').html_safe % { among_other_things_link: among_other_things_link }
-      %p
-        = _('All features are enabled for blank projects, from templates, or when importing, but you can disable them afterward in the project settings.')
-      = render_if_exists 'projects/new_ci_cd_banner_external_repo'
-      %p
-        - pages_getting_started_guide = link_to _('Pages getting started guide'), help_page_path("user/project/pages/index", anchor: "getting-started"), target: '_blank'
-        = _('Information about additional Pages templates and how to install them can be found in our %{pages_getting_started_guide}.').html_safe % { pages_getting_started_guide: pages_getting_started_guide }
-      .md
-        = brand_new_project_guidelines
-      %p
-        %strong= _("Tip:")
-        = _("You can also create a project from the command line.")
-
-    .col-lg-9.js-toggle-container
-      %ul.nav.nav-tabs.nav-links.gitlab-tabs{ role: 'tablist' }
-        %li.nav-item{ role: 'presentation' }
-          %a.nav-link.active{ href: '#blank-project-pane', id: 'blank-project-tab', data: { toggle: 'tab', experiment_track_label: 'blank_project' }, role: 'tab' }
-            %span.d-none.d-sm-block= s_('ProjectsNew|Blank project')
-            %span.d-block.d-sm-none= s_('ProjectsNew|Blank')
-        %li.nav-item{ role: 'presentation' }
-          %a.nav-link{ href: '#create-from-template-pane', id: 'create-from-template-tab', data: { toggle: 'tab', experiment_track_label: 'create_from_template' }, role: 'tab' }
-            %span.d-none.d-sm-block.qa-project-create-from-template-tab= s_('ProjectsNew|Create from template')
-            %span.d-block.d-sm-none= s_('ProjectsNew|Template')
-        %li.nav-item{ role: 'presentation' }
-          %a.nav-link{ href: '#import-project-pane', id: 'import-project-tab', data: { toggle: 'tab', experiment_track_label: 'import_project' }, role: 'tab' }
-            %span.d-none.d-sm-block= s_('ProjectsNew|Import project')
-            %span.d-block.d-sm-none= s_('ProjectsNew|Import')
-        = render_if_exists 'projects/new_ci_cd_only_project_tab', active_tab: active_tab
-
-      .tab-content.gitlab-tab-content
-        .tab-pane.js-toggle-container{ id: 'blank-project-pane', class: active_when(active_tab == 'blank'), role: 'tabpanel' }
-          = form_for @project, html: { class: 'new_project' } do |f|
-            = render 'new_project_fields', f: f, project_name_id: "blank-project-name"
-
-        #create-from-template-pane.tab-pane.js-toggle-container.px-0.pb-0{ class: active_when(active_tab == 'template'), role: 'tabpanel' }
-          .card.card-slim.m-4.p-4
+    #blank-project-pane.tab-pane.active
+      = form_for @project, html: { class: 'new_project' } do |f|
+        = render 'new_project_fields', f: f, project_name_id: "blank-project-name"
+
+    #create-from-template-pane.tab-pane
+      .gl-card.gl-my-5
+        .gl-card-body
+          %div
+            - contributing_templates_url = 'https://gitlab.com/gitlab-org/project-templates/contributing'
+            - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: contributing_templates_url }
+            = _('Learn how to %{link_start}contribute to the built-in templates%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+      = form_for @project, html: { class: 'new_project' } do |f|
+        .project-template
+          .form-group
             %div
-              - contributing_templates_url = 'https://gitlab.com/gitlab-org/project-templates/contributing'
-              - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: contributing_templates_url }
-              = _('Learn how to %{link_start}contribute to the built-in templates%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-          = form_for @project, html: { class: 'new_project' } do |f|
-            .project-template
-              .form-group
-                %div
-                  = render 'project_templates', f: f, project: @project
-
-        .tab-pane.import-project-pane.js-toggle-container{ id: 'import-project-pane', class: active_when(active_tab == 'import'), role: 'tabpanel' }
-          - if import_sources_enabled?
-            = render 'import_project_pane', active_tab: active_tab
-          - else
-            .nothing-here-block
-              %h4= s_('ProjectsNew|No import options available')
-              %p= s_('ProjectsNew|Contact an administrator to enable options for importing your project.')
+              = render 'project_templates', f: f, project: @project
 
-        = render_if_exists 'projects/new_ci_cd_only_project_pane', active_tab: active_tab
+    #import-project-pane.tab-pane.js-toggle-container
+      - if import_sources_enabled?
+        = render 'import_project_pane'
+      - else
+        .nothing-here-block
+          %h4= s_('ProjectsNew|No import options available')
+          %p= s_('ProjectsNew|Contact an administrator to enable options for importing your project.')
 
-.save-project-loader.d-none
-  .center
-    %h2
-      .spinner.spinner-md.align-text-bottom
-      = s_('ProjectsNew|Creating project & repository.')
-    %p
-      = s_('ProjectsNew|Please wait a moment, this page will automatically refresh when ready.')
+    = render_if_exists 'projects/new_ci_cd_only_project_pane'
diff --git a/app/views/projects/pipeline_schedules/_tabs.html.haml b/app/views/projects/pipeline_schedules/_tabs.html.haml
index 61f6ad34052..f69041e1eb1 100644
--- a/app/views/projects/pipeline_schedules/_tabs.html.haml
+++ b/app/views/projects/pipeline_schedules/_tabs.html.haml
@@ -2,17 +2,17 @@
   %li{ class: active_when(scope.nil?) }>
     = link_to schedule_path_proc.call(nil) do
       = s_("PipelineSchedules|All")
-      %span.badge.badge-pill.js-totalbuilds-count
+      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm.js-totalbuilds-count
         = number_with_delimiter(all_schedules.count(:id))
 
   %li{ class: active_when(scope == 'active') }>
     = link_to schedule_path_proc.call('active') do
       = s_("PipelineSchedules|Active")
-      %span.badge.badge-pill
+      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm
         = number_with_delimiter(all_schedules.active.count(:id))
 
   %li{ class: active_when(scope == 'inactive') }>
     = link_to schedule_path_proc.call('inactive') do
       = s_("PipelineSchedules|Inactive")
-      %span.badge.badge-pill
+      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm
         = number_with_delimiter(all_schedules.inactive.count(:id))
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
index f0b2349c493..e56a240c487 100644
--- a/app/views/projects/pipelines/_with_tabs.html.haml
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -11,16 +11,16 @@
     %li.js-builds-tab-link
       = link_to builds_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
         = _('Jobs')
-        %span.badge.badge-pill.js-builds-counter= pipeline.total_size
+        %span.badge.badge-pill.gl-badge.badge-muted.sm.js-builds-counter= pipeline.total_size
     - if @pipeline.failed_builds.present?
       %li.js-failures-tab-link
         = link_to failures_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-failures', action: 'failures', toggle: 'tab' }, class: 'failures-tab' do
           = _('Failed Jobs')
-          %span.badge.badge-pill.js-failures-counter= @pipeline.failed_builds.count
+          %span.badge.badge-pill.gl-badge.badge-muted.sm.js-failures-counter= @pipeline.failed_builds.count
     %li.js-tests-tab-link
       = link_to test_report_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-tests', action: 'test_report', toggle: 'tab' }, class: 'test-tab' do
         = s_('TestReports|Tests')
-        %span.badge.badge-pill.js-test-report-badge-counter= @pipeline.test_report_summary.total[:count]
+        %span.badge.badge-pill.gl-badge.badge-muted.sm.js-test-report-badge-counter= @pipeline.test_report_summary.total[:count]
     = render_if_exists "projects/pipelines/tabs_holder", pipeline: @pipeline, project: @project
 
 .tab-content
@@ -83,5 +83,7 @@
   #js-tab-tests.tab-pane
     #js-pipeline-tests-detail{ data: { summary_endpoint: summary_project_pipeline_tests_path(@project, @pipeline, format: :json),
       suite_endpoint: project_pipeline_test_path(@project, @pipeline, suite_name: 'suite', format: :json),
-      blob_path: project_blob_path(@project, @pipeline.sha) } }
+      blob_path: project_blob_path(@project, @pipeline.sha),
+      has_test_report: @pipeline.has_reports?(Ci::JobArtifact.test_reports).to_s,
+      empty_state_image_path: image_path('illustrations/empty-state/empty-test-cases-lg.svg') } }
   = render_if_exists "projects/pipelines/tabs_content", pipeline: @pipeline, project: @project
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 4b0487f4685..42bb8117766 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -1,12 +1,15 @@
 - page_title _('Pipelines')
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/ci_status'
+- artifacts_endpoint_placeholder = ':pipeline_artifacts_id'
 
 = render_if_exists "shared/shared_runners_minutes_limit_flash_message"
 
-#pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
+#pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json, code_quality_walkthrough: params[:code_quality_walkthrough]),
   project_id: @project.id,
   params: params.to_json,
+  "artifacts-endpoint" => downloadable_artifacts_project_pipeline_path(@project, artifacts_endpoint_placeholder, format: :json),
+  "artifacts-endpoint-placeholder" => artifacts_endpoint_placeholder,
   "pipeline-schedule-url" => pipeline_schedules_path(@project),
   "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
   "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
@@ -17,4 +20,5 @@
   "reset-cache-path" => can?(current_user, :admin_pipeline, @project) && reset_cache_project_settings_ci_cd_path(@project),
   "has-gitlab-ci" => has_gitlab_ci?(@project).to_s,
   "add-ci-yml-path" => can?(current_user, :create_pipeline, @project) && @project.present(current_user: current_user).add_ci_yml_path,
-  "suggested-ci-templates" => experiment_suggested_ci_templates.to_json } }
+  "suggested-ci-templates" => experiment_suggested_ci_templates.to_json,
+  "code-quality-page-path" => @project.present(current_user: current_user).add_code_quality_ci_yml_path } }
diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml
index 14de982e239..e92f14fcc63 100644
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -1,55 +1,17 @@
 - breadcrumb_title _('Pipelines')
 - page_title s_('Pipeline|Run pipeline')
-- settings_link = link_to _('CI/CD settings'), project_settings_ci_cd_path(@project)
 
 %h3.page-title
   = s_('Pipeline|Run pipeline')
 %hr
 
-- if Feature.enabled?(:new_pipeline_form, @project, default_enabled: :yaml)
-  #js-new-pipeline{ data: { project_id: @project.id,
-    pipelines_path: project_pipelines_path(@project),
-    config_variables_path: config_variables_namespace_project_pipelines_path(@project.namespace, @project),
-    default_branch: @project.default_branch,
-    ref_param: params[:ref] || @project.default_branch,
-    var_param: params[:var].to_json,
-    file_param: params[:file_var].to_json,
-    project_refs_endpoint: refs_project_path(@project, sort: 'updated_desc'),
-    settings_link: project_settings_ci_cd_path(@project),
-    max_warnings: ::Gitlab::Ci::Warnings::MAX_LIMIT } }
-
-- else
-  = form_for @pipeline, as: :pipeline, url: project_pipelines_path(@project), html: { id: "new-pipeline-form", class: "js-new-pipeline-form js-requires-input" } do |f|
-    = form_errors(@pipeline)
-    = pipeline_warnings(@pipeline)
-    .form-group.row
-      .col-sm-12
-        = f.label :ref, s_('Pipeline|Run for'), class: 'col-form-label'
-        = hidden_field_tag 'pipeline[ref]', params[:ref] || @project.default_branch
-        = dropdown_tag(params[:ref] || @project.default_branch,
-                      options: { toggle_class: 'js-branch-select wide monospace',
-                                  filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: s_("Pipeline|Search branches"),
-                                  data: { selected: params[:ref] || @project.default_branch, field_name: 'pipeline[ref]' } })
-        .form-text.text-muted
-          = s_("Pipeline|Existing branch name or tag")
-
-      .col-sm-12.gl-mt-3.js-ci-variable-list-section
-        %label
-          = s_('Pipeline|Variables')
-        %ul.ci-variable-list
-          - if params[:var]
-            - params[:var].each do |variable|
-              = render 'ci/variables/url_query_variable_row', form_field: 'pipeline', variable: variable
-          - if params[:file_var]
-            - params[:file_var].each do |variable|
-              - variable.push("file")
-              = render 'ci/variables/url_query_variable_row', form_field: 'pipeline', variable: variable
-          = render 'ci/variables/variable_row', form_field: 'pipeline', only_key_value: true
-        .form-text.text-muted
-          = (s_("Pipeline|Specify variable values to be used in this run. The values specified in %{settings_link} will be used by default.") % {settings_link: settings_link}).html_safe
-
-    .form-actions
-      = f.submit s_('Pipeline|Run pipeline'), class: 'btn gl-button btn-confirm gl-mr-3 js-variables-save-button'
-      = link_to _('Cancel'), project_pipelines_path(@project), class: 'btn gl-button btn-default'
-
-  %script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe
+#js-new-pipeline{ data: { project_id: @project.id,
+  pipelines_path: project_pipelines_path(@project),
+  config_variables_path: config_variables_namespace_project_pipelines_path(@project.namespace, @project),
+  default_branch: @project.default_branch,
+  ref_param: params[:ref] || @project.default_branch,
+  var_param: params[:var].to_json,
+  file_param: params[:file_var].to_json,
+  project_refs_endpoint: refs_project_path(@project, sort: 'updated_desc'),
+  settings_link: project_settings_ci_cd_path(@project),
+  max_warnings: ::Gitlab::Ci::Warnings::MAX_LIMIT } }
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 98b1c5adcb5..93b0a525191 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -11,6 +11,10 @@
 
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
   #js-pipeline-header-vue.pipeline-header-container{ data: { full_path: @project.full_path, pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id, pipelines_path: project_pipelines_path(@project) } }
+
+  - if @pipeline.failed? && @pipeline.user_not_verified?
+    #js-cc-validation-required-alert
+
   - if @pipeline.commit.present?
     = render "projects/pipelines/info", commit: @pipeline.commit
 
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index 22bf61b6873..0fa9fb7079b 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -4,7 +4,7 @@
 .js-remove-member-modal
 .row.gl-mt-3
   .col-lg-12
-    - if can_invite_members_for_project?(@project)
+    - if can_invite_members_for_project?(@project) || can_invite_group_for_project?(@project)
       .row
         .col-md-12.col-lg-6.gl-display-flex
           .gl-flex-direction-column.gl-flex-wrap.align-items-baseline
@@ -18,8 +18,15 @@
                   = html_escape(_("Members can be added by project %{i_open}Maintainers%{i_close} or %{i_open}Owners%{i_close}")) % { i_open: '<i>'.html_safe, i_close: '</i>'.html_safe }
         .col-md-12.col-lg-6
           .gl-display-flex.gl-flex-wrap.gl-justify-content-end
-            .js-invite-group-trigger{ data: { classes: 'gl-mt-3 gl-sm-w-auto gl-w-full', display_text: _('Invite a group') } }
-            .js-invite-members-trigger{ data: { variant: 'success', classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3', display_text: _('Invite members') } }
+            - if can_import_members?
+              = link_to _("Import a project"),
+                import_project_project_members_path(@project),
+                class: "btn btn-default btn-md gl-button gl-mt-3 gl-sm-w-auto gl-w-full",
+                title: _("Import members from another project")
+            - if @project.allowed_to_share_with_group?
+              .js-invite-group-trigger{ data: { classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3', display_text: _('Invite a group') } }
+            - if !membership_locked?
+              .js-invite-members-trigger{ data: { variant: 'success', classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3', display_text: _('Invite members') } }
         = render 'projects/invite_members_modal', project: @project
 
     - else
@@ -32,7 +39,7 @@
           %p
             = html_escape(_("Members can be added by project %{i_open}Maintainers%{i_close} or %{i_open}Owners%{i_close}")) % { i_open: '<i>'.html_safe, i_close: '</i>'.html_safe }
 
-    - if !can_invite_members_for_project?(@project) && can_manage_project_members?(@project) && project_can_be_shared?
+    - if Feature.disabled?(:invite_members_group_modal, @project.group) && can_manage_project_members?(@project) && project_can_be_shared?
       - if !membership_locked? && @project.allowed_to_share_with_group?
         %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' }
           %li.nav-tab{ role: 'presentation' }
@@ -75,22 +82,21 @@
             %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @requesters.count
     .tab-content
       #tab-members.tab-pane{ class: ('active' unless groups_tab_active?) }
-        .js-project-members-list{ data: project_members_list_data_attributes(@project, @project_members) }
+        .js-project-members-list{ data: { members_data: project_members_list_data_json(@project, @project_members, { param_name: :page, params: { search_groups: nil } }) } }
           .loading
-            .spinner.spinner-md
-        = paginate @project_members, theme: "gitlab", params: { search_groups: nil }
+            .gl-spinner.gl-spinner-md
       - if show_groups?(@group_links)
         #tab-groups.tab-pane{ class: ('active' if groups_tab_active?) }
-          .js-project-group-links-list{ data: project_group_links_list_data_attributes(@project, @group_links) }
+          .js-project-group-links-list{ data: { members_data: project_group_links_list_data_json(@project, @group_links) } }
             .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
       - if show_invited_members?(@project, @invited_members)
         #tab-invited-members.tab-pane
-          .js-project-invited-members-list{ data: project_members_list_data_attributes(@project, @invited_members) }
+          .js-project-invited-members-list{ data: { members_data: project_members_list_data_json(@project, @invited_members) } }
             .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
       - if show_access_requests?(@project, @requesters)
         #tab-access-requests.tab-pane
-          .js-project-access-requests-list{ data: project_members_list_data_attributes(@project, @requesters) }
+          .js-project-access-requests-list{ data: { members_data: project_members_list_data_json(@project, @requesters) } }
             .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
diff --git a/app/views/projects/project_templates/_template.html.haml b/app/views/projects/project_templates/_template.html.haml
index e2bfd0881b5..827ff62f8c3 100644
--- a/app/views/projects/project_templates/_template.html.haml
+++ b/app/views/projects/project_templates/_template.html.haml
@@ -10,7 +10,7 @@
   .controls.d-flex.align-items-center
     %a.btn.gl-button.btn-default.gl-mr-3{ href: template.preview, rel: 'noopener noreferrer', target: '_blank', data: { track_label: "template_preview", track_property: template.name, track_event: "click_button", track_value: "" } }
       = _("Preview")
-    %label.btn.gl-button.btn-success.template-button.choose-template.gl-mb-0{ for: template.name }
+    %label.btn.gl-button.btn-confirm.template-button.choose-template.gl-mb-0{ for: 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_event: "click_button", track_value: "" } }
       %span{ data: { qa_selector: 'use_template_button' } }
         = _("Use template")
diff --git a/app/views/projects/registry/repositories/index.html.haml b/app/views/projects/registry/repositories/index.html.haml
index bbef5150a62..f56fd7f557d 100644
--- a/app/views/projects/registry/repositories/index.html.haml
+++ b/app/views/projects/registry/repositories/index.html.haml
@@ -12,7 +12,7 @@
     "containers_error_image" => image_path('illustrations/docker-error-state.svg'),
     "repository_url" => escape_once(@project.container_registry_url),
     "registry_host_url_with_port" => escape_once(registry_config.host_port),
-    "expiration_policy_help_page_path" => help_page_path('user/packages/container_registry/index', anchor: 'expiration-policy'),
+    "expiration_policy_help_page_path" => help_page_path('user/packages/container_registry/index.md', anchor: 'cleanup-policy'),
     "garbage_collection_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'container-registry-garbage-collection'),
     "run_cleanup_policies_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'run-the-cleanup-policy-now'),
     "project_path": @project.full_path,
diff --git a/app/views/projects/runners/_group_runners.html.haml b/app/views/projects/runners/_group_runners.html.haml
index b37b530c33f..5d737bb3901 100644
--- a/app/views/projects/runners/_group_runners.html.haml
+++ b/app/views/projects/runners/_group_runners.html.haml
@@ -13,7 +13,7 @@
     %br
     %br
     - if @project.group_runners_enabled?
-      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn gl-button btn-warning-secondary', method: :post do
+      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn gl-button btn-default', method: :post do
         = _('Disable group runners')
     - else
       = link_to toggle_group_runners_project_runners_path(@project), class: 'btn gl-button btn-confirm-secondary', method: :post do
diff --git a/app/views/projects/runners/_shared_runners.html.haml b/app/views/projects/runners/_shared_runners.html.haml
index fccfca38013..3df4f3a0bd0 100644
--- a/app/views/projects/runners/_shared_runners.html.haml
+++ b/app/views/projects/runners/_shared_runners.html.haml
@@ -1,23 +1,6 @@
-- isVueifySharedRunnersToggleEnabled = Feature.enabled?(:vueify_shared_runners_toggle, @project)
+= render 'shared/runners/shared_runners_description'
 
-= render layout: 'shared/runners/shared_runners_description' do
-  - if !isVueifySharedRunnersToggleEnabled
-    %br
-    %br
-    - if @project.group&.shared_runners_setting == 'disabled_and_unoverridable'
-      %h5.gl-text-red-500
-        = _('Shared runners disabled on group level')
-    - else
-      - if @project.shared_runners_enabled?
-        = link_to toggle_shared_runners_project_runners_path(@project), class: 'btn gl-button btn-warning-secondary', method: :post do
-          = _('Disable shared runners')
-      - else
-        = link_to toggle_shared_runners_project_runners_path(@project), class: 'btn gl-button btn-confirm', method: :post do
-          = _('Enable shared runners')
-      &nbsp; for this project
-
-- if isVueifySharedRunnersToggleEnabled
-  #toggle-shared-runners-form{ data: toggle_shared_runners_settings_data(@project) }
+#toggle-shared-runners-form{ data: toggle_shared_runners_settings_data(@project) }
 
 - if @shared_runners_count == 0
   = _('This GitLab instance does not provide any shared runners yet. Instance administrators can register shared runners in the admin area.')
diff --git a/app/views/projects/runners/edit.html.haml b/app/views/projects/runners/edit.html.haml
index 77150715158..e87c52ff1a8 100644
--- a/app/views/projects/runners/edit.html.haml
+++ b/app/views/projects/runners/edit.html.haml
@@ -1,4 +1,7 @@
-- page_title _('Edit'), "#{@runner.description} ##{@runner.id}", _('Runners')
+- breadcrumb_title _('Edit')
+- page_title _('Edit'), "##{@runner.id} (#{@runner.short_sha})"
+- add_to_breadcrumbs _('CI/CD Settings'), project_settings_ci_cd_path(@project)
+- add_to_breadcrumbs "#{@runner.short_sha}", project_runner_path(@project, @runner)
 
 %h2.page-title
   = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
diff --git a/app/views/projects/runners/show.html.haml b/app/views/projects/runners/show.html.haml
new file mode 100644
index 00000000000..cb7984729c8
--- /dev/null
+++ b/app/views/projects/runners/show.html.haml
@@ -0,0 +1,3 @@
+- add_to_breadcrumbs _('CI/CD Settings'), project_settings_ci_cd_path(@project)
+
+= render 'shared/runners/runner_details', runner: @runner
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index 5e0f24cea21..be9bd3dfc01 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -14,7 +14,7 @@
         method: :post, class: "gl-button btn btn-confirm"
   - else
     - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'archiving-a-project') }
-    %p= _("Archiving the project will make it entirely read only. It is hidden from the dashboard and doesn't show up 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 }
+    %p= _("Archiving the project will make it entirely read-only. It is hidden from the dashboard and doesn't show up in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
     = link_to _('Archive project'), archive_project_path(@project),
       data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link' },
       method: :post, class: "gl-button btn btn-warning"
diff --git a/app/views/projects/settings/access_tokens/index.html.haml b/app/views/projects/settings/access_tokens/index.html.haml
index 01f3e441eef..1bf252b6282 100644
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
@@ -9,13 +9,13 @@
     %h4.gl-mt-0
       = page_title
     %p
+    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/project_access_tokens') }
     - if current_user.can?(:create_resource_access_tokens, @project)
-      = _('You can generate an access token scoped to this project for each application to use the GitLab API.')
-      -# Commented out until https://gitlab.com/gitlab-org/gitlab/-/issues/219551 is fixed
-      -# %p
-      -#   = _('You can also use project access tokens to authenticate against Git over HTTP.')
+      = _('Generate project access tokens scoped to this project for your applications that need access to the GitLab API.')
+      %p
+        = _('You can also use project access tokens with Git to authenticate over HTTP(S). %{link_start}Learn more.%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
     - else
-      = _('Project access token creation is disabled in this group. You can still use and manage existing tokens.')
+      = _('Project access token creation is disabled in this group. You can still use and manage existing tokens. %{link_start}Learn more.%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
       %p
       - root_group = @project.group.root_ancestor
       - if current_user.can?(:admin_group, root_group)
@@ -23,7 +23,6 @@
         - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: group_settings_link }
         = _('You can enable project access token creation in %{link_start}group settings%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
-
   .col-lg-8
     - if @new_project_access_token
       = render 'shared/access_tokens/created_container',
diff --git a/app/views/projects/settings/operations/_configuration_banner.html.haml b/app/views/projects/settings/operations/_configuration_banner.html.haml
index 8551aa5380e..6fa6b23b0da 100644
--- a/app/views/projects/settings/operations/_configuration_banner.html.haml
+++ b/app/views/projects/settings/operations/_configuration_banner.html.haml
@@ -14,7 +14,7 @@
         .col-sm-10
           %p.text-success.gl-mt-3
             = s_('PrometheusService|GitLab manages Prometheus on your clusters.')
-          = link_to s_('PrometheusService|Manage clusters'), project_clusters_path(project), class: 'btn'
+          = link_to s_('PrometheusService|Manage clusters'), project_clusters_path(project), class: 'gl-button btn btn-default'
       - else
         .col-sm-2
           = image_tag 'illustrations/monitoring/loading.svg'
diff --git a/app/views/projects/settings/operations/_error_tracking.html.haml b/app/views/projects/settings/operations/_error_tracking.html.haml
index 1e77f37ebb4..4ef9e1bd6fb 100644
--- a/app/views/projects/settings/operations/_error_tracking.html.haml
+++ b/app/views/projects/settings/operations/_error_tracking.html.haml
@@ -9,8 +9,8 @@
     %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
       = _('Expand')
     %p
-      = _('To link Sentry to GitLab, enter your Sentry URL and Auth Token.')
-      = link_to _('More information'), help_page_path('operations/error_tracking'), target: '_blank', rel: 'noopener noreferrer'
+      = _('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
     .js-error-tracking-form{ data: { list_projects_endpoint: project_error_tracking_projects_path(@project, format: :json),
         operations_settings_endpoint: project_settings_operations_path(@project),
diff --git a/app/views/projects/settings/operations/show.html.haml b/app/views/projects/settings/operations/show.html.haml
index 73722a5a789..af183046e1e 100644
--- a/app/views/projects/settings/operations/show.html.haml
+++ b/app/views/projects/settings/operations/show.html.haml
@@ -1,6 +1,7 @@
 - @content_class = 'limit-container-width' unless fluid_layout
-- page_title _('Operations Settings')
-- breadcrumb_title _('Operations Settings')
+- title = Feature.enabled?(:sidebar_refactor, current_user, default_enabled: :yaml) ? _('Monitor Settings') : _('Operations Settings')
+- page_title title
+- breadcrumb_title title
 
 = render 'projects/settings/operations/alert_management'
 = render 'projects/settings/operations/incidents'
diff --git a/app/views/projects/settings/packages_and_registries/show.html.haml b/app/views/projects/settings/packages_and_registries/show.html.haml
new file mode 100644
index 00000000000..561ac7b347d
--- /dev/null
+++ b/app/views/projects/settings/packages_and_registries/show.html.haml
@@ -0,0 +1,16 @@
+- breadcrumb_title _('Packages & Registries')
+- page_title _('Packages & Registries')
+- @content_class = 'limit-container-width' unless fluid_layout
+- expanded = true
+
+%section.settings.no-animate#js-registry-policies{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
+      = _("Clean up image tags")
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _("Save space and find images in the Container Registry. Remove unneeded tags and keep only the ones you want.")
+      = link_to _('How does cleanup work?'), help_page_path('user/packages/container_registry/index', anchor: 'cleanup-policy'), target: '_blank', rel: 'noopener noreferrer'
+  .settings-content
+    = render 'projects/registry/settings/index'
diff --git a/app/views/projects/sidebar/_issues_service_desk.html.haml b/app/views/projects/sidebar/_issues_service_desk.html.haml
deleted file mode 100644
index 2730fe37f28..00000000000
--- a/app/views/projects/sidebar/_issues_service_desk.html.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-= nav_link(controller: :issues, action: :service_desk ) do
-  = link_to service_desk_project_issues_path(@project), title: 'Service Desk' do
-    = _('Service Desk')
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 726ab7d2372..a296394a2e0 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -6,6 +6,6 @@
 #js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id} }
 
 .row-content-block.top-block.content-component-block
-  = render 'award_emoji/awards_block', awardable: @snippet, inline: true
+  = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet)
 
 #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index 1072d5bce06..83a3cac487f 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -8,7 +8,7 @@
     = link_to tag.name, project_tag_path(@project, tag.name), class: 'item-title ref-name'
 
     - if protected_tag?(@project, tag)
-      %span.badge.badge-success.gl-ml-2
+      %span.badge.badge-success.gl-ml-2.gl-badge.sm.badge-pill
         = s_('TagsPage|protected')
 
     - if tag.message.present?
@@ -42,5 +42,5 @@
 
     - if can?(current_user, :admin_tag, @project)
       = link_to edit_project_tag_release_path(@project, tag.name), class: 'btn gl-button btn-default btn-icon btn-edit has-tooltip', title: s_('TagsPage|Edit release notes'), data: { container: "body" } do
-        = sprite_icon("pencil")
+        = sprite_icon('pencil', css_class: 'gl-icon')
       = render 'projects/buttons/remove_tag', project: @project, tag: tag
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 229f13d0ff3..79205a51d71 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -9,28 +9,12 @@
       = s_('TagsPage|Tags give the ability to mark specific points in history as being important')
 
     .nav-controls
-      - unless Gitlab::Ci::Features.gldropdown_tags_enabled?
-        = form_tag(filter_tags_path, method: :get) do
-          = search_field_tag :search, params[:search], { placeholder: s_('TagsPage|Filter by tag name'), id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
-
-        .dropdown
-          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown'} }
-            %span.light
-              = tags_sort_options_hash[@sort]
-            = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
-          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
-            %li.dropdown-header
-              = s_('TagsPage|Sort by')
-            - tags_sort_options_hash.each do |value, title|
-              %li
-                = link_to title, filter_tags_path(sort: value), class: ("is-active" if @sort == value)
-      - else
-        #js-tags-sort-dropdown{ data: { filter_tags_path: filter_tags_path, sort_options: tags_sort_options_hash.to_json } }
+      #js-tags-sort-dropdown{ data: { filter_tags_path: filter_tags_path, sort_options: tags_sort_options_hash.to_json } }
+      = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn gl-button btn-default btn-icon has-tooltip gl-ml-auto' do
+        = sprite_icon('rss', css_class: 'gl-icon qa-rss-icon')
       - if can?(current_user, :admin_tag, @project)
         = link_to new_project_tag_path(@project), class: 'btn gl-button btn-confirm', data: { qa_selector: "new_tag_button" } do
           = s_('TagsPage|New tag')
-      = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn gl-button btn-default btn-icon d-none d-sm-inline-block has-tooltip' do
-        = sprite_icon('rss', css_class: 'qa-rss-icon')
 
   = render_if_exists 'projects/commits/mirror_status'
 
diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml
index 2ef1891089f..fe00772d1d6 100644
--- a/app/views/projects/tags/new.html.haml
+++ b/app/views/projects/tags/new.html.haml
@@ -51,7 +51,7 @@
       = render layout: 'shared/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do
         = render 'shared/zen', attr: :release_description, classes: 'note-textarea', placeholder: s_('TagsPage|Write your release notes or drag files here…'), current_text: @release_description, qa_selector: 'release_notes_field'
         = render 'shared/notes/hints'
-  .form-actions
-    = button_tag s_('TagsPage|Create tag'), class: 'gl-button btn btn-confirm', data: { qa_selector: "create_tag_button" }
+  .form-actions.gl-display-flex
+    = button_tag s_('TagsPage|Create tag'), class: 'gl-button btn btn-confirm gl-mr-3', data: { qa_selector: "create_tag_button" }
     = link_to s_('TagsPage|Cancel'), project_tags_path(@project), class: 'gl-button btn btn-default btn-cancel'
 %script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe
diff --git a/app/views/projects/tags/releases/edit.html.haml b/app/views/projects/tags/releases/edit.html.haml
index f181212b328..88594209c3b 100644
--- a/app/views/projects/tags/releases/edit.html.haml
+++ b/app/views/projects/tags/releases/edit.html.haml
@@ -14,6 +14,6 @@
     = render 'shared/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here…"
     = render 'shared/notes/hints'
   .error-alert
-  .gl-mt-3
-    = f.submit 'Save changes', class: 'btn gl-button btn-confirm'
+  .gl-mt-5.gl-display-flex
+    = f.submit 'Save changes', class: 'btn gl-button btn-confirm gl-mr-3'
     = link_to "Cancel", project_tag_path(@project, @tag.name), class: "btn gl-button btn-default btn-cancel"
diff --git a/app/views/projects/triggers/_trigger.html.haml b/app/views/projects/triggers/_trigger.html.haml
index 2def6c06458..081afacdaa6 100644
--- a/app/views/projects/triggers/_trigger.html.haml
+++ b/app/views/projects/triggers/_trigger.html.haml
@@ -30,8 +30,8 @@
   %td.text-right.trigger-actions
     - revoke_trigger_confirmation = "By revoking a trigger you will break any processes making use of it. Are you sure?"
     - if can?(current_user, :admin_trigger, trigger)
-      = link_to edit_project_trigger_path(@project, trigger), method: :get, title: "Edit", class: "gl-button btn btn-default btn-sm" do
+      = link_to edit_project_trigger_path(@project, trigger), method: :get, title: "Edit", class: "gl-button btn btn-default btn-icon" do
         = sprite_icon('pencil')
     - if can?(current_user, :manage_trigger, trigger)
-      = link_to project_trigger_path(@project, trigger), data: { confirm: revoke_trigger_confirmation, testid: 'trigger_revoke_button' }, method: :delete, title: "Revoke", class: "gl-button btn btn-default btn-sm btn-trigger-revoke" do
+      = link_to project_trigger_path(@project, trigger), data: { confirm: revoke_trigger_confirmation, testid: 'trigger_revoke_button' }, method: :delete, title: "Revoke", class: "gl-button btn btn-default btn-icon btn-trigger-revoke gl-ml-3" do
         = sprite_icon('remove')