diff options
Diffstat (limited to 'app/assets/javascripts/projects/commit')
12 files changed, 216 insertions, 84 deletions
diff --git a/app/assets/javascripts/projects/commit/components/commit_comments_button.vue b/app/assets/javascripts/projects/commit/components/commit_comments_button.vue new file mode 100644 index 00000000000..67b5e1e512c --- /dev/null +++ b/app/assets/javascripts/projects/commit/components/commit_comments_button.vue @@ -0,0 +1,42 @@ +<script> +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { n__ } from '~/locale'; + +export default { + directives: { + GlTooltip: GlTooltipDirective, + }, + components: { + GlButton, + }, + props: { + commentsCount: { + type: Number, + required: true, + }, + }, + computed: { + tooltipText() { + return n__('%d comment on this commit', '%d comments on this commit', this.commentsCount); + }, + showCommentButton() { + return this.commentsCount > 0; + }, + }, +}; +</script> + +<template> + <span + v-if="showCommentButton" + v-gl-tooltip + class="gl-display-none gl-sm-display-inline-block" + tabindex="0" + :title="tooltipText" + data-testid="comment-button-wrapper" + > + <gl-button icon="comment" class="gl-mr-3" disabled> + {{ commentsCount }} + </gl-button> + </span> +</template> diff --git a/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue b/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue new file mode 100644 index 00000000000..d96d1035ed0 --- /dev/null +++ b/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue @@ -0,0 +1,107 @@ +<script> +import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlDropdownSectionHeader } from '@gitlab/ui'; +import { OPEN_REVERT_MODAL, OPEN_CHERRY_PICK_MODAL } from '../constants'; +import eventHub from '../event_hub'; + +export default { + components: { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + GlDropdownSectionHeader, + }, + inject: { + newProjectTagPath: { + default: '', + }, + emailPatchesPath: { + default: '', + }, + plainDiffPath: { + default: '', + }, + }, + props: { + canRevert: { + type: Boolean, + required: true, + }, + canCherryPick: { + type: Boolean, + required: true, + }, + canTag: { + type: Boolean, + required: true, + }, + canEmailPatches: { + type: Boolean, + required: true, + }, + }, + computed: { + showDivider() { + return this.canRevert || this.canCherryPick || this.canTag; + }, + }, + methods: { + showModal(modalId) { + eventHub.$emit(modalId); + }, + }, + openRevertModal: OPEN_REVERT_MODAL, + openCherryPickModal: OPEN_CHERRY_PICK_MODAL, +}; +</script> + +<template> + <gl-dropdown + :text="__('Options')" + right + data-testid="commit-options-dropdown" + data-qa-selector="options_button" + class="gl-xs-w-full" + > + <gl-dropdown-item + v-if="canRevert" + data-testid="revert-link" + @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" + > + {{ s__('DownloadCommit|Email 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> +</template> diff --git a/app/assets/javascripts/projects/commit/components/form_modal.vue b/app/assets/javascripts/projects/commit/components/form_modal.vue index 30968d29cde..6eefa5f55e4 100644 --- a/app/assets/javascripts/projects/commit/components/form_modal.vue +++ b/app/assets/javascripts/projects/commit/components/form_modal.vue @@ -37,6 +37,11 @@ export default { type: String, required: true, }, + isCherryPick: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -47,6 +52,7 @@ export default { { variant: 'success' }, { category: 'primary' }, { 'data-testid': 'submit-commit' }, + { 'data-qa-selector': 'submit_commit_button' }, ], }, actionCancel: { @@ -110,7 +116,7 @@ export default { <input type="hidden" name="authenticity_token" :value="$options.csrf.token" /> <gl-form-group - v-if="glFeatures.pickIntoProject" + v-if="glFeatures.pickIntoProject && isCherryPick" :label="i18n.projectLabel" label-for="start_project" data-testid="dropdown-group" diff --git a/app/assets/javascripts/projects/commit/components/form_trigger.vue b/app/assets/javascripts/projects/commit/components/form_trigger.vue deleted file mode 100644 index 3561b5c2473..00000000000 --- a/app/assets/javascripts/projects/commit/components/form_trigger.vue +++ /dev/null @@ -1,35 +0,0 @@ -<script> -import { GlLink } from '@gitlab/ui'; -import eventHub from '../event_hub'; - -export default { - components: { - GlLink, - }, - inject: { - displayText: { - default: '', - }, - testId: { - default: '', - }, - }, - props: { - openModal: { - type: String, - required: true, - }, - }, - methods: { - showModal() { - eventHub.$emit(this.openModal); - }, - }, -}; -</script> - -<template> - <gl-link data-is-link="true" :data-testid="testId" @click="showModal"> - {{ displayText }} - </gl-link> -</template> diff --git a/app/assets/javascripts/projects/commit/constants.js b/app/assets/javascripts/projects/commit/constants.js index d6bb4e9483f..d553bca360e 100644 --- a/app/assets/javascripts/projects/commit/constants.js +++ b/app/assets/javascripts/projects/commit/constants.js @@ -2,10 +2,8 @@ import { s__, __ } from '~/locale'; export const OPEN_REVERT_MODAL = 'openRevertModal'; export const REVERT_MODAL_ID = 'revert-commit-modal'; -export const REVERT_LINK_TEST_ID = 'revert-commit-link'; export const OPEN_CHERRY_PICK_MODAL = 'openCherryPickModal'; export const CHERRY_PICK_MODAL_ID = 'cherry-pick-commit-modal'; -export const CHERRY_PICK_LINK_TEST_ID = 'cherry-pick-commit-link'; export const I18N_MODAL = { startMergeRequest: s__('ChangeTypeAction|Start a %{newMergeRequest} with these changes'), diff --git a/app/assets/javascripts/projects/commit/index.js b/app/assets/javascripts/projects/commit/index.js index b5fdfc25236..d8d30c4332c 100644 --- a/app/assets/javascripts/projects/commit/index.js +++ b/app/assets/javascripts/projects/commit/index.js @@ -1,11 +1,11 @@ import initCherryPickCommitModal from './init_cherry_pick_commit_modal'; -import initCherryPickCommitTrigger from './init_cherry_pick_commit_trigger'; +import initCommitCommentsButton from './init_commit_comments_button'; +import initCommitOptionsDropdown from './init_commit_options_dropdown'; import initRevertCommitModal from './init_revert_commit_modal'; -import initRevertCommitTrigger from './init_revert_commit_trigger'; export default () => { initRevertCommitModal(); - initRevertCommitTrigger(); initCherryPickCommitModal(); - initCherryPickCommitTrigger(); + initCommitCommentsButton(); + initCommitOptionsDropdown(); }; diff --git a/app/assets/javascripts/projects/commit/init_cherry_pick_commit_modal.js b/app/assets/javascripts/projects/commit/init_cherry_pick_commit_modal.js index ad31ad14b2a..47ee8237fea 100644 --- a/app/assets/javascripts/projects/commit/init_cherry_pick_commit_modal.js +++ b/app/assets/javascripts/projects/commit/init_cherry_pick_commit_modal.js @@ -51,6 +51,7 @@ export default function initInviteMembersModal() { i18n: { ...I18N_CHERRY_PICK_MODAL, ...I18N_MODAL }, openModal: OPEN_CHERRY_PICK_MODAL, modalId: CHERRY_PICK_MODAL_ID, + isCherryPick: true, }, }), }); diff --git a/app/assets/javascripts/projects/commit/init_cherry_pick_commit_trigger.js b/app/assets/javascripts/projects/commit/init_cherry_pick_commit_trigger.js deleted file mode 100644 index 942451dc96a..00000000000 --- a/app/assets/javascripts/projects/commit/init_cherry_pick_commit_trigger.js +++ /dev/null @@ -1,20 +0,0 @@ -import Vue from 'vue'; -import CommitFormTrigger from './components/form_trigger.vue'; -import { OPEN_CHERRY_PICK_MODAL, CHERRY_PICK_LINK_TEST_ID } from './constants'; - -export default function initInviteMembersTrigger() { - const el = document.querySelector('.js-cherry-pick-commit-trigger'); - - if (!el) { - return false; - } - - const { displayText } = el.dataset; - - return new Vue({ - el, - provide: { displayText, testId: CHERRY_PICK_LINK_TEST_ID }, - render: (createElement) => - createElement(CommitFormTrigger, { props: { openModal: OPEN_CHERRY_PICK_MODAL } }), - }); -} diff --git a/app/assets/javascripts/projects/commit/init_commit_comments_button.js b/app/assets/javascripts/projects/commit/init_commit_comments_button.js new file mode 100644 index 00000000000..d70f7cb65f3 --- /dev/null +++ b/app/assets/javascripts/projects/commit/init_commit_comments_button.js @@ -0,0 +1,18 @@ +import Vue from 'vue'; +import CommitCommentsButton from './components/commit_comments_button.vue'; + +export default function initCommitCommentsButton() { + const el = document.querySelector('#js-commit-comments-button'); + + if (!el) { + return false; + } + + const { commentsCount } = el.dataset; + + return new Vue({ + el, + render: (createElement) => + createElement(CommitCommentsButton, { props: { commentsCount: Number(commentsCount) } }), + }); +} diff --git a/app/assets/javascripts/projects/commit/init_commit_options_dropdown.js b/app/assets/javascripts/projects/commit/init_commit_options_dropdown.js new file mode 100644 index 00000000000..339918e7661 --- /dev/null +++ b/app/assets/javascripts/projects/commit/init_commit_options_dropdown.js @@ -0,0 +1,35 @@ +import Vue from 'vue'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import CommitOptionsDropdown from './components/commit_options_dropdown.vue'; + +export default function initCommitOptionsDropdown() { + const el = document.querySelector('#js-commit-options-dropdown'); + + if (!el) { + return false; + } + + const { + newProjectTagPath, + emailPatchesPath, + plainDiffPath, + canRevert, + canCherryPick, + canTag, + canEmailPatches, + } = el.dataset; + + return new Vue({ + el, + provide: { newProjectTagPath, emailPatchesPath, plainDiffPath }, + render: (createElement) => + createElement(CommitOptionsDropdown, { + props: { + canRevert: parseBoolean(canRevert), + canCherryPick: parseBoolean(canCherryPick), + canTag: parseBoolean(canTag), + canEmailPatches: parseBoolean(canEmailPatches), + }, + }), + }); +} diff --git a/app/assets/javascripts/projects/commit/init_revert_commit_trigger.js b/app/assets/javascripts/projects/commit/init_revert_commit_trigger.js deleted file mode 100644 index dc5168524ca..00000000000 --- a/app/assets/javascripts/projects/commit/init_revert_commit_trigger.js +++ /dev/null @@ -1,20 +0,0 @@ -import Vue from 'vue'; -import CommitFormTrigger from './components/form_trigger.vue'; -import { OPEN_REVERT_MODAL, REVERT_LINK_TEST_ID } from './constants'; - -export default function initInviteMembersTrigger() { - const el = document.querySelector('.js-revert-commit-trigger'); - - if (!el) { - return false; - } - - const { displayText } = el.dataset; - - return new Vue({ - el, - provide: { displayText, testId: REVERT_LINK_TEST_ID }, - render: (createElement) => - createElement(CommitFormTrigger, { props: { openModal: OPEN_REVERT_MODAL } }), - }); -} diff --git a/app/assets/javascripts/projects/commit/store/actions.js b/app/assets/javascripts/projects/commit/store/actions.js index c72704303ca..2b25082eced 100644 --- a/app/assets/javascripts/projects/commit/store/actions.js +++ b/app/assets/javascripts/projects/commit/store/actions.js @@ -22,8 +22,8 @@ export const fetchBranches = ({ commit, dispatch, state }, query) => { .get(state.branchesEndpoint, { params: { search: query }, }) - .then(({ data }) => { - commit(types.RECEIVE_BRANCHES_SUCCESS, data.Branches || []); + .then(({ data = [] }) => { + commit(types.RECEIVE_BRANCHES_SUCCESS, data.Branches?.length ? data.Branches : data); }) .catch(() => { createFlash({ message: PROJECT_BRANCHES_ERROR }); |