Merge branch '7066-fix-hover-state-of-license-management-dropdown' into 'master'

Resolve "Fix hover state of License Management dropdown"

Closes #7066

See merge request gitlab-org/gitlab-ee!9237

ee/app/assets/javascripts/vue_shared/license_management/components/license_management_row.vue

 <script>
 import { mapActions } from 'vuex';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import IssueStatusIcon from '~/reports/components/issue_status_icon.vue';
@@ -13,6 +14,8 @@ const invisibleClass = 'invisible';
 export default {
   name: 'LicenseManagementRow',
   components: {
+    GlDropdown,
+    GlDropdownItem,
     Icon,
     IssueStatusIcon,
   },
@@ -56,27 +59,20 @@ export default {
     <span class="js-license-name">{{ license.name }}</span>
     <div class="float-right">
       <div class="d-flex">
-        <div class="dropdown">
-          <button
-            class="btn btn-secondary dropdown-toggle"
-            type="button"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
-          >
-            <icon class="float-right" name="chevron-down" /> {{ dropdownText }}
-          </button>
-          <div class="dropdown-menu dropdown-menu-right">
-            <button class="dropdown-item" type="button" @click="approveLicense(license)">
-              <icon :class="approveIconClass" name="mobile-issue-close" />
-              {{ $options[$options.LICENSE_APPROVAL_STATUS.APPROVED] }}
-            </button>
-            <button class="dropdown-item" type="button" @click="blacklistLicense(license)">
-              <icon :class="blacklistIconClass" name="mobile-issue-close" />
-              {{ $options[$options.LICENSE_APPROVAL_STATUS.BLACKLISTED] }}
-            </button>
-          </div>
-        </div>
+        <gl-dropdown
+          :text="dropdownText"
+          toggle-class="d-flex justify-content-between align-items-center"
+          right
+        >
+          <gl-dropdown-item @click="approveLicense(license)">
+            <icon :class="approveIconClass" name="mobile-issue-close" />
+            {{ $options[$options.LICENSE_APPROVAL_STATUS.APPROVED] }}
+          </gl-dropdown-item>
+          <gl-dropdown-item @click="blacklistLicense(license)">
+            <icon :class="blacklistIconClass" name="mobile-issue-close" />
+            {{ $options[$options.LICENSE_APPROVAL_STATUS.BLACKLISTED] }}
+          </gl-dropdown-item>
+        </gl-dropdown>
         <button
           class="btn btn-blank js-remove-button"
           type="button"

ee/changelogs/unreleased/7066-fix-hover-state-of-license-management-dropdown.yml

+---
+title: Uses GLDropdown for licence management
+merge_request: 9237
+author:
+type: other

ee/spec/javascripts/license_management/components/license_management_row_spec.js

@@ -156,7 +156,7 @@ describe('LicenseManagementRow', () => {
     });
 
     it('renders computed property dropdownText into dropdown toggle', () => {
-      const dropdownEl = vm.$el.querySelector('.dropdown [data-toggle="dropdown"]');
+      const dropdownEl = vm.$el.querySelector('.dropdown-toggle');
 
       expect(dropdownEl.innerText.trim()).toBe(vm.dropdownText);
     });