Merge branch 'russell/migrate-button-for-approvers-list-item' into 'master'

Replace GlDeprecatedButton with GlButton in approvers_list_item.vue

Closes #219795

See merge request gitlab-org/gitlab!40331

ee/app/assets/javascripts/approvals/components/approvers_list_item.vue

 <script>
-import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import Avatar from '~/vue_shared/components/project_avatar/default.vue';
 import HiddenGroupsItem from './hidden_groups_item.vue';
 import { TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS } from '../constants';
@@ -8,11 +8,13 @@ const types = [TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS];
 
 export default {
   components: {
-    GlDeprecatedButton,
-    GlIcon,
+    GlButton,
     Avatar,
     HiddenGroupsItem,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     approver: {
       type: Object,
@@ -41,9 +43,14 @@ export default {
       <template v-else>
         <avatar :project="approver" :size="24" /><span>{{ displayName }}</span>
       </template>
-      <gl-deprecated-button variant="none" class="ml-auto" @click="$emit('remove', approver)">
-        <gl-icon name="remove" :aria-label="__('Remove')" />
-      </gl-deprecated-button>
+      <gl-button
+        v-gl-tooltip
+        class="ml-auto"
+        icon="remove"
+        :aria-label="__('Remove')"
+        :title="__('Remove')"
+        @click="$emit('remove', approver)"
+      />
     </li>
   </transition>
 </template>

ee/spec/frontend/approvals/components/approvers_list_item_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS } from 'ee/approvals/constants';
 import ApproversListItem from 'ee/approvals/components/approvers_list_item.vue';
 import HiddenGroupsItem from 'ee/approvals/components/hidden_groups_item.vue';
@@ -47,7 +47,7 @@ describe('Approvals ApproversListItem', () => {
     });
 
     it('when remove clicked, emits remove', () => {
-      const button = wrapper.find(GlDeprecatedButton);
+      const button = wrapper.find(GlButton);
       button.vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {