Replace deprecated button …/compare_versions.vue

app/assets/javascripts/diffs/components/compare_versions.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlSprintf } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlButton, GlSprintf } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { polyfillSticky } from '~/lib/utils/sticky';
-import Icon from '~/vue_shared/components/icon.vue';
 import CompareDropdownLayout from './compare_dropdown_layout.vue';
 import SettingsDropdown from './settings_dropdown.vue';
 import DiffStats from './diff_stats.vue';
@@ -12,9 +11,8 @@ import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants';
 export default {
   components: {
     CompareDropdownLayout,
-    Icon,
     GlLink,
-    GlDeprecatedButton,
+    GlButton,
     GlSprintf,
     SettingsDropdown,
     DiffStats,
@@ -84,18 +82,15 @@ export default {
         [CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer,
       }"
     >
-      <button
+      <gl-button
         v-gl-tooltip.hover
-        type="button"
-        class="btn btn-default gl-mr-3 js-toggle-tree-list"
-        :class="{
-          active: showTreeList,
-        }"
+        variant="default"
+        icon="file-tree"
+        class="gl-mr-3 js-toggle-tree-list"
         :title="toggleFileBrowserTitle"
+        :selected="showTreeList"
         @click="toggleShowTreeList"
-      >
-        <icon name="file-tree" />
-      </button>
+      />
       <gl-sprintf
         v-if="showDropdowns"
         class="d-flex align-items-center compare-versions-container"
@@ -124,16 +119,22 @@ export default {
           :added-lines="addedLines"
           :removed-lines="removedLines"
         />
-        <gl-deprecated-button
+        <gl-button
           v-if="commit || startVersion"
           :href="latestVersionPath"
+          variant="default"
           class="gl-mr-3 js-latest-version"
         >
           {{ __('Show latest version') }}
-        </gl-deprecated-button>
-        <gl-deprecated-button v-show="hasCollapsedFile" class="gl-mr-3" @click="expandAllFiles">
+        </gl-button>
+        <gl-button
+          v-show="hasCollapsedFile"
+          variant="default"
+          class="gl-mr-3"
+          @click="expandAllFiles"
+        >
           {{ __('Expand all') }}
-        </gl-deprecated-button>
+        </gl-button>
         <settings-dropdown />
       </div>
     </div>

changelogs/unreleased/219797-replace-gl-deprecated-button-with-gl-button-in-app-assets-javascri.yml

+---
+title: Replace deprecated button with new button
+merge_request: 38940
+author:
+type: other

spec/frontend/diffs/components/compare_versions_spec.js

@@ -2,7 +2,6 @@ import { trimText } from 'helpers/text_helper';
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import CompareVersionsComponent from '~/diffs/components/compare_versions.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import { createStore } from '~/mr_notes/stores';
 import diffsMockData from '../mock_data/merge_request_diffs';
 import getDiffWithCommit from '../mock_data/diff_with_commit';
@@ -51,7 +50,7 @@ describe('CompareVersions', () => {
 
       expect(treeListBtn.exists()).toBe(true);
       expect(treeListBtn.attributes('title')).toBe('Hide file browser');
-      expect(treeListBtn.find(Icon).props('name')).toBe('file-tree');
+      expect(treeListBtn.props('icon')).toBe('file-tree');
     });
 
     it('should render comparison dropdowns with correct values', () => {