diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue | 110 |
1 files changed, 86 insertions, 24 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue index 14c2e9fa828..bf86e0d8b07 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue @@ -1,19 +1,36 @@ <script> /* eslint-disable vue/no-v-html */ -import { GlButton } from '@gitlab/ui'; +import { GlButton, GlSkeletonLoader } from '@gitlab/ui'; import { escape } from 'lodash'; +import { __, sprintf } from '~/locale'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import simplePoll from '../../../lib/utils/simple_poll'; import eventHub from '../../event_hub'; import statusIcon from '../mr_widget_status_icon.vue'; +import rebaseQuery from '../../queries/states/ready_to_merge.query.graphql'; +import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import { deprecatedCreateFlash as Flash } from '../../../flash'; -import { __, sprintf } from '~/locale'; export default { name: 'MRWidgetRebase', + apollo: { + state: { + query: rebaseQuery, + skip() { + return !this.glFeatures.mergeRequestWidgetGraphql; + }, + variables() { + return this.mergeRequestQueryVariables; + }, + update: (data) => data.project.mergeRequest, + }, + }, components: { statusIcon, GlButton, + GlSkeletonLoader, }, + mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin], props: { mr: { type: Object, @@ -26,16 +43,41 @@ export default { }, data() { return { + state: {}, isMakingRequest: false, rebasingError: null, }; }, computed: { + isLoading() { + return this.glFeatures.mergeRequestWidgetGraphql && this.$apollo.queries.state.loading; + }, + rebaseInProgress() { + if (this.glFeatures.mergeRequestWidgetGraphql) { + return this.state.rebaseInProgress; + } + + return this.mr.rebaseInProgress; + }, + canPushToSourceBranch() { + if (this.glFeatures.mergeRequestWidgetGraphql) { + return this.state.userPermissions.pushToSourceBranch; + } + + return this.mr.canPushToSourceBranch; + }, + targetBranch() { + if (this.glFeatures.mergeRequestWidgetGraphql) { + return this.state.targetBranch; + } + + return this.mr.targetBranch; + }, status() { - if (this.mr.rebaseInProgress || this.isMakingRequest) { + if (this.rebaseInProgress || this.isMakingRequest) { return 'loading'; } - if (!this.mr.canPushToSourceBranch && !this.mr.rebaseInProgress) { + if (!this.canPushToSourceBranch && !this.rebaseInProgress) { return 'warning'; } return 'success'; @@ -49,7 +91,7 @@ export default { 'Fast-forward merge is not possible. Rebase the source branch onto %{targetBranch} to allow this merge request to be merged.', ), { - targetBranch: `<span class="label-branch">${escape(this.mr.targetBranch)}</span>`, + targetBranch: `<span class="label-branch">${escape(this.targetBranch)}</span>`, }, false, ); @@ -65,7 +107,7 @@ export default { .then(() => { simplePoll(this.checkRebaseStatus); }) - .catch(error => { + .catch((error) => { this.isMakingRequest = false; if (error.response && error.response.data && error.response.data.merge_error) { @@ -78,8 +120,8 @@ export default { checkRebaseStatus(continuePolling, stopPolling) { this.service .poll() - .then(res => res.data) - .then(res => { + .then((res) => res.data) + .then((res) => { if (res.rebase_in_progress) { continuePolling(); } else { @@ -105,17 +147,30 @@ export default { </script> <template> <div class="mr-widget-body media"> - <status-icon :status="status" :show-disabled-button="showDisabledButton" /> + <div v-if="isLoading" class="gl-w-full mr-conflict-loader"> + <gl-skeleton-loader :width="334" :height="30"> + <rect x="0" y="3" width="24" height="24" rx="4" /> + <rect x="32" y="5" width="302" height="20" rx="4" /> + </gl-skeleton-loader> + </div> + <template v-else> + <status-icon :status="status" :show-disabled-button="showDisabledButton" /> - <div class="rebase-state-find-class-convention media media-body space-children"> - <template v-if="mr.rebaseInProgress || isMakingRequest"> - <span class="bold" data-testid="rebase-message">{{ __('Rebase in progress') }}</span> - </template> - <template v-if="!mr.rebaseInProgress && !mr.canPushToSourceBranch"> - <span class="bold" data-testid="rebase-message" v-html="fastForwardMergeText"></span> - </template> - <template v-if="!mr.rebaseInProgress && mr.canPushToSourceBranch && !isMakingRequest"> + <div class="rebase-state-find-class-convention media media-body space-children"> + <span + v-if="rebaseInProgress || isMakingRequest" + class="gl-font-weight-bold gl-ml-0!" + data-testid="rebase-message" + >{{ __('Rebase in progress') }}</span + > + <span + v-if="!rebaseInProgress && !canPushToSourceBranch" + class="gl-font-weight-bold gl-ml-0!" + data-testid="rebase-message" + v-html="fastForwardMergeText" + ></span> <div + v-if="!rebaseInProgress && canPushToSourceBranch && !isMakingRequest" class="accept-merge-holder clearfix js-toggle-container accept-action media space-children" > <gl-button @@ -126,14 +181,21 @@ export default { > {{ __('Rebase') }} </gl-button> - <span v-if="!rebasingError" class="bold" data-testid="rebase-message">{{ - __( - 'Fast-forward merge is not possible. Rebase the source branch onto the target branch.', - ) + <span + v-if="!rebasingError" + class="gl-font-weight-bold gl-ml-0!" + data-testid="rebase-message" + >{{ + __( + 'Fast-forward merge is not possible. Rebase the source branch onto the target branch.', + ) + }}</span + > + <span v-else class="gl-font-weight-bold danger gl-ml-0!" data-testid="rebase-message">{{ + rebasingError }}</span> - <span v-else class="bold danger" data-testid="rebase-message">{{ rebasingError }}</span> </div> - </template> - </div> + </div> + </template> </div> </template> |