Commit 70c13de9 authored by Jose Vargas's avatar Jose Vargas

Change environments dropdown to use gitlab-ui

parent f7fcfc77
<script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import Flash from '../../flash';
......@@ -17,6 +18,8 @@ export default {
GraphGroup,
EmptyState,
Icon,
GlDropdown,
GlDropdownItem,
},
props: {
hasMetrics: {
......@@ -157,28 +160,21 @@ export default {
<template>
<div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default">
<div 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"
>
<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
<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
>
</li>
</ul>
</div>
</div>
</gl-dropdown>
</div>
<graph-group
v-for="(groupData, index) in store.groups"
......
......@@ -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();
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment