Merge branch 'embed-button-swap' into 'master'

Switch embed group button

Closes #219851

See merge request gitlab-org/gitlab!38746

app/assets/javascripts/monitoring/components/embeds/embed_group.vue

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import sum from 'lodash/sum';
-import { GlDeprecatedButton, GlCard, GlIcon } from '@gitlab/ui';
+import { GlButton, GlCard, GlIcon } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import { monitoringDashboard } from '~/monitoring/stores';
 import MetricEmbed from './metric_embed.vue';
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlCard,
     GlIcon,
     MetricEmbed,
@@ -78,15 +78,16 @@ export default {
     :body-class="bodyClass"
   >
     <template #header>
-      <gl-deprecated-button
-        class="collapsible-card-btn d-flex text-decoration-none"
+      <gl-button
+        class="collapsible-card-btn gl-display-flex gl-text-decoration-none gl-reset-color! gl-hover-text-blue-800! gl-shadow-none!"
         :aria-label="buttonLabel"
         variant="link"
+        category="tertiary"
         @click="toggleCollapsed"
       >
         <gl-icon class="mr-1" :name="arrowIconName" />
         {{ buttonLabel }}
-      </gl-deprecated-button>
+      </gl-button>
     </template>
     <div class="d-flex flex-wrap">
       <metric-embed

spec/frontend/monitoring/components/embeds/embed_group_spec.js

 import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlDeprecatedButton, GlCard } from '@gitlab/ui';
+import { GlButton, GlCard } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import EmbedGroup from '~/monitoring/components/embeds/embed_group.vue';
 import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
@@ -80,7 +80,7 @@ describe('Embed Group', () => {
       metricsWithDataGetter.mockReturnValue([1]);
       mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } });
 
-      wrapper.find(GlDeprecatedButton).trigger('click');
+      wrapper.find(GlButton).trigger('click');
 
       wrapper.vm.$nextTick(() => {
         expect(wrapper.find('.card-body').classes()).toContain('d-none');
@@ -150,14 +150,14 @@ describe('Embed Group', () => {
       metricsWithDataGetter.mockReturnValue([1]);
       mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } });
 
-      expect(wrapper.find(GlDeprecatedButton).text()).toBe('Hide chart');
+      expect(wrapper.find(GlButton).text()).toBe('Hide chart');
     });
 
     it('has a plural label when there are multiple embeds', () => {
       metricsWithDataGetter.mockReturnValue([2]);
       mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } });
 
-      expect(wrapper.find(GlDeprecatedButton).text()).toBe('Hide charts');
+      expect(wrapper.find(GlButton).text()).toBe('Hide charts');
     });
   });
 });