Merge branch '294120-migrate-deprecated-buttons' into 'master'

Migrate remaining occurrences of GlDeprecatedButton to GlButton

See merge request gitlab-org/gitlab!50210

app/assets/javascripts/feature_flags/components/environments_dropdown.vue

 <script>
 import { debounce } from 'lodash';
-import { GlDeprecatedButton, GlSearchBoxByType } from '@gitlab/ui';
+import { GlButton, GlSearchBoxByType } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
@@ -28,7 +28,7 @@ import { deprecatedCreateFlash as createFlash } from '~/flash';
 export default {
   name: 'EnvironmentsSearchableInput',
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlSearchBoxByType,
   },
   props: {
@@ -159,19 +159,20 @@ export default {
         <div class="dropdown-content">
           <ul v-if="results.length">
             <li v-for="(result, i) in results" :key="i">
-              <gl-deprecated-button class="btn-transparent" @click="selectEnvironment(result)">{{
+              <gl-button category="tertiary" @click="selectEnvironment(result)">{{
                 result
-              }}</gl-deprecated-button>
+              }}</gl-button>
             </li>
           </ul>
           <div v-else-if="!results.length" class="text-secondary gl-p-3">
             {{ __('No matching results') }}
           </div>
           <div v-if="shouldRenderCreateButton" class="dropdown-footer">
-            <gl-deprecated-button
-              class="js-create-button btn-blank dropdown-item"
+            <gl-button
+              category="tertiary"
+              class="js-create-button dropdown-item"
               @click="createClicked"
-              >{{ composedCreateButtonLabel }}</gl-deprecated-button
+              >{{ composedCreateButtonLabel }}</gl-button
             >
           </div>
         </div>

app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
 import {
-  GlDeprecatedButton,
+  GlButton,
   GlDropdown,
   GlDropdownDivider,
   GlDropdownItem,
@@ -22,7 +22,7 @@ import { getAddMetricTrackingOptions } from '../utils';
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlDropdown,
     GlDropdownDivider,
     GlDropdownItem,
@@ -178,10 +178,10 @@ export default {
           />
         </form>
         <div slot="modal-footer">
-          <gl-deprecated-button @click="hideAddMetricModal">
+          <gl-button @click="hideAddMetricModal">
             {{ __('Cancel') }}
-          </gl-deprecated-button>
-          <gl-deprecated-button
+          </gl-button>
+          <gl-button
             v-track-event="getAddMetricTrackingOptions()"
             data-testid="add-metric-modal-submit-button"
             :disabled="!customMetricsFormIsValid"
@@ -189,7 +189,7 @@ export default {
             @click="submitCustomMetricsForm"
           >
             {{ __('Save changes') }}
-          </gl-deprecated-button>
+          </gl-button>
         </div>
       </gl-modal>
     </template>

ee/app/assets/javascripts/dependencies/components/app.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import {
-  GlEmptyState,
-  GlIcon,
-  GlLoadingIcon,
-  GlSprintf,
-  GlLink,
-  GlDeprecatedButton,
-} from '@gitlab/ui';
+import { GlEmptyState, GlIcon, GlLoadingIcon, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import DependenciesActions from './dependencies_actions.vue';
 import DependencyListIncompleteAlert from './dependency_list_incomplete_alert.vue';
@@ -25,7 +18,7 @@ export default {
     GlLoadingIcon,
     GlSprintf,
     GlLink,
-    GlDeprecatedButton,
+    GlButton,
     DependencyListIncompleteAlert,
     DependencyListJobFailedAlert,
     PaginatedDependenciesTable,
@@ -133,9 +126,9 @@ export default {
     :svg-path="emptyStateSvgPath"
   >
     <template #actions>
-      <gl-deprecated-button variant="info" :href="emptyStateOptions.link">
+      <gl-button variant="info" :href="emptyStateOptions.link">
         {{ emptyStateOptions.buttonLabel }}
-      </gl-deprecated-button>
+      </gl-button>
     </template>
   </gl-empty-state>
 

ee/app/assets/javascripts/sidebar/components/status/status.vue

 <script>
 import {
   GlIcon,
-  GlDeprecatedButton as GlButton,
+  GlButton,
   GlLoadingIcon,
   GlTooltipDirective as GlTooltip,
   GlDropdownItem,
@@ -151,7 +151,7 @@ export default {
           <gl-button
             ref="editButton"
             variant="link"
-            class="edit-link btn-link-hover"
+            class="edit-link btn-link-hover gl-text-black-normal!"
             :disabled="!isEditable"
             @click.stop="toggleFormDropdown"
             @keydown.esc="hideDropdown"
@@ -188,7 +188,7 @@ export default {
             <gl-dropdown-item @click="handleDropdownClick(null)">
               <gl-button
                 variant="link"
-                class="dropdown-item health-dropdown-item"
+                class="dropdown-item health-dropdown-item gl-px-8!"
                 :class="{ 'is-active': isSelected(null) }"
               >
                 {{ s__('Sidebar|No status') }}
@@ -204,7 +204,7 @@ export default {
             >
               <gl-button
                 variant="link"
-                class="dropdown-item health-dropdown-item"
+                class="dropdown-item health-dropdown-item gl-px-8!"
                 :class="{ 'is-active': isSelected(option.key) }"
               >
                 {{ option.value }}

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

 <script>
-import { GlButton, GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
 import ApprovalsList from './approvals_list.vue';
@@ -7,7 +7,6 @@ import ApprovalsList from './approvals_list.vue';
 export default {
   components: {
     GlButton,
-    GlDeprecatedButton,
     UserAvatarList,
     ApprovalsList,
   },
@@ -81,14 +80,14 @@ export default {
       />
       <template v-if="isCollapsed">
         <user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />
-        <gl-deprecated-button variant="link" @click="toggle">{{
+        <gl-button data-testid="approvers-expand-button" variant="link" @click="toggle">{{
           __('View eligible approvers')
-        }}</gl-deprecated-button>
+        }}</gl-button>
       </template>
       <template v-else>
-        <gl-deprecated-button variant="link" @click="toggle">{{
+        <gl-button data-testid="approvers-collapse-button" variant="link" @click="toggle">{{
           __('Collapse')
-        }}</gl-deprecated-button>
+        }}</gl-button>
       </template>
     </div>
     <div v-if="!isCollapsed && approvalRules.length" class="border-top">

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

-import { GlDeprecatedButton, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
 import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/approvals_list.vue';
@@ -28,8 +28,8 @@ describe('EE MRWidget approvals footer', () => {
   const findToggle = () => wrapper.find(GlButton);
   const findToggleIcon = () => findToggle().find(GlIcon);
   const findToggleLoadingIcon = () => findToggle().find(GlLoadingIcon);
-  const findExpandButton = () => wrapper.find(GlDeprecatedButton);
-  const findCollapseButton = () => wrapper.find(GlDeprecatedButton);
+  const findExpandButton = () => wrapper.find('[data-testid="approvers-expand-button"]');
+  const findCollapseButton = () => wrapper.find('[data-testid="approvers-collapse-button"]');
   const findList = () => wrapper.find(ApprovalsList);
   const findAvatars = () => wrapper.find(UserAvatarList);
 

spec/frontend/error_tracking/components/error_tracking_list_spec.js

@@ -243,7 +243,6 @@ describe('ErrorTrackingList', () => {
         stubs: {
           GlTable: false,
           GlLink: false,
-          GlDeprecatedButton: false,
         },
       });
     });
@@ -274,7 +273,6 @@ describe('ErrorTrackingList', () => {
         stubs: {
           GlTable: false,
           GlLink: false,
-          GlDeprecatedButton: false,
         },
       });
     });
@@ -454,7 +452,6 @@ describe('ErrorTrackingList', () => {
         stubs: {
           GlTable: false,
           GlLink: false,
-          GlDeprecatedButton: false,
         },
       });
     });

spec/frontend/feature_flags/components/environments_dropdown_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon, GlDeprecatedButton, GlSearchBoxByType } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlSearchBoxByType } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import EnvironmentsDropdown from '~/feature_flags/components/environments_dropdown.vue';
@@ -99,7 +99,7 @@ describe('Feature flags > Environments dropdown ', () => {
 
         it('emits event when a suggestion is clicked', async () => {
           const button = wrapper
-            .findAll(GlDeprecatedButton)
+            .findAll(GlButton)
             .filter(b => b.text() === 'production')
             .at(0);
           button.vm.$emit('click');
@@ -110,7 +110,7 @@ describe('Feature flags > Environments dropdown ', () => {
 
       describe('on click clear button', () => {
         beforeEach(async () => {
-          wrapper.find(GlDeprecatedButton).vm.$emit('click');
+          wrapper.find(GlButton).vm.$emit('click');
           await wrapper.vm.$nextTick();
         });
 
@@ -137,7 +137,7 @@ describe('Feature flags > Environments dropdown ', () => {
 
     it('emits create event', async () => {
       wrapper
-        .findAll(GlDeprecatedButton)
+        .findAll(GlButton)
         .at(0)
         .vm.$emit('click');
       await wrapper.vm.$nextTick();