Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

104 files changed, 338 insertions, 639 deletions

diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 0d3049cd9a2..f5eea9aa9c6 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -3,11 +3,9 @@
 - max_project_topic_length = 15
 - emails_disabled = @project.emails_disabled?
 
-= render 'projects/invite_members_modal', project: @project
-
 .project-home-panel.js-show-on-project-root.gl-my-5{ class: [("empty-project" if empty_repo)] }
-  .row.gl-mb-3
-    .home-panel-title-row.col-md-12.col-lg-6.d-flex
+  .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-sm-flex-direction-column.gl-mb-3
+    .home-panel-title-row.gl-display-flex
       .avatar-container.rect-avatar.s64.home-panel-avatar.gl-flex-shrink-0.gl-w-11.gl-h-11.gl-mr-3.float-none
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'image')
       .d-flex.flex-column.flex-wrap.align-items-baseline
@@ -43,16 +41,13 @@
                   = _("+ %{count} more") % { count: @project.count_of_extra_topics_not_shown }
 
 
-    .project-repo-buttons.col-md-12.col-lg-6.d-inline-flex.flex-wrap.justify-content-lg-end
+    .project-repo-buttons.gl-display-flex.gl-justify-content-md-end.gl-align-items-start.gl-flex-wrap.gl-mt-5
       - if current_user
-        .d-inline-flex
-          - if Feature.enabled?(:vue_notification_dropdown, @project, default_enabled: :yaml)
-            - if @notification_setting
-              .js-vue-notification-dropdown{ data: { button_size: "small", disabled: emails_disabled, 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, container_class: 'gl-mr-3 gl-mt-5 gl-vertical-align-top' } }
-          - else
-            = render 'shared/notifications/new_button', notification_setting: @notification_setting, btn_class: 'btn-xs', dropdown_container_class: 'gl-mr-3', emails_disabled: emails_disabled
+        .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.d-inline-flex
+      .count-buttons.gl-display-flex.gl-align-items-flex-start
         = render 'projects/buttons/star'
         = render 'projects/buttons/fork'
 
diff --git a/app/views/projects/_invite_members_link.html.haml b/app/views/projects/_invite_members_link.html.haml
deleted file mode 100644
index 95cfc75d955..00000000000
--- a/app/views/projects/_invite_members_link.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-- return unless can_invite_members_for_project?(@project)
-
-%li
-  .js-invite-members-trigger{ data: { icon: 'plus', classes: 'gl-text-decoration-none! gl-shadow-none!', display_text: _('Invite team members') } }
diff --git a/app/views/projects/_invite_members_modal.html.haml b/app/views/projects/_invite_members_modal.html.haml
index b1bba5b59ca..00f823b9016 100644
--- a/app/views/projects/_invite_members_modal.html.haml
+++ b/app/views/projects/_invite_members_modal.html.haml
@@ -2,6 +2,6 @@
   .js-invite-members-modal{ data: { id: project.id,
     name: project.name,
     is_project: 'true',
-    access_levels: GroupMember.access_level_roles.to_json,
+    access_levels: ProjectMember.access_level_roles.to_json,
     default_access_level: Gitlab::Access::GUEST,
     help_link: help_page_url('user/permissions') } }
diff --git a/app/views/projects/_merge_request_merge_checks_settings.html.haml b/app/views/projects/_merge_request_merge_checks_settings.html.haml
index b099eb6800e..694d192d079 100644
--- a/app/views/projects/_merge_request_merge_checks_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_checks_settings.html.haml
@@ -2,24 +2,22 @@
 
 .form-group
   %b= s_('ProjectSettings|Merge checks')
-  %p.text-secondary= s_('ProjectSettings|These checks must pass before merge requests can be merged')
+  %p.text-secondary= s_('ProjectSettings|These checks must pass before merge requests can be merged.')
   .form-check.mb-2.builds-feature
     = form.check_box :only_allow_merge_if_pipeline_succeeds, class: 'form-check-input'
     = form.label :only_allow_merge_if_pipeline_succeeds, class: 'form-check-label' do
       = s_('ProjectSettings|Pipelines must succeed')
       .text-secondary
-        = s_('ProjectSettings|Pipelines need to be configured to enable this feature.')
-        = link_to sprite_icon('question-o'),
-          help_page_path('ci/merge_request_pipelines/index.md',
-          anchor: 'pipelines-for-merge-requests'),
-          target: '_blank'
+        - configuring_pipelines_for_merge_requests_help_link_url = help_page_path('ci/merge_request_pipelines/index.md', anchor: 'configuring-pipelines-for-merge-requests')
+        - configuring_pipelines_for_merge_requests_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: configuring_pipelines_for_merge_requests_help_link_url }
+        = s_('ProjectSettings|To enable this feature, configure pipelines. %{link_start}How to configure pipelines for merge requests?%{link_end}').html_safe % { link_start: configuring_pipelines_for_merge_requests_help_link_start, link_end: '</a>'.html_safe }
   .form-check.mb-2
     .gl-pl-6
       = form.check_box :allow_merge_on_skipped_pipeline, class: 'form-check-input'
       = form.label :allow_merge_on_skipped_pipeline, class: 'form-check-label' do
         = s_('ProjectSettings|Skipped pipelines are considered successful')
         .text-secondary
-          = s_('ProjectSettings|This introduces the risk of merging changes that will not pass the pipeline.')
+          = s_('ProjectSettings|Introduces the risk of merging changes that do not pass the pipeline.')
   .form-check.mb-2
     = form.check_box :only_allow_merge_if_all_discussions_are_resolved, class: 'form-check-input', data: { qa_selector: 'allow_merge_if_all_discussions_are_resolved_checkbox' }
     = form.label :only_allow_merge_if_all_discussions_are_resolved, class: 'form-check-label' do
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 1be7f7bb418..f55d840e14b 100644
--- a/app/views/projects/_merge_request_merge_method_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_method_settings.html.haml
@@ -2,32 +2,32 @@
 
 .form-group
   %b= s_('ProjectSettings|Merge method')
-  %p.text-secondary= s_('ProjectSettings|This will dictate the commit history when you merge a merge request')
+  %p.text-secondary= s_('ProjectSettings|Determine what happens to the commit history when you merge a merge request.')
   .form-check.mb-2
     = form.radio_button :merge_method, :merge, class: "js-merge-method-radio form-check-input"
     = label_tag :project_merge_method_merge, class: 'form-check-label' do
       = s_('ProjectSettings|Merge commit')
       .text-secondary
-        = s_('ProjectSettings|Every merge creates a merge commit')
+        = s_('ProjectSettings|Every merge creates a merge commit.')
 
   .form-check.mb-2
     = form.radio_button :merge_method, :rebase_merge, class: "js-merge-method-radio form-check-input"
     = label_tag :project_merge_method_rebase_merge, class: 'form-check-label' do
       = s_('ProjectSettings|Merge commit with semi-linear history')
       .text-secondary
-        = s_('ProjectSettings|Every merge creates a merge commit')
+        = s_('ProjectSettings|Every merge creates a merge commit.')
         %br
-        = s_('ProjectSettings|Fast-forward merges only')
+        = s_('ProjectSettings|Fast-forward merges only.')
         %br
-        = s_('ProjectSettings|When conflicts arise the user is given the option to rebase')
+        = 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 qa-radio-button-merge-ff form-check-input"
+    = form.radio_button :merge_method, :ff, class: "js-merge-method-radio form-check-input", data: { qa_selector: 'merge_ff_radio_button' }
     = label_tag :project_merge_method_ff, class: 'form-check-label' do
       = s_('ProjectSettings|Fast-forward merge')
       .text-secondary
-        = s_('ProjectSettings|No merge commits are created')
+        = s_('ProjectSettings|No merge commits are created.')
         %br
-        = s_('ProjectSettings|Fast-forward merges only')
+        = s_('ProjectSettings|Fast-forward merges only.')
         %br
-        = s_('ProjectSettings|When conflicts arise the user is given the option to rebase')
+        = s_('ProjectSettings|When there is a merge conflict, the user is given the option to rebase.')
diff --git a/app/views/projects/_merge_request_merge_options_settings.html.haml b/app/views/projects/_merge_request_merge_options_settings.html.haml
index 80dabeceeb0..20f3933d0a8 100644
--- a/app/views/projects/_merge_request_merge_options_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_options_settings.html.haml
@@ -2,7 +2,7 @@
 
 .form-group#project-merge-options{ data: { project_full_path: @project.full_path } }
   %b= s_('ProjectSettings|Merge options')
-  %p.text-secondary= s_('ProjectSettings|Additional merge request capabilities that influence how and when merges will be performed')
+  %p.text-secondary= s_('ProjectSettings|Additional settings that influence how and when merges are done.')
   = render_if_exists 'projects/merge_pipelines_settings', form: form
   = render_if_exists 'projects/merge_trains_settings', form: form
   .form-check.mb-2
@@ -12,10 +12,10 @@
   .form-check.mb-2
     = form.check_box :printing_merge_request_link_enabled, class: 'form-check-input'
     = form.label :printing_merge_request_link_enabled, class: 'form-check-label' do
-      = s_('ProjectSettings|Show link to create/view merge request when pushing from the command line')
+      = s_('ProjectSettings|Show link to create or view a merge request when pushing from the command line')
   .form-check.mb-2
     = form.check_box :remove_source_branch_after_merge, class: 'form-check-input'
     = form.label :remove_source_branch_after_merge, class: 'form-check-label' do
-      = s_("ProjectSettings|Enable 'Delete source branch' option by default")
+      = s_('ProjectSettings|Enable "Delete source branch" option by default')
       .descr.text-secondary
-        = s_('ProjectSettings|Existing merge requests and protected branches are not affected')
+        = s_('ProjectSettings|Existing merge requests and protected branches are not affected.')
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 31a85a204be..12ab905479a 100644
--- a/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
@@ -3,15 +3,13 @@
 .form-group
   %b= s_('ProjectSettings|Merge suggestions')
   %p.text-secondary
-    = s_('ProjectSettings|The commit message used to apply merge request suggestions')
-    = link_to sprite_icon('question-o'),
-      help_page_path('user/discussions/index.md',
-      anchor: 'configure-the-commit-message-for-applied-suggestions'),
-      target: '_blank'
+    - 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_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
-    = form.text_field :suggestion_commit_message, class: 'form-control gl-form-input mb-2', placeholder: Gitlab::Suggestions::CommitMessage::DEFAULT_SUGGESTION_COMMIT_MESSAGE
+    = form.text_field :suggestion_commit_message, class: 'form-control mb-2', placeholder: Gitlab::Suggestions::CommitMessage::DEFAULT_SUGGESTION_COMMIT_MESSAGE
     %p.form-text.text-muted
-      = s_('ProjectSettings|The variables GitLab supports:')
+      = s_('ProjectSettings|Supported variables:')
       - Gitlab::Suggestions::CommitMessage::PLACEHOLDERS.keys.each do |placeholder|
         %code
           = "%{#{placeholder}}".html_safe
diff --git a/app/views/projects/_merge_request_squash_options_settings.html.haml b/app/views/projects/_merge_request_squash_options_settings.html.haml
index a5dbfeb16d8..61ffd4814f1 100644
--- a/app/views/projects/_merge_request_squash_options_settings.html.haml
+++ b/app/views/projects/_merge_request_squash_options_settings.html.haml
@@ -4,7 +4,7 @@
   .form-group
     %b= s_('ProjectSettings|Squash commits when merging')
     %p.text-secondary
-      = s_('ProjectSettings|Set the default behavior and availability of this option in merge requests. Changes made are also applied to existing merge requests.')
+      = s_('ProjectSettings|Set the default behavior of this option in merge requests. Changes to this are also applied to existing merge requests.')
       = link_to "What is squashing?",
         help_page_path('user/project/merge_requests/squash_and_merge.md'),
         target: '_blank'
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 41992ee5ea9..8b1bf37ff10 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: "" }
+    = 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 }
   .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
+    = f.text_field :path, placeholder: "my-awesome-project", class: "form-control", 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 }
@@ -55,7 +55,7 @@
     %div{ :class => "col-sm-12" }
       .form-check
         - experiment(:new_project_readme, actor: current_user) do |e|
-          = check_box_tag 'project[initialize_with_readme]', '1', e.run, class: 'form-check-input qa-initialize-with-readme-checkbox', data: { track_label: "#{track_label}", track_event: "activate_form_input", track_property: "init_with_readme", track_value: "" }
+          = check_box_tag 'project[initialize_with_readme]', '1', e.run, class: 'form-check-input', data: { qa_selector: "initialize_with_readme_checkbox", track_label: "#{track_label}", track_event: "activate_form_input", track_property: "init_with_readme", track_value: "" }
         = label_tag 'project[initialize_with_readme]', class: 'form-check-label' do
           .option-title
             %strong= s_('ProjectsNew|Initialize repository with a README')
diff --git a/app/views/projects/_new_project_push_tip.html.haml b/app/views/projects/_new_project_push_tip.html.haml
deleted file mode 100644
index a63b4bed9de..00000000000
--- a/app/views/projects/_new_project_push_tip.html.haml
+++ /dev/null
@@ -1,11 +0,0 @@
-.push-to-create-popover
-  %p
-    = label_tag(:push_to_create_tip, _("Private projects can be created in your personal namespace with:"), class: "weight-normal")
-
-  %p.input-group.project-tip-command
-    %span
-      = text_field_tag :push_to_create_tip, push_to_create_project_command, class: "js-select-on-focus form-control monospace", readonly: true, aria: { label: _("Push project from command line") }
-    %span.input-group-append
-      = clipboard_button(text: push_to_create_project_command, title: _("Copy command"), class: 'input-group-text', placement: "right")
-  %p
-    = link_to("What does this command do?", help_page_path("user/project/working_with_projects", anchor: "push-to-create-a-new-project"), target: "_blank")
diff --git a/app/views/projects/_service_desk_settings.html.haml b/app/views/projects/_service_desk_settings.html.haml
index 0998cd480d3..53b9e7f3d65 100644
--- a/app/views/projects/_service_desk_settings.html.haml
+++ b/app/views/projects/_service_desk_settings.html.haml
@@ -1,5 +1,5 @@
 - expanded = expanded_by_default?
-%section.settings.js-service-desk-setting-wrapper.no-animate#js-service-desk{ class: ('expanded' if expanded) }
+%section.settings.js-service-desk-setting-wrapper.no-animate#js-service-desk{ class: ('expanded' if expanded), data: { qa_selector: 'service_desk_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Service Desk')
     %button.btn.gl-button.js-settings-toggle
diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml
index b363f0d4325..3ebac785d55 100644
--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
@@ -18,7 +18,7 @@
     .tree-controls<
       = link_to download_project_job_artifacts_path(@project, @build),
         rel: 'nofollow', download: '', class: 'gl-button btn btn-default download' do
-        = sprite_icon('download')
+        = sprite_icon('download', css_class: 'gl-mr-2')
         Download artifacts archive
 
   .tree-content-holder
diff --git a/app/views/projects/blame/_age_map_legend.html.haml b/app/views/projects/blame/_age_map_legend.html.haml
deleted file mode 100644
index 533dc20ffb3..00000000000
--- a/app/views/projects/blame/_age_map_legend.html.haml
+++ /dev/null
@@ -1,12 +0,0 @@
-%span.left-label Newer
-%span.legend-box.legend-box-0
-%span.legend-box.legend-box-1
-%span.legend-box.legend-box-2
-%span.legend-box.legend-box-3
-%span.legend-box.legend-box-4
-%span.legend-box.legend-box-5
-%span.legend-box.legend-box-6
-%span.legend-box.legend-box-7
-%span.legend-box.legend-box-8
-%span.legend-box.legend-box-9
-%span.right-label Older
diff --git a/app/views/projects/blame/_blame_group.html.haml b/app/views/projects/blame/_blame_group.html.haml
deleted file mode 100644
index e9967814833..00000000000
--- a/app/views/projects/blame/_blame_group.html.haml
+++ /dev/null
@@ -1,26 +0,0 @@
-%tr
-  %td.blame-commit{ class: commit_data.age_map_class }
-    .commit
-      = commit_data.author_avatar
-      .commit-row-title
-        %span.item-title.str-truncated-100
-          = commit_data.commit_link
-        %span
-          = commit_data.project_blame_link
-        &nbsp;
-      .light
-        = commit_data.commit_author_link
-        = _('committed')
-        #{commit_data.time_ago_tooltip}
-  %td.line-numbers
-    - line_count = blame_group[:lines].count
-    - (current_line...(current_line + line_count)).each do |i|
-      %a.diff-line-num{ href: "#L#{i}", id: "L#{i}", 'data-line-number' => i }
-        = link_icon
-        = i
-      \
-  %td.lines
-    %pre.code.highlight
-      %code
-        - blame_group[:lines].each do |line|
-          #{line}
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index 2f3d0660caa..cba63d5e6d6 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -6,18 +6,56 @@
 
   .file-holder
     = render "projects/blob/header", blob: @blob, blame: true
+
     .file-blame-legend
-      = render 'age_map_legend'
+      %span.left-label Newer
+      %span.legend-box.legend-box-0
+      %span.legend-box.legend-box-1
+      %span.legend-box.legend-box-2
+      %span.legend-box.legend-box-3
+      %span.legend-box.legend-box-4
+      %span.legend-box.legend-box-5
+      %span.legend-box.legend-box-6
+      %span.legend-box.legend-box-7
+      %span.legend-box.legend-box-8
+      %span.legend-box.legend-box-9
+      %span.right-label Older
+
     .table-responsive.file-content.blame.code.js-syntax-highlight
       %table
         - current_line = 1
         - @blame.groups.each do |blame_group|
           - commit_data = @blame.commit_data(blame_group[:commit])
+          - line_count = blame_group[:lines].count
+
+          %tr
+            %td.blame-commit{ class: commit_data.age_map_class }
+              .commit
+                = commit_data.author_avatar
+
+                .commit-row-title
+                  %span.item-title.str-truncated-100
+                    = commit_data.commit_link
+                  %span
+                    = commit_data.project_blame_link
+                  &nbsp;
+
+                .light
+                  = commit_data.commit_author_link
+                  = _('committed')
+                  #{commit_data.time_ago_tooltip}
+
+            %td.line-numbers
+              - (current_line...(current_line + line_count)).each do |i|
+                %a.diff-line-num.gl-justify-content-end{ href: "#L#{i}", id: "L#{i}", 'data-line-number' => i, class: "gl-display-flex!" }
+                  = link_icon
+                  = i
+                \
 
-          = render 'blame_group',
-            blame_group: blame_group,
-            current_line: current_line,
-            link_icon: link_icon,
-            commit_data: commit_data
+            %td.lines
+              %pre.code.highlight
+                %code
+                  - blame_group[:lines].each do |line|
+                    #{line}
 
-          - current_line += blame_group[:lines].count
+          - current_line += line_count
diff --git a/app/views/projects/blob/_template_selectors.html.haml b/app/views/projects/blob/_template_selectors.html.haml
index 70a4202a5d0..717c03ad27d 100644
--- a/app/views/projects/blob/_template_selectors.html.haml
+++ b/app/views/projects/blob/_template_selectors.html.haml
@@ -11,7 +11,7 @@
       = 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) } } )
-    - if experiment_enabled?(:ci_syntax_templates, subject: current_user)
+    - 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
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index f400c7de5eb..b68c75701b9 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -17,7 +17,7 @@
           %br
           .dropzone-alerts.gl-alert.gl-alert-danger.gl-mb-5.data{ style: "display:none" }
 
-          = render 'shared/new_commit_form', placeholder: placeholder
+          = render 'shared/new_commit_form', placeholder: placeholder, ref: local_assigns[:ref]
 
           .form-actions
             = button_tag class: 'btn gl-button btn-success btn-upload-file', id: 'submit-all', type: 'button' do
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index fcf073e1e09..6f86ccd7824 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -35,8 +35,8 @@
       .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-5
         %svg.s24
 
-    - if merge_project && create_mr_button?(@repository.root_ref, branch.name)
-      = link_to create_mr_path(@repository.root_ref, branch.name), class: 'gl-button btn btn-default' do
+    - if merge_project && create_mr_button?(from: @repository.root_ref, to: branch.name, source_project: @project, target_project: @project)
+      = link_to create_mr_path(from: @repository.root_ref, to: branch.name, source_project: @project, target_project: @project), class: 'gl-button btn btn-default' do
         = _('Merge request')
 
     - if branch.name != @repository.root_ref
diff --git a/app/views/projects/buttons/_clone.html.haml b/app/views/projects/buttons/_clone.html.haml
index 0ec47744fc9..ee195e69a98 100644
--- a/app/views/projects/buttons/_clone.html.haml
+++ b/app/views/projects/buttons/_clone.html.haml
@@ -2,7 +2,7 @@
 - dropdown_class = local_assigns.fetch(:dropdown_class, '')
 
 .git-clone-holder.js-git-clone-holder
-  %a#clone-dropdown.gl-button.btn.btn-info.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
+  %a#clone-dropdown.gl-button.btn.btn-confirm.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
     %span.gl-mr-2.js-clone-dropdown-label
       = _('Clone')
     = sprite_icon("chevron-down", css_class: "icon")
@@ -11,19 +11,19 @@
       %li{ class: 'gl-px-4!' }
         %label.label-bold
           = _('Clone with SSH')
-        .input-group
+        .input-group.btn-group
           = text_field_tag :ssh_project_clone, project.ssh_url_to_repo, class: "js-select-on-focus form-control qa-ssh-clone-url", readonly: true, aria: { label: _('Repository clone URL') }
           .input-group-append
-            = clipboard_button(target: '#ssh_project_clone', title: _("Copy URL"), class: "input-group-text btn-default btn-clipboard")
+            = clipboard_button(target: '#ssh_project_clone', title: _("Copy URL"), class: "input-group-text gl-button btn btn-icon btn-default")
             = render_if_exists 'projects/buttons/geo'
     - if http_enabled?
       %li.pt-2{ class: 'gl-px-4!' }
         %label.label-bold
           = _('Clone with %{http_label}') % { http_label: gitlab_config.protocol.upcase }
-        .input-group
+        .input-group.btn-group
           = text_field_tag :http_project_clone, project.http_url_to_repo, class: "js-select-on-focus form-control qa-http-clone-url", readonly: true, aria: { label: _('Repository clone URL') }
           .input-group-append
-            = clipboard_button(target: '#http_project_clone', title: _("Copy URL"), class: "input-group-text btn-default btn-clipboard")
+            = clipboard_button(target: '#http_project_clone', title: _("Copy URL"), class: "input-group-text gl-button btn btn-icon btn-default")
             = render_if_exists 'projects/buttons/geo'
       %li.divider.mt-2
       %li.pt-2.gl-new-dropdown-item
diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml
index fad168da71e..e4ec2e44298 100644
--- a/app/views/projects/buttons/_fork.html.haml
+++ b/app/views/projects/buttons/_fork.html.haml
@@ -1,17 +1,16 @@
 - unless @project.empty_repo?
   - if current_user && can?(current_user, :fork_project, @project)
-    .count-badge.d-inline-flex.align-item-stretch.gl-mr-3
+    .count-badge.btn-group
       - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
-        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: s_('ProjectOverview|Go to your fork'), class: 'btn btn-default has-tooltip count-badge-button d-flex align-items-center fork-btn' do
+        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: s_('ProjectOverview|Go to your fork'), class: 'gl-button btn btn-default btn-sm has-tooltip fork-btn' do
           = sprite_icon('fork', css_class: 'icon')
           %span= s_('ProjectOverview|Fork')
       - else
         - can_create_fork = current_user.can?(:create_fork)
         - disabled_fork_tooltip = s_('ProjectOverview|You have reached your project limit')
-        %span.has-tooltip{ title: (disabled_fork_tooltip unless can_create_fork) }
-          = link_to new_project_fork_path(@project), class: "btn btn-default btn-xs count-badge-button d-flex align-items-center fork-btn #{' disabled' unless can_create_fork }", 'aria-label' => (disabled_fork_tooltip unless can_create_fork) do
+        %span.btn-group.has-tooltip{ title: (disabled_fork_tooltip unless can_create_fork) }
+          = link_to new_project_fork_path(@project), class: "gl-button btn btn-default btn-sm fork-btn #{' disabled' unless can_create_fork }", 'aria-label' => (disabled_fork_tooltip unless can_create_fork) do
             = sprite_icon('fork', css_class: 'icon')
             %span= s_('ProjectOverview|Fork')
-      %span.fork-count.count-badge-count.d-flex.align-items-center
-        = link_to project_forks_path(@project), title: n_(s_('ProjectOverview|Fork'), s_('ProjectOverview|Forks'), @project.forks_count), class: 'count' do
-          = @project.forks_count
+      = link_to project_forks_path(@project), title: n_(s_('ProjectOverview|Forks'), s_('ProjectOverview|Forks'), @project.forks_count), class: 'gl-button btn btn-default btn-sm count has-tooltip' do
+        = @project.forks_count
diff --git a/app/views/projects/buttons/_star.html.haml b/app/views/projects/buttons/_star.html.haml
index 690f0fe10f7..00d518450e9 100644
--- a/app/views/projects/buttons/_star.html.haml
+++ b/app/views/projects/buttons/_star.html.haml
@@ -1,21 +1,19 @@
 - if current_user
-  .count-badge.d-inline-flex.align-item-stretch.gl-mr-3
-    %button.count-badge-button.btn.btn-default.btn-xs.d-flex.align-items-center.star-btn.toggle-star{ type: "button", data: { endpoint: toggle_star_project_path(@project, :json) } }
+  .count-badge.d-inline-flex.align-item-stretch.gl-mr-3.btn-group
+    %button.gl-button.btn.btn-default.btn-sm.star-btn.toggle-star{ type: "button", data: { endpoint: toggle_star_project_path(@project, :json) } }
       - if current_user.starred?(@project)
         = sprite_icon('star', css_class: 'icon')
         %span.starred= s_('ProjectOverview|Unstar')
       - else
         = sprite_icon('star-o', css_class: 'icon')
         %span= s_('ProjectOverview|Star')
-    %span.star-count.count-badge-count.d-flex.align-items-center
-      = link_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'count' do
-        = @project.star_count
+    = link_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'gl-button btn btn-default btn-sm star-count count' do
+      = @project.star_count
 
 - else
-  .count-badge.d-inline-flex.align-item-stretch.gl-mr-3
-    = link_to new_user_session_path, class: 'btn btn-default btn-xs has-tooltip count-badge-button d-flex align-items-center star-btn', title: s_('ProjectOverview|You must sign in to star a project') do
+  .count-badge.d-inline-flex.align-item-stretch.gl-mr-3.btn-group
+    = link_to new_user_session_path, class: 'gl-button btn btn-default btn-sm has-tooltip star-btn', title: s_('ProjectOverview|You must sign in to star a project') do
       = sprite_icon('star-o', css_class: 'icon')
       %span= s_('ProjectOverview|Star')
-    %span.star-count.count-badge-count.d-flex.align-items-center
-      = link_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'count' do
-        = @project.star_count
+    = link_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'gl-button btn btn-default btn-sm star-count count' do
+      = @project.star_count
diff --git a/app/views/projects/ci/pipeline_editor/show.html.haml b/app/views/projects/ci/pipeline_editor/show.html.haml
index 10aed15f380..3e10cf49b66 100644
--- a/app/views/projects/ci/pipeline_editor/show.html.haml
+++ b/app/views/projects/ci/pipeline_editor/show.html.haml
@@ -1,12 +1,14 @@
 - page_title s_('Pipelines|Pipeline Editor')
 
 #js-pipeline-editor{ data: { "ci-config-path": @project.ci_config_path_or_default,
+  "commit-sha" => @project.commit ? @project.commit.sha : '',
+  "default-branch" => @project.default_branch,
+  "empty-state-illustration-path" => image_path('illustrations/empty-state/empty-dag-md.svg'),
+  "initial-branch-name": params[:branch_name],
+  "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
+  "new-merge-request-path" => namespace_project_new_merge_request_path,
   "project-path" => @project.path,
   "project-full-path" => @project.full_path,
   "project-namespace" => @project.namespace.full_path,
-  "default-branch" => @project.default_branch,
-  "commit-sha" => @project.commit ? @project.commit.sha : '',
-  "new-merge-request-path" => namespace_project_new_merge_request_path,
-  "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
   "yml-help-page-path" => help_page_path('ci/yaml/README'),
 } }
diff --git a/app/views/projects/cleanup/_show.html.haml b/app/views/projects/cleanup/_show.html.haml
index e693082461f..b0112be0e3d 100644
--- a/app/views/projects/cleanup/_show.html.haml
+++ b/app/views/projects/cleanup/_show.html.haml
@@ -2,8 +2,8 @@
 
 %section.settings.no-animate#cleanup{ class: ('expanded' if expanded) }
   .settings-header
-    %h4= _('Repository cleanup')
-    %button.btn.js-settings-toggle
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Repository cleanup')
+    %button.btn.gl-button.btn-default.js-settings-toggle
       = expanded ? _('Collapse') : _('Expand')
     %p
       - link_url = 'https://github.com/newren/git-filter-repo'
diff --git a/app/views/projects/commit/_change.html.haml b/app/views/projects/commit/_change.html.haml
index bda8ec39e81..81a77489075 100644
--- a/app/views/projects/commit/_change.html.haml
+++ b/app/views/projects/commit/_change.html.haml
@@ -18,7 +18,10 @@
   .js-cherry-pick-commit-modal{ data: { title: title,
     endpoint: cherry_pick_namespace_project_commit_path(commit, namespace_id: @project.namespace.full_path, project_id: @project),
     branch: @project.default_branch,
+    target_project_id: @project.id,
+    target_project_name: @project.full_path,
     push_code: can?(current_user, :push_code, @project).to_s,
     branch_collaboration: @project.branch_allows_collaboration?(current_user, selected_branch).to_s,
     existing_branch: ERB::Util.html_escape(selected_branch),
-    branches_endpoint: project_branches_path(@project) } }
+    branches_endpoint: refs_project_path(@project),
+    projects: cherry_pick_projects_data(@project).to_json } }
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 53b9fd733ec..974393b893b 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -74,22 +74,25 @@
     %span.commit-info.merge-requests{ 'data-project-commit-path' => merge_requests_project_commit_path(@project, @commit.id, format: :json) }
       .spinner.vertical-align-middle
 
-  - last_pipeline = @commit.last_pipeline
-  - if can?(current_user, :read_pipeline, last_pipeline)
+  - if can?(current_user, :read_pipeline, @last_pipeline)
     .well-segment.pipeline-info
       .status-icon-container
-        = link_to project_pipeline_path(@project, last_pipeline.id), class: "ci-status-icon-#{last_pipeline.status}" do
-          = ci_icon_for_status(last_pipeline.status)
+        = link_to project_pipeline_path(@project, @last_pipeline.id), class: "ci-status-icon-#{@last_pipeline.status}" do
+          = ci_icon_for_status(@last_pipeline.status)
       #{ _('Pipeline') }
-      = link_to "##{last_pipeline.id}", project_pipeline_path(@project, last_pipeline.id)
-      = ci_label_for_status(last_pipeline.status)
-      - if last_pipeline.stages_count.nonzero?
-        #{ n_(s_('Pipeline|with stage'), s_('Pipeline|with stages'), last_pipeline.stages_count) }
+      = link_to "##{@last_pipeline.id}", project_pipeline_path(@project, @last_pipeline.id)
+      = ci_label_for_status(@last_pipeline.status)
+      - if @last_pipeline.stages_count.nonzero?
+        #{ n_(s_('Pipeline|with stage'), s_('Pipeline|with stages'), @last_pipeline.stages_count) }
         .mr-widget-pipeline-graph
-          = render 'shared/mini_pipeline_graph', pipeline: last_pipeline, klass: 'js-commit-pipeline-graph'
-      - if last_pipeline.duration
+          - if ::Gitlab::Ci::Features.ci_commit_pipeline_mini_graph_vue_enabled?(@project)
+            .stage-cell
+              .js-commit-pipeline-mini-graph{ data: { stages: @last_pipeline_stages.to_json.html_safe } }
+          - else
+            = render 'shared/mini_pipeline_graph', pipeline: @last_pipeline, klass: 'js-commit-pipeline-graph'
+      - if @last_pipeline.duration
         in
-        = time_interval_in_words last_pipeline.duration
+        = time_interval_in_words @last_pipeline.duration
 
   - if @merge_request
     .well-segment
diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml
index 81c354f1c8f..7f52e6ed7eb 100644
--- a/app/views/projects/commit/_pipelines_list.haml
+++ b/app/views/projects/commit/_pipelines_list.haml
@@ -1,8 +1,6 @@
 - disable_initialization = local_assigns.fetch(:disable_initialization, false)
 #commit-pipeline-table-view{ data: { disable_initialization: disable_initialization,
   endpoint: endpoint,
-  "help-page-path" => help_page_path('ci/quick_start/README'),
-  "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
   "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
   "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
   "project-id": @project.id,
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index c708efe7c7b..ceb312450be 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -60,5 +60,5 @@
       .commit-sha-group.btn-group.d-none.d-sm-flex
         .label.label-monospace.monospace
           = commit.short_id
-        = clipboard_button(text: commit.id, title: _("Copy commit SHA"), class: "gl-button btn btn-default", container: "body")
+        = clipboard_button(text: commit.id, title: _("Copy commit SHA"), class: "gl-button btn btn-default btn-icon", container: "body")
         = link_to_browse_code(project, commit)
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 802df664241..463984a13a2 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -18,9 +18,9 @@
         - if @merge_request.present?
           .control.d-none.d-md-block
             = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn gl-button'
-        - elsif create_mr_button?(@repository.root_ref, @ref)
+        - elsif create_mr_button?(from: @repository.root_ref, to: @ref, source_project: @project, target_project: @project)
           .control.d-none.d-md-block
-            = link_to _("Create merge request"), create_mr_path(@repository.root_ref, @ref), class: 'btn gl-button btn-success'
+            = link_to _("Create merge request"), create_mr_path(from: @repository.root_ref, to: @ref, source_project: @project, target_project: @project), class: 'btn gl-button btn-success'
 
         .control
           = form_tag(project_commits_path(@project, @id), method: :get, class: 'commits-search-form js-signature-container', data: { 'signatures-path' => namespace_project_signatures_path }) do
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
deleted file mode 100644
index 17134613b17..00000000000
--- a/app/views/projects/compare/_form.html.haml
+++ /dev/null
@@ -1,28 +0,0 @@
-= form_tag project_compare_index_path(@project), method: :post, class: 'form-inline js-requires-input js-signature-container', data: { 'signatures-path' => signatures_namespace_project_compare_index_path } do
-  .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
-    .input-group.inline-input-group
-      %span.input-group-prepend
-        .input-group-text
-          = s_("CompareBranches|Source")
-      = hidden_field_tag :to, params[:to]
-      = button_tag type: 'button', title: params[:to], class: "btn gl-button form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
-        .dropdown-toggle-text.str-truncated.monospace.float-left= params[:to] || _("Select branch/tag")
-        = sprite_icon('chevron-down', css_class: 'float-right')
-    = render 'shared/ref_dropdown'
-  .compare-ellipsis.inline ...
-  .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
-    .input-group.inline-input-group
-      %span.input-group-prepend
-        .input-group-text
-          = s_("CompareBranches|Target")
-      = hidden_field_tag :from, params[:from]
-      = button_tag type: 'button', title: params[:from], class: "btn gl-button form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
-        .dropdown-toggle-text.str-truncated.monospace.float-left= params[:from] || _("Select branch/tag")
-        = sprite_icon('chevron-down', css_class: 'float-right')
-    = render 'shared/ref_dropdown'
-  &nbsp;
-  = button_tag s_("CompareBranches|Compare"), class: "btn gl-button btn-success commits-compare-btn"
-  - if @merge_request.present?
-    = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'gl-ml-3 btn'
-  - elsif create_mr_button?
-    = link_to _("Create merge request"), create_mr_path, class: 'gl-ml-3 btn gl-button'
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index 3f9aa24a569..e3ab184ec6f 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -13,8 +13,4 @@
   = 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 }
 
 .prepend-top-20
-  #js-compare-selector{ data: { project_compare_index_path: project_compare_index_path(@project),
-    refs_project_path: refs_project_path(@project),
-    params_from: params[:from], params_to: params[:to],
-    project_merge_request_path: @merge_request.present? ? project_merge_request_path(@project, @merge_request) : '',
-    create_mr_path: create_mr_button? ? create_mr_path : '' } }
+  #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, params) }
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 51cf95dc84b..9e9c271e7be 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -2,7 +2,8 @@
 - page_title "#{params[:from]}...#{params[:to]}"
 
 .sub-header-block.no-bottom-space
-  = render "form"
+  .js-signature-container{ data: { 'signatures-path' => signatures_namespace_project_compare_index_path } }
+    #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, params) }
 
 - if @commits.present?
   = render "projects/commits/commit_list"
diff --git a/app/views/projects/cycle_analytics/_empty_stage.html.haml b/app/views/projects/cycle_analytics/_empty_stage.html.haml
deleted file mode 100644
index cdad0bc7231..00000000000
--- a/app/views/projects/cycle_analytics/_empty_stage.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-.empty-stage-container
-  .empty-stage
-    .icon-no-data
-      = custom_icon ('icon_no_data')
-    %h4 {{ __('We don\'t have enough data to show this stage.') }}
-    %p
-      {{currentStage.emptyStageText}}
diff --git a/app/views/projects/cycle_analytics/_no_access.html.haml b/app/views/projects/cycle_analytics/_no_access.html.haml
deleted file mode 100644
index c3eda398234..00000000000
--- a/app/views/projects/cycle_analytics/_no_access.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-.no-access-stage-container
-  .no-access-stage
-    .icon-lock
-      = custom_icon ('icon_lock')
-    %h4 {{ __('You need permission.') }}
-    %p
-      {{ __('Want to see the data? Please ask an administrator for access.') }}
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index fc3710d3609..71730da0595 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -1,66 +1,6 @@
 - page_title _("Value Stream Analytics")
 - add_page_specific_style 'page_bundles/cycle_analytics'
+- svgs = { empty_state_svg_path: image_path("illustrations/analytics/cycle-analytics-empty-chart.svg"), no_data_svg_path: image_path("illustrations/analytics/cycle-analytics-empty-chart.svg"), no_access_svg_path: image_path("illustrations/analytics/no-access.svg") }
+- initial_data = { request_path: project_cycle_analytics_path(@project) }.merge!(svgs)
 
-#cycle-analytics{ "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
-  %gl-loading-icon{ "v-show" => "isLoading", "size" => "lg" }
-  .wrapper{ "v-show" => "!isLoading && !hasError" }
-    .card
-      .card-header
-        {{ __('Recent Project Activity') }}
-      .d-flex.justify-content-between
-        .flex-grow.text-center{ "v-for" => "item in state.summary" }
-          %h3.header {{ item.value }}
-          %p.text {{ item.title }}
-        .flex-grow.align-self-center.text-center
-          .dropdown.inline.js-ca-dropdown
-            %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
-              %span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }}
-              = sprite_icon("chevron-down", css_class: "dropdown-menu-toggle-icon gl-top-3")
-            %ul.dropdown-menu.dropdown-menu-right
-              %li
-                %a{ "href" => "#", "data-value" => "7" }
-                  {{ n__('Last %d day', 'Last %d days', 7) }}
-              %li
-                %a{ "href" => "#", "data-value" => "30" }
-                  {{ n__('Last %d day', 'Last %d days', 30) }}
-              %li
-                %a{ "href" => "#", "data-value" => "90" }
-                  {{ n__('Last %d day', 'Last %d days', 90) }}
-    .stage-panel-container
-      .card.stage-panel
-        .card-header.border-bottom-0
-          %nav.col-headers
-            %ul
-              %li.stage-header.pl-5
-                %span.stage-name.font-weight-bold
-                  {{ s__('ProjectLifecycle|Stage') }}
-                %span.has-tooltip{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
-              %li.median-header
-                %span.stage-name.font-weight-bold
-                  {{ __('Median') }}
-                %span.has-tooltip{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
-              %li.event-header.pl-3
-                %span.stage-name.font-weight-bold{ "v-if" => "currentStage && currentStage.legend" }
-                  {{ currentStage ? __(currentStage.legend) : __('Related Issues') }}
-                %span.has-tooltip{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
-              %li.total-time-header.pr-5.text-right
-                %span.stage-name.font-weight-bold
-                  {{ __('Time') }}
-                %span.has-tooltip{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
-        .stage-panel-body
-          %nav.stage-nav
-            %ul
-              %stage-nav-item{ "v-for" => "stage in state.stages", ":key" => '`ca-stage-title-${stage.title}`', '@select' => 'selectStage(stage)', ":title" => "stage.title", ":is-user-allowed" => "stage.isUserAllowed", ":value" => "stage.value", ":is-active" => "stage.active" }
-          .section.stage-events.overflow-auto
-            %gl-loading-icon{ "v-show" => "isLoadingStage", "size" => "lg" }
-            %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
-              = render partial: "no_access"
-            %template{ "v-else" => true }
-              %template{ "v-if" => "isEmptyStage && !isLoadingStage" }
-                = render partial: "empty_stage"
-              %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" }
-                %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" }
+#js-cycle-analytics{ data: initial_data }
diff --git a/app/views/projects/default_branch/_show.html.haml b/app/views/projects/default_branch/_show.html.haml
index 0c7649e93d7..728f035555e 100644
--- a/app/views/projects/default_branch/_show.html.haml
+++ b/app/views/projects/default_branch/_show.html.haml
@@ -2,8 +2,8 @@
 
 %section.settings.no-animate#default-branch-settings{ class: ('expanded' if expanded) }
   .settings-header
-    %h4= _('Default branch')
-    %button.btn.js-settings-toggle
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Default branch')
+    %button.btn.gl-button.btn-default.js-settings-toggle
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _('Set the default branch for this project. All merge requests and commits are made against this branch unless you specify a different one.')
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 2f533b5848d..cec8948aaa4 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -3,7 +3,7 @@
 - can_create_note = !@diff_notes_disabled && can?(current_user, :create_note, diffs.project)
 - 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 && Feature.enabled?(:paginate_commit_view, @project, type: :development)
+- paginate_diffs = local_assigns.fetch(:paginate_diffs, false) && !load_diff_files_async
 - diff_files = conditionally_paginate_diff_files(diffs, paginate: paginate_diffs)
 
 .content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 4b198717790..9197b177b7b 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -16,8 +16,9 @@
     - unless diff_file.submodule?
       .file-actions.d-none.d-sm-block
         - if diff_file.blob&.readable_text?
-          = link_to '#', class: 'js-toggle-diff-comments btn gl-button active has-tooltip', title: _("Toggle comments for this file"), disabled: @diff_notes_disabled do
-            = sprite_icon('comment')
+          %span.has-tooltip{ title: _("Toggle comments for this file") }
+            = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default selected', disabled: @diff_notes_disabled do
+              = sprite_icon('comment')
           \
           - if editable_diff?(diff_file)
             - link_opts = @merge_request.persisted? ? { from_merge_request_iid: @merge_request.iid } : {}
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index c26017ccb79..9388c5fad6d 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -19,7 +19,7 @@
     %p= _('Choose visibility level, enable/disable project features and their permissions, disable email notifications, and show default award emoji.')
 
   .settings-content
-    = form_for @project, remote: true, html: { multipart: true, class: "sharing-permissions-form" }, authenticity_token: true do |f|
+    = form_for @project, html: { multipart: true, class: "sharing-permissions-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-shared-permissions' }
       %template.js-project-permissions-form-data{ type: "application/json" }= project_permissions_panel_data_json(@project)
       .js-project-permissions-form
@@ -27,7 +27,7 @@
         = render "visibility_modal"
       = f.submit _('Save changes'), class: "btn gl-button btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
 
-%section.qa-merge-request-settings.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
+%section.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)], data: { qa_selector: 'merge_request_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Merge requests')
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
@@ -36,10 +36,10 @@
   .settings-content
     = render_if_exists 'shared/promotions/promote_mr_features'
 
-    = form_for @project, remote: true, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
+    = form_for @project, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-settings' }
       = render 'projects/merge_request_settings', form: f
-      = f.submit _('Save changes'), class: "btn gl-button btn-success qa-save-merge-request-changes rspec-save-merge-request-changes"
+      = f.submit _('Save changes'), class: "btn gl-button btn-success rspec-save-merge-request-changes", data: { qa_selector: 'save_merge_request_changes_button' }
 
 = render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
 
@@ -60,7 +60,7 @@
 
 = render 'projects/service_desk_settings'
 
-%section.qa-advanced-settings.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded) }
+%section.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded), data: { qa_selector: 'advanced_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Advanced')
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
@@ -96,8 +96,8 @@
               .input-group-prepend
                 .input-group-text
                   #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
-              = f.text_field :path, class: 'form-control qa-project-path-field h-auto'
-        = f.submit _('Change path'), class: "gl-button btn btn-warning qa-change-path-button"
+              = f.text_field :path, class: 'form-control h-auto', data: { qa_selector: 'project_path_field' }
+        = f.submit _('Change path'), class: "gl-button btn btn-warning", data: { qa_selector: 'change_path_button' }
 
     = render 'transfer', project: @project
 
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 2c245c1a914..0c682226df3 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -1,10 +1,7 @@
 - @content_class = "limit-container-width" unless fluid_layout
-- default_branch_name = @project.default_branch || "master"
+- default_branch_name = @project.default_branch_or_master
 - @skip_current_level_breadcrumb = true
 
-= content_for :invite_members_sidebar do
-  = render partial: 'projects/invite_members_link'
-
 = render partial: 'flash_messages', locals: { project: @project }
 
 = render "home_panel"
@@ -77,3 +74,6 @@
             %span><
               git push -u origin --all
               git push -u origin --tags
+
+- if @project.empty_repo_upload_experiment?
+  = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, default_branch_name), ref: default_branch_name, method: :post
diff --git a/app/views/projects/forks/_fork_button.html.haml b/app/views/projects/forks/_fork_button.html.haml
index cfef2a19420..60a4a5c9d70 100644
--- a/app/views/projects/forks/_fork_button.html.haml
+++ b/app/views/projects/forks/_fork_button.html.haml
@@ -1,7 +1,7 @@
 - avatar = namespace_icon(namespace, 100)
 - can_create_project = current_user.can?(:create_projects, namespace)
 
-.bordered-box.fork-thumbnail.text-center.gl-m-3{ class: ("disabled" unless can_create_project) }
+.bordered-box.fork-thumbnail.text-center.gl-m-3.gl-pb-5{ class: ("disabled" unless can_create_project) }
   - if /no_((\w*)_)*avatar/.match(avatar)
     = group_icon(namespace, class: "avatar rect-avatar s100 identicon mx-auto")
   - else
diff --git a/app/views/projects/forks/new.html.haml b/app/views/projects/forks/new.html.haml
index ccef28a2cf3..267fc3ae986 100644
--- a/app/views/projects/forks/new.html.haml
+++ b/app/views/projects/forks/new.html.haml
@@ -1,18 +1,29 @@
-- page_title _("Fork project")
-
-.row.gl-mt-3
-  .col-lg-3
-    %h4.gl-mt-0
-      = _("Fork project")
-    %p
-      = _("A fork is a copy of a project.")
-      %br
-      = _('Forking a repository allows you to make changes without affecting the original project.')
-  .col-lg-9
-    - if @own_namespace.present?
-      .fork-thumbnail-container.js-fork-content
-        %h5.gl-mt-0.gl-mb-0.gl-ml-3.gl-mr-3
-          = _("Select a namespace to fork the project")
-        = render 'fork_button', namespace: @own_namespace
-    #fork-groups-mount-element{ data: { endpoint: new_project_fork_path(@project, format: :json) } }
+- page_title s_("ForkProject|Fork project")
 
+- if Feature.enabled?(:fork_project_form)
+  #fork-groups-mount-element{ data: { fork_illustration: image_path('illustrations/project-create-new-sm.svg'),
+    endpoint: new_project_fork_path(@project, format: :json),
+    new_group_path: new_group_path,
+    project_full_path: project_path(@project),
+    visibility_help_path: help_page_path("public_access/public_access"),
+    project_id: @project.id,
+    project_name: @project.name,
+    project_path: @project.path,
+    project_description: @project.description,
+    project_visibility: @project.visibility } }
+- else
+  .row.gl-mt-3
+    .col-lg-3
+      %h4.gl-mt-0
+        = s_("ForkProject|Fork project")
+      %p
+        = s_("ForkProject|A fork is a copy of a project.")
+        %br
+        = s_('ForkProject|Forking a repository allows you to make changes without affecting the original project.')
+    .col-lg-9
+      - if @own_namespace.present?
+        .fork-thumbnail-container.js-fork-content
+          %h5.gl-mt-0.gl-mb-0.gl-ml-3.gl-mr-3
+            = s_("ForkProject|Select a namespace to fork the project")
+          = render 'fork_button', namespace: @own_namespace
+      #fork-groups-mount-element{ data: { endpoint: new_project_fork_path(@project, format: :json) } }
diff --git a/app/views/projects/issues/_form.html.haml b/app/views/projects/issues/_form.html.haml
index dcc8000c0c5..d85c448b29a 100644
--- a/app/views/projects/issues/_form.html.haml
+++ b/app/views/projects/issues/_form.html.haml
@@ -1,3 +1,3 @@
 = form_for [@project, @issue],
-           html: { class: 'issue-form common-note-form js-quick-submit js-requires-input' } do |f|
+           html: { class: 'issue-form common-note-form gl-mt-3 js-quick-submit js-requires-input' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @issue
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 23510713494..838b4538cad 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -22,7 +22,7 @@
           #{issuable_reference(issue)}
         %span.issuable-authored.d-none.d-sm-inline-block
           &middot;
-          opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')} by
+          created #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')} by
           - if issue.service_desk_reply_to
             #{issue.service_desk_reply_to} via
           #{link_to_member(@project, issue.author, avatar: false)}
diff --git a/app/views/projects/issues/_nav_btns.html.haml b/app/views/projects/issues/_nav_btns.html.haml
index dbf6a1f1b94..06522d9d434 100644
--- a/app/views/projects/issues/_nav_btns.html.haml
+++ b/app/views/projects/issues/_nav_btns.html.haml
@@ -1,17 +1,15 @@
 - show_feed_buttons = local_assigns.fetch(:show_feed_buttons, true)
 - show_import_button = local_assigns.fetch(:show_import_button, true) && can?(current_user, :import_issues, @project)
 - show_export_button = local_assigns.fetch(:show_export_button, true)
+- issuable_type = 'issues'
+- can_edit = can?(current_user, :admin_project, @project)
+- notification_email = @current_user.present? ? @current_user.notification_email : nil
 
 .nav-controls.issues-nav-controls
   - if show_feed_buttons
     = render 'shared/issuable/feed_buttons'
 
-  .btn-group
-    - if show_export_button
-      = render 'shared/issuable/csv_export/button', issuable_type: 'issues'
-
-    - if show_import_button
-      = render 'projects/issues/import_csv/button'
+  .js-csv-import-export-buttons{ data: { show_export_button: show_export_button.to_s, show_import_button: show_import_button.to_s, issuable_type: issuable_type, issuable_count: issuables_count_for_state(issuable_type.to_sym, params[:state]), email: notification_email, export_csv_path: export_csv_project_issues_path(@project, request.query_parameters), import_csv_issues_path: import_csv_namespace_project_issues_path, container_class: 'gl-mr-3', can_edit: can_edit.to_s, project_import_jira_path: project_import_jira_path(@project) } }
 
   - if @can_bulk_update
     = button_tag _("Edit issues"), class: "gl-button btn btn-default gl-mr-3 js-bulk-update-toggle"
@@ -19,11 +17,6 @@
     = link_to _("New issue"), new_project_issue_path(@project,
                                                   issue: { assignee_id: finder.assignee.try(:id),
                                                            milestone_id: finder.milestones.first.try(:id) }),
-                                                  class: "gl-button btn btn-success",
+                                                  class: "gl-button btn btn-confirm",
                                                   id: "new_issue_link"
 
-- if show_export_button
-  = render 'shared/issuable/csv_export/modal', issuable_type: 'issues'
-
-- if show_import_button
-  = render 'projects/issues/import_csv/modal'
diff --git a/app/views/projects/issues/_service_desk_empty_state.html.haml b/app/views/projects/issues/_service_desk_empty_state.html.haml
index 40abedea9d4..a4251c8e5dc 100644
--- a/app/views/projects/issues/_service_desk_empty_state.html.haml
+++ b/app/views/projects/issues/_service_desk_empty_state.html.haml
@@ -1,7 +1,7 @@
 - service_desk_enabled = @project.service_desk_enabled?
 
 - can_edit_project_settings = can?(current_user, :admin_project, @project)
-- title_text = _("Use Service Desk to connect with your users (e.g. to offer customer support) through email right inside GitLab")
+- title_text = s_("ServiceDesk|Use Service Desk to connect with your users and offer customer support through email right inside GitLab")
 
 - if Gitlab::ServiceDesk.supported?
   .empty-state
@@ -13,21 +13,21 @@
 
       - if can_edit_project_settings && service_desk_enabled
         %p
-          = _("Have your users email")
+          = s_("ServiceDesk|Your users can send emails to this address:")
           %code= @project.service_desk_address
 
-      %span= _("Those emails automatically become issues (with the comments becoming the email conversation) listed here.")
-      = link_to _('Read more'), help_page_path('user/project/service_desk')
+      %span= s_("ServiceDesk|Issues created from Service Desk emails appear here. Each comment becomes part of the email conversation.")
+      = link_to _('Learn more.'), help_page_path('user/project/service_desk')
 
       - if can_edit_project_settings && !service_desk_enabled
         .text-center
-          = link_to _("Turn on Service Desk"), edit_project_path(@project), class: 'gl-button btn btn-success'
+          = link_to s_("ServiceDesk|Enable Service Desk"), edit_project_path(@project), class: 'gl-button btn btn-success'
 - else
   .empty-state
     .svg-content
       = render 'shared/empty_states/icons/service_desk_setup.svg'
     .text-content
-      %h4= _('Service Desk is enabled but not yet active')
+      %h4= s_('ServiceDesk|Service Desk is enabled but not yet active')
       %p
-        = _("You must set up incoming email before it becomes active.")
-        = link_to _('More information'), help_page_path('administration/incoming_email', anchor: 'set-it-up')
+        = s_("ServiceDesk|To activate Service Desk on this instance, an instance administrator must first set up incoming email.")
+        = link_to _('Learn more.'), help_page_path('administration/incoming_email', anchor: 'set-it-up')
diff --git a/app/views/projects/issues/_service_desk_info_content.html.haml b/app/views/projects/issues/_service_desk_info_content.html.haml
index 1eb427f4f7c..448a341eba6 100644
--- a/app/views/projects/issues/_service_desk_info_content.html.haml
+++ b/app/views/projects/issues/_service_desk_info_content.html.haml
@@ -1,7 +1,7 @@
 - service_desk_enabled = @project.service_desk_enabled?
 
 - can_edit_project_settings = can?(current_user, :admin_project, @project)
-- title_text = _("Use Service Desk to connect with your users (e.g. to offer customer support) through email right inside GitLab")
+- title_text = s_("ServiceDesk|Use Service Desk to connect with your users and offer customer support through email right inside GitLab")
 
 .non-empty-state.media
   .svg-content
@@ -12,12 +12,12 @@
 
     - if can_edit_project_settings && service_desk_enabled
       %p
-        = _("Have your users email")
+        = s_("ServiceDesk|Your users can send emails to this address:")
         %code= @project.service_desk_address
 
-    %span= _("Those emails automatically become issues (with the comments becoming the email conversation) listed here.")
-    = link_to _('Read more'), help_page_path('user/project/service_desk')
+    %span= s_("ServiceDesk|Issues created from Service Desk emails will appear here. Each comment becomes part of the email conversation.")
+    = link_to _('Learn more.'), help_page_path('user/project/service_desk')
 
     - if can_edit_project_settings && !service_desk_enabled
       .gl-mt-3
-        = link_to _("Turn on Service Desk"), edit_project_path(@project), class: 'gl-button btn btn-success'
+        = link_to s_("ServiceDesk|Enable Service Desk"), edit_project_path(@project), class: 'gl-button btn btn-success'
diff --git a/app/views/projects/issues/import_csv/_button.html.haml b/app/views/projects/issues/import_csv/_button.html.haml
deleted file mode 100644
index 229eb0654a8..00000000000
--- a/app/views/projects/issues/import_csv/_button.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-- type = local_assigns.fetch(:type, :icon)
-- can_edit = can?(current_user, :admin_project, @project)
-
-.dropdown.btn-group
-  %button.btn.gl-button.rounded-right.btn-default.btn-icon.text-center{ class: ('has-tooltip' if type == :icon), title: (_('Import issues') if type == :icon),
-    data: { toggle: 'dropdown', qa_selector: 'import_issues_button' }, 'aria-label' => _('Import issues'), 'aria-haspopup' => 'true', 'aria-expanded' => 'false' }
-    - if type == :icon
-      = sprite_icon('import')
-    - else
-      = _('Import issues')
-  %ul.dropdown-menu
-    %li
-      %button{ data: { toggle: 'modal', target: '.issues-import-modal' } }
-        = _('Import CSV')
-    - if can_edit
-      %li{ data: { qa_selector: 'import_from_jira_link' } }
-        = link_to _('Import from Jira'), project_import_jira_path(@project)
diff --git a/app/views/projects/issues/import_csv/_modal.html.haml b/app/views/projects/issues/import_csv/_modal.html.haml
deleted file mode 100644
index e928a71b940..00000000000
--- a/app/views/projects/issues/import_csv/_modal.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-.issues-import-modal.modal
-  .modal-dialog
-    .modal-content
-      = form_tag import_csv_namespace_project_issues_path, multipart: true do
-        .modal-header
-          %h3
-            = _('Import issues')
-          .svg-content.import-export-svg-container
-            = image_tag 'illustrations/export-import.svg', alt: _('Import/Export illustration'), class: 'illustration'
-          %a.close{ href: '#', 'data-dismiss' => 'modal' } ×
-        .modal-body
-          .modal-text
-            %p
-              = _("Your issues will be imported in the background. Once finished, you'll get a confirmation email.")
-            .form-group
-              = label_tag :file, _('Upload CSV file'), class: 'label-bold'
-              %div
-                = file_field_tag :file, accept: '.csv,text/csv', required: true
-            %p.text-secondary
-              = _('It must have a header row and at least two columns: the first column is the issue title and the second column is the issue description. The separator is automatically detected.')
-              = _('The maximum file size allowed is %{size}.') % { size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes) }
-        .modal-footer
-          %button{ type: 'submit', class: 'gl-button btn btn-success', title: _('Import issues'), data: { track_label: "export_issues_csv", track_event: "click_button", track_value: ""} }
-            = _('Import issues')
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index dd66e00b813..1d300c42768 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -8,7 +8,7 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")
 
-.js-projects-issues-root{ data: { can_edit: can?(current_user, :admin_project, @project).to_s,
+.js-jira-issues-import-status{ data: { can_edit: can?(current_user, :admin_project, @project).to_s,
   is_jira_configured: @project.jira_service.present?.to_s,
   issues_path: project_issues_path(@project),
   project_path: @project.full_path } }
@@ -17,16 +17,25 @@
   .top-area
     = render 'shared/issuable/nav', type: :issues
     = render "projects/issues/nav_btns"
-  = render 'shared/issuable/search_bar', type: :issues
 
-  - if @can_bulk_update
-    = render 'shared/issuable/bulk_update_sidebar', type: :issues
+  - if Feature.enabled?(:vue_issues_list, @project)
+    - data_endpoint = local_assigns.fetch(:data_endpoint, expose_path(api_v4_projects_issues_path(id: @project.id)))
+    .js-issues-list{ data: { endpoint: data_endpoint,
+      full_path: @project.full_path,
+      has_blocked_issues_feature: Gitlab.ee? && @project.feature_available?(:blocked_issues).to_s,
+      has_issuable_health_status_feature: Gitlab.ee? && @project.feature_available?(:issuable_health_status).to_s,
+      has_issue_weights_feature: Gitlab.ee? && @project.feature_available?(:issue_weights).to_s } }
+  - else
+    = render 'shared/issuable/search_bar', type: :issues
 
-  .issues-holder
-    = render 'issues'
-    - if new_issue_email
-      .issuable-footer.text-center
-        .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) } }
+    - if @can_bulk_update
+      = render 'shared/issuable/bulk_update_sidebar', type: :issues
+
+    .issues-holder
+      = render 'issues'
+      - if new_issue_email
+        .issuable-footer.text-center
+          .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)
   = render 'shared/empty_states/issues', new_project_issue_button_path: new_project_issue_button_path, show_import_button: true
diff --git a/app/views/projects/issues/new.html.haml b/app/views/projects/issues/new.html.haml
index d1601d7fd10..b18027f0f25 100644
--- a/app/views/projects/issues/new.html.haml
+++ b/app/views/projects/issues/new.html.haml
@@ -2,7 +2,7 @@
 - breadcrumb_title _("New")
 - page_title _("New Issue")
 
-%h3.page-title= _("New Issue")
-%hr
+.top-area.flex-lg-row
+  %h3.page-title= _("New Issue")
 
 = render "form"
diff --git a/app/views/projects/learn_gitlab/index.html.haml b/app/views/projects/learn_gitlab/index.html.haml
index d5fdbc10eb4..94023b21aab 100644
--- a/app/views/projects/learn_gitlab/index.html.haml
+++ b/app/views/projects/learn_gitlab/index.html.haml
@@ -1,4 +1,5 @@
 - breadcrumb_title _("Learn GitLab")
 - page_title _("Learn GitLab")
+- add_page_specific_style 'page_bundles/learn_gitlab'
 
 #js-learn-gitlab-app{ data: { actions: onboarding_actions_data(@project).to_json } }
diff --git a/app/views/projects/mattermosts/_no_teams.html.haml b/app/views/projects/mattermosts/_no_teams.html.haml
index 00efea81f8f..f375222e311 100644
--- a/app/views/projects/mattermosts/_no_teams.html.haml
+++ b/app/views/projects/mattermosts/_no_teams.html.haml
@@ -1,6 +1,8 @@
 - if @teams_error_message
   = content_for :flash_message do
-    .alert.alert-danger= @teams_error_message
+    .gl-alert.gl-alert-danger
+      = sprite_icon('error', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+      .gl-alert-body= @teams_error_message
 
 %p
   You aren’t a member of any team on the Mattermost instance at
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index b1463693fb4..6c0fc9575fc 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -18,7 +18,7 @@
           #{issuable_reference(merge_request)}
         %span.issuable-authored.d-none.d-sm-inline-block
           &middot;
-          opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
+          created #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
           by #{link_to_member(@project, merge_request.author, avatar: false)}
           = render_if_exists 'shared/issuable/gitlab_team_member_badge', author: merge_request.author
         - if merge_request.milestone
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 61747fe2c8d..354c6665a50 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -45,7 +45,7 @@
             %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 qa-edit-button"
+        = 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'
diff --git a/app/views/projects/merge_requests/_nav_btns.html.haml b/app/views/projects/merge_requests/_nav_btns.html.haml
index 473490c6c35..511e53b192f 100644
--- a/app/views/projects/merge_requests/_nav_btns.html.haml
+++ b/app/views/projects/merge_requests/_nav_btns.html.haml
@@ -1,10 +1,10 @@
-.btn-group
-  = render 'shared/issuable/csv_export/button', issuable_type: 'merge-requests'
+- issuable_type = 'merge-requests'
+- notification_email = @current_user.present? ? @current_user.notification_email : nil
+
+.js-csv-import-export-buttons{ data: { show_export_button: "true", issuable_type: issuable_type, issuable_count: issuables_count_for_state(issuable_type.to_sym, params[:state]), email: notification_email, export_csv_path: export_csv_project_merge_requests_path(@project, request.query_parameters), container_class: 'gl-mr-3' } }
 
 - if @can_bulk_update
-  = button_tag "Edit merge requests", class: "gl-button btn gl-mr-3 js-bulk-update-toggle"
+  = button_tag "Edit merge requests", class: "gl-button btn btn-default gl-mr-3 js-bulk-update-toggle"
 - if merge_project
-  = link_to new_merge_request_path, class: "gl-button btn btn-success", title: "New merge request" do
+  = link_to new_merge_request_path, class: "gl-button btn btn-confirm", title: "New merge request" do
     New merge request
-
-  = render 'shared/issuable/csv_export/modal', issuable_type: 'merge_requests'
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 123affeb5d6..6e6046eba14 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -8,6 +8,7 @@
     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.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')}';
     window.gl.mrWidgetData.eligible_approvers_docs_path = '#{help_page_path('user/project/merge_requests/merge_request_approvals', anchor: 'eligible-approvers')}';
     window.gl.mrWidgetData.approvals_help_path = '#{help_page_path("user/project/merge_requests/merge_request_approvals")}';
     window.gl.mrWidgetData.pipelines_empty_svg_path = '#{image_path('illustrations/pipelines_empty.svg')}';
diff --git a/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml b/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
deleted file mode 100644
index cb1cb41eb71..00000000000
--- a/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
+++ /dev/null
@@ -1,11 +0,0 @@
-.content-block.oneline-block.files-changed{ "v-if" => "!isLoading && !hasError" }
-  .inline-parallel-buttons{ "v-if" => "showDiffViewTypeSwitcher" }
-    .btn-group
-      %button.btn.gl-button{ ":class" => "{'active': !isParallel}", "@click" => "handleViewTypeChange('inline')" }
-        = _('Inline')
-      %button.btn.gl-button{ ":class" => "{'active': isParallel}", "@click" => "handleViewTypeChange('parallel')" }
-        = _('Side-by-side')
-
-  .js-toggle-container
-    .commit-stat-summary
-      = _('Showing %{conflict_start}%{conflicts_text}%{strong_end} between %{ref_start}%{source_branch}%{strong_end} and %{ref_start}%{target_branch}%{strong_end}').html_safe % { conflict_start: '<strong class="cred">'.html_safe, ref_start: '<strong class="ref-name">'.html_safe, strong_end: '</strong>'.html_safe, conflicts_text: '{{conflictsCountText}}', source_branch: '{{conflictsData.sourceBranch}}', target_branch: '{{conflictsData.targetBranch}}' }
diff --git a/app/views/projects/merge_requests/conflicts/_file_actions.html.haml b/app/views/projects/merge_requests/conflicts/_file_actions.html.haml
deleted file mode 100644
index 220ddf1bad3..00000000000
--- a/app/views/projects/merge_requests/conflicts/_file_actions.html.haml
+++ /dev/null
@@ -1,12 +0,0 @@
-.file-actions.d-flex.align-items-center.gl-ml-auto.gl-align-self-start
-  .btn-group.gl-mr-3{ "v-if" => "file.type === 'text'" }
-    %button.btn.gl-button{ ":class" => "{ 'active': file.resolveMode == 'interactive' }",
-      '@click' => "onClickResolveModeButton(file, 'interactive')",
-      type: 'button' }
-      = _('Interactive mode')
-    %button.btn.gl-button{ ':class' => "{ 'active': file.resolveMode == 'edit' }",
-      '@click' => "onClickResolveModeButton(file, 'edit')",
-      type: 'button' }
-      = _('Edit inline')
-  %a.btn.gl-button.view-file{ ":href" => "file.blobPath" }
-    = _('View file @%{commit_sha}') % { commit_sha: '{{conflictsData.shortCommitSha}}' }
diff --git a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml b/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
deleted file mode 100644
index 87356f33b1e..00000000000
--- a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-- branch_name = link_to @merge_request.source_branch, project_tree_path(@merge_request.project, @merge_request.source_branch), class: "ref-name"
-- translation =_('You can resolve the merge conflict using either the Interactive mode, by choosing %{use_ours} or %{use_theirs} buttons, or by editing the files directly. Commit these changes into %{branch_name}') % { use_ours: '<code>Use Ours</code>', use_theirs: '<code>Use Theirs</code>', branch_name: branch_name }
-
-%hr
-.resolve-conflicts-form
-  .form-group.row
-    .col-md-4
-      %h4= _('Resolve conflicts on source branch')
-      .resolve-info{ "v-pre": true }
-        = translation.html_safe
-    .col-md-8
-      %label.label-bold{ "for" => "commit-message" }
-        #{ _('Commit message') }
-      .commit-message-container
-        .max-width-marker
-        %textarea.form-control.js-commit-message#commit-message{ "v-model" => "conflictsData.commitMessage", "rows" => "5" }
-  .form-group.row
-    .offset-md-4.col-md-8
-      .row
-        .col-6
-          %button.btn.gl-button.btn-success.js-submit-button{ type: "button", "@click" => "commit()", ":disabled" => "!readyToCommit" }
-            %span {{commitButtonText}}
-        .col-6.text-right
-          = link_to "Cancel", project_merge_request_path(@merge_request.project, @merge_request), class: "gl-button btn btn-default"
diff --git a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
deleted file mode 100644
index 4ba5ec5795a..00000000000
--- a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-%diff-file-editor{ "inline-template" => "true", ":file" => "file", ":on-cancel-discard-confirmation" => "cancelDiscardConfirmation", ":on-accept-discard-confirmation" => "acceptDiscardConfirmation" }
-  .diff-editor-wrap{ "v-show" => "file.showEditor" }
-    .discard-changes-alert-wrap{ "v-if" => "file.promptDiscardConfirmation" }
-      .discard-changes-alert
-        Are you sure you want to discard your changes?
-        .discard-actions
-          %button.btn.btn-sm.btn-danger-secondary.gl-button{ "@click" => "acceptDiscardConfirmation(file)" } Discard changes
-          %button.btn.btn-default.btn-sm.gl-button{ "@click" => "cancelDiscardConfirmation(file)" } Cancel
-    .editor-wrap{ ":class" => "classObject" }
-      .editor{ "style" => "height: 350px", data: { 'editor-loading': true } }
diff --git a/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml b/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
deleted file mode 100644
index 7bd5c437942..00000000000
--- a/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-%inline-conflict-lines{ "inline-template" => "true", ":file" => "file" }
-  %table.diff-wrap-lines.code.code-commit.js-syntax-highlight
-    %tr.line_holder.diff-inline{ "v-for" => "line in file.inlineLines" }
-      %td.diff-line-num.new_line{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader" }
-        %a {{line.new_line}}
-      %td.diff-line-num.old_line{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader" }
-        %a {{line.old_line}}
-      %td.line_content{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader", "v-html" => "line.richText" }
-      %td.diff-line-num.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
-      %td.diff-line-num.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
-      %td.line_content.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
-        %strong{ "v-html" => "line.richText" }
-        %button.btn{ "@click" => "handleSelected(file, line.id, line.section)" }
-          {{line.buttonTitle}}
diff --git a/app/views/projects/merge_requests/conflicts/show.html.haml b/app/views/projects/merge_requests/conflicts/show.html.haml
index 827df540629..e02f126d165 100644
--- a/app/views/projects/merge_requests/conflicts/show.html.haml
+++ b/app/views/projects/merge_requests/conflicts/show.html.haml
@@ -1,5 +1,6 @@
 - page_title _("Merge Conflicts"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge Requests")
 - add_page_specific_style 'page_bundles/merge_conflicts'
+
 = render "projects/merge_requests/mr_title"
 
 .merge-request-details.issuable-details
@@ -7,30 +8,7 @@
 
 = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, source_branch: @merge_request.source_branch
 
-#conflicts{ "v-cloak" => "true", data: { conflicts_path: conflicts_project_merge_request_path(@merge_request.project, @merge_request, format: :json),
-    resolve_conflicts_path: resolve_conflicts_project_merge_request_path(@merge_request.project, @merge_request) } }
-  .loading{ "v-if" => "isLoading" }
-    .spinner.spinner-md
-
-  .nothing-here-block{ "v-if" => "hasError" }
-    {{conflictsData.errorMessage}}
-
-  = render partial: "projects/merge_requests/conflicts/commit_stats"
-
-  .files-wrapper{ "v-if" => "!isLoading && !hasError" }
-    .files
-      .diff-file.file-holder.conflict{ "v-for" => "file in conflictsData.files" }
-        .js-file-title.file-title.file-title-flex-parent.cursor-default
-          .file-header-content
-            %file-icon{ ':file-name': 'file.filePath', ':size': '18', 'css-classes': 'gl-mr-2' }
-            %strong.file-title-name {{file.filePath}}
-          = render partial: 'projects/merge_requests/conflicts/file_actions'
-        .diff-content.diff-wrap-lines
-          .file-content{ "v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
-            = render partial: "projects/merge_requests/conflicts/components/inline_conflict_lines"
-          .file-content{ "v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
-            %parallel-conflict-lines{ ":file" => "file" }
-          %div{ "v-show" => "file.resolveMode === 'edit' ||  file.type === 'text-editor'" }
-            = render partial: "projects/merge_requests/conflicts/components/diff_file_editor"
-
-    = render partial: "projects/merge_requests/conflicts/submit_form"
+#conflicts{ data: { conflicts_path: conflicts_project_merge_request_path(@merge_request.project, @merge_request, format: :json),
+    resolve_conflicts_path: resolve_conflicts_project_merge_request_path(@merge_request.project, @merge_request),
+    source_branch_path: project_tree_path(@merge_request.project, @merge_request.source_branch),
+    merge_request_path: project_merge_request_path(@merge_request.project, @merge_request) } }
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 453a34d1e7a..d664ee709dd 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -35,7 +35,7 @@
               = tab_link_for @merge_request, :pipelines do
                 = _("Pipelines")
                 %span.badge.badge-pill.js-pipelines-mr-count= number_of_pipelines
-          = render "projects/merge_requests/tabs/tab", name: "diffs", class: "diffs-tab qa-diffs-tab", id: "diffs-tab" do
+          = 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= @merge_request.diff_size
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index f6e4442d4fb..56906eb6e66 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -21,8 +21,8 @@
 
   .form-actions
     - if @milestone.new_record?
-      = f.submit _('Create milestone'), class: 'gl-button btn-success btn', data: { qa_selector: 'create_milestone_button' }
-      = link_to _('Cancel'), project_milestones_path(@project), class: 'gl-button btn btn-cancel'
+      = f.submit _('Create milestone'), class: 'gl-button btn-confirm btn', data: { qa_selector: 'create_milestone_button' }
+      = link_to _('Cancel'), project_milestones_path(@project), class: 'gl-button btn btn-default btn-cancel'
     - else
-      = f.submit _('Save changes'), class: 'gl-button btn-success btn'
-      = link_to _('Cancel'), project_milestone_path(@project, @milestone), class: 'gl-button btn btn-cancel'
+      = f.submit _('Save changes'), class: 'gl-button btn-confirm btn'
+      = link_to _('Cancel'), project_milestone_path(@project, @milestone), class: 'gl-button btn btn-default btn-cancel'
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index c0df986e1ca..059ef53c42b 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -8,7 +8,7 @@
     = render 'shared/milestones/search_form'
     = render 'shared/milestones_sort_dropdown'
     - if can?(current_user, :admin_milestone, @project)
-      = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-success', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
+      = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-confirm', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
         = _('New milestone')
 
 - if @milestones.blank?
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index d6ad6147e6e..5a1e263141d 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -5,8 +5,8 @@
 
 %section.settings.project-mirror-settings.no-animate#js-push-remote-settings{ class: mirror_settings_class, data: { qa_selector: 'mirroring_repositories_settings_content' } }
   .settings-header
-    %h4= _('Mirroring repositories')
-    %button.btn.gl-button.js-settings-toggle
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Mirroring repositories')
+    %button.btn.gl-button.btn-default.js-settings-toggle
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _('Set up your project to automatically push and/or pull changes to/from another repository. Branches, tags, and commits will be synced automatically.')
@@ -35,7 +35,7 @@
                 = link_to _('Learn more.'), help_page_path('user/project/repository/repository_mirroring', anchor: 'mirror-only-protected-branches'), target: '_blank', rel: 'noopener noreferrer'
 
           .panel-footer
-            = f.submit _('Mirror repository'), class: 'gl-button btn btn-success js-mirror-submit qa-mirror-repository-button', name: :update_remote_mirror
+            = f.submit _('Mirror repository'), class: 'gl-button btn btn-confirm js-mirror-submit qa-mirror-repository-button', name: :update_remote_mirror
     - else
       .gl-alert.gl-alert-info{ role: 'alert' }
         = sprite_icon('information-o', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 45e7eae8c70..059d6eb28c5 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -8,7 +8,7 @@
   .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 } }
+  .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") } }
 
   .row{ 'v-cloak': true }
     .col-lg-3.profile-settings-sidebar
@@ -28,9 +28,6 @@
       %p
         %strong= _("Tip:")
         = _("You can also create a project from the command line.")
-        %a.push-new-project-tip{ data: { title: _("Push to create a project") }, href: help_page_path('user/project/working_with_projects', anchor: 'push-to-create-a-new-project'), target: "_blank", rel: "noopener noreferrer" }
-          = _("Show command")
-        %template.push-new-project-tip-template= render partial: "new_project_push_tip"
 
     .col-lg-9.js-toggle-container
       %ul.nav.nav-tabs.nav-links.gitlab-tabs{ role: 'tablist' }
diff --git a/app/views/projects/no_repo.html.haml b/app/views/projects/no_repo.html.haml
index 3c7afff57f6..c88ea313287 100644
--- a/app/views/projects/no_repo.html.haml
+++ b/app/views/projects/no_repo.html.haml
@@ -12,8 +12,6 @@
   #{ _('This means you can not push code until you create an empty repository or import existing one.') }
 %hr
 
-= render 'projects/invite_members_modal', project: @project
-
 .no-repo-actions
   = link_to project_repository_path(@project), method: :post, class: 'btn gl-button btn-confirm' do
     #{ _('Create empty repository') }
diff --git a/app/views/projects/pages/_list.html.haml b/app/views/projects/pages/_list.html.haml
index 84c8ab0ceba..40352e79175 100644
--- a/app/views/projects/pages/_list.html.haml
+++ b/app/views/projects/pages/_list.html.haml
@@ -21,7 +21,7 @@
                   %span.badge.badge-danger
                     = s_('GitLabPages|Expired')
           %div
-            = link_to s_('GitLabPages|Edit'), project_pages_domain_path(@project, domain), class: "btn gl-button btn-sm btn-grouped btn-success btn-inverted"
+            = link_to s_('GitLabPages|Edit'), project_pages_domain_path(@project, domain), class: "btn gl-button btn-sm btn-grouped btn-confirm btn-inverted"
             = link_to s_('GitLabPages|Remove'), project_pages_domain_path(@project, domain), data: { confirm: s_('GitLabPages|Are you sure?')}, method: :delete, class: "btn gl-button btn-danger btn-sm btn-grouped"
         - if domain.needs_verification?
           %li.list-group-item.bs-callout-warning
diff --git a/app/views/projects/pages/_pages_settings.html.haml b/app/views/projects/pages/_pages_settings.html.haml
index 51483176d6f..f39941f6f0d 100644
--- a/app/views/projects/pages/_pages_settings.html.haml
+++ b/app/views/projects/pages/_pages_settings.html.haml
@@ -11,4 +11,4 @@
             = s_('GitLabPages|Force HTTPS (requires valid certificates)')
 
   .gl-mt-3
-    = f.submit s_('GitLabPages|Save'), class: 'btn btn-success gl-button'
+    = f.submit s_('GitLabPages|Save'), class: 'btn btn-confirm gl-button'
diff --git a/app/views/projects/pages/show.html.haml b/app/views/projects/pages/show.html.haml
index 4347cbdbd9b..d0d5e675fcb 100644
--- a/app/views/projects/pages/show.html.haml
+++ b/app/views/projects/pages/show.html.haml
@@ -5,7 +5,7 @@
     = s_('GitLabPages|Pages')
 
     - if can?(current_user, :update_pages, @project) && (Gitlab.config.pages.external_http || Gitlab.config.pages.external_https)
-      = link_to new_project_pages_domain_path(@project), class: 'btn gl-button btn-success float-right', title: s_('GitLabPages|New Domain') do
+      = link_to new_project_pages_domain_path(@project), class: 'btn gl-button btn-confirm float-right', title: s_('GitLabPages|New Domain') do
         = s_('GitLabPages|New Domain')
 
   %p.light
diff --git a/app/views/projects/pages_domains/new.html.haml b/app/views/projects/pages_domains/new.html.haml
index 0c3ab4f10a6..0b794226c7f 100644
--- a/app/views/projects/pages_domains/new.html.haml
+++ b/app/views/projects/pages_domains/new.html.haml
@@ -7,6 +7,6 @@
   = form_for [@project, domain_presenter], html: { class: 'fieldset-form' } do |f|
     = render 'form', { f: f }
     .form-actions
-      = f.submit _('Create New Domain'), class: "btn btn-success"
+      = f.submit _('Create New Domain'), class: "gl-button btn btn-confirm"
       .float-right
-        = link_to _('Cancel'), project_pages_path(@project), class: 'btn btn-cancel'
+        = link_to _('Cancel'), project_pages_path(@project), class: 'gl-button btn btn-default btn-cancel'
diff --git a/app/views/projects/pages_domains/show.html.haml b/app/views/projects/pages_domains/show.html.haml
index 54522a70f4a..d16821c3940 100644
--- a/app/views/projects/pages_domains/show.html.haml
+++ b/app/views/projects/pages_domains/show.html.haml
@@ -17,5 +17,5 @@
   = form_for [@project, domain_presenter], html: { class: 'fieldset-form' } do |f|
     = render 'form', { f: f }
     .form-actions.d-flex.justify-content-between
-      = f.submit _('Save Changes'), class: "btn btn-success"
-      = link_to _('Cancel'), project_pages_path(@project), class: 'btn btn-default btn-inverse'
+      = f.submit _('Save Changes'), class: "gl-button btn btn-confirm"
+      = link_to _('Cancel'), project_pages_path(@project), class: 'gl-button btn btn-default btn-inverse'
diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
index e17c905e092..190bf9bf071 100644
--- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
+++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
@@ -27,14 +27,14 @@
     %td
       .float-right.btn-group
         - if can?(current_user, :play_pipeline_schedule, pipeline_schedule)
-          = link_to play_pipeline_schedule_path(pipeline_schedule), method: :post, title: s_('Play'), class: 'btn gl-button btn-default btn-svg' do
+          = link_to play_pipeline_schedule_path(pipeline_schedule), method: :post, title: s_('Play'), class: 'btn gl-button btn-default btn-icon' do
             = sprite_icon('play')
         - if can?(current_user, :take_ownership_pipeline_schedule, pipeline_schedule)
           = link_to take_ownership_pipeline_schedule_path(pipeline_schedule), method: :post, title: s_('PipelineSchedules|Take ownership'), class: 'btn gl-button btn-default' do
             = s_('PipelineSchedules|Take ownership')
         - if can?(current_user, :update_pipeline_schedule, pipeline_schedule)
-          = link_to edit_pipeline_schedule_path(pipeline_schedule), title: _('Edit'), class: 'btn gl-button btn-default' do
+          = link_to edit_pipeline_schedule_path(pipeline_schedule), title: _('Edit'), class: 'btn gl-button btn-default btn-icon' do
             = sprite_icon('pencil')
         - if can?(current_user, :admin_pipeline_schedule, pipeline_schedule)
-          = link_to pipeline_schedule_path(pipeline_schedule), title: _('Delete'), method: :delete, class: 'btn gl-button btn-danger', data: { confirm: _("Are you sure you want to delete this pipeline schedule?") } do
+          = link_to pipeline_schedule_path(pipeline_schedule), title: _('Delete'), method: :delete, class: 'btn gl-button btn-danger btn-icon', data: { confirm: _("Are you sure you want to delete this pipeline schedule?") } do
             = sprite_icon('remove')
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
index 904b3d6f483..58d125acc2d 100644
--- a/app/views/projects/pipelines/_with_tabs.html.haml
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -56,7 +56,7 @@
             %tr.build-state.responsive-table-border-start
               %td.responsive-table-cell.ci-status-icon-failed{ data: { column: _('Status')} }
                 .d-none.d-md-block.build-icon
-                  = custom_icon("icon_status_#{build.status}")
+                  = sprite_icon("status_#{build.status}")
                 .d-md-none.build-badge
                   = render "ci/status/badge", link: false, status: job.detailed_status(current_user)
               %td.responsive-table-cell.build-name{ data: { column: _('Name')} }
diff --git a/app/views/projects/pipelines/charts.html.haml b/app/views/projects/pipelines/charts.html.haml
index ff728ab2fb3..139f6e3c94d 100644
--- a/app/views/projects/pipelines/charts.html.haml
+++ b/app/views/projects/pipelines/charts.html.haml
@@ -1,4 +1,4 @@
-- page_title _('CI / CD Analytics')
+- page_title _('CI/CD Analytics')
 
 #js-project-pipelines-charts-app{ data: { project_path: @project.full_path,
   should_render_deployment_frequency_charts: should_render_deployment_frequency_charts.to_s } }
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 6a4dd88ae07..7d7b8a155ac 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -7,8 +7,6 @@
 #pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
   project_id: @project.id,
   params: params.to_json,
-  "help-page-path" => help_page_path('ci/quick_start/README'),
-  "auto-devops-help-path" => help_page_path('topics/autodevops/index.md'),
   "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'),
diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml
index 7d5cef2015d..7a3817fe87b 100644
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -6,7 +6,7 @@
   = s_('Pipeline|Run Pipeline')
 %hr
 
-- if Feature.enabled?(:new_pipeline_form, @project, default_enabled: true)
+- 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),
@@ -14,8 +14,7 @@
     ref_param: params[:ref] || @project.default_branch,
     var_param: params[:var].to_json,
     file_param: params[:file_var].to_json,
-    branch_refs: @project.repository.branch_names.to_json.html_safe,
-    tag_refs: @project.repository.tag_names.to_json.html_safe,
+    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 b431ef202b3..68c80833299 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -26,4 +26,4 @@
 
   = render "projects/pipelines/with_tabs", pipeline: @pipeline, pipeline_has_errors: pipeline_has_errors
 
-.js-pipeline-details-vue{ data: { endpoint: project_pipeline_path(@project, @pipeline, format: :json), pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid } }
+.js-pipeline-details-vue{ data: { endpoint: project_pipeline_path(@project, @pipeline, format: :json), metrics_path: namespace_project_ci_prometheus_metrics_histograms_path(namespace_id: @project.namespace, project_id: @project, format: :json), pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@pipeline) } }
diff --git a/app/views/projects/project_members/_groups.html.haml b/app/views/projects/project_members/_groups.html.haml
deleted file mode 100644
index fe8a50ebb42..00000000000
--- a/app/views/projects/project_members/_groups.html.haml
+++ /dev/null
@@ -1,11 +0,0 @@
-.card.card-without-border
-  = render 'shared/members/tab_pane/header' do
-    = render 'shared/members/tab_pane/title' do
-      = html_escape(_("Groups with access to %{strong_open}%{project_name}%{strong_close}")) % { project_name: sanitize(@project.name, tags: []), strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
-    = form_tag project_project_members_path(@project), method: :get, class: 'user-search-form gl-mx-n3 gl-my-n3', data: { testid: 'group-link-search-form' } do
-      .gl-px-3.gl-py-2
-        .search-control-wrap.gl-relative
-          = render 'shared/members/search_field', name: 'search_groups'
-  %ul.content-list.members-list{ data: { testid: 'project-member-groups' } }
-    - @group_links.each do |group_link|
-      = render 'shared/members/group', group_link: group_link, can_admin_member: can_manage_project_members?(@project), group_link_path: project_group_link_path(@project, group_link)
diff --git a/app/views/projects/project_members/_team.html.haml b/app/views/projects/project_members/_team.html.haml
deleted file mode 100644
index 24ca7ebded9..00000000000
--- a/app/views/projects/project_members/_team.html.haml
+++ /dev/null
@@ -1,22 +0,0 @@
-- project = local_assigns.fetch(:project)
-- members = local_assigns.fetch(:members)
-- group = local_assigns.fetch(:group)
-- current_user_is_group_owner = local_assigns.fetch(:current_user_is_group_owner)
-
-.card.card-without-border
-  = render 'shared/members/tab_pane/header' do
-    = render 'shared/members/tab_pane/title' do
-      = html_escape(_("Members of %{strong_open}%{project_name}%{strong_close}")) % { project_name: sanitize(project.name, tags: []), strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
-    = form_tag project_project_members_path(project), method: :get, class: 'user-search-form gl-display-flex gl-md-align-items-center gl-flex-wrap gl-flex-direction-column gl-md-flex-direction-row gl-mx-n3 gl-my-n3', data: { testid: 'user-search-form' } do
-      .gl-px-3.gl-py-2
-        .search-control-wrap.gl-relative
-          = render 'shared/members/search_field'
-      = render 'shared/members/tab_pane/form_item' do
-        = label_tag :sort_by, _('Sort by'), class: 'label-bold gl-mr-2 gl-mb-0 gl-py-2 align-self-md-center'
-        = render 'shared/members/sort_dropdown'
-  %ul.content-list.members-list{ data: { qa_selector: 'members_list', testid: 'members-table' } }
-    = render partial: 'shared/members/member',
-             collection: members, as: :member,
-             locals: { membership_source: project,
-                       group: group,
-                       current_user_is_group_owner: current_user_is_group_owner }
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index beb435d268a..c88dae079ae 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -1,6 +1,5 @@
+- add_page_specific_style 'page_bundles/members'
 - page_title _("Members")
-- group = @project.group
-- vue_project_members_list_enabled = Feature.enabled?(:vue_project_members_list, @project, default_enabled: :yaml)
 
 .js-remove-member-modal
 .row.gl-mt-3
@@ -18,8 +17,9 @@
                 %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 }
         .col-md-12.col-lg-6
-          .gl-display-flex.gl-flex-wrap.gl-lg-justify-content-end.gl-mx-n2.gl-mb-3
-            .js-invite-members-trigger.gl-px-2.gl-sm-w-auto.gl-w-full.gl-mb-4{ data: { classes: 'btn btn-success gl-button gl-mt-3 gl-sm-w-auto gl-w-full', display_text: _('Invite members') } }
+          .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') } }
         = render 'projects/invite_members_modal', project: @project
 
     - else
@@ -75,44 +75,22 @@
             %span.badge.badge-pill= @requesters.count
     .tab-content
       #tab-members.tab-pane{ class: ('active' unless groups_tab_active?) }
-        - if vue_project_members_list_enabled
-          .js-project-members-list{ data: project_members_list_data_attributes(@project, @project_members) }
-            .loading
-              .spinner.spinner-md
-        - else
-          = render 'projects/project_members/team', project: @project, group: group, members: @project_members, current_user_is_group_owner: current_user_is_group_owner?(@project)
+        .js-project-members-list{ data: project_members_list_data_attributes(@project, @project_members) }
+          .loading
+            .spinner.spinner-md
         = paginate @project_members, theme: "gitlab", params: { search_groups: nil }
       - if show_groups?(@group_links)
         #tab-groups.tab-pane{ class: ('active' if groups_tab_active?) }
-          - if vue_project_members_list_enabled
-            .js-project-group-links-list{ data: project_group_links_list_data_attributes(@project, @group_links) }
-              .loading
-                .spinner.spinner-md
-          - else
-            = render 'projects/project_members/groups', group_links: @group_links
+          .js-project-group-links-list{ data: project_group_links_list_data_attributes(@project, @group_links) }
+            .loading
+              .spinner.spinner-md
       - if show_invited_members?(@project, @invited_members)
         #tab-invited-members.tab-pane
-          - if vue_project_members_list_enabled
-            .js-project-invited-members-list{ data: project_members_list_data_attributes(@project, @invited_members) }
-              .loading
-                .spinner.spinner-md
-          - else
-            .card.card-without-border
-              = render 'shared/members/tab_pane/header' do
-                = render 'shared/members/tab_pane/title' do
-                  = html_escape(_('Members invited to %{strong_start}%{project_name}%{strong_end}')) % { project_name: @project.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-              %ul.content-list.members-list
-                = render partial: 'shared/members/member', collection: @invited_members, as: :member, locals: { membership_source: @project, group: group, current_user_is_group_owner: current_user_is_group_owner?(@project) }
+          .js-project-invited-members-list{ data: project_members_list_data_attributes(@project, @invited_members) }
+            .loading
+              .spinner.spinner-md
       - if show_access_requests?(@project, @requesters)
         #tab-access-requests.tab-pane
-          - if vue_project_members_list_enabled
-            .js-project-access-requests-list{ data: project_members_list_data_attributes(@project, @requesters) }
-              .loading
-                .spinner.spinner-md
-          - else
-            .card.card-without-border
-              = render 'shared/members/tab_pane/header' do
-                = render 'shared/members/tab_pane/title' do
-                  = html_escape(_('Users requesting access to %{strong_start}%{project_name}%{strong_end}')) % { project_name: @project.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-              %ul.content-list.members-list
-                = render partial: 'shared/members/member', collection: @requesters, as: :member, locals: { membership_source: @project, group: group }
+          .js-project-access-requests-list{ data: project_members_list_data_attributes(@project, @requesters) }
+            .loading
+              .spinner.spinner-md
diff --git a/app/views/projects/project_templates/_project_fields_form.html.haml b/app/views/projects/project_templates/_project_fields_form.html.haml
index 201e2d5b5fb..7908550ca88 100644
--- a/app/views/projects/project_templates/_project_fields_form.html.haml
+++ b/app/views/projects/project_templates/_project_fields_form.html.haml
@@ -8,5 +8,5 @@
           .selected-icon.gl-mr-3
           .selected-template
       .input-group-append
-        %button.btn.btn-default.change-template{ type: "button" }
+        %button.btn.gl-button.btn-default.change-template{ type: "button" }
           = _('Change template')
diff --git a/app/views/projects/protected_branches/shared/_branches_list.html.haml b/app/views/projects/protected_branches/shared/_branches_list.html.haml
index f07de81d7fd..522e9888bc6 100644
--- a/app/views/projects/protected_branches/shared/_branches_list.html.haml
+++ b/app/views/projects/protected_branches/shared/_branches_list.html.haml
@@ -23,6 +23,12 @@
           %th
             = s_("ProtectedBranch|Allowed to push")
 
+          - if ::Feature.enabled?(:allow_force_push_to_protected_branches, @project)
+            %th
+              = s_("ProtectedBranch|Allow force push")
+              %span.has-tooltip{ data: { container: 'body' }, title: s_('ProtectedBranch|Allow force push for all users with push access.'), 'aria-hidden': 'true' }
+                = sprite_icon('question', size: 16, css_class: 'gl-text-gray-500')
+
           = render_if_exists 'projects/protected_branches/ee/code_owner_approval_table_head'
 
           - if can_admin_project
diff --git a/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml b/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
index 6ce01566a42..ae03b198bc9 100644
--- a/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
@@ -21,6 +21,13 @@
         = f.label :push_access_levels_attributes, s_("ProtectedBranch|Allowed to push:"), class: 'col-md-2 text-left text-md-right'
         .col-md-10
           = yield :push_access_levels
+      - if ::Feature.enabled?(:allow_force_push_to_protected_branches, @project)
+        .form-group.row
+          = f.label :allow_force_push, s_("ProtectedBranch|Allow force push:"), class: 'col-md-2 gl-text-left text-md-right'
+          .col-md-10
+            = render "shared/buttons/project_feature_toggle", class_list: "js-force-push-toggle project-feature-toggle"
+            .form-text.gl-text-gray-600.gl-mt-0
+              = s_("ProtectedBranch|Allow force push for all users with push access.")
       = render_if_exists 'projects/protected_branches/ee/code_owner_approval_form', f: f
     .card-footer
-      = f.submit s_('ProtectedBranch|Protect'), class: 'btn-success btn', disabled: true, data: { qa_selector: 'protect_button' }
+      = f.submit s_('ProtectedBranch|Protect'), class: 'btn-success gl-button btn', disabled: true, data: { qa_selector: 'protect_button' }
diff --git a/app/views/projects/protected_branches/shared/_index.html.haml b/app/views/projects/protected_branches/shared/_index.html.haml
index 1d3e3fb11ae..c2a5efa7b7c 100644
--- a/app/views/projects/protected_branches/shared/_index.html.haml
+++ b/app/views/projects/protected_branches/shared/_index.html.haml
@@ -2,9 +2,9 @@
 
 %section.settings.no-animate#js-protected-branches-settings{ class: ('expanded' if expanded), data: { qa_selector: 'protected_branches_settings_content' } }
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       Protected branches
-    %button.btn.js-settings-toggle.qa-expand-protected-branches{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle.qa-expand-protected-branches{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
       Keep stable branches secure, and force developers to use merge requests. #{link_to "What are protected branches?", help_page_path("user/project/protected_branches")}
diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/shared/_index.html.haml
index 67eadd39ed6..aab4d366605 100644
--- a/app/views/projects/protected_tags/shared/_index.html.haml
+++ b/app/views/projects/protected_tags/shared/_index.html.haml
@@ -2,9 +2,9 @@
 
 %section.settings.no-animate#js-protected-tags-settings{ class: ('expanded' if expanded), data: { qa_selector: 'protected_tag_settings_content' } }
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       Protected tags
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
       Limit access to creating and updating tags. #{link_to "What are protected tags?", help_page_path("user/project/protected_tags")}
diff --git a/app/views/projects/registry/repositories/index.html.haml b/app/views/projects/registry/repositories/index.html.haml
index a2009b96c0d..bbef5150a62 100644
--- a/app/views/projects/registry/repositories/index.html.haml
+++ b/app/views/projects/registry/repositories/index.html.haml
@@ -15,7 +15,6 @@
     "expiration_policy_help_page_path" => help_page_path('user/packages/container_registry/index', anchor: 'expiration-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'),
-    "cleanup_policies_help_page_path" => help_page_path('user/packages/container_registry/index', anchor: 'how-the-cleanup-policy-works'),
     "project_path": @project.full_path,
     "gid_prefix": container_repository_gid_prefix,
     "is_admin": current_user&.admin.to_s,
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index 41159df1435..7f5acbbe890 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -40,5 +40,5 @@
   - if runner.tags.present?
     %p
       - runner.tags.map(&:name).sort.each do |tag|
-        %span.badge.badge-primary
+        %span.badge.gl-badge.sm.badge-pill.badge-primary
           = tag
diff --git a/app/views/projects/security/configuration/show.html.haml b/app/views/projects/security/configuration/show.html.haml
index fe47ce327c2..4d6feb9de6d 100644
--- a/app/views/projects/security/configuration/show.html.haml
+++ b/app/views/projects/security/configuration/show.html.haml
@@ -1,4 +1,4 @@
 - breadcrumb_title _("Security Configuration")
 - page_title _("Security Configuration")
 
-#js-security-configuration-static{ data: {project_path: @project.full_path} }
+#js-security-configuration-static{ data: { project_path: @project.full_path, upgrade_path: security_upgrade_path } }
diff --git a/app/views/projects/services/prometheus/_configuration_banner.html.haml b/app/views/projects/services/prometheus/_configuration_banner.html.haml
index 717df405fa7..9b8da857398 100644
--- a/app/views/projects/services/prometheus/_configuration_banner.html.haml
+++ b/app/views/projects/services/prometheus/_configuration_banner.html.haml
@@ -3,7 +3,7 @@
 
 - if service.manual_configuration?
   .info-well
-    = s_('PrometheusService|To enable the installation of Prometheus on your clusters, deactivate the manual configuration below')
+    = s_('PrometheusService|To enable the installation of Prometheus on your clusters, deactivate the manual configuration.')
 - else
   .container-fluid
     .row
@@ -13,14 +13,14 @@
             = image_tag 'illustrations/monitoring/getting_started.svg'
         .col-sm-10
           %p.text-success.gl-mt-3
-            = s_('PrometheusService|Prometheus is being automatically managed on your clusters')
+            = s_('PrometheusService|GitLab is managing Prometheus on your clusters.')
           = link_to s_('PrometheusService|Manage clusters'), project_clusters_path(project), class: 'btn gl-button'
       - else
         .col-sm-2
           = image_tag 'illustrations/monitoring/loading.svg'
         .col-sm-10
           %p.gl-mt-3
-            = s_('PrometheusService|Automatically deploy and configure Prometheus on your clusters to monitor your project’s environments')
+            = s_('PrometheusService|Automatically deploy and configure Prometheus on your clusters to monitor your project’s environments.')
           = link_to s_('PrometheusService|Install Prometheus on clusters'), project_clusters_path(project), class: 'btn gl-button btn-success'
 
 %hr
diff --git a/app/views/projects/services/prometheus/_help.html.haml b/app/views/projects/services/prometheus/_help.html.haml
index c5b3fd31efa..04bd800c47a 100644
--- a/app/views/projects/services/prometheus/_help.html.haml
+++ b/app/views/projects/services/prometheus/_help.html.haml
@@ -4,4 +4,4 @@
 %h4.gl-mb-3
   = s_('PrometheusService|Manual configuration')
 %p
-  = s_('PrometheusService|Select the Active checkbox to override the Auto Configuration with custom settings. If unchecked, Auto Configuration settings are used.')
+  = s_('PrometheusService|Auto configuration settings are used unless you override their values here.')
diff --git a/app/views/projects/settings/_general.html.haml b/app/views/projects/settings/_general.html.haml
index 3b03e213983..d1a95886115 100644
--- a/app/views/projects/settings/_general.html.haml
+++ b/app/views/projects/settings/_general.html.haml
@@ -1,13 +1,12 @@
-= form_for [@project], remote: true, html: { multipart: true, class: "edit-project js-general-settings-form" }, authenticity_token: true do |f|
+= form_for [@project], html: { multipart: true, class: "edit-project js-general-settings-form" }, authenticity_token: true do |f|
   %input{ name: 'update_section', type: 'hidden', value: 'js-general-settings' }
-  = form_errors(@project)
 
   %fieldset
     .row
       .form-group.col-md-5
         = f.label :name, class: 'label-bold', for: 'project_name_edit' do
           = _('Project name')
-        = f.text_field :name, class: 'form-control gl-form-input qa-project-name-field', id: "project_name_edit"
+        = f.text_field :name, class: 'form-control gl-form-input', id: "project_name_edit", data: { qa_selector: 'project_name_field' }
 
       .form-group.col-md-7
         = f.label :id, class: 'label-bold' do
@@ -40,4 +39,4 @@
       %hr
       = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-success gl-mt-6 qa-save-naming-topics-avatar-button"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success gl-mt-6", data: { qa_selector: 'save_naming_topics_avatar_button' }
diff --git a/app/views/projects/settings/ci_cd/_badge.html.haml b/app/views/projects/settings/ci_cd/_badge.html.haml
index 2c3e6387972..38d8c8d26e1 100644
--- a/app/views/projects/settings/ci_cd/_badge.html.haml
+++ b/app/views/projects/settings/ci_cd/_badge.html.haml
@@ -12,21 +12,21 @@
           = render 'shared/ref_switcher', destination: 'badges', align_right: true
       .card-body
         .row
-          .col-md-2.text-center
+          .col-md-2.gl-text-center
             Markdown
           .col-md-10.code.js-syntax-highlight
             = highlight_badge('.md', badge.to_markdown, language: 'markdown')
         .row
           %hr
         .row
-          .col-md-2.text-center
+          .col-md-2.gl-text-center
             HTML
           .col-md-10.code.js-syntax-highlight
             = highlight_badge('.html', badge.to_html, language: 'html')
         .row
           %hr
         .row
-          .col-md-2.text-center
+          .col-md-2.gl-text-center
             AsciiDoc
           .col-md-10.code.js-syntax-highlight
             = highlight_badge('.adoc', badge.to_asciidoc)
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index e0c4a3d624e..3b0073848a6 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -96,7 +96,7 @@
             = html_escape(_('The regular expression used to find test coverage output in the job log. For example, use %{regex} for Simplecov (Ruby). Leave blank to disable.')) % { regex: '<code>\(\d+.\d+%\)</code>'.html_safe }
             = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'test-coverage-parsing'), target: '_blank'
 
-        = f.submit _('Save changes'), class: "btn btn-success", data: { qa_selector: 'save_general_pipelines_changes_button' }
+        = f.submit _('Save changes'), class: "btn gl-button btn-success", data: { qa_selector: 'save_general_pipelines_changes_button' }
 
 %hr
 
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index 51abb8ed791..cca980b5359 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -1,13 +1,15 @@
 - @content_class = "limit-container-width" unless fluid_layout
-- page_title _("CI / CD Settings")
-- page_title _("CI / CD")
+- page_title _("CI/CD Settings")
+- page_title _("CI/CD")
 
 - expanded = expanded_by_default?
 - general_expanded = @project.errors.empty? ? expanded : true
 
+- enable_search_settings locals: { container_class: 'gl-my-5' }
+
 %section.settings#js-general-pipeline-settings.no-animate{ class: ('expanded' if general_expanded), data: { qa_selector: 'general_pipelines_settings_content' } }
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _("General pipelines")
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
@@ -18,7 +20,7 @@
 
 %section.settings#autodevops-settings.no-animate{ class: ('expanded' if expanded), data: { qa_selector: 'autodevops_settings_content' } }
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_('CICD|Auto DevOps')
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
@@ -35,7 +37,7 @@
 
 %section.settings.no-animate#js-runners-settings{ class: ('expanded' if expanded || params[:expand_runners]), data: { qa_selector: 'runners_settings_content' } }
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _("Runners")
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
@@ -48,7 +50,7 @@
 - if Gitlab::CurrentSettings.current_application_settings.keep_latest_artifact?
   %section.settings.no-animate#js-artifacts-settings{ class: ('expanded' if expanded) }
     .settings-header
-      %h4
+      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
         = _("Artifacts")
       %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
@@ -65,7 +67,7 @@
 
 %section.settings.no-animate#js-pipeline-triggers{ class: ('expanded' if expanded) }
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _("Pipeline triggers")
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
@@ -78,7 +80,7 @@
 - if settings_container_registry_expiration_policy_available?(@project)
   %section.settings.no-animate#js-registry-policies{ class: ('expanded' if expanded) }
     .settings-header
-      %h4
+      %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')
@@ -93,7 +95,7 @@
 - if can?(current_user, :create_freeze_period, @project)
   %section.settings.no-animate#js-deploy-freeze-settings{ class: ('expanded' if expanded) }
     .settings-header
-      %h4
+      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
         = _("Deploy freezes")
       %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
diff --git a/app/views/projects/settings/operations/_configuration_banner.html.haml b/app/views/projects/settings/operations/_configuration_banner.html.haml
index 69bbd0edac7..888625689f1 100644
--- a/app/views/projects/settings/operations/_configuration_banner.html.haml
+++ b/app/views/projects/settings/operations/_configuration_banner.html.haml
@@ -3,7 +3,7 @@
 
 - if service.manual_configuration?
   .info-well.p-2.mt-2
-    = s_('PrometheusService|To enable the installation of Prometheus on your clusters, deactivate the manual configuration below')
+    = s_('PrometheusService|To enable the installation of Prometheus on your clusters, deactivate the manual configuration.')
 - else
   .container-fluid
     .row
@@ -13,12 +13,12 @@
             = image_tag 'illustrations/monitoring/getting_started.svg'
         .col-sm-10
           %p.text-success.gl-mt-3
-            = s_('PrometheusService|Prometheus is being automatically managed on your clusters')
+            = s_('PrometheusService|GitLab manages Prometheus on your clusters.')
           = link_to s_('PrometheusService|Manage clusters'), project_clusters_path(project), class: 'btn'
       - else
         .col-sm-2
           = image_tag 'illustrations/monitoring/loading.svg'
         .col-sm-10
           %p.gl-mt-3
-            = s_('PrometheusService|Automatically deploy and configure Prometheus on your clusters to monitor your project’s environments')
+            = s_('PrometheusService|Monitor your project’s environments by deploying and configuring Prometheus on your clusters.')
           = link_to s_('PrometheusService|Install Prometheus on clusters'), project_clusters_path(project), class: 'btn btn-success'
diff --git a/app/views/projects/settings/operations/_prometheus.html.haml b/app/views/projects/settings/operations/_prometheus.html.haml
index 7ccc829662d..ccf5b5dc75f 100644
--- a/app/views/projects/settings/operations/_prometheus.html.haml
+++ b/app/views/projects/settings/operations/_prometheus.html.haml
@@ -14,4 +14,4 @@
     %b.gl-mb-3
       = s_('PrometheusService|Manual configuration')
     %p
-      = s_('PrometheusService|Select the Active checkbox to override the Auto Configuration with custom settings. If unchecked, Auto Configuration settings are used.')
+      = s_('PrometheusService|Auto configuration settings are used unless you override their values here.')
diff --git a/app/views/projects/settings/operations/show.html.haml b/app/views/projects/settings/operations/show.html.haml
index 73722a5a789..5ba796f5720 100644
--- a/app/views/projects/settings/operations/show.html.haml
+++ b/app/views/projects/settings/operations/show.html.haml
@@ -2,6 +2,8 @@
 - page_title _('Operations Settings')
 - breadcrumb_title _('Operations Settings')
 
+- enable_search_settings locals: { container_class: 'gl-my-5' }
+
 = render 'projects/settings/operations/alert_management'
 = render 'projects/settings/operations/incidents'
 = render 'projects/settings/operations/error_tracking'
diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml
index 24fc137fd29..8ac42ce3f81 100644
--- a/app/views/projects/settings/repository/show.html.haml
+++ b/app/views/projects/settings/repository/show.html.haml
@@ -3,6 +3,8 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - deploy_token_description = s_('DeployTokens|Deploy tokens allow access to packages, your repository, and registry images.')
 
+- enable_search_settings locals: { container_class: 'gl-my-5' }
+
 = render "projects/default_branch/show"
 = render_if_exists "projects/push_rules/index"
 = render "projects/mirrors/mirror_repos"
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index e1774c955bc..40faf91eadf 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -6,9 +6,6 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_path(@project, rss_url_options), title: "#{@project.name} activity")
 
-= content_for :invite_members_sidebar do
-  = render partial: 'projects/invite_members_link'
-
 = render partial: 'flash_messages', locals: { project: @project }
 
 = render "projects/last_push"
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index 61b357831fd..1072d5bce06 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -2,7 +2,7 @@
 - release = @releases.find { |release| release.tag == tag.name }
 - commit_status = @tag_pipeline_statuses[tag.name] unless @tag_pipeline_statuses.nil?
 
-%li.flex-row.allow-wrap.js-tag-list
+%li.flex-row.js-tag-list{ class: "gl-white-space-normal!" }
   .row-main-content
     = sprite_icon('tag')
     = link_to tag.name, project_tag_path(@project, tag.name), class: 'item-title ref-name'
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 6d33fbb535e..340f9811f9a 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -7,7 +7,7 @@
 .tree-controls
   .d-block.d-sm-flex.flex-wrap.align-items-start.gl-children-ml-sm-3<
     = render_if_exists 'projects/tree/lock_link'
-    #js-tree-history-link.d-inline-block{ data: { history_link: project_commits_path(@project, @ref) } }
+    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
 
     = render 'projects/find_file_link'
     = render 'shared/web_ide_button', blob: nil
diff --git a/app/views/projects/update.js.haml b/app/views/projects/update.js.haml
deleted file mode 100644
index c5eecc900b2..00000000000
--- a/app/views/projects/update.js.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-- if @project.valid?
-  :plain
-    location.href = "#{edit_project_path(@project, anchor: params[:update_section])}";
-    location.reload();
-- else
-  :plain
-    $(".flash-container").html("#{escape_javascript(render('errors'))}");
-    $('.save-project-loader').hide();
-    $('.project-edit-container').show();
-    $('.edit-project .js-btn-success-general-project-settings').enable();