Merge branch 'eread/migrate-env-dashboard-dropdown' into 'master'

Migrate environment dashboard dropdown

See merge request gitlab-org/gitlab!48318

ee/app/assets/javascripts/environments_dashboard/components/dashboard/project_header.vue

 <script>
-import { GlTooltipDirective, GlLink, GlButton, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 
 export default {
   components: {
+    GlDropdown,
+    GlDropdownItem,
     GlIcon,
     ProjectAvatar,
     GlLink,
-    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -32,9 +33,9 @@ export default {
 
 <template>
   <div
-    class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2 mb-3"
+    class="gl-display-flex gl-align-items-center page-title-holder text-secondary gl-justify-content-space-between pb-2 mb-3"
   >
-    <div class="d-flex align-items-center">
+    <div class="gl-display-flex gl-align-items-center">
       <project-avatar :project="project.namespace" :size="20" class="flex-shrink-0" />
       <gl-link class="js-namespace-link text-secondary" :href="`/${project.namespace.full_path}`">
         <span class="js-namespace gl-mr-3"> {{ project.namespace.name }} </span>
@@ -45,23 +46,23 @@ export default {
         <span class="js-name gl-mr-3"> {{ project.name }} </span>
       </gl-link>
     </div>
-    <div class="dropdown js-more-actions">
-      <button
+    <div class="gl-display-flex js-more-actions">
+      <gl-dropdown
+        toggle-class="js-more-actions-toggle gl-display-flex gl-align-items-center gl-px-3! gl-bg-transparent gl-shadow-none!"
+        right
+      >
+        <template #button-content>
+          <gl-icon
             v-gl-tooltip
-        class="js-more-actions-toggle d-flex align-items-center ml-2 btn btn-transparent"
-        type="button"
-        data-toggle="dropdown"
             :title="$options.moreActionsText"
-      >
-        <gl-icon name="ellipsis_v" class="text-secondary" />
-      </button>
-      <ul class="dropdown-menu dropdown-menu-right">
-        <li>
-          <gl-button class="js-remove-button" variant="link" @click="onRemove()">
+            name="ellipsis_v"
+            class="text-secondary"
+          />
+        </template>
+        <gl-dropdown-item class="js-remove-button" variant="link" @click="onRemove()">
           <span class="text-danger"> {{ $options.removeProjectText }} </span>
-          </gl-button>
-        </li>
-      </ul>
+        </gl-dropdown-item>
+      </gl-dropdown>
     </div>
   </div>
 </template>

ee/spec/frontend/environments_dashboard/components/__snapshots__/project_header_spec.js.snap

@@ -2,10 +2,10 @@
 
 exports[`Project Header matches the snapshot 1`] = `
 <div
-  class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2 mb-3"
+  class="gl-display-flex gl-align-items-center page-title-holder text-secondary gl-justify-content-space-between pb-2 mb-3"
 >
   <div
-    class="d-flex align-items-center"
+    class="gl-display-flex gl-align-items-center"
   >
     <project-avatar-stub
       class="flex-shrink-0"
@@ -48,31 +48,26 @@ exports[`Project Header matches the snapshot 1`] = `
   </div>
    
   <div
-    class="dropdown js-more-actions"
+    class="gl-display-flex js-more-actions"
   >
-    <button
-      class="js-more-actions-toggle d-flex align-items-center ml-2 btn btn-transparent"
-      data-toggle="dropdown"
-      title="More actions"
-      type="button"
+    <gl-dropdown-stub
+      category="primary"
+      headertext=""
+      right=""
+      size="medium"
+      text=""
+      toggleclass="js-more-actions-toggle gl-display-flex gl-align-items-center gl-px-3! gl-bg-transparent gl-shadow-none!"
+      variant="default"
     >
-      <gl-icon-stub
-        class="text-secondary"
-        name="ellipsis_v"
-        size="16"
-      />
-    </button>
        
-    <ul
-      class="dropdown-menu dropdown-menu-right"
-    >
-      <li>
-        <gl-button-stub
-          buttontextclasses=""
-          category="primary"
+      <gl-dropdown-item-stub
+        avatarurl=""
         class="js-remove-button"
-          icon=""
-          size="medium"
+        iconcolor=""
+        iconname=""
+        iconrightarialabel=""
+        iconrightname=""
+        secondarytext=""
         variant="link"
       >
         <span
@@ -80,9 +75,8 @@ exports[`Project Header matches the snapshot 1`] = `
         >
            Remove 
         </span>
-        </gl-button-stub>
-      </li>
-    </ul>
+      </gl-dropdown-item-stub>
+    </gl-dropdown-stub>
   </div>
 </div>
 `;

ee/spec/frontend/environments_dashboard/components/project_header_spec.js

-import { GlButton } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import component from 'ee/environments_dashboard/components/dashboard/project_header.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
@@ -66,21 +66,18 @@ describe('Project Header', () => {
   describe('more actions', () => {
     it('should list "remove" as an action', () => {
       const removeLink = wrapper
-        .find('.dropdown-menu')
-        .findAll('li')
+        .find(GlDropdown)
+        .findAll(GlDropdownItem)
         .filter(w => w.text() === 'Remove');
       expect(removeLink.exists()).toBe(true);
     });
 
     it('should emit a "remove" event when "remove" is clicked', () => {
       const removeLink = wrapper
-        .find('.dropdown-menu')
-        .findAll('li')
+        .find(GlDropdown)
+        .findAll(GlDropdownItem)
         .filter(w => w.text() === 'Remove');
-      removeLink
-        .at(0)
-        .find(GlButton)
-        .vm.$emit('click');
+      removeLink.at(0).vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('remove')).toContainEqual([propsData.project.remove_path]);