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

app/assets/javascripts/environments/components/environment_monitoring.vue

 <script>
-import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
 export default {
   components: {
-    GlIcon,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -26,15 +25,14 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-button
+  <gl-button
     v-gl-tooltip
     :href="monitoringUrl"
     :title="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"
     variant="default"
-  >
-    <gl-icon name="chart" />
-  </gl-deprecated-button>
+  />
 </template>

changelogs/unreleased/migration-monitoring-btn.yml

+---
+title: Migrating to gl-button in Environments table
+merge_request: 40444
+author:
+type: changed

spec/frontend/environments/environment_monitoring_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import MonitoringComponent from '~/environments/components/environment_monitoring.vue';
 
 describe('Monitoring Component', () => {
@@ -15,8 +15,8 @@ describe('Monitoring Component', () => {
     });
   };
 
-  const findIcons = () => wrapper.findAll(GlIcon);
-  const findIconsByName = name => findIcons().filter(icon => icon.props('name') === name);
+  const findButtons = () => wrapper.findAll(GlButton);
+  const findButtonsByIcon = icon => findButtons().filter(button => button.props('icon') === icon);
 
   beforeEach(() => {
     createWrapper();
@@ -30,7 +30,7 @@ describe('Monitoring Component', () => {
 
   it('should render a link to environment monitoring page', () => {
     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('aria-label')).toBe('Monitoring');
   });