Merge branch...

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

Replace deprecated buttons in dismiss_button.vue

Closes #229202 and #219838

See merge request gitlab-org/gitlab!38695

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

 <script>
-import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 export default {
   name: 'DismissButton',
   components: {
-    GlDeprecatedButton,
-    Icon,
-    LoadingButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -51,25 +47,28 @@ export default {
 
 <template>
   <div class="btn-group" role="group">
-    <loading-button
+    <gl-button
       :loading="isDismissing"
       :disabled="isDismissing || disabled"
-      :label="buttonText"
-      container-class="js-dismiss-btn btn btn-close"
+      variant="warning"
+      category="secondary"
+      class="js-dismiss-btn"
       @click="handleDismissClick"
-    />
-    <gl-deprecated-button
+    >
+      {{ __(buttonText) }}
+    </gl-button>
+    <gl-button
       v-if="!isDismissed"
-      v-gl-tooltip.hover
-      v-gl-tooltip.focus
+      v-gl-tooltip
       :disabled="disabled"
-      :title="s__('vulnerability|Add comment & dismiss')"
-      variant="close"
+      :title="s__('vulnerability|Add comment and dismiss')"
+      variant="warning"
+      category="secondary"
       data-qa-selector="dismiss_with_comment_button"
       class="js-dismiss-with-comment "
+      :aria-label="s__('vulnerability|Add comment and dismiss')"
+      icon="comment"
       @click="$emit('openDismissalCommentBox')"
-    >
-      <icon name="comment" />
-    </gl-deprecated-button>
+    />
   </div>
 </template>

ee/changelogs/unreleased/219838-replace-gl-deprecated-button-with-gl-button-in-ee-app-assets-ja.yml

+---
+title: Replace deprecated button with new button
+merge_request: 38695
+author:
+type: other

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

 import { mount } from '@vue/test-utils';
 import component from 'ee/vue_shared/security_reports/components/dismiss_button.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlButton } from '@gitlab/ui';
 
 describe('DismissalButton', () => {
   let wrapper;
@@ -22,7 +22,7 @@ describe('DismissalButton', () => {
     });
 
     it('should emit dismiss vulnerabilty when clicked', () => {
-      wrapper.find(LoadingButton).trigger('click');
+      wrapper.find(GlButton).trigger('click');
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().dismissVulnerability).toBeTruthy();
       });
@@ -53,7 +53,7 @@ describe('DismissalButton', () => {
     });
 
     it('should emit revertDismissVulnerabilty when clicked', () => {
-      wrapper.find(LoadingButton).trigger('click');
+      wrapper.find(GlButton).trigger('click');
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().revertDismissVulnerability).toBeTruthy();
       });

locale/gitlab.pot

@@ -29961,6 +29961,9 @@ msgstr ""
 msgid "vulnerability|Add comment & dismiss"
 msgstr ""
 
+msgid "vulnerability|Add comment and dismiss"
+msgstr ""
+
 msgid "vulnerability|Dismiss vulnerability"
 msgstr ""