Merge branch...

Merge branch '219840-replace-gl-deprecated-button-with-gl-button-in-ee-app-assets-javascripts-vue_shared' into 'master'

Replace deprecated button

See merge request gitlab-org/gitlab!42065

ee/app/assets/javascripts/vue_shared/security_reports/components/event_item.vue

 <script>
-import { GlTooltipDirective, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlIcon } from '@gitlab/ui';
 import NoteHeader from '~/notes/components/note_header.vue';
 
 export default {
@@ -7,7 +7,7 @@ export default {
   components: {
     GlIcon,
     NoteHeader,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -83,17 +83,15 @@ export default {
     <slot v-if="showRightSlot" name="right-content"></slot>
 
     <div v-else-if="showActionButtons" class="gl-flex-shrink-0 gl-align-self-start">
-      <gl-deprecated-button
+      <gl-button
         v-for="button in actionButtons"
         :key="button.title"
         v-gl-tooltip
-        class="px-1"
-        variant="transparent"
+        category="tertiary"
+        :icon="button.iconName"
         :title="button.title"
         @click="button.onClick"
-      >
-        <gl-icon :name="button.iconName" class="link-highlight" />
-      </gl-deprecated-button>
+      />
     </div>
   </div>
 </template>

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/event_item_spec.js.snap

@@ -79,36 +79,40 @@ exports[`Event Item with action buttons renders the action buttons 1`] = `
     class="gl-flex-shrink-0 gl-align-self-start"
   >
     <button
-      class="btn px-1 btn-transparent btn-md"
+      class="btn btn-default btn-md gl-button btn-default-tertiary btn-icon"
       title="Foo Action"
       type="button"
     >
       <!---->
        
       <svg
-        class="link-highlight gl-icon s16"
+        class="gl-button-icon gl-icon s16"
         data-testid="pencil-icon"
       >
         <use
           href="#pencil"
         />
       </svg>
+        
+      <!---->
     </button>
     <button
-      class="btn px-1 btn-transparent btn-md"
+      class="btn btn-default btn-md gl-button btn-default-tertiary btn-icon"
       title="Bar Action"
       type="button"
     >
       <!---->
        
       <svg
-        class="link-highlight gl-icon s16"
+        class="gl-button-icon gl-icon s16"
         data-testid="remove-icon"
       >
         <use
           href="#remove"
         />
       </svg>
+        
+      <!---->
     </button>
   </div>
 </div>

ee/spec/frontend/vue_shared/security_reports/components/event_item_spec.js

-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import Component from 'ee/vue_shared/security_reports/components/event_item.vue';
 import { shallowMount, mount } from '@vue/test-utils';
 import NoteHeader from '~/notes/components/note_header.vue';
@@ -91,12 +91,12 @@ describe('Event Item', () => {
     });
 
     it('renders the action buttons', () => {
-      expect(wrapper.findAll(GlDeprecatedButton)).toHaveLength(2);
+      expect(wrapper.findAll(GlButton)).toHaveLength(2);
       expect(wrapper.element).toMatchSnapshot();
     });
 
     it('emits the button events when clicked', () => {
-      const buttons = wrapper.findAll(GlDeprecatedButton);
+      const buttons = wrapper.findAll(GlButton);
       buttons.at(0).trigger('click');
       return wrapper.vm
         .$nextTick()