Add latest changes from gitlab-org/gitlab@master

50 files changed, 306 insertions, 92 deletions

diff --git a/app/assets/javascripts/behaviors/copy_to_clipboard.js b/app/assets/javascripts/behaviors/copy_to_clipboard.js
index 48bcba7bcca..a492b95d1d9 100644
--- a/app/assets/javascripts/behaviors/copy_to_clipboard.js
+++ b/app/assets/javascripts/behaviors/copy_to_clipboard.js
@@ -1,19 +1,24 @@
 import $ from 'jquery';
 import Clipboard from 'clipboard';
 import { sprintf, __ } from '~/locale';
+import { fixTitle, show } from '~/tooltips';
 
 function showTooltip(target, title) {
-  const $target = $(target);
-  const originalTitle = $target.data('originalTitle');
+  const { originalTitle } = target.dataset;
+  const hideTooltip = () => {
+    target.removeEventListener('mouseout', hideTooltip);
+    setTimeout(() => {
+      target.setAttribute('title', originalTitle);
+      fixTitle(target);
+    }, 300);
+  };
 
-  if (!$target.data('hideTooltip')) {
-    $target
-      .attr('title', title)
-      .tooltip('_fixTitle')
-      .tooltip('show')
-      .attr('title', originalTitle)
-      .tooltip('_fixTitle');
-  }
+  target.setAttribute('title', title);
+
+  fixTitle(target);
+  show(target);
+
+  target.addEventListener('mouseout', hideTooltip);
 }
 
 function genericSuccess(e) {
diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js
index b03da311c43..c06ecb3a8d9 100644
--- a/app/assets/javascripts/emoji/index.js
+++ b/app/assets/javascripts/emoji/index.js
@@ -66,12 +66,8 @@ export function isEmojiNameValid(name) {
   return validEmojiNames.indexOf(name) >= 0;
 }
 
-export function getValidEmojiUnicodeValues() {
-  return Object.values(emojiMap).map(({ e }) => e);
-}
-
-export function getValidEmojiDescriptions() {
-  return Object.values(emojiMap).map(({ d }) => d);
+export function getAllEmoji() {
+  return emojiMap;
 }
 
 /**
@@ -106,16 +102,43 @@ export function getEmoji(query, fallback = false) {
 }
 
 const searchMatchers = {
-  fuzzy: (value, query) => fuzzaldrinPlus.score(value, query) > 0, // Fuzzy matching compares using a fuzzy matching library
-  contains: (value, query) => value.indexOf(query.toLowerCase()) >= 0, // Contains matching compares by indexOf
-  exact: (value, query) => value === query.toLowerCase(), // Exact matching compares by equality
+  // Fuzzy matching compares using a fuzzy matching library
+  fuzzy: (value, query) => {
+    const score = fuzzaldrinPlus.score(value, query) > 0;
+    return { score, success: score > 0 };
+  },
+  // Contains matching compares by indexOf
+  contains: (value, query) => {
+    const index = value.indexOf(query.toLowerCase());
+    return { index, success: index >= 0 };
+  },
+  // Exact matching compares by equality
+  exact: (value, query) => {
+    return { success: value === query.toLowerCase() };
+  },
 };
 
 const searchPredicates = {
-  name: (matcher, query) => emoji => matcher(emoji.name, query), // Search by name
-  alias: (matcher, query) => emoji => emoji.aliases.some(v => matcher(v, query)), // Search by alias
-  description: (matcher, query) => emoji => matcher(emoji.d, query), // Search by description
-  unicode: (matcher, query) => emoji => emoji.e === query, // Search by unicode value (always exact)
+  // Search by name
+  name: (matcher, query) => emoji => {
+    const m = matcher(emoji.name, query);
+    return [{ ...m, emoji, field: emoji.name }];
+  },
+  // Search by alias
+  alias: (matcher, query) => emoji =>
+    emoji.aliases.map(alias => {
+      const m = matcher(alias, query);
+      return { ...m, emoji, field: alias };
+    }),
+  // Search by description
+  description: (matcher, query) => emoji => {
+    const m = matcher(emoji.d, query);
+    return [{ ...m, emoji, field: emoji.d }];
+  },
+  // Search by unicode value (always exact)
+  unicode: (matcher, query) => emoji => {
+    return [{ emoji, field: emoji.e, success: emoji.e === query }];
+  },
 };
 
 /**
@@ -138,6 +161,8 @@ const searchPredicates = {
  * matching compares using a fuzzy matching library.
  * @param {Boolean} opts.fallback If true, a fallback emoji will be returned if
  * the result set is empty. Defaults to false.
+ * @param {Boolean} opts.raw Returns the raw match data instead of just the
+ * matching emoji.
  * @returns {Object[]} A list of emoji that match the query.
  */
 export function searchEmoji(query, opts) {
@@ -150,6 +175,7 @@ export function searchEmoji(query, opts) {
     fields = ['name', 'alias', 'description', 'unicode'],
     match = 'exact',
     fallback = false,
+    raw = false,
   } = opts || {};
 
   // optimization for an exact match in name and alias
@@ -161,16 +187,22 @@ export function searchEmoji(query, opts) {
   const matcher = searchMatchers[match] || searchMatchers.exact;
   const predicates = fields.map(f => searchPredicates[f](matcher, query));
 
-  const results = Object.values(emojiMap).filter(emoji =>
-    predicates.some(predicate => predicate(emoji)),
-  );
+  const results = Object.values(emojiMap)
+    .flatMap(emoji => predicates.flatMap(predicate => predicate(emoji)))
+    .filter(r => r.success);
 
   // Fallback to question mark for unknown emojis
   if (fallback && results.length === 0) {
+    if (raw) {
+      return [{ emoji: emojiMap.grey_question }];
+    }
     return [emojiMap.grey_question];
   }
 
-  return results;
+  if (raw) {
+    return results;
+  }
+  return results.map(r => r.emoji);
 }
 
 let emojiCategoryMap;
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 5b604cc2a05..4c92aa41c41 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -181,6 +181,9 @@ class GfmAutoComplete {
   }
 
   setupEmoji($input) {
+    const self = this;
+    const { filter, ...defaults } = this.getDefaultCallbacks();
+
     // Emoji
     $input.atwho({
       at: ':',
@@ -195,13 +198,43 @@ class GfmAutoComplete {
       skipSpecialCharacterTest: true,
       data: GfmAutoComplete.defaultLoadingData,
       callbacks: {
-        ...this.getDefaultCallbacks(),
+        ...defaults,
         matcher(flag, subtext) {
           const regexp = new RegExp(`(?:[^${glRegexp.unicodeLetters}0-9:]|\n|^):([^:]*)$`, 'gi');
           const match = regexp.exec(subtext);
 
           return match && match.length ? match[1] : null;
         },
+        filter(query, items, searchKey) {
+          const filtered = filter.call(this, query, items, searchKey);
+          if (query.length === 0 || GfmAutoComplete.isLoading(items)) {
+            return filtered;
+          }
+
+          // map from value to "<value> is <field> of <emoji>", arranged by emoji
+          const emojis = {};
+          filtered.forEach(({ name: value }) => {
+            self.emojiLookup[value].forEach(({ emoji: { name }, kind }) => {
+              let entry = emojis[name];
+              if (!entry) {
+                entry = {};
+                emojis[name] = entry;
+              }
+              if (!(kind in entry) || value.localeCompare(entry[kind]) < 0) {
+                entry[kind] = value;
+              }
+            });
+          });
+
+          // collate results to list, prefering name > unicode > alias > description
+          const results = [];
+          Object.values(emojis).forEach(({ name, unicode, alias, description }) => {
+            results.push(name || unicode || alias || description);
+          });
+
+          // return to the form atwho wants
+          return results.map(name => ({ name }));
+        },
       },
     });
   }
@@ -637,12 +670,33 @@ class GfmAutoComplete {
   async loadEmojiData($input, at) {
     await Emoji.initEmojiMap();
 
+    // All the emoji
+    const emojis = Emoji.getAllEmoji();
+
+    // Add all of the fields to atwho's database
     this.loadData($input, at, [
-      ...Emoji.getValidEmojiNames(),
-      ...Emoji.getValidEmojiDescriptions(),
-      ...Emoji.getValidEmojiUnicodeValues(),
+      ...Object.keys(emojis), // Names
+      ...Object.values(emojis).flatMap(({ aliases }) => aliases), // Aliases
+      ...Object.values(emojis).map(({ e }) => e), // Unicode values
+      ...Object.values(emojis).map(({ d }) => d), // Descriptions
     ]);
 
+    // Construct a lookup that can correlate a value to "<value> is the <field> of <emoji>"
+    const lookup = {};
+    const add = (key, kind, emoji) => {
+      if (!(key in lookup)) {
+        lookup[key] = [];
+      }
+      lookup[key].push({ kind, emoji });
+    };
+    Object.values(emojis).forEach(emoji => {
+      add(emoji.name, 'name', emoji);
+      add(emoji.d, 'description', emoji);
+      add(emoji.e, 'unicode', emoji);
+      emoji.aliases.forEach(a => add(a, 'alias', emoji));
+    });
+    this.emojiLookup = lookup;
+
     GfmAutoComplete.glEmojiTag = Emoji.glEmojiTag;
   }
 
@@ -711,19 +765,36 @@ GfmAutoComplete.atTypeMap = {
 
 GfmAutoComplete.typesWithBackendFiltering = ['vulnerabilities'];
 
+function findEmoji(name) {
+  return Emoji.searchEmoji(name, { match: 'contains', raw: true }).sort((a, b) => {
+    if (a.index !== b.index) {
+      return a.index - b.index;
+    }
+    return a.field.localeCompare(b.field);
+  });
+}
+
 // Emoji
 GfmAutoComplete.glEmojiTag = null;
 GfmAutoComplete.Emoji = {
   insertTemplateFunction(value) {
-    const { name = value.name } = Emoji.searchEmoji(value.name, { match: 'contains' })[0] || {};
-    return `:${name}:`;
+    const results = findEmoji(value.name);
+    if (results.length) {
+      return `:${results[0].emoji.name}:`;
+    }
+    return `:${value.name}:`;
   },
   templateFunction(name) {
     // glEmojiTag helper is loaded on-demand in fetchData()
     if (!GfmAutoComplete.glEmojiTag) return `<li>${name}</li>`;
 
-    const emoji = Emoji.searchEmoji(name, { match: 'contains' })[0];
-    return `<li>${name} ${GfmAutoComplete.glEmojiTag(emoji?.name || name)}</li>`;
+    const results = findEmoji(name);
+    if (!results.length) {
+      return `<li>${name} ${GfmAutoComplete.glEmojiTag(name)}</li>`;
+    }
+
+    const { field, emoji } = results[0];
+    return `<li>${field} ${GfmAutoComplete.glEmojiTag(emoji.name)}</li>`;
   },
 };
 // Team Members
diff --git a/app/assets/javascripts/issuable_show/components/issuable_body.vue b/app/assets/javascripts/issuable_show/components/issuable_body.vue
new file mode 100644
index 00000000000..e6a05c1ab8b
--- /dev/null
+++ b/app/assets/javascripts/issuable_show/components/issuable_body.vue
@@ -0,0 +1,103 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+import IssuableTitle from './issuable_title.vue';
+import IssuableDescription from './issuable_description.vue';
+import IssuableEditForm from './issuable_edit_form.vue';
+
+export default {
+  components: {
+    GlLink,
+    TimeAgoTooltip,
+    IssuableTitle,
+    IssuableDescription,
+    IssuableEditForm,
+  },
+  props: {
+    issuable: {
+      type: Object,
+      required: true,
+    },
+    statusBadgeClass: {
+      type: String,
+      required: true,
+    },
+    statusIcon: {
+      type: String,
+      required: true,
+    },
+    enableEdit: {
+      type: Boolean,
+      required: true,
+    },
+    enableAutocomplete: {
+      type: Boolean,
+      required: true,
+    },
+    editFormVisible: {
+      type: Boolean,
+      required: true,
+    },
+    descriptionPreviewPath: {
+      type: String,
+      required: true,
+    },
+    descriptionHelpPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isUpdated() {
+      return Boolean(this.issuable.updatedAt);
+    },
+    updatedBy() {
+      return this.issuable.updatedBy;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="issue-details issuable-details">
+    <div class="detail-page-description content-block">
+      <issuable-edit-form
+        v-if="editFormVisible"
+        :issuable="issuable"
+        :enable-autocomplete="enableAutocomplete"
+        :description-preview-path="descriptionPreviewPath"
+        :description-help-path="descriptionHelpPath"
+      >
+        <template #edit-form-actions="issuableMeta">
+          <slot name="edit-form-actions" v-bind="issuableMeta"></slot>
+        </template>
+      </issuable-edit-form>
+      <template v-else>
+        <issuable-title
+          :issuable="issuable"
+          :status-badge-class="statusBadgeClass"
+          :status-icon="statusIcon"
+          :enable-edit="enableEdit"
+          @edit-issuable="$emit('edit-issuable', $event)"
+        >
+          <template #status-badge>
+            <slot name="status-badge"></slot>
+          </template>
+        </issuable-title>
+        <issuable-description v-if="issuable.descriptionHtml" :issuable="issuable" />
+        <small v-if="isUpdated" class="edited-text gl-font-sm!">
+          {{ __('Edited') }}
+          <time-ago-tooltip :time="issuable.updatedAt" tooltip-placement="bottom" />
+          <span v-if="updatedBy">
+            {{ __('by') }}
+            <gl-link :href="updatedBy.webUrl" class="author-link gl-font-sm!">
+              <span>{{ updatedBy.name }}</span>
+            </gl-link>
+          </span>
+        </small>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/tooltips/index.js b/app/assets/javascripts/tooltips/index.js
index debb36dc53f..9f5dce4183c 100644
--- a/app/assets/javascripts/tooltips/index.js
+++ b/app/assets/javascripts/tooltips/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import jQuery from 'jquery';
-import { toArray, isFunction } from 'lodash';
+import { toArray, isFunction, isElement } from 'lodash';
 import Tooltips from './components/tooltips.vue';
 
 let app;
@@ -54,7 +54,11 @@ const handleTooltipEvent = (rootTarget, e, selector, config = {}) => {
   }
 };
 
-const applyToElements = (elements, handler) => toArray(elements).forEach(handler);
+const applyToElements = (elements, handler) => {
+  const iterable = isElement(elements) ? [elements] : toArray(elements);
+
+  toArray(iterable).forEach(handler);
+};
 
 const invokeBootstrapApi = (elements, method) => {
   if (isFunction(elements.tooltip)) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index 543d70cbdbe..17cd740ddd9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -1,8 +1,7 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { deprecatedCreateFlash as Flash } from '~/flash';
-import tooltip from '~/vue_shared/directives/tooltip';
 import { s__, __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
@@ -12,7 +11,7 @@ import eventHub from '../../event_hub';
 export default {
   name: 'MRWidgetMerged',
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     MrWidgetAuthorTime,
@@ -115,7 +114,7 @@ export default {
         />
         <gl-button
           v-if="mr.canRevertInCurrentMR"
-          v-tooltip
+          v-gl-tooltip.hover
           :title="revertTitle"
           size="small"
           category="secondary"
@@ -128,7 +127,7 @@ export default {
         </gl-button>
         <gl-button
           v-else-if="mr.revertInForkPath"
-          v-tooltip
+          v-gl-tooltip.hover
           :href="mr.revertInForkPath"
           :title="revertTitle"
           size="small"
@@ -140,7 +139,7 @@ export default {
         </gl-button>
         <gl-button
           v-if="mr.canCherryPickInCurrentMR"
-          v-tooltip
+          v-gl-tooltip.hover
           :title="cherryPickTitle"
           size="small"
           href="#modal-cherry-pick-commit"
@@ -151,7 +150,7 @@ export default {
         </gl-button>
         <gl-button
           v-else-if="mr.cherryPickInForkPath"
-          v-tooltip
+          v-gl-tooltip.hover
           :href="mr.cherryPickInForkPath"
           :title="cherryPickTitle"
           size="small"
diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
index a0c161a335a..f2e9c4a4fbb 100644
--- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
+++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
@@ -1,11 +1,11 @@
 <script>
+import { GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { roundOffFloat } from '~/lib/utils/common_utils';
-import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     cssClass: {
@@ -112,7 +112,7 @@ export default {
     <span v-if="!totalCount" class="status-unavailable">{{ unavailableLabel }}</span>
     <span
       v-if="successPercent"
-      v-tooltip
+      v-gl-tooltip
       :title="successTooltip"
       :style="successBarStyle"
       class="status-green"
@@ -122,7 +122,7 @@ export default {
     </span>
     <span
       v-if="neutralPercent"
-      v-tooltip
+      v-gl-tooltip
       :title="neutralTooltip"
       :style="neutralBarStyle"
       class="status-neutral"
@@ -132,7 +132,7 @@ export default {
     </span>
     <span
       v-if="failurePercent"
-      v-tooltip
+      v-gl-tooltip
       :title="failureTooltip"
       :style="failureBarStyle"
       class="status-red"
diff --git a/app/models/blob_viewer/balsamiq.rb b/app/models/blob_viewer/balsamiq.rb
index 1af6c5474d7..6ab73730222 100644
--- a/app/models/blob_viewer/balsamiq.rb
+++ b/app/models/blob_viewer/balsamiq.rb
@@ -8,7 +8,7 @@ module BlobViewer
     self.partial_name = 'balsamiq'
     self.extensions = %w(bmpr)
     self.binary = true
-    self.switcher_icon = 'file-image-o'
+    self.switcher_icon = 'doc-image'
     self.switcher_title = 'preview'
   end
 end
diff --git a/app/models/blob_viewer/pdf.rb b/app/models/blob_viewer/pdf.rb
index 2cf7752585c..e3542b91d5c 100644
--- a/app/models/blob_viewer/pdf.rb
+++ b/app/models/blob_viewer/pdf.rb
@@ -8,7 +8,7 @@ module BlobViewer
     self.partial_name = 'pdf'
     self.extensions = %w(pdf)
     self.binary = true
-    self.switcher_icon = 'file-pdf-o'
+    self.switcher_icon = 'document'
     self.switcher_title = 'PDF'
   end
 end
diff --git a/app/models/blob_viewer/sketch.rb b/app/models/blob_viewer/sketch.rb
index 659ab11f30b..90bc9be29f4 100644
--- a/app/models/blob_viewer/sketch.rb
+++ b/app/models/blob_viewer/sketch.rb
@@ -8,7 +8,7 @@ module BlobViewer
     self.partial_name = 'sketch'
     self.extensions = %w(sketch)
     self.binary = true
-    self.switcher_icon = 'file-image-o'
+    self.switcher_icon = 'doc-image'
     self.switcher_title = 'preview'
   end
 end
diff --git a/app/models/diff_viewer/rich.rb b/app/models/diff_viewer/rich.rb
index 5caefa2031c..0d94d8f773b 100644
--- a/app/models/diff_viewer/rich.rb
+++ b/app/models/diff_viewer/rich.rb
@@ -6,7 +6,7 @@ module DiffViewer
 
     included do
       self.type = :rich
-      self.switcher_icon = 'file-text-o'
+      self.switcher_icon = 'doc-text'
       self.switcher_title = _('rendered diff')
     end
   end
diff --git a/app/views/admin/application_settings/_abuse.html.haml b/app/views/admin/application_settings/_abuse.html.haml
index 6ffeea81f28..c77615f9040 100644
--- a/app/views/admin/application_settings/_abuse.html.haml
+++ b/app/views/admin/application_settings/_abuse.html.haml
@@ -8,4 +8,4 @@
       .form-text.text-muted
         Abuse reports will be sent to this address if it is set. Abuse reports are always available in the admin area.
 
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml
index 1701eb5b6e4..f46eb84ce8e 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -60,4 +60,4 @@
 
     = render_if_exists 'admin/application_settings/updating_name_disabled_for_users', form: f
     = render_if_exists 'admin/application_settings/availability_on_namespace_setting', form: f
-  = f.submit _('Save changes'), class: 'btn btn-success qa-save-changes-button'
+  = f.submit _('Save changes'), class: 'gl-button btn btn-success qa-save-changes-button'
diff --git a/app/views/admin/application_settings/_ci_cd.html.haml b/app/views/admin/application_settings/_ci_cd.html.haml
index b9cce6c8085..9f384519c3a 100644
--- a/app/views/admin/application_settings/_ci_cd.html.haml
+++ b/app/views/admin/application_settings/_ci_cd.html.haml
@@ -60,4 +60,4 @@
         = _("The default CI configuration path for new projects.").html_safe
         = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'custom-ci-configuration-path'), target: '_blank'
 
-  = f.submit _('Save changes'), class: "btn btn-success"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_diff_limits.html.haml b/app/views/admin/application_settings/_diff_limits.html.haml
index 734640c16a1..6811c1e10d6 100644
--- a/app/views/admin/application_settings/_diff_limits.html.haml
+++ b/app/views/admin/application_settings/_diff_limits.html.haml
@@ -12,4 +12,4 @@
         = link_to sprite_icon('question-o'),
           help_page_path('user/admin_area/diff_limits',
           anchor: 'maximum-diff-patch-size')
-  = f.submit _('Save changes'), class: 'btn btn-success'
+  = f.submit _('Save changes'), class: 'gl-button btn btn-success'
diff --git a/app/views/admin/application_settings/_eks.html.haml b/app/views/admin/application_settings/_eks.html.haml
index d74afcd3e64..68324425ef9 100644
--- a/app/views/admin/application_settings/_eks.html.haml
+++ b/app/views/admin/application_settings/_eks.html.haml
@@ -28,4 +28,4 @@
           = f.label :eks_secret_access_key, 'Secret access key', class: 'label-bold'
           = f.password_field :eks_secret_access_key, autocomplete: 'off', class: 'form-control'
 
-      = f.submit 'Save changes', class: "btn btn-success"
+      = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_email.html.haml b/app/views/admin/application_settings/_email.html.haml
index 49747f2bfd4..dd1be876505 100644
--- a/app/views/admin/application_settings/_email.html.haml
+++ b/app/views/admin/application_settings/_email.html.haml
@@ -25,4 +25,4 @@
 
     = render_if_exists 'admin/application_settings/email_additional_text_setting', form: f
 
-  = f.submit _('Save changes'), class: "btn btn-success", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), class: "gl-button btn btn-success", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_external_authorization_service_form.html.haml b/app/views/admin/application_settings/_external_authorization_service_form.html.haml
index 08620bdde35..c8c1f3e6214 100644
--- a/app/views/admin/application_settings/_external_authorization_service_form.html.haml
+++ b/app/views/admin/application_settings/_external_authorization_service_form.html.haml
@@ -47,4 +47,4 @@
         .form-group
           = f.label :external_authorization_service_default_label, _('Default classification label'), class: 'label-bold'
           = f.text_field :external_authorization_service_default_label, class: 'form-control'
-      = f.submit 'Save changes', class: "btn btn-success"
+      = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_gitaly.html.haml b/app/views/admin/application_settings/_gitaly.html.haml
index fac2de8811f..a0cd70b4d7c 100644
--- a/app/views/admin/application_settings/_gitaly.html.haml
+++ b/app/views/admin/application_settings/_gitaly.html.haml
@@ -24,4 +24,4 @@
       .form-text.text-muted
         Medium operation timeout (in seconds). This should be a value between the Fast and the Default timeout.
 
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_gitpod.html.haml b/app/views/admin/application_settings/_gitpod.html.haml
index cf40eb7b108..f0a1fd5e763 100644
--- a/app/views/admin/application_settings/_gitpod.html.haml
+++ b/app/views/admin/application_settings/_gitpod.html.haml
@@ -26,4 +26,4 @@
           = f.text_field :gitpod_url, class: 'form-control', placeholder: s_('Gitpod|e.g. https://gitpod.example.com')
           .form-text.text-muted
             = s_('Gitpod|Add the URL to your Gitpod instance configured to read your GitLab projects.')
-      = f.submit s_('Save changes'), class: 'btn btn-success'
+      = f.submit s_('Save changes'), class: 'gl-button btn btn-success'
diff --git a/app/views/admin/application_settings/_grafana.html.haml b/app/views/admin/application_settings/_grafana.html.haml
index 80ff5a298b4..bd2b2094311 100644
--- a/app/views/admin/application_settings/_grafana.html.haml
+++ b/app/views/admin/application_settings/_grafana.html.haml
@@ -14,4 +14,4 @@
       = f.label :grafana_url, _('Grafana URL'), class: 'label-bold'
       = f.text_field :grafana_url, class: 'form-control', placeholder: '/-/grafana'
 
-  = f.submit _('Save changes'), class: "btn btn-success"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_help_page.html.haml b/app/views/admin/application_settings/_help_page.html.haml
index 776bc9d821a..fc31f612b8c 100644
--- a/app/views/admin/application_settings/_help_page.html.haml
+++ b/app/views/admin/application_settings/_help_page.html.haml
@@ -23,4 +23,4 @@
         = f.label :help_page_documentation_base_url, _('Documentation pages URL'), class: 'label-bold'
         = f.text_field :help_page_documentation_base_url, class: 'form-control', placeholder: 'https://docs.gitlab.com'
 
-  = f.submit _('Save changes'), class: "btn btn-success"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_import_export_limits.html.haml b/app/views/admin/application_settings/_import_export_limits.html.haml
index d26c3376391..58218a41282 100644
--- a/app/views/admin/application_settings/_import_export_limits.html.haml
+++ b/app/views/admin/application_settings/_import_export_limits.html.haml
@@ -31,4 +31,4 @@
       = f.label :group_download_export_limit, _('Max Group Export Download requests per minute per user'), class: 'label-bold'
       = f.number_field :group_download_export_limit, class: 'form-control'
 
-  = f.submit 'Save changes', class: "btn btn-success", data: { qa_selector: 'save_changes_button' }
+  = f.submit 'Save changes', class: "gl-button btn btn-success", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_ip_limits.html.haml b/app/views/admin/application_settings/_ip_limits.html.haml
index 9512c1837bf..c1565cf42e1 100644
--- a/app/views/admin/application_settings/_ip_limits.html.haml
+++ b/app/views/admin/application_settings/_ip_limits.html.haml
@@ -42,4 +42,4 @@
       = f.label :throttle_authenticated_web_period_in_seconds, 'Rate limit period in seconds', class: 'label-bold'
       = f.number_field :throttle_authenticated_web_period_in_seconds, class: 'form-control'
 
-  = f.submit 'Save changes', class: "btn btn-success", data: { qa_selector: 'save_changes_button' }
+  = f.submit 'Save changes', class: "gl-button btn btn-success", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_issue_limits.html.haml b/app/views/admin/application_settings/_issue_limits.html.haml
index b0bdc204f64..200ea3a8ec1 100644
--- a/app/views/admin/application_settings/_issue_limits.html.haml
+++ b/app/views/admin/application_settings/_issue_limits.html.haml
@@ -6,4 +6,4 @@
       = f.label :issues_create_limit, 'Max requests per minute per user', class: 'label-bold'
       = f.number_field :issues_create_limit, class: 'form-control'
 
-  = f.submit 'Save changes', class: "btn btn-success", data: { qa_selector: 'save_changes_button' }
+  = f.submit 'Save changes', class: "gl-button btn btn-success", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_localization.html.haml b/app/views/admin/application_settings/_localization.html.haml
index e01c123d1db..5ad7080b22b 100644
--- a/app/views/admin/application_settings/_localization.html.haml
+++ b/app/views/admin/application_settings/_localization.html.haml
@@ -15,4 +15,4 @@
         = f.label :time_tracking_limit_to_hours, class: 'form-check-label' do
           = _('Limit display of time tracking units to hours.')
 
-  = f.submit _('Save changes'), class: "btn btn-success"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_outbound.html.haml b/app/views/admin/application_settings/_outbound.html.haml
index b0593b3bfa2..4f38ab3ab7a 100644
--- a/app/views/admin/application_settings/_outbound.html.haml
+++ b/app/views/admin/application_settings/_outbound.html.haml
@@ -27,4 +27,4 @@
         %span.form-text.text-muted
           = _('Resolves IP addresses once and uses them to submit requests')
 
-  = f.submit 'Save changes', class: "btn btn-success", data: { qa_selector: 'save_changes_button' }
+  = f.submit 'Save changes', class: "gl-button btn btn-success", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_pages.html.haml b/app/views/admin/application_settings/_pages.html.haml
index 2ee7f3edc97..d42987eb7d8 100644
--- a/app/views/admin/application_settings/_pages.html.haml
+++ b/app/views/admin/application_settings/_pages.html.haml
@@ -41,4 +41,4 @@
           - terms_of_service_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: lets_encrypt_terms_of_service_admin_application_settings_path }
           = _("I have read and agree to the Let's Encrypt %{link_start}Terms of Service%{link_end} (PDF)").html_safe % { link_start: terms_of_service_link_start, link_end: '</a>'.html_safe }
 
-  = f.submit _('Save changes'), class: "btn btn-success"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_performance.html.haml b/app/views/admin/application_settings/_performance.html.haml
index 3473c185dbe..2d27bceef10 100644
--- a/app/views/admin/application_settings/_performance.html.haml
+++ b/app/views/admin/application_settings/_performance.html.haml
@@ -31,4 +31,4 @@
       .form-text.text-muted
         = _('Number of changes (branches or tags) in a single push to determine whether individual push events or bulk push event will be created. Bulk push event will be created if it surpasses that value.')
 
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_performance_bar.html.haml b/app/views/admin/application_settings/_performance_bar.html.haml
index f8bc29048f2..1036cc94bd0 100644
--- a/app/views/admin/application_settings/_performance_bar.html.haml
+++ b/app/views/admin/application_settings/_performance_bar.html.haml
@@ -11,4 +11,4 @@
       = f.label :performance_bar_allowed_group_path, 'Allowed group', class: 'label-bold'
       = f.text_field :performance_bar_allowed_group_path, class: 'form-control', placeholder: 'my-org/my-group', value: @application_setting.performance_bar_allowed_group&.full_path
 
-  = f.submit 'Save changes', class: 'btn btn-success qa-save-changes-button'
+  = f.submit 'Save changes', class: 'gl-button btn btn-success qa-save-changes-button'
diff --git a/app/views/admin/application_settings/_plantuml.html.haml b/app/views/admin/application_settings/_plantuml.html.haml
index f2011257b8c..324f544a108 100644
--- a/app/views/admin/application_settings/_plantuml.html.haml
+++ b/app/views/admin/application_settings/_plantuml.html.haml
@@ -24,4 +24,4 @@
             = link_to "PlantUML", "http://plantuml.com"
             diagrams in Asciidoc documents using an external PlantUML service.
 
-      = f.submit _('Save changes'), class: "btn btn-success"
+      = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_prometheus.html.haml b/app/views/admin/application_settings/_prometheus.html.haml
index 49f58449d29..c571ec1c1b0 100644
--- a/app/views/admin/application_settings/_prometheus.html.haml
+++ b/app/views/admin/application_settings/_prometheus.html.haml
@@ -30,4 +30,4 @@
         A method call is only tracked when it takes longer to complete than
         the given amount of milliseconds.
 
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_protected_paths.html.haml b/app/views/admin/application_settings/_protected_paths.html.haml
index 0220570daa9..fce64369f17 100644
--- a/app/views/admin/application_settings/_protected_paths.html.haml
+++ b/app/views/admin/application_settings/_protected_paths.html.haml
@@ -28,4 +28,4 @@
         = _('All paths are relative to the GitLab URL. Do not include %{relative_url_link_start}relative URL%{relative_url_link_end}.').html_safe % { relative_url_link_start: relative_url_link_start, relative_url_link_end: '</a>'.html_safe }
       = f.text_area :protected_paths_raw, placeholder: '/users/sign_in,/users/password', class: 'form-control', rows: 10
 
-  = f.submit 'Save changes', class: 'btn btn-success'
+  = f.submit 'Save changes', class: 'gl-button btn btn-success'
diff --git a/app/views/admin/application_settings/_realtime.html.haml b/app/views/admin/application_settings/_realtime.html.haml
index 0e9731b1c70..cf0b2b53eff 100644
--- a/app/views/admin/application_settings/_realtime.html.haml
+++ b/app/views/admin/application_settings/_realtime.html.haml
@@ -14,4 +14,4 @@
         installations. Set to 0 to completely disable polling.
         = link_to sprite_icon('question-o'), help_page_path('administration/polling')
 
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_registry.html.haml b/app/views/admin/application_settings/_registry.html.haml
index 7ff2b6e841d..dd64d0ae419 100644
--- a/app/views/admin/application_settings/_registry.html.haml
+++ b/app/views/admin/application_settings/_registry.html.haml
@@ -21,4 +21,4 @@
         .form-text.text-muted
           = _("Tags are deleted until the timeout is reached. Any remaining tags are included the next time the policy runs. To remove the time limit, set it to 0.")
 
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_repository_check.html.haml b/app/views/admin/application_settings/_repository_check.html.haml
index 985dee6f594..b9c2e406b78 100644
--- a/app/views/admin/application_settings/_repository_check.html.haml
+++ b/app/views/admin/application_settings/_repository_check.html.haml
@@ -55,4 +55,4 @@
         .form-text.text-muted
           Number of Git pushes after which 'git gc' is run.
 
-  = f.submit _('Save changes'), class: "btn btn-success"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_repository_mirrors_form.html.haml b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
index 86f8ea8821e..125fa48bbc3 100644
--- a/app/views/admin/application_settings/_repository_mirrors_form.html.haml
+++ b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
@@ -14,4 +14,4 @@
 
     = render_if_exists 'admin/application_settings/mirror_settings', form: f
 
-  = f.submit _('Save changes'), class: "btn btn-success"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_repository_static_objects.html.haml b/app/views/admin/application_settings/_repository_static_objects.html.haml
index 03aa48b2282..00b9b4b8964 100644
--- a/app/views/admin/application_settings/_repository_static_objects.html.haml
+++ b/app/views/admin/application_settings/_repository_static_objects.html.haml
@@ -15,4 +15,4 @@
       %span.form-text.text-muted#static_objects_external_storage_auth_token_help_block
         = _('A secure token that identifies an external storage request.')
 
-  = f.submit _('Save changes'), class: "btn btn-success"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_repository_storage.html.haml b/app/views/admin/application_settings/_repository_storage.html.haml
index 71c957b0bea..0862d1bf0b6 100644
--- a/app/views/admin/application_settings/_repository_storage.html.haml
+++ b/app/views/admin/application_settings/_repository_storage.html.haml
@@ -22,4 +22,4 @@
             = f.text_field attribute[:name], class: 'form-text-input', value: attribute[:value]
             = f.label attribute[:label], attribute[:label], class: 'label-bold form-check-label'
             %br
-  = f.submit _('Save changes'), class: "btn btn-success qa-save-changes-button"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success qa-save-changes-button"
diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml
index f2ff3891ace..4a8616beff6 100644
--- a/app/views/admin/application_settings/_signin.html.haml
+++ b/app/views/admin/application_settings/_signin.html.haml
@@ -57,4 +57,4 @@
       = f.label :sign_in_text, class: 'label-bold'
       = f.text_area :sign_in_text, class: 'form-control', rows: 4
       .form-text.text-muted Markdown enabled
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_signup.html.haml b/app/views/admin/application_settings/_signup.html.haml
index adc585125a6..d614912b2e4 100644
--- a/app/views/admin/application_settings/_signup.html.haml
+++ b/app/views/admin/application_settings/_signup.html.haml
@@ -75,4 +75,4 @@
       = f.label :after_sign_up_text, class: 'label-bold'
       = f.text_area :after_sign_up_text, class: 'form-control', rows: 4
       .form-text.text-muted Markdown enabled
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_snowplow.html.haml b/app/views/admin/application_settings/_snowplow.html.haml
index c339d6df363..7c2c5e0b3dc 100644
--- a/app/views/admin/application_settings/_snowplow.html.haml
+++ b/app/views/admin/application_settings/_snowplow.html.haml
@@ -26,4 +26,4 @@
           = f.label :snowplow_cookie_domain, _('Cookie domain'), class: 'label-light'
           = f.text_field :snowplow_cookie_domain, class: 'form-control'
 
-      = f.submit _('Save changes'), class: 'btn btn-success'
+      = f.submit _('Save changes'), class: 'gl-button btn btn-success'
diff --git a/app/views/admin/application_settings/_sourcegraph.html.haml b/app/views/admin/application_settings/_sourcegraph.html.haml
index 7650526dfc0..2a4e8f87c31 100644
--- a/app/views/admin/application_settings/_sourcegraph.html.haml
+++ b/app/views/admin/application_settings/_sourcegraph.html.haml
@@ -35,4 +35,4 @@
           = f.text_field :sourcegraph_url, class: 'form-control', placeholder: s_('SourcegraphAdmin|e.g. https://sourcegraph.example.com')
           .form-text.text-muted
             = s_('SourcegraphAdmin|Configure the URL to a Sourcegraph instance which can read your GitLab projects.')
-      = f.submit s_('SourcegraphAdmin|Save changes'), class: 'btn btn-success'
+      = f.submit s_('SourcegraphAdmin|Save changes'), class: 'gl-button btn btn-success'
diff --git a/app/views/admin/application_settings/_spam.html.haml b/app/views/admin/application_settings/_spam.html.haml
index ab9368e723e..b54f1d7c829 100644
--- a/app/views/admin/application_settings/_spam.html.haml
+++ b/app/views/admin/application_settings/_spam.html.haml
@@ -71,4 +71,4 @@
       = f.label :spam_check_endpoint_url, _('URL of the external Spam Check endpoint'), class: 'label-bold'
       = f.text_field :spam_check_endpoint_url, class: 'form-control'
 
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_terminal.html.haml b/app/views/admin/application_settings/_terminal.html.haml
index 60d5ca1ee0f..7bc5b2405e8 100644
--- a/app/views/admin/application_settings/_terminal.html.haml
+++ b/app/views/admin/application_settings/_terminal.html.haml
@@ -8,4 +8,4 @@
       .form-text.text-muted
         Maximum time for web terminal websocket connection (in seconds).
         0 for unlimited.
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_terms.html.haml b/app/views/admin/application_settings/_terms.html.haml
index 07d372882b9..10db1e23d7b 100644
--- a/app/views/admin/application_settings/_terms.html.haml
+++ b/app/views/admin/application_settings/_terms.html.haml
@@ -15,4 +15,4 @@
       = f.text_area :terms, class: 'form-control', rows: 8
       .form-text.text-muted
         = _("Markdown enabled")
-  = f.submit _("Save changes"), class: "btn btn-success"
+  = f.submit _("Save changes"), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_third_party_offers.html.haml b/app/views/admin/application_settings/_third_party_offers.html.haml
index 0ed7341986d..7e3e063118e 100644
--- a/app/views/admin/application_settings/_third_party_offers.html.haml
+++ b/app/views/admin/application_settings/_third_party_offers.html.haml
@@ -17,4 +17,4 @@
             = f.check_box :hide_third_party_offers, class: 'form-check-input'
             = f.label :hide_third_party_offers, _('Do not display offers from third parties within GitLab'), class: 'form-check-label'
 
-      = f.submit _('Save changes'), class: "btn btn-success"
+      = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index 88c88b96a91..2ba7dcefd44 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -37,4 +37,4 @@
             - deactivating_usage_ping_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: deactivating_usage_ping_path }
             = s_('For more information, see the documentation on %{deactivating_usage_ping_link_start}deactivating the usage ping%{deactivating_usage_ping_link_end}.').html_safe % { deactivating_usage_ping_link_start: deactivating_usage_ping_link_start, deactivating_usage_ping_link_end: '</a>'.html_safe }
 
-  = f.submit 'Save changes', class: "btn btn-success"
+  = f.submit 'Save changes', class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/_visibility_and_access.html.haml b/app/views/admin/application_settings/_visibility_and_access.html.haml
index d44a1524f2e..46d8a8ac9c7 100644
--- a/app/views/admin/application_settings/_visibility_and_access.html.haml
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -66,4 +66,4 @@
       .form-group
         = f.label field_name, "#{type.upcase} SSH keys", class: 'label-bold'
         = f.select field_name, key_restriction_options_for_select(type), {}, class: 'form-control'
-  = f.submit _('Save changes'), class: "btn btn-success"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index 493c995dd91..2d336bebc8d 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -101,7 +101,7 @@
               = s_('IDE|Live Preview')
             %span.form-text.text-muted
               = s_('IDE|Allow live previews of JavaScript projects in the Web IDE using CodeSandbox Live Preview.')
-      = f.submit _('Save changes'), class: "btn btn-success"
+      = f.submit _('Save changes'), class: "gl-button btn btn-success"
 
 - if Feature.enabled?(:maintenance_mode)
   %section.settings.no-animate#js-maintenance-mode-toggle{ class: ('expanded' if expanded_by_default?) }