Merge branch '219767-migrate-show-tree-item-button' into 'master'

Migrate deprecated buttons for showing tree items

Closes #219767

See merge request gitlab-org/gitlab!40369

ee/app/assets/javascripts/related_items_tree/components/tree_item.vue

 <script>
 import { mapGetters, mapActions, mapState } from 'vuex';
 
-import { GlTooltipDirective, GlLoadingIcon, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlLoadingIcon, GlButton, GlIcon } from '@gitlab/ui';
 
 import { __ } from '~/locale';
 
@@ -15,7 +15,7 @@ export default {
     GlIcon,
     TreeItemBody,
     GlLoadingIcon,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -85,7 +85,7 @@ export default {
     }"
   >
     <div class="list-item-body d-flex align-items-center">
-      <gl-deprecated-button
+      <gl-button
         v-if="!childrenFetchInProgress && hasChildren"
         v-gl-tooltip.viewport.hover
         :title="chevronTooltip"
@@ -95,7 +95,7 @@ export default {
         @click="handleChevronClick"
       >
         <gl-icon :name="chevronType" />
-      </gl-deprecated-button>
+      </gl-button>
       <gl-loading-icon v-if="childrenFetchInProgress" class="loading-icon" size="sm" />
       <tree-item-body
         class="tree-item-row"

ee/spec/frontend/related_items_tree/components/tree_item_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 
 import TreeItem from 'ee/related_items_tree/components/tree_item.vue';
 import TreeItemBody from 'ee/related_items_tree/components/tree_item_body.vue';
@@ -132,14 +132,14 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders expand/collapse button', () => {
-        const chevronButton = wrapper.find(GlDeprecatedButton);
+        const chevronButton = wrapper.find(GlButton);
 
         expect(chevronButton.isVisible()).toBe(true);
         expect(chevronButton.attributes('title')).toBe('Collapse');
       });
 
       it('has the proper class on the expand/collapse button to avoid dragging', () => {
-        const chevronButton = wrapper.find(GlDeprecatedButton);
+        const chevronButton = wrapper.find(GlButton);
 
         expect(chevronButton.attributes('class')).toContain(treeItemChevronBtnClassName);
       });