Merge branch 'use-gl-button-in-rule-controls' into 'master'

Replace gl-deprecated-button in rule controls

See merge request gitlab-org/gitlab!34549

ee/app/assets/javascripts/approvals/components/rule_controls.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     Icon,
   },
   props: {
@@ -25,15 +25,16 @@ export default {
 
 <template>
   <div>
-    <gl-deprecated-button variant="none" @click="requestEditRule(rule)">
+    <gl-button @click="requestEditRule(rule)">
       <span>{{ __('Edit') }}</span>
-    </gl-deprecated-button>
-    <gl-deprecated-button
+    </gl-button>
+    <gl-button
       class="gl-ml-3 btn btn-inverted"
       variant="danger"
+      category="primary"
       @click="requestDeleteRule(rule)"
     >
       <icon name="remove" :aria-label="__('Remove')" />
-    </gl-deprecated-button>
+    </gl-button>
   </div>
 </template>

ee/spec/frontend/approvals/components/rule_controls_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import MREditModule from 'ee/approvals/stores/modules/mr_edit';
 import { createStoreOptions } from 'ee/approvals/stores';
 import RuleControls from 'ee/approvals/components/rule_controls.vue';
@@ -31,7 +31,7 @@ describe('EE Approvals RuleControls', () => {
       store: new Vuex.Store(store),
     });
   };
-  const findButtons = () => wrapper.findAll(GlDeprecatedButton);
+  const findButtons = () => wrapper.findAll(GlButton);
   const findButton = label => findButtons().filter(button => hasLabel(button, label)).wrappers[0];
   const findEditButton = () => findButton('Edit');
   const findRemoveButton = () => findButton('Remove');