Merge branch '340254-refactor-label_item-component-within-labels-widget' into 'master'

Refactor label_item for labels widget

See merge request gitlab-org/gitlab!69713

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue

@@ -32,7 +32,6 @@ export default {
     return {
       searchKey: '',
       labels: [],
-      currentHighlightItem: -1,
       localSelectedLabels: [...this.selectedLabels],
     };
   },
@@ -79,16 +78,6 @@ export default {
       return Boolean(this.searchKey) && this.visibleLabels.length === 0;
     },
   },
-  watch: {
-    searchKey(value) {
-      // When there is search string present
-      // and there are matching results,
-      // highlight first item by default.
-      if (value && this.visibleLabels.length) {
-        this.currentHighlightItem = 0;
-      }
-    },
-  },
   created() {
     this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
   },
@@ -162,16 +151,15 @@ export default {
       />
       <template v-else>
         <gl-dropdown-item
-          v-for="(label, index) in visibleLabels"
+          v-for="label in visibleLabels"
           :key="label.id"
+          :is-checked="isLabelSelected(label)"
+          :is-check-centered="true"
+          :is-check-item="true"
           data-testid="labels-list"
           @click.native.capture.stop="handleLabelClick(label)"
         >
-          <label-item
-            :label="label"
-            :is-label-set="isLabelSelected(label)"
-            :highlight="index === currentHighlightItem"
-          />
+          <label-item :label="label" />
         </gl-dropdown-item>
         <gl-dropdown-item
           v-show="showNoMatchingResultsMessage"

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue

 <script>
-import { GlLink, GlIcon } from '@gitlab/ui';
-
 export default {
-  functional: true,
   props: {
     label: {
       type: Object,
       required: true,
     },
-    isLabelSet: {
-      type: Boolean,
-      required: true,
-    },
-    highlight: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  render(h, { props }) {
-    const { label, highlight, isLabelSet } = props;
-
-    const labelColorBox = h('span', {
-      class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3',
-      style: {
-        backgroundColor: label.color,
-      },
-      attrs: {
-        'data-testid': 'label-color-box',
-      },
-    });
-
-    const checkedIcon = h(GlIcon, {
-      class: {
-        'gl-mr-3 gl-flex-shrink-0': true,
-        hidden: !isLabelSet,
-      },
-      props: {
-        name: 'mobile-issue-close',
-      },
-    });
-
-    const noIcon = h('span', {
-      class: {
-        'gl-mr-5 gl-pr-3': true,
-        hidden: isLabelSet,
-      },
-      attrs: {
-        'data-testid': 'no-icon',
-      },
-    });
-
-    const labelTitle = h('span', label.title);
-
-    const labelLink = h(GlLink, [noIcon, checkedIcon, labelColorBox, labelTitle]);
-
-    return h(
-      'li',
-      {
-        class: {
-          'gl-display-block': true,
-          'gl-text-left': true,
-          'is-focused': highlight,
-        },
-      },
-      [labelLink],
-    );
   },
 };
 </script>
+
+<template>
+  <div>
+    <span
+      class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3"
+      :style="{ 'background-color': label.color }"
+      data-testid="label-color-box"
+    ></span>
+    <span>{{ label.title }}</span>
+  </div>
+</template>

spec/features/issues/resource_label_events_spec.rb

@@ -38,7 +38,7 @@ RSpec.describe 'List issue resource label events', :js do
         click_on 'Edit'
         wait_for_requests
 
-        labels.each { |label| click_link label }
+        labels.each { |label| click_on label }
 
         send_keys(:escape)
         wait_for_requests

spec/frontend/vue_shared/components/sidebar/labels_select_widget/label_item_spec.js

-import { GlIcon, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 import LabelItem from '~/vue_shared/components/sidebar/labels_select_widget/label_item.vue';
@@ -6,16 +5,10 @@ import { mockRegularLabel } from './mock_data';
 
 const mockLabel = { ...mockRegularLabel, set: true };
 
-const createComponent = ({
-  label = mockLabel,
-  isLabelSet = mockLabel.set,
-  highlight = true,
-} = {}) =>
+const createComponent = ({ label = mockLabel } = {}) =>
   shallowMount(LabelItem, {
     propsData: {
       label,
-      isLabelSet,
-      highlight,
     },
   });
 
@@ -31,45 +24,6 @@ describe('LabelItem', () => {
   });
 
   describe('template', () => {
-    it('renders gl-link component', () => {
-      expect(wrapper.find(GlLink).exists()).toBe(true);
-    });
-
-    it('renders component root with class `is-focused` when `highlight` prop is true', () => {
-      const wrapperTemp = createComponent({
-        highlight: true,
-      });
-
-      expect(wrapperTemp.classes()).toContain('is-focused');
-
-      wrapperTemp.destroy();
-    });
-
-    it('renders visible gl-icon component when `isLabelSet` prop is true', () => {
-      const wrapperTemp = createComponent({
-        isLabelSet: true,
-      });
-
-      const iconEl = wrapperTemp.find(GlIcon);
-
-      expect(iconEl.isVisible()).toBe(true);
-      expect(iconEl.props('name')).toBe('mobile-issue-close');
-
-      wrapperTemp.destroy();
-    });
-
-    it('renders visible span element as placeholder instead of gl-icon when `isLabelSet` prop is false', () => {
-      const wrapperTemp = createComponent({
-        isLabelSet: false,
-      });
-
-      const placeholderEl = wrapperTemp.find('[data-testid="no-icon"]');
-
-      expect(placeholderEl.isVisible()).toBe(true);
-
-      wrapperTemp.destroy();
-    });
-
     it('renders label color element', () => {
       const colorEl = wrapper.find('[data-testid="label-color-box"]');