Basic label selector component

Allows selecting a single label from a
list passed into the component. The labels
are rendered with the correct styling

ee/app/assets/javascripts/analytics/cycle_analytics/components/labels_selector.vue

+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+
+export default {
+  name: 'LabelsSelector',
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  props: {
+    labels: {
+      type: Array,
+      required: true,
+    },
+    selectedLabelId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    selectedLabel() {
+      const { selectedLabelId, labels } = this;
+      if (!selectedLabelId || !labels.length) return null;
+      return labels.find(({ id }) => id === selectedLabelId);
+    },
+  },
+  methods: {
+    isSelectedLabel(id) {
+      return this.selectedLabelId && id === this.selectedLabelId;
+    },
+  },
+};
+</script>
+<template>
+  <gl-dropdown class="w-100" toggle-class="overflow-hidden">
+    <template slot="button-content">
+      <span v-if="selectedLabel">
+        <span
+          :style="{ backgroundColor: selectedLabel.color }"
+          class="d-inline-block dropdown-label-box"
+        >
+        </span>
+        {{ selectedLabel.name }}
+      </span>
+      <span v-else>{{ __('Select a label') }}</span>
+    </template>
+    <gl-dropdown-item :active="!selectedLabelId" @click.prevent="$emit('clearLabel')"
+      >{{ __('Select a label') }}
+    </gl-dropdown-item>
+    <gl-dropdown-item
+      v-for="label in labels"
+      :key="label.id"
+      :active="isSelectedLabel(label.id)"
+      @click.prevent="$emit('selectLabel', label.id)"
+    >
+      <span :style="{ backgroundColor: label.color }" class="d-inline-block dropdown-label-box">
+      </span>
+      {{ label.name }}
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>

ee/spec/frontend/analytics/cycle_analytics/components/labels_selector_spec.js

+import { mount, shallowMount } from '@vue/test-utils';
+import LabelsSelector from 'ee/analytics/cycle_analytics/components/labels_selector.vue';
+import { mockLabels } from '../../../../../../spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data';
+
+const labels = mockLabels.map(({ title, ...rest }) => ({ ...rest, name: title }));
+const selectedLabel = labels[labels.length - 1];
+
+describe('Cycle Analytics LabelsSelector', () => {
+  function createComponent({ props = {}, shallow = true } = {}) {
+    const func = shallow ? shallowMount : mount;
+    return func(LabelsSelector, {
+      propsData: {
+        labels,
+        selectedLabelId: props.selectedLabelId || null,
+      },
+      sync: false,
+    });
+  }
+
+  let wrapper = null;
+
+  describe('with no item selected', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+    it('will generate the list of labels', () => {
+      // includes the blank option 'Select a label'
+      expect(wrapper.findAll('gldropdownitem-stub').length).toEqual(labels.length + 1);
+
+      labels.forEach(({ name }) => {
+        expect(wrapper.text()).toContain(name);
+      });
+    });
+
+    it('will render with the default option selected', () => {
+      const activeItem = wrapper.find('[active="true"]');
+
+      expect(activeItem.exists()).toBe(true);
+      expect(activeItem.text()).toEqual('Select a label');
+    });
+
+    describe('when a dropdown item is clicked', () => {
+      beforeEach(() => {
+        wrapper = createComponent({ shallow: false });
+      });
+
+      it('will emit the "selectLabel" event', () => {
+        expect(wrapper.emitted('selectLabel')).toBeUndefined();
+
+        const elem = wrapper.findAll('.dropdown-item').at(2);
+        elem.trigger('click');
+
+        expect(wrapper.emitted('selectLabel').length > 0).toBe(true);
+        expect(wrapper.emitted('selectLabel')[0]).toContain(mockLabels[1].id);
+      });
+
+      it('will emit the "clearLabel" event if it is the default item', () => {
+        expect(wrapper.emitted('clearLabel')).toBeUndefined();
+
+        const elem = wrapper.findAll('.dropdown-item').at(0);
+        elem.trigger('click');
+
+        expect(wrapper.emitted('clearLabel').length > 0).toBe(true);
+      });
+    });
+  });
+
+  describe('with selectedLabelId set', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ props: { selectedLabelId: selectedLabel.id } });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+    it('will set the active class', () => {
+      const activeItem = wrapper.find('[active="true"]');
+
+      expect(activeItem.exists()).toBe(true);
+      expect(activeItem.text()).toEqual(selectedLabel.name);
+    });
+  });
+});

locale/gitlab.pot

@@ -13482,6 +13482,9 @@ msgstr ""
 msgid "Select a group to invite"
 msgstr ""
 
+msgid "Select a label"
+msgstr ""
+
 msgid "Select a namespace to fork the project"
 msgstr ""