Merge branch 'fix-labels-widget-debounce' into 'master'

Labels widget follow up

See merge request gitlab-org/gitlab!76308

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

@@ -195,12 +195,12 @@ export default {
   >
     <template #header>
       <dropdown-header
-        v-if="!isStandalone"
         ref="header"
-        v-model="searchKey"
+        :search-key="searchKey"
         :labels-create-title="labelsCreateTitle"
         :labels-list-title="labelsListTitle"
         :show-dropdown-contents-create-view="showDropdownContentsCreateView"
+        :is-standalone="isStandalone"
         @toggleDropdownContentsCreateView="toggleDropdownContent"
         @closeDropdown="$emit('closeDropdown')"
         @input="debouncedSearchKeyUpdate"

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

@@ -6,9 +6,6 @@ export default {
     GlButton,
     GlSearchBoxByType,
   },
-  model: {
-    prop: 'searchKey',
-  },
   props: {
     labelsCreateTitle: {
       type: String,
@@ -31,6 +28,11 @@ export default {
       type: String,
       required: true,
     },
+    isStandalone: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     dropdownTitle() {
@@ -47,7 +49,11 @@ export default {
 
 <template>
   <div data-testid="dropdown-header">
-    <div class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!">
+    <div
+      v-if="!isStandalone"
+      class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
+      data-testid="dropdown-header-title"
+    >
       <gl-button
         v-if="showDropdownContentsCreateView"
         :aria-label="__('Go back')"

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

@@ -286,7 +286,7 @@ export default {
 
 <template>
   <div
-    class="labels-select-wrapper position-relative"
+    class="labels-select-wrapper gl-relative"
     :class="{
       'is-standalone': isDropdownVariantStandalone(variant),
       'is-embedded': isDropdownVariantEmbedded(variant),

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

@@ -124,19 +124,7 @@ describe('DropdownContent', () => {
     expect(wrapper.emitted('setLabels')).toEqual([[[updatedLabel]]]);
   });
 
-  it('does not render header on standalone variant', () => {
-    createComponent({ props: { variant: DropdownVariant.Standalone } });
-
-    expect(findDropdownHeader().exists()).toBe(false);
-  });
-
-  it('renders header on embedded variant', () => {
-    createComponent({ props: { variant: DropdownVariant.Embedded } });
-
-    expect(findDropdownHeader().exists()).toBe(true);
-  });
-
-  it('renders header on sidebar variant', () => {
+  it('renders header', () => {
     createComponent();
 
     expect(findDropdownHeader().exists()).toBe(true);

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

@@ -9,6 +9,7 @@ describe('DropdownHeader', () => {
   const createComponent = ({
     showDropdownContentsCreateView = false,
     labelsFetchInProgress = false,
+    isStandalone = false,
   } = {}) => {
     wrapper = extendedWrapper(
       shallowMount(DropdownHeader, {
@@ -18,6 +19,7 @@ describe('DropdownHeader', () => {
           labelsCreateTitle: 'Create label',
           labelsListTitle: 'Select label',
           searchKey: '',
+          isStandalone,
         },
         stubs: {
           GlSearchBoxByType,
@@ -32,6 +34,7 @@ describe('DropdownHeader', () => {
 
   const findSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
   const findGoBackButton = () => wrapper.findByTestId('go-back-button');
+  const findDropdownTitle = () => wrapper.findByTestId('dropdown-header-title');
 
   beforeEach(() => {
     createComponent();
@@ -72,4 +75,18 @@ describe('DropdownHeader', () => {
       },
     );
   });
+
+  describe('Standalone variant', () => {
+    beforeEach(() => {
+      createComponent({ isStandalone: true });
+    });
+
+    it('renders search input', () => {
+      expect(findSearchInput().exists()).toBe(true);
+    });
+
+    it('does not render title', async () => {
+      expect(findDropdownTitle().exists()).toBe(false);
+    });
+  });
 });

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

@@ -75,9 +75,9 @@ describe('LabelsSelectRoot', () => {
     wrapper.destroy();
   });
 
-  it('renders component with classes `labels-select-wrapper position-relative`', () => {
+  it('renders component with classes `labels-select-wrapper gl-relative`', () => {
     createComponent();
-    expect(wrapper.classes()).toEqual(['labels-select-wrapper', 'position-relative']);
+    expect(wrapper.classes()).toEqual(['labels-select-wrapper', 'gl-relative']);
   });
 
   it.each`