Merge branch...

Merge branch '229316-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-ee-app-assets-javascripts' into 'master'

Replace button GlButton

See merge request gitlab-org/gitlab!42075

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue

 <script>
-import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlDeprecatedButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
 import ApprovalsList from './approvals_list.vue';
 
 export default {
   components: {
-    GlIcon,
+    GlButton,
     GlDeprecatedButton,
-    GlLoadingIcon,
     UserAvatarList,
     ApprovalsList,
   },
@@ -55,6 +54,9 @@ export default {
     suggestedApproversTrimmed() {
       return this.suggestedApprovers.slice(0, Math.min(5, this.suggestedApprovers.length));
     },
+    shouldShowLoadingSpinner() {
+      return !this.isCollapsed && this.isLoadingRules;
+    },
   },
   methods: {
     toggle() {
@@ -67,15 +69,16 @@ export default {
 <template>
   <div>
     <div class="mr-widget-extension d-flex align-items-center pl-3">
-      <button
-        class="btn btn-blank square s32 gl-mr-3"
-        type="button"
+      <!-- TODO: simplify button classes once https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1029 is completed -->
+      <gl-button
+        class="gl-mr-3"
+        :class="{ 'gl-shadow-none!': shouldShowLoadingSpinner }"
         :aria-label="ariaLabel"
+        :loading="shouldShowLoadingSpinner"
+        :icon="angleIcon"
+        category="tertiary"
         @click="toggle"
-      >
-        <gl-loading-icon v-if="!isCollapsed && isLoadingRules" />
-        <gl-icon v-else :name="angleIcon" :size="16" />
-      </button>
+      />
       <template v-if="isCollapsed">
         <user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />
         <gl-deprecated-button variant="link" @click="toggle">{{

ee/changelogs/unreleased/229316-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-ee-app-assets.yml

+---
+title: Update approvals toggle button style
+merge_request: 42075
+author:
+type: other

ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js

-import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { GlDeprecatedButton, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import stubChildren from 'helpers/stub_children';
 import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/approvals_list.vue';
 import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
@@ -11,16 +12,20 @@ describe('EE MRWidget approvals footer', () => {
   let wrapper;
 
   const createComponent = (props = {}) => {
-    wrapper = shallowMount(ApprovalsFooter, {
+    wrapper = mount(ApprovalsFooter, {
       propsData: {
         suggestedApprovers: testSuggestedApprovers(),
         approvalRules: testApprovalRules(),
         ...props,
       },
+      stubs: {
+        ...stubChildren(ApprovalsFooter),
+        GlButton: false,
+      },
     });
   };
 
-  const findToggle = () => wrapper.find('button');
+  const findToggle = () => wrapper.find(GlButton);
   const findToggleIcon = () => findToggle().find(GlIcon);
   const findToggleLoadingIcon = () => findToggle().find(GlLoadingIcon);
   const findExpandButton = () => wrapper.find(GlDeprecatedButton);
@@ -138,7 +143,7 @@ describe('EE MRWidget approvals footer', () => {
       it('expands when clicked', () => {
         const button = findToggle();
 
-        button.trigger('click');
+        button.vm.$emit('click');
 
         return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emitted().input).toEqual([[true]]);