1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<script>
import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
import { debounce } from 'lodash';
import { createNamespacedHelpers } from 'vuex';
import { s__ } from '~/locale';
import ParameterFormGroup from './parameter_form_group.vue';
const { mapActions, mapGetters, mapState } = createNamespacedHelpers('userLists');
const { fetchUserLists, setFilter } = mapActions(['fetchUserLists', 'setFilter']);
export default {
components: {
GlDropdown,
GlDropdownItem,
GlLoadingIcon,
GlSearchBoxByType,
ParameterFormGroup,
},
props: {
strategy: {
required: true,
type: Object,
},
},
translations: {
rolloutUserListLabel: s__('FeatureFlag|User List'),
rolloutUserListDescription: s__('FeatureFlag|Select a user list'),
rolloutUserListNoListError: s__('FeatureFlag|There are no configured user lists'),
defaultDropdownText: s__('FeatureFlags|No user list selected'),
},
computed: {
...mapGetters(['hasUserLists', 'isLoading', 'hasError', 'userListOptions']),
...mapState(['filter', 'userLists']),
userListId() {
return this.strategy?.userList?.id ?? '';
},
dropdownText() {
return this.strategy?.userList?.name ?? this.$options.translations.defaultDropdownText;
},
},
mounted() {
fetchUserLists.apply(this);
},
methods: {
setFilter: debounce(setFilter, 250),
fetchUserLists: debounce(fetchUserLists, 250),
onUserListChange(list) {
this.$emit('change', {
userList: list,
});
},
isSelectedUserList({ id }) {
return id === this.userListId;
},
setFocus() {
this.$refs.searchBox.focusInput();
},
},
};
</script>
<template>
<parameter-form-group
:state="hasUserLists"
:invalid-feedback="$options.translations.rolloutUserListNoListError"
:label="$options.translations.rolloutUserListLabel"
:description="hasUserLists ? $options.translations.rolloutUserListDescription : ''"
>
<template #default="{ inputId }">
<gl-dropdown :id="inputId" :text="dropdownText" @shown="setFocus">
<gl-search-box-by-type
ref="searchBox"
class="gl-m-3"
:value="filter"
@input="setFilter"
@focus="fetchUserLists"
@keyup="fetchUserLists"
/>
<gl-loading-icon v-if="isLoading" />
<gl-dropdown-item
v-for="list in userLists"
:key="list.id"
:is-checked="isSelectedUserList(list)"
is-check-item
@click="onUserListChange(list)"
>
{{ list.name }}
</gl-dropdown-item>
</gl-dropdown>
</template>
</parameter-form-group>
</template>
|
