Commit 75bc2125 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Merge branch 'migration-monitoring-btn' into 'master'

Migration monitoring button to gl-button in Environment table

Closes #219801

See merge request gitlab-org/gitlab!40444
parents 498292b1 ccf2d16a
<script> <script>
import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { GlButton, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale'; import { __ } from '~/locale';
/** /**
* Renders the Monitoring (Metrics) link in environments table. * Renders the Monitoring (Metrics) link in environments table.
*/ */
export default { export default {
components: { components: {
GlIcon, GlButton,
GlDeprecatedButton,
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
...@@ -26,15 +25,14 @@ export default { ...@@ -26,15 +25,14 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-deprecated-button <gl-button
v-gl-tooltip v-gl-tooltip
:href="monitoringUrl" :href="monitoringUrl"
:title="title" :title="title"
:aria-label="title" :aria-label="title"
class="monitoring-url d-none d-sm-none d-md-block" class="monitoring-url gl-display-none gl-display-sm-none gl-display-md-block"
icon="chart"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
variant="default" variant="default"
> />
<gl-icon name="chart" />
</gl-deprecated-button>
</template> </template>
---
title: Migrating to gl-button in Environments table
merge_request: 40444
author:
type: changed
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlIcon } from '@gitlab/ui'; import { GlButton } from '@gitlab/ui';
import MonitoringComponent from '~/environments/components/environment_monitoring.vue'; import MonitoringComponent from '~/environments/components/environment_monitoring.vue';
describe('Monitoring Component', () => { describe('Monitoring Component', () => {
...@@ -15,8 +15,8 @@ describe('Monitoring Component', () => { ...@@ -15,8 +15,8 @@ describe('Monitoring Component', () => {
}); });
}; };
const findIcons = () => wrapper.findAll(GlIcon); const findButtons = () => wrapper.findAll(GlButton);
const findIconsByName = name => findIcons().filter(icon => icon.props('name') === name); const findButtonsByIcon = icon => findButtons().filter(button => button.props('icon') === icon);
beforeEach(() => { beforeEach(() => {
createWrapper(); createWrapper();
...@@ -30,7 +30,7 @@ describe('Monitoring Component', () => { ...@@ -30,7 +30,7 @@ describe('Monitoring Component', () => {
it('should render a link to environment monitoring page', () => { it('should render a link to environment monitoring page', () => {
expect(wrapper.attributes('href')).toEqual(monitoringUrl); expect(wrapper.attributes('href')).toEqual(monitoringUrl);
expect(findIconsByName('chart').length).toBe(1); expect(findButtonsByIcon('chart').length).toBe(1);
expect(wrapper.attributes('title')).toBe('Monitoring'); expect(wrapper.attributes('title')).toBe('Monitoring');
expect(wrapper.attributes('aria-label')).toBe('Monitoring'); expect(wrapper.attributes('aria-label')).toBe('Monitoring');
}); });
......
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