Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

13 files changed, 84 insertions, 88 deletions

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 208df03b6a4..b90cbfd1a1a 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
@@ -74,9 +74,6 @@ export default {
     canBeManuallyRedeployed() {
       return this.computedDeploymentStatus === FAILED && Boolean(this.redeployPath);
     },
-    shouldShowManualButtons() {
-      return this.glFeatures.deployFromFooter;
-    },
     hasExternalUrls() {
       return Boolean(this.deployment.external_url && this.deployment.external_url_formatted);
     },
@@ -154,7 +151,7 @@ export default {
 <template>
   <div>
     <deployment-action-button
-      v-if="shouldShowManualButtons && canBeManuallyDeployed"
+      v-if="canBeManuallyDeployed"
       :action-in-progress="actionInProgress"
       :actions-configuration="$options.actionsConfiguration[constants.DEPLOYING]"
       :computed-deployment-status="computedDeploymentStatus"
@@ -165,7 +162,7 @@ export default {
       <span>{{ $options.actionsConfiguration[constants.DEPLOYING].buttonText }}</span>
     </deployment-action-button>
     <deployment-action-button
-      v-if="shouldShowManualButtons && canBeManuallyRedeployed"
+      v-if="canBeManuallyRedeployed"
       :action-in-progress="actionInProgress"
       :actions-configuration="$options.actionsConfiguration[constants.REDEPLOYING]"
       :computed-deployment-status="computedDeploymentStatus"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
index 157d6d60290..e3c0b7935d7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
@@ -72,12 +72,7 @@ export default {
         css-class="deploy-link js-deploy-url inline"
       />
       <gl-dropdown size="small" class="js-mr-wigdet-deployment-dropdown">
-        <gl-search-box-by-type
-          v-model.trim="searchTerm"
-          v-autofocusonshow
-          autofocus
-          class="gl-m-3"
-        />
+        <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus />
         <gl-dropdown-item
           v-for="change in filteredChanges"
           :key="change.path"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
index 6b3007fce51..c762922d890 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
@@ -1,5 +1,5 @@
 <script>
-import tooltip from '~/vue_shared/directives/tooltip';
+import { GlTooltipDirective } from '@gitlab/ui';
 import MrWidgetAuthor from './mr_widget_author.vue';
 
 export default {
@@ -8,7 +8,7 @@ export default {
     MrWidgetAuthor,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     actionText: {
@@ -34,6 +34,7 @@ export default {
   <h4 class="js-mr-widget-author">
     {{ actionText }}
     <mr-widget-author :author="author" />
-    <time v-tooltip :title="dateTitle" data-container="body"> {{ dateReadable }} </time>
+    <span class="sr-only">{{ dateReadable }} ({{ dateTitle }})</span>
+    <time v-gl-tooltip.hover aria-hidden :title="dateTitle"> {{ dateReadable }} </time>
   </h4>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 814d4e8341e..eb8989adb2a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -111,9 +111,10 @@ export default {
             v-html="mr.sourceBranchLink"
           /><clipboard-button
             ref="copyBranchNameButton"
+            data-testid="mr-widget-copy-clipboard"
             :text="branchNameClipboardData"
             :title="__('Copy branch name')"
-            css-class="btn-default btn-transparent btn-clipboard"
+            category="tertiary"
           />
           {{ s__('mrWidget|into') }}
           <tooltip-on-truncate
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 859f2c57598..c917b69953f 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,6 +1,5 @@
 <script>
-import { GlIcon, GlSprintf } from '@gitlab/ui';
-import tooltip from '../../vue_shared/directives/tooltip';
+import { GlIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '../../locale';
 
 export default {
@@ -13,7 +12,7 @@ export default {
     GlSprintf,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
 };
 </script>
@@ -28,7 +27,7 @@ export default {
       </gl-sprintf>
     </span>
     <gl-icon
-      v-tooltip
+      v-gl-tooltip.hover
       :title="$options.i18n.tooltipTitle"
       :aria-label="$options.i18n.tooltipTitle"
       name="question-o"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
index 7ddcdd49df5..29c26f4fb3e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -1,9 +1,11 @@
 <script>
+import { GlButton } from '@gitlab/ui';
 import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetArchived',
   components: {
+    GlButton,
     statusIcon,
   },
 };
@@ -12,9 +14,9 @@ export default {
   <div class="mr-widget-body media">
     <div class="space-children">
       <status-icon status="warning" />
-      <button type="button" class="btn btn-success btn-sm" disabled="true">
+      <gl-button category="secondary" variant="success" :disabled="true">
         {{ s__('mrWidget|Merge') }}
-      </button>
+      </gl-button>
     </div>
     <div class="media-body">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index 83e7d6db9fa..30da9947859 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import eventHub from '../../event_hub';
 import statusIcon from '../mr_widget_status_icon.vue';
 
@@ -8,6 +8,7 @@ export default {
   components: {
     statusIcon,
     GlLoadingIcon,
+    GlButton,
   },
   props: {
     mr: {
@@ -33,20 +34,21 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon status="warning" />
-    <div class="media-body space-children">
+    <div class="media-body space-children gl-display-flex gl-flex-wrap gl-align-items-center">
       <span class="bold">
         <template v-if="mr.mergeError">{{ mr.mergeError }}</template>
         {{ s__('mrWidget|This merge request failed to be merged automatically') }}
       </span>
-      <button
+      <gl-button
         :disabled="isRefreshing"
-        type="button"
-        class="btn btn-sm btn-default"
+        category="secondary"
+        variant="default"
+        size="small"
         @click="refreshWidget"
       >
         <gl-loading-icon v-if="isRefreshing" :inline="true" />
         {{ s__('mrWidget|Refresh') }}
-      </button>
+      </gl-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index 58839251edc..17cd740ddd9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -1,8 +1,7 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { deprecatedCreateFlash as Flash } from '~/flash';
-import tooltip from '~/vue_shared/directives/tooltip';
 import { s__, __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
@@ -12,7 +11,7 @@ import eventHub from '../../event_hub';
 export default {
   name: 'MRWidgetMerged',
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     MrWidgetAuthorTime,
@@ -115,7 +114,7 @@ export default {
         />
         <gl-button
           v-if="mr.canRevertInCurrentMR"
-          v-tooltip
+          v-gl-tooltip.hover
           :title="revertTitle"
           size="small"
           category="secondary"
@@ -128,7 +127,7 @@ export default {
         </gl-button>
         <gl-button
           v-else-if="mr.revertInForkPath"
-          v-tooltip
+          v-gl-tooltip.hover
           :href="mr.revertInForkPath"
           :title="revertTitle"
           size="small"
@@ -140,7 +139,7 @@ export default {
         </gl-button>
         <gl-button
           v-if="mr.canCherryPickInCurrentMR"
-          v-tooltip
+          v-gl-tooltip.hover
           :title="cherryPickTitle"
           size="small"
           href="#modal-cherry-pick-commit"
@@ -151,7 +150,7 @@ export default {
         </gl-button>
         <gl-button
           v-else-if="mr.cherryPickInForkPath"
-          v-tooltip
+          v-gl-tooltip.hover
           :href="mr.cherryPickInForkPath"
           :title="cherryPickTitle"
           size="small"
@@ -177,7 +176,9 @@ export default {
             <clipboard-button
               :title="__('Copy commit SHA')"
               :text="mr.mergeCommitSha"
-              css-class="btn-default btn-transparent btn-clipboard js-mr-merged-copy-sha"
+              css-class="js-mr-merged-copy-sha"
+              category="tertiary"
+              size="small"
             />
           </template>
         </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index 83783528cc1..6489569cf68 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -1,13 +1,12 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
 import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetMissingBranch',
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     GlIcon,
@@ -52,7 +51,7 @@ export default {
       <span class="bold js-branch-text">
         <span class="capitalize"> {{ missingBranchName }} </span>
         {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }}
-        <gl-icon v-tooltip :title="message" :aria-label="message" name="question-o" />
+        <gl-icon v-gl-tooltip :title="message" :aria-label="message" name="question-o" />
       </span>
     </div>
   </div>
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 ec0934c5b4b..14c2e9fa828 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
@@ -1,6 +1,6 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import simplePoll from '../../../lib/utils/simple_poll';
 import eventHub from '../../event_hub';
@@ -12,7 +12,7 @@ export default {
   name: 'MRWidgetRebase',
   components: {
     statusIcon,
-    GlLoadingIcon,
+    GlButton,
   },
   props: {
     mr: {
@@ -109,29 +109,29 @@ export default {
 
     <div class="rebase-state-find-class-convention media media-body space-children">
       <template v-if="mr.rebaseInProgress || isMakingRequest">
-        <span class="bold">{{ __('Rebase in progress') }}</span>
+        <span class="bold" data-testid="rebase-message">{{ __('Rebase in progress') }}</span>
       </template>
       <template v-if="!mr.rebaseInProgress && !mr.canPushToSourceBranch">
-        <span class="bold" v-html="fastForwardMergeText"></span>
+        <span class="bold" data-testid="rebase-message" v-html="fastForwardMergeText"></span>
       </template>
       <template v-if="!mr.rebaseInProgress && mr.canPushToSourceBranch && !isMakingRequest">
         <div
           class="accept-merge-holder clearfix js-toggle-container accept-action media space-children"
         >
-          <button
-            :disabled="isMakingRequest"
-            type="button"
-            class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button"
+          <gl-button
+            :loading="isMakingRequest"
+            variant="success"
+            class="qa-mr-rebase-button"
             @click="rebase"
           >
-            <gl-loading-icon v-if="isMakingRequest" />{{ __('Rebase') }}
-          </button>
-          <span v-if="!rebasingError" class="bold">{{
+            {{ __('Rebase') }}
+          </gl-button>
+          <span v-if="!rebasingError" class="bold" data-testid="rebase-message">{{
             __(
               'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
             )
           }}</span>
-          <span v-else class="bold danger">{{ rebasingError }}</span>
+          <span v-else class="bold danger" data-testid="rebase-message">{{ rebasingError }}</span>
         </div>
       </template>
     </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 240bab58297..835f7b9e9a9 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
@@ -1,12 +1,9 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { isEmpty } from 'lodash';
 import { GlIcon, GlButton, GlSprintf, GlLink } from '@gitlab/ui';
-import successSvg from 'icons/_icon_status_success.svg';
-import warningSvg from 'icons/_icon_status_warning.svg';
 import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge';
 import simplePoll from '~/lib/utils/simple_poll';
-import { __, sprintf } from '~/locale';
+import { __ } from '~/locale';
 import MergeRequest from '../../../merge_request';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import { deprecatedCreateFlash as Flash } from '../../../flash';
@@ -59,8 +56,6 @@ export default {
       commitMessage: this.mr.commitMessage,
       squashBeforeMerge: this.mr.squashIsSelected,
       isSquashReadOnly: this.mr.squashIsReadonly,
-      successSvg,
-      warningSvg,
       squashCommitMessage: this.mr.squashCommitMessage,
     };
   },
@@ -147,16 +142,7 @@ export default {
       return !this.mr.ffOnlyEnabled;
     },
     shaMismatchLink() {
-      const href = this.mr.mergeRequestDiffsPath;
-
-      return sprintf(
-        __('New changes were added. %{linkStart}Reload the page to review them%{linkEnd}'),
-        {
-          linkStart: `<a href="${href}">`,
-          linkEnd: '</a>',
-        },
-        false,
-      );
+      return this.mr.mergeRequestDiffsPath;
     },
   },
   methods: {
@@ -331,7 +317,7 @@ export default {
                   @click.prevent="handleMergeButtonClick(true)"
                 >
                   <span class="media">
-                    <span class="merge-opt-icon" aria-hidden="true" v-html="successSvg"></span>
+                    <gl-icon name="status_success" class="merge-opt-icon" aria-hidden="true" />
                     <span class="media-body merge-opt-title">{{ autoMergeText }}</span>
                   </span>
                 </a>
@@ -349,7 +335,7 @@ export default {
                   @click.prevent="handleMergeImmediatelyButtonClick"
                 >
                   <span class="media">
-                    <span class="merge-opt-icon" aria-hidden="true" v-html="warningSvg"></span>
+                    <gl-icon name="status_warning" class="merge-opt-icon" aria-hidden="true" />
                     <span class="media-body merge-opt-title">{{ __('Merge immediately') }}</span>
                   </span>
                 </a>
@@ -400,7 +386,17 @@ export default {
         </div>
         <div v-if="mr.isSHAMismatch" class="d-flex align-items-center mt-2 js-sha-mismatch">
           <gl-icon name="warning-solid" class="text-warning mr-1" />
-          <span class="text-warning" v-html="shaMismatchLink"></span>
+          <span class="text-warning">
+            <gl-sprintf
+              :message="
+                __('New changes were added. %{linkStart}Reload the page to review them%{linkEnd}')
+              "
+            >
+              <template #link="{ content }">
+                <gl-link :href="mr.mergeRequestDiffsPath">{{ content }}</gl-link>
+              </template>
+            </gl-sprintf>
+          </span>
         </div>
       </div>
     </div>
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 6608381f348..ff0d065c71d 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
@@ -1,14 +1,16 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
-import tooltip from '~/vue_shared/directives/tooltip';
-import { __ } from '~/locale';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { SQUASH_BEFORE_MERGE } from '../../i18n';
 
 export default {
   components: {
     GlIcon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
+  },
+  i18n: {
+    ...SQUASH_BEFORE_MERGE,
   },
   props: {
     value: {
@@ -28,7 +30,10 @@ export default {
   },
   computed: {
     tooltipTitle() {
-      return this.isDisabled ? __('Required in this project.') : false;
+      return this.isDisabled ? this.$options.i18n.tooltipTitle : null;
+    },
+    tooltipFocusable() {
+      return this.isDisabled ? '0' : null;
     },
   },
 };
@@ -37,10 +42,11 @@ export default {
 <template>
   <div class="inline">
     <label
-      v-tooltip
+      v-gl-tooltip
       :class="{ 'gl-text-gray-400': isDisabled }"
+      :tabindex="tooltipFocusable"
       data-testid="squashLabel"
-      :data-title="tooltipTitle"
+      :title="tooltipTitle"
     >
       <input
         :checked="value"
@@ -50,19 +56,20 @@ export default {
         class="qa-squash-checkbox js-squash-checkbox"
         @change="$emit('input', $event.target.checked)"
       />
-      {{ __('Squash commits') }}
+      {{ $options.i18n.checkboxLabel }}
     </label>
     <a
       v-if="helpPath"
-      v-tooltip
+      v-gl-tooltip
       :href="helpPath"
-      data-title="About this feature"
-      data-placement="bottom"
+      :title="$options.i18n.helpLabel"
       target="_blank"
       rel="noopener noreferrer nofollow"
-      data-container="body"
     >
       <gl-icon name="question" />
+      <span class="sr-only">
+        {{ $options.i18n.helpLabel }}
+      </span>
     </a>
   </div>
 </template>
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 61cc950f058..eba3d50fdc9 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
@@ -3,13 +3,13 @@ import $ from 'jquery';
 import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
+import MergeRequest from '~/merge_request';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import getStateQuery from '../../queries/get_state.query.graphql';
 import workInProgressQuery from '../../queries/states/work_in_progress.query.graphql';
 import removeWipMutation from '../../queries/toggle_wip.mutation.graphql';
 import StatusIcon from '../mr_widget_status_icon.vue';
-import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
 
 export default {
@@ -18,9 +18,6 @@ export default {
     StatusIcon,
     GlButton,
   },
-  directives: {
-    tooltip,
-  },
   mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
   apollo: {
     userPermissions: {
@@ -128,8 +125,7 @@ export default {
           .then(res => res.data)
           .then(data => {
             eventHub.$emit('UpdateWidgetData', data);
-            createFlash(__('The merge request can now be merged.'), 'notice');
-            $('.merge-request .detail-page-description .title').text(this.mr.title);
+            MergeRequest.toggleDraftStatus(this.mr.title, true);
           })
           .catch(() => {
             this.isMakingRequest = false;