Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

8 files changed, 119 insertions, 125 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
index 428641a1109..84a21a25552 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
@@ -154,7 +154,7 @@ export default {
       <status-icon status="success" />
       <div class="media-body">
         <h4 class="gl-display-flex">
-          <span class="gl-mr-3">
+          <span class="gl-mr-3" data-qa-selector="merge_request_status_content">
             <span class="js-status-text-before-author" data-testid="beforeStatusText">{{
               statusTextBeforeAuthor
             }}</span>
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 2335e2984e4..23f415c3116 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,9 +1,6 @@
 <script>
-import { GlButton, GlModalDirective, GlSkeletonLoader } from '@gitlab/ui';
-import $ from 'jquery';
-import { escape } from 'lodash';
-import { s__, sprintf } from '~/locale';
-import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
+import { GlButton, GlModalDirective, GlSkeletonLoader, GlPopover, GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import userPermissionsQuery from '../../queries/permissions.query.graphql';
@@ -16,6 +13,8 @@ export default {
     GlSkeletonLoader,
     StatusIcon,
     GlButton,
+    GlPopover,
+    GlLink,
   },
   directives: {
     GlModalDirective,
@@ -106,48 +105,11 @@ export default {
       return this.showResolveButton && this.sourceBranchProtected;
     },
   },
-  watch: {
-    showPopover: {
-      handler(newVal) {
-        if (newVal) {
-          this.$nextTick(this.initPopover);
-        }
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    initPopover() {
-      const $el = $(this.$refs.popover);
-
-      $el
-        .popover({
-          html: true,
-          trigger: 'focus',
-          container: 'body',
-          placement: 'top',
-          template:
-            '<div class="popover" role="tooltip"><div class="arrow"></div><p class="popover-header"></p><div class="popover-body"></div></div>',
-          title: 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.',
-          ),
-          content: sprintf(
-            s__('mrWidget|%{link_start}Learn more about resolving conflicts%{link_end}'),
-            {
-              link_start: `<a href="${escape(
-                this.mr.conflictsDocsPath,
-              )}" target="_blank" rel="noopener noreferrer">`,
-              link_end: '</a>',
-            },
-            false,
-          ),
-        })
-        .on('mouseenter', mouseenter)
-        .on('mouseleave', debouncedMouseleave(300))
-        .on('show.bs.popover', () => {
-          window.addEventListener('scroll', togglePopover.bind($el, false), { once: true });
-        });
-    },
+  i18n: {
+    title: 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.',
+    ),
+    linkText: s__('mrWidget|Learn more about resolving conflicts'),
   },
 };
 </script>
@@ -162,7 +124,7 @@ export default {
         <rect x="250" y="7" width="84" height="16" rx="4" />
       </gl-skeleton-loader>
     </div>
-    <div v-else class="media-body space-children">
+    <div v-else class="media-body space-children gl-display-flex gl-align-items-center">
       <span v-if="shouldBeRebased" class="bold">
         {{
           s__(`mrWidget|Fast-forward merge is not possible.
@@ -181,17 +143,35 @@ export default {
         </span>
         <span v-if="showResolveButton" ref="popover">
           <gl-button
-            :href="!sourceBranchProtected && mr.conflictResolutionPath"
+            :href="mr.conflictResolutionPath"
             :disabled="sourceBranchProtected"
-            class="js-resolve-conflicts-button"
+            data-testid="resolve-conflicts-button"
           >
             {{ s__('mrWidget|Resolve conflicts') }}
           </gl-button>
+          <gl-popover
+            v-if="showPopover"
+            :target="() => $refs.popover"
+            placement="top"
+            triggers="hover focus"
+          >
+            <template #title>
+              <div class="gl-font-weight-normal gl-font-base">
+                {{ $options.i18n.title }}
+              </div>
+            </template>
+
+            <div class="gl-text-center">
+              <gl-link :href="mr.conflictsDocsPath" target="_blank" rel="noopener noreferrer">
+                {{ $options.i18n.linkText }}
+              </gl-link>
+            </div>
+          </gl-popover>
         </span>
         <gl-button
           v-if="canMerge"
           v-gl-modal-directive="'modal-merge-info'"
-          class="js-merge-locally-button"
+          data-testid="merge-locally-button"
         >
           {{ s__('mrWidget|Merge locally') }}
         </gl-button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index d15794c71b1..33ca582583b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -176,16 +176,22 @@ export default {
           <gl-button
             :loading="isMakingRequest"
             variant="success"
-            class="qa-mr-rebase-button"
+            data-qa-selector="mr_rebase_button"
             @click="rebase"
           >
             {{ __('Rebase') }}
           </gl-button>
-          <span v-if="!rebasingError" class="gl-font-weight-bold" data-testid="rebase-message">{{
-            __(
-              'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
-            )
-          }}</span>
+          <span
+            v-if="!rebasingError"
+            class="gl-font-weight-bold"
+            data-testid="rebase-message"
+            data-qa-selector="no_fast_forward_message_content"
+            >{{
+              __(
+                'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
+              )
+            }}</span
+          >
           <span v-else class="gl-font-weight-bold danger" data-testid="rebase-message">{{
             rebasingError
           }}</span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
index f0259a975db..01e0b91bd4a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
@@ -1,12 +1,15 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
 import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   name: 'MRWidgetNothingToMerge',
   components: {
     GlButton,
+    GlSprintf,
+    GlLink,
   },
   props: {
     mr: {
@@ -17,6 +20,7 @@ export default {
   data() {
     return { emptyStateSVG };
   },
+  ciHelpPage: helpPagePath('/ci/quick_start/index.html'),
 };
 </script>
 
@@ -30,25 +34,20 @@ export default {
       </div>
       <div class="text col-md-7 order-md-first col-12">
         <p class="highlight">
-          {{
-            s__(
-              'mrWidgetNothingToMerge|Merge requests are a place to propose changes you have made to a project and discuss those changes with others.',
-            )
-          }}
+          {{ s__('mrWidgetNothingToMerge|This merge request contains no changes.') }}
         </p>
         <p>
-          {{
-            s__(
-              'mrWidgetNothingToMerge|Interested parties can even contribute by pushing commits if they want to.',
-            )
-          }}
-        </p>
-        <p>
-          {{
-            s__(
-              "mrWidgetNothingToMerge|Currently there are no changes in this merge request's source branch. Please push new commits or use a different branch.",
-            )
-          }}
+          <gl-sprintf
+            :message="
+              s__(
+                'mrWidgetNothingToMerge|Use merge requests to propose changes to your project and discuss them with your team. To make changes, push a commit or edit this merge request to use a different branch. With %{linkStart}CI/CD%{linkEnd}, automatically test your changes before merging.',
+              )
+            "
+          >
+            <template #link="{ content }">
+              <gl-link :href="$options.ciHelpPage" target="_blank">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
         </p>
         <div>
           <gl-button
@@ -56,6 +55,7 @@ export default {
             :href="mr.newBlobPath"
             category="secondary"
             variant="success"
+            data-testid="createFileButton"
           >
             {{ __('Create file') }}
           </gl-button>
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 690b6e9c462..62c5cd90035 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
@@ -5,6 +5,7 @@ import {
   GlButtonGroup,
   GlDropdown,
   GlDropdownItem,
+  GlFormCheckbox,
   GlSprintf,
   GlLink,
   GlTooltipDirective,
@@ -81,6 +82,7 @@ export default {
     GlButtonGroup,
     GlDropdown,
     GlDropdownItem,
+    GlFormCheckbox,
     GlSkeletonLoader,
     MergeTrainHelperText: () =>
       import('ee_component/vue_merge_request_widget/components/merge_train_helper_text.vue'),
@@ -453,12 +455,13 @@ export default {
       <div class="mr-widget-body media" :class="{ 'gl-pb-3': shouldRenderMergeTrainHelperText }">
         <status-icon :status="iconClass" />
         <div class="media-body">
-          <div class="mr-widget-body-controls media space-children">
-            <gl-button-group>
+          <div class="mr-widget-body-controls gl-display-flex gl-align-items-center">
+            <gl-button-group class="gl-align-self-start">
               <gl-button
                 size="medium"
                 category="primary"
-                class="qa-merge-button accept-merge-request"
+                class="accept-merge-request"
+                data-testid="merge-button"
                 :variant="mergeButtonVariant"
                 :disabled="isMergeButtonDisabled"
                 :loading="isMakingRequest"
@@ -481,7 +484,7 @@ export default {
                 <gl-dropdown-item
                   icon-name="warning"
                   button-class="accept-merge-request js-merge-immediately-button"
-                  data-qa-selector="merge_immediately_option"
+                  data-qa-selector="merge_immediately_menu_item"
                   @click="handleMergeImmediatelyButtonClick"
                 >
                   {{ __('Merge immediately') }}
@@ -493,47 +496,48 @@ export default {
                 />
               </gl-dropdown>
             </gl-button-group>
-            <div class="media-body-wrap space-children">
-              <template v-if="shouldShowMergeControls">
-                <label v-if="canRemoveSourceBranch">
-                  <input
-                    id="remove-source-branch-input"
-                    v-model="removeSourceBranch"
-                    :disabled="isRemoveSourceBranchButtonDisabled"
-                    class="js-remove-source-branch-checkbox"
-                    type="checkbox"
-                  />
-                  {{ __('Delete source branch') }}
-                </label>
-
-                <!-- Placeholder for EE extension of this component -->
-                <squash-before-merge
-                  v-if="shouldShowSquashBeforeMerge"
-                  v-model="squashBeforeMerge"
-                  :help-path="mr.squashBeforeMergeHelpPath"
-                  :is-disabled="isSquashReadOnly"
-                />
-              </template>
-              <template v-else>
-                <div class="bold js-resolve-mr-widget-items-message">
-                  <div
-                    v-if="hasPipelineMustSucceedConflict"
-                    class="gl-display-flex gl-align-items-center"
-                    data-testid="pipeline-succeed-conflict"
+            <div
+              v-if="shouldShowMergeControls"
+              class="gl-display-flex gl-align-items-center gl-flex-wrap"
+            >
+              <gl-form-checkbox
+                v-if="canRemoveSourceBranch"
+                id="remove-source-branch-input"
+                v-model="removeSourceBranch"
+                :disabled="isRemoveSourceBranchButtonDisabled"
+                class="js-remove-source-branch-checkbox gl-mx-3 gl-display-flex gl-align-items-center"
+              >
+                {{ __('Delete source branch') }}
+              </gl-form-checkbox>
+
+              <!-- Placeholder for EE extension of this component -->
+              <squash-before-merge
+                v-if="shouldShowSquashBeforeMerge"
+                v-model="squashBeforeMerge"
+                :help-path="mr.squashBeforeMergeHelpPath"
+                :is-disabled="isSquashReadOnly"
+                class="gl-mx-3"
+              />
+            </div>
+            <template v-else>
+              <div class="bold js-resolve-mr-widget-items-message gl-ml-3">
+                <div
+                  v-if="hasPipelineMustSucceedConflict"
+                  class="gl-display-flex gl-align-items-center"
+                  data-testid="pipeline-succeed-conflict"
+                >
+                  <gl-sprintf :message="pipelineMustSucceedConflictText" />
+                  <gl-link
+                    :href="mr.pipelineMustSucceedDocsPath"
+                    target="_blank"
+                    class="gl-display-flex gl-ml-2"
                   >
-                    <gl-sprintf :message="pipelineMustSucceedConflictText" />
-                    <gl-link
-                      :href="mr.pipelineMustSucceedDocsPath"
-                      target="_blank"
-                      class="gl-display-flex gl-ml-2"
-                    >
-                      <gl-icon name="question" />
-                    </gl-link>
-                  </div>
-                  <gl-sprintf v-else :message="mergeDisabledText" />
+                    <gl-icon name="question" />
+                  </gl-link>
                 </div>
-              </template>
-            </div>
+                <gl-sprintf v-else :message="mergeDisabledText" />
+              </div>
+            </template>
           </div>
           <div v-if="isSHAMismatch" class="d-flex align-items-center mt-2 js-sha-mismatch">
             <gl-icon name="warning-solid" class="text-warning mr-1" />
@@ -559,7 +563,11 @@ export default {
         :merge-train-when-pipeline-succeeds-docs-path="mr.mergeTrainWhenPipelineSucceedsDocsPath"
       />
       <template v-if="shouldShowMergeControls">
-        <div v-if="!shouldShowMergeEdit" class="mr-fast-forward-message">
+        <div
+          v-if="!shouldShowMergeEdit"
+          class="mr-fast-forward-message"
+          data-qa-selector="fast_forward_message_content"
+        >
           {{ __('Fast-forward merge without a merge commit') }}
         </div>
         <commits-header
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
index 8acca0d6481..89edf588213 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
@@ -13,7 +13,7 @@ export default {
   <div class="mr-widget-body media">
     <status-icon :show-disabled-button="true" status="warning" />
     <div class="media-body space-children">
-      <span class="bold">
+      <span class="bold" data-qa-selector="head_mismatch_content">
         {{
           s__(`mrWidget|The source branch HEAD has recently changed.
 Please reload the page and review the changes before merging`)
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 12fdfe601a4..6388b817e46 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
@@ -44,7 +44,7 @@ export default {
       :checked="value"
       :disabled="isDisabled"
       name="squash"
-      class="qa-squash-checkbox js-squash-checkbox gl-mb-0 gl-mr-2"
+      class="qa-squash-checkbox js-squash-checkbox gl-mr-2 gl-display-flex gl-align-items-center"
       :title="tooltipTitle"
       @change="(checked) => $emit('input', checked)"
     >
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 af305815381..f0c624c5d8d 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
@@ -70,7 +70,7 @@ export default {
               data: {
                 mergeRequestSetWip: {
                   errors,
-                  mergeRequest: { workInProgress, title },
+                  mergeRequest: { mergeableDiscussionsState, workInProgress, title },
                 },
               },
             },
@@ -87,9 +87,8 @@ export default {
             });
 
             const data = produce(sourceData, (draftState) => {
-              // eslint-disable-next-line no-param-reassign
+              draftState.project.mergeRequest.mergeableDiscussionsState = mergeableDiscussionsState;
               draftState.project.mergeRequest.workInProgress = workInProgress;
-              // eslint-disable-next-line no-param-reassign
               draftState.project.mergeRequest.title = title;
             });
 
@@ -107,6 +106,7 @@ export default {
               errors: [],
               mergeRequest: {
                 __typename: 'MergeRequest',
+                mergeableDiscussionsState: true,
                 title: this.mr.title,
                 workInProgress: false,
               },