Add latest changes from gitlab-org/gitlab@master

63 files changed, 242 insertions, 157 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index a589fb325b2..642d104675a 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -147,7 +147,7 @@ export default {
 <template>
   <div>
     <div class="d-flex board-card-header" dir="auto">
-      <h4 class="board-card-title append-bottom-0 prepend-top-0">
+      <h4 class="board-card-title append-bottom-0 gl-mt-0">
         <icon
           v-if="issue.blocked"
           v-gl-tooltip
diff --git a/app/assets/javascripts/custom_metrics/components/custom_metrics_form.vue b/app/assets/javascripts/custom_metrics/components/custom_metrics_form.vue
index e5c0d1e4970..f60be52d6ca 100644
--- a/app/assets/javascripts/custom_metrics/components/custom_metrics_form.vue
+++ b/app/assets/javascripts/custom_metrics/components/custom_metrics_form.vue
@@ -66,7 +66,7 @@ export default {
 </script>
 <template>
   <div class="row my-3">
-    <h4 class="prepend-top-0 col-lg-8 offset-lg-2">{{ titleText }}</h4>
+    <h4 class="gl-mt-0 col-lg-8 offset-lg-2">{{ titleText }}</h4>
     <form ref="form" class="col-lg-8 offset-lg-2" :action="customMetricsPath" method="post">
       <custom-metrics-form-fields
         :form-operation="formOperation"
diff --git a/app/assets/javascripts/pipelines/components/dag/dag.vue b/app/assets/javascripts/pipelines/components/dag/dag.vue
new file mode 100644
index 00000000000..297affcd41f
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/dag/dag.vue
@@ -0,0 +1,65 @@
+<script>
+import { GlAlert } from '@gitlab/ui';
+import axios from '~/lib/utils/axios_utils';
+
+export default {
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  name: 'Dag',
+  components: {
+    GlAlert,
+  },
+  props: {
+    graphUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      showFailureAlert: false,
+    };
+  },
+  computed: {
+    shouldDisplayGraph() {
+      return !this.showFailureAlert;
+    },
+  },
+  mounted() {
+    const { drawGraph, reportFailure } = this;
+
+    if (!this.graphUrl) {
+      reportFailure();
+      return;
+    }
+
+    axios
+      .get(this.graphUrl)
+      .then(response => {
+        drawGraph(response.data);
+      })
+      .catch(reportFailure);
+  },
+  methods: {
+    drawGraph(data) {
+      return data;
+    },
+    hideAlert() {
+      this.showFailureAlert = false;
+    },
+    reportFailure() {
+      this.showFailureAlert = true;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-alert v-if="showFailureAlert" variant="danger" @dismiss="hideAlert">
+      {{ __('We are currently unable to fetch data for this graph.') }}
+    </gl-alert>
+    <div v-if="shouldDisplayGraph" data-testid="dag-graph-container">
+      <!-- graph goes here -->
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index 01295874e56..e5ac7775476 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -4,6 +4,7 @@ import Translate from '~/vue_shared/translate';
 import { __ } from '~/locale';
 import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility';
 import pipelineGraph from './components/graph/graph_component.vue';
+import Dag from './components/dag/dag.vue';
 import GraphBundleMixin from './mixins/graph_pipeline_bundle_mixin';
 import PipelinesMediator from './pipeline_details_mediator';
 import pipelineHeader from './components/header_component.vue';
@@ -144,6 +145,25 @@ const createTestDetails = detailsEndpoint => {
     .catch(() => {});
 };
 
+const createDagApp = () => {
+  const el = document.querySelector('#js-pipeline-dag-vue');
+  const graphUrl = el.dataset?.pipelineDataPath;
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    components: {
+      Dag,
+    },
+    render(createElement) {
+      return createElement('dag', {
+        props: {
+          graphUrl,
+        },
+      });
+    },
+  });
+};
+
 export default () => {
   const { dataset } = document.querySelector('.js-pipeline-details-vue');
   const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
@@ -153,4 +173,5 @@ export default () => {
   createPipelineHeaderApp(mediator);
   createPipelinesTabs(dataset);
   createTestDetails(dataset.testReportsCountEndpoint);
+  createDagApp();
 };
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
index 51cd5810ac0..67abde0c22a 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -1,17 +1,12 @@
 <script>
 import { sprintf, s__ } from '../../../locale';
+import { joinPaths } from '~/lib/utils/url_utility';
 
 export default {
   name: 'TimeTrackingHelpState',
-  props: {
-    rootPath: {
-      type: String,
-      required: true,
-    },
-  },
   computed: {
     href() {
-      return `${this.rootPath}help/workflow/time_tracking.md`;
+      return joinPaths(gon.relative_url_root || '', '/help/user/project/time_tracking.md');
     },
     estimateText() {
       return sprintf(
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 1e8a31fff81..5cf574e1387 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -42,10 +42,6 @@ export default {
       default: false,
       required: false,
     },
-    rootPath: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -137,7 +133,7 @@ export default {
         :limit-to-hours="limitToHours"
       />
       <transition name="help-state-toggle">
-        <time-tracking-help-state v-if="showHelpState" :root-path="rootPath" />
+        <time-tracking-help-state v-if="showHelpState" />
       </transition>
     </div>
   </div>
diff --git a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
index d934463382f..0f5f8f2b53b 100644
--- a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
@@ -24,7 +24,6 @@ export default class SidebarMilestone {
             humanTimeEstimate,
             humanTimeSpent,
             limitToHours: parseBoolean(limitToHours),
-            rootPath: '/',
           },
         }),
     });
diff --git a/app/assets/javascripts/snippets/components/snippet_title.vue b/app/assets/javascripts/snippets/components/snippet_title.vue
index 5267c3748ca..cad07581d94 100644
--- a/app/assets/javascripts/snippets/components/snippet_title.vue
+++ b/app/assets/javascripts/snippets/components/snippet_title.vue
@@ -20,7 +20,7 @@ export default {
 </script>
 <template>
   <div class="snippet-header limited-header-width">
-    <h2 class="snippet-title prepend-top-0 mb-3" data-qa-selector="snippet_title">
+    <h2 class="snippet-title gl-mt-0 mb-3" data-qa-selector="snippet_title">
       {{ snippet.title }}
     </h2>
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 3b2c161224f..90a6f471374 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -396,7 +396,6 @@ img.emoji {
   🚨 Do not use these classes — they are deprecated and being removed. 🚨
   See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details.
 **/
-.prepend-top-0 { margin-top: 0; }
 .prepend-top-2 { margin-top: 2px; }
 .prepend-top-4 { margin-top: $gl-padding-4; }
 .prepend-top-5 { margin-top: 5px; }
diff --git a/app/controllers/projects/environments_controller.rb b/app/controllers/projects/environments_controller.rb
index 5f4d88c57e9..4d774123ef1 100644
--- a/app/controllers/projects/environments_controller.rb
+++ b/app/controllers/projects/environments_controller.rb
@@ -10,7 +10,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
 
     push_frontend_feature_flag(:prometheus_computed_alerts)
   end
-  before_action :authorize_read_environment!
+  before_action :authorize_read_environment!, except: [:metrics, :additional_metrics, :metrics_dashboard, :metrics_redirect]
   before_action :authorize_create_environment!, only: [:new, :create]
   before_action :authorize_stop_environment!, only: [:stop]
   before_action :authorize_update_environment!, only: [:edit, :update, :cancel_auto_stop]
diff --git a/app/graphql/resolvers/base_resolver.rb b/app/graphql/resolvers/base_resolver.rb
index cf0642930ad..7daff68c069 100644
--- a/app/graphql/resolvers/base_resolver.rb
+++ b/app/graphql/resolvers/base_resolver.rb
@@ -3,27 +3,33 @@
 module Resolvers
   class BaseResolver < GraphQL::Schema::Resolver
     extend ::Gitlab::Utils::Override
+    include ::Gitlab::Utils::StrongMemoize
 
     def self.single
       @single ||= Class.new(self) do
+        def ready?(**args)
+          ready, early_return = super
+          [ready, select_result(early_return)]
+        end
+
         def resolve(**args)
-          super.first
+          select_result(super)
         end
 
         def single?
           true
         end
+
+        def select_result(results)
+          results&.first
+        end
       end
     end
 
     def self.last
-      @last ||= Class.new(self) do
-        def resolve(**args)
-          super.last
-        end
-
-        def single?
-          true
+      @last ||= Class.new(self.single) do
+        def select_result(results)
+          results&.last
         end
       end
     end
@@ -59,6 +65,17 @@ module Resolvers
       end
     end
 
+    def synchronized_object
+      strong_memoize(:synchronized_object) do
+        case object
+        when BatchLoader::GraphQL
+          object.sync
+        else
+          object
+        end
+      end
+    end
+
     def single?
       false
     end
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index d743ea6aeea..79546212bcc 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -410,7 +410,7 @@ module ProjectsHelper
       nav_tabs << :pipelines
     end
 
-    if can?(current_user, :read_environment, project) || can?(current_user, :read_cluster, project)
+    if can_view_operations_tab?(current_user, project)
       nav_tabs << :operations
     end
 
@@ -438,22 +438,29 @@ module ProjectsHelper
 
   def tab_ability_map
     {
-      environments:     :read_environment,
-      milestones:       :read_milestone,
-      snippets:         :read_snippet,
-      settings:         :admin_project,
-      builds:           :read_build,
-      clusters:         :read_cluster,
-      serverless:       :read_cluster,
-      error_tracking:   :read_sentry_issue,
-      alert_management: :read_alert_management_alert,
-      labels:           :read_label,
-      issues:           :read_issue,
-      project_members:  :read_project_member,
-      wiki:             :read_wiki
+      environments:       :read_environment,
+      metrics_dashboards: :metrics_dashboard,
+      milestones:         :read_milestone,
+      snippets:           :read_snippet,
+      settings:           :admin_project,
+      builds:             :read_build,
+      clusters:           :read_cluster,
+      serverless:         :read_cluster,
+      error_tracking:     :read_sentry_issue,
+      alert_management:   :read_alert_management_alert,
+      labels:             :read_label,
+      issues:             :read_issue,
+      project_members:    :read_project_member,
+      wiki:               :read_wiki
     }
   end
 
+  def can_view_operations_tab?(current_user, project)
+    [:read_environment, :read_cluster, :metrics_dashboard].any? do |ability|
+      can?(current_user, ability, project)
+    end
+  end
+
   def search_tab_ability_map
     @search_tab_ability_map ||= tab_ability_map.merge(
       blobs:          :download_code,
diff --git a/app/models/project.rb b/app/models/project.rb
index ff39218460d..c9e6a8a49e8 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -1267,16 +1267,7 @@ class Project < ApplicationRecord
   def find_or_initialize_service(name)
     return if disabled_services.include?(name)
 
-    service = find_service(services, name)
-    return service if service
-
-    template = find_service(services_templates, name)
-
-    if template
-      Service.build_from_integration(id, template)
-    else
-      public_send("build_#{name}_service") # rubocop:disable GitlabSecurity/PublicSend
-    end
+    find_service(services, name) || build_from_instance_or_template(name) || public_send("build_#{name}_service") # rubocop:disable GitlabSecurity/PublicSend
   end
 
   # rubocop: disable CodeReuse/ServiceClass
@@ -2444,6 +2435,22 @@ class Project < ApplicationRecord
     services.find { |service| service.to_param == name }
   end
 
+  def build_from_instance_or_template(name)
+    instance = find_service(services_instances, name)
+    return Service.build_from_integration(id, instance) if instance
+
+    template = find_service(services_templates, name)
+    return Service.build_from_integration(id, template) if template
+  end
+
+  def services_templates
+    @services_templates ||= Service.templates
+  end
+
+  def services_instances
+    @services_instances ||= Service.instances
+  end
+
   def closest_namespace_setting(name)
     namespace.closest_setting(name)
   end
@@ -2572,10 +2579,6 @@ class Project < ApplicationRecord
     end
   end
 
-  def services_templates
-    @services_templates ||= Service.where(template: true)
-  end
-
   def ensure_pages_metadatum
     pages_metadatum || create_pages_metadatum!
   rescue ActiveRecord::RecordNotUnique
diff --git a/app/policies/project_policy.rb b/app/policies/project_policy.rb
index a24c0471d6c..44de17121de 100644
--- a/app/policies/project_policy.rb
+++ b/app/policies/project_policy.rb
@@ -278,7 +278,6 @@ class ProjectPolicy < BasePolicy
 
   rule { can?(:metrics_dashboard) }.policy do
     enable :read_prometheus
-    enable :read_environment
     enable :read_deployment
   end
 
@@ -429,27 +428,11 @@ class ProjectPolicy < BasePolicy
   rule { builds_disabled | repository_disabled }.policy do
     prevent(*create_read_update_admin_destroy(:build))
     prevent(*create_read_update_admin_destroy(:pipeline_schedule))
+    prevent(*create_read_update_admin_destroy(:environment))
     prevent(*create_read_update_admin_destroy(:cluster))
     prevent(*create_read_update_admin_destroy(:deployment))
   end
 
-  # Enabling `read_environment` specifically for the condition of `metrics_dashboard_allowed` is
-  # necessary due to the route for metrics dashboard requiring an environment id.
-  # This will be addressed in https://gitlab.com/gitlab-org/gitlab/-/issues/213833 when
-  # environments and metrics are decoupled and these rules will be removed.
-
-  rule { (builds_disabled | repository_disabled) & ~metrics_dashboard_allowed}.policy do
-    prevent(*create_read_update_admin_destroy(:environment))
-  end
-
-  rule { (builds_disabled | repository_disabled) & metrics_dashboard_allowed}.policy do
-    prevent :create_environment
-    prevent :update_environment
-    prevent :admin_environment
-    prevent :destroy_environment
-    enable :read_environment
-  end
-
   # There's two separate cases when builds_disabled is true:
   # 1. When internal CI is disabled - builds_disabled && internal_builds_disabled
   #   - We do not prevent the user from accessing Pipelines to allow them to access external CI
diff --git a/app/views/admin/appearances/_form.html.haml b/app/views/admin/appearances/_form.html.haml
index 5bb05bcba26..aa47daf4a57 100644
--- a/app/views/admin/appearances/_form.html.haml
+++ b/app/views/admin/appearances/_form.html.haml
@@ -6,7 +6,7 @@
 
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0 Navigation bar
+      %h4.gl-mt-0 Navigation bar
 
     .col-lg-8
       .form-group
@@ -25,7 +25,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0 Favicon
+      %h4.gl-mt-0 Favicon
 
     .col-lg-8
       .form-group
@@ -49,7 +49,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0 Sign in/Sign up pages
+      %h4.gl-mt-0 Sign in/Sign up pages
 
     .col-lg-8
       .form-group
@@ -77,7 +77,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0 New project pages
+      %h4.gl-mt-0 New project pages
 
     .col-lg-8
       .form-group
@@ -90,7 +90,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0 Profile image guideline
+      %h4.gl-mt-0 Profile image guideline
 
     .col-lg-8
       .form-group
diff --git a/app/views/admin/appearances/_system_header_footer_form.html.haml b/app/views/admin/appearances/_system_header_footer_form.html.haml
index 4301ebd05af..7f53b2baa32 100644
--- a/app/views/admin/appearances/_system_header_footer_form.html.haml
+++ b/app/views/admin/appearances/_system_header_footer_form.html.haml
@@ -3,7 +3,7 @@
 %hr
 .row
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _('System header and footer')
 
   .col-lg-8
diff --git a/app/views/admin/hook_logs/_index.html.haml b/app/views/admin/hook_logs/_index.html.haml
index 1d7c9930b6a..841640efad2 100644
--- a/app/views/admin/hook_logs/_index.html.haml
+++ b/app/views/admin/hook_logs/_index.html.haml
@@ -1,6 +1,6 @@
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       Recent Deliveries
     %p When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.
   .col-lg-9
diff --git a/app/views/clusters/clusters/_sidebar.html.haml b/app/views/clusters/clusters/_sidebar.html.haml
index 60ccad5b943..24a74c59b97 100644
--- a/app/views/clusters/clusters/_sidebar.html.haml
+++ b/app/views/clusters/clusters/_sidebar.html.haml
@@ -1,4 +1,4 @@
-%h4.prepend-top-0
+%h4.gl-mt-0
   = s_('ClusterIntegration|Add a Kubernetes cluster integration')
 %p
   = clusterable.sidebar_text
diff --git a/app/views/devise/confirmations/almost_there.haml b/app/views/devise/confirmations/almost_there.haml
index 79826a364db..a1fcbea5bf2 100644
--- a/app/views/devise/confirmations/almost_there.haml
+++ b/app/views/devise/confirmations/almost_there.haml
@@ -1,5 +1,5 @@
 .well-confirmation.text-center.append-bottom-20
-  %h1.prepend-top-0
+  %h1.gl-mt-0
     Almost there...
   %p.lead.append-bottom-20
     Please check your email to confirm your account
diff --git a/app/views/doorkeeper/applications/index.html.haml b/app/views/doorkeeper/applications/index.html.haml
index 5d85d9e431f..9aab1556373 100644
--- a/app/views/doorkeeper/applications/index.html.haml
+++ b/app/views/doorkeeper/applications/index.html.haml
@@ -3,7 +3,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       - if user_oauth_applications?
@@ -12,7 +12,7 @@
         = _("Manage applications that you've authorized to use your account.")
   .col-lg-8
     - if user_oauth_applications?
-      %h5.prepend-top-0
+      %h5.gl-mt-0
         = _('Add new application')
       = render 'form', application: @application
       %hr
diff --git a/app/views/import/phabricator/new.html.haml b/app/views/import/phabricator/new.html.haml
index 811e126579e..eaa36b9012e 100644
--- a/app/views/import/phabricator/new.html.haml
+++ b/app/views/import/phabricator/new.html.haml
@@ -11,7 +11,7 @@
 = form_tag import_phabricator_path, class: 'new_project', method: :post do
   = render 'import/shared/new_project_form'
 
-  %h4.prepend-top-0= _('Enter in your Phabricator Server URL and personal access token below')
+  %h4.gl-mt-0= _('Enter in your Phabricator Server URL and personal access token below')
 
   .form-group.row
     = label_tag :phabricator_server_url, _('Phabricator Server URL'), class: 'col-form-label col-md-2'
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index a67860e8e2e..c738493507f 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -216,7 +216,7 @@
                   =  _('Operations')
             %li.divider.fly-out-top-item
 
-            - if project_nav_tab? :environments
+            - if project_nav_tab? :metrics_dashboards
               = nav_link(controller: :environments, action: [:metrics, :metrics_redirect]) do
                 = link_to metrics_project_environments_path(@project), title: _('Metrics'), class: 'shortcuts-metrics', data: { qa_selector: 'operations_metrics_link' } do
                   %span
diff --git a/app/views/layouts/terms.html.haml b/app/views/layouts/terms.html.haml
index 1f7cf486b2c..f9ca77e994d 100644
--- a/app/views/layouts/terms.html.haml
+++ b/app/views/layouts/terms.html.haml
@@ -5,7 +5,7 @@
 
   %body{ data: { page: body_data_page } }
     .layout-page.terms{ class: page_class }
-      .content-wrapper.prepend-top-0
+      .content-wrapper.gl-mt-0
         .mobile-overlay
         .alert-wrapper
           = render "layouts/broadcast"
diff --git a/app/views/profiles/_event_table.html.haml b/app/views/profiles/_event_table.html.haml
index 977ff30d5a6..c65c4fd0d81 100644
--- a/app/views/profiles/_event_table.html.haml
+++ b/app/views/profiles/_event_table.html.haml
@@ -1,4 +1,4 @@
-%h5.prepend-top-0
+%h5.gl-mt-0
   = _('History of authentications')
 
 %ul.content-list
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index e6380817c8f..f4a97206a19 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -7,7 +7,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('Profiles|Two-Factor Authentication')
     %p
       = s_("Profiles|Increase your account's security by enabling Two-Factor Authentication (2FA)")
@@ -24,7 +24,7 @@
 - if display_providers_on_profile?
   .row.prepend-top-default
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = s_('Profiles|Social sign-in')
       %p
         = s_('Profiles|Activate signin with one of the following services')
@@ -34,7 +34,7 @@
 - if current_user.can_change_username?
   .row.prepend-top-default
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0.warning-title
+      %h4.gl-mt-0.warning-title
         = s_('Profiles|Change username')
       %p
         = s_('Profiles|Changing your username can have unintended side effects.')
@@ -47,7 +47,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0.danger-title
+    %h4.gl-mt-0.danger-title
       = s_('Profiles|Delete account')
   .col-lg-8
     - if current_user.can_be_removed? && can?(current_user, :destroy_user, current_user)
diff --git a/app/views/profiles/active_sessions/index.html.haml b/app/views/profiles/active_sessions/index.html.haml
index d651319fc3f..6d01d055f0c 100644
--- a/app/views/profiles/active_sessions/index.html.haml
+++ b/app/views/profiles/active_sessions/index.html.haml
@@ -3,7 +3,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('This is a list of devices that have logged into your account. Revoke any sessions that you do not recognize.')
diff --git a/app/views/profiles/audit_log.html.haml b/app/views/profiles/audit_log.html.haml
index 275c0428d34..02aadcc5c8b 100644
--- a/app/views/profiles/audit_log.html.haml
+++ b/app/views/profiles/audit_log.html.haml
@@ -3,7 +3,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('This is a security log of important events involving your account.')
diff --git a/app/views/profiles/chat_names/index.html.haml b/app/views/profiles/chat_names/index.html.haml
index 0c8098a97d5..05870e0e221 100644
--- a/app/views/profiles/chat_names/index.html.haml
+++ b/app/views/profiles/chat_names/index.html.haml
@@ -3,7 +3,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('You can see your chat accounts.')
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index e28c74dd650..e90bda0e187 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -3,12 +3,12 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('Control emails linked to your account')
   .col-lg-8
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _('Add email address')
     = form_for 'email', url: profile_emails_path do |f|
       .form-group
@@ -17,7 +17,7 @@
       .prepend-top-default
         = f.submit _('Add email address'), class: 'btn btn-success', data: { qa_selector: 'add_email_address_button' }
     %hr
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _('Linked emails (%{email_count})') % { email_count: @emails.load.size + 1 }
     .account-well.append-bottom-default
       %ul
diff --git a/app/views/profiles/gpg_keys/index.html.haml b/app/views/profiles/gpg_keys/index.html.haml
index f9f898a9225..31610e7505b 100644
--- a/app/views/profiles/gpg_keys/index.html.haml
+++ b/app/views/profiles/gpg_keys/index.html.haml
@@ -3,12 +3,12 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('GPG keys allow you to verify signed commits.')
   .col-lg-8
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       = _('Add a GPG key')
     %p.profile-settings-content
       - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/repository/gpg_signed_commits/index.md') }
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index da6aa0fce3a..788c67b3704 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -3,12 +3,12 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('SSH keys allow you to establish a secure connection between your computer and GitLab.')
   .col-lg-8
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       = _('Add an SSH key')
     %p.profile-settings-content
       - generate_link_url = help_page_path("ssh/README", anchor: 'generating-a-new-ssh-key-pair')
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index 73f6a821b51..498f80aed2b 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -11,14 +11,14 @@
   = hidden_field_tag :notification_type, 'global'
   .row.prepend-top-default
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = page_title
       %p
         = _('You can specify notification level per group or per project.')
       %p
         = _('By default, all projects and groups will use the global notifications setting.')
     .col-lg-8
-      %h5.prepend-top-0
+      %h5.gl-mt-0
         = _('Global notification settings')
 
       = form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications prepend-top-default' } do |f|
diff --git a/app/views/profiles/passwords/edit.html.haml b/app/views/profiles/passwords/edit.html.haml
index af6fa6b1b61..9deaf7f84be 100644
--- a/app/views/profiles/passwords/edit.html.haml
+++ b/app/views/profiles/passwords/edit.html.haml
@@ -4,12 +4,12 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('After a successful password update, you will be redirected to the login page where you can log in with your new password.')
   .col-lg-8
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       - if @user.password_automatically_set
         = _('Change your password')
       - else
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 81b22d964a5..769502e0026 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -6,7 +6,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = s_('AccessTokens|You can generate a personal access token for each application you use that needs access to the GitLab API.')
@@ -35,7 +35,7 @@
 %hr
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('AccessTokens|Feed token')
     %p
       = s_('AccessTokens|Your feed token is used to authenticate you when your RSS reader loads a personalized RSS feed or when your calendar application loads a personalized calendar, and is included in those feed URLs.')
@@ -53,7 +53,7 @@
   %hr
   .row.prepend-top-default
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = s_('AccessTokens|Incoming email token')
       %p
         = s_('AccessTokens|Your incoming email token is used to authenticate you when you create a new issue by email, and is included in your personal project-specific email addresses.')
@@ -71,7 +71,7 @@
   %hr
   .row.prepend-top-default
     .col-lg-4
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = s_('AccessTokens|Static object token')
       %p
         = s_('AccessTokens|Your static object token is used to authenticate you when repository static objects (e.g. archives, blobs, ...) are being served from an external storage.')
diff --git a/app/views/profiles/preferences/_sourcegraph.html.haml b/app/views/profiles/preferences/_sourcegraph.html.haml
index 20a904694ca..7328d36b0fb 100644
--- a/app/views/profiles/preferences/_sourcegraph.html.haml
+++ b/app/views/profiles/preferences/_sourcegraph.html.haml
@@ -5,7 +5,7 @@
   %hr
 
 .col-lg-4.profile-settings-sidebar
-  %h4.prepend-top-0
+  %h4.gl-mt-0
     = s_('Preferences|Integrations')
   %p
     = s_('Preferences|Customize integrations with third party services.')
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 12d42ce9892..cc44d137848 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -3,7 +3,7 @@
 
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
   .col-lg-4.application-theme
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('Preferences|Navigation theme')
     %p
       = s_('Preferences|Customize the appearance of the application header and navigation sidebar.')
@@ -18,7 +18,7 @@
     %hr
 
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('Preferences|Syntax highlighting theme')
     %p
       = s_('Preferences|This setting allows you to customize the appearance of the syntax.')
@@ -35,7 +35,7 @@
     %hr
 
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('Preferences|Behavior')
     %p
       = s_('Preferences|This setting allows you to customize the behavior of the system layout and default views.')
@@ -83,7 +83,7 @@
     %hr
 
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _('Localization')
     %p
       = _('Customize language and region related settings.')
@@ -104,7 +104,7 @@
     .col-sm-12
       %hr
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0= s_('Preferences|Time preferences')
+      %h4.gl-mt-0= s_('Preferences|Time preferences')
       %p= s_('Preferences|These settings will update how dates and times are displayed for you.')
     .col-lg-8
       .form-group
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 43fc9150e99..78fdcdef3c4 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -7,7 +7,7 @@
 
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = s_("Profiles|Public Avatar")
       %p
         - if @user.avatar?
@@ -27,7 +27,7 @@
       .clearfix.avatar-image.append-bottom-default
         = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
           = image_tag avatar_icon_for_user(@user, 160), alt: '', class: 'avatar s160'
-      %h5.prepend-top-0= s_("Profiles|Upload new avatar")
+      %h5.gl-mt-0= s_("Profiles|Upload new avatar")
       .prepend-top-5.append-bottom-10
         %button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
         %span.avatar-file-name.prepend-left-default.js-avatar-filename= s_("Profiles|No file chosen")
@@ -40,7 +40,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0= s_("Profiles|Current status")
+      %h4.gl-mt-0= s_("Profiles|Current status")
       %p= s_("Profiles|This emoji and message will appear on your profile and throughout the interface.")
     .col-lg-8
       = f.fields_for :status, @user.status do |status_form|
@@ -71,7 +71,7 @@
     %hr
     .row.user-time-preferences
       .col-lg-4.profile-settings-sidebar
-        %h4.prepend-top-0= s_("Profiles|Time settings")
+        %h4.gl-mt-0= s_("Profiles|Time settings")
         %p= s_("Profiles|You can set your current timezone here")
       .col-lg-8
         -# TODO: might need an entry in user/profile.md to describe some of these settings
@@ -83,7 +83,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = s_("Profiles|Main settings")
       %p
         = s_("Profiles|This information will appear on your profile")
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 4a2d0a4f8ce..92386daf696 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -5,7 +5,7 @@
 .js-two-factor-auth{ 'data-two-factor-skippable' => "#{two_factor_skippable?}", 'data-two_factor_skip_url' => skip_profile_two_factor_auth_path }
   .row.prepend-top-default
     .col-lg-4
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = _('Register Two-Factor Authenticator')
       %p
         = _('Use an one time password authenticator on your mobile device or computer to enable two-factor authentication (2FA).')
@@ -33,13 +33,13 @@
             = raw @qr_code
           .col-md-8
             .account-well
-              %p.prepend-top-0.append-bottom-0
+              %p.gl-mt-0.append-bottom-0
                 = _("Can't scan the code?")
-              %p.prepend-top-0.append-bottom-0
+              %p.gl-mt-0.append-bottom-0
                 = _('To add the entry manually, provide the following details to the application on your phone.')
-              %p.prepend-top-0.append-bottom-0
+              %p.gl-mt-0.append-bottom-0
                 = _('Account: %{account}') % { account: @account_string }
-              %p.prepend-top-0.append-bottom-0
+              %p.gl-mt-0.append-bottom-0
                 = _('Key: %{key}') %{ key: current_user.otp_secret.scan(/.{4}/).join(' ') }
               %p.two-factor-new-manual-content
                 = _('Time based: Yes')
@@ -57,7 +57,7 @@
 
   .row.prepend-top-default
     .col-lg-4
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = _('Register Universal Two-Factor (U2F) Device')
       %p
         = _('Use a hardware device to add the second factor of authentication.')
diff --git a/app/views/projects/cleanup/_show.html.haml b/app/views/projects/cleanup/_show.html.haml
index ed3c9890efd..042bd4ed396 100644
--- a/app/views/projects/cleanup/_show.html.haml
+++ b/app/views/projects/cleanup/_show.html.haml
@@ -14,9 +14,9 @@
   .settings-content
     - url = cleanup_namespace_project_settings_repository_path(@project.namespace, @project)
     = form_for @project, url: url, method: :post, authenticity_token: true, html: { class: 'js-requires-input' } do |f|
-      %fieldset.prepend-top-0.append-bottom-10
+      %fieldset.gl-mt-0.append-bottom-10
         .append-bottom-10
-          %h5.prepend-top-0
+          %h5.gl-mt-0
             = _("Upload object map")
           %button.btn.btn-default.js-choose-file{ type: "button" }
             = _("Choose a file")
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 9e06358beba..222fc251c61 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -6,7 +6,7 @@
 %div{ class: [("limit-container-width" unless fluid_layout)] }
   = render "home_panel"
 
-  %h4.prepend-top-0.append-bottom-8
+  %h4.gl-mt-0.append-bottom-8
     = _('The repository for this project is empty')
 
   - if @project.can_current_user_push_code?
diff --git a/app/views/projects/environments/_form.html.haml b/app/views/projects/environments/_form.html.haml
index 1fbe34cfff3..a62cd368f3a 100644
--- a/app/views/projects/environments/_form.html.haml
+++ b/app/views/projects/environments/_form.html.haml
@@ -1,6 +1,6 @@
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _("Environments")
     %p
       - link_to_read_more = link_to(_("Read more about environments"), help_page_path("ci/environments"))
diff --git a/app/views/projects/forks/new.html.haml b/app/views/projects/forks/new.html.haml
index 8a5b08a19c8..7352c3ceec5 100644
--- a/app/views/projects/forks/new.html.haml
+++ b/app/views/projects/forks/new.html.haml
@@ -2,14 +2,14 @@
 
 .row.prepend-top-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _("Fork project")
     %p
       = _("A fork is a copy of a project.<br />Forking a repository allows you to make changes without affecting the original project.").html_safe
   .col-lg-9
     - if @namespaces.present?
       .fork-thumbnail-container.js-fork-content
-        %h5.prepend-top-0.append-bottom-0.prepend-left-default.append-right-default
+        %h5.gl-mt-0.append-bottom-0.prepend-left-default.append-right-default
           = _("Select a namespace to fork the project")
         - @namespaces.each do |namespace|
           = render 'fork_button', namespace: namespace
diff --git a/app/views/projects/hook_logs/_index.html.haml b/app/views/projects/hook_logs/_index.html.haml
index f3cea6bea68..4d392141937 100644
--- a/app/views/projects/hook_logs/_index.html.haml
+++ b/app/views/projects/hook_logs/_index.html.haml
@@ -1,6 +1,6 @@
 .row.prepend-top-32.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       Recent Deliveries
     %p When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.
   .col-lg-9
diff --git a/app/views/projects/hook_logs/show.html.haml b/app/views/projects/hook_logs/show.html.haml
index 873fb4d47b7..a6a3f56c28c 100644
--- a/app/views/projects/hook_logs/show.html.haml
+++ b/app/views/projects/hook_logs/show.html.haml
@@ -4,7 +4,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %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"
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index c18af6a267b..9a9b9c42ba7 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -9,7 +9,7 @@
     = render 'projects/errors'
   .row
     .col-lg-3.profile-settings-sidebar
-      %h4.prepend-top-0
+      %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'
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
index ff1aa73cddb..f022c19d5f1 100644
--- a/app/views/projects/pipelines/_with_tabs.html.haml
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -6,14 +6,14 @@
     %li.js-pipeline-tab-link
       = link_to project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-pipeline', action: 'pipelines', toggle: 'tab' }, class: 'pipeline-tab' do
         = _('Pipeline')
-    %li.js-builds-tab-link
-      = link_to builds_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
-        = _('Jobs')
-        %span.badge.badge-pill.js-builds-counter= pipeline.total_size
     - if dag_pipeline_tab_enabled
       %li.js-dag-tab-link
         = link_to dag_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-dag', action: 'dag', toggle: 'tab' }, class: 'dag-tab' do
           = _('DAG')
+    %li.js-builds-tab-link
+      = link_to builds_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
+        = _('Jobs')
+        %span.badge.badge-pill.js-builds-counter= pipeline.total_size
     - if @pipeline.failed_builds.present?
       %li.js-failures-tab-link
         = link_to failures_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-failures', action: 'failures', toggle: 'tab' }, class: 'failures-tab' do
diff --git a/app/views/projects/protected_branches/show.html.haml b/app/views/projects/protected_branches/show.html.haml
index 1012ceefe93..ffaf118a5e3 100644
--- a/app/views/projects/protected_branches/show.html.haml
+++ b/app/views/projects/protected_branches/show.html.haml
@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0.ref-name
+    %h4.gl-mt-0.ref-name
       = @protected_ref.name
 
   .col-lg-9
diff --git a/app/views/projects/protected_tags/show.html.haml b/app/views/projects/protected_tags/show.html.haml
index 86629f1753b..6f4535a0b3f 100644
--- a/app/views/projects/protected_tags/show.html.haml
+++ b/app/views/projects/protected_tags/show.html.haml
@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0.ref-name
+    %h4.gl-mt-0.ref-name
       = @protected_ref.name
 
   .col-lg-9.edit_protected_tag
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index 3f91bdc4266..05c49a7b6ce 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -1,6 +1,6 @@
 .row.prepend-top-default.append-bottom-default
   .col-lg-4
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = @service.title
       - [true, false].each do |value|
         - hide_class = 'd-none' if @service.operating? != value
diff --git a/app/views/projects/services/prometheus/_show.html.haml b/app/views/projects/services/prometheus/_show.html.haml
index 926671845c7..728a52f024f 100644
--- a/app/views/projects/services/prometheus/_show.html.haml
+++ b/app/views/projects/services/prometheus/_show.html.haml
@@ -1,6 +1,6 @@
 .row
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('PrometheusService|Metrics')
 
 .row.append-bottom-default.prometheus-metrics-monitoring.js-prometheus-metrics-monitoring
diff --git a/app/views/projects/settings/access_tokens/index.html.haml b/app/views/projects/settings/access_tokens/index.html.haml
index 07784dce677..092f9c2333c 100644
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
@@ -6,7 +6,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('You can generate an access token scoped to this project for each application to use the GitLab API.')
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index b50f712922f..a1809cecafb 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -4,7 +4,7 @@
       = form_errors(@project)
       %fieldset.builds-feature
         .form-group
-          %h5.prepend-top-0
+          %h5.gl-mt-0
             = _("Git strategy for pipelines")
           %p
             = _("Choose between <code>clone</code> or <code>fetch</code> to get the recent application code").html_safe
diff --git a/app/views/projects/triggers/edit.html.haml b/app/views/projects/triggers/edit.html.haml
index 0f74d733c06..e287f05fe6a 100644
--- a/app/views/projects/triggers/edit.html.haml
+++ b/app/views/projects/triggers/edit.html.haml
@@ -2,6 +2,6 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-12
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       Update trigger
     = render "form", btn_text: "Save trigger"
diff --git a/app/views/shared/access_tokens/_created_container.html.haml b/app/views/shared/access_tokens/_created_container.html.haml
index f11ef1e01de..c5a18d98b89 100644
--- a/app/views/shared/access_tokens/_created_container.html.haml
+++ b/app/views/shared/access_tokens/_created_container.html.haml
@@ -1,5 +1,5 @@
 .created-personal-access-token-container
-  %h5.prepend-top-0
+  %h5.gl-mt-0
     = _('Your new %{type}') % { type: type }
   .form-group
     .input-group
diff --git a/app/views/shared/access_tokens/_form.html.haml b/app/views/shared/access_tokens/_form.html.haml
index cb7f907308f..680626f7880 100644
--- a/app/views/shared/access_tokens/_form.html.haml
+++ b/app/views/shared/access_tokens/_form.html.haml
@@ -1,7 +1,7 @@
 - title = local_assigns.fetch(:title, _('Add a %{type}') % { type: type })
 - prefix = local_assigns.fetch(:prefix, :personal_access_token)
 
-%h5.prepend-top-0
+%h5.gl-mt-0
   = title
 %p.profile-settings-content
   = _("Enter the name of your application, and we'll return a unique %{type}.") % { type: type }
diff --git a/app/views/shared/deploy_keys/_index.html.haml b/app/views/shared/deploy_keys/_index.html.haml
index f28e745f4c5..358075b9e44 100644
--- a/app/views/shared/deploy_keys/_index.html.haml
+++ b/app/views/shared/deploy_keys/_index.html.haml
@@ -7,7 +7,7 @@
     %p
       = _('Deploy keys allow read-only or read-write (if enabled) access to your repository. Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.')
   .settings-content
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       = _('Create a new deploy key for this project')
     = render @deploy_keys.form_partial_path
     %hr
diff --git a/app/views/shared/deploy_tokens/_index.html.haml b/app/views/shared/deploy_tokens/_index.html.haml
index b0c9c72dfaa..8203b378297 100644
--- a/app/views/shared/deploy_tokens/_index.html.haml
+++ b/app/views/shared/deploy_tokens/_index.html.haml
@@ -10,7 +10,7 @@
   .settings-content
     - if @new_deploy_token.persisted?
       = render 'shared/deploy_tokens/new_deploy_token', deploy_token: @new_deploy_token
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       = s_('DeployTokens|Add a deploy token')
     = render 'shared/deploy_tokens/form', group_or_project: group_or_project, token: @new_deploy_token, presenter: @deploy_tokens
     %hr
diff --git a/app/views/shared/deploy_tokens/_new_deploy_token.html.haml b/app/views/shared/deploy_tokens/_new_deploy_token.html.haml
index f295fa82192..a9728dc841f 100644
--- a/app/views/shared/deploy_tokens/_new_deploy_token.html.haml
+++ b/app/views/shared/deploy_tokens/_new_deploy_token.html.haml
@@ -1,6 +1,6 @@
 .qa-created-deploy-token-section.created-deploy-token-container.info-well
   .well-segment
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       = s_('DeployTokens|Your New Deploy Token')
 
     .form-group
diff --git a/app/views/shared/file_hooks/_index.html.haml b/app/views/shared/file_hooks/_index.html.haml
index 0e1f41bbbf6..436bd305df1 100644
--- a/app/views/shared/file_hooks/_index.html.haml
+++ b/app/views/shared/file_hooks/_index.html.haml
@@ -2,7 +2,7 @@
 
 .row.prepend-top-default
   .col-lg-4
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _('File Hooks')
     %p
       = _('File hooks are similar to system hooks but are executed as files instead of sending data to a URL.')
diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml
index acd90fa9178..7dc2c205141 100644
--- a/app/views/shared/milestones/_deprecation_message.html.haml
+++ b/app/views/shared/milestones/_deprecation_message.html.haml
@@ -1,7 +1,7 @@
 .banner-callout.compact.milestone-deprecation-message.js-milestone-deprecation-message.prepend-top-20
   .banner-graphic= image_tag 'illustrations/milestone_removing-page.svg'
   .banner-body.prepend-left-10.append-right-10
-    %h5.banner-title.prepend-top-0= _('This page will be removed in a future release.')
+    %h5.banner-title.gl-mt-0= _('This page will be removed in a future release.')
     %p.milestone-banner-text= _('Use group milestones to manage issues from multiple projects in the same milestone.')
     = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn btn-link js-popover-link text-align-left milestone-banner-link'
     .milestone-banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank'
diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml
index 0142deb47f8..9bd08c2296f 100644
--- a/app/views/shared/notifications/_custom_notifications.html.haml
+++ b/app/views/shared/notifications/_custom_notifications.html.haml
@@ -16,7 +16,7 @@
             = hidden_field_tag("hide_label", true) if hide_label
             .row
               .col-lg-4
-                %h4.prepend-top-0= _('Notification events')
+                %h4.gl-mt-0= _('Notification events')
                 %p
                   - notification_link = link_to _('notification emails'), help_page_path('user/profile/notifications'), target: '_blank'
                   - paragraph = _('Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notification_link}.') % { notification_link: notification_link.html_safe }
@@ -26,7 +26,7 @@
                   - next if notification_event_disabled?(event)
                   - field_id = "#{notifications_menu_identifier("modal", notification_setting)}_notification_setting[#{event}]"
                   .form-group
-                    .form-check{ class: ("prepend-top-0" if index == 0) }
+                    .form-check{ class: ("gl-mt-0" if index == 0) }
                       = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event form-check-input", checked: notification_setting.public_send(event))
                       %label.form-check-label{ for: field_id }
                         %strong
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index e663d57ae6a..5998f32e1ac 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -17,7 +17,7 @@
       = render "snippets/actions"
 
 .snippet-header.limited-header-width
-  %h2.snippet-title.prepend-top-0.mb-3{ data: { qa_selector: 'snippet_title' } }
+  %h2.snippet-title.gl-mt-0.mb-3{ data: { qa_selector: 'snippet_title' } }
     = markdown_field(@snippet, :title)
 
   - if @snippet.description.present?
diff --git a/app/views/shared/web_hooks/_title_and_docs.html.haml b/app/views/shared/web_hooks/_title_and_docs.html.haml
index 359f5f34f5b..d74372bcb0f 100644
--- a/app/views/shared/web_hooks/_title_and_docs.html.haml
+++ b/app/views/shared/web_hooks/_title_and_docs.html.haml
@@ -1,4 +1,4 @@
-%h4.prepend-top-0
+%h4.gl-mt-0
   = page_title
 %p
   - link = link_to(hook.pluralized_name, help_page_path(hook.help_path))