Add latest changes from gitlab-org/gitlab@13-2-stable-ee

159 files changed, 533 insertions, 440 deletions

diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 20d4084f428..1562cc065f1 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -1,27 +1,22 @@
 - is_project_overview = local_assigns.fetch(:is_project_overview, false)
-- commit = local_assigns.fetch(:commit) { @repository.commit }
 - ref = local_assigns.fetch(:ref) { current_ref }
 - project = local_assigns.fetch(:project) { @project }
-- content_url = local_assigns.fetch(:content_url) { @tree.readme ? project_blob_path(@project, tree_join(@ref, @tree.readme.path)) : project_tree_path(@project, @ref) }
 - show_auto_devops_callout = show_auto_devops_callout?(@project)
+- add_page_startup_api_call logs_file_project_ref_path(@project, ref, @path, format: "json", offset: 0)
+- if @tree.readme
+  - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, @tree.readme.path), viewer: "rich", format: "json")
 
 #tree-holder.tree-holder.clearfix
   .nav-block
     = render 'projects/tree/tree_header', tree: @tree
 
-  - if vue_file_list_enabled?
-    #js-last-commit
-  - elsif commit
-    = render 'shared/commit_well', commit: commit, ref: ref, project: project
+  #js-last-commit
 
   - if is_project_overview
-    .project-buttons.append-bottom-default{ class: ("js-show-on-project-root" if vue_file_list_enabled?) }
+    .project-buttons.gl-mb-3.js-show-on-project-root
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout)
 
-  - if vue_file_list_enabled?
-    #js-tree-list{ data: vue_file_list_data(project, ref) }
-    - if can_edit_tree?
-      = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post
-      = render 'projects/blob/new_dir'
-  - else
-    = render 'projects/tree/tree_content', tree: @tree, content_url: content_url
+  #js-tree-list{ data: vue_file_list_data(project, ref) }
+  - if can_edit_tree?
+    = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post
+    = render 'projects/blob/new_dir'
diff --git a/app/views/projects/_flash_messages.html.haml b/app/views/projects/_flash_messages.html.haml
index 4739689b419..ab8275ba5e4 100644
--- a/app/views/projects/_flash_messages.html.haml
+++ b/app/views/projects/_flash_messages.html.haml
@@ -9,4 +9,4 @@
       = render 'shared/auto_devops_implicitly_enabled_banner', project: project
     = render_if_exists 'projects/above_size_limit_warning', project: project
     = render_if_exists 'shared/shared_runners_minutes_limit', project: project, classes: [container_class, ("limit-container-width" unless fluid_layout)]
-    = render 'shared/namespace_storage_limit_alert', namespace: project.namespace, classes: [container_class, ("limit-container-width" unless fluid_layout)]
+    = render_if_exists 'shared/namespace_storage_limit_alert', namespace: project.namespace, classes: [container_class, ("limit-container-width" unless fluid_layout)]
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 6f8375f80be..9966baf78f4 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -3,14 +3,14 @@
 - max_project_topic_length = 15
 - emails_disabled = @project.emails_disabled?
 
-.project-home-panel{ class: [("empty-project" if empty_repo), ("js-show-on-project-root" if vue_file_list_enabled?)] }
+.project-home-panel.js-show-on-project-root{ class: [("empty-project" if empty_repo)] }
   .row.gl-mb-3
     .home-panel-title-row.col-md-12.col-lg-6.d-flex
-      .avatar-container.rect-avatar.s64.home-panel-avatar.append-right-default.float-none
+      .avatar-container.rect-avatar.s64.home-panel-avatar.gl-mr-3.float-none
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64)
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline
-          %h1.home-panel-title.gl-mt-3.append-bottom-5{ data: { qa_selector: 'project_name_content' } }
+          %h1.home-panel-title.gl-mt-3.gl-mb-2{ data: { qa_selector: 'project_name_content' } }
             = @project.name
             %span.visibility-icon.text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
               = visibility_level_icon(@project.visibility_level, fw: false, options: {class: 'icon'})
@@ -24,10 +24,10 @@
               = render 'shared/members/access_request_links', source: @project
           - if @project.tag_list.present?
             %span.home-panel-topic-list.mt-2.w-100.d-inline-flex
-              = sprite_icon('tag', size: 16, css_class: 'icon append-right-4')
+              = sprite_icon('tag', size: 16, css_class: 'icon gl-mr-2')
 
               - @project.topics_to_show.each do |topic|
-                - project_topics_classes = "badge badge-pill badge-secondary append-right-5"
+                - project_topics_classes = "badge badge-pill badge-secondary gl-mr-2"
                 - explore_project_topic_path = explore_projects_path(tag: topic)
                 - if topic.length > max_project_topic_length
                   %a{ class: "#{ project_topics_classes } str-truncated-30 has-tooltip", data: { container: "body" }, title: topic, href: explore_project_topic_path }
diff --git a/app/views/projects/_import_project_pane.html.haml b/app/views/projects/_import_project_pane.html.haml
index 3ae37254e39..bb278fbf311 100644
--- a/app/views/projects/_import_project_pane.html.haml
+++ b/app/views/projects/_import_project_pane.html.haml
@@ -9,7 +9,8 @@
       - if gitlab_project_import_enabled?
         .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
           = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit', **tracking_attrs(track_label, 'click_button', 'gitlab_export') do
-            = icon('gitlab', text: 'GitLab export')
+            = sprite_icon('tanuki')
+            = _("GitLab export")
 
       - if github_import_enabled?
         %div
@@ -32,7 +33,8 @@
         %div
           = link_to status_import_gitlab_path, class: "btn import_gitlab #{'how_to_import_link' unless gitlab_import_configured?}",
           **tracking_attrs(track_label, 'click_button', 'gitlab_com') do
-            = icon('gitlab', text: 'GitLab.com')
+            = sprite_icon('tanuki')
+            = _("GitLab.com")
           - unless gitlab_import_configured?
             = render 'projects/gitlab_import_modal'
 
diff --git a/app/views/projects/_merge_request_settings.html.haml b/app/views/projects/_merge_request_settings.html.haml
index dc3a3fcc647..5ffdeef3558 100644
--- a/app/views/projects/_merge_request_settings.html.haml
+++ b/app/views/projects/_merge_request_settings.html.haml
@@ -4,6 +4,9 @@
 
 = render 'projects/merge_request_merge_options_settings', project: @project, form: form
 
+- if Feature.enabled?(:squash_options, @project)
+  = render 'projects/merge_request_squash_options_settings', form: form
+
 = render 'projects/merge_request_merge_checks_settings', project: @project, form: form
 
 = render 'projects/merge_request_merge_suggestions_settings', project: @project, form: form
diff --git a/app/views/projects/_merge_request_squash_options_settings.html.haml b/app/views/projects/_merge_request_squash_options_settings.html.haml
new file mode 100644
index 00000000000..a5dbfeb16d8
--- /dev/null
+++ b/app/views/projects/_merge_request_squash_options_settings.html.haml
@@ -0,0 +1,42 @@
+- form = local_assigns.fetch(:form)
+
+= form.fields_for :project_setting do |settings|
+  .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.')
+      = link_to "What is squashing?",
+        help_page_path('user/project/merge_requests/squash_and_merge.md'),
+        target: '_blank'
+
+    .form-check.gl-mb-2
+      = settings.radio_button :squash_option, :never, class: "form-check-input"
+      = label_tag :project_project_setting_attributes_squash_option_never, class: 'form-check-label' do
+        .gl-font-weight-bold
+          = s_('ProjectSettings|Do not allow')
+        .text-secondary
+          = s_('ProjectSettings|Squashing is never performed and the checkbox is hidden.')
+
+    .form-check.gl-mb-2
+      = settings.radio_button :squash_option, :default_off, class: "form-check-input"
+      = label_tag :project_project_setting_attributes_squash_option_default_off, class: 'form-check-label' do
+        .gl-font-weight-bold
+          = s_('ProjectSettings|Allow')
+        .text-secondary
+          = s_('ProjectSettings|Checkbox is visible and unselected by default.')
+
+    .form-check.gl-mb-2
+      = settings.radio_button :squash_option, :default_on, class: "form-check-input"
+      = label_tag :project_project_setting_attributes_squash_option_default_on, class: 'form-check-label' do
+        .gl-font-weight-bold
+          = s_('ProjectSettings|Encourage')
+        .text-secondary
+          = s_('ProjectSettings|Checkbox is visible and selected by default.')
+
+    .form-check.gl-mb-2
+      = settings.radio_button :squash_option, :always, class: "form-check-input"
+      = label_tag :project_project_setting_attributes_squash_option_always, class: 'form-check-label' do
+        .gl-font-weight-bold
+          = s_('ProjectSettings|Require')
+        .text-secondary
+          = s_('ProjectSettings|Squashing is always performed. Checkbox is visible and selected, and users cannot change it.')
diff --git a/app/views/projects/_readme.html.haml b/app/views/projects/_readme.html.haml
index 32624ac225b..da3133dfe15 100644
--- a/app/views/projects/_readme.html.haml
+++ b/app/views/projects/_readme.html.haml
@@ -1,10 +1,14 @@
 - if (readme = @repository.readme) && readme.rich_viewer
+  .tree-holder
+    .nav-block.mt-0
+      = render 'projects/tree/tree_header', tree: @tree
   %article.file-holder.readme-holder{ id: 'readme', class: ("limited-width-container" unless fluid_layout) }
-    .js-file-title.file-title
-      = blob_icon readme.mode, readme.name
-      = link_to project_blob_path(@project, tree_join(@ref, readme.path)) do
-        %strong
-          = readme.name
+    .js-file-title.file-title-flex-parent
+      .file-header-content
+        = blob_icon readme.mode, readme.name
+        = link_to project_blob_path(@project, tree_join(@ref, readme.path)) do
+          %strong
+            = readme.name
     = render 'projects/blob/viewer', viewer: readme.rich_viewer, viewer_url: namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, readme.path), viewer: :rich, format: :json)
 
 - else
diff --git a/app/views/projects/_remove.html.haml b/app/views/projects/_remove.html.haml
index 6c84fbfeeb3..528d802261c 100644
--- a/app/views/projects/_remove.html.haml
+++ b/app/views/projects/_remove.html.haml
@@ -4,7 +4,6 @@
   %h4.danger-title= _('Remove project')
   %p
     %strong= _('Removing the project will delete its repository and all related resources including issues, merge requests etc.')
-  = form_tag(project_path(project), method: :delete) do
-    %p
-      %strong= _('Removed projects cannot be restored!')
-    = button_to _('Remove project'), '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_project_message(project) }
+  %p
+    %strong= _('Removed projects cannot be restored!')
+  #js-confirm-project-remove{ data: { form_path: project_path(project), confirm_phrase: project.path, warning_message: remove_project_message(project) } }
diff --git a/app/views/projects/_service_desk_settings.html.haml b/app/views/projects/_service_desk_settings.html.haml
new file mode 100644
index 00000000000..e6842bbb939
--- /dev/null
+++ b/app/views/projects/_service_desk_settings.html.haml
@@ -0,0 +1,19 @@
+- expanded = expanded_by_default?
+%section.settings.js-service-desk-setting-wrapper.no-animate#js-service-desk{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Service Desk')
+    %button.btn.js-settings-toggle
+      = expanded ? _('Collapse') : _('Expand')
+    - link_start = "<a href='#{help_page_path('user/project/service_desk')}' target='_blank' rel='noopener noreferrer'>".html_safe
+    %p= _('Enable/disable your service desk. %{link_start}Learn more about service desk%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+  .settings-content
+    - if ::Gitlab::ServiceDesk.supported?
+      .js-service-desk-setting-root{ data: { endpoint: project_service_desk_path(@project),
+        enabled: "#{@project.service_desk_enabled}",
+        incoming_email: (@project.service_desk_address if @project.service_desk_enabled),
+        selected_template: "#{@project.service_desk_setting&.issue_template_key}",
+        outgoing_name: "#{@project.service_desk_setting&.outgoing_name}",
+        project_key: "#{@project.service_desk_setting&.project_key}",
+        templates: issuable_templates_names(Issue.new) } }
+    - elsif show_callout?('promote_service_desk_dismissed')
+      = render 'shared/promotions/promote_servicedesk'
diff --git a/app/views/projects/_wiki.html.haml b/app/views/projects/_wiki.html.haml
index 6f90bf50b91..991c95153da 100644
--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
@@ -1,6 +1,6 @@
 - if @wiki_home.present?
   %div{ class: container_class }
-    .md.prepend-top-default.append-bottom-default
+    .md.gl-mt-3.gl-mb-3
       = render_wiki_content(@wiki_home)
 - else
   - can_create_wiki = can?(current_user, :create_wiki, @project)
diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml
index 7abac2d14e4..ff56cb53720 100644
--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
@@ -1,5 +1,5 @@
 - breadcrumb_title _('Artifacts')
-- page_title @path.presence, 'Artifacts', "#{@build.name} (##{@build.id})", 'Jobs'
+- page_title @path.presence, _('Artifacts'), "#{@build.name} (##{@build.id})", _('Jobs')
 
 = render "projects/jobs/header"
 
diff --git a/app/views/projects/artifacts/file.html.haml b/app/views/projects/artifacts/file.html.haml
index 808b4acc8f3..1ad70506be4 100644
--- a/app/views/projects/artifacts/file.html.haml
+++ b/app/views/projects/artifacts/file.html.haml
@@ -1,4 +1,4 @@
-- page_title @path, 'Artifacts', "#{@build.name} (##{@build.id})", 'Jobs'
+- page_title @path, _('Artifacts'), "#{@build.name} (##{@build.id})", _('Jobs')
 
 = render "projects/jobs/header"
 
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index 0591c3180ea..a2d6b2e18a9 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -1,4 +1,4 @@
-- page_title "Blame", @blob.path, @ref
+- page_title _("Blame"), @blob.path, @ref
 - link_icon = icon("link")
 
 #blob-content-holder.tree-holder
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 032df24a603..b06ae31e73f 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -2,19 +2,19 @@
 - file_name = params[:id].split("/").last ||= ""
 - is_markdown = Gitlab::MarkupHelper.gitlab_markdown?(file_name)
 
-.file-holder-bottom-radius.file-holder.file.append-bottom-default
+.file-holder-bottom-radius.file-holder.file.gl-mb-3
   .js-file-title.file-title.align-items-center.clearfix{ data: { current_action: action } }
-    .editor-ref.block-truncated
+    .editor-ref.block-truncated.has-tooltip{ title: ref }
       = sprite_icon('fork', size: 12)
       = ref
     - if current_action?(:edit) || current_action?(:update)
-      %span.pull-left.append-right-10
+      %span.pull-left.gl-mr-3
       = text_field_tag 'file_path', (params[:file_path] || @path),
         class: 'form-control new-file-path js-file-path-name-input'
       = render 'template_selectors'
 
     - if current_action?(:new) || current_action?(:create)
-      %span.pull-left.append-right-10
+      %span.pull-left.gl-mr-3
         \/
       = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
         required: true, class: 'form-control new-file-name js-file-path-name-input', value: params[:file_name] || (should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : '')
@@ -40,7 +40,7 @@
         = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2', tabindex: '-1'
 
   .file-editor.code
-    %pre.js-edit-mode-pane.qa-editor#editor= params[:content] || local_assigns[:blob_data]
+    %pre.js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }= params[:content] || local_assigns[:blob_data]
     - if local_assigns[:path]
       .js-edit-mode-pane#preview.hide
         .center
diff --git a/app/views/projects/blob/_header_content.html.haml b/app/views/projects/blob/_header_content.html.haml
index 6527c6021a0..32adfb320ff 100644
--- a/app/views/projects/blob/_header_content.html.haml
+++ b/app/views/projects/blob/_header_content.html.haml
@@ -10,4 +10,4 @@
     = number_to_human_size(blob.raw_size)
 
   - if blob.stored_externally? && blob.external_storage == :lfs
-    %span.badge.label-lfs.append-right-5 LFS
+    %span.badge.label-lfs.gl-mr-2 LFS
diff --git a/app/views/projects/blob/_viewer.html.haml b/app/views/projects/blob/_viewer.html.haml
index b9663bbba15..a0d82ffd2c7 100644
--- a/app/views/projects/blob/_viewer.html.haml
+++ b/app/views/projects/blob/_viewer.html.haml
@@ -5,7 +5,7 @@
 - external_embed = local_assigns.fetch(:external_embed, false)
 
 - viewer_url = local_assigns.fetch(:viewer_url) { url_for(safe_params.merge(viewer: viewer.type, format: :json)) } if load_async
-.blob-viewer{ data: { type: viewer.type, rich_type: rich_type, url: viewer_url }, class: ('hidden' if hidden) }
+.blob-viewer{ data: { type: viewer.type, rich_type: rich_type, url: viewer_url, path: viewer.blob.path }, class: ('hidden' if hidden) }
   - if render_error
     = render 'projects/blob/render_error', viewer: viewer
   - elsif load_async
diff --git a/app/views/projects/blob/_viewer_switcher.html.haml b/app/views/projects/blob/_viewer_switcher.html.haml
index 5e0d70b2ca9..df81e509c85 100644
--- a/app/views/projects/blob/_viewer_switcher.html.haml
+++ b/app/views/projects/blob/_viewer_switcher.html.haml
@@ -5,8 +5,8 @@
   .btn-group.js-blob-viewer-switcher.ml-2{ role: "group" }>
     - simple_label = "Display #{simple_viewer.switcher_title}"
     %button.btn.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => simple_label, title: simple_label, data: { viewer: 'simple', container: 'body' } }>
-      = icon(simple_viewer.switcher_icon)
+      = sprite_icon(simple_viewer.switcher_icon)
 
     - rich_label = "Display #{rich_viewer.switcher_title}"
     %button.btn.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
-      = icon(rich_viewer.switcher_icon)
+      = sprite_icon(rich_viewer.switcher_icon)
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index 870e37488cf..1319c58eb38 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -1,7 +1,8 @@
-- breadcrumb_title "Repository"
-- page_title "Edit", @blob.path, @ref
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('lib/ace.js')
+- breadcrumb_title _("Repository")
+- page_title _("Edit"), @blob.path, @ref
+- unless Feature.enabled?(:monaco_blobs)
+  - content_for :page_specific_javascripts do
+    = page_specific_javascript_tag('lib/ace.js')
 
 - if @conflict
   .alert.alert-danger
diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml
index 8f166e9aa16..2420c4a4bd5 100644
--- a/app/views/projects/blob/new.html.haml
+++ b/app/views/projects/blob/new.html.haml
@@ -1,7 +1,9 @@
-- breadcrumb_title "Repository"
-- page_title "New File", @path.presence, @ref
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('lib/ace.js')
+- breadcrumb_title _("Repository")
+- page_title _("New File"), @path.presence, @ref
+- unless Feature.enabled?(:monaco_blobs)
+  - content_for :page_specific_javascripts do
+    = page_specific_javascript_tag('lib/ace.js')
+
 .editor-title-row
   %h3.page-title.blob-new-page-title
     New file
diff --git a/app/views/projects/blob/viewers/_license.html.haml b/app/views/projects/blob/viewers/_license.html.haml
index fb9d0b99d09..7ac0e7bb579 100644
--- a/app/views/projects/blob/viewers/_license.html.haml
+++ b/app/views/projects/blob/viewers/_license.html.haml
@@ -1,6 +1,6 @@
 - license = viewer.license
 
-= icon('balance-scale fw')
+= sprite_icon('scale', size: 16)
 This project is licensed under the
 = succeed '.' do
   %strong= license.name
diff --git a/app/views/projects/blob/viewers/_loading.html.haml b/app/views/projects/blob/viewers/_loading.html.haml
index df1f3e4e01b..5fbe9b0df0c 100644
--- a/app/views/projects/blob/viewers/_loading.html.haml
+++ b/app/views/projects/blob/viewers/_loading.html.haml
@@ -1,2 +1,2 @@
-.text-center.prepend-top-default.append-bottom-default
+.text-center.gl-mt-3.gl-mb-3
   = icon('spinner spin 2x', 'aria-hidden' => 'true', 'aria-label' => 'Loading content…', class: 'qa-spinner')
diff --git a/app/views/projects/blob/viewers/_metrics_dashboard_yml.html.haml b/app/views/projects/blob/viewers/_metrics_dashboard_yml.html.haml
index fc8683e1d19..ecbf6d9005d 100644
--- a/app/views/projects/blob/viewers/_metrics_dashboard_yml.html.haml
+++ b/app/views/projects/blob/viewers/_metrics_dashboard_yml.html.haml
@@ -8,4 +8,4 @@
     - viewer.errors.messages.each do |error|
       %li= error.join(': ')
 
-= link_to _('Learn more'), help_page_path('user/project/integrations/prometheus.md', anchor: 'defining-custom-dashboards-per-project')
+= link_to _('Learn more'), help_page_path('operations/metrics/dashboards/index.md', anchor: 'defining-custom-dashboards-per-project')
diff --git a/app/views/projects/blob/viewers/_sketch.html.haml b/app/views/projects/blob/viewers/_sketch.html.haml
index b4b6492b92f..aa8d1dd326f 100644
--- a/app/views/projects/blob/viewers/_sketch.html.haml
+++ b/app/views/projects/blob/viewers/_sketch.html.haml
@@ -1,3 +1,3 @@
 .file-content#js-sketch-viewer{ data: { endpoint: blob_raw_path } }
-  .js-loading-icon.text-center.prepend-top-default.append-bottom-default.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
+  .js-loading-icon.text-center.gl-mt-3.gl-mb-3.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
     = icon('spinner spin 2x', 'aria-hidden' => 'true');
diff --git a/app/views/projects/blob/viewers/_stl.html.haml b/app/views/projects/blob/viewers/_stl.html.haml
index 55dd8cba7fe..6983c3cc81b 100644
--- a/app/views/projects/blob/viewers/_stl.html.haml
+++ b/app/views/projects/blob/viewers/_stl.html.haml
@@ -1,7 +1,7 @@
 .file-content.is-stl-loading
   .text-center#js-stl-viewer{ data: { endpoint: blob_raw_path } }
-    = icon('spinner spin 2x', class: 'prepend-top-default append-bottom-default', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
-  .text-center.prepend-top-default.append-bottom-default.stl-controls
+    = icon('spinner spin 2x', class: 'gl-mt-3 gl-mb-3', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
+  .text-center.gl-mt-3.gl-mb-3.stl-controls
     .btn-group
       %button.btn.btn-default.btn-sm.js-material-changer{ data: { type: 'wireframe' } }
         Wireframe
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 2e9be28df86..ed7dbdeae93 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -8,13 +8,13 @@
       = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name gl-ml-3 qa-branch-name' do
         = branch.name
       - if branch.name == @repository.root_ref
-        %span.badge.badge-primary.prepend-left-5 default
+        %span.badge.badge-primary.gl-ml-2 default
       - elsif merged
-        %span.badge.badge-info.has-tooltip.prepend-left-5{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
+        %span.badge.badge-info.has-tooltip.gl-ml-2{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
           = s_('Branches|merged')
 
       - if protected_branch?(@project, branch)
-        %span.badge.badge-success.prepend-left-5
+        %span.badge.badge-success.gl-ml-2
           = s_('Branches|protected')
 
       = render_if_exists 'projects/branches/diverged_from_upstream', branch: branch
@@ -41,7 +41,7 @@
 
     - if branch.name != @repository.root_ref
       = link_to project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
-        class: "btn btn-default js-onboarding-compare-branches #{'prepend-left-10' unless merge_project}",
+        class: "btn btn-default js-onboarding-compare-branches #{'gl-ml-3' unless merge_project}",
         method: :post,
         title: s_('Branches|Compare') do
         = s_('Branches|Compare')
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index af8887b0c39..97e46aaa710 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -1,4 +1,4 @@
-- page_title "New Branch"
+- page_title _("New Branch")
 - default_ref = params[:ref] || @project.default_branch
 
 - if @error
diff --git a/app/views/projects/buttons/_clone.html.haml b/app/views/projects/buttons/_clone.html.haml
index b12be8a91d6..7ce143a86b3 100644
--- a/app/views/projects/buttons/_clone.html.haml
+++ b/app/views/projects/buttons/_clone.html.haml
@@ -3,7 +3,7 @@
 
 .git-clone-holder.js-git-clone-holder
   %a#clone-dropdown.btn.btn-primary.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
-    %span.append-right-4.js-clone-dropdown-label
+    %span.gl-mr-2.js-clone-dropdown-label
       = _('Clone')
     = sprite_icon("chevron-down", css_class: "icon")
   %ul.p-3.dropdown-menu.dropdown-menu-large.dropdown-menu-selectable.clone-options-dropdown.qa-clone-options{ class: dropdown_class }
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 445752d0a15..1d0ad6dcde6 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -12,13 +12,7 @@
         %h5.m-0.dropdown-bold-header= _('Download source code')
         .dropdown-menu-content
           = render 'projects/buttons/download_links', project: project, ref: ref, archive_prefix: archive_prefix, path: nil
-      - if vue_file_list_enabled?
-        #js-directory-downloads{ data: { links: directory_download_links(project, ref, archive_prefix).to_json } }
-      - elsif directory?
-        %section.border-top.pt-1.mt-1
-          %h5.m-0.dropdown-bold-header= _('Download this directory')
-          .dropdown-menu-content
-            = render 'projects/buttons/download_links', project: project, ref: ref, archive_prefix: archive_prefix, path: @path
+      #js-directory-downloads{ data: { links: directory_download_links(project, ref, archive_prefix).to_json } }
       - if pipeline && pipeline.latest_builds_with_artifacts.any?
         %section.border-top.pt-1.mt-1
           %h5.m-0.dropdown-bold-header= _('Download artifacts')
diff --git a/app/views/projects/cleanup/_show.html.haml b/app/views/projects/cleanup/_show.html.haml
index 02e8bad69b9..52855d7ee12 100644
--- a/app/views/projects/cleanup/_show.html.haml
+++ b/app/views/projects/cleanup/_show.html.haml
@@ -20,7 +20,7 @@
             = _("Upload object map")
           %button.btn.btn-default.js-choose-file{ type: "button" }
             = _("Choose a file")
-          %span.prepend-left-default.js-filename
+          %span.gl-ml-3.js-filename
             = _("No file selected")
           = f.file_field :bfg_object_map, class: "hidden js-object-map-input", required: true
         .form-text.text-muted
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 4442bdcdf1d..71cf6ca6922 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -22,10 +22,10 @@
 
   .header-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
-      %span.btn.disabled.btn-grouped.d-none.d-sm-block.append-right-10.has-tooltip{ title: n_("%d comment on this commit", "%d comments on this commit", @notes_count) % @notes_count }
+      %span.btn.disabled.btn-grouped.d-none.d-sm-block.gl-mr-3.has-tooltip{ title: n_("%d comment on this commit", "%d comments on this commit", @notes_count) % @notes_count }
         = sprite_icon('comment')
         = @notes_count
-    = link_to project_tree_path(@project, @commit), class: "btn btn-default append-right-10 d-none d-sm-none d-md-inline" do
+    = link_to project_tree_path(@project, @commit), class: "btn btn-default gl-mr-3 d-none d-sm-none d-md-inline" do
       #{ _('Browse files') }
     .dropdown.inline
       %a.btn.btn-default.dropdown-toggle.qa-options-button.d-md-inline{ data: { toggle: "dropdown" } }
diff --git a/app/views/projects/commit/_limit_exceeded_message.html.haml b/app/views/projects/commit/_limit_exceeded_message.html.haml
index 7d3c0582d0b..ace1be787fb 100644
--- a/app/views/projects/commit/_limit_exceeded_message.html.haml
+++ b/app/views/projects/commit/_limit_exceeded_message.html.haml
@@ -1,4 +1,4 @@
-.has-tooltip{ class: "limit-box limit-box-#{objects} prepend-left-5", data: { title: _('Project has too many %{label_for_message} to search') % { label_for_message: label_for_message } } }
+.has-tooltip{ class: "limit-box limit-box-#{objects} gl-ml-2", data: { title: _('Project has too many %{label_for_message} to search') % { label_for_message: label_for_message } } }
   .limit-icon
     - if objects == :branch
       = sprite_icon('fork', size: 12)
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 7722a3523a1..737e4f66dd2 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -14,18 +14,18 @@
         %ul.breadcrumb.repo-breadcrumb
           = commits_breadcrumbs
       #js-author-dropdown{ data: { 'commits_path': project_commits_path(@project), 'project_id': @project.id } }
-      .tree-controls.d-none.d-sm-none.d-md-block
+      .tree-controls
         - if @merge_request.present?
-          .control
+          .control.d-none.d-md-block
             = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn'
         - elsif create_mr_button?(@repository.root_ref, @ref)
-          .control
+          .control.d-none.d-md-block
             = link_to _("Create merge request"), create_mr_path(@repository.root_ref, @ref), class: 'btn 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
-            = search_field_tag :search, params[:search], { placeholder: _('Filter by commit message'), id: 'commits-search', class: 'form-control search-text-input input-short', spellcheck: false }
-        .control
+            = search_field_tag :search, params[:search], { placeholder: _('Search by message'), id: 'commits-search', class: 'form-control search-text-input input-short gl-mt-3 gl-sm-mt-0 gl-min-w-full', spellcheck: false }
+        .control.d-none.d-md-block
           = link_to project_commits_path(@project, @ref, rss_url_options), title: _("Commits feed"), class: 'btn' do
             = icon("rss")
 
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index f5a4889b4bb..d10fa69ff47 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -1,7 +1,7 @@
 = 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
   - if params[:to] && params[:from]
     .compare-switch-container
-      = link_to icon('exchange'), { from: params[:to], to: params[:from] }, class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Swap revisions'
+      = link_to sprite_icon('substitute'), { from: params[:to], to: params[:from] }, class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Swap revisions'
   .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
     .input-group.inline-input-group
       %span.input-group-prepend
@@ -26,6 +26,6 @@
   &nbsp;
   = button_tag s_("CompareBranches|Compare"), class: "btn btn-success commits-compare-btn"
   - if @merge_request.present?
-    = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'prepend-left-10 btn'
+    = 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: 'prepend-left-10 btn'
+    = link_to _("Create merge request"), create_mr_path, class: 'gl-ml-3 btn'
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index 02f2b104ce3..93ee1bed809 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -1,5 +1,5 @@
-- breadcrumb_title "Compare Revisions"
-- page_title "Compare"
+- breadcrumb_title _("Compare Revisions")
+- page_title _("Compare")
 
 %h3.page-title
   = _("Compare Git revisions")
diff --git a/app/views/projects/confluences/show.html.haml b/app/views/projects/confluences/show.html.haml
new file mode 100644
index 00000000000..b87780db4cd
--- /dev/null
+++ b/app/views/projects/confluences/show.html.haml
@@ -0,0 +1,13 @@
+- breadcrumb_title _('Confluence')
+- page_title _('Confluence')
+= render layout: 'shared/empty_states/wikis_layout', locals: { image_path: 'illustrations/wiki_login_empty.svg' } do
+  %h4
+    = s_('WikiEmpty|Confluence is enabled')
+  %p
+    - wiki_confluence_epic_link_url = 'https://gitlab.com/groups/gitlab-org/-/epics/3629'
+    - wiki_confluence_epic_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wiki_confluence_epic_link_url }
+    = s_("WikiEmpty|You've enabled the Confluence Workspace integration. Your wiki will be viewable directly within Confluence. We are hard at work integrating Confluence more seamlessly into GitLab. If you'd like to stay up to date, follow our %{wiki_confluence_epic_link_start}Confluence epic%{wiki_confluence_epic_link_end}.").html_safe % { wiki_confluence_epic_link_start: wiki_confluence_epic_link_start, wiki_confluence_epic_link_end: '</a>'.html_safe }
+  = link_to @project.confluence_service.confluence_url, target: '_blank', rel: 'noopener noreferrer', class: 'btn btn-success external-url', title: s_('WikiEmpty|Go to Confluence') do
+    = sprite_icon('external-link')
+    = s_('WikiEmpty|Go to Confluence')
+
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index b6c30c680e4..090fc602ebb 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -1,4 +1,4 @@
-- page_title "Value Stream Analytics"
+- page_title _("Value Stream Analytics")
 
 #cycle-analytics{ "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
   - if @cycle_analytics_no_data
diff --git a/app/views/projects/default_branch/_show.html.haml b/app/views/projects/default_branch/_show.html.haml
index 6a09004143e..38bec0361b0 100644
--- a/app/views/projects/default_branch/_show.html.haml
+++ b/app/views/projects/default_branch/_show.html.haml
@@ -26,6 +26,6 @@
               %strong= _("Auto-close referenced issues on default branch")
             .form-text.text-muted
               = _("Issues referenced by merge requests and commits within the default branch will be closed automatically")
-              = link_to icon('question-circle'), help_page_path('user/project/issues/managing_issues.html', anchor: 'disabling-automatic-issue-closing'), target: '_blank'
+              = link_to icon('question-circle'), help_page_path('user/project/issues/managing_issues.md', anchor: 'disabling-automatic-issue-closing'), target: '_blank'
 
       = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/projects/deploy_keys/edit.html.haml b/app/views/projects/deploy_keys/edit.html.haml
index 0ce93eef369..7fa7036245c 100644
--- a/app/views/projects/deploy_keys/edit.html.haml
+++ b/app/views/projects/deploy_keys/edit.html.haml
@@ -1,4 +1,4 @@
-- page_title 'Edit Deploy Key'
+- page_title _('Edit Deploy Key')
 %h3.page-title= _('Edit Deploy Key')
 %hr
 
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index cf7fe36af9d..4b76dde681e 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -16,6 +16,8 @@
           = diff_merge_request_whitespace_link(diffs.project, @merge_request, class: 'd-none d-sm-inline-block')
         - elsif current_controller?(:compare)
           = diff_compare_whitespace_link(diffs.project, params[:from], params[:to], class: 'd-none d-sm-inline-block')
+        - elsif current_controller?(:wikis)
+          = toggle_whitespace_link(url_for(params_with_whitespace), class: 'd-none d-sm-inline-block')
       .btn-group
         = inline_diff_btn
         = parallel_diff_btn
diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml
index 6a1bff8640c..f954b09abee 100644
--- a/app/views/projects/diffs/_file_header.html.haml
+++ b/app/views/projects/diffs/_file_header.html.haml
@@ -37,4 +37,4 @@
       #{diff_file.a_mode} → #{diff_file.b_mode}
 
   - if diff_file.stored_externally? && diff_file.external_storage == :lfs
-    %span.badge.label-lfs.append-right-5 LFS
+    %span.badge.label-lfs.gl-mr-2 LFS
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
index 17c1764e8a4..0e2a1165ad3 100644
--- a/app/views/projects/diffs/_stats.html.haml
+++ b/app/views/projects/diffs/_stats.html.haml
@@ -4,7 +4,7 @@
   Showing
   %button.diff-stats-summary-toggler.js-diff-stats-dropdown{ type: "button", data: { toggle: "dropdown", display: "static" } }<
     = pluralize(diff_files.size, "changed file")
-    = icon("caret-down", class: "prepend-left-5")
+    = icon("caret-down", class: "gl-ml-2")
   %span.diff-stats-additions-deletions-expanded#diff-stats
     with
     %strong.cgreen= pluralize(sum_added_lines, 'addition')
@@ -30,7 +30,7 @@
                 - else
                   %strong.diff-changed-blank-file-name
                     = s_('Diffs|No file name available')
-                %span.diff-changed-file-path.prepend-top-5= diff_file_path_text(diff_file)
+                %span.diff-changed-file-path.gl-mt-2= diff_file_path_text(diff_file)
               %span.diff-changed-stats
                 %span.cgreen<
                   +#{diff_file.added_lines}
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 3c6fb5b19a4..e63b615115a 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -56,7 +56,7 @@
 
 = render_if_exists 'projects/settings/default_issue_template'
 
-= render_if_exists 'projects/service_desk_settings'
+= render 'projects/service_desk_settings'
 
 %section.qa-advanced-settings.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded) }
   .settings-header
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 6b1455acd08..bfb22aa8025 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -1,5 +1,7 @@
 - @content_class = "limit-container-width" unless fluid_layout
+- default_branch_name = Gitlab::CurrentSettings.default_branch_name.presence || "master"
 - breadcrumb_title _("Details")
+- page_title _("Details")
 
 = render partial: 'flash_messages', locals: { project: @project }
 
@@ -46,7 +48,7 @@
               git commit -m "add README"
             - if @project.can_current_user_push_to_default_branch?
               %span><
-                git push -u origin master
+                git push -u origin #{ default_branch_name }
 
         %fieldset
           %h5= _('Push an existing folder')
@@ -59,7 +61,7 @@
               git commit -m "Initial commit"
             - if @project.can_current_user_push_to_default_branch?
               %span><
-                git push -u origin master
+                git push -u origin #{ default_branch_name }
 
         %fieldset
           %h5= _('Push an existing Git repository')
diff --git a/app/views/projects/environments/_form.html.haml b/app/views/projects/environments/_form.html.haml
index efe80a4877c..39eda493d69 100644
--- a/app/views/projects/environments/_form.html.haml
+++ b/app/views/projects/environments/_form.html.haml
@@ -1,9 +1,9 @@
-.row.prepend-top-default.append-bottom-default
+.row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       = _("Environments")
     %p
-      - link_to_read_more = link_to(_("Read more about environments"), help_page_path("ci/environments/index.md"))
+      - link_to_read_more = link_to(_("More information"), help_page_path("ci/environments/index.md"))
       = _("Environments allow you to track deployments of your application %{link_to_read_more}.").html_safe % { link_to_read_more: link_to_read_more }
 
   = form_for [@project.namespace.becomes(Namespace), @project, @environment], html: { class: 'col-lg-9' } do |f|
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index 971107675ab..786af3714a6 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -1,4 +1,4 @@
-- page_title "Find File", @ref
+- page_title _("Find File"), @ref
 
 .file-finder-holder.tree-holder.clearfix.js-file-finder{ 'data-file-find-url': "#{escape_javascript(project_files_path(@project, @ref, format: :json))}", 'data-find-tree-url': escape_javascript(project_tree_path(@project, @ref)), 'data-blob-url-template': escape_javascript(project_blob_path(@project, @id || @commit.id)) }
   .nav-block
@@ -23,5 +23,5 @@
               = _('There are no matching files')
             %p.text-secondary
               = _('Try using a different search term to find the file you are looking for.')
-      .text-center.prepend-top-default.loading
+      .text-center.gl-mt-3.loading
         .spinner.spinner-md
diff --git a/app/views/projects/forks/_fork_button.html.haml b/app/views/projects/forks/_fork_button.html.haml
index 70064722832..eec02a50b85 100644
--- a/app/views/projects/forks/_fork_button.html.haml
+++ b/app/views/projects/forks/_fork_button.html.haml
@@ -2,17 +2,17 @@
 - can_create_project = current_user.can?(:create_projects, namespace)
 
 - if forked_project = namespace.find_fork_of(@project)
-  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.append-bottom-default.forked
+  .bordered-box.fork-thumbnail.text-center.gl-ml-3.gl-mr-3.gl-mt-3.gl-mb-3.forked
     = link_to project_path(forked_project) do
       - if /no_((\w*)_)*avatar/.match(avatar)
         = group_icon(namespace, class: "avatar rect-avatar s100 identicon mx-auto")
       - else
         .avatar-container.s100.mx-auto
           = image_tag(avatar, class: "avatar s100")
-      %h5.prepend-top-default
+      %h5.gl-mt-3
         = namespace.human_name
 - else
-  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.append-bottom-default{ class: ("disabled" unless can_create_project) }
+  .bordered-box.fork-thumbnail.text-center.gl-ml-3.gl-mr-3.gl-mt-3.gl-mb-3{ class: ("disabled" unless can_create_project) }
     = link_to project_forks_path(@project, namespace_key: namespace.id),
         method: "POST",
         class: ("disabled has-tooltip" unless can_create_project),
@@ -22,5 +22,5 @@
       - else
         .avatar-container.s100.mx-auto
           = image_tag(avatar, class: "avatar s100")
-      %h5.prepend-top-default{ data: { qa_selector: 'fork_namespace_content', qa_name: namespace.human_name } }
+      %h5.gl-mt-3{ data: { qa_selector: 'fork_namespace_content', qa_name: namespace.human_name } }
         = namespace.human_name
diff --git a/app/views/projects/forks/new.html.haml b/app/views/projects/forks/new.html.haml
index 763e31c4a8b..887081d0f35 100644
--- a/app/views/projects/forks/new.html.haml
+++ b/app/views/projects/forks/new.html.haml
@@ -1,6 +1,6 @@
 - page_title _("Fork project")
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-3
     %h4.gl-mt-0
       = _("Fork project")
@@ -9,13 +9,13 @@
   .col-lg-9
     - if @namespaces.present?
       .fork-thumbnail-container.js-fork-content
-        %h5.gl-mt-0.gl-mb-0.prepend-left-default.append-right-default
+        %h5.gl-mt-0.gl-mb-0.gl-ml-3.gl-mr-3
           = _("Select a namespace to fork the project")
         - @namespaces.each do |namespace|
           = render 'fork_button', namespace: namespace
     - else
       %strong
         = _("No available namespaces to fork the project.")
-      %p.prepend-top-default
+      %p.gl-mt-3
         = _("You must have permission to create a project in a namespace before forking.")
 
diff --git a/app/views/projects/hook_logs/_index.html.haml b/app/views/projects/hook_logs/_index.html.haml
index e7b924c65bf..a8a4eef65b3 100644
--- a/app/views/projects/hook_logs/_index.html.haml
+++ b/app/views/projects/hook_logs/_index.html.haml
@@ -1,4 +1,4 @@
-.row.gl-mt-7.append-bottom-default
+.row.gl-mt-7.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       Recent Deliveries
diff --git a/app/views/projects/hook_logs/show.html.haml b/app/views/projects/hook_logs/show.html.haml
index a6a3f56c28c..8a8c396a9e4 100644
--- a/app/views/projects/hook_logs/show.html.haml
+++ b/app/views/projects/hook_logs/show.html.haml
@@ -2,11 +2,11 @@
 - add_to_breadcrumbs _('Webhook Settings'), namespace_project_hooks_path
 - page_title _('Webhook Logs')
 
-.row.prepend-top-default.append-bottom-default
+.row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       Request details
   .col-lg-9
-    = link_to 'Resend Request', @hook_log.present.retry_path, method: :post, class: "btn btn-default float-right prepend-left-10"
+    = link_to 'Resend Request', @hook_log.present.retry_path, method: :post, class: "btn btn-default float-right gl-ml-3"
 
     = render partial: 'shared/hook_logs/content', locals: { hook_log: @hook_log }
diff --git a/app/views/projects/hooks/edit.html.haml b/app/views/projects/hooks/edit.html.haml
index 15100840c0a..e0ef0c0d3f9 100644
--- a/app/views/projects/hooks/edit.html.haml
+++ b/app/views/projects/hooks/edit.html.haml
@@ -2,11 +2,11 @@
 - add_to_breadcrumbs _('Webhook Settings'), namespace_project_hooks_path
 - page_title _('Webhook')
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-3
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
-  .col-lg-9.append-bottom-default
+  .col-lg-9.gl-mb-3
     = form_for [@project.namespace.becomes(Namespace), @project, @hook], as: :hook, url: project_hook_path(@project, @hook) do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
 
diff --git a/app/views/projects/hooks/index.html.haml b/app/views/projects/hooks/index.html.haml
index 169a5cc9d6b..1845bd190d3 100644
--- a/app/views/projects/hooks/index.html.haml
+++ b/app/views/projects/hooks/index.html.haml
@@ -2,11 +2,11 @@
 - breadcrumb_title _('Webhook Settings')
 - page_title _('Webhooks')
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
-  .col-lg-8.append-bottom-default
+  .col-lg-8.gl-mb-3
     = form_for @hook, as: :hook, url: polymorphic_path([@project.namespace.becomes(Namespace), @project, :hooks]) do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
       = f.submit 'Add webhook', class: 'btn btn-success'
diff --git a/app/views/projects/import/jira/show.html.haml b/app/views/projects/import/jira/show.html.haml
index fe6cc6fa828..3c0664e4d5f 100644
--- a/app/views/projects/import/jira/show.html.haml
+++ b/app/views/projects/import/jira/show.html.haml
@@ -3,4 +3,5 @@
   jira_integration_path: edit_project_service_path(@project, :jira),
   is_jira_configured: @project.jira_service&.active? && @project.jira_service&.valid_connection?.to_s,
   in_progress_illustration: image_path('illustrations/export-import.svg'),
+  project_id: @project.id,
   setup_illustration: image_path('illustrations/manual_action.svg') } }
diff --git a/app/views/projects/imports/new.html.haml b/app/views/projects/imports/new.html.haml
index bd0ab2c19f2..58981ca1556 100644
--- a/app/views/projects/imports/new.html.haml
+++ b/app/views/projects/imports/new.html.haml
@@ -1,4 +1,4 @@
-- page_title "Import repository"
+- page_title _("Import repository")
 %h3.page-title
   Import repository
 
diff --git a/app/views/projects/issues/_alert_moved_from_service_desk.html.haml b/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
new file mode 100644
index 00000000000..a6f969f8b10
--- /dev/null
+++ b/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
@@ -0,0 +1,10 @@
+- return unless show_moved_service_desk_issue_warning?(issue)
+- service_desk_link_url = help_page_path('user/project/service_desk')
+- service_desk_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: service_desk_link_url }
+
+.hide.gl-alert.gl-alert-warning.js-alert-moved-from-service-desk-warning.gl-mt-5{ role: 'alert' }
+  = sprite_icon('warning', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+  %button.js-close.gl-alert-dismiss{ type: 'button', 'aria-label' => _('Dismiss') }
+    = sprite_icon('close', size: 16, css_class: 'gl-icon')
+  .gl-alert-body.gl-mr-3
+    = s_('This project does not have %{service_desk_link_start}Service Desk%{service_desk_link_end} enabled, so the user who created the issue will no longer receive email notifications about new activity.').html_safe % { service_desk_link_start: service_desk_link_start, service_desk_link_end: '</a>'.html_safe }
diff --git a/app/views/projects/issues/_by_email_description.html.haml b/app/views/projects/issues/_by_email_description.html.haml
index f2d58534903..0ff852352e1 100644
--- a/app/views/projects/issues/_by_email_description.html.haml
+++ b/app/views/projects/issues/_by_email_description.html.haml
@@ -1,6 +1,6 @@
 The subject will be used as the title of the new issue, and the message will be the description.
 
-= link_to 'Quick actions', help_page_path('user/project/quick_actions'), target: '_blank', tabindex: -1
+= link_to 'Quick actions', help_page_path('user/project/quick_actions'), target: '_blank'
 and styling with
-= link_to 'Markdown', help_page_path('user/markdown'), target: '_blank', tabindex: -1
+= link_to 'Markdown', help_page_path('user/markdown'), target: '_blank'
 are supported.
diff --git a/app/views/projects/issues/_design_management.html.haml b/app/views/projects/issues/_design_management.html.haml
index 96f1dc0155c..045f032e6e7 100644
--- a/app/views/projects/issues/_design_management.html.haml
+++ b/app/views/projects/issues/_design_management.html.haml
@@ -1,15 +1,27 @@
 - if @project.design_management_enabled?
-  .js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
+  - if Feature.enabled?(:design_management_moved, @project, default_enabled: true)
+    .js-design-management-new{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
+  - else
+    .js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
 - else
-  .mt-4
-    .row.empty-state
-      .col-12
-        .text-content
-          %h4.center
-            = _('The one place for your designs')
-          %p.center
-            - requirements_link_url = help_page_path('user/project/issues/design_management', anchor: 'requirements')
-            - requirements_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: requirements_link_url }
-            - support_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: support_url }
-            - link_end = '</a>'.html_safe
-            = s_("DesignManagement|To enable design management, you'll need to  %{requirements_link_start}meet the requirements%{requirements_link_end}. If you need help, reach out to our %{support_link_start}support team%{support_link_end} for assistance.").html_safe % { requirements_link_start: requirements_link_start, requirements_link_end: link_end, support_link_start: support_link_start, support_link_end: link_end }
+  - if Feature.enabled?(:design_management_moved, @project, default_enabled: true)
+    .row.empty-state.design-dropzone-border.gl-mt-5
+      .text-content.center.gl-font-weight-bold
+        - requirements_link_url = help_page_path('user/project/issues/design_management', anchor: 'requirements')
+        - requirements_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: requirements_link_url }
+        - support_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: support_url }
+        - link_end = '</a>'.html_safe
+        = s_("DesignManagement|To enable design management, you'll need to %{requirements_link_start}meet the requirements%{requirements_link_end}. If you need help, reach out to our %{support_link_start}support team%{support_link_end} for assistance.").html_safe % { requirements_link_start: requirements_link_start, requirements_link_end: link_end, support_link_start: support_link_start, support_link_end: link_end }
+  - else
+    .mt-4
+      .row.empty-state
+        .col-12
+          .text-content
+            %h4.center
+              = _('The one place for your designs')
+            %p.center
+              - requirements_link_url = help_page_path('user/project/issues/design_management', anchor: 'requirements')
+              - requirements_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: requirements_link_url }
+              - support_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: support_url }
+              - link_end = '</a>'.html_safe
+              = s_("DesignManagement|To enable design management, you'll need to %{requirements_link_start}meet the requirements%{requirements_link_end}. If you need help, reach out to our %{support_link_start}support team%{support_link_end} for assistance.").html_safe % { requirements_link_start: requirements_link_start, requirements_link_end: link_end, support_link_start: support_link_start, support_link_end: link_end }
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index 9c129fa9ecc..bcc74e8d1d9 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -7,7 +7,7 @@
 
 %section.issuable-discussion.js-vue-notes-event
   #js-vue-notes{ data: { notes_data: notes_data(@issue).to_json,
-    noteable_data: serialize_issuable(@issue, with_blocking_issues: Feature.enabled?(:prevent_closing_blocked_issues, @issue.project)),
+    noteable_data: serialize_issuable(@issue, with_blocking_issues: true),
     noteable_type: 'Issue',
     target_type: 'issue',
     current_user_data: UserSerializer.new.represent(current_user, {only_path: true}, CurrentUserEntity).to_json } }
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index e325d585d0c..e7cd35497e8 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -47,7 +47,7 @@
 
       .issuable-meta
         %ul.controls
-          - if issue.moved?
+          - if issue.closed? && issue.moved?
             %li.issuable-status
               = _('CLOSED (MOVED)')
           - elsif issue.closed?
diff --git a/app/views/projects/issues/_issues.html.haml b/app/views/projects/issues/_issues.html.haml
index 7d539c9d749..c0383c57e63 100644
--- a/app/views/projects/issues/_issues.html.haml
+++ b/app/views/projects/issues/_issues.html.haml
@@ -1,9 +1,14 @@
-- empty_state_path = local_assigns.fetch(:empty_state_path, 'shared/empty_states/issues')
+- if Feature.enabled?(:vue_issuables_list, @project)
+  .js-issuables-list{ data: { endpoint: expose_url(api_v4_projects_issues_path(id: @project.id)),
+    'can-bulk-edit': @can_bulk_update.to_json,
+    'empty-svg-path': image_path('illustrations/issues.svg'),
+    'sort-key': @sort } }
+- else
+  - empty_state_path = local_assigns.fetch(:empty_state_path, 'shared/empty_states/issues')
+  %ul.content-list.issues-list.issuable-list{ class: ("manual-ordering" if @sort == 'relative_position') }
+    = render partial: "projects/issues/issue", collection: @issues
+    - if @issues.blank?
+      = render empty_state_path
 
-%ul.content-list.issues-list.issuable-list{ class: ("manual-ordering" if @sort == 'relative_position') }
-  = render partial: "projects/issues/issue", collection: @issues
-  - if @issues.blank?
-    = render empty_state_path
-
-- if @issues.present?
-  = paginate @issues, theme: "gitlab", total_pages: @total_pages
+  - if @issues.present?
+    = paginate @issues, theme: "gitlab", total_pages: @total_pages
diff --git a/app/views/projects/issues/_nav_btns.html.haml b/app/views/projects/issues/_nav_btns.html.haml
index 71c9bb36936..cc6ca4aca4a 100644
--- a/app/views/projects/issues/_nav_btns.html.haml
+++ b/app/views/projects/issues/_nav_btns.html.haml
@@ -14,7 +14,7 @@
       = render 'projects/issues/import_csv/button'
 
   - if @can_bulk_update
-    = button_tag _("Edit issues"), class: "btn btn-default append-right-10 js-bulk-update-toggle"
+    = button_tag _("Edit issues"), class: "btn btn-default gl-mr-3 js-bulk-update-toggle"
   - if show_new_issue_link?(@project)
     = link_to _("New issue"), new_project_issue_path(@project,
                                                   issue: { assignee_id: finder.assignee.try(:id),
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 73904354a12..9bbab925f6a 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -41,7 +41,7 @@
               = _('Create branch')
           %li.divider.droplab-item-ignore
 
-          %li.droplab-item-ignore.gl-ml-3.gl-mr-3.prepend-top-16
+          %li.droplab-item-ignore.gl-ml-3.gl-mr-3.gl-mt-5
             - if can_create_confidential_merge_request?
               #js-forked-project{ data: { namespace_path: @project.namespace.full_path, project_path: @project.full_path, new_fork_path: new_project_fork_path(@project), help_page_path: help_page_path('user/project/merge_requests') } }
             .form-group
diff --git a/app/views/projects/issues/_service_desk_info_content.html.haml b/app/views/projects/issues/_service_desk_info_content.html.haml
new file mode 100644
index 00000000000..ddd8e545043
--- /dev/null
+++ b/app/views/projects/issues/_service_desk_info_content.html.haml
@@ -0,0 +1,39 @@
+- is_empty_state = @issues.blank?
+- service_desk_enabled = @project.service_desk_enabled?
+
+- callout_selector = is_empty_state ? 'empty-state' : 'non-empty-state media'
+- svg_path = !is_empty_state ? 'shared/empty_states/icons/service_desk_callout.svg' : 'shared/empty_states/icons/service_desk_empty_state.svg'
+- 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")
+
+- if Gitlab::ServiceDesk.supported?
+  %div{ class: "#{callout_selector}" }
+    .svg-content
+      = render svg_path
+
+    %div{ class: is_empty_state ? "text-content" : "prepend-top-10 gl-ml-3" }
+      - if is_empty_state
+        %h4= title_text
+      - else
+        %h5= title_text
+
+      - if can_edit_project_settings && service_desk_enabled
+        %p
+          = _("Have your users email")
+          %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')
+
+      - if can_edit_project_settings && !service_desk_enabled
+        %div{ class: is_empty_state ? "text-center" : "prepend-top-10" }
+          = link_to _("Turn on Service Desk"), edit_project_path(@project), class: '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')
+      %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')
diff --git a/app/views/projects/issues/edit.html.haml b/app/views/projects/issues/edit.html.haml
index 1b7d878c38c..353ff9c1cc2 100644
--- a/app/views/projects/issues/edit.html.haml
+++ b/app/views/projects/issues/edit.html.haml
@@ -1,4 +1,4 @@
-- page_title "Edit", "#{@issue.title} (#{@issue.to_reference})", "Issues"
+- page_title _("Edit"), "#{@issue.title} (#{@issue.to_reference})", _("Issues")
 
 %h3.page-title
   Edit Issue ##{@issue.iid}
diff --git a/app/views/projects/issues/export_csv/_modal.html.haml b/app/views/projects/issues/export_csv/_modal.html.haml
index 9fdeb901b56..342c3ba27bb 100644
--- a/app/views/projects/issues/export_csv/_modal.html.haml
+++ b/app/views/projects/issues/export_csv/_modal.html.haml
@@ -12,7 +12,7 @@
         .modal-body
           .modal-subheader
             = icon('check', { class: 'checkmark' })
-            %strong.prepend-left-10
+            %strong.gl-ml-3
               - issues_count = issuables_count_for_state(:issues, params[:state])
               = n_('%d issue selected', '%d issues selected', issues_count) % issues_count
           .modal-text
diff --git a/app/views/projects/issues/import_csv/_button.html.haml b/app/views/projects/issues/import_csv/_button.html.haml
index 7119b22daef..ea8f53f7342 100644
--- a/app/views/projects/issues/import_csv/_button.html.haml
+++ b/app/views/projects/issues/import_csv/_button.html.haml
@@ -3,7 +3,7 @@
 
 .dropdown.btn-group
   %button.btn.rounded-right.text-center{ class: ('has-tooltip' if type == :icon), title: (_('Import issues') if type == :icon),
-    data: { toggle: 'dropdown' }, 'aria-label' => _('Import issues'), 'aria-haspopup' => 'true', 'aria-expanded' => 'false' }
+    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
@@ -13,4 +13,5 @@
       %button{ data: { toggle: 'modal', target: '.issues-import-modal' } }
         = _('Import CSV')
     - if can_edit
-      %li= link_to _('Import from Jira'), project_import_jira_path(@project)
+      %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/index.html.haml b/app/views/projects/issues/index.html.haml
index 826a62e39d3..cfc423da57a 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -1,6 +1,6 @@
 - @can_bulk_update = can?(current_user, :admin_issue, @project)
 
-- page_title "Issues"
+- page_title _("Issues")
 - new_issue_email = @project.new_issuable_address(current_user, 'issue')
 
 = content_for :meta_tags do
diff --git a/app/views/projects/issues/service_desk.html.haml b/app/views/projects/issues/service_desk.html.haml
new file mode 100644
index 00000000000..9b0b3ebc9e0
--- /dev/null
+++ b/app/views/projects/issues/service_desk.html.haml
@@ -0,0 +1,21 @@
+- @can_bulk_update = false
+
+- page_title _("Service Desk")
+
+- content_for :breadcrumbs_extra do
+  = render "projects/issues/nav_btns", show_export_button: false, show_rss_button: false
+
+- support_bot_attrs = UserSerializer.new.represent(User.support_bot).to_json
+
+%div{ class: "js-service-desk-issues service-desk-issues", data: { support_bot: support_bot_attrs } }
+  .top-area
+    = render 'shared/issuable/nav', type: :issues
+    .nav-controls.d-block.d-sm-none
+      = render "projects/issues/nav_btns", show_feed_buttons: false, show_import_button: false, show_export_button: false
+
+  - if @issues.present?
+    = render 'shared/issuable/search_bar', type: :issues
+    = render 'service_desk_info_content'
+
+  .issues-holder
+    = render 'projects/issues/issues', empty_state_path: 'service_desk_info_content'
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 4d24b510267..2a0dc5e30b9 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -11,7 +11,7 @@
 - can_create_issue = show_new_issue_link?(@project)
 
 = render_if_exists "projects/issues/alert_blocked", issue: @issue, current_user: current_user
-= render_if_exists "projects/issues/alert_moved_from_service_desk", issue: @issue
+= render "projects/issues/alert_moved_from_service_desk", issue: @issue
 
 .detail-page-header
   .detail-page-header-body
@@ -24,14 +24,11 @@
       %span.d-none.d-sm-block Open
 
     .issuable-meta
-      - if @issue.confidential
-        .issuable-warning-icon.inline= sprite_icon('eye-slash', size: 16, css_class: 'icon')
-      - if @issue.discussion_locked?
-        .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
+      #js-issuable-header-warnings
       = issuable_meta(@issue, @project, "Issue")
 
     %a.btn.btn-default.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
-      = icon('angle-double-left')
+      = sprite_icon('chevron-double-lg-left')
 
   .detail-page-header-actions.js-issuable-actions.js-issuable-buttons{ data: { "action": "close-reopen" } }
     .clearfix.issue-btn-group.dropdown
@@ -77,6 +74,9 @@
     - if @issue.sentry_issue.present?
       #js-sentry-error-stack-trace{ data: error_details_data(@project, @issue.sentry_issue.sentry_issue_identifier) }
 
+    - if Feature.enabled?(:design_management_moved, @project, default_enabled: true)
+      = render 'projects/issues/design_management'
+
     = render_if_exists 'projects/issues/related_issues'
 
     #js-related-merge-requests{ data: { endpoint: expose_path(api_v4_projects_issues_related_merge_requests_path(id: @project.id, issue_iid: @issue.iid)), project_namespace: @project.namespace.path, project_path: @project.path } }
@@ -86,14 +86,17 @@
         -# This element is filled in using JavaScript.
 
   .content-block.emoji-block.emoji-block-sticky
-    .row
-      .col-md-12.col-lg-4.js-noteable-awards
+    .row.gl-m-0.gl-justify-content-space-between
+      .js-noteable-awards
         = render 'award_emoji/awards_block', awardable: @issue, inline: true
-      .col-md-12.col-lg-8.new-branch-col
+      .new-branch-col
         #js-vue-sort-issue-discussions
         #js-vue-discussion-filter{ data: { default_filter: current_user&.notes_filter_for(@issue), notes_filters: UserPreference.notes_filters.to_json } }
         = render 'new_branch' if show_new_branch_button?
 
-  = render 'projects/issues/tabs'
+  - if Feature.enabled?(:design_management_moved, @project, default_enabled: true)
+    = render 'projects/issues/discussion'
+  - else
+    = render 'projects/issues/tabs'
 
 = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @issue.assignees
diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml
index 5acb2af08e4..4f537ee8014 100644
--- a/app/views/projects/jobs/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -1,4 +1,4 @@
-- page_title "Jobs"
+- page_title _("Jobs")
 
 .top-area
   - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index 2e322c7db23..df98a1c7cce 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -5,4 +5,6 @@
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag 'page_bundles/xterm'
 
+= render_if_exists "shared/shared_runners_minutes_limit_flash_message"
+
 #js-job-vue-app{ data: jobs_data }
diff --git a/app/views/projects/jobs/terminal.html.haml b/app/views/projects/jobs/terminal.html.haml
index 5439a4b5d5c..01f40543926 100644
--- a/app/views/projects/jobs/terminal.html.haml
+++ b/app/views/projects/jobs/terminal.html.haml
@@ -1,7 +1,7 @@
-- add_to_breadcrumbs 'Jobs', project_jobs_path(@project)
+- add_to_breadcrumbs _('Jobs'), project_jobs_path(@project)
 - add_to_breadcrumbs "##{@build.id}", project_job_path(@project, @build)
-- breadcrumb_title 'Terminal'
-- page_title 'Terminal', "#{@build.name} (##{@build.id})", 'Jobs'
+- breadcrumb_title _('Terminal')
+- page_title _('Terminal'), "#{@build.name} (##{@build.id})", _('Jobs')
 
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag "xterm.css"
diff --git a/app/views/projects/labels/edit.html.haml b/app/views/projects/labels/edit.html.haml
index b7996f0dad1..343900359b4 100644
--- a/app/views/projects/labels/edit.html.haml
+++ b/app/views/projects/labels/edit.html.haml
@@ -1,6 +1,6 @@
-- add_to_breadcrumbs "Labels", project_labels_path(@project)
-- breadcrumb_title "Edit"
-- page_title "Edit", @label.name, "Labels"
+- add_to_breadcrumbs _("Labels"), project_labels_path(@project)
+- breadcrumb_title _("Edit")
+- page_title _("Edit"), @label.name, _("Labels")
 
 %h3.page-title
   Edit Label
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index 760d81136c6..ba47712211d 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -1,4 +1,4 @@
-- page_title "Labels"
+- page_title _("Labels")
 - can_admin_label = can?(current_user, :admin_label, @project)
 - search = params[:search]
 - subscribed = params[:subscribed]
@@ -52,5 +52,5 @@
   = render 'shared/empty_states/labels'
 
 %template#js-badge-item-template
-  %li.label-link-item.js-priority-badge.inline.prepend-left-10
+  %li.label-link-item.js-priority-badge.inline.gl-ml-3
     .label-badge.label-badge-blue= _('Prioritized label')
diff --git a/app/views/projects/labels/new.html.haml b/app/views/projects/labels/new.html.haml
index 96ce0eba2c6..38bd6102437 100644
--- a/app/views/projects/labels/new.html.haml
+++ b/app/views/projects/labels/new.html.haml
@@ -1,6 +1,6 @@
-- add_to_breadcrumbs "Labels", project_labels_path(@project)
-- breadcrumb_title "New"
-- page_title "New Label"
+- add_to_breadcrumbs _("Labels"), project_labels_path(@project)
+- breadcrumb_title _("New")
+- page_title _("New Label")
 
 %h3.page-title
   New Label
diff --git a/app/views/projects/merge_requests/_approvals_count.html.haml b/app/views/projects/merge_requests/_approvals_count.html.haml
new file mode 100644
index 00000000000..464cba1bb2d
--- /dev/null
+++ b/app/views/projects/merge_requests/_approvals_count.html.haml
@@ -0,0 +1,13 @@
+- merge_request = local_assigns.fetch(:merge_request)
+- self_approved = merge_request.approved_by?(current_user)
+- total = merge_request.approvals.size
+
+- if total > 0
+  - final_text = n_("%d approver", "%d approvers", total) % total
+  - final_self_text = n_("%d approver (you've approved)", "%d approvers (you've approved)", total) % total
+
+  - approval_icon = sprite_icon((self_approved ? 'approval-solid' : 'approval'), size: 16, css_class: 'align-middle')
+
+  %li.d-none.d-sm-inline-block.has-tooltip.text-success{ title: self_approved ? final_self_text : final_text }
+    = approval_icon
+    = _("Approved")
diff --git a/app/views/projects/merge_requests/_discussion.html.haml b/app/views/projects/merge_requests/_discussion.html.haml
index 3303aa72604..ecb51aca847 100644
--- a/app/views/projects/merge_requests/_discussion.html.haml
+++ b/app/views/projects/merge_requests/_discussion.html.haml
@@ -5,7 +5,7 @@
     - if @merge_request.reopenable?
       = link_to 'Reopen merge request', merge_request_path(@merge_request, merge_request: { state_event: :reopen }), method: :put, class: "btn btn-nr btn-comment btn-reopen reopen-mr-link js-note-target-close js-note-target-reopen", title: "Reopen merge request", data: { original_text: "Reopen merge request", alternative_text: "Comment & reopen merge request"}
     %comment-and-resolve-btn{ "inline-template" => true }
-      %button.btn.btn-nr.btn-default.append-right-10.js-comment-resolve-button{ "v-if" => "showButton", type: "submit", data: { project_path: "#{project_path(@merge_request.project)}" } }
+      %button.btn.btn-nr.btn-default.gl-mr-3.js-comment-resolve-button{ "v-if" => "showButton", type: "submit", data: { project_path: "#{project_path(@merge_request.project)}" } }
         {{ buttonText }}
 
 #notes= render "shared/notes/notes_with_form", :autocomplete => true
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index a753ee50c43..d3e98bac7f9 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -55,7 +55,7 @@
         - if merge_request.assignees.any?
           %li.d-flex
             = render 'shared/issuable/assignees', project: merge_request.project, issuable: merge_request
-        = render_if_exists 'projects/merge_requests/approvals_count', merge_request: merge_request
+        = render 'projects/merge_requests/approvals_count', merge_request: merge_request
 
         = render 'shared/issuable_meta_data', issuable: merge_request
 
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index d1e8dc3a834..72931448432 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -20,7 +20,7 @@
       = issuable_meta(@merge_request, @project, "Merge request")
 
     %a.btn.btn-default.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
-      = icon('angle-double-left')
+      = sprite_icon('chevron-double-lg-left')
 
   .detail-page-header-actions.js-issuable-actions
     .clearfix.issue-btn-group.dropdown
diff --git a/app/views/projects/merge_requests/_nav_btns.html.haml b/app/views/projects/merge_requests/_nav_btns.html.haml
index b7498216334..2ef10365c18 100644
--- a/app/views/projects/merge_requests/_nav_btns.html.haml
+++ b/app/views/projects/merge_requests/_nav_btns.html.haml
@@ -1,5 +1,5 @@
 - if @can_bulk_update
-  = button_tag "Edit merge requests", class: "btn append-right-10 js-bulk-update-toggle"
+  = button_tag "Edit merge requests", class: "btn gl-mr-3 js-bulk-update-toggle"
 - if merge_project
   = link_to new_merge_request_path, class: "btn btn-success", title: "New merge request" do
     New merge request
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 6aba5c98d52..16b08cbf648 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -7,10 +7,13 @@
     window.gl.mrWidgetData = #{serialize_issuable(@merge_request, serializer: 'widget', issues_links: true)}
 
     window.gl.mrWidgetData.squash_before_merge_help_path = '#{help_page_path("user/project/merge_requests/squash_and_merge")}';
-    window.gl.mrWidgetData.troubleshooting_docs_path = '#{help_page_path('user/project/merge_requests/reviewing_and_managing_merge_requests.md', anchor: 'troubleshooting')}';
+    window.gl.mrWidgetData.ci_troubleshooting_docs_path = '#{help_page_path('ci/troubleshooting.md')}';
+    window.gl.mrWidgetData.mr_troubleshooting_docs_path = '#{help_page_path('user/project/merge_requests/reviewing_and_managing_merge_requests.md', anchor: 'troubleshooting')}';
     window.gl.mrWidgetData.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.html', anchor: 'security-approvals-in-merge-requests-ultimate')}';
+    window.gl.mrWidgetData.security_approvals_help_page_path = '#{help_page_path('user/application_security/index.md', anchor: 'security-approvals-in-merge-requests-ultimate')}';
     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')}';
+    window.gl.mrWidgetData.codequality_help_path = '#{help_page_path("user/project/merge_requests/code_quality", anchor: "code-quality-reports")}';
 
 #js-vue-mr-widget.mr-widget
diff --git a/app/views/projects/merge_requests/conflicts/show.html.haml b/app/views/projects/merge_requests/conflicts/show.html.haml
index d933675eac5..6c23661fb86 100644
--- a/app/views/projects/merge_requests/conflicts/show.html.haml
+++ b/app/views/projects/merge_requests/conflicts/show.html.haml
@@ -1,4 +1,4 @@
-- page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
+- page_title _("Merge Conflicts"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge Requests")
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
 = render "projects/merge_requests/mr_title"
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index 0fb4d9ae70f..fdf0bfe8e50 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -20,8 +20,8 @@
     .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
       .merge-request-tabs-container
         .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-          .fade-left= icon('angle-left')
-          .fade-right= icon('angle-right')
+          .fade-left= sprite_icon('chevron-lg-left', size: 12)
+          .fade-right= sprite_icon('chevron-lg-right', size: 12)
           %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.js-tabs-affix
             %li.commits-tab.new-tab
               = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tabvue'} do
diff --git a/app/views/projects/merge_requests/creations/new.html.haml b/app/views/projects/merge_requests/creations/new.html.haml
index 0f618826305..ad4980fa57f 100644
--- a/app/views/projects/merge_requests/creations/new.html.haml
+++ b/app/views/projects/merge_requests/creations/new.html.haml
@@ -1,6 +1,6 @@
-- add_to_breadcrumbs "Merge Requests", project_merge_requests_path(@project)
-- breadcrumb_title "New"
-- page_title "New Merge Request"
+- add_to_breadcrumbs _("Merge Requests"), project_merge_requests_path(@project)
+- breadcrumb_title _("New")
+- page_title _("New Merge Request")
 
 - if @merge_request.can_be_created && !params[:change_branches]
   = render 'new_submit'
diff --git a/app/views/projects/merge_requests/diffs/_commit_widget.html.haml b/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
index 066c8d5dba6..efc052ca791 100644
--- a/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
+++ b/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
@@ -3,7 +3,7 @@
   - `assets/javascripts/diffs/components/commit_widget.vue`
 -#-----------------------------------------------------------------
 - if @commit
-  .info-well.d-none.d-sm-block.prepend-top-default
+  .info-well.d-none.d-sm-block.gl-mt-3
     .well-segment
       %ul.blob-commit-info
         = render 'projects/commits/commit', commit: @commit, merge_request: @merge_request, view_details: true
diff --git a/app/views/projects/merge_requests/edit.html.haml b/app/views/projects/merge_requests/edit.html.haml
index 318c9d809c1..a4bb790ce0b 100644
--- a/app/views/projects/merge_requests/edit.html.haml
+++ b/app/views/projects/merge_requests/edit.html.haml
@@ -1,4 +1,4 @@
-- page_title "Edit", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
+- page_title _("Edit"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge Requests")
 
 %h3.page-title
   Edit Merge Request #{@merge_request.to_reference}
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 4e30f09b9a2..36b1cf0796f 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -2,7 +2,7 @@
 - merge_project = merge_request_source_project_for_project(@project)
 - new_merge_request_path = project_new_merge_request_path(merge_project) if merge_project
 
-- page_title "Merge Requests"
+- page_title _("Merge Requests")
 - new_merge_request_email = @project.new_issuable_address(current_user, 'merge_request')
 
 = render 'projects/last_push'
diff --git a/app/views/projects/merge_requests/invalid.html.haml b/app/views/projects/merge_requests/invalid.html.haml
index 749228a9664..7b831aa2d01 100644
--- a/app/views/projects/merge_requests/invalid.html.haml
+++ b/app/views/projects/merge_requests/invalid.html.haml
@@ -1,4 +1,4 @@
-- page_title "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
+- page_title "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge Requests")
 
 .merge-request
   = render "projects/merge_requests/mr_title"
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 90bc2504cb4..03fa9758587 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -1,14 +1,15 @@
 - @gfm_form = true
 - @content_class = "limit-container-width" unless fluid_layout
-- add_to_breadcrumbs "Merge Requests", project_merge_requests_path(@project)
+- add_to_breadcrumbs _("Merge Requests"), project_merge_requests_path(@project)
 - breadcrumb_title @merge_request.to_reference
-- page_title "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests"
+- page_title "#{@merge_request.title} (#{@merge_request.to_reference})", _("Merge Requests")
 - page_description @merge_request.description
 - page_card_attributes @merge_request.card_attributes
 - suggest_changes_help_path = help_page_path('user/discussions/index.md', anchor: 'suggest-changes')
 - number_of_pipelines = @pipelines.size
+- mr_action = j(params[:tab].presence || 'show')
 
-.merge-request{ data: { mr_action: j(params[:tab].presence || 'show'), url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
+.merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
   = render "projects/merge_requests/mr_title"
 
   .merge-request-details.issuable-details{ data: { id: @merge_request.project.id } }
@@ -76,9 +77,11 @@
       = render "projects/merge_requests/tabs/pane", name: "pipelines", id: "pipelines", class: "pipelines" do
         - if number_of_pipelines.nonzero?
           = render 'projects/commit/pipelines_list', disable_initialization: true, endpoint: pipelines_project_merge_request_path(@project, @merge_request)
+      - if mr_action === "diffs"
+        - add_page_startup_api_call @endpoint_metadata_url
       = render "projects/merge_requests/tabs/pane", name: "diffs", id: "js-diffs-app", class: "diffs", data: { "is-locked": @merge_request.discussion_locked?,
         endpoint: diffs_project_merge_request_path(@project, @merge_request, 'json', request.query_parameters),
-        endpoint_metadata: diffs_metadata_project_json_merge_request_path(@project, @merge_request, 'json', request.query_parameters),
+        endpoint_metadata: @endpoint_metadata_url,
         endpoint_batch: diffs_batch_project_json_merge_request_path(@project, @merge_request, 'json', request.query_parameters),
         endpoint_coverage: @coverage_path,
         help_page_path: suggest_changes_help_path,
@@ -88,7 +91,8 @@
         is_fluid_layout: fluid_layout.to_s,
         dismiss_endpoint: user_callouts_path,
         show_suggest_popover: show_suggest_popover?.to_s,
-        show_whitespace_default: @show_whitespace_default.to_s }
+        show_whitespace_default: @show_whitespace_default.to_s,
+        file_by_file_default: @file_by_file_default.to_s }
 
     .mr-loading-status
       .loading.hide
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index a3083fa2081..eeff91f631c 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -7,13 +7,13 @@
         .col-form-label.col-sm-2
           = f.label :title, _('Title')
         .col-sm-10
-          = f.text_field :title, maxlength: 255, class: 'qa-milestone-title form-control', required: true, autofocus: true
+          = f.text_field :title, maxlength: 255, class: 'form-control', data: { qa_selector: 'milestone_title_field' }, required: true, autofocus: true
       .form-group.row.milestone-description
         .col-form-label.col-sm-2
           = f.label :description, _('Description')
         .col-sm-10
           = render layout: 'shared/md_preview', locals: { url: preview_markdown_path(@project) } do
-            = render 'shared/zen', f: f, attr: :description, classes: 'qa-milestone-description note-textarea', placeholder: _('Write milestone description...')
+            = render 'shared/zen', f: f, attr: :description, classes: 'note-textarea', qa_selector: 'milestone_description_field', placeholder: _('Write milestone description...')
             = render 'shared/notes/hints'
           .clearfix
           .error-alert
@@ -21,7 +21,7 @@
 
   .form-actions
     - if @milestone.new_record?
-      = f.submit _('Create milestone'), class: 'btn-success btn qa-milestone-create-button'
+      = f.submit _('Create milestone'), class: 'btn-success btn', data: { qa_selector: 'create_milestone_button' }
       = link_to _('Cancel'), project_milestones_path(@project), class: 'btn btn-cancel'
     - else
       = f.submit _('Save changes'), class: 'btn-success btn'
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index c89566dac90..2bab2a0fb03 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -7,7 +7,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: 'btn btn-success qa-new-project-milestone', title: _('New milestone') do
+      = link_to new_project_milestone_path(@project), class: 'btn btn-success', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
         = _('New milestone')
 
 .milestones
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index b83204c27e3..5239af82ba6 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -9,10 +9,10 @@
 = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
 
 - if can?(current_user, :read_issue, @project) && @milestone.total_issues_count.zero?
-  .alert.alert-success.prepend-top-default
+  .alert.alert-success.gl-mt-3
     %span= _('Assign some issues to this milestone.')
 - elsif @milestone.complete? && @milestone.active?
-  .alert.alert-success.prepend-top-default
+  .alert.alert-success.gl-mt-3
     %span= _('All issues for this milestone are closed. You may close this milestone now.')
 
 = render 'shared/milestones/tabs', milestone: @milestone
diff --git a/app/views/projects/mirrors/_instructions.html.haml b/app/views/projects/mirrors/_instructions.html.haml
index 7ff6c0a2019..15c9076c1ab 100644
--- a/app/views/projects/mirrors/_instructions.html.haml
+++ b/app/views/projects/mirrors/_instructions.html.haml
@@ -1,4 +1,4 @@
-.account-well.prepend-top-default.append-bottom-default
+.account-well.gl-mt-3.gl-mb-3
   %ul
     %li
       = _('The repository must be accessible over <code>http://</code>,
diff --git a/app/views/projects/mirrors/_ssh_host_keys.html.haml b/app/views/projects/mirrors/_ssh_host_keys.html.haml
index 90236dc0c48..236ede32d31 100644
--- a/app/views/projects/mirrors/_ssh_host_keys.html.haml
+++ b/app/views/projects/mirrors/_ssh_host_keys.html.haml
@@ -3,7 +3,7 @@
 - verified_at = mirror.ssh_known_hosts_verified_at
 
 .form-group.js-ssh-host-keys-section{ class: ('collapse' unless mirror.ssh_mirror_url?) }
-  %button.btn.btn-inverted.btn-secondary.inline.js-detect-host-keys.append-right-10{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
+  %button.btn.btn-inverted.btn-secondary.inline.js-detect-host-keys.gl-mr-3{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
     .js-spinner.d-none.spinner.mr-1
     = _('Detect host keys')
   .fingerprint-ssh-info.js-fingerprint-ssh-info.prepend-top-10.append-bottom-10{ class: ('collapse' unless mirror.ssh_mirror_url?) }
@@ -28,6 +28,6 @@
         = _('Input host keys manually')
       %span.label-hide
         = _('Hide host keys manual input')
-  .js-ssh-known-hosts.collapse.prepend-top-default
+  .js-ssh-known-hosts.collapse.gl-mt-3
     = f.label :ssh_known_hosts, _('SSH host keys'), class: 'label-bold'
     = f.text_area :ssh_known_hosts, class: 'form-control known-hosts js-known-hosts', rows: '10'
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 6821453cffa..d134bfb488e 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -1,5 +1,5 @@
-- breadcrumb_title "Graph"
-- page_title "Graph", @ref
+- breadcrumb_title _("Graph")
+- page_title _("Graph"), @ref
 = render "head"
 %div{ class: container_class }
   .project-network
@@ -16,5 +16,5 @@
 
     - if @commit
       .network-graph{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
-        .text-center.prepend-top-default
+        .text-center.gl-mt-3
           .spinner.spinner-md
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 81a778f76f4..d5099f80ea4 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -4,7 +4,7 @@
 - header_title  _("Projects"), dashboard_projects_path
 - active_tab = local_assigns.fetch(:active_tab, 'blank')
 
-.project-edit-container.prepend-top-default
+.project-edit-container.gl-mt-3
   .project-edit-errors
     = render 'projects/errors'
 
@@ -16,7 +16,7 @@
       %h4.gl-mt-0
         = _('New project')
       %p
-        - among_other_things_link = link_to _('among other things'), help_page_path("user/project/index.md", anchor: "projects-features"), target: '_blank'
+        - among_other_things_link = link_to _('among other things'), help_page_path("user/project/index.md", anchor: "project-features"), target: '_blank'
         = _('A project is where you house your files (repository), plan your work (issues), and publish your documentation (wiki), %{among_other_things_link}.').html_safe % { among_other_things_link: among_other_things_link }
       %p
         = _('All features are enabled for blank projects, from templates, or when importing, but you can disable them afterward in the project settings.')
diff --git a/app/views/projects/no_repo.html.haml b/app/views/projects/no_repo.html.haml
index 08772a0188b..d5030a02cdd 100644
--- a/app/views/projects/no_repo.html.haml
+++ b/app/views/projects/no_repo.html.haml
@@ -1,4 +1,5 @@
 - breadcrumb_title _("Details")
+- page_title _("Details")
 
 %h2
   %i.fa.fa-warning
@@ -14,7 +15,7 @@
   = link_to project_repository_path(@project), method: :post, class: 'btn btn-primary' do
     #{ _('Create empty repository') }
 
-  %strong.prepend-left-10.append-right-10 or
+  %strong.gl-ml-3.gl-mr-3 or
 
   = link_to new_project_import_path(@project), class: 'btn' do
     #{ _('Import repository') }
diff --git a/app/views/projects/notes/_actions.html.haml b/app/views/projects/notes/_actions.html.haml
index 7de7dd3b98b..d725098752d 100644
--- a/app/views/projects/notes/_actions.html.haml
+++ b/app/views/projects/notes/_actions.html.haml
@@ -45,7 +45,7 @@
 
   - if note_editable
     .note-actions-item
-      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn btn-transparent', data: { container: 'body' } do
+      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn btn-transparent', data: { container: 'body', qa_selector: 'edit_comment_button' } do
         %span.link-highlight
           = custom_icon('icon_pencil')
 
diff --git a/app/views/projects/notes/_more_actions_dropdown.html.haml b/app/views/projects/notes/_more_actions_dropdown.html.haml
index 2f0394538bb..8cf1b6b9294 100644
--- a/app/views/projects/notes/_more_actions_dropdown.html.haml
+++ b/app/views/projects/notes/_more_actions_dropdown.html.haml
@@ -2,7 +2,7 @@
 
 - if note_editable || !is_current_user
   .dropdown.more-actions.note-actions-item
-    = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn btn-transparent', data: { toggle: 'dropdown', container: 'body' } do
+    = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn btn-transparent', data: { toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' } do
       %span.icon
         = custom_icon('ellipsis_v')
     %ul.dropdown-menu.more-actions-dropdown.dropdown-open-left
@@ -14,6 +14,6 @@
             = _('Report abuse to admin')
       - if note_editable
         %li
-          = link_to note_url(note), method: :delete, data: { confirm: 'Are you sure you want to delete this comment?' }, remote: true, class: 'js-note-delete' do
+          = link_to note_url(note), method: :delete, data: { confirm: 'Are you sure you want to delete this comment?', qa_selector: 'delete_comment_button' }, remote: true, class: 'js-note-delete' do
             %span.text-danger
               = _('Delete comment')
diff --git a/app/views/projects/pages/show.html.haml b/app/views/projects/pages/show.html.haml
index 4b7810ea357..fc69b390bde 100644
--- a/app/views/projects/pages/show.html.haml
+++ b/app/views/projects/pages/show.html.haml
@@ -1,4 +1,4 @@
-- page_title 'Pages'
+- page_title _('Pages')
 
 - if @project.pages_enabled?
   %h3.page-title.with-button
diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
index 8d88f0be083..f48763cb544 100644
--- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
+++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
@@ -27,8 +27,8 @@
     %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' do
-            = icon('play')
+          = link_to play_pipeline_schedule_path(pipeline_schedule), method: :post, title: s_('Play'), class: 'btn btn-svg gl-display-flex gl-align-items-center gl-justify-content-center' 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' do
             = s_('PipelineSchedules|Take ownership')
diff --git a/app/views/projects/pipelines/_stage.html.haml b/app/views/projects/pipelines/_stage.html.haml
index 3feb99cfcd7..0651ad6fdb8 100644
--- a/app/views/projects/pipelines/_stage.html.haml
+++ b/app/views/projects/pipelines/_stage.html.haml
@@ -1,5 +1,5 @@
 - grouped_statuses = @stage.statuses.latest_ordered.group_by(&:status)
-- HasStatus::ORDERED_STATUSES.each do |ordered_status|
+- Ci::HasStatus::ORDERED_STATUSES.each do |ordered_status|
   - grouped_statuses.fetch(ordered_status, []).each do |status|
     %li
       = render 'ci/status/dropdown_graph_badge', subject: status
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
index 92edde034a6..590ae72a2ff 100644
--- a/app/views/projects/pipelines/_with_tabs.html.haml
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -24,7 +24,7 @@
       %li.js-tests-tab-link
         = link_to test_report_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-tests', action: 'test_report', toggle: 'tab' }, class: 'test-tab' do
           = s_('TestReports|Tests')
-          %span.badge.badge-pill.js-test-report-badge-counter
+          %span.badge.badge-pill.js-test-report-badge-counter= Feature.enabled?(:build_report_summary, @project) ? @pipeline.test_report_summary.total_count : ''
     = render_if_exists "projects/pipelines/tabs_holder", pipeline: @pipeline, project: @project
 
 .tab-content
@@ -83,8 +83,10 @@
 
   - if dag_pipeline_tab_enabled
     #js-tab-dag.tab-pane
-      #js-pipeline-dag-vue{ data: { pipeline_data_path: dag_project_pipeline_path(@project, @pipeline) } }
+      #js-pipeline-dag-vue{ data: { pipeline_data_path: dag_project_pipeline_path(@project, @pipeline), empty_svg_path: image_path('illustrations/empty-state/empty-dag-md.svg'), dag_doc_path: help_page_path('ci/yaml/README.md', anchor: 'needs')} }
 
   #js-tab-tests.tab-pane
-    #js-pipeline-tests-detail
+    #js-pipeline-tests-detail{ data: { full_report_endpoint: test_report_project_pipeline_path(@project, @pipeline, format: :json),
+      summary_endpoint: Feature.enabled?(:build_report_summary, @project) ? summary_project_pipeline_tests_path(@project, @pipeline, format: :json) : '',
+      count_endpoint: test_reports_count_project_pipeline_path(@project, @pipeline, format: :json) } }
   = render_if_exists "projects/pipelines/tabs_content", pipeline: @pipeline, project: @project
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index fa4a77a692a..05f8a126a02 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -7,6 +7,7 @@
   params: params.to_json,
   "help-page-path" => help_page_path('ci/quick_start/README'),
   "help-auto-devops-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'),
   "no-pipelines-svg-path" => image_path('illustrations/pipelines_pending.svg'),
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index f39968eecef..2b2133b8296 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -20,6 +20,4 @@
   - else
     = render "projects/pipelines/with_tabs", pipeline: @pipeline
 
-.js-pipeline-details-vue{ data: { endpoint: project_pipeline_path(@project, @pipeline, format: :json),
-  test_report_endpoint: test_report_project_pipeline_path(@project, @pipeline, format: :json),
-  test_reports_count_endpoint: test_reports_count_project_pipeline_path(@project, @pipeline, format: :json) } }
+.js-pipeline-details-vue{ data: { endpoint: project_pipeline_path(@project, @pipeline, format: :json) } }
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index c24a9061146..ba964e5cd37 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -1,7 +1,8 @@
 - page_title _("Members")
 - can_admin_project_members = can?(current_user, :admin_project_member, @project)
 
-.row.prepend-top-default
+.js-remove-member-modal
+.row.gl-mt-3
   .col-lg-12
     - if project_can_be_shared?
       %h4
diff --git a/app/views/projects/project_templates/_built_in_templates.html.haml b/app/views/projects/project_templates/_built_in_templates.html.haml
index eb41a3e0785..43352952b37 100644
--- a/app/views/projects/project_templates/_built_in_templates.html.haml
+++ b/app/views/projects/project_templates/_built_in_templates.html.haml
@@ -1,6 +1,6 @@
 - Gitlab::ProjectTemplate.all.each do |template|
   .template-option.d-flex.align-items-center{ data: { qa_selector: 'template_option_row' } }
-    .logo.append-right-10.px-1
+    .logo.gl-mr-3.px-1
       = image_tag template.logo, size: 32, class: "btn-template-icon icon-#{template.name}"
     .description
       %strong
@@ -9,7 +9,7 @@
       .text-muted
         = template.description
     .controls.d-flex.align-items-center
-      %a.btn.btn-default.append-right-10{ href: template.preview, rel: 'noopener noreferrer', target: '_blank', data: { track_label: "template_preview", track_property: template.name, track_event: "click_button", track_value: "" } }
+      %a.btn.btn-default.gl-mr-3{ href: template.preview, rel: 'noopener noreferrer', target: '_blank', data: { track_label: "template_preview", track_property: template.name, track_event: "click_button", track_value: "" } }
         = _("Preview")
       %label.btn.btn-success.template-button.choose-template.gl-mb-0{ for: template.name }
         %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name, data: { track_label: "template_use", track_property: template.name, track_event: "click_button", track_value: "" } }
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 c96010550d8..201e2d5b5fb 100644
--- a/app/views/projects/project_templates/_project_fields_form.html.haml
+++ b/app/views/projects/project_templates/_project_fields_form.html.haml
@@ -5,7 +5,7 @@
     .input-group.template-input-group
       .input-group-prepend
         .input-group-text
-          .selected-icon.append-right-10
+          .selected-icon.gl-mr-3
           .selected-template
       .input-group-append
         %button.btn.btn-default.change-template{ type: "button" }
diff --git a/app/views/projects/protected_branches/shared/_matching_branch.html.haml b/app/views/projects/protected_branches/shared/_matching_branch.html.haml
index 2c76bf87945..9145be5d2f2 100644
--- a/app/views/projects/protected_branches/shared/_matching_branch.html.haml
+++ b/app/views/projects/protected_branches/shared/_matching_branch.html.haml
@@ -3,7 +3,7 @@
     = link_to matching_branch.name, project_ref_path(@project, matching_branch.name), class: 'ref-name'
 
     - if @project.root_ref?(matching_branch.name)
-      %span.badge.badge-info.prepend-left-5 default
+      %span.badge.badge-info.gl-ml-2 default
   %td
     - commit = @project.commit(matching_branch.name)
     = link_to(commit.short_id, project_commit_path(@project, commit.id), class: 'commit-sha')
diff --git a/app/views/projects/protected_branches/show.html.haml b/app/views/projects/protected_branches/show.html.haml
index ffaf118a5e3..c671757a603 100644
--- a/app/views/projects/protected_branches/show.html.haml
+++ b/app/views/projects/protected_branches/show.html.haml
@@ -1,6 +1,6 @@
-- page_title @protected_ref.name, "Protected Branches"
+- page_title @protected_ref.name, _("Protected Branches")
 
-.row.prepend-top-default.append-bottom-default
+.row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0.ref-name
       = @protected_ref.name
diff --git a/app/views/projects/protected_tags/_create_protected_tag.html.haml b/app/views/projects/protected_tags/_create_protected_tag.html.haml
index f53b81cada6..d19a6401fc8 100644
--- a/app/views/projects/protected_tags/_create_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/_create_protected_tag.html.haml
@@ -3,6 +3,7 @@
     = dropdown_tag('Select',
                    options: { toggle_class: 'js-allowed-to-create wide',
                    dropdown_class: 'dropdown-menu-selectable capitalize-header',
-                   data: { field_name: 'protected_tag[create_access_levels_attributes][0][access_level]', input_id: 'create_access_levels_attributes' }})
+                   dropdown_qa_selector: 'access_levels_content',
+                   data: { field_name: 'protected_tag[create_access_levels_attributes][0][access_level]', input_id: 'create_access_levels_attributes', qa_selector: 'access_levels_dropdown' }})
 
 = render 'projects/protected_tags/shared/create_protected_tag'
diff --git a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
index 020e6e187a6..8a6ae53a7c4 100644
--- a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
@@ -25,4 +25,4 @@
             = yield :create_access_levels
 
     .card-footer
-      = f.submit 'Protect', class: 'btn-success btn', disabled: true
+      = f.submit 'Protect', class: 'btn-success btn', disabled: true, data: { qa_selector: 'protect_tag_button' }
diff --git a/app/views/projects/protected_tags/shared/_dropdown.html.haml b/app/views/projects/protected_tags/shared/_dropdown.html.haml
index 824a8604f6f..9c7f532fa29 100644
--- a/app/views/projects/protected_tags/shared/_dropdown.html.haml
+++ b/app/views/projects/protected_tags/shared/_dropdown.html.haml
@@ -6,7 +6,7 @@
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
                                   selected: params[:protected_tag_name],
-                                  project_id: @project.try(:id) } }) do
+                                  project_id: @project.try(:id), qa_selector: 'tags_dropdown' } }) do
 
   %ul.dropdown-footer-list
     %li
diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/shared/_index.html.haml
index b0c87ac8c17..4bf3ce09fc7 100644
--- a/app/views/projects/protected_tags/shared/_index.html.haml
+++ b/app/views/projects/protected_tags/shared/_index.html.haml
@@ -1,6 +1,6 @@
 - expanded = expanded_by_default?
 
-%section.settings.no-animate#js-protected-tags-settings{ class: ('expanded' if expanded) }
+%section.settings.no-animate#js-protected-tags-settings{ class: ('expanded' if expanded), data: { qa_selector: 'protected_tag_settings_content' } }
   .settings-header
     %h4
       Protected Tags
diff --git a/app/views/projects/protected_tags/shared/_matching_tag.html.haml b/app/views/projects/protected_tags/shared/_matching_tag.html.haml
index 133c76cd2ad..bf030d36cd6 100644
--- a/app/views/projects/protected_tags/shared/_matching_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_matching_tag.html.haml
@@ -3,7 +3,7 @@
     = link_to matching_tag.name, project_ref_path(@project, matching_tag.name), class: 'ref-name'
 
     - if @project.root_ref?(matching_tag.name)
-      %span.badge.badge-info.prepend-left-5 default
+      %span.badge.badge-info.gl-ml-2 default
   %td
     - commit = @project.commit(matching_tag.name)
     = link_to(commit.short_id, project_commit_path(@project, commit.id), class: 'commit-sha')
diff --git a/app/views/projects/protected_tags/shared/_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
index cc6f0309123..b0563163c9c 100644
--- a/app/views/projects/protected_tags/shared/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
@@ -3,7 +3,7 @@
     %span.ref-name= protected_tag.name
 
     - if @project.root_ref?(protected_tag.name)
-      %span.badge.badge-info.prepend-left-5 default
+      %span.badge.badge-info.gl-ml-2 default
   %td
     - if protected_tag.wildcard?
       - matching_tags = protected_tag.matching(repository.tags)
diff --git a/app/views/projects/protected_tags/show.html.haml b/app/views/projects/protected_tags/show.html.haml
index 6f4535a0b3f..c8052e6ae8d 100644
--- a/app/views/projects/protected_tags/show.html.haml
+++ b/app/views/projects/protected_tags/show.html.haml
@@ -1,6 +1,6 @@
-- page_title @protected_ref.name, "Protected Tags"
+- page_title @protected_ref.name, _("Protected Tags")
 
-.row.prepend-top-default.append-bottom-default
+.row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0.ref-name
       = @protected_ref.name
diff --git a/app/views/projects/refs/logs_tree.js.haml b/app/views/projects/refs/logs_tree.js.haml
deleted file mode 100644
index 506bf54b3f8..00000000000
--- a/app/views/projects/refs/logs_tree.js.haml
+++ /dev/null
@@ -1,23 +0,0 @@
-- @logs.each do |content_data|
-  - file_name = content_data[:file_name]
-  - commit = content_data[:commit]
-  - next unless commit
-
-  :plain
-    var row = $("table.table_#{@hex_path} tr.file_#{hexdigest(file_name)}");
-    row.find("td.tree-time-ago").html('#{escape_javascript time_ago_with_tooltip(commit.committed_date)}');
-    row.find("td.tree-commit").html('#{escape_javascript render("projects/tree/tree_commit_column", commit: commit)}');
-
-  = render_if_exists 'projects/refs/logs_tree_lock_label', lock_label: content_data[:lock_label]
-
-- if @more_log_url
-  :plain
-    if($('#tree-slider').length) {
-      // Load more commit logs for each file in tree
-      // if we still on the same page
-      var url = "#{escape_javascript(@more_log_url)}";
-      gl.utils.ajaxGet(url);
-    }
-
-:plain
-  gl.utils.localTimeAgo($('.js-timeago', 'table.table_#{@hex_path} tbody'));
diff --git a/app/views/projects/releases/new.html.haml b/app/views/projects/releases/new.html.haml
new file mode 100644
index 00000000000..4348035a324
--- /dev/null
+++ b/app/views/projects/releases/new.html.haml
@@ -0,0 +1,3 @@
+- page_title s_('Releases|New Release')
+
+#js-new-release-page{ data: data_for_new_release_page }
diff --git a/app/views/projects/serverless/functions/index.html.haml b/app/views/projects/serverless/functions/index.html.haml
index 2f1da453c0a..b21965915a2 100644
--- a/app/views/projects/serverless/functions/index.html.haml
+++ b/app/views/projects/serverless/functions/index.html.haml
@@ -1,6 +1,6 @@
 - @content_class = "limit-container-width" unless fluid_layout
-- breadcrumb_title 'Serverless'
-- page_title 'Serverless'
+- breadcrumb_title _('Serverless')
+- page_title _('Serverless')
 - status_path = project_serverless_functions_path(@project, format: :json)
 - clusters_path = project_clusters_path(@project)
 
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index e6761807409..2e49e74a9b3 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -1,4 +1,7 @@
-.row.prepend-top-default.append-bottom-default
+- if lookup_context.template_exists?('top', "projects/services/#{@service.to_param}", true)
+  = render "projects/services/#{@service.to_param}/top"
+
+.row.gl-mt-3.gl-mb-3
   .col-lg-4
     %h4.gl-mt-0
       = @service.title
@@ -11,10 +14,10 @@
       %p= @service.detailed_description
   .col-lg-8
     = form_for(@service, as: :service, url: scoped_integration_path(@service), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'can-test' => @service.can_test?, 'test-url' => test_project_service_path(@project, @service) } }) do |form|
-      = render 'shared/service_settings', form: form, service: @service
-      .footer-block.row-content-block
+      = render 'shared/service_settings', form: form, integration: @service
+      .footer-block.row-content-block{ :class => "#{'gl-display-none' if @service.is_a?(AlertsService)}" }
         %input{ id: 'services_redirect_to', type: 'hidden', name: 'redirect_to', value: request.referrer }
-        = service_save_button
+        = service_save_button(disabled: @service.is_a?(AlertsService))
         &nbsp;
         = link_to _('Cancel'), project_settings_integrations_path(@project), class: 'btn btn-cancel'
 
diff --git a/app/views/projects/services/alerts/_help.html.haml b/app/views/projects/services/alerts/_help.html.haml
index 4b09d1d9d0e..7abd198bea5 100644
--- a/app/views/projects/services/alerts/_help.html.haml
+++ b/app/views/projects/services/alerts/_help.html.haml
@@ -1,6 +1 @@
-.js-alerts-service-settings{ data: { activated: @service.activated?.to_s,
-  form_path: scoped_integration_path(@service),
-  authorization_key: @service.token,
-  url: @service.url || _('<namespace / project>'),
-  alerts_setup_url: help_page_path('user/project/integrations/generic_alerts.html', anchor: 'setting-up-generic-alerts'),
-  alerts_usage_url: help_page_path('user/project/operations/alert_management.html') } }
+.js-alerts-service-settings{ data: alerts_settings_data(disabled: true) }
diff --git a/app/views/projects/services/alerts/_top.html.haml b/app/views/projects/services/alerts/_top.html.haml
new file mode 100644
index 00000000000..ebc93978832
--- /dev/null
+++ b/app/views/projects/services/alerts/_top.html.haml
@@ -0,0 +1,8 @@
+.row
+  .col-lg-12
+    .gl-alert.gl-alert-info.js-alerts-moved-alert{ role: 'alert' }
+      = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+      .gl-alert-body
+        = _('You can now manage alert endpoint configuration in the Alerts section on the Operations settings page. Fields on this page have been deprecated.')
+      .gl-alert-actions
+        = link_to _('Visit settings page'), project_settings_operations_path(@project, anchor: 'js-alert-management-settings'), class: 'btn gl-alert-action btn-info new-gl-button'
diff --git a/app/views/projects/services/prometheus/_configuration_banner.html.haml b/app/views/projects/services/prometheus/_configuration_banner.html.haml
index dfcb1c5d240..b4e8458d8b9 100644
--- a/app/views/projects/services/prometheus/_configuration_banner.html.haml
+++ b/app/views/projects/services/prometheus/_configuration_banner.html.haml
@@ -12,14 +12,14 @@
           .svg-container
             = image_tag 'illustrations/monitoring/getting_started.svg'
         .col-sm-10
-          %p.text-success.prepend-top-default
+          %p.text-success.gl-mt-3
             = s_('PrometheusService|Prometheus is being automatically managed 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.prepend-top-default
+          %p.gl-mt-3
             = 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 btn-success'
 
diff --git a/app/views/projects/services/prometheus/_custom_metrics.html.haml b/app/views/projects/services/prometheus/_custom_metrics.html.haml
index 210d0f37d65..3642460467b 100644
--- a/app/views/projects/services/prometheus/_custom_metrics.html.haml
+++ b/app/views/projects/services/prometheus/_custom_metrics.html.haml
@@ -3,7 +3,7 @@
 .col-lg-3
   %p
     = s_('PrometheusService|Custom metrics require Prometheus installed on a cluster with environment scope "*" OR a manually configured Prometheus to be available.')
-    = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus', anchor: 'adding-custom-metrics'), target: '_blank', rel: "noopener noreferrer"
+    = link_to s_('PrometheusService|More information'), help_page_path('operations/metrics/index.md', anchor: 'adding-custom-metrics'), target: '_blank', rel: "noopener noreferrer"
 
 .col-lg-9
   .card.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { qa_selector: 'custom_metrics_container', active_custom_metrics: project_prometheus_metrics_path(project), environments_data: environments_list_data, service_active: "#{@service.active}" } }
diff --git a/app/views/projects/services/prometheus/_external_alerts.html.haml b/app/views/projects/services/prometheus/_external_alerts.html.haml
index 24ff0cc88a3..b27b1ab8723 100644
--- a/app/views/projects/services/prometheus/_external_alerts.html.haml
+++ b/app/views/projects/services/prometheus/_external_alerts.html.haml
@@ -3,6 +3,6 @@
 
 - notify_url = notify_project_prometheus_alerts_url(@project, format: :json)
 - authorization_key = @project.alerting_setting.try(:token)
-- learn_more_url = help_page_path('user/project/integrations/prometheus', anchor: 'external-prometheus-instances')
+- learn_more_url = help_page_path('operations/metrics/alerts.md', anchor: 'external-prometheus-instances')
 
-#js-settings-prometheus-alerts{ data: { notify_url: notify_url, authorization_key: authorization_key, change_key_url: reset_alerting_token_project_settings_operations_path(@project), learn_more_url: learn_more_url } }
+#js-settings-prometheus-alerts{ data: { notify_url: notify_url, authorization_key: authorization_key, change_key_url: reset_alerting_token_project_settings_operations_path(@project), learn_more_url: learn_more_url, disabled: true } }
diff --git a/app/views/projects/services/prometheus/_help.html.haml b/app/views/projects/services/prometheus/_help.html.haml
index 1b5b794a7aa..c5b3fd31efa 100644
--- a/app/views/projects/services/prometheus/_help.html.haml
+++ b/app/views/projects/services/prometheus/_help.html.haml
@@ -1,7 +1,7 @@
 - if @project
   = render 'projects/services/prometheus/configuration_banner', project: @project, service: @service
 
-%h4.append-bottom-default
+%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.')
diff --git a/app/views/projects/services/prometheus/_metrics.html.haml b/app/views/projects/services/prometheus/_metrics.html.haml
index 3bd5f69f67e..9f5160f3dd5 100644
--- a/app/views/projects/services/prometheus/_metrics.html.haml
+++ b/app/views/projects/services/prometheus/_metrics.html.haml
@@ -33,5 +33,5 @@
         .flash-notice
           .flash-text
             = s_("PrometheusService|To set up automatic monitoring, add the environment variable %{variable} to exporter's queries." % { variable: "<code>$CI_ENVIRONMENT_SLUG</code>" }).html_safe
-            = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus', anchor: 'metrics-and-labels')
+            = link_to s_('PrometheusService|More information'), help_page_path('operations/metrics/dashboards/variables.md', anchor: 'query-variables')
       %ul.list-unstyled.metrics-list.js-missing-var-metrics-list
diff --git a/app/views/projects/services/prometheus/_show.html.haml b/app/views/projects/services/prometheus/_show.html.haml
index 728a52f024f..9ce61ed5c13 100644
--- a/app/views/projects/services/prometheus/_show.html.haml
+++ b/app/views/projects/services/prometheus/_show.html.haml
@@ -3,7 +3,7 @@
     %h4.gl-mt-0
       = s_('PrometheusService|Metrics')
 
-.row.append-bottom-default.prometheus-metrics-monitoring.js-prometheus-metrics-monitoring
+.row.gl-mb-3.prometheus-metrics-monitoring.js-prometheus-metrics-monitoring
   = render 'projects/services/prometheus/metrics', project: @project
 
 = render 'projects/services/prometheus/external_alerts', project: @project
diff --git a/app/views/projects/services/prometheus/_top.html.haml b/app/views/projects/services/prometheus/_top.html.haml
new file mode 100644
index 00000000000..338414be5ab
--- /dev/null
+++ b/app/views/projects/services/prometheus/_top.html.haml
@@ -0,0 +1,10 @@
+- return unless @service.manual_configuration?
+
+.row
+  .col-lg-12
+    .gl-alert.gl-alert-info.js-alerts-moved-alert{ role: 'alert' }
+      = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+      .gl-alert-body
+        = s_('AlertSettings|You can now set up alert endpoints for manually configured Prometheus instances in the Alerts section on the Operations settings page. Alert endpoint fields on this page have been deprecated.')
+      .gl-alert-actions
+        = link_to _('Visit settings page'), project_settings_operations_path(@project, anchor: 'js-alert-management-settings'), class: 'btn gl-alert-action btn-info gl-button'
diff --git a/app/views/projects/settings/_general.html.haml b/app/views/projects/settings/_general.html.haml
index 5eeebe4160f..3ffa029a25d 100644
--- a/app/views/projects/settings/_general.html.haml
+++ b/app/views/projects/settings/_general.html.haml
@@ -31,7 +31,7 @@
 
   = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :project
 
-  .form-group.prepend-top-default.append-bottom-20
+  .form-group.gl-mt-3.append-bottom-20
     .avatar-container.s90
       = project_icon(@project, alt: _('Project avatar'), class: 'avatar project-avatar s90')
     = f.label :avatar, _('Project avatar'), class: 'label-bold d-block'
diff --git a/app/views/projects/settings/access_tokens/index.html.haml b/app/views/projects/settings/access_tokens/index.html.haml
index 092f9c2333c..4992288a8c8 100644
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
@@ -4,7 +4,7 @@
 - type_plural = _('project access tokens')
 - @content_class = 'limit-container-width' unless fluid_layout
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title
diff --git a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
index 8b84acb67c1..7284b4bb55d 100644
--- a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
@@ -40,18 +40,18 @@
                   = form.radio_button :deploy_strategy, 'continuous', class: 'form-check-input'
                   = form.label :deploy_strategy_continuous, class: 'form-check-label' do
                     = s_('CICD|Continuous deployment to production')
-                    = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md', anchor: 'auto-deploy'), target: '_blank'
+                    = link_to icon('question-circle'), help_page_path('topics/autodevops/stages.md', anchor: 'auto-deploy'), target: '_blank'
 
                 .form-check
                   = form.radio_button :deploy_strategy, 'timed_incremental', class: 'form-check-input'
                   = form.label :deploy_strategy_timed_incremental, class: 'form-check-label' do
                     = s_('CICD|Continuous deployment to production using timed incremental rollout')
-                    = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md', anchor: 'timed-incremental-rollout-to-production-premium'), target: '_blank'
+                    = link_to icon('question-circle'), help_page_path('topics/autodevops/customize.md', anchor: 'timed-incremental-rollout-to-production-premium'), target: '_blank'
 
                 .form-check
                   = form.radio_button :deploy_strategy, 'manual', class: 'form-check-input'
                   = form.label :deploy_strategy_manual, class: 'form-check-label' do
                     = s_('CICD|Automatic deployment to staging, manual deployment to production')
-                    = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md', anchor: 'incremental-rollout-to-production-premium'), target: '_blank'
+                    = link_to icon('question-circle'), help_page_path('topics/autodevops/customize.md', anchor: 'incremental-rollout-to-production-premium'), target: '_blank'
 
           = f.submit _('Save changes'), class: "btn btn-success prepend-top-15", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index a1809cecafb..e8e5a5f0256 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -1,4 +1,4 @@
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-12
     = form_for @project, url: project_settings_ci_cd_path(@project, anchor: 'js-general-pipeline-settings') do |f|
       = form_errors(@project)
@@ -147,5 +147,5 @@
 
 %hr
 
-.row.prepend-top-default
+.row.gl-mt-3
   = render partial: 'badge', collection: @badges
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index 4e14426a069..b5452fcca55 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -66,11 +66,11 @@
   %section.settings.no-animate#js-registry-policies{ class: ('expanded' if expanded) }
     .settings-header
       %h4
-        = _("Container Registry tag expiration policy")
-        = link_to icon('question-circle'), help_page_path('user/packages/container_registry/index', anchor: 'expiration-policy'), target: '_blank', rel: 'noopener noreferrer'
+        = _("Cleanup policy for tags")
       %button.btn.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
       %p
-        = _("Expiration policy for the Container Registry is a perfect solution for keeping the Registry space down while still enjoying the full power of GitLab CI/CD.")
+        = _("Save space and find tags in the Container Registry more easily. Enable the cleanup policy to remove stale tags and keep only the ones you need.")
+        = link_to _('More information'), help_page_path('user/packages/container_registry/index', anchor: 'cleanup-policy', target: '_blank', rel: 'noopener noreferrer')
     .settings-content
       = render 'projects/registry/settings/index'
diff --git a/app/views/projects/settings/integrations/show.html.haml b/app/views/projects/settings/integrations/show.html.haml
index e7a509abc8b..d9068bde847 100644
--- a/app/views/projects/settings/integrations/show.html.haml
+++ b/app/views/projects/settings/integrations/show.html.haml
@@ -3,7 +3,7 @@
 - page_title _('Integrations')
 
 - if show_webhooks_moved_alert?
-  .gl-alert.gl-alert-info.js-webhooks-moved-alert.prepend-top-default{ role: 'alert', data: { feature_id: UserCalloutsHelper::WEBHOOKS_MOVED, dismiss_endpoint: user_callouts_path } }
+  .gl-alert.gl-alert-info.js-webhooks-moved-alert.gl-mt-3{ role: 'alert', data: { feature_id: UserCalloutsHelper::WEBHOOKS_MOVED, dismiss_endpoint: user_callouts_path } }
     = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
     %button.js-close.gl-alert-dismiss{ type: 'button', 'aria-label' => _('Dismiss') }
       = sprite_icon('close', size: 16, css_class: 'gl-icon')
diff --git a/app/views/projects/settings/operations/_alert_management.html.haml b/app/views/projects/settings/operations/_alert_management.html.haml
new file mode 100644
index 00000000000..f8f3ecb6273
--- /dev/null
+++ b/app/views/projects/settings/operations/_alert_management.html.haml
@@ -0,0 +1,14 @@
+- return unless can?(current_user, :admin_operations, @project)
+- expanded = expanded_by_default?
+
+%section.settings.no-animate#js-alert-management-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h3{ :class => "h4" }
+      = _('Alerts')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = _('Expand')
+    %p
+      = _('Display alerts from all your monitoring tools directly within GitLab.')
+      = link_to _('More information'), help_page_path('user/project/operations/alert_management'), target: '_blank', rel: 'noopener noreferrer'
+  .settings-content
+    .js-alerts-settings{ data: alerts_settings_data }
diff --git a/app/views/projects/settings/operations/_configuration_banner.html.haml b/app/views/projects/settings/operations/_configuration_banner.html.haml
index bdbc9b7d69d..69bbd0edac7 100644
--- a/app/views/projects/settings/operations/_configuration_banner.html.haml
+++ b/app/views/projects/settings/operations/_configuration_banner.html.haml
@@ -12,13 +12,13 @@
           .svg-container
             = image_tag 'illustrations/monitoring/getting_started.svg'
         .col-sm-10
-          %p.text-success.prepend-top-default
+          %p.text-success.gl-mt-3
             = s_('PrometheusService|Prometheus is being automatically managed 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.prepend-top-default
+          %p.gl-mt-3
             = 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 btn-success'
diff --git a/app/views/projects/settings/operations/_incidents.html.haml b/app/views/projects/settings/operations/_incidents.html.haml
index 3b1b0a00380..e7236cdec69 100644
--- a/app/views/projects/settings/operations/_incidents.html.haml
+++ b/app/views/projects/settings/operations/_incidents.html.haml
@@ -1,32 +1 @@
-- templates = []
-- setting = project_incident_management_setting
-- templates = setting.available_issue_templates.map { |t| [t.name, t.key] }
-
-%section.settings.no-animate.qa-incident-management-settings{ data: { qa_selector: 'incidents_settings_content' } }
-  .settings-header
-    %h3{ :class => "h4" }= _('Incidents')
-    %button.btn.js-settings-toggle{ type: 'button' }
-      = _('Expand')
-    %p
-      = _('Action to take when receiving an alert.')
-      = link_to help_page_path('user/project/integrations/prometheus', anchor: 'taking-action-on-incidents-ultimate') do
-        = _('More information')
-  .settings-content
-    = form_for @project, url: project_settings_operations_path(@project), method: :patch do |f|
-      = form_errors(@project.incident_management_setting)
-      .form-group
-        = f.fields_for :incident_management_setting_attributes, setting do |form|
-          .form-group
-            = form.check_box :create_issue, data: { qa_selector: 'create_issue_checkbox' }
-            = form.label :create_issue, _('Create an issue. Issues are created for each alert triggered.'), class: 'form-check-label'
-          .form-group.col-sm-8
-            = form.label :issue_template_key, class: 'label-bold' do
-              = _('Issue template (optional)')
-              = link_to icon('question-circle'), help_page_path('user/project/description_templates', anchor: 'creating-issue-templates'), target: '_blank', rel: 'noopener noreferrer'
-            .select-wrapper
-              = form.select :issue_template_key, templates, {include_blank: 'No template selected'}, class: "form-control select-control", data: { qa_selector: 'incident_templates_dropdown' }
-              = icon('chevron-down')
-          .form-group
-            = form.check_box :send_email
-            = form.label :send_email, _('Send a separate email notification to Developers.'), class: 'form-check-label'
-      = f.submit _('Save changes'), class: 'btn btn-success', data: { qa_selector: 'save_changes_button' }
+.js-incidents-settings{ data: operations_settings_data }
diff --git a/app/views/projects/settings/operations/_prometheus.html.haml b/app/views/projects/settings/operations/_prometheus.html.haml
index b0fa750e131..7ccc829662d 100644
--- a/app/views/projects/settings/operations/_prometheus.html.haml
+++ b/app/views/projects/settings/operations/_prometheus.html.haml
@@ -11,7 +11,7 @@
     - if @project
       = render 'projects/settings/operations/configuration_banner', project: @project, service: service
 
-    %b.append-bottom-default
+    %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.')
diff --git a/app/views/projects/settings/operations/show.html.haml b/app/views/projects/settings/operations/show.html.haml
index 9e4fbf81ca4..103828ee0a0 100644
--- a/app/views/projects/settings/operations/show.html.haml
+++ b/app/views/projects/settings/operations/show.html.haml
@@ -2,6 +2,7 @@
 - page_title _('Operations Settings')
 - breadcrumb_title _('Operations Settings')
 
+= render 'projects/settings/operations/alert_management', alerts_service: alerts_service, prometheus_service: prometheus_service
 = render 'projects/settings/operations/incidents'
 = render 'projects/settings/operations/error_tracking'
 = render 'projects/settings/operations/prometheus', service: prometheus_service if Feature.enabled?(:settings_operations_prometheus_service)
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index 17bc10af58a..4a521f2f46e 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -1,4 +1,5 @@
 - breadcrumb_title _("Details")
+- page_title _("Projects")
 - @content_class = "limit-container-width" unless fluid_layout
 
 = content_for :meta_tags do
@@ -6,10 +7,6 @@
 
 = render partial: 'flash_messages', locals: { project: @project }
 
-- if !@project.empty_repo? && can?(current_user, :download_code, @project) && !vue_file_list_enabled?
-  - signatures_path = project_signatures_path(@project, @project.default_branch)
-  .js-signature-container{ data: { 'signatures-path': signatures_path } }
-
 %div{ class: [("limit-container-width" unless fluid_layout)] }
   = render "projects/last_push"
 
diff --git a/app/views/projects/sidebar/_issues_service_desk.html.haml b/app/views/projects/sidebar/_issues_service_desk.html.haml
new file mode 100644
index 00000000000..2730fe37f28
--- /dev/null
+++ b/app/views/projects/sidebar/_issues_service_desk.html.haml
@@ -0,0 +1,3 @@
+= nav_link(controller: :issues, action: :service_desk ) do
+  = link_to service_desk_project_issues_path(@project), title: 'Service Desk' do
+    = _('Service Desk')
diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml
index 6aedab36e1b..e4645101765 100644
--- a/app/views/projects/snippets/_actions.html.haml
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -14,7 +14,7 @@
     = link_to _('Submit as spam'), mark_as_spam_project_snippet_path(@project, @snippet), method: :post, class: 'btn btn-grouped btn-spam', title: _('Submit as spam')
 - if can?(current_user, :create_snippet, @project) || can?(current_user, :update_snippet, @snippet)
   .d-block.d-sm-none.dropdown
-    %button.btn.btn-default.btn-block.gl-mb-0.prepend-top-5{ data: { toggle: "dropdown" } }
+    %button.btn.btn-default.btn-block.gl-mb-0.gl-mt-2{ data: { toggle: "dropdown" } }
       = _('Options')
       = icon('caret-down')
     .dropdown-menu.dropdown-menu-full-width
diff --git a/app/views/projects/starrers/_starrer.html.haml b/app/views/projects/starrers/_starrer.html.haml
index 377d62f8abd..d8a2c72d9ce 100644
--- a/app/views/projects/starrers/_starrer.html.haml
+++ b/app/views/projects/starrers/_starrer.html.haml
@@ -13,7 +13,7 @@
           %span.cgray= starrer.user.to_reference
 
           - if starrer.user == current_user
-            %span.badge.badge-success.prepend-left-5= _("It's you")
+            %span.badge.badge-success.gl-ml-2= _("It's you")
 
         .block-truncated
           = time_ago_with_tooltip(starrer.starred_since)
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index 79a00b00fa6..59c7d0401d1 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -26,7 +26,7 @@
         = _("Release")
         = link_to release.name, project_releases_path(@project, anchor: release.tag), class: 'tag-release-link'
       - if release.description.present?
-        .md.prepend-top-default
+        .md.gl-mt-3
           = markdown_field(release, :description)
 
   .row-fixed-content.controls.flex-row
@@ -38,5 +38,5 @@
     - if can?(current_user, :admin_tag, @project)
       = link_to edit_project_tag_release_path(@project, tag.name), class: 'btn btn-edit has-tooltip', title: s_('TagsPage|Edit release notes'), data: { container: "body" } do
         = icon("pencil")
-      = link_to project_tag_path(@project, tag.name), class: "btn btn-remove remove-row has-tooltip prepend-left-10 #{protected_tag?(@project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), method: :delete, data: { confirm: s_('TagsPage|Deleting the %{tag_name} tag cannot be undone. Are you sure?') % { tag_name: tag.name }, container: 'body' }, remote: true do
+      = link_to project_tag_path(@project, tag.name), class: "btn btn-remove remove-row has-tooltip gl-ml-3 #{protected_tag?(@project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), method: :delete, data: { confirm: s_('TagsPage|Deleting the %{tag_name} tag cannot be undone. Are you sure?') % { tag_name: tag.name }, container: 'body' }, remote: true do
         = icon("trash-o")
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 6ad7cf1848f..e3d3f2226a8 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -24,7 +24,7 @@
             %li
               = link_to title, filter_tags_path(sort: value), class: ("is-active" if @sort == value)
       - if can?(current_user, :admin_tag, @project)
-        = link_to new_project_tag_path(@project), class: 'btn btn-success new-tag-btn' do
+        = link_to new_project_tag_path(@project), class: 'btn btn-success new-tag-btn', data: { qa_selector: "new_tag_button" } do
           = s_('TagsPage|New tag')
       = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn d-none d-sm-inline-block has-tooltip' do
         = icon("rss")
diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml
index 5aabfdd022a..c32318df7cc 100644
--- a/app/views/projects/tags/new.html.haml
+++ b/app/views/projects/tags/new.html.haml
@@ -14,7 +14,7 @@
   .form-group.row
     = label_tag :tag_name, nil, class: 'col-form-label col-sm-2'
     .col-sm-10
-      = text_field_tag :tag_name, params[:tag_name], required: true, autofocus: true, class: 'form-control'
+      = text_field_tag :tag_name, params[:tag_name], required: true, autofocus: true, class: 'form-control', data: { qa_selector: "tag_name_field" }
   .form-group.row
     = label_tag :ref, 'Create from', class: 'col-form-label col-sm-2'
     .col-sm-10.create-from
@@ -29,7 +29,7 @@
   .form-group.row
     = label_tag :message, nil, class: 'col-form-label col-sm-2'
     .col-sm-10
-      = text_area_tag :message, @message, required: false, class: 'form-control', rows: 5
+      = text_area_tag :message, @message, required: false, class: 'form-control', rows: 5, data: { qa_selector: "tag_message_field" }
       .form-text.text-muted
         = tag_description_help_text
   %hr
@@ -40,17 +40,17 @@
         - link_start = '<a href="%{url}" rel="noopener noreferrer" target="_blank">'.html_safe
         - releases_page_path = project_releases_path(@project)
         - releases_page_link_start = link_start % { url: releases_page_path }
-        - docs_url = help_page_path('user/project/releases/index.md', anchor: 'creating-a-release')
+        - docs_url = help_page_path('user/project/releases/index.md', anchor: 'create-a-release')
         - docs_link_start = link_start % { url: docs_url }
         - link_end = '</a>'.html_safe
         - replacements = { releases_page_link_start: releases_page_link_start, docs_link_start: docs_link_start, link_end: link_end }
         = s_('TagsPage|Optionally, create a public Release of your project, based on this tag. Release notes are displayed on the %{releases_page_link_start}Releases%{link_end} page. %{docs_link_start}More information%{link_end}').html_safe % replacements
 
       = render layout: 'shared/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do
-        = render 'shared/zen', attr: :release_description, classes: 'note-textarea', placeholder: s_('TagsPage|Write your release notes or drag files here…'), current_text: @release_description
+        = render 'shared/zen', attr: :release_description, classes: 'note-textarea', placeholder: s_('TagsPage|Write your release notes or drag files here…'), current_text: @release_description, qa_selector: 'release_notes_field'
         = render 'shared/notes/hints'
   .form-actions
-    = button_tag s_('TagsPage|Create tag'), class: 'btn btn-success'
+    = button_tag s_('TagsPage|Create tag'), class: 'btn btn-success', data: { qa_selector: "create_tag_button" }
     = link_to s_('TagsPage|Cancel'), project_tags_path(@project), class: 'btn btn-cancel'
 -# haml-lint:disable InlineJavaScript
 %script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe
diff --git a/app/views/projects/tags/releases/edit.html.haml b/app/views/projects/tags/releases/edit.html.haml
index a3746808440..896dbe454e6 100644
--- a/app/views/projects/tags/releases/edit.html.haml
+++ b/app/views/projects/tags/releases/edit.html.haml
@@ -1,6 +1,6 @@
-- add_to_breadcrumbs "Tags", project_tags_path(@project)
+- add_to_breadcrumbs _("Tags"), project_tags_path(@project)
 - breadcrumb_title @tag.name
-- page_title "Edit", @tag.name, "Tags"
+- page_title _("Edit"), @tag.name, _("Tags")
 
 .sub-header-block.no-bottom-space
   .oneline
@@ -14,6 +14,6 @@
     = render 'shared/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here…"
     = render 'shared/notes/hints'
   .error-alert
-  .prepend-top-default
+  .gl-mt-3
     = f.submit 'Save changes', class: 'btn btn-success'
     = link_to "Cancel", project_tag_path(@project, @tag.name), class: "btn btn-default btn-cancel"
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index 6f53a687fb9..edb0577cebd 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -9,7 +9,7 @@
 .top-area.multi-line.flex-wrap
   .nav-text
     .title
-      %span.item-title.ref-name
+      %span.item-title.ref-name{ data: { qa_selector: 'tag_name_content' } }
         = icon('tag')
         = @tag.name
       - if protected_tag?(@project, @tag)
@@ -56,12 +56,12 @@
           %i.fa.fa-trash-o
 
   - if @tag.message.present?
-    %pre.wrap
+    %pre.wrap{ data: { qa_selector: 'tag_message_content' } }
       = strip_signature(@tag.message)
 
-.append-bottom-default.prepend-top-default
+.gl-mb-3.gl-mt-3
   - if @release.description.present?
-    .description.md
+    .description.md{ data: { qa_selector: 'tag_release_notes_content' } }
       = markdown_field(@release, :description)
   - else
     = s_('TagsPage|This tag has no release notes.')
diff --git a/app/views/projects/tree/_readme.html.haml b/app/views/projects/tree/_readme.html.haml
index 3e3804ae204..6d2bdda8254 100644
--- a/app/views/projects/tree/_readme.html.haml
+++ b/app/views/projects/tree/_readme.html.haml
@@ -1,5 +1,5 @@
 - if readme.rich_viewer
-  %article.file-holder.readme-holder{ id: 'readme', class: [("limited-width-container" unless fluid_layout), ("js-show-on-root" if vue_file_list_enabled?)] }
+  %article.file-holder.readme-holder{ id: 'readme', class: [("limited-width-container" unless fluid_layout)] }
     .js-file-title.file-title-flex-parent
       .file-header-content
         = blob_icon readme.mode, readme.name
diff --git a/app/views/projects/tree/_tree_commit_column.html.haml b/app/views/projects/tree/_tree_commit_column.html.haml
deleted file mode 100644
index 065fef606d5..00000000000
--- a/app/views/projects/tree/_tree_commit_column.html.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-- full_title = markdown_field(commit, :full_title)
-%span.str-truncated
-  = link_to_html full_title, project_commit_path(@project, commit.id), title: full_title, class: 'tree-commit-link'
diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
index c65420d537b..a4427c6eedb 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -10,7 +10,7 @@
       - if @path.present?
         %tr.tree-item
           %td.tree-item-file-name
-            = link_to "..", project_tree_path(@project, up_dir_path), class: 'prepend-left-10'
+            = link_to "..", project_tree_path(@project, up_dir_path), class: 'gl-ml-3'
           %td
           %td.d-none.d-sm-table-cell
 
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index d5f7673488f..eab6d750a02 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -5,92 +5,17 @@
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'tree', path: @path, show_create: true
 
-    - if on_top_of_branch?
-      - addtotree_toggle_attributes = { 'data-toggle': 'dropdown', 'data-target': '.add-to-tree-dropdown', 'data-boundary': 'window' }
-    - else
-      - addtotree_toggle_attributes = { title: _("You can only add files when you are on a branch"), data: { container: 'body' }, class: 'disabled has-tooltip' }
-
-  - if vue_file_list_enabled?
-    #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
-  - else
-    %ul.breadcrumb.repo-breadcrumb
-      %li.breadcrumb-item
-        = link_to project_tree_path(@project, @ref) do
-          = @project.path
-      - path_breadcrumbs do |title, path|
-        %li.breadcrumb-item
-          = link_to truncate(title, length: 40), project_tree_path(@project, tree_join(@ref, path))
-
-      - if can_collaborate || can_create_mr_from_fork
-        %li.breadcrumb-item
-          %button.btn.add-to-tree.qa-add-to-tree{ addtotree_toggle_attributes, type: 'button' }
-            = sprite_icon('plus', size: 16, css_class: 'float-left')
-            = sprite_icon('chevron-down', size: 16, css_class: 'float-left')
-          - if on_top_of_branch?
-            .add-to-tree-dropdown
-              %ul.dropdown-menu
-                - if can_edit_tree?
-                  %li.dropdown-header
-                    #{ _('This directory') }
-                  %li
-                    = link_to project_new_blob_path(@project, @id), class: 'qa-new-file-option' do
-                      #{ _('New file') }
-                  %li
-                    = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } do
-                      #{ _('Upload file') }
-                  %li
-                    = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
-                      #{ _('New directory') }
-                - elsif can_create_mr_from_fork
-                  %li
-                    - continue_params = { to: project_new_blob_path(@project, @id),
-                                          notice: edit_in_new_fork_notice,
-                                          notice_now: edit_in_new_fork_notice_now }
-                    - fork_path = project_forks_path(@project, namespace_key: current_user.namespace.id, continue: continue_params)
-                    = link_to fork_path, method: :post do
-                      #{ _('New file') }
-                  %li
-                    - continue_params = { to: request.fullpath,
-                                          notice: edit_in_new_fork_notice + " Try to upload a file again.",
-                                          notice_now: edit_in_new_fork_notice_now }
-                    - fork_path = project_forks_path(@project, namespace_key: current_user.namespace.id, continue: continue_params)
-                    = link_to fork_path, method: :post do
-                      #{ _('Upload file') }
-                  %li
-                    - continue_params = { to: request.fullpath,
-                                          notice: edit_in_new_fork_notice + " Try to create a new directory again.",
-                                          notice_now: edit_in_new_fork_notice_now }
-                    - fork_path = project_forks_path(@project, namespace_key: current_user.namespace.id, continue: continue_params)
-                    = link_to fork_path, method: :post do
-                      #{ _('New directory') }
-
-                - if can?(current_user, :push_code, @project)
-                  %li.divider
-                  %li.dropdown-header
-                    #{ _('This repository') }
-                  %li
-                    = link_to new_project_branch_path(@project) do
-                      #{ _('New branch') }
-                  %li
-                    = link_to new_project_tag_path(@project) do
-                      #{ _('New tag') }
+  #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
 
 .tree-controls
   .d-block.d-sm-flex.flex-wrap.align-items-start.gl-children-ml-sm-3<
     = render_if_exists 'projects/tree/lock_link'
-    - if vue_file_list_enabled?
-      #js-tree-history-link.d-inline-block{ data: { history_link: project_commits_path(@project, @ref) } }
-    - else
-      = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
+    #js-tree-history-link.d-inline-block{ data: { history_link: project_commits_path(@project, @ref) } }
 
     = render 'projects/find_file_link'
 
     - if can_collaborate || current_user&.already_forked?(@project)
-      - if vue_file_list_enabled?
-        #js-tree-web-ide-link.d-inline-block
-      - else
-        = link_to ide_edit_path(@project, @ref, @path), class: 'btn btn-default qa-web-ide-button' do
-          = _('Web IDE')
+      #js-tree-web-ide-link.d-inline-block
     - elsif can_create_mr_from_fork
       = link_to '#modal-confirm-fork', class: 'btn btn-default qa-web-ide-button', data: { target: '#modal-confirm-fork', toggle: 'modal'} do
         = _('Web IDE')
diff --git a/app/views/projects/tree/_tree_row.html.haml b/app/views/projects/tree/_tree_row.html.haml
index 8a27ea66523..300cd5423bf 100644
--- a/app/views/projects/tree/_tree_row.html.haml
+++ b/app/views/projects/tree/_tree_row.html.haml
@@ -14,7 +14,7 @@
       %a.str-truncated{ href: fast_project_blob_path(@project, tree_join(@id || @commit.id, tree_row_name)), title: tree_row_name }
         %span= tree_row_name
       - if @lfs_blob_ids.include?(tree_row.id)
-        %span.badge.label-lfs.prepend-left-5 LFS
+        %span.badge.label-lfs.gl-ml-2 LFS
 
     - elsif tree_row_type == :commit
       = tree_icon('archive', tree_row.mode, tree_row.name)
diff --git a/app/views/projects/tree/show.html.haml b/app/views/projects/tree/show.html.haml
index 65f5bc31d2e..3dd12a7b641 100644
--- a/app/views/projects/tree/show.html.haml
+++ b/app/views/projects/tree/show.html.haml
@@ -1,13 +1,9 @@
 - breadcrumb_title _("Repository")
 - @content_class = "limit-container-width" unless fluid_layout
-- signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit)
 
 - page_title @path.presence || _("Files"), @ref
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_commits_url(@project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
 
-- unless vue_file_list_enabled?
-  .js-signature-container{ data: { 'signatures-path': signatures_path } }
-
 = render 'projects/last_push'
 = render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
index 4ca070cb162..4e097f345c2 100644
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
@@ -1,4 +1,4 @@
-.row.prepend-top-default.append-bottom-default.triggers-container
+.row.gl-mt-3.gl-mb-3.triggers-container
   .col-lg-12
     .card
       .card-header
@@ -21,7 +21,7 @@
                 %th
               = render partial: 'projects/triggers/trigger', collection: @triggers, as: :trigger
         - else
-          %p.settings-message.text-center.append-bottom-default
+          %p.settings-message.text-center.gl-mb-3
             No triggers have been created yet. Add one using the form above.
 
       .card-footer
@@ -38,7 +38,7 @@
           %code REF_NAME
           with the trigger token and the branch or tag name respectively.
 
-        %h5.prepend-top-default
+        %h5.gl-mt-3
           Use cURL
 
         %p.light
@@ -51,7 +51,7 @@
                  -F token=TOKEN \
                  -F ref=REF_NAME \
                  #{builds_trigger_url(@project.id)}
-        %h5.prepend-top-default
+        %h5.gl-mt-3
           Use .gitlab-ci.yml
 
         %p.light
@@ -66,7 +66,7 @@
               stage: deploy
               script:
                 - "curl -X POST -F token=TOKEN -F ref=REF_NAME #{builds_trigger_url(@project.id)}"
-        %h5.prepend-top-default
+        %h5.gl-mt-3
           Use webhook
 
         %p.light
@@ -76,7 +76,7 @@
         %pre
           :plain
              #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN
-        %h5.prepend-top-default
+        %h5.gl-mt-3
           Pass job variables
 
         %p.light
diff --git a/app/views/projects/triggers/_trigger.html.haml b/app/views/projects/triggers/_trigger.html.haml
index d80248f7e80..3036e918160 100644
--- a/app/views/projects/triggers/_trigger.html.haml
+++ b/app/views/projects/triggers/_trigger.html.haml
@@ -31,7 +31,7 @@
     - revoke_trigger_confirmation = "By revoking a trigger you will break any processes making use of it. Are you sure?"
     - if can?(current_user, :admin_trigger, trigger)
       = link_to edit_project_trigger_path(@project, trigger), method: :get, title: "Edit", class: "btn btn-default btn-sm" do
-        %i.fa.fa-pencil
+        = sprite_icon('pencil')
     - if can?(current_user, :manage_trigger, trigger)
       = link_to project_trigger_path(@project, trigger), data: { confirm: revoke_trigger_confirmation }, method: :delete, title: "Revoke", class: "btn btn-default btn-warning btn-sm btn-trigger-revoke" do
         %i.fa.fa-trash
diff --git a/app/views/projects/triggers/edit.html.haml b/app/views/projects/triggers/edit.html.haml
index e287f05fe6a..ee2714e1eb9 100644
--- a/app/views/projects/triggers/edit.html.haml
+++ b/app/views/projects/triggers/edit.html.haml
@@ -1,6 +1,6 @@
-- page_title "Trigger"
+- page_title _("Trigger")
 
-.row.prepend-top-default.append-bottom-default
+.row.gl-mt-3.gl-mb-3
   .col-lg-12
     %h4.gl-mt-0
       Update trigger
diff --git a/app/views/projects/wikis/git_access.html.haml b/app/views/projects/wikis/git_access.html.haml
index 208dedc988b..1db4554541d 100644
--- a/app/views/projects/wikis/git_access.html.haml
+++ b/app/views/projects/wikis/git_access.html.haml
@@ -2,8 +2,7 @@
 - page_title s_("WikiClone|Git Access"), _("Wiki")
 
 .wiki-page-header.top-area.has-sidebar-toggle.py-3.flex-column.flex-lg-row
-  %button.btn.btn-default.d-block.d-sm-block.d-md-none.float-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
-    = icon('angle-double-left')
+  = wiki_sidebar_toggle_button
 
   .git-access-header.w-100.d-flex.flex-column.justify-content-center
     %span