Change environments dropdown to use gitlab-ui
This commit is contained in:
parent
f7fcfc7720
commit
70c13de9b1
|
@ -1,4 +1,5 @@
|
|||
<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"
|
||||
>
|
||||
<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"
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue