Turns the view more participants button into a gl-button

app/assets/javascripts/sidebar/components/participants/participants.vue

 <script>
-import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { __, n__, sprintf } from '~/locale';
 import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 
@@ -8,9 +8,10 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    userAvatarImage,
+    GlButton,
     GlIcon,
     GlLoadingIcon,
+    userAvatarImage,
   },
   props: {
     loading: {
@@ -124,9 +125,13 @@ export default {
       </div>
     </div>
     <div v-if="hasMoreParticipants" class="participants-more hide-collapsed">
-      <button type="button" class="btn-transparent btn-link" @click="toggleMoreParticipants">
-        {{ toggleLabel }}
-      </button>
+      <gl-button
+        variant="link"
+        button-text-classes="gl-text-secondary"
+        data-testid="more-participants"
+        @click="toggleMoreParticipants"
+        >{{ toggleLabel }}</gl-button
+      >
     </div>
   </div>
 </template>

spec/frontend/sidebar/participants_spec.js

@@ -17,8 +17,7 @@ const PARTICIPANT_LIST = [PARTICIPANT, { ...PARTICIPANT, id: 2 }, { ...PARTICIPA
 describe('Participants', () => {
   let wrapper;
 
-  const getMoreParticipantsButton = () => wrapper.find('button');
-
+  const getMoreParticipantsButton = () => wrapper.find('[data-testid="more-participants"]');
   const getCollapsedParticipantsCount = () => wrapper.find('[data-testid="collapsed-count"]');
 
   const mountComponent = (propsData) =>
@@ -167,7 +166,7 @@ describe('Participants', () => {
 
       expect(wrapper.vm.isShowingMoreParticipants).toBe(false);
 
-      getMoreParticipantsButton().trigger('click');
+      getMoreParticipantsButton().vm.$emit('click');
 
       expect(wrapper.vm.isShowingMoreParticipants).toBe(true);
     });