Merge branch 'ee-jivl-replace-environments-dropdown-with-gitlab-ui-dropdown-master' into 'master'

Change environments dropdown to use gitlab-ui

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

app/assets/javascripts/monitoring/components/dashboard.vue

 <script>
 // ee-only
 import DashboardMixin from 'ee/monitoring/components/dashboard_mixin';
-
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import Flash from '../../flash';
@@ -20,6 +20,8 @@ export default {
     GraphGroup,
     EmptyState,
     Icon,
+    GlDropdown,
+    GlDropdownItem,
   },
 
   // ee-only
@@ -179,28 +181,21 @@ export default {
 <template>
   <div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default">
     <div v-if="showEnvironmentDropdown" class="environments d-flex align-items-center">
-      {{ s__('Metrics|Environment') }}
-      <div class="dropdown prepend-left-10">
-        <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
-          <span>{{ currentEnvironmentName }}</span>
-          <icon name="chevron-down" />
-        </button>
-        <div
-          v-if="store.environmentsData.length > 0"
-          class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"
+      <strong>{{ s__('Metrics|Environment') }}</strong>
+      <gl-dropdown
+        class="prepend-left-10 js-environments-dropdown"
+        toggle-class="dropdown-menu-toggle"
+        :text="currentEnvironmentName"
+        :disabled="store.environmentsData.length === 0"
+      >
+        <gl-dropdown-item
+          v-for="environment in store.environmentsData"
+          :key="environment.id"
+          :active="environment.name === currentEnvironmentName"
+          active-class="is-active"
+          >{{ environment.name }}</gl-dropdown-item
         >
-          <ul>
-            <li v-for="environment in store.environmentsData" :key="environment.id">
-              <a
-                :href="environment.metrics_path"
-                :class="{ 'is-active': environment.name == currentEnvironmentName }"
-                class="dropdown-item"
-                >{{ environment.name }}</a
-              >
-            </li>
-          </ul>
-        </div>
-      </div>
+      </gl-dropdown>
     </div>
     <graph-group
       v-for="(groupData, index) in store.groups"

spec/javascripts/monitoring/dashboard_spec.js

@@ -98,7 +98,7 @@ describe('Dashboard', () => {
       });
     });
 
-    it('renders the dropdown with a number of environments', done => {
+    it('renders the environments dropdown with a number of environments', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showPanels: false },
@@ -107,14 +107,16 @@ describe('Dashboard', () => {
       component.store.storeEnvironmentsData(environmentData);
 
       setTimeout(() => {
-        const dropdownMenuEnvironments = component.$el.querySelectorAll('.dropdown-menu ul li a');
+        const dropdownMenuEnvironments = component.$el.querySelectorAll(
+          '.js-environments-dropdown .dropdown-item',
+        );
 
         expect(dropdownMenuEnvironments.length).toEqual(component.store.environmentsData.length);
         done();
       });
     });
 
-    it('hides the dropdown list when there is no environments', done => {
+    it('hides the environments dropdown list when there is no environments', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showPanels: false },
@@ -123,14 +125,16 @@ describe('Dashboard', () => {
       component.store.storeEnvironmentsData([]);
 
       setTimeout(() => {
-        const dropdownMenuEnvironments = component.$el.querySelectorAll('.dropdown-menu ul');
+        const dropdownMenuEnvironments = component.$el.querySelectorAll(
+          '.js-environments-dropdown .dropdown-item',
+        );
 
         expect(dropdownMenuEnvironments.length).toEqual(0);
         done();
       });
     });
 
-    it('renders the dropdown with a single is-active element', done => {
+    it('renders the environments dropdown with a single is-active element', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showPanels: false },
@@ -139,14 +143,12 @@ describe('Dashboard', () => {
       component.store.storeEnvironmentsData(environmentData);
 
       setTimeout(() => {
-        const dropdownIsActiveElement = component.$el.querySelectorAll(
-          '.dropdown-menu ul li a.is-active',
+        const dropdownItems = component.$el.querySelectorAll(
+          '.js-environments-dropdown .dropdown-item[active="true"]',
         );
 
-        expect(dropdownIsActiveElement.length).toEqual(1);
-        expect(dropdownIsActiveElement[0].textContent.trim()).toEqual(
-          component.currentEnvironmentName,
-        );
+        expect(dropdownItems.length).toEqual(1);
+        expect(dropdownItems[0].textContent.trim()).toEqual(component.currentEnvironmentName);
         done();
       });
     });