diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components')
10 files changed, 375 insertions, 61 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js b/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js index 66de4f8b682..29d067a46a6 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js @@ -6,6 +6,7 @@ export const RUNNING = 'running'; export const SUCCESS = 'success'; export const FAILED = 'failed'; export const CANCELED = 'canceled'; +export const SKIPPED = 'skipped'; // ACTION STATUSES export const STOPPING = 'stopping'; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue index 2f922b990d9..390469dec24 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue @@ -4,7 +4,15 @@ import { __ } from '~/locale'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import MemoryUsage from './memory_usage.vue'; -import { MANUAL_DEPLOY, WILL_DEPLOY, RUNNING, SUCCESS, FAILED, CANCELED } from './constants'; +import { + MANUAL_DEPLOY, + WILL_DEPLOY, + RUNNING, + SUCCESS, + FAILED, + CANCELED, + SKIPPED, +} from './constants'; export default { name: 'DeploymentInfo', @@ -38,6 +46,7 @@ export default { [SUCCESS]: __('Deployed to'), [FAILED]: __('Failed to deploy to'), [CANCELED]: __('Canceled deployment to'), + [SKIPPED]: __('Skipped deployment to'), }, computed: { deployTimeago() { diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index d5fdbe726e9..6628ab7be83 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -7,12 +7,14 @@ import { GlDropdownSectionHeader, GlDropdownItem, GlTooltipDirective, + GlModalDirective, } from '@gitlab/ui'; import { n__, s__, sprintf } from '~/locale'; import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility'; import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import MrWidgetIcon from './mr_widget_icon.vue'; +import MrWidgetHowToMergeModal from './mr_widget_how_to_merge_modal.vue'; export default { name: 'MRWidgetHeader', @@ -20,6 +22,7 @@ export default { clipboardButton, TooltipOnTruncate, MrWidgetIcon, + MrWidgetHowToMergeModal, GlButton, GlDropdown, GlDropdownSectionHeader, @@ -27,6 +30,7 @@ export default { }, directives: { GlTooltip: GlTooltipDirective, + GlModalDirective, }, props: { mr: { @@ -82,6 +86,9 @@ export default { ) : ''; }, + isFork() { + return this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath; + }, }, }; </script> @@ -140,13 +147,22 @@ export default { </gl-button> </span> <gl-button + v-gl-modal-directive="'modal-merge-info'" :disabled="mr.sourceBranchRemoved" - data-target="#modal_merge_info" - data-toggle="modal" class="js-check-out-branch gl-mr-3" > {{ s__('mrWidget|Check out branch') }} </gl-button> + <mr-widget-how-to-merge-modal + :is-fork="isFork" + :can-merge="mr.canMerge" + :source-branch="mr.sourceBranch" + :source-project="mr.sourceProject" + :source-project-path="mr.sourceProjectFullPath" + :target-branch="mr.targetBranch" + :source-project-default-url="mr.sourceProjectDefaultUrl" + :reviewing-docs-path="mr.reviewingDocsPath" + /> </template> <gl-dropdown v-gl-tooltip diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue new file mode 100644 index 00000000000..785e8ef8e8f --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue @@ -0,0 +1,172 @@ +<script> +/* eslint-disable @gitlab/require-i18n-strings */ +import { GlModal, GlLink, GlSprintf } from '@gitlab/ui'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import { __ } from '~/locale'; + +export default { + i18n: { + steps: { + step1: { + label: __('Step 1.'), + help: __('Fetch and check out the branch for this merge request'), + }, + step2: { + label: __('Step 2.'), + help: __('Review the changes locally'), + }, + step3: { + label: __('Step 3.'), + help: __('Merge the branch and fix any conflicts that come up'), + }, + step4: { + label: __('Step 4.'), + help: __('Push the result of the merge to GitLab'), + }, + }, + copyCommands: __('Copy commands'), + tip: __( + '%{strongStart}Tip:%{strongEnd} You can also checkout merge requests locally by %{linkStart}following these guidelines%{linkEnd}', + ), + title: __('Check out, review, and merge locally'), + }, + components: { + GlModal, + ClipboardButton, + GlLink, + GlSprintf, + }, + props: { + canMerge: { + type: Boolean, + required: false, + default: false, + }, + isFork: { + type: Boolean, + required: false, + default: false, + }, + sourceBranch: { + type: String, + required: false, + default: '', + }, + sourceProjectPath: { + type: String, + required: false, + default: '', + }, + targetBranch: { + type: String, + required: false, + default: '', + }, + sourceProjectDefaultUrl: { + type: String, + required: false, + default: '', + }, + reviewingDocsPath: { + type: String, + required: false, + default: null, + }, + }, + computed: { + mergeInfo1() { + return this.isFork + ? `git fetch "${this.sourceProjectDefaultUrl}" ${this.sourceBranch}\ngit checkout -b "${this.sourceProjectPath}-${this.sourceBranch}" FETCH_HEAD` + : `git fetch origin\ngit checkout -b "${this.sourceBranch}" "origin/${this.sourceBranch}"`; + }, + mergeInfo2() { + return this.isFork + ? `git fetch origin\ngit checkout "${this.targetBranch}"\ngit merge --no-ff "${this.sourceProjectPath}-${this.sourceBranch}"` + : `git fetch origin\ngit checkout "${this.targetBranch}"\ngit merge --no-ff "${this.sourceBranch}"`; + }, + mergeInfo3() { + return this.canMerge + ? `git push origin "${this.targetBranch}"` + : __('Note that pushing to GitLab requires write access to this repository.'); + }, + }, +}; +</script> + +<template> + <gl-modal + modal-id="modal-merge-info" + :no-enforce-focus="true" + :title="$options.i18n.title" + no-fade + hide-footer + > + <p> + <strong> + {{ $options.i18n.steps.step1.label }} + </strong> + {{ $options.i18n.steps.step1.help }} + </p> + <div class="gl-display-flex"> + <pre class="gl-overflow-scroll gl-w-full" data-testid="how-to-merge-instructions">{{ + mergeInfo1 + }}</pre> + <clipboard-button + :text="mergeInfo1" + :title="$options.i18n.copyCommands" + class="gl-shadow-none! gl-bg-transparent! gl-flex-shrink-0" + /> + </div> + + <p> + <strong> + {{ $options.i18n.steps.step2.label }} + </strong> + {{ $options.i18n.steps.step2.help }} + </p> + <p> + <strong> + {{ $options.i18n.steps.step3.label }} + </strong> + {{ $options.i18n.steps.step3.help }} + </p> + <div class="gl-display-flex"> + <pre class="gl-overflow-scroll gl-w-full" data-testid="how-to-merge-instructions">{{ + mergeInfo2 + }}</pre> + <clipboard-button + :text="mergeInfo2" + :title="$options.i18n.copyCommands" + class="gl-shadow-none! gl-bg-transparent! gl-flex-shrink-0" + /> + </div> + <p> + <strong> + {{ $options.i18n.steps.step4.label }} + </strong> + {{ $options.i18n.steps.step4.help }} + </p> + <div class="gl-display-flex"> + <pre class="gl-overflow-scroll gl-w-full" data-testid="how-to-merge-instructions">{{ + mergeInfo3 + }}</pre> + <clipboard-button + :text="mergeInfo3" + :title="$options.i18n.copyCommands" + class="gl-shadow-none! gl-bg-transparent! gl-flex-shrink-0" + /> + </div> + <p v-if="reviewingDocsPath"> + <gl-sprintf :message="$options.i18n.tip"> + <template #strong="{ content }"> + <strong>{{ content }}</strong> + </template> + <template #link="{ content }"> + <gl-link class="gl-display-inline-block" :href="reviewingDocsPath" target="_blank">{{ + content + }}</gl-link> + </template> + </gl-sprintf> + </p> + </gl-modal> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue index 53bf9d5ab6f..1727383ea2c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue @@ -1,8 +1,15 @@ <script> +import { GlButton, GlModalDirective } from '@gitlab/ui'; import { sprintf, s__ } from '~/locale'; export default { name: 'MRWidgetMergeHelp', + components: { + GlButton, + }, + directives: { + GlModalDirective, + }, props: { missingBranch: { type: String, @@ -31,13 +38,12 @@ export default { {{ s__('mrWidget|You can merge this merge request manually using the') }} </template> - <button - type="button" - class="btn-link btn-blank js-open-modal-help" - data-toggle="modal" - data-target="#modal_merge_info" + <gl-button + v-gl-modal-directive="'modal-merge-info'" + variant="link" + class="gl-mt-n2 js-open-modal-help" > {{ s__('mrWidget|command line') }} - </button> + </gl-button> </section> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue index 55efd7e7d3b..dffe3cab904 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue @@ -1,7 +1,6 @@ <script> import { isNumber } from 'lodash'; import ArtifactsApp from './artifacts_list_app.vue'; -import Deployment from './deployment/deployment.vue'; import MrWidgetContainer from './mr_widget_container.vue'; import MrWidgetPipeline from './mr_widget_pipeline.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -18,7 +17,7 @@ export default { name: 'MrWidgetPipelineContainer', components: { ArtifactsApp, - Deployment, + Deployment: () => import('./deployment/deployment.vue'), MrWidgetContainer, MrWidgetPipeline, MergeTrainPositionIndicator: () => diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue index 82566682bca..bc23ca6b1fc 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue @@ -1,10 +1,11 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlButton, GlLoadingIcon } from '@gitlab/ui'; import ciIcon from '../../vue_shared/components/ci_icon.vue'; export default { components: { ciIcon, + GlButton, GlLoadingIcon, }, props: { @@ -32,21 +33,23 @@ export default { }; </script> <template> - <div class="d-flex align-self-start"> + <div class="gl-display-flex gl-align-self-start"> <div class="square s24 h-auto d-flex-center gl-mr-3"> - <div v-if="isLoading" class="mr-widget-icon d-inline-flex"> - <gl-loading-icon size="md" class="mr-loading-icon d-inline-flex" /> + <div v-if="isLoading" class="mr-widget-icon gl-display-inline-flex"> + <gl-loading-icon size="md" class="mr-loading-icon gl-display-inline-flex" /> </div> <ci-icon v-else :status="statusObj" :size="24" /> </div> - <button + <gl-button v-if="showDisabledButton" type="button" - class="js-disabled-merge-button btn btn-success btn-sm" - disabled="true" + category="primary" + variant="success" + class="js-disabled-merge-button" + :disabled="true" > {{ s__('mrWidget|Merge') }} - </button> + </gl-button> </div> </template> 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> 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 6489569cf68..8511797286d 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 @@ -2,6 +2,9 @@ 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'; export default { name: 'MRWidgetMissingBranch', @@ -12,15 +15,38 @@ export default { GlIcon, statusIcon, }, + mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin], + apollo: { + state: { + query: missingBranchQuery, + skip() { + return !this.glFeatures.mergeRequestWidgetGraphql; + }, + variables() { + return this.mergeRequestQueryVariables; + }, + update: data => data.project.mergeRequest, + }, + }, props: { mr: { type: Object, required: true, }, }, + data() { + return { state: {} }; + }, computed: { + sourceBranchRemoved() { + if (this.glFeatures.mergeRequestWidgetGraphql) { + return !this.state.sourceBranchExists; + } + + return this.mr.sourceBranchRemoved; + }, missingBranchName() { - return this.mr.sourceBranchRemoved ? 'source' : 'target'; + return this.sourceBranchRemoved ? 'source' : 'target'; }, missingBranchNameMessage() { return sprintf( @@ -49,7 +75,7 @@ export default { <div class="media-body space-children"> <span class="bold js-branch-text"> - <span class="capitalize"> {{ missingBranchName }} </span> + <span class="capitalize" data-testid="missingBranchName"> {{ missingBranchName }} </span> {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }} <gl-icon v-gl-tooltip :title="message" :aria-label="message" name="question-o" /> </span> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue index ff0d065c71d..1c9909e7178 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue @@ -1,10 +1,11 @@ <script> -import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlIcon, GlTooltipDirective, GlFormCheckbox } from '@gitlab/ui'; import { SQUASH_BEFORE_MERGE } from '../../i18n'; export default { components: { GlIcon, + GlFormCheckbox, }, directives: { GlTooltip: GlTooltipDirective, @@ -32,32 +33,23 @@ export default { tooltipTitle() { return this.isDisabled ? this.$options.i18n.tooltipTitle : null; }, - tooltipFocusable() { - return this.isDisabled ? '0' : null; - }, }, }; </script> <template> - <div class="inline"> - <label + <div class="gl-display-flex gl-align-items-center"> + <gl-form-checkbox v-gl-tooltip - :class="{ 'gl-text-gray-400': isDisabled }" - :tabindex="tooltipFocusable" - data-testid="squashLabel" + :checked="value" + :disabled="isDisabled" + name="squash" + class="qa-squash-checkbox js-squash-checkbox gl-mb-0 gl-mr-2" :title="tooltipTitle" + @change="checked => $emit('input', checked)" > - <input - :checked="value" - :disabled="isDisabled" - type="checkbox" - name="squash" - class="qa-squash-checkbox js-squash-checkbox" - @change="$emit('input', $event.target.checked)" - /> {{ $options.i18n.checkboxLabel }} - </label> + </gl-form-checkbox> <a v-if="helpPath" v-gl-tooltip |