Merge branch '219902-commits-header-deprecated-button' into 'master'

Replace deprecated-button with button in commits_header.vue

Closes #219902

See merge request gitlab-org/gitlab!38805

app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue

 <script>
 /* eslint-disable vue/no-v-html */
-import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, n__, sprintf, s__ } from '~/locale';
 
 export default {
   components: {
-    GlIcon,
-    GlDeprecatedButton,
+    GlButton,
   },
   props: {
     isSquashEnabled: {
@@ -80,20 +79,19 @@ export default {
       class="js-mr-widget-commits-count mr-widget-extension clickable d-flex align-items-center px-3 py-2"
       @click="toggle()"
     >
-      <gl-deprecated-button
+      <gl-button
         :aria-label="ariaLabel"
-        variant="blank"
-        class="commit-edit-toggle square s24 gl-mr-3"
+        category="tertiary"
+        class="commit-edit-toggle gl-mr-3"
+        :icon="collapseIcon"
         @click.stop="toggle()"
-      >
-        <gl-icon :name="collapseIcon" :size="16" />
-      </gl-deprecated-button>
+      />
       <span v-if="expanded">{{ __('Collapse') }}</span>
       <span v-else>
         <span class="vertical-align-middle" v-html="message"></span>
-        <gl-deprecated-button variant="link" class="modify-message-button">
+        <gl-button variant="link" class="modify-message-button">
           {{ modifyLinkMessage }}
-        </gl-deprecated-button>
+        </gl-button>
       </span>
     </div>
     <div v-show="expanded"><slot></slot></div>

spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlIcon } from '@gitlab/ui';
 import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
 
 describe('Commits header component', () => {
@@ -23,7 +22,6 @@ describe('Commits header component', () => {
 
   const findHeaderWrapper = () => wrapper.find('.js-mr-widget-commits-count');
   const findCommitToggle = () => wrapper.find('.commit-edit-toggle');
-  const findIcon = () => wrapper.find(GlIcon);
   const findCommitsCountMessage = () => wrapper.find('.commits-count-message');
   const findTargetBranchMessage = () => wrapper.find('.label-branch');
   const findModifyButton = () => wrapper.find('.modify-message-button');
@@ -61,7 +59,7 @@ describe('Commits header component', () => {
       wrapper.setData({ expanded: false });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(findIcon().props('name')).toBe('chevron-right');
+        expect(findCommitToggle().props('icon')).toBe('chevron-right');
       });
     });
 
@@ -119,7 +117,7 @@ describe('Commits header component', () => {
 
     it('has a chevron-down icon', done => {
       wrapper.vm.$nextTick(() => {
-        expect(findIcon().props('name')).toBe('chevron-down');
+        expect(findCommitToggle().props('icon')).toBe('chevron-down');
         done();
       });
     });