Commit fd29d841 authored by Florie Guibert's avatar Florie Guibert

Use dropdown widget in board scope assignee select

Review feedback
parent 417f6cbe
......@@ -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 }}
......
......@@ -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>
......@@ -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];
......
......@@ -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);
});
});
......
......@@ -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);
......
......@@ -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', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment