Update labels in non vue js

Impacts labels displayed in sidebars after editing labels

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,

changelogs/unreleased/38145-replace-labels-in-non-vue-js-with-gitlab-ui-component.yml

+---
+title: Correctly style scoped labels in sidebar after updating
+merge_request: 22071
+author:
+type: changed

spec/frontend/labels_select_spec.js

@@ -41,29 +41,29 @@ describe('LabelsSelect', () => {
       });
 
       it('generated label item template has correct label URL', () => {
-        expect($labelEl.attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label');
+        expect($labelEl.find('a').attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label');
       });
 
       it('generated label item template has correct label title', () => {
-        expect($labelEl.find('span.label').text()).toBe(label.title);
+        expect($labelEl.find('span.gl-label-text').text()).toBe(label.title);
       });
 
       it('generated label item template has label description as title attribute', () => {
-        expect($labelEl.find('span.label').attr('title')).toBe(label.description);
+        expect($labelEl.find('a').attr('title')).toBe(label.description);
       });
 
       it('generated label item template has correct label styles', () => {
-        expect($labelEl.find('span.label').attr('style')).toBe(
+        expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
           `background-color: ${label.color}; color: ${label.text_color};`,
         );
       });
 
-      it('generated label item has a badge class', () => {
-        expect($labelEl.find('span').hasClass('badge')).toEqual(true);
+      it('generated label item has a gl-label-text class', () => {
+        expect($labelEl.find('span').hasClass('gl-label-text')).toEqual(true);
       });
 
-      it('generated label item template does not have scoped-label class', () => {
-        expect($labelEl.find('.scoped-label')).toHaveLength(0);
+      it('generated label item template does not have gl-label-icon class', () => {
+        expect($labelEl.find('.gl-label-icon')).toHaveLength(0);
       });
     });
 
@@ -87,29 +87,31 @@ describe('LabelsSelect', () => {
       });
 
       it('generated label item template has correct label title', () => {
-        expect($labelEl.find('span.label').text()).toBe(label.title);
+        const scopedTitle = label.title.split('::');
+        expect($labelEl.find('span.gl-label-text').text()).toContain(scopedTitle[0]);
+        expect($labelEl.find('span.gl-label-text').text()).toContain(scopedTitle[1]);
       });
 
       it('generated label item template has html flag as true', () => {
-        expect($labelEl.find('span.label').attr('data-html')).toBe('true');
+        expect($labelEl.find('a').attr('data-html')).toBe('true');
       });
 
       it('generated label item template has question icon', () => {
         expect($labelEl.find('i.fa-question-circle')).toHaveLength(1);
       });
 
-      it('generated label item template has scoped-label class', () => {
-        expect($labelEl.find('.scoped-label')).toHaveLength(1);
+      it('generated label item template has gl-label-icon class', () => {
+        expect($labelEl.find('.gl-label-icon')).toHaveLength(1);
       });
 
       it('generated label item template has correct label styles', () => {
-        expect($labelEl.find('span.label').attr('style')).toBe(
+        expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
           `background-color: ${label.color}; color: ${label.text_color};`,
         );
       });
 
       it('generated label item has a badge class', () => {
-        expect($labelEl.find('span').hasClass('badge')).toEqual(true);
+        expect($labelEl.find('span').hasClass('gl-label-text')).toEqual(true);
       });
     });
   });