Merge branch '38145-replace-labels-in-non-vue-js-with-gitlab-ui-component' into 'master'

Update labels on sidebar update with gitlab-ui css classes

See merge request gitlab-org/gitlab!22071

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

ee/app/helpers/ee/boards_helper.rb

@@ -27,7 +27,7 @@ module EE
         weight_feature_available: current_board_parent.feature_available?(:issue_weights).to_s,
         show_promotion: show_feature_promotion,
         scoped_labels: current_board_parent.feature_available?(:scoped_labels)&.to_s,
-        scoped_labels_documentation_link: help_page_path('user/project/labels.md', anchor: 'scoped-labels')
+        scoped_labels_documentation_link: help_page_path('user/project/labels.md', anchor: 'scoped-labels-premium')
       }
 
       super.merge(data)

ee/app/helpers/ee/labels_helper.rb

@@ -45,7 +45,7 @@ module EE
     def label_dropdown_data(edit_context, opts = {})
       scoped_labels_fields = {
         scoped_labels: edit_context&.feature_available?(:scoped_labels)&.to_s,
-        scoped_labels_documentation_link: help_page_path('user/project/labels.md', anchor: 'scoped-labels')
+        scoped_labels_documentation_link: help_page_path('user/project/labels.md', anchor: 'scoped-labels-premium')
       }
 
       return super.merge(scoped_labels_fields) unless edit_context.is_a?(Group)
@@ -74,7 +74,7 @@ module EE
     private
 
     def scoped_labels_doc_link
-      help_url = ::Gitlab::Routing.url_helpers.help_page_path('user/project/labels.md', anchor: 'scoped-labels')
+      help_url = ::Gitlab::Routing.url_helpers.help_page_path('user/project/labels.md', anchor: 'scoped-labels-premium')
 
       %(<a href="#{help_url}" class="gl-link gl-label-icon" target="_blank" rel="noopener"><i class="fa fa-question-circle"></i></a>).html_safe
     end

ee/app/presenters/epic_presenter.rb

@@ -79,7 +79,7 @@ class EpicPresenter < Gitlab::View::Presenter::Delegated
       toggle_subscription_path: toggle_subscription_group_epic_path(group, epic),
       labels_web_url: group_labels_path(group),
       epics_web_url: group_epics_path(group),
-      scoped_labels_documentation_link: help_page_path('user/project/labels.md', anchor: 'scoped-labels')
+      scoped_labels_documentation_link: help_page_path('user/project/labels.md', anchor: 'scoped-labels-premium')
     }
 
     paths[:todo_delete_path] = dashboard_todo_path(epic_pending_todo) if epic_pending_todo.present?

ee/app/views/shared/labels/_create_label_help_text.html.haml

 - if @label.subject.feature_available?(:scoped_labels)
-  - docs_url = help_page_path('user/project/labels.md', anchor: 'scoped-labels')
+  - docs_url = help_page_path('user/project/labels.md', anchor: 'scoped-labels-premium')
   - docs_link_start = "<a href='#{docs_url}' target='_blank' rel='noreferrer noopener'>".html_safe
   - docs_link_end = '</a>'.html_safe
   - docs_link_placeholders = { link_start: docs_link_start,

ee/spec/helpers/ee/labels_helper_spec.rb

@@ -57,7 +57,7 @@ describe LabelsHelper do
         show_any: "true",
         default_label: "Labels",
         scoped_labels: "false",
-        scoped_labels_documentation_link: "/help/user/project/labels.md#scoped-labels"
+        scoped_labels_documentation_link: "/help/user/project/labels.md#scoped-labels-premium"
       }
     end
 

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);
       });
     });
   });