Use dropdown widget in board scope assignee select

Review feedback

app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue

@@ -54,11 +54,6 @@ export default {
       required: false,
       default: '',
     },
-    isUserDropdown: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     isSearchEmpty() {
@@ -75,9 +70,8 @@ export default {
     isSelected(option) {
       return (
         this.selected &&
-        (this.isUserDropdown
-          ? this.selected.name === option.name
-          : this.selected.title === option.title)
+        ((option.name && this.selected.name === option.name) ||
+          (option.title && this.selected.title === option.title))
       );
     },
     showDropdown() {
@@ -90,10 +84,11 @@ export default {
       this.$emit('set-search', search);
     },
     avatarUrl(option) {
-      return this.isUserDropdown ? option.avatar_url || option.avatarUrl : null;
+      return option.avatar_url || option.avatarUrl || null;
     },
     secondaryText(option) {
-      return this.isUserDropdown ? option.username : null;
+      // TODO: this has some knowledge of the context where the component is used. We could later rework it.
+      return option.username || null;
     },
   },
   i18n: {
@@ -137,7 +132,9 @@ export default {
             :is-check-item="true"
             @click="selectOption(option)"
           >
-            {{ option.title || option.name }}
+            <slot name="preset-item" :item="option">
+              {{ option.title }}
+            </slot>
           </gl-dropdown-item>
           <gl-dropdown-divider />
         </template>
@@ -152,7 +149,9 @@ export default {
           data-testid="unselected-option"
           @click="selectOption(option)"
         >
-          {{ option.title || option.name }}
+          <slot name="item" :item="option">
+            {{ option.title }}
+          </slot>
         </gl-dropdown-item>
         <gl-dropdown-item v-if="noOptionsFound" class="gl-pl-6!">
           {{ $options.i18n.noMatchingResults }}

ee/app/assets/javascripts/boards/components/assignee_select.vue

@@ -176,10 +176,16 @@ export default {
       :is-loading="isLoading"
       :selected="selected"
       :search-term="search"
-      :is-user-dropdown="true"
       @hide="hideDropdown"
       @set-option="selectAssignee"
       @set-search="setSearch"
-    />
+    >
+      <template #preset-item="{ item }">
+        {{ item.name }}
+      </template>
+      <template #item="{ item }">
+        {{ item.name }}
+      </template>
+    </dropdown-widget>
   </div>
 </template>

ee/app/assets/javascripts/boards/constants.js

@@ -81,7 +81,7 @@ export const MilestonesPreset = [
 
 export const ANY_ASSIGNEE = {
   id: 'gid://gitlab/User/-1',
-  title: s__('BoardScope|Any assignee'),
+  name: s__('BoardScope|Any assignee'),
 };
 export const AssigneesPreset = [ANY_ASSIGNEE];
 

ee/spec/frontend/boards/components/assignee_select_spec.js

@@ -88,9 +88,11 @@ describe('Assignee select component', () => {
     });
 
     it('renders selected assignee', async () => {
-      wrapper.vm.selected = mockUser2;
-
+      findEditButton().vm.$emit('click');
       await waitForPromises();
+      findDropdown().vm.$emit('set-option', mockUser2);
+
+      await nextTick();
       expect(selectedText()).toContain(mockUser2.username);
     });
   });

ee/spec/frontend/boards/milestone_select_spec.js

@@ -98,7 +98,9 @@ describe('Milestone select component', () => {
     });
 
     it('renders selected milestone', async () => {
-      wrapper.vm.selected = mockMilestone1;
+      findEditButton().vm.$emit('click');
+      await waitForPromises();
+      findDropdown().vm.$emit('set-option', mockMilestone1);
 
       await waitForPromises();
       expect(selectedText()).toContain(mockMilestone1.title);

spec/frontend/vue_shared/components/dropdown/dropdown_widget_spec.js

@@ -77,7 +77,7 @@ describe('DropdownWidget component', () => {
     });
   });
 
-  describe('when user dropdown', () => {
+  describe('when options are users', () => {
     const mockUser = {
       id: 1,
       name: 'User name',
@@ -86,7 +86,7 @@ describe('DropdownWidget component', () => {
     };
 
     beforeEach(() => {
-      createComponent({ props: { isUserDropdown: true, options: [mockUser] } });
+      createComponent({ props: { options: [mockUser] } });
     });
 
     it('passes user related props to dropdown item', () => {