Add latest changes from gitlab-org/gitlab@13-4-stable-ee

26 files changed, 303 insertions, 215 deletions

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 24cd9d6428d..55fa24fb51a 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
@@ -1,11 +1,10 @@
 <script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
     GlLink,
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -35,7 +34,7 @@ export default {
       target="_blank"
       class="d-flex-center pl-1"
     >
-      <icon name="question" />
+      <gl-icon name="question" />
     </gl-link>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js b/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js
index a7ab11290eb..66de4f8b682 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js
@@ -11,3 +11,9 @@ export const CANCELED = 'canceled';
 export const STOPPING = 'stopping';
 export const DEPLOYING = 'deploying';
 export const REDEPLOYING = 'redeploying';
+
+export const ACT_BUTTON_ICONS = {
+  play: 'play',
+  repeat: 'repeat',
+  stop: 'stop',
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
index 7d74d5531b4..cc3efae565a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { RUNNING } from './constants';
 
 export default {
   name: 'DeploymentActionButton',
   components: {
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -35,6 +35,10 @@ export default {
       required: false,
       default: '',
     },
+    icon: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     isActionInProgress() {
@@ -58,18 +62,19 @@ export default {
 </script>
 
 <template>
-  <span v-gl-tooltip :title="actionInProgressTooltip" class="d-inline-block" tabindex="0">
-    <gl-deprecated-button
+  <span v-gl-tooltip :title="actionInProgressTooltip" class="gl-display-inline-block" tabindex="0">
+    <gl-button
       v-gl-tooltip
+      category="primary"
+      size="small"
       :title="buttonTitle"
       :loading="isLoading"
       :disabled="isActionInProgress"
-      :class="`btn btn-default btn-sm inline gl-ml-2 ${containerClasses}`"
+      :class="`inline gl-ml-2 ${containerClasses}`"
+      :icon="icon"
       @click="$emit('click')"
     >
-      <span class="d-inline-flex align-items-baseline">
-        <slot> </slot>
-      </span>
-    </gl-deprecated-button>
+      <slot> </slot>
+    </gl-button>
   </span>
 </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 af0b4087d46..208df03b6a4 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,4 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
@@ -7,14 +6,22 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MRWidgetService from '../../services/mr_widget_service';
 import DeploymentActionButton from './deployment_action_button.vue';
 import DeploymentViewButton from './deployment_view_button.vue';
-import { MANUAL_DEPLOY, FAILED, SUCCESS, STOPPING, DEPLOYING, REDEPLOYING } from './constants';
+import {
+  MANUAL_DEPLOY,
+  FAILED,
+  SUCCESS,
+  STOPPING,
+  DEPLOYING,
+  REDEPLOYING,
+  ACT_BUTTON_ICONS,
+} from './constants';
 
 export default {
   name: 'DeploymentActions',
+  btnIcons: ACT_BUTTON_ICONS,
   components: {
     DeploymentActionButton,
     DeploymentViewButton,
-    GlIcon,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -151,10 +158,10 @@ export default {
       :action-in-progress="actionInProgress"
       :actions-configuration="$options.actionsConfiguration[constants.DEPLOYING]"
       :computed-deployment-status="computedDeploymentStatus"
+      :icon="$options.btnIcons.play"
       container-classes="js-manual-deploy-action"
       @click="deployManually"
     >
-      <gl-icon name="play" />
       <span>{{ $options.actionsConfiguration[constants.DEPLOYING].buttonText }}</span>
     </deployment-action-button>
     <deployment-action-button
@@ -162,10 +169,10 @@ export default {
       :action-in-progress="actionInProgress"
       :actions-configuration="$options.actionsConfiguration[constants.REDEPLOYING]"
       :computed-deployment-status="computedDeploymentStatus"
+      :icon="$options.btnIcons.repeat"
       container-classes="js-manual-redeploy-action"
       @click="redeploy"
     >
-      <gl-icon name="repeat" />
       <span>{{ $options.actionsConfiguration[constants.REDEPLOYING].buttonText }}</span>
     </deployment-action-button>
     <deployment-view-button
@@ -181,10 +188,9 @@ export default {
       :computed-deployment-status="computedDeploymentStatus"
       :actions-configuration="$options.actionsConfiguration[constants.STOPPING]"
       :button-title="$options.actionsConfiguration[constants.STOPPING].buttonText"
+      :icon="$options.btnIcons.stop"
       container-classes="js-stop-env"
       @click="stopEnvironment"
-    >
-      <gl-icon name="stop" />
-    </deployment-action-button>
+    />
   </div>
 </template>
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 b12250d1d1c..157d6d60290 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
@@ -1,17 +1,23 @@
 <script>
-import { GlLink } from '@gitlab/ui';
-import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue';
+import { GlButtonGroup, GlDropdown, GlDropdownItem, GlLink, GlSearchBoxByType } from '@gitlab/ui';
+import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 import ReviewAppLink from '../review_app_link.vue';
 
 export default {
   name: 'DeploymentViewButton',
   components: {
-    FilteredSearchDropdown,
+    GlButtonGroup,
+    GlDropdown,
+    GlDropdownItem,
     GlLink,
+    GlSearchBoxByType,
     ReviewAppLink,
     VisualReviewAppLink: () =>
       import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'),
   },
+  directives: {
+    autofocusonshow,
+  },
   props: {
     appButtonText: {
       type: Object,
@@ -37,6 +43,9 @@ export default {
       }),
     },
   },
+  data() {
+    return { searchTerm: '' };
+  },
   computed: {
     deploymentExternalUrl() {
       if (this.deployment.changes && this.deployment.changes.length === 1) {
@@ -47,44 +56,52 @@ export default {
     shouldRenderDropdown() {
       return this.deployment.changes && this.deployment.changes.length > 1;
     },
+    filteredChanges() {
+      return this.deployment?.changes?.filter(change => change.path.includes(this.searchTerm));
+    },
   },
 };
 </script>
-
 <template>
   <span>
-    <filtered-search-dropdown
-      v-if="shouldRenderDropdown"
-      class="js-mr-wigdet-deployment-dropdown inline"
-      :items="deployment.changes"
-      :main-action-link="deploymentExternalUrl"
-      filter-key="path"
-    >
-      <template #mainAction="{ className }">
-        <review-app-link
-          :display="appButtonText"
-          :link="deploymentExternalUrl"
-          :css-class="`deploy-link js-deploy-url inline ${className}`"
+    <gl-button-group v-if="shouldRenderDropdown" size="small">
+      <review-app-link
+        :display="appButtonText"
+        :link="deploymentExternalUrl"
+        size="small"
+        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"
         />
-      </template>
-
-      <template #result="{ result }">
-        <gl-link
-          :href="result.external_url"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-          class="js-deploy-url-menu-item menu-item"
+        <gl-dropdown-item
+          v-for="change in filteredChanges"
+          :key="change.path"
+          class="js-filtered-dropdown-result"
         >
-          <strong class="str-truncated-100 gl-mb-0 d-block">{{ result.path }}</strong>
-
-          <p class="text-secondary str-truncated-100 gl-mb-0 d-block">{{ result.external_url }}</p>
-        </gl-link>
-      </template>
-    </filtered-search-dropdown>
+          <gl-link
+            :href="change.external_url"
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            class="js-deploy-url-menu-item menu-item"
+          >
+            <strong class="str-truncated-100 gl-mb-0 gl-display-block">{{ change.path }}</strong>
+            <p class="text-secondary str-truncated-100 gl-mb-0 d-block">
+              {{ change.external_url }}
+            </p>
+          </gl-link>
+        </gl-dropdown-item>
+      </gl-dropdown>
+    </gl-button-group>
     <review-app-link
       v-else
       :display="appButtonText"
       :link="deploymentExternalUrl"
+      size="small"
       css-class="js-deploy-url deploy-link btn btn-default btn-sm inline"
     />
     <visual-review-app-link
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue
index fe41a15979e..9b2cd41092e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue
@@ -1,5 +1,6 @@
 <script>
-import { sprintf, s__ } from '~/locale';
+import { GlLoadingIcon, GlSprintf, GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import statusCodes from '~/lib/utils/http_status';
 import { bytesToMiB } from '~/lib/utils/number_utils';
 import { backOff } from '~/lib/utils/common_utils';
@@ -10,6 +11,9 @@ export default {
   name: 'MemoryUsage',
   components: {
     MemoryGraph,
+    GlLoadingIcon,
+    GlSprintf,
+    GlLink,
   },
   props: {
     metricsUrl: {
@@ -47,45 +51,22 @@ export default {
       return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
     },
     memoryChangeMessage() {
-      const messageProps = {
-        memoryFrom: this.memoryFrom,
-        memoryTo: this.memoryTo,
-        metricsLinkStart: `<a href="${this.metricsMonitoringUrl}">`,
-        metricsLinkEnd: '</a>',
-        emphasisStart: '<b>',
-        emphasisEnd: '</b>',
-      };
       const memoryTo = Number(this.memoryTo);
       const memoryFrom = Number(this.memoryFrom);
-      let memoryUsageMsg = '';
 
       if (memoryTo > memoryFrom) {
-        memoryUsageMsg = sprintf(
-          s__(
-            'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
-          ),
-          messageProps,
-          false,
+        return s__(
+          'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
         );
       } else if (memoryTo < memoryFrom) {
-        memoryUsageMsg = sprintf(
-          s__(
-            'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
-          ),
-          messageProps,
-          false,
-        );
-      } else {
-        memoryUsageMsg = sprintf(
-          s__(
-            'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB',
-          ),
-          messageProps,
-          false,
+        return s__(
+          'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
         );
       }
 
-      return memoryUsageMsg;
+      return s__(
+        'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB',
+      );
     },
   },
   mounted() {
@@ -155,14 +136,23 @@ export default {
 <template>
   <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
     <p v-if="shouldShowLoading" class="usage-info js-usage-info usage-info-loading">
-      <i class="fa fa-spinner fa-spin usage-info-load-spinner" aria-hidden="true"> </i
-      >{{ s__('mrWidget|Loading deployment statistics') }}
+      <gl-loading-icon class="usage-info-load-spinner" />{{
+        s__('mrWidget|Loading deployment statistics')
+      }}
+    </p>
+    <p v-if="shouldShowMemoryGraph" class="usage-info js-usage-info">
+      <gl-sprintf :message="memoryChangeMessage">
+        <template #metricsLink="{ content }">
+          <gl-link :href="metricsMonitoringUrl">{{ content }}</gl-link>
+        </template>
+        <template #emphasis="{content}">
+          <strong>{{ content }}</strong>
+        </template>
+        <template #memoryFrom>{{ memoryFrom }}</template>
+        <template #memoryTo>{{ memoryTo }}</template>
+      </gl-sprintf>
     </p>
-    <p
-      v-if="shouldShowMemoryGraph"
-      class="usage-info js-usage-info"
-      v-html="memoryChangeMessage"
-    ></p>
+
     <p v-if="shouldShowLoadFailure" class="usage-info js-usage-info usage-info-failed">
       {{ s__('mrWidget|Failed to load deployment statistics') }}
     </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
index 24174c29d51..b6b5b56e5aa 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
@@ -1,13 +1,12 @@
 <script>
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlButton,
     GlLoadingIcon,
-    Icon,
+    GlIcon,
   },
   props: {
     title: {
@@ -66,7 +65,7 @@ export default {
           @click="toggleCollapsed"
         >
           <gl-loading-icon v-if="isLoading" />
-          <icon v-else :name="arrowIconName" class="js-icon" />
+          <gl-icon v-else :name="arrowIconName" class="js-icon" />
         </button>
         <gl-button
           variant="link"
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 19a222462b3..a2636ce52ad 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,13 +1,12 @@
 <script>
-import { GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import { WARNING, DANGER, WARNING_MESSAGE_CLASS, DANGER_MESSAGE_CLASS } from '../constants';
 
 export default {
   name: 'MrWidgetAlertMessage',
   components: {
     GlLink,
-    Icon,
+    GlIcon,
   },
   props: {
     type: {
@@ -40,7 +39,7 @@ export default {
   <div class="m-3 ml-7" :class="messageClass">
     <slot></slot>
     <gl-link v-if="helpPath" :href="helpPath" target="_blank">
-      <icon :size="16" name="question-o" class="align-middle" />
+      <gl-icon :size="16" name="question-o" class="align-middle" />
     </gl-link>
   </div>
 </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 897f706290d..814d4e8341e 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
@@ -1,24 +1,33 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import Mousetrap from 'mousetrap';
 import { escape } from 'lodash';
+import {
+  GlButton,
+  GlDropdown,
+  GlDropdownSectionHeader,
+  GlDropdownItem,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { n__, s__, sprintf } from '~/locale';
 import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
-import Icon from '~/vue_shared/components/icon.vue';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import tooltip from '~/vue_shared/directives/tooltip';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import MrWidgetIcon from './mr_widget_icon.vue';
 
 export default {
   name: 'MRWidgetHeader',
   components: {
-    Icon,
     clipboardButton,
     TooltipOnTruncate,
     MrWidgetIcon,
+    GlButton,
+    GlDropdown,
+    GlDropdownSectionHeader,
+    GlDropdownItem,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     mr: {
@@ -124,62 +133,59 @@ export default {
 
       <div class="branch-actions d-flex">
         <template v-if="mr.isOpen">
-          <a
+          <span
             v-if="!mr.sourceBranchRemoved"
-            v-tooltip
-            :href="webIdePath"
+            v-gl-tooltip
             :title="ideButtonTitle"
-            :class="{ disabled: !mr.canPushToSourceBranch }"
-            class="btn btn-default js-web-ide d-none d-md-inline-block gl-mr-3"
-            data-placement="bottom"
-            tabindex="0"
-            role="button"
-            data-qa-selector="open_in_web_ide_button"
+            class="gl-display-none d-md-inline-block gl-mr-3"
+            :tabindex="!mr.canPushToSourceBranch ? 0 : null"
           >
-            {{ s__('mrWidget|Open in Web IDE') }}
-          </a>
-          <button
+            <gl-button
+              :href="webIdePath"
+              :disabled="!mr.canPushToSourceBranch"
+              class="js-web-ide"
+              tabindex="0"
+              role="button"
+              data-qa-selector="open_in_web_ide_button"
+            >
+              {{ s__('mrWidget|Open in Web IDE') }}
+            </gl-button>
+          </span>
+          <gl-button
             :disabled="mr.sourceBranchRemoved"
             data-target="#modal_merge_info"
             data-toggle="modal"
-            class="btn btn-default js-check-out-branch gl-mr-3"
-            type="button"
+            class="js-check-out-branch gl-mr-3"
           >
             {{ s__('mrWidget|Check out branch') }}
-          </button>
+          </gl-button>
         </template>
-        <span class="dropdown">
-          <button
-            type="button"
-            class="btn dropdown-toggle qa-dropdown-toggle"
-            data-toggle="dropdown"
-            :aria-label="__('Download as')"
-            aria-haspopup="true"
-            aria-expanded="false"
+        <gl-dropdown
+          v-gl-tooltip
+          :title="__('Download as')"
+          :aria-label="__('Download as')"
+          icon="download"
+          right
+          data-qa-selector="download_dropdown"
+        >
+          <gl-dropdown-section-header>{{ s__('Download as') }}</gl-dropdown-section-header>
+          <gl-dropdown-item
+            :href="mr.emailPatchesPath"
+            class="js-download-email-patches"
+            download
+            data-qa-selector="download_email_patches"
           >
-            <icon name="download" /> <i class="fa fa-caret-down" aria-hidden="true"> </i>
-          </button>
-          <ul class="dropdown-menu dropdown-menu-right">
-            <li>
-              <a
-                :href="mr.emailPatchesPath"
-                class="js-download-email-patches qa-download-email-patches"
-                download
-              >
-                {{ s__('mrWidget|Email patches') }}
-              </a>
-            </li>
-            <li>
-              <a
-                :href="mr.plainDiffPath"
-                class="js-download-plain-diff qa-download-plain-diff"
-                download
-              >
-                {{ s__('mrWidget|Plain diff') }}
-              </a>
-            </li>
-          </ul>
-        </span>
+            {{ s__('mrWidget|Email patches') }}
+          </gl-dropdown-item>
+          <gl-dropdown-item
+            :href="mr.plainDiffPath"
+            class="js-download-plain-diff"
+            download
+            data-qa-selector="download_plain_diff"
+          >
+            {{ s__('mrWidget|Plain diff') }}
+          </gl-dropdown-item>
+        </gl-dropdown>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue
index e1659d9a167..472df8e3110 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue
@@ -1,8 +1,8 @@
 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
-  components: { Icon },
+  components: { GlIcon },
   props: {
     name: {
       type: String,
@@ -14,6 +14,6 @@ export default {
 
 <template>
   <div class="circle-icon-container gl-mr-3 align-self-start align-self-lg-center">
-    <icon :name="name" :size="24" />
+    <gl-icon :name="name" :size="24" />
   </div>
 </template>
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 7326bd0804d..5066a88b52b 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
@@ -1,8 +1,15 @@
 <script>
-/* eslint-disable vue/require-default-prop */
-import { GlIcon, GlLink, GlLoadingIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+/* eslint-disable vue/require-default-prop, vue/no-v-html */
+import {
+  GlIcon,
+  GlLink,
+  GlLoadingIcon,
+  GlSprintf,
+  GlTooltip,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import mrWidgetPipelineMixin from 'ee_else_ce/vue_merge_request_widget/mixins/mr_widget_pipeline';
-import { s__ } from '~/locale';
+import { s__, n__ } from '~/locale';
 import PipelineStage from '~/pipelines/components/pipelines_list/stage.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
@@ -15,6 +22,7 @@ export default {
     GlLoadingIcon,
     GlIcon,
     GlSprintf,
+    GlTooltip,
     PipelineStage,
     TooltipOnTruncate,
     LinkedPipelinesMiniList: () =>
@@ -33,6 +41,11 @@ export default {
       type: String,
       required: false,
     },
+    buildsWithCoverage: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     // This prop needs to be camelCase, html attributes are case insensive
     // https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case
     hasCi: {
@@ -100,6 +113,16 @@ export default {
       }
       return '';
     },
+    pipelineCoverageJobNumberText() {
+      return n__('from %d job', 'from %d jobs', this.buildsWithCoverage.length);
+    },
+    pipelineCoverageTooltipDescription() {
+      return n__(
+        'Coverage value for this pipeline was calculated by the coverage value of %d job.',
+        'Coverage value for this pipeline was calculated by averaging the resulting coverage values of %d jobs.',
+        this.buildsWithCoverage.length,
+      );
+    },
   },
   errorText: s__(
     'Pipeline|Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation%{linkEnd}.',
@@ -139,7 +162,7 @@ export default {
         >
           <gl-icon
             name="question"
-            :small="12"
+            :size="12"
             tabindex="0"
             role="text"
             :aria-label="__('Link to go to GitLab pipeline documentation')"
@@ -189,14 +212,30 @@ export default {
             </div>
             <div v-if="pipeline.coverage" class="coverage" data-testid="pipeline-coverage">
               {{ s__('Pipeline|Coverage') }} {{ pipeline.coverage }}%
-
               <span
                 v-if="pipelineCoverageDelta"
                 :class="coverageDeltaClass"
                 data-testid="pipeline-coverage-delta"
+                >({{ pipelineCoverageDelta }}%)</span
               >
-                ({{ pipelineCoverageDelta }}%)
+
+              {{ pipelineCoverageJobNumberText }}
+              <span ref="pipelineCoverageQuestion">
+                <gl-icon name="question" :size="12" />
               </span>
+              <gl-tooltip
+                :target="() => $refs.pipelineCoverageQuestion"
+                data-testid="pipeline-coverage-tooltip"
+              >
+                {{ pipelineCoverageTooltipDescription }}
+                <div
+                  v-for="(build, index) in buildsWithCoverage"
+                  :key="`${build.name}-${index}`"
+                  class="gl-mt-3 gl-text-left gl-px-4"
+                >
+                  {{ build.name }} ({{ build.coverage }}%)
+                </div>
+              </gl-tooltip>
             </div>
           </div>
         </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
index 5c307b5ff0c..55efd7e7d3b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
@@ -77,6 +77,7 @@ export default {
     <mr-widget-pipeline
       :pipeline="pipeline"
       :pipeline-coverage-delta="mr.pipelineCoverageDelta"
+      :builds-with-coverage="mr.buildsWithCoverage"
       :ci-status="mr.ciStatus"
       :has-ci="mr.hasCI"
       :pipeline-must-succeed="mr.onlyAllowMergeIfPipelineSucceeds"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
index 1b3b589c32f..56a50b55f9d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { s__ } from '~/locale';
 
 export default {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
index 936fdc9aff5..a9d148505e1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
@@ -108,7 +108,9 @@ export default {
       </div>
     </template>
     <div class="row">
-      <div class="col-md-5 order-md-last col-12 gl-mt-5 mt-md-n1 pt-md-1 svg-content svg-225">
+      <div
+        class="col-md-5 order-md-last col-12 gl-mt-5 gl-mt-md-n2! gl-pt-md-2 svg-content svg-225"
+      >
         <img data-testid="pipeline-image" :src="pipelineSvgPath" />
       </div>
       <div class="col-md-7 order-md-first col-12">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
index c38c41f13b6..ebd2b5cd22d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
@@ -1,10 +1,10 @@
 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlButton,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -22,20 +22,26 @@ export default {
       type: String,
       required: true,
     },
+    size: {
+      type: String,
+      required: false,
+      default: 'medium',
+    },
   },
 };
 </script>
 <template>
-  <a
+  <gl-button
     v-gl-tooltip
     :title="display.tooltip"
     :href="link"
+    :size="size"
     target="_blank"
     rel="noopener noreferrer nofollow"
     :class="cssClass"
     data-track-event="open_review_app"
     data-track-label="review_app"
   >
-    {{ display.text }} <icon class="fgray" name="external-link" />
-  </a>
+    {{ display.text }} <gl-icon class="fgray" name="external-link" />
+  </gl-button>
 </template>
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 dab0540f44e..859f2c57598 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,5 +1,5 @@
 <script>
-import { GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlSprintf } from '@gitlab/ui';
 import tooltip from '../../vue_shared/directives/tooltip';
 import { __ } from '../../locale';
 
@@ -9,6 +9,7 @@ export default {
     tooltipTitle: __('A user with write access to the source branch selected this option'),
   },
   components: {
+    GlIcon,
     GlSprintf,
   },
   directives: {
@@ -26,12 +27,11 @@ export default {
         </template>
       </gl-sprintf>
     </span>
-    <i
+    <gl-icon
       v-tooltip
       :title="$options.i18n.tooltipTitle"
       :aria-label="$options.i18n.tooltipTitle"
-      class="fa fa-question-circle"
-    >
-    </i>
+      name="question-o"
+    />
   </p>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
index d52e6d38ac6..bdcea9871ea 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
@@ -1,13 +1,12 @@
 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
+/* eslint-disable vue/no-v-html */
+import { GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, n__, sprintf, s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
-    GlDeprecatedButton,
+    GlButton,
   },
   props: {
     isSquashEnabled: {
@@ -80,20 +79,19 @@ export default {
       class="js-mr-widget-commits-count mr-widget-extension clickable d-flex align-items-center px-3 py-2"
       @click="toggle()"
     >
-      <gl-deprecated-button
+      <gl-button
         :aria-label="ariaLabel"
-        variant="blank"
-        class="commit-edit-toggle square s24 gl-mr-3"
+        category="tertiary"
+        class="commit-edit-toggle gl-mr-3"
+        :icon="collapseIcon"
         @click.stop="toggle()"
-      >
-        <icon :name="collapseIcon" :size="16" />
-      </gl-deprecated-button>
+      />
       <span v-if="expanded">{{ __('Collapse') }}</span>
       <span v-else>
         <span class="vertical-align-middle" v-html="message"></span>
-        <gl-deprecated-button variant="link" class="modify-message-button">
+        <gl-button variant="link" class="modify-message-button">
           {{ modifyLinkMessage }}
-        </gl-deprecated-button>
+        </gl-button>
       </span>
     </div>
     <div v-show="expanded"><slot></slot></div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
index 9df0c045fe4..a5ec095b8ec 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlButton } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import { stripHtml } from '~/lib/utils/text_utility';
 import statusIcon from '../mr_widget_status_icon.vue';
@@ -8,6 +9,7 @@ export default {
   name: 'MRWidgetFailedToMerge',
 
   components: {
+    GlButton,
     statusIcon,
   },
 
@@ -84,14 +86,14 @@ export default {
           <span v-else> {{ s__('mrWidget|Merge failed.') }} </span>
           <span :class="{ 'has-custom-error': mr.mergeError }"> {{ timerText }} </span>
         </span>
-        <button
-          class="btn btn-default btn-sm js-refresh-button"
+        <gl-button
+          size="small"
+          data-testid="merge-request-failed-refresh-button"
           data-qa-selector="merge_request_error_content"
-          type="button"
           @click="refresh"
         >
           {{ s__('mrWidget|Refresh now') }}
-        </button>
+        </gl-button>
       </div>
     </template>
   </div>
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 166700dbcbf..58839251edc 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,6 +1,6 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { s__, __ } from '~/locale';
@@ -19,6 +19,7 @@ export default {
     statusIcon,
     ClipboardButton,
     GlLoadingIcon,
+    GlButton,
   },
   props: {
     mr: {
@@ -112,48 +113,52 @@ export default {
           :date-title="mr.metrics.mergedAt"
           :date-readable="mr.metrics.readableMergedAt"
         />
-        <a
+        <gl-button
           v-if="mr.canRevertInCurrentMR"
           v-tooltip
           :title="revertTitle"
-          class="btn btn-close btn-sm"
+          size="small"
+          category="secondary"
+          variant="warning"
           href="#modal-revert-commit"
           data-toggle="modal"
           data-container="body"
         >
           {{ revertLabel }}
-        </a>
-        <a
+        </gl-button>
+        <gl-button
           v-else-if="mr.revertInForkPath"
           v-tooltip
           :href="mr.revertInForkPath"
           :title="revertTitle"
-          class="btn btn-close btn-sm"
+          size="small"
+          category="secondary"
+          variant="warning"
           data-method="post"
         >
           {{ revertLabel }}
-        </a>
-        <a
+        </gl-button>
+        <gl-button
           v-if="mr.canCherryPickInCurrentMR"
           v-tooltip
           :title="cherryPickTitle"
-          class="btn btn-default btn-sm"
+          size="small"
           href="#modal-cherry-pick-commit"
           data-toggle="modal"
           data-container="body"
         >
           {{ cherryPickLabel }}
-        </a>
-        <a
+        </gl-button>
+        <gl-button
           v-else-if="mr.cherryPickInForkPath"
           v-tooltip
           :href="mr.cherryPickInForkPath"
           :title="cherryPickTitle"
-          class="btn btn-default btn-sm"
+          size="small"
           data-method="post"
         >
           {{ cherryPickLabel }}
-        </a>
+        </gl-button>
       </div>
       <section class="mr-info-list" data-qa-selector="merged_status_content">
         <p>
@@ -181,14 +186,14 @@ export default {
         </p>
         <p v-if="shouldShowRemoveSourceBranch" class="space-children">
           <span>{{ s__('mrWidget|You can delete the source branch now') }}</span>
-          <button
+          <gl-button
             :disabled="isMakingRequest"
-            type="button"
-            class="btn btn-sm btn-default js-remove-branch-button"
+            size="small"
+            class="js-remove-branch-button"
             @click="removeSourceBranch"
           >
             {{ s__('mrWidget|Delete source branch') }}
-          </button>
+          </gl-button>
         </p>
         <p v-if="shouldShowSourceBranchRemoving">
           <gl-loading-icon :inline="true" />
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 8f38ca69453..83783528cc1 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,4 +1,5 @@
 <script>
+import { GlIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import statusIcon from '../mr_widget_status_icon.vue';
@@ -9,6 +10,7 @@ export default {
     tooltip,
   },
   components: {
+    GlIcon,
     statusIcon,
   },
   props: {
@@ -50,7 +52,7 @@ export default {
       <span class="bold js-branch-text">
         <span class="capitalize"> {{ missingBranchName }} </span>
         {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }}
-        <i v-tooltip :title="message" :aria-label="message" class="fa fa-question-circle"> </i>
+        <gl-icon v-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 794c994bffe..ec0934c5b4b 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,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { GlLoadingIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 import simplePoll from '../../../lib/utils/simple_poll';
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 4d7d49398eb..14a29483d3c 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,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
 
 export default {
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 930a2b68d8e..240bab58297 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,6 +1,7 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { isEmpty } from 'lodash';
-import { GlIcon, GlDeprecatedButton, GlSprintf, GlLink } from '@gitlab/ui';
+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';
@@ -37,7 +38,7 @@ export default {
     GlIcon,
     GlSprintf,
     GlLink,
-    GlDeprecatedButton,
+    GlButton,
     MergeTrainHelperText: () =>
       import('ee_component/vue_merge_request_widget/components/merge_train_helper_text.vue'),
     MergeImmediatelyConfirmationDialog: () =>
@@ -297,16 +298,16 @@ export default {
       <div class="media-body">
         <div class="mr-widget-body-controls media space-children">
           <span class="btn-group">
-            <gl-deprecated-button
-              size="sm"
+            <gl-button
+              size="medium"
+              category="primary"
               class="qa-merge-button accept-merge-request"
               :variant="mergeButtonVariant"
               :disabled="isMergeButtonDisabled"
               :loading="isMakingRequest"
               @click="handleMergeButtonClick(isAutoMergeAvailable)"
+              >{{ mergeButtonText }}</gl-button
             >
-              {{ mergeButtonText }}
-            </gl-deprecated-button>
             <button
               v-if="shouldShowMergeImmediatelyDropdown"
               :disabled="isMergeButtonDisabled"
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 3cf7dc3c4d1..6608381f348 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,11 +1,11 @@
 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { __ } from '~/locale';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -62,7 +62,7 @@ export default {
       rel="noopener noreferrer nofollow"
       data-container="body"
     >
-      <icon name="question" />
+      <gl-icon name="question" />
     </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 44668170fe4..61cc950f058 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
@@ -55,13 +55,15 @@ export default {
   },
   methods: {
     removeWipMutation() {
+      const { mergeRequestQueryVariables } = this;
+
       this.isMakingRequest = true;
 
       this.$apollo
         .mutate({
           mutation: removeWipMutation,
           variables: {
-            ...this.mergeRequestQueryVariables,
+            ...mergeRequestQueryVariables,
             wip: false,
           },
           update(
@@ -83,14 +85,14 @@ export default {
 
             const data = store.readQuery({
               query: getStateQuery,
-              variables: this.mergeRequestQueryVariables,
+              variables: mergeRequestQueryVariables,
             });
             data.project.mergeRequest.workInProgress = workInProgress;
             data.project.mergeRequest.title = title;
             store.writeQuery({
               query: getStateQuery,
               data,
-              variables: this.mergeRequestQueryVariables,
+              variables: mergeRequestQueryVariables,
             });
           },
           optimisticResponse: {
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 c7d9453a5c9..4de41dd5887 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
@@ -1,5 +1,5 @@
 <script>
-import { GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
 import MrWidgetExpanableSection from '../mr_widget_expandable_section.vue';