diff options
Diffstat (limited to 'app/assets/javascripts/integrations/gitlab_slack_application/components')
2 files changed, 49 insertions, 18 deletions
diff --git a/app/assets/javascripts/integrations/gitlab_slack_application/components/gitlab_slack_application.vue b/app/assets/javascripts/integrations/gitlab_slack_application/components/gitlab_slack_application.vue index bcb199853bd..edfb0af5bbe 100644 --- a/app/assets/javascripts/integrations/gitlab_slack_application/components/gitlab_slack_application.vue +++ b/app/assets/javascripts/integrations/gitlab_slack_application/components/gitlab_slack_application.vue @@ -101,7 +101,7 @@ export default { @project-selected="selectProject" /> - <div class="gl-display-flex gl-justify-content-end"> + <div class="gl-display-flex gl-justify-content-end gl-mt-3"> <gl-button category="primary" variant="confirm" diff --git a/app/assets/javascripts/integrations/gitlab_slack_application/components/projects_dropdown.vue b/app/assets/javascripts/integrations/gitlab_slack_application/components/projects_dropdown.vue index 26d191cd0bf..7c5287c69d6 100644 --- a/app/assets/javascripts/integrations/gitlab_slack_application/components/projects_dropdown.vue +++ b/app/assets/javascripts/integrations/gitlab_slack_application/components/projects_dropdown.vue @@ -1,13 +1,13 @@ <script> -import { GlDropdown } from '@gitlab/ui'; +import { GlCollapsibleListbox, GlAvatarLabeled } from '@gitlab/ui'; import { __ } from '~/locale'; - -import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue'; +import { getIdFromGraphQLId, isGid } from '~/graphql_shared/utils'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; export default { components: { - GlDropdown, - ProjectListItem, + GlCollapsibleListbox, + GlAvatarLabeled, }, props: { projectDropdownText: { @@ -26,30 +26,61 @@ export default { default: null, }, }, + data() { + return { + selected: this.selectedProject, + }; + }, computed: { dropdownText() { return this.selectedProject ? this.selectedProject.name_with_namespace : this.projectDropdownText; }, + items() { + const items = this.projects.map((project) => { + return { + value: project.id, + ...project, + }; + }); + + return convertObjectPropsToCamelCase(items, { deep: true }); + }, }, methods: { - onClick(project) { - this.$emit('project-selected', project); - this.$refs.dropdown.hide(true); + getEntityId(project) { + return isGid(project.id) ? getIdFromGraphQLId(project.id) : project.id; + }, + selectProject(projectId) { + this.$emit( + 'project-selected', + this.projects.find((project) => project.id === projectId), + ); }, }, }; </script> <template> - <gl-dropdown ref="dropdown" block :text="dropdownText" menu-class="gl-w-full!"> - <project-list-item - v-for="project in projects" - :key="project.id" - :project="project" - :selected="false" - @click="onClick(project)" - /> - </gl-dropdown> + <gl-collapsible-listbox + v-model="selected" + block + fluid-width + is-check-centered + :toggle-text="dropdownText" + :items="items" + @select="selectProject" + > + <template #list-item="{ item }"> + <gl-avatar-labeled + :label="item.nameWithNamespace" + :entity-name="item.nameWithNamespace" + :entity-id="getEntityId(item)" + shape="rect" + :size="32" + :src="item.avatarUrl" + /> + </template> + </gl-collapsible-listbox> </template> |