Migrate MR widget header components to GitLab UI

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -2,7 +2,13 @@
 /* eslint-disable vue/no-v-html */
 import Mousetrap from 'mousetrap';
 import { escape } from 'lodash';
-import { GlIcon } from '@gitlab/ui';
+import {
+  GlButton,
+  GlNewDropdown as GlDropdown,
+  GlNewDropdownHeader as GlDropdownHeader,
+  GlNewDropdownItem as GlDropdownItem,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { n__, s__, sprintf } from '~/locale';
 import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -13,13 +19,16 @@ import MrWidgetIcon from './mr_widget_icon.vue';
 export default {
   name: 'MRWidgetHeader',
   components: {
-    GlIcon,
     clipboardButton,
     TooltipOnTruncate,
     MrWidgetIcon,
+    GlButton,
+    GlDropdown,
+    GlDropdownHeader,
+    GlDropdownItem,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     mr: {
@@ -125,63 +134,51 @@ export default {
 
       <div class="branch-actions d-flex">
         <template v-if="mr.isOpen">
-          <a
+          <gl-button
             v-if="!mr.sourceBranchRemoved"
-            v-tooltip
+            v-gl-tooltip
             :href="webIdePath"
             :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"
+            :disabled="!mr.canPushToSourceBranch"
+            class="js-web-ide d-none d-md-inline-block gl-mr-3"
             tabindex="0"
             role="button"
             data-qa-selector="open_in_web_ide_button"
           >
             {{ s__('mrWidget|Open in Web IDE') }}
-          </a>
-          <button
+          </gl-button>
+          <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"
+        <gl-dropdown
+          v-gl-tooltip
+          :title="__('Download as')"
           :aria-label="__('Download as')"
-            aria-haspopup="true"
-            aria-expanded="false"
+          icon="download"
+          right
         >
-            <gl-icon name="download" />
-            <gl-icon name="chevron-down" aria-hidden="true" />
-          </button>
-          <ul class="dropdown-menu dropdown-menu-right">
-            <li>
-              <a
+          <gl-dropdown-header>{{ s__('Download as') }}</gl-dropdown-header>
+          <gl-dropdown-item
             :href="mr.emailPatchesPath"
             class="js-download-email-patches qa-download-email-patches"
             download
           >
             {{ s__('mrWidget|Email patches') }}
-              </a>
-            </li>
-            <li>
-              <a
+          </gl-dropdown-item>
+          <gl-dropdown-item
             :href="mr.plainDiffPath"
             class="js-download-plain-diff qa-download-plain-diff"
             download
           >
             {{ s__('mrWidget|Plain diff') }}
-              </a>
-            </li>
-          </ul>
-        </span>
+          </gl-dropdown-item>
+        </gl-dropdown>
       </div>
     </div>
   </div>