Merge branch '219772-migrate-clear-chart-filters-buttons' into 'master'

Migrating deprecated button on the Productivity Analysis page

Closes #219772

See merge request gitlab-org/gitlab!42339

ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue

@@ -5,7 +5,7 @@ import {
   GlLoadingIcon,
   GlDeprecatedDropdown,
   GlDeprecatedDropdownItem,
-  GlDeprecatedButton,
+  GlButton,
   GlTooltipDirective,
   GlIcon,
 } from '@gitlab/ui';
@@ -27,7 +27,7 @@ export default {
     GlDeprecatedDropdown,
     GlDeprecatedDropdownItem,
     GlColumnChart,
-    GlDeprecatedButton,
+    GlButton,
     GlIcon,
     MetricChart,
     Scatterplot,
@@ -182,14 +182,14 @@ export default {
     <template v-if="showAppContent">
       <div class="d-flex justify-content-between">
         <h4>{{ s__('ProductivityAnalytics|Merge Requests') }}</h4>
-        <gl-deprecated-button
+        <gl-button
           v-if="isFilteringByDaysToMerge"
           ref="clearChartFiltersBtn"
           class="btn-link float-right"
           type="button"
           variant="default"
           @click="resetMainChartSelection()"
-          >{{ __('Clear chart filters') }}</gl-deprecated-button
+          >{{ __('Clear chart filters') }}</gl-button
         >
       </div>
       <metric-chart
@@ -324,13 +324,9 @@ export default {
                     </span>
                   </gl-deprecated-dropdown-item>
                 </gl-deprecated-dropdown>
-                <gl-deprecated-button
-                  v-gl-tooltip.hover
-                  :title="sortTooltipTitle"
-                  @click="toggleSortOrder"
-                >
+                <gl-button v-gl-tooltip.hover :title="sortTooltipTitle" @click="toggleSortOrder">
                   <gl-icon :name="sortIcon" />
-                </gl-deprecated-button>
+                </gl-button>
               </div>
             </div>
           </div>

ee/spec/frontend/analytics/productivity_analytics/components/app_spec.js

@@ -13,7 +13,7 @@ import {
   GlLoadingIcon,
   GlDeprecatedDropdown,
   GlDeprecatedDropdownItem,
-  GlDeprecatedButton,
+  GlButton,
 } from '@gitlab/ui';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import UrlSyncMixin from 'ee/analytics/shared/mixins/url_sync_mixin';
@@ -108,7 +108,7 @@ describe('ProductivityApp component', () => {
   const findScatterplotMetricChart = () => wrapper.find({ ref: 'scatterplot' });
   const findMrTableSortSection = () => wrapper.find('.js-mr-table-sort');
   const findSortFieldDropdown = () => findMrTableSortSection().find(GlDeprecatedDropdown);
-  const findSortOrderToggle = () => findMrTableSortSection().find(GlDeprecatedButton);
+  const findSortOrderToggle = () => findMrTableSortSection().find(GlButton);
   const findMrTableSection = () => wrapper.find('.js-mr-table');
   const findMrTable = () => findMrTableSection().find(MergeRequestTable);