Merge branch '250727-use-fuzzaldrinplus-search-for-labels' into 'master'

Add fuzzy search support to labels dropdown

Closes #250727

See merge request gitlab-org/gitlab!43969

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

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { GlLoadingIcon, GlButton, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
 
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
@@ -39,9 +40,9 @@ export default {
     ...mapGetters(['selectedLabelsList', 'isDropdownVariantSidebar', 'isDropdownVariantEmbedded']),
     visibleLabels() {
       if (this.searchKey) {
-        return this.labels.filter(label =>
-          label.title.toLowerCase().includes(this.searchKey.toLowerCase()),
-        );
+        return fuzzaldrinPlus.filter(this.labels, this.searchKey, {
+          key: ['title'],
+        });
       }
       return this.labels;
     },

changelogs/unreleased/250727-use-fuzzaldrinplus-search-for-labels.yml

+---
+title: Add fuzzy search support to labels dropdown
+merge_request: 43969
+author:
+type: fixed

spec/frontend/sidebar/sidebar_labels_spec.js

@@ -114,7 +114,7 @@ describe('sidebar labels', () => {
 
       const expected = {
         [defaultProps.issuableType]: {
-          label_ids: [27, 28, 40],
+          label_ids: [27, 28, 29, 40],
         },
       };
 

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js

@@ -69,6 +69,16 @@ describe('DropdownContentsLabelsView', () => {
         expect(wrapper.vm.visibleLabels[0].title).toBe('Bug');
       });
 
+      it('returns matching labels with fuzzy filtering', () => {
+        wrapper.setData({
+          searchKey: 'bg',
+        });
+
+        expect(wrapper.vm.visibleLabels.length).toBe(2);
+        expect(wrapper.vm.visibleLabels[0].title).toBe('Bug');
+        expect(wrapper.vm.visibleLabels[1].title).toBe('Boog');
+      });
+
       it('returns all labels when `searchKey` is empty', () => {
         wrapper.setData({
           searchKey: '',

spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js

@@ -24,6 +24,13 @@ export const mockLabels = [
     color: '#FF0000',
     textColor: '#FFFFFF',
   },
+  {
+    id: 29,
+    title: 'Boog',
+    description: 'Label for bugs',
+    color: '#FF0000',
+    textColor: '#FFFFFF',
+  },
 ];
 
 export const mockConfig = {