Merge branch '219891-replace-gl-deprecated-button' into 'master'

Migrate `GlDeprecatedButton` to `GlButton`

See merge request gitlab-org/gitlab!34323

app/assets/javascripts/error_tracking/components/error_details.vue

@@ -2,7 +2,7 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import createFlash from '~/flash';
 import {
-  GlDeprecatedButton,
+  GlButton,
   GlFormInput,
   GlLink,
   GlLoadingIcon,
@@ -33,7 +33,7 @@ const SENTRY_TIMEOUT = 10000;
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlFormInput,
     GlLink,
     GlLoadingIcon,
@@ -279,22 +279,24 @@ export default {
         </div>
         <div class="error-details-actions">
           <div class="d-inline-flex bv-d-sm-down-none">
-            <gl-deprecated-button
+            <gl-button
               :loading="updatingIgnoreStatus"
               data-testid="update-ignore-status-btn"
               @click="onIgnoreStatusUpdate"
             >
               {{ ignoreBtnLabel }}
-            </gl-deprecated-button>
-            <gl-deprecated-button
-              class="btn-outline-info ml-2"
+            </gl-button>
+            <gl-button
+              class="ml-2"
+              category="secondary"
+              variant="info"
               :loading="updatingResolveStatus"
               data-testid="update-resolve-status-btn"
               @click="onResolveStatusUpdate"
             >
               {{ resolveBtnLabel }}
-            </gl-deprecated-button>
-            <gl-deprecated-button
+            </gl-button>
+            <gl-button
               v-if="error.gitlabIssuePath"
               class="ml-2"
               data-testid="view_issue_button"
@@ -302,7 +304,7 @@ export default {
               variant="success"
             >
               {{ __('View issue') }}
-            </gl-deprecated-button>
+            </gl-button>
             <form
               ref="sentryIssueForm"
               :action="projectIssuesPath"
@@ -317,15 +319,16 @@ export default {
                 name="issue[sentry_issue_attributes][sentry_issue_identifier]"
               />
               <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" />
-              <gl-deprecated-button
+              <gl-button
                 v-if="!error.gitlabIssuePath"
-                class="btn-success"
+                category="primary"
+                variant="success"
                 :loading="issueCreationInProgress"
                 data-qa-selector="create_issue_button"
                 @click="createIssue"
               >
                 {{ __('Create issue') }}
-              </gl-deprecated-button>
+              </gl-button>
             </form>
           </div>
           <gl-dropdown

spec/frontend/error_tracking/components/error_details_spec.js

@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
 import {
-  GlDeprecatedButton,
+  GlButton,
   GlLoadingIcon,
   GlLink,
   GlBadge,
@@ -52,7 +52,7 @@ describe('ErrorDetails', () => {
 
   function mountComponent() {
     wrapper = shallowMount(ErrorDetails, {
-      stubs: { GlDeprecatedButton, GlSprintf },
+      stubs: { GlButton, GlSprintf },
       localVue,
       store,
       mocks,
@@ -195,7 +195,7 @@ describe('ErrorDetails', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
       expect(wrapper.find(Stacktrace).exists()).toBe(false);
       expect(wrapper.find(GlBadge).exists()).toBe(false);
-      expect(wrapper.findAll(GlDeprecatedButton).length).toBe(3);
+      expect(wrapper.findAll(GlButton)).toHaveLength(3);
     });
 
     describe('unsafe chars for culprit field', () => {