diff options
Diffstat (limited to 'app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue | 160 |
1 files changed, 107 insertions, 53 deletions
diff --git a/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue b/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue index a4edc988d67..7c00ce45b3a 100644 --- a/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue +++ b/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue @@ -1,14 +1,17 @@ <script> -import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlDropdownSectionHeader } from '@gitlab/ui'; +import { GlDisclosureDropdownGroup, GlDisclosureDropdown } from '@gitlab/ui'; +import { s__, __ } from '~/locale'; import { OPEN_REVERT_MODAL, OPEN_CHERRY_PICK_MODAL } from '../constants'; import eventHub from '../event_hub'; export default { + i18n: { + gitlabTag: s__('CreateTag|Tag'), + }, + components: { - GlDropdown, - GlDropdownItem, - GlDropdownDivider, - GlDropdownSectionHeader, + GlDisclosureDropdown, + GlDisclosureDropdownGroup, }, inject: { newProjectTagPath: { @@ -43,66 +46,117 @@ export default { showDivider() { return this.canRevert || this.canCherryPick || this.canTag; }, + cherryPickItem() { + return { + text: s__('ChangeTypeAction|Cherry-pick'), + extraAttrs: { + 'data-testid': 'cherry-pick-link', + 'data-qa-selector': 'cherry_pick_button', + }, + action: () => this.showModal(OPEN_CHERRY_PICK_MODAL), + }; + }, + + revertLinkItem() { + return { + text: s__('ChangeTypeAction|Revert'), + extraAttrs: { + 'data-testid': 'revert-link', + 'data-qa-selector': 'revert_button', + }, + action: () => this.showModal(OPEN_REVERT_MODAL), + }; + }, + + tagLinkItem() { + return { + text: s__('CreateTag|Tag'), + href: this.newProjectTagPath, + extraAttrs: { + 'data-testid': 'tag-link', + }, + }; + }, + plainDiffItem() { + return { + text: s__('DownloadCommit|Plain Diff'), + href: this.plainDiffPath, + extraAttrs: { + download: '', + rel: 'nofollow', + 'data-testid': 'plain-diff-link', + 'data-qa-selector': 'plain_diff', + }, + }; + }, + patchesItem() { + return { + text: __('Patches'), + href: this.emailPatchesPath, + extraAttrs: { + download: '', + rel: 'nofollow', + 'data-testid': 'email-patches-link', + 'data-qa-selector': 'email_patches', + }, + }; + }, + + downloadsGroup() { + const items = []; + if (this.canEmailPatches) { + items.push(this.patchesItem); + } + items.push(this.plainDiffItem); + return { + name: __('Downloads'), + items, + }; + }, + + optionsGroup() { + const items = []; + if (this.canRevert) { + items.push(this.revertLinkItem); + } + if (this.canCherryPick) { + items.push(this.cherryPickItem); + } + if (this.canTag) { + items.push(this.tagLinkItem); + } + return { + items, + }; + }, }, + methods: { showModal(modalId) { eventHub.$emit(modalId); }, + closeDropdown() { + this.$refs.userDropdown.close(); + }, }, - openRevertModal: OPEN_REVERT_MODAL, - openCherryPickModal: OPEN_CHERRY_PICK_MODAL, }; </script> <template> - <gl-dropdown - :text="__('Options')" + <gl-disclosure-dropdown + ref="userDropdown" + :toggle-text="__('Options')" right data-testid="commit-options-dropdown" data-qa-selector="options_button" - class="gl-xs-w-full" + class="gl-xs-w-full gl-line-height-20" > - <gl-dropdown-item - v-if="canRevert" - data-testid="revert-link" - data-qa-selector="revert_button" - @click="showModal($options.openRevertModal)" - > - {{ s__('ChangeTypeAction|Revert') }} - </gl-dropdown-item> - <gl-dropdown-item - v-if="canCherryPick" - data-testid="cherry-pick-link" - data-qa-selector="cherry_pick_button" - @click="showModal($options.openCherryPickModal)" - > - {{ s__('ChangeTypeAction|Cherry-pick') }} - </gl-dropdown-item> - <gl-dropdown-item v-if="canTag" :href="newProjectTagPath" data-testid="tag-link"> - {{ s__('CreateTag|Tag') }} - </gl-dropdown-item> - <gl-dropdown-divider v-if="showDivider" /> - <gl-dropdown-section-header> - {{ __('Download') }} - </gl-dropdown-section-header> - <gl-dropdown-item - v-if="canEmailPatches" - :href="emailPatchesPath" - download - rel="nofollow" - data-testid="email-patches-link" - data-qa-selector="email_patches" - > - {{ __('Patches') }} - </gl-dropdown-item> - <gl-dropdown-item - :href="plainDiffPath" - download - rel="nofollow" - data-testid="plain-diff-link" - data-qa-selector="plain_diff" - > - {{ s__('DownloadCommit|Plain Diff') }} - </gl-dropdown-item> - </gl-dropdown> + <gl-disclosure-dropdown-group :group="optionsGroup" @action="closeDropdown" /> + + <gl-disclosure-dropdown-group + :bordered="showDivider" + :group="downloadsGroup" + @action="closeDropdown" + /> + </gl-disclosure-dropdown> </template> |