Add latest changes from gitlab-org/gitlab@master

11 files changed, 54 insertions, 45 deletions

diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index f57febbda37..b8c8cc91f53 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -479,24 +479,46 @@ export default class LabelsSelect {
     // concatenation
     // see: http://2ality.com/2016/05/template-literal-whitespace.html#joining-arrays
 
+    const linkOpenTag =
+      '<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>" class="gl-link gl-label-link has-tooltip" <%= linkAttrs %> title="<%= tooltipTitleTemplate({ label, isScopedLabel, enableScopedLabels, escapeStr }) %>">';
+    const spanOpenTag =
+      '<span class="gl-label-text" style="background-color: <%= escapeStr(label.color) %>; color: <%= escapeStr(label.text_color) %>;">';
     const labelTemplate = _.template(
       [
-        '<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>">',
-        '<span class="badge label has-tooltip color-label" <%= linkAttrs %> title="<%= tooltipTitleTemplate({ label, isScopedLabel, enableScopedLabels, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>; color: <%= escapeStr(label.text_color) %>;">',
+        '<span class="gl-label">',
+        linkOpenTag,
+        spanOpenTag,
         '<%- label.title %>',
         '</span>',
         '</a>',
+        '</span>',
       ].join(''),
     );
 
     const infoIconTemplate = _.template(
       [
-        '<a href="<%= scopedLabelsDocumentationLink %>" class="label scoped-label" target="_blank" rel="noopener">',
-        '<i class="fa fa-question-circle" style="background-color: <%= escapeStr(label.color) %>; color: <%= escapeStr(label.text_color) %>;"></i>',
+        '<a href="<%= scopedLabelsDocumentationLink %>" class="gl-link gl-label-icon" target="_blank" rel="noopener">',
+        '<i class="fa fa-question-circle"></i>',
         '</a>',
       ].join(''),
     );
 
+    const scopedLabelTemplate = _.template(
+      [
+        '<span class="gl-label gl-label-scoped" style="color: <%= escapeStr(label.color) %>;">',
+        linkOpenTag,
+        spanOpenTag,
+        '<%- label.title.slice(0, label.title.lastIndexOf("::")) %>',
+        '</span>',
+        '<span class="gl-label-text" style="color: <%= escapeStr(label.color) %>;">',
+        '<%- label.title.slice(label.title.lastIndexOf("::") + 2) %>',
+        '</span>',
+        '</a>',
+        '<%= infoIconTemplate({ label, scopedLabelsDocumentationLink, escapeStr }) %>',
+        '</span>',
+      ].join(''),
+    );
+
     const tooltipTitleTemplate = _.template(
       [
         '<% if (isScopedLabel(label) && enableScopedLabels) { %>',
@@ -514,8 +536,7 @@ export default class LabelsSelect {
         '<% _.each(labels, function(label){ %>',
         '<% if (isScopedLabel(label) && enableScopedLabels) { %>',
         '<span class="d-inline-block position-relative scoped-label-wrapper">',
-        '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
-        '<%= infoIconTemplate({ label, scopedLabelsDocumentationLink, escapeStr }) %>',
+        '<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, infoIconTemplate, scopedLabelsDocumentationLink, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
         '</span>',
         '<% } else { %>',
         '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
@@ -528,6 +549,7 @@ export default class LabelsSelect {
       ...tplData,
       labelTemplate,
       infoIconTemplate,
+      scopedLabelTemplate,
       tooltipTitleTemplate,
       isScopedLabel,
       escapeStr: _.escape,
diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
index 7c2008d9edc..d191479b1b4 100644
--- a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
+++ b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import _ from 'underscore';
+import { debounce } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
 import { __ } from '~/locale';
@@ -34,7 +34,7 @@ export default () => {
 
   $broadcastMessage.on(
     'input',
-    _.debounce(function onMessageInput() {
+    debounce(function onMessageInput() {
       const message = $(this).val();
       if (message === '') {
         $jsBroadcastMessagePreview.text(__('Your message here'));
diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
index 527c16860c0..a99fde54981 100644
--- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
+++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
@@ -1,5 +1,5 @@
 <script>
-import _ from 'underscore';
+import { escape as esc } from 'lodash';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import { s__, sprintf } from '~/locale';
 
@@ -34,7 +34,7 @@ export default {
       return sprintf(
         s__('AdminProjects|Delete Project %{projectName}?'),
         {
-          projectName: `'${_.escape(this.projectName)}'`,
+          projectName: `'${esc(this.projectName)}'`,
         },
         false,
       );
@@ -46,7 +46,7 @@ export default {
           and all related resources including issues, merge requests, etc..  Once you confirm and press
           %{strong_start}Delete project%{strong_end}, it cannot be undone or recovered.`),
         {
-          projectName: `<strong>${_.escape(this.projectName)}</strong>`,
+          projectName: `<strong>${esc(this.projectName)}</strong>`,
           strong_start: '<strong>',
           strong_end: '</strong>',
         },
@@ -57,7 +57,7 @@ export default {
       return sprintf(
         s__('AdminUsers|To confirm, type %{projectName}'),
         {
-          projectName: `<code>${_.escape(this.projectName)}</code>`,
+          projectName: `<code>${esc(this.projectName)}</code>`,
         },
         false,
       );
diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
index b43d6ba17d7..831a3ca1658 100644
--- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
+++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
@@ -1,5 +1,5 @@
 <script>
-import _ from 'underscore';
+import { escape as esc } from 'lodash';
 import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 
@@ -56,7 +56,7 @@ export default {
       return sprintf(
         this.content,
         {
-          username: `<strong>${_.escape(this.username)}</strong>`,
+          username: `<strong>${esc(this.username)}</strong>`,
           strong_start: '<strong>',
           strong_end: '</strong>',
         },
@@ -67,7 +67,7 @@ export default {
       return sprintf(
         s__('AdminUsers|To confirm, type %{username}'),
         {
-          username: `<code>${_.escape(this.username)}</code>`,
+          username: `<code>${esc(this.username)}</code>`,
         },
         false,
       );
diff --git a/app/assets/javascripts/pages/groups/new/group_path_validator.js b/app/assets/javascripts/pages/groups/new/group_path_validator.js
index f1e7ff87e5a..eeaa6527431 100644
--- a/app/assets/javascripts/pages/groups/new/group_path_validator.js
+++ b/app/assets/javascripts/pages/groups/new/group_path_validator.js
@@ -1,4 +1,4 @@
-import _ from 'underscore';
+import { debounce } from 'lodash';
 import InputValidator from '~/validators/input_validator';
 
 import fetchGroupPathAvailability from './fetch_group_path_availability';
@@ -20,7 +20,7 @@ export default class GroupPathValidator extends InputValidator {
     const container = opts.container || '';
     const validateElements = document.querySelectorAll(`${container} .js-validate-group-path`);
 
-    this.debounceValidateInput = _.debounce(inputDomElement => {
+    this.debounceValidateInput = debounce(inputDomElement => {
       GroupPathValidator.validateGroupPathInput(inputDomElement);
     }, debounceTimeoutDuration);
 
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
index bb95f33c838..dadb20e511b 100644
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
@@ -1,5 +1,5 @@
 <script>
-import _ from 'underscore';
+import { escape as esc } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
@@ -48,7 +48,7 @@ export default {
       const label = `<span
           class="label color-label"
           style="background-color: ${this.labelColor}; color: ${this.labelTextColor};"
-        >${_.escape(this.labelTitle)}</span>`;
+        >${esc(this.labelTitle)}</span>`;
 
       return sprintf(
         s__('Labels|<span>Promote label</span> %{labelTitle} <span>to Group Label?</span>'),
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index bb490919a9a..3a0d9c17228 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -1,6 +1,4 @@
 <script>
-import _ from 'underscore';
-
 export default {
   props: {
     initialCronInterval: {
@@ -24,7 +22,7 @@ export default {
   },
   computed: {
     intervalIsPreset() {
-      return _.contains(this.cronIntervalPresets, this.cronInterval);
+      return Object.values(this.cronIntervalPresets).includes(this.cronInterval);
     },
     // The text input is editable when there's a custom interval, or when it's
     // a preset interval and the user clicks the 'custom' radio button
diff --git a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
index 2176309ac84..6af346ace67 100644
--- a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
+++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
@@ -1,5 +1,5 @@
 <script>
-import _ from 'underscore';
+import { escape as esc } from 'lodash';
 import { GlModal, GlModalDirective } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 
@@ -38,7 +38,7 @@ export default {
       return sprintf(
         s__('WikiPageConfirmDelete|Delete page %{pageTitle}?'),
         {
-          pageTitle: _.escape(this.pageTitle),
+          pageTitle: esc(this.pageTitle),
         },
         false,
       );
diff --git a/app/assets/javascripts/pages/sessions/new/username_validator.js b/app/assets/javascripts/pages/sessions/new/username_validator.js
index 25be71d9ed4..1048e3b4548 100644
--- a/app/assets/javascripts/pages/sessions/new/username_validator.js
+++ b/app/assets/javascripts/pages/sessions/new/username_validator.js
@@ -1,4 +1,4 @@
-import _ from 'underscore';
+import { debounce } from 'lodash';
 import InputValidator from '~/validators/input_validator';
 
 import axios from '~/lib/utils/axios_utils';
@@ -20,7 +20,7 @@ export default class UsernameValidator extends InputValidator {
     const container = opts.container || '';
     const validateLengthElements = document.querySelectorAll(`${container} .js-validate-username`);
 
-    this.debounceValidateInput = _.debounce(inputDomElement => {
+    this.debounceValidateInput = debounce(inputDomElement => {
       UsernameValidator.validateUsernameInput(inputDomElement);
     }, debounceTimeoutDuration);
 
diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 4f645e511f9..70e9333456d 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import _ from 'underscore';
+import { last } from 'lodash';
 import { scaleLinear, scaleThreshold } from 'd3-scale';
 import { select } from 'd3-selection';
 import dateFormat from 'dateformat';
@@ -164,11 +164,11 @@ export default class ActivityCalendar {
       .enter()
       .append('g')
       .attr('transform', (group, i) => {
-        _.each(group, (stamp, a) => {
+        group.forEach((stamp, a) => {
           if (a === 0 && stamp.day === this.firstDayOfWeek) {
             const month = stamp.date.getMonth();
             const x = this.daySizeWithSpace * i + 1 + this.daySizeWithSpace;
-            const lastMonth = _.last(this.months);
+            const lastMonth = last(this.months);
             if (
               lastMonth == null ||
               (month !== lastMonth.month && x - this.daySizeWithSpace !== lastMonth.x)
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 216f6c62e69..c9286e22f82 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -1,22 +1,11 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 /* eslint-disable vue/require-default-prop */
-/* This is a re-usable vue component for rendering a button
-    that will probably be sending off ajax requests and need
-    to show the loading status by setting the `loading` option.
-    This can also be used for initial page load when you don't
-    know the action of the button yet by setting
-    `loading: true, label: undefined`.
-
-    Sample configuration:
-
-    <loading-button
-      :loading="true"
-      :label="Hello"
-      @click="..."
-    />
-
-  */
+/*
+This component will be deprecated in favor of gl-button.
+https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-button--loading-button
+https://gitlab.com/gitlab-org/gitlab/issues/207412
+*/
 
 export default {
   components: {