diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components')
12 files changed, 94 insertions, 59 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> |