diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue')
| -rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue | 134 |
1 files changed, 112 insertions, 22 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue index d421b744fa1..87c59e5ece9 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue @@ -1,14 +1,47 @@ <script> import $ from 'jquery'; import { escape } from 'lodash'; +import { GlButton, GlModalDirective, GlSkeletonLoader } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import StatusIcon from '../mr_widget_status_icon.vue'; +import userPermissionsQuery from '../../queries/permissions.query.graphql'; +import conflictsStateQuery from '../../queries/states/conflicts.query.graphql'; export default { name: 'MRWidgetConflicts', components: { + GlSkeletonLoader, StatusIcon, + GlButton, + }, + directives: { + GlModalDirective, + }, + mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin], + apollo: { + userPermissions: { + query: userPermissionsQuery, + skip() { + return !this.glFeatures.mergeRequestWidgetGraphql; + }, + variables() { + return this.mergeRequestQueryVariables; + }, + update: data => data.project.mergeRequest.userPermissions, + }, + stateData: { + query: conflictsStateQuery, + skip() { + return !this.glFeatures.mergeRequestWidgetGraphql; + }, + variables() { + return this.mergeRequestQueryVariables; + }, + update: data => data.project.mergeRequest, + }, }, props: { /* TODO: This is providing all store and service down when it @@ -19,21 +52,72 @@ export default { default: () => ({}), }, }, + data() { + return { + userPermissions: {}, + stateData: {}, + }; + }, computed: { + isLoading() { + return ( + this.glFeatures.mergeRequestWidgetGraphql && + this.$apollo.queries.userPermissions.loading && + this.$apollo.queries.stateData.loading + ); + }, + canPushToSourceBranch() { + if (this.glFeatures.mergeRequestWidgetGraphql) { + return this.userPermissions.pushToSourceBranch; + } + + return this.mr.canPushToSourceBranch; + }, + canMerge() { + if (this.glFeatures.mergeRequestWidgetGraphql) { + return this.userPermissions.canMerge; + } + + return this.mr.canMerge; + }, + shouldBeRebased() { + if (this.glFeatures.mergeRequestWidgetGraphql) { + return this.stateData.shouldBeRebased; + } + + return this.mr.shouldBeRebased; + }, + sourceBranchProtected() { + if (this.glFeatures.mergeRequestWidgetGraphql) { + return this.stateData.sourceBranchProtected; + } + + return this.mr.sourceBranchProtected; + }, popoverTitle() { return s__( 'mrWidget|This feature merges changes from the target branch to the source branch. You cannot use this feature since the source branch is protected.', ); }, showResolveButton() { - return this.mr.conflictResolutionPath && this.mr.canPushToSourceBranch; + return this.mr.conflictResolutionPath && this.canPushToSourceBranch; }, showPopover() { - return this.showResolveButton && this.mr.sourceBranchProtected; + return this.showResolveButton && this.sourceBranchProtected; }, }, - mounted() { - if (this.showPopover) { + watch: { + showPopover: { + handler(newVal) { + if (newVal) { + this.$nextTick(this.initPopover); + } + }, + immediate: true, + }, + }, + methods: { + initPopover() { const $el = $(this.$refs.popover); $el @@ -63,7 +147,7 @@ export default { .on('show.bs.popover', () => { window.addEventListener('scroll', togglePopover.bind($el, false), { once: true }); }); - } + }, }, }; </script> @@ -71,40 +155,46 @@ export default { <div class="mr-widget-body media"> <status-icon :show-disabled-button="true" status="warning" /> - <div class="media-body space-children"> - <span v-if="mr.shouldBeRebased" class="bold"> + <div v-if="isLoading" class="gl-ml-4 gl-w-full mr-conflict-loader"> + <gl-skeleton-loader :width="334" :height="30"> + <rect x="0" y="7" width="150" height="16" rx="4" /> + <rect x="158" y="7" width="84" height="16" rx="4" /> + <rect x="250" y="7" width="84" height="16" rx="4" /> + </gl-skeleton-loader> + </div> + <div v-else class="media-body space-children"> + <span v-if="shouldBeRebased" class="bold"> {{ s__(`mrWidget|Fast-forward merge is not possible. -To merge this request, first rebase locally.`) + To merge this request, first rebase locally.`) }} </span> <template v-else> <span class="bold"> - {{ s__('mrWidget|There are merge conflicts') }}<span v-if="!mr.canMerge">.</span> - <span v-if="!mr.canMerge"> + {{ s__('mrWidget|There are merge conflicts') }}<span v-if="!canMerge">.</span> + <span v-if="!canMerge"> {{ s__(`mrWidget|Resolve these conflicts or ask someone - with write access to this repository to merge it locally`) + with write access to this repository to merge it locally`) }} </span> </span> <span v-if="showResolveButton" ref="popover"> - <a - :href="mr.conflictResolutionPath" - :disabled="mr.sourceBranchProtected" - class="js-resolve-conflicts-button btn btn-default btn-sm" + <gl-button + :href="!sourceBranchProtected && mr.conflictResolutionPath" + :disabled="sourceBranchProtected" + class="js-resolve-conflicts-button" > {{ s__('mrWidget|Resolve conflicts') }} - </a> + </gl-button> </span> - <button - v-if="mr.canMerge" - class="js-merge-locally-button btn btn-default btn-sm" - data-toggle="modal" - data-target="#modal_merge_info" + <gl-button + v-if="canMerge" + v-gl-modal-directive="'modal-merge-info'" + class="js-merge-locally-button" > {{ s__('mrWidget|Merge locally') }} - </button> + </gl-button> </template> </div> </div> |