diff options
Diffstat (limited to 'app/assets/javascripts/error_tracking_settings/components')
-rw-r--r-- | app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue | 41 |
1 files changed, 23 insertions, 18 deletions
diff --git a/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue b/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue index 2323370a3aa..cd101f57d4f 100644 --- a/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue +++ b/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue @@ -1,11 +1,10 @@ <script> -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { GlCollapsibleListbox } from '@gitlab/ui'; import { getDisplayName } from '../utils'; export default { components: { - GlDropdown, - GlDropdownItem, + GlCollapsibleListbox, }, props: { dropdownLabel: { @@ -42,8 +41,21 @@ export default { required: true, }, }, + computed: { + listboxItems() { + return this.projects.map((project) => { + return { + text: getDisplayName(project), + value: project.id, + }; + }); + }, + }, methods: { - getDisplayName, + selectProject(id) { + const project = this.projects.find((p) => p.id === id); + this.$emit('select-project', project); + }, }, }; </script> @@ -52,22 +64,15 @@ export default { <div :class="{ 'gl-show-field-errors': isProjectInvalid }"> <label class="label-bold" for="project-dropdown">{{ __('Project') }}</label> <div class="row"> - <gl-dropdown + <gl-collapsible-listbox id="project-dropdown" - class="col-8 col-md-9 gl-pr-0" + class="gl-pl-5" :disabled="!hasProjects" - menu-class="w-100 mw-100" - toggle-class="dropdown-menu-toggle gl-field-error-outline" - :text="dropdownLabel" - > - <gl-dropdown-item - v-for="project in projects" - :key="`${project.organizationSlug}.${project.slug}`" - class="w-100" - @click="$emit('select-project', project)" - >{{ getDisplayName(project) }}</gl-dropdown-item - > - </gl-dropdown> + :items="listboxItems" + :selected="selectedProject && selectedProject.id" + :toggle-text="dropdownLabel" + @select="selectProject" + /> </div> <p v-if="isProjectInvalid" class="js-project-dropdown-error gl-field-error"> {{ invalidProjectLabel }} |