diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget')
15 files changed, 143 insertions, 93 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue index a5b83167283..386ba2e2d77 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue @@ -1,6 +1,6 @@ <script> import { GlButton } from '@gitlab/ui'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { BV_SHOW_MODAL } from '~/lib/utils/constants'; import { s__ } from '~/locale'; import eventHub from '../../event_hub'; @@ -120,7 +120,11 @@ export default { .then(() => { this.fetchingApprovals = false; }) - .catch(() => createFlash(FETCH_ERROR)); + .catch(() => + createFlash({ + message: FETCH_ERROR, + }), + ); }, methods: { approve() { @@ -131,7 +135,10 @@ export default { this.updateApproval( () => this.service.approveMergeRequest(), - () => createFlash(APPROVE_ERROR), + () => + createFlash({ + message: APPROVE_ERROR, + }), ); }, approveWithAuth(data) { @@ -142,14 +149,19 @@ export default { this.hasApprovalAuthError = true; return; } - createFlash(APPROVE_ERROR); + createFlash({ + message: APPROVE_ERROR, + }); }, ); }, unapprove() { this.updateApproval( () => this.service.unapproveMergeRequest(), - () => createFlash(UNAPPROVE_ERROR), + () => + createFlash({ + message: UNAPPROVE_ERROR, + }), ); }, updateApproval(serviceFn, errFn) { diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue index 55fa24fb51a..07821b01dd5 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue @@ -32,9 +32,9 @@ export default { :href="helpPath" :title="__('About this feature')" target="_blank" - class="d-flex-center pl-1" + class="d-flex-center" > - <gl-icon name="question" /> + <gl-icon name="question-o" class="gl-ml-3" /> </gl-link> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue index 513d88ecab6..671f9cb8e74 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue @@ -1,5 +1,5 @@ <script> -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { visitUrl } from '~/lib/utils/url_utility'; import { __, s__ } from '~/locale'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -128,7 +128,9 @@ export default { } }) .catch(() => { - createFlash(errorMessage); + createFlash({ + message: errorMessage, + }); }) .finally(() => { this.actionInProgress = null; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue index 560a68031ef..4dc8bb0562b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue @@ -1,45 +1,46 @@ <script> -import { GlLink, GlIcon } from '@gitlab/ui'; -import { WARNING, DANGER, WARNING_MESSAGE_CLASS, DANGER_MESSAGE_CLASS } from '../constants'; +import { GlLink, GlAlert } from '@gitlab/ui'; export default { - name: 'MrWidgetAlertMessage', + name: 'MRWidgetAlertMessage', components: { + GlAlert, GlLink, - GlIcon, }, props: { type: { type: String, - required: false, - default: DANGER, - validator: (value) => [WARNING, DANGER].includes(value), + required: true, }, helpPath: { type: String, required: false, default: undefined, }, + dismissible: { + type: Boolean, + required: false, + default: false, + }, }, - computed: { - messageClass() { - if (this.type === WARNING) { - return WARNING_MESSAGE_CLASS; - } else if (this.type === DANGER) { - return DANGER_MESSAGE_CLASS; - } - - return ''; + data() { + return { + isDismissed: false, + }; + }, + methods: { + onDismiss() { + this.isDismissed = true; }, }, }; </script> <template> - <div class="gl-m-3 gl-ml-7" :class="messageClass"> + <gl-alert v-if="!isDismissed" :variant="type" :dismissible="dismissible" @dismiss="onDismiss"> <slot></slot> - <gl-link v-if="helpPath" :href="helpPath" target="_blank"> - <gl-icon :size="16" name="question-o" class="align-middle" /> + <gl-link v-if="helpPath" :href="helpPath" target="_blank" class="gl-label-link"> + <slot name="link-content"></slot> </gl-link> - </div> + </gl-alert> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue index c368399ed6f..f8c4ad69e39 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue @@ -51,7 +51,7 @@ export default { <gl-icon :name="iconName" :size="24" /> </span> - <div class="gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-md-flex-direction-row"> + <div class="gl-display-flex gl-flex-grow-1 gl-flex-direction-column gl-md-flex-direction-row"> <slot name="header"></slot> <div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue index fa46b4b1364..6c162a06161 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue @@ -160,7 +160,7 @@ export default { <div class="ci-widget media"> <template v-if="hasCIError"> <gl-icon name="status_failed" class="gl-text-red-500" :size="24" /> - <p class="gl-flex-fill-1 gl-ml-5 gl-mb-0" data-testid="ci-error-message"> + <p class="gl-flex-grow-1 gl-ml-5 gl-mb-0" data-testid="ci-error-message"> <gl-sprintf :message="$options.errorText"> <template #link="{ content }"> <gl-link :href="mrTroubleshootingDocsPath">{{ content }}</gl-link> @@ -171,7 +171,7 @@ export default { <template v-else-if="!hasPipeline"> <gl-loading-icon size="md" /> <p - class="gl-flex-fill-1 gl-display-flex gl-ml-5 gl-mb-0" + class="gl-flex-grow-1 gl-display-flex gl-ml-5 gl-mb-0" data-testid="monitoring-pipeline-message" > {{ $options.monitoringPipelineText }} diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue index d50d97e3570..9268e426954 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue @@ -1,15 +1,14 @@ <script> -import { GlIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; +import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '../../locale'; export default { i18n: { - removesBranchText: __('%{strongStart}Deletes%{strongEnd} source branch'), + removesBranchText: __('The source branch will be deleted'), tooltipTitle: __('A user with write access to the source branch selected this option'), }, components: { GlIcon, - GlSprintf, }, directives: { GlTooltip: GlTooltipDirective, @@ -20,11 +19,7 @@ export default { <template> <p v-once class="mr-info-list gl-ml-7 gl-pb-5 gl-mb-0"> <span class="status-text"> - <gl-sprintf :message="$options.i18n.removesBranchText"> - <template #strong="{ content }"> - <strong>{{ content }}</strong> - </template> - </gl-sprintf> + {{ $options.i18n.removesBranchText }} </span> <gl-icon v-gl-tooltip.hover diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue index 6331a7d8388..68ffca9cd68 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue @@ -14,8 +14,9 @@ export default { <div class="media-body space-children"> <span class="bold"> {{ - s__(`mrWidget|Pipeline blocked. -The pipeline for this merge request requires a manual action to proceed`) + s__( + `mrWidget|Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.`, + ) }} </span> </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 751f8082e1a..07de525b1fa 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 @@ -22,7 +22,13 @@ import { __ } from '~/locale'; import SmartInterval from '~/smart_interval'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import MergeRequest from '../../../merge_request'; -import { AUTO_MERGE_STRATEGIES, DANGER, INFO, WARNING } from '../../constants'; +import { + AUTO_MERGE_STRATEGIES, + DANGER, + CONFIRM, + WARNING, + MT_MERGE_STRATEGY, +} from '../../constants'; import eventHub from '../../event_hub'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import MergeRequestStore from '../../stores/mr_widget_store'; @@ -191,7 +197,7 @@ export default { }, squashIsSelected() { if (this.glFeatures.mergeRequestWidgetGraphql) { - return this.squashReadOnly ? this.state.squashOnMerge : this.state.squash; + return this.isSquashReadOnly ? this.state.squashOnMerge : this.state.squash; } return this.mr.squashIsSelected; @@ -223,15 +229,11 @@ export default { return PIPELINE_SUCCESS_STATE; }, mergeButtonVariant() { - if (this.status === PIPELINE_FAILED_STATE) { + if (this.status === PIPELINE_FAILED_STATE || this.isPipelineFailed) { return DANGER; } - if (this.status === PIPELINE_PENDING_STATE) { - return INFO; - } - - return PIPELINE_SUCCESS_STATE; + return CONFIRM; }, iconClass() { if (this.shouldRenderMergeTrainHelperText && !this.mr.preventMerge) { @@ -290,6 +292,9 @@ export default { shaMismatchLink() { return this.mr.mergeRequestDiffsPath; }, + showDangerMessageForMergeTrain() { + return this.preferredAutoMergeStrategy === MT_MERGE_STRATEGY && this.isPipelineFailed; + }, }, mounted() { if (this.glFeatures.mergeRequestWidgetGraphql) { @@ -503,7 +508,7 @@ export default { v-if="shouldShowMergeImmediatelyDropdown" v-gl-tooltip.hover.focus="__('Select merge moment')" :disabled="isMergeButtonDisabled" - variant="info" + :variant="mergeButtonVariant" data-qa-selector="merge_moment_dropdown" toggle-class="btn-icon js-merge-moment" > @@ -583,6 +588,14 @@ export default { </gl-sprintf> </span> </div> + + <div + v-if="showDangerMessageForMergeTrain" + class="gl-mt-5 gl-text-gray-500" + data-testid="failed-pipeline-merge-train-text" + > + {{ __('The latest pipeline for this merge request did not complete successfully.') }} + </div> </div> </div> <merge-train-helper-text 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 f0c624c5d8d..a1eb77479bd 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 @@ -2,7 +2,7 @@ import { GlButton } from '@gitlab/ui'; import { produce } from 'immer'; import $ from 'jquery'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { __ } from '~/locale'; import MergeRequest from '~/merge_request'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -76,7 +76,9 @@ export default { }, ) { if (errors?.length) { - createFlash(__('Something went wrong. Please try again.')); + createFlash({ + message: __('Something went wrong. Please try again.'), + }); return; } @@ -121,11 +123,18 @@ export default { }, }, }) => { - createFlash(__('The merge request can now be merged.'), 'notice'); + createFlash({ + message: __('The merge request can now be merged.'), + type: 'notice', + }); $('.merge-request .detail-page-description .title').text(title); }, ) - .catch(() => createFlash(__('Something went wrong. Please try again.'))) + .catch(() => + createFlash({ + message: __('Something went wrong. Please try again.'), + }), + ) .finally(() => { this.isMakingRequest = false; }); @@ -144,7 +153,9 @@ export default { }) .catch(() => { this.isMakingRequest = false; - createFlash(__('Something went wrong. Please try again.')); + createFlash({ + message: __('Something went wrong. Please try again.'), + }); }); } }, diff --git a/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue index 25f339b362f..2ba945a3ecf 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue @@ -107,7 +107,7 @@ export default { <template #header> <div data-testid="terraform-header-text" - class="gl-flex-fill-1 gl-display-flex gl-flex-direction-column" + class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column" > <p v-if="validPlanCountText" class="gl-m-0"> <gl-sprintf :message="validPlanCountText"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue b/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue index 25e3dae92e8..427ab0842ea 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue @@ -71,8 +71,8 @@ export default { <gl-icon :name="iconType" :size="16" data-testid="change-type-icon" /> </span> - <div class="gl-display-flex gl-flex-fill-1 gl-flex-direction-column flex-md-row gl-pl-3"> - <div class="gl-flex-fill-1 gl-display-flex gl-flex-direction-column gl-pr-3"> + <div class="gl-display-flex gl-flex-grow-1 gl-flex-direction-column flex-md-row gl-pl-3"> + <div class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-pr-3"> <p class="gl-mb-3 gl-line-height-normal"> <gl-sprintf :message="reportHeaderText"> <template #name> diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js index 822fb58db60..d067e531fad 100644 --- a/app/assets/javascripts/vue_merge_request_widget/constants.js +++ b/app/assets/javascripts/vue_merge_request_widget/constants.js @@ -4,9 +4,7 @@ export const SUCCESS = 'success'; export const WARNING = 'warning'; export const DANGER = 'danger'; export const INFO = 'info'; - -export const WARNING_MESSAGE_CLASS = 'warning_message'; -export const DANGER_MESSAGE_CLASS = 'danger_message'; +export const CONFIRM = 'confirm'; export const MWPS_MERGE_STRATEGY = 'merge_when_pipeline_succeeds'; export const MTWPS_MERGE_STRATEGY = 'add_to_merge_train_when_pipeline_succeeds'; diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue index 0cfb059b0ce..e9dcf494099 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue @@ -10,7 +10,7 @@ import notify from '~/lib/utils/notify'; import { sprintf, s__, __ } from '~/locale'; import Project from '~/pages/projects/project'; import SmartInterval from '~/smart_interval'; -import { deprecatedCreateFlash as createFlash } from '../flash'; +import createFlash from '../flash'; import { setFaviconOverlay } from '../lib/utils/favicon'; import GroupedAccessibilityReportsApp from '../reports/accessibility_report/grouped_accessibility_reports_app.vue'; import GroupedCodequalityReportsApp from '../reports/codequality_report/grouped_codequality_reports_app.vue'; @@ -198,6 +198,9 @@ export default { formattedHumanAccess() { return (this.mr.humanAccess || '').toLowerCase(); }, + hasAlerts() { + return this.mr.mergeError || this.showMergePipelineForkWarning; + }, }, watch: { state(newVal, oldVal) { @@ -214,7 +217,9 @@ export default { this.initWidget(data); }) .catch(() => - createFlash(__('Unable to load the merge request widget. Try reloading the page.')), + createFlash({ + message: __('Unable to load the merge request widget. Try reloading the page.'), + }), ); }, beforeDestroy() { @@ -295,7 +300,11 @@ export default { cb.call(null, data); } }) - .catch(() => createFlash(__('Something went wrong. Please try again.'))); + .catch(() => + createFlash({ + message: __('Something went wrong. Please try again.'), + }), + ); }, setFaviconHelper() { if (this.mr.ciStatusFaviconPath) { @@ -349,11 +358,11 @@ export default { .catch(() => this.throwDeploymentsError()); }, throwDeploymentsError() { - createFlash( - __( + createFlash({ + message: __( 'Something went wrong while fetching the environments for this merge request. Please try again.', ), - ); + }); }, fetchActionsContent() { this.service @@ -367,7 +376,11 @@ export default { Project.initRefSwitcher(); } }) - .catch(() => createFlash(__('Something went wrong. Please try again.'))); + .catch(() => + createFlash({ + message: __('Something went wrong. Please try again.'), + }), + ); }, handleNotification(data) { if (data.ci_status === this.mr.ciStatus) return; @@ -432,7 +445,12 @@ export default { </script> <template> <div v-if="isLoaded" class="mr-state-widget gl-mt-3"> - <mr-widget-header :mr="mr" /> + <header class="gl-rounded-base gl-border-solid gl-border-1 gl-border-gray-100"> + <mr-widget-alert-message v-if="shouldRenderCollaborationStatus" type="info"> + {{ s__('mrWidget|Members who can merge are allowed to add commits.') }} + </mr-widget-alert-message> + <mr-widget-header :mr="mr" /> + </header> <mr-widget-suggest-pipeline v-if="shouldSuggestPipelines" data-testid="mr-suggest-pipeline" @@ -456,10 +474,32 @@ export default { :service="service" /> <div class="mr-section-container mr-widget-workflow"> + <div v-if="hasAlerts" class="gl-overflow-hidden mr-widget-alert-container"> + <mr-widget-alert-message v-if="mr.mergeError" type="danger" dismissible> + <span v-safe-html="mergeError"></span> + </mr-widget-alert-message> + <mr-widget-alert-message + v-if="showMergePipelineForkWarning" + type="warning" + :help-path="mr.mergeRequestPipelinesHelpPath" + > + {{ + s__( + 'mrWidget|If the last pipeline ran in the fork project, it may be inaccurate. Before merge, we advise running a pipeline in this project.', + ) + }} + <template #link-content> + {{ __('Learn more') }} + </template> + </mr-widget-alert-message> + </div> <!-- <extensions-container :mr="mr" /> --> <grouped-codequality-reports-app v-if="shouldRenderCodeQuality" :base-path="mr.codeclimate.base_path" + :head-path="mr.codeclimate.head_path" + :head-blob-path="mr.headBlobPath" + :base-blob-path="mr.baseBlobPath" :codequality-reports-path="mr.codequalityReportsPath" :codequality-help-path="mr.codequalityHelpPath" /> @@ -492,34 +532,12 @@ export default { <component :is="componentName" :mr="mr" :service="service" /> <div class="mr-widget-info"> - <section v-if="shouldRenderCollaborationStatus" class="mr-info-list mr-links"> - <p> - {{ s__('mrWidget|Allows commits from members who can merge to the target branch') }} - </p> - </section> - <mr-widget-related-links v-if="shouldRenderRelatedLinks" :state="mr.state" :related-links="mr.relatedLinks" /> - <mr-widget-alert-message - v-if="showMergePipelineForkWarning" - type="warning" - :help-path="mr.mergeRequestPipelinesHelpPath" - > - {{ - s__( - 'mrWidget|If the last pipeline ran in the fork project, it may be inaccurate. Before merge, we advise running a pipeline in this project.', - ) - }} - </mr-widget-alert-message> - - <mr-widget-alert-message v-if="mr.mergeError" type="danger"> - <span v-safe-html="mergeError"></span> - </mr-widget-alert-message> - <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" /> </div> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js index 9f85140bab8..4cc2f423d73 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js @@ -44,7 +44,6 @@ export default class MergeRequestStore { this.sourceBranch = data.source_branch; this.sourceBranchProtected = data.source_branch_protected; this.conflictsDocsPath = data.conflicts_docs_path; - this.mergeRequestPipelinesHelpPath = data.merge_request_pipelines_docs_path; this.mergeTrainWhenPipelineSucceedsDocsPath = data.merge_train_when_pipeline_succeeds_docs_path; this.commitMessage = data.default_merge_commit_message; this.shortMergeCommitSha = data.short_merged_commit_sha; |