Merge branch...

Merge branch '229331-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javascripts' into 'master'

Migrate Bootstrap button and dropdowns to GitLab UI in app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

See merge request gitlab-org/gitlab!40823

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

@@ -2,24 +2,32 @@
 /* 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';
-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: {
-    GlIcon,
     clipboardButton,
     TooltipOnTruncate,
     MrWidgetIcon,
+    GlButton,
+    GlDropdown,
+    GlDropdownHeader,
+    GlDropdownItem,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     mr: {
@@ -125,63 +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-header>{{ s__('Download as') }}</gl-dropdown-header>
+          <gl-dropdown-item
+            :href="mr.emailPatchesPath"
+            class="js-download-email-patches"
+            download
+            data-qa-selector="download_email_patches"
           >
-            <gl-icon name="download" />
-            <gl-icon name="chevron-down" aria-hidden="true" />
-          </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>

qa/qa/page/merge_request/show.rb

@@ -8,7 +8,7 @@ module QA
         include Page::Component::Issuable::Sidebar
 
         view 'app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue' do
-          element :dropdown_toggle
+          element :download_dropdown
           element :download_email_patches
           element :download_plain_diff
           element :open_in_web_ide_button
@@ -255,12 +255,12 @@ module QA
         end
 
         def view_email_patches
-          click_element :dropdown_toggle
+          click_element :download_dropdown
           visit_link_in_element(:download_email_patches)
         end
 
         def view_plain_diff
-          click_element :dropdown_toggle
+          click_element :download_dropdown
           visit_link_in_element(:download_plain_diff)
         end
 

spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js

@@ -25,10 +25,14 @@ describe('MRWidgetHeader', () => {
     const downloadEmailPatchesEl = vm.$el.querySelector('.js-download-email-patches');
     const downloadPlainDiffEl = vm.$el.querySelector('.js-download-plain-diff');
 
-    expect(downloadEmailPatchesEl.textContent.trim()).toEqual('Email patches');
-    expect(downloadEmailPatchesEl.getAttribute('href')).toEqual('/mr/email-patches');
-    expect(downloadPlainDiffEl.textContent.trim()).toEqual('Plain diff');
-    expect(downloadPlainDiffEl.getAttribute('href')).toEqual('/mr/plainDiffPath');
+    expect(downloadEmailPatchesEl.innerText.trim()).toEqual('Email patches');
+    expect(downloadEmailPatchesEl.querySelector('a').getAttribute('href')).toEqual(
+      '/mr/email-patches',
+    );
+    expect(downloadPlainDiffEl.innerText.trim()).toEqual('Plain diff');
+    expect(downloadPlainDiffEl.querySelector('a').getAttribute('href')).toEqual(
+      '/mr/plainDiffPath',
+    );
   };
 
   describe('computed', () => {