1 files changed, 21 insertions, 16 deletions

diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 63c4ad3c410..1fb8e270e0e 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -3,12 +3,12 @@
 /* global ListLabel */
 
 import $ from 'jquery';
-import { difference, isEqual, escape, sortBy, template } from 'lodash';
+import { difference, isEqual, escape, sortBy, template, union } from 'lodash';
 import { sprintf, s__, __ } from './locale';
 import axios from './lib/utils/axios_utils';
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
 import CreateLabelDropdown from './create_label';
-import flash from './flash';
+import { deprecatedCreateFlash as flash } from './flash';
 import ModalStore from './boards/stores/modal_store';
 import boardsStore from './boards/stores/boards_store';
 import { isScopedLabel } from '~/lib/utils/common_utils';
@@ -477,13 +477,11 @@ export default class LabelsSelect {
 
     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(
       [
         '<span class="gl-label">',
         linkOpenTag,
-        spanOpenTag,
+        '<span class="gl-label-text <%= labelTextClass({ label, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>;">',
         '<%- label.title %>',
         '</span>',
         '</a>',
@@ -491,18 +489,24 @@ export default class LabelsSelect {
       ].join(''),
     );
 
-    const rightLabelTextColor = ({ label, escapeStr }) => {
-      return escapeStr(label.text_color === '#FFFFFF' ? label.color : label.text_color);
+    const labelTextClass = ({ label, escapeStr }) => {
+      return escapeStr(
+        label.text_color === '#FFFFFF' ? 'gl-label-text-light' : 'gl-label-text-dark',
+      );
+    };
+
+    const rightLabelTextClass = ({ label, escapeStr }) => {
+      return escapeStr(label.text_color === '#333333' ? labelTextClass({ label, escapeStr }) : '');
     };
 
     const scopedLabelTemplate = template(
       [
         '<span class="gl-label gl-label-scoped" style="color: <%= escapeStr(label.color) %>; --label-inset-border: inset 0 0 0 2px <%= escapeStr(label.color) %>;">',
         linkOpenTag,
-        spanOpenTag,
+        '<span class="gl-label-text <%= labelTextClass({ label, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>;">',
         '<%- label.title.slice(0, label.title.lastIndexOf("::")) %>',
         '</span>',
-        '<span class="gl-label-text" style="color: <%= rightLabelTextColor({ label, escapeStr }) %>;">',
+        '<span class="gl-label-text <%= rightLabelTextClass({ label, escapeStr }) %>">',
         '<%- label.title.slice(label.title.lastIndexOf("::") + 2) %>',
         '</span>',
         '</a>',
@@ -526,9 +530,9 @@ export default class LabelsSelect {
       [
         '<% labels.forEach(function(label){ %>',
         '<% if (isScopedLabel(label) && enableScopedLabels) { %>',
-        '<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, rightLabelTextColor, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
+        '<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, labelTextClass, rightLabelTextClass, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
         '<% } else { %>',
-        '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
+        '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, labelTextClass, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
         '<% } %>',
         '<% }); %>',
       ].join(''),
@@ -537,7 +541,8 @@ export default class LabelsSelect {
     return tpl({
       ...tplData,
       labelTemplate,
-      rightLabelTextColor,
+      labelTextClass,
+      rightLabelTextClass,
       scopedLabelTemplate,
       tooltipTitleTemplate,
       isScopedLabel,
@@ -560,15 +565,15 @@ export default class LabelsSelect {
     IssuableBulkUpdateActions.willUpdateLabels = true;
   }
   // eslint-disable-next-line class-methods-use-this
-  setDropdownData($dropdown, isChecking, labelId) {
+  setDropdownData($dropdown, isMarking, labelId) {
     let userCheckedIds = $dropdown.data('user-checked') || [];
     let userUncheckedIds = $dropdown.data('user-unchecked') || [];
 
-    if (isChecking) {
-      userCheckedIds = userCheckedIds.concat(labelId);
+    if (isMarking) {
+      userCheckedIds = union(userCheckedIds, [labelId]);
       userUncheckedIds = difference(userUncheckedIds, [labelId]);
     } else {
-      userUncheckedIds = userUncheckedIds.concat(labelId);
+      userUncheckedIds = union(userUncheckedIds, [labelId]);
       userCheckedIds = difference(userCheckedIds, [labelId]);
     }