Add latest changes from gitlab-org/gitlab@master

3 files changed, 29 insertions, 53 deletions

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 00e346bb8c8..bb8990a48b1 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
@@ -10,7 +10,6 @@ import {
   GlLink,
   GlTooltipDirective,
   GlSkeletonLoader,
-  GlPopover,
 } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge';
@@ -26,6 +25,7 @@ import { convertToGraphQLId } from '~/graphql_shared/utils';
 import readyToMergeSubscription from '~/vue_merge_request_widget/queries/states/ready_to_merge.subscription.graphql';
 import {
   AUTO_MERGE_STRATEGIES,
+  WARNING,
   MT_MERGE_STRATEGY,
   PIPELINE_FAILED_STATE,
   STATE_MACHINE,
@@ -40,6 +40,7 @@ import CommitMessageDropdown from './commit_message_dropdown.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';
 const PIPELINE_SUCCESS_STATE = 'success';
 
@@ -129,8 +130,9 @@ export default {
     GlDropdownItem,
     GlFormCheckbox,
     GlSkeletonLoader,
-    GlPopover,
     MergeFailedPipelineConfirmationDialog,
+    MergeTrainHelperIcon: () =>
+      import('ee_component/vue_merge_request_widget/components/merge_train_helper_icon.vue'),
     MergeImmediatelyConfirmationDialog: () =>
       import(
         'ee_component/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue'
@@ -239,6 +241,22 @@ export default {
 
       return PIPELINE_SUCCESS_STATE;
     },
+    iconClass() {
+      if (this.shouldRenderMergeTrainHelperIcon && !this.mr.preventMerge) {
+        return PIPELINE_RUNNING_STATE;
+      }
+
+      if (
+        this.status === PIPELINE_FAILED_STATE ||
+        !this.commitMessage.length ||
+        !this.isMergeAllowed ||
+        this.mr.preventMerge
+      ) {
+        return WARNING;
+      }
+
+      return PIPELINE_SUCCESS_STATE;
+    },
     mergeButtonText() {
       if (this.isMergingImmediately) {
         return __('Merge in progress');
@@ -288,12 +306,6 @@ export default {
         !this.mr.autoMergeEnabled
       );
     },
-    showAutoMergeHelperText() {
-      return (
-        !(this.status === PIPELINE_FAILED_STATE || this.isPipelineFailed) &&
-        this.isAutoMergeAvailable
-      );
-    },
     sourceBranchDeletedText() {
       const isPreMerge = this.mr.state !== 'merged';
 
@@ -478,7 +490,6 @@ export default {
     sourceDivergedFromTargetText: s__('mrWidget|The source branch is %{link} the target branch'),
     divergedCommits: (count) => n__('%d commit behind', '%d commits behind', count),
   },
-  mergeStrategyPopoverId: 'mergeStrategyPopover',
 };
 </script>
 
@@ -659,37 +670,7 @@ export default {
                   @cancel="isPipelineFailedModalVisibleNormalMerge = false"
                 />
               </gl-button-group>
-              <template v-if="showAutoMergeHelperText">
-                <div
-                  class="gl-ml-4 gl-text-gray-500 gl-font-sm"
-                  data-testid="auto-merge-helper-text"
-                  data-qa-selector="auto_merge_helper_text"
-                >
-                  {{ autoMergeHelperText }}
-                </div>
-                <gl-icon
-                  :id="$options.mergeStrategyPopoverId"
-                  class="gl-ml-2 gl-text-blue-500"
-                  name="question-o"
-                  data-testid="auto-merge-helper-icon"
-                />
-                <gl-popover :target="$options.mergeStrategyPopoverId" :css-classes="['gl-font-sm']">
-                  <template #title>
-                    {{ autoMergePopoverSettings.title }}
-                  </template>
-                  <gl-sprintf :message="autoMergePopoverSettings.bodyText">
-                    <template #link="{ content }">
-                      <gl-link
-                        :href="autoMergePopoverSettings.helpLink"
-                        target="_blank"
-                        class="gl-font-sm"
-                      >
-                        {{ content }}
-                      </gl-link>
-                    </template>
-                  </gl-sprintf>
-                </gl-popover>
-              </template>
+              <merge-train-helper-icon v-if="shouldRenderMergeTrainHelperIcon" class="gl-mx-3" />
             </template>
             <div
               v-else
diff --git a/app/assets/javascripts/vue_merge_request_widget/i18n.js b/app/assets/javascripts/vue_merge_request_widget/i18n.js
index fa00b89d414..5ca56074031 100644
--- a/app/assets/javascripts/vue_merge_request_widget/i18n.js
+++ b/app/assets/javascripts/vue_merge_request_widget/i18n.js
@@ -21,6 +21,11 @@ export const I18N_SHA_MISMATCH = {
   actionButtonLabel: __('Review changes'),
 };
 
+export const MERGE_TRAIN_BUTTON_TEXT = {
+  failed: __('Start merge train...'),
+  passed: __('Start merge train'),
+};
+
 export const MR_WIDGET_CLOSED_REOPEN = __('Reopen');
 export const MR_WIDGET_CLOSED_REOPENING = __('Reopening...');
 export const MR_WIDGET_CLOSED_RELOADING = __('Refreshing...');
diff --git a/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js
index 48c9ec9c944..d964b4bacac 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js
@@ -1,4 +1,3 @@
-import { helpPagePath } from '~/helpers/help_page_helper';
 import { __ } from '~/locale';
 
 export const MERGE_DISABLED_TEXT = __('You can only merge once the items above are resolved.');
@@ -33,26 +32,17 @@ export default {
     },
     autoMergeText() {
       // MWPS is currently the only auto merge strategy available in CE
-      return __('Set auto-merge');
-    },
-    autoMergeHelperText() {
       return __('Merge when pipeline succeeds');
     },
-    autoMergePopoverSettings() {
-      return {
-        helpLink: helpPagePath('/user/project/merge_requests/merge_when_pipeline_succeeds.html'),
-        bodyText: __(
-          'When the pipeline for this merge request succeeds, it will %{linkStart}automatically merge%{linkEnd}.',
-        ),
-        title: __('Merge when pipeline succeeds'),
-      };
-    },
     shouldShowMergeImmediatelyDropdown() {
       return this.isPipelineActive && !this.stateData.onlyAllowMergeIfPipelineSucceeds;
     },
     isMergeImmediatelyDangerous() {
       return false;
     },
+    shouldRenderMergeTrainHelperIcon() {
+      return false;
+    },
     pipelineId() {
       return this.pipeline.id;
     },