Add latest changes from gitlab-org/gitlab@master

2 files changed, 96 insertions, 16 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_failed_pipeline_confirmation_dialog.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_failed_pipeline_confirmation_dialog.vue
new file mode 100644
index 00000000000..7279ad971be
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_failed_pipeline_confirmation_dialog.vue
@@ -0,0 +1,66 @@
+<script>
+import { GlModal, GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  name: 'MergeFailedPipelineConfirmationDialog',
+  i18n: {
+    primary: __('Merge unverified changes'),
+    cancel: __('Cancel'),
+    info: __(
+      'The latest pipeline for this merge request did not succeed. The latest changes are unverified.',
+    ),
+    confirmation: __('Are you sure you want to attempt to merge?'),
+    title: __('Merge unverified changes?'),
+  },
+  components: {
+    GlModal,
+    GlButton,
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  methods: {
+    hide() {
+      this.$refs.modal.hide();
+    },
+    cancel() {
+      this.hide();
+      this.$emit('cancel');
+    },
+    focusCancelButton() {
+      this.$refs.cancelButton.$el.focus();
+    },
+    mergeChanges() {
+      this.$emit('mergeWithFailedPipeline');
+      this.hide();
+    },
+  },
+};
+</script>
+<template>
+  <gl-modal
+    ref="modal"
+    size="sm"
+    modal-id="merge-train-failed-pipeline-confirmation-dialog"
+    :title="$options.i18n.title"
+    :visible="visible"
+    data-testid="merge-failed-pipeline-confirmation-dialog"
+    @shown="focusCancelButton"
+    @hide="$emit('cancel')"
+  >
+    <p>{{ $options.i18n.info }}</p>
+    <p>{{ $options.i18n.confirmation }}</p>
+    <template #modal-footer>
+      <gl-button ref="cancelButton" data-testid="merge-cancel-btn" @click="cancel">{{
+        $options.i18n.cancel
+      }}</gl-button>
+      <gl-button variant="danger" data-testid="merge-unverified-changes" @click="mergeChanges">
+        {{ $options.i18n.primary }}
+      </gl-button>
+    </template>
+  </gl-modal>
+</template>
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 daed8840c73..bdad1c4baec 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
@@ -25,8 +25,6 @@ import { helpPagePath } from '~/helpers/help_page_helper';
 import MergeRequest from '../../../merge_request';
 import {
   AUTO_MERGE_STRATEGIES,
-  DANGER,
-  CONFIRM,
   WARNING,
   MT_MERGE_STRATEGY,
   PIPELINE_FAILED_STATE,
@@ -42,6 +40,7 @@ import CommitEdit from './commit_edit.vue';
 import CommitMessageDropdown from './commit_message_dropdown.vue';
 import CommitsHeader from './commits_header.vue';
 import SquashBeforeMerge from './squash_before_merge.vue';
+import MergeFailedPipelineConfirmationDialog from './merge_failed_pipeline_confirmation_dialog.vue';
 
 const PIPELINE_RUNNING_STATE = 'running';
 const PIPELINE_PENDING_STATE = 'pending';
@@ -106,6 +105,7 @@ export default {
     GlDropdownItem,
     GlFormCheckbox,
     GlSkeletonLoader,
+    MergeFailedPipelineConfirmationDialog,
     MergeTrainHelperIcon: () =>
       import('ee_component/vue_merge_request_widget/components/merge_train_helper_icon.vue'),
     MergeImmediatelyConfirmationDialog: () =>
@@ -138,7 +138,8 @@ export default {
       squashBeforeMerge: this.mr.squashIsSelected,
       isSquashReadOnly: this.mr.squashIsReadonly,
       squashCommitMessage: this.mr.squashCommitMessage,
-      isPipelineFailedModalVisible: false,
+      isPipelineFailedModalVisibleMergeTrain: false,
+      isPipelineFailedModalVisibleNormalMerge: false,
       editCommitMessage: false,
     };
   },
@@ -166,6 +167,9 @@ export default {
 
       return this.mr.isPipelineFailed;
     },
+    showMergeFailedPipelineConfirmationDialog() {
+      return this.status === PIPELINE_FAILED_STATE && this.isPipelineFailed;
+    },
     isMergeAllowed() {
       if (this.glFeatures.mergeRequestWidgetGraphql) {
         return this.state.mergeable;
@@ -248,13 +252,6 @@ export default {
 
       return PIPELINE_SUCCESS_STATE;
     },
-    mergeButtonVariant() {
-      if (this.status === PIPELINE_FAILED_STATE || this.isPipelineFailed) {
-        return DANGER;
-      }
-
-      return CONFIRM;
-    },
     iconClass() {
       if (this.shouldRenderMergeTrainHelperIcon && !this.mr.preventMerge) {
         return PIPELINE_RUNNING_STATE;
@@ -279,6 +276,10 @@ export default {
         return this.autoMergeText;
       }
 
+      if (this.status === PIPELINE_FAILED_STATE || this.isPipelineFailed) {
+        return __('Merge...');
+      }
+
       return __('Merge');
     },
     hasPipelineMustSucceedConflict() {
@@ -361,8 +362,13 @@ export default {
       return this.$apollo.queries.state.refetch();
     },
     handleMergeButtonClick(useAutoMerge, mergeImmediately = false, confirmationClicked = false) {
-      if (this.showFailedPipelineModal && !confirmationClicked) {
-        this.isPipelineFailedModalVisible = true;
+      if (this.showMergeFailedPipelineConfirmationDialog && !confirmationClicked) {
+        this.isPipelineFailedModalVisibleNormalMerge = true;
+        return;
+      }
+
+      if (this.showFailedPipelineModalMergeTrain && !confirmationClicked) {
+        this.isPipelineFailedModalVisibleMergeTrain = true;
         return;
       }
 
@@ -434,6 +440,9 @@ export default {
     onMergeImmediatelyConfirmation() {
       this.handleMergeButtonClick(false, true, true);
     },
+    onMergeWithFailedPipelineConfirmation() {
+      this.handleMergeButtonClick(false, true, true);
+    },
     initiateMergePolling() {
       simplePoll(
         (continuePolling, stopPolling) => {
@@ -559,7 +568,7 @@ export default {
                 category="primary"
                 class="accept-merge-request"
                 data-testid="merge-button"
-                :variant="mergeButtonVariant"
+                variant="confirm"
                 :disabled="isMergeButtonDisabled"
                 :loading="isMakingRequest"
                 data-qa-selector="merge_button"
@@ -570,7 +579,7 @@ export default {
                 v-if="shouldShowMergeImmediatelyDropdown"
                 v-gl-tooltip.hover.focus="__('Select merge moment')"
                 :disabled="isMergeButtonDisabled"
-                :variant="mergeButtonVariant"
+                variant="confirm"
                 data-qa-selector="merge_moment_dropdown"
                 toggle-class="btn-icon js-merge-moment"
               >
@@ -593,9 +602,14 @@ export default {
                 />
               </gl-dropdown>
               <merge-train-failed-pipeline-confirmation-dialog
-                :visible="isPipelineFailedModalVisible"
+                :visible="isPipelineFailedModalVisibleMergeTrain"
                 @startMergeTrain="onStartMergeTrainConfirmation"
-                @cancel="isPipelineFailedModalVisible = false"
+                @cancel="isPipelineFailedModalVisibleMergeTrain = false"
+              />
+              <merge-failed-pipeline-confirmation-dialog
+                :visible="isPipelineFailedModalVisibleNormalMerge"
+                @mergeWithFailedPipeline="onMergeWithFailedPipelineConfirmation"
+                @cancel="isPipelineFailedModalVisibleNormalMerge = false"
               />
             </gl-button-group>
             <merge-train-helper-icon v-if="shouldRenderMergeTrainHelperIcon" class="gl-mx-3" />