diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/states')
12 files changed, 139 insertions, 65 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue index 20ac8f5a467..428641a1109 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue @@ -2,14 +2,15 @@ import { GlLoadingIcon, GlSkeletonLoader } from '@gitlab/ui'; import autoMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/auto_merge'; import autoMergeEnabledQuery from 'ee_else_ce/vue_merge_request_widget/queries/states/auto_merge_enabled.query.graphql'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { __ } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { deprecatedCreateFlash as Flash } from '../../../flash'; -import statusIcon from '../mr_widget_status_icon.vue'; -import MrWidgetAuthor from '../mr_widget_author.vue'; -import eventHub from '../../event_hub'; import { AUTO_MERGE_STRATEGIES } from '../../constants'; -import { __ } from '~/locale'; +import eventHub from '../../event_hub'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; +import MrWidgetAuthor from '../mr_widget_author.vue'; +import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'MRWidgetAutoMergeEnabled', @@ -53,7 +54,11 @@ export default { }, computed: { loading() { - return this.glFeatures.mergeRequestWidgetGraphql && this.$apollo.queries.state.loading; + return ( + this.glFeatures.mergeRequestWidgetGraphql && + this.$apollo.queries.state.loading && + Object.keys(this.state).length === 0 + ); }, mergeUser() { if (this.glFeatures.mergeRequestWidgetGraphql) { @@ -78,7 +83,7 @@ export default { canRemoveSourceBranch() { const { currentUserId } = this.mr; const mergeUserId = this.glFeatures.mergeRequestWidgetGraphql - ? this.state.mergeUser?.id + ? getIdFromGraphQLId(this.state.mergeUser?.id) : this.mr.mergeUserId; const canRemoveSourceBranch = this.glFeatures.mergeRequestWidgetGraphql ? this.state.userPermissions.removeSourceBranch @@ -96,7 +101,11 @@ export default { .cancelAutomaticMerge() .then((res) => res.data) .then((data) => { - eventHub.$emit('UpdateWidgetData', data); + if (this.glFeatures.mergeRequestWidgetGraphql) { + eventHub.$emit('MRWidgetUpdateRequested'); + } else { + eventHub.$emit('UpdateWidgetData', data); + } }) .catch(() => { this.isCancellingAutoMerge = false; @@ -119,6 +128,11 @@ export default { eventHub.$emit('MRWidgetUpdateRequested'); } }) + .then(() => { + if (this.glFeatures.mergeRequestWidgetGraphql) { + this.$apollo.queries.state.refetch(); + } + }) .catch(() => { this.isRemovingSourceBranch = false; Flash(__('Something went wrong. Please try again.')); diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue index a2771bc4bfb..5f8630bf7b3 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue @@ -2,9 +2,9 @@ import { GlLoadingIcon, GlButton } from '@gitlab/ui'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import eventHub from '../../event_hub'; -import statusIcon from '../mr_widget_status_icon.vue'; -import autoMergeFailedQuery from '../../queries/states/auto_merge_failed.query.graphql'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; +import autoMergeFailedQuery from '../../queries/states/auto_merge_failed.query.graphql'; +import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'MRWidgetAutoMergeFailed', 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 3d5daa4979b..2335e2984e4 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,14 @@ <script> +import { GlButton, GlModalDirective, GlSkeletonLoader } from '@gitlab/ui'; 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'; +import StatusIcon from '../mr_widget_status_icon.vue'; export default { name: 'MRWidgetConflicts', diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue index a5ec095b8ec..e973a2350a3 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue @@ -1,9 +1,9 @@ <script> import { GlButton } from '@gitlab/ui'; -import { n__ } from '~/locale'; import { stripHtml } from '~/lib/utils/text_utility'; -import statusIcon from '../mr_widget_status_icon.vue'; +import { sprintf, s__, n__ } from '~/locale'; import eventHub from '../../event_hub'; +import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'MRWidgetFailedToMerge', @@ -31,7 +31,15 @@ export default { computed: { mergeError() { - return this.mr.mergeError ? stripHtml(this.mr.mergeError, ' ').trim() : ''; + const mergeError = this.mr.mergeError ? stripHtml(this.mr.mergeError, ' ').trim() : ''; + + return sprintf( + s__('mrWidget|%{mergeError}.'), + { + mergeError, + }, + false, + ); }, timerText() { return n__( diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue index 9d646dbfb3e..043d14e32a2 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue @@ -3,10 +3,12 @@ import { GlLoadingIcon, GlButton, GlTooltipDirective } from '@gitlab/ui'; import { deprecatedCreateFlash as Flash } from '~/flash'; import { s__, __ } from '~/locale'; +import { OPEN_REVERT_MODAL, OPEN_CHERRY_PICK_MODAL } from '~/projects/commit/constants'; +import modalEventHub from '~/projects/commit/event_hub'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import eventHub from '../../event_hub'; import MrWidgetAuthorTime from '../mr_widget_author_time.vue'; import statusIcon from '../mr_widget_status_icon.vue'; -import eventHub from '../../event_hub'; export default { name: 'MRWidgetMerged', @@ -77,6 +79,9 @@ export default { return s__('mrWidget|Cherry-pick'); }, }, + mounted() { + document.dispatchEvent(new CustomEvent('merged:UpdateActions')); + }, methods: { removeSourceBranch() { this.isMakingRequest = true; @@ -98,6 +103,12 @@ export default { Flash(__('Something went wrong. Please try again.')); }); }, + openRevertModal() { + modalEventHub.$emit(OPEN_REVERT_MODAL); + }, + openCherryPickModal() { + modalEventHub.$emit(OPEN_CHERRY_PICK_MODAL); + }, }, }; </script> @@ -119,9 +130,7 @@ export default { size="small" category="secondary" variant="warning" - href="#modal-revert-commit" - data-toggle="modal" - data-container="body" + @click="openRevertModal" > {{ revertLabel }} </gl-button> @@ -142,9 +151,7 @@ export default { v-gl-tooltip.hover :title="cherryPickTitle" size="small" - href="#modal-cherry-pick-commit" - data-toggle="modal" - data-container="body" + @click="openCherryPickModal" > {{ cherryPickLabel }} </gl-button> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue index 3f68979bc0e..f91350d4a82 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue @@ -1,10 +1,10 @@ <script> import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { sprintf, s__ } from '~/locale'; -import statusIcon from '../mr_widget_status_icon.vue'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import missingBranchQuery from '../../queries/states/missing_branch.query.graphql'; +import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'MRWidgetMissingBranch', 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 bf86e0d8b07..d15794c71b1 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 @@ -4,12 +4,12 @@ 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 { deprecatedCreateFlash as Flash } from '../../../flash'; 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 rebaseQuery from '../../queries/states/rebase.query.graphql'; +import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'MRWidgetRebase', @@ -159,7 +159,7 @@ export default { <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!" + class="gl-font-weight-bold" data-testid="rebase-message" >{{ __('Rebase in progress') }}</span > @@ -181,17 +181,12 @@ export default { > {{ __('Rebase') }} </gl-button> - <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">{{ + <span v-if="!rebasingError" class="gl-font-weight-bold" 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" data-testid="rebase-message">{{ rebasingError }}</span> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue index 14a29483d3c..f0259a975db 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue @@ -1,9 +1,13 @@ <script> /* eslint-disable vue/no-v-html */ +import { GlButton } from '@gitlab/ui'; import emptyStateSVG from 'icons/_mr_widget_empty_state.svg'; export default { name: 'MRWidgetNothingToMerge', + components: { + GlButton, + }, props: { mr: { type: Object, @@ -25,11 +29,13 @@ export default { <span v-html="emptyStateSVG"></span> </div> <div class="text col-md-7 order-md-first col-12"> - <span>{{ - s__( - 'mrWidgetNothingToMerge|Merge requests are a place to propose changes you have made to a project and discuss those changes with others.', - ) - }}</span> + <p class="highlight"> + {{ + s__( + 'mrWidgetNothingToMerge|Merge requests are a place to propose changes you have made to a project and discuss those changes with others.', + ) + }} + </p> <p> {{ s__( @@ -45,9 +51,14 @@ export default { }} </p> <div> - <a v-if="mr.newBlobPath" :href="mr.newBlobPath" class="btn btn-inverted btn-success">{{ - __('Create file') - }}</a> + <gl-button + v-if="mr.newBlobPath" + :href="mr.newBlobPath" + category="secondary" + variant="success" + > + {{ __('Create file') }} + </gl-button> </div> </div> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue index 5f56157cb89..b5d2f91c637 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue @@ -1,11 +1,26 @@ <script> +import { GlLink, GlSprintf } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { s__ } from '~/locale'; import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'PipelineFailed', components: { + GlLink, + GlSprintf, statusIcon, }, + computed: { + troubleshootingDocsPath() { + return helpPagePath('ci/troubleshooting', { anchor: 'merge-request-status-messages' }); + }, + }, + i18n: { + failedMessage: s__( + `mrWidget|The pipeline for this merge request did not complete. Push a new commit to fix the failure, or check the %{linkStart}troubleshooting documentation%{linkEnd} to see other possible actions.`, + ), + }, }; </script> @@ -14,10 +29,13 @@ export default { <status-icon :show-disabled-button="true" status="warning" /> <div class="media-body space-children"> <span class="bold"> - {{ - s__(`mrWidget|The pipeline for this merge request failed. -Please retry the job or push a new commit to fix the failure`) - }} + <gl-sprintf :message="$options.i18n.failedMessage"> + <template #link="{ content }"> + <gl-link :href="troubleshootingDocsPath" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> </span> </div> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue index a890b176df0..690b6e9c462 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue @@ -1,5 +1,4 @@ <script> -import { isEmpty } from 'lodash'; import { GlIcon, GlButton, @@ -11,23 +10,24 @@ import { GlTooltipDirective, GlSkeletonLoader, } from '@gitlab/ui'; +import { isEmpty } from 'lodash'; import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge'; import readyToMergeQuery from 'ee_else_ce/vue_merge_request_widget/queries/states/ready_to_merge.query.graphql'; +import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; import simplePoll from '~/lib/utils/simple_poll'; import { __ } from '~/locale'; -import MergeRequest from '../../../merge_request'; -import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import { deprecatedCreateFlash as Flash } from '../../../flash'; +import MergeRequest from '../../../merge_request'; +import { AUTO_MERGE_STRATEGIES, DANGER, INFO, WARNING } from '../../constants'; +import eventHub from '../../event_hub'; +import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import MergeRequestStore from '../../stores/mr_widget_store'; import statusIcon from '../mr_widget_status_icon.vue'; -import eventHub from '../../event_hub'; -import SquashBeforeMerge from './squash_before_merge.vue'; -import CommitsHeader from './commits_header.vue'; import CommitEdit from './commit_edit.vue'; import CommitMessageDropdown from './commit_message_dropdown.vue'; -import { AUTO_MERGE_STRATEGIES, DANGER, INFO, WARNING } from '../../constants'; +import CommitsHeader from './commits_header.vue'; +import SquashBeforeMerge from './squash_before_merge.vue'; const PIPELINE_RUNNING_STATE = 'running'; const PIPELINE_FAILED_STATE = 'failed'; @@ -53,10 +53,13 @@ export default { result({ data }) { this.state = { ...data.project.mergeRequest, - mergeRequestsFfOnlyEnabled: data.mergeRequestsFfOnlyEnabled, - onlyAllowMergeIfPipelineSucceeds: data.onlyAllowMergeIfPipelineSucceeds, + mergeRequestsFfOnlyEnabled: data.project.mergeRequestsFfOnlyEnabled, + onlyAllowMergeIfPipelineSucceeds: data.project.onlyAllowMergeIfPipelineSucceeds, }; - this.removeSourceBranch = data.project.mergeRequest.shouldRemoveSourceBranch; + this.removeSourceBranch = + data.project.mergeRequest.shouldRemoveSourceBranch || + data.project.mergeRequest.forceRemoveSourceBranch || + false; this.commitMessage = data.project.mergeRequest.defaultMergeCommitMessage; this.squashBeforeMerge = data.project.mergeRequest.squashOnMerge; this.isSquashReadOnly = data.project.squashReadOnly; @@ -277,7 +280,20 @@ export default { return this.mr.mergeRequestDiffsPath; }, }, + mounted() { + if (this.glFeatures.mergeRequestWidgetGraphql) { + eventHub.$on('ApprovalUpdated', this.updateGraphqlState); + } + }, + beforeDestroy() { + if (this.glFeatures.mergeRequestWidgetGraphql) { + eventHub.$off('ApprovalUpdated', this.updateGraphqlState); + } + }, methods: { + updateGraphqlState() { + return this.$apollo.queries.state.refetch(); + }, updateMergeCommitMessage(includeDescription) { const commitMessage = this.glFeatures.mergeRequestWidgetGraphql ? this.state.defaultMergeCommitMessage @@ -326,6 +342,10 @@ export default { } else if (hasError) { eventHub.$emit('FailedToMerge', data.merge_error); } + + if (this.glFeatures.mergeRequestWidgetGraphql) { + this.updateGraphqlState(); + } }) .catch(() => { this.isMakingRequest = false; @@ -442,6 +462,7 @@ export default { :variant="mergeButtonVariant" :disabled="isMergeButtonDisabled" :loading="isMakingRequest" + data-qa-selector="merge_button" @click="handleMergeButtonClick(isAutoMergeAvailable)" >{{ mergeButtonText }}</gl-button > @@ -532,7 +553,7 @@ export default { </div> <merge-train-helper-text v-if="shouldRenderMergeTrainHelperText" - :pipeline-id="pipeline.id" + :pipeline-id="pipelineId" :pipeline-link="pipeline.path" :merge-train-length="stateData.mergeTrainsCount" :merge-train-when-pipeline-succeeds-docs-path="mr.mergeTrainWhenPipelineSucceedsDocsPath" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue index 78e69b9ff9b..329964d009a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue @@ -1,7 +1,7 @@ <script> import { GlButton } from '@gitlab/ui'; -import statusIcon from '../mr_widget_status_icon.vue'; import notesEventHub from '~/notes/event_hub'; +import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'UnresolvedDiscussions', diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue index 3f1db815f95..af305815381 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue @@ -1,17 +1,17 @@ <script> -import $ from 'jquery'; import { GlButton } from '@gitlab/ui'; import { produce } from 'immer'; -import { __ } from '~/locale'; +import $ from 'jquery'; import { deprecatedCreateFlash as createFlash } from '~/flash'; +import { __ } from '~/locale'; import MergeRequest from '~/merge_request'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import eventHub from '../../event_hub'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import getStateQuery from '../../queries/get_state.query.graphql'; import workInProgressQuery from '../../queries/states/work_in_progress.query.graphql'; import removeWipMutation from '../../queries/toggle_wip.mutation.graphql'; import StatusIcon from '../mr_widget_status_icon.vue'; -import eventHub from '../../event_hub'; export default { name: 'WorkInProgress', |