Add latest changes from gitlab-org/gitlab@master

1 files changed, 28 insertions, 6 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,