diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-01-24 00:08:20 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-01-24 00:08:20 +0300 |
commit | 7e26b627ca9f79b34c91f17c2b0eb42ec5c591b0 (patch) | |
tree | 1811a237fbf254d28b61a143ceea27ecf17068b7 /app/assets/javascripts/batch_comments | |
parent | cfc8827f6bf9573b02401b1908728da3aed96698 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/batch_comments')
-rw-r--r-- | app/assets/javascripts/batch_comments/components/preview_dropdown.vue | 55 |
1 files changed, 31 insertions, 24 deletions
diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue index 31185e31f48..1b354940a37 100644 --- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue +++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui'; +import { GlIcon, GlDisclosureDropdown, GlButton } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; import { setUrlParams, visitUrl } from '~/lib/utils/url_utility'; import PreviewItem from './preview_item.vue'; @@ -7,23 +7,30 @@ import DraftsCount from './drafts_count.vue'; export default { components: { - GlDropdown, - GlDropdownItem, GlIcon, PreviewItem, DraftsCount, + GlDisclosureDropdown, + GlButton, }, computed: { ...mapState('diffs', ['viewDiffsFileByFile']), ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']), ...mapGetters(['getNoteableData']), + listItems() { + return this.sortedDrafts.map((item, index) => ({ + text: item.id.toString(), + action: () => { + this.onClickDraft(item); + }, + last: index === this.sortedDrafts.length - 1, + ...item, + })); + }, }, methods: { ...mapActions('diffs', ['setCurrentFileHash']), ...mapActions('batchComments', ['scrollToDraft']), - isLast(index) { - return index === this.sortedDrafts.length - 1; - }, isOnLatestDiff(draft) { return draft.position?.head_sha === this.getNoteableData.diff_head_sha; }, @@ -45,23 +52,23 @@ export default { </script> <template> - <gl-dropdown - :header-text="n__('%d pending comment', '%d pending comments', draftsCount)" - dropup - data-qa-selector="review_preview_dropdown" - > - <template #button-content> - {{ __('Pending comments') }} - <drafts-count variant="neutral" /> - <gl-icon class="dropdown-chevron" name="chevron-up" /> + <gl-disclosure-dropdown :items="listItems" dropup data-qa-selector="review_preview_dropdown"> + <template #toggle> + <gl-button + >{{ __('Pending comments') }} <drafts-count variant="neutral" /><gl-icon + class="dropdown-chevron" + name="chevron-up" + /></gl-button> + </template> + + <template #header> + <p class="gl-dropdown-header-top"> + {{ n__('%d pending comment', '%d pending comments', draftsCount) }} + </p> + </template> + + <template #list-item="{ item }"> + <preview-item :draft="item" :is-last="item.last" @click="onClickDraft(item)" /> </template> - <gl-dropdown-item - v-for="(draft, index) in sortedDrafts" - :key="draft.id" - data-testid="preview-item" - @click="onClickDraft(draft)" - > - <preview-item :draft="draft" :is-last="isLast(index)" /> - </gl-dropdown-item> - </gl-dropdown> + </gl-disclosure-dropdown> </template> |