Merge branch...

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

Add form input field

Closes #219765

See merge request gitlab-org/gitlab!40837

ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue

 <script>
-import { GlDeprecatedButton, GlButton, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlButton, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import EventItem from 'ee/vue_shared/security_reports/components/event_item.vue';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __, s__ } from '~/locale';
@@ -8,7 +8,6 @@ import HistoryCommentEditor from './history_comment_editor.vue';
 
 export default {
   components: {
-    GlDeprecatedButton,
     GlButton,
     EventItem,
     HistoryCommentEditor,
@@ -180,8 +179,13 @@ export default {
   </event-item>
 
   <div v-else class="discussion-reply-holder">
-    <gl-deprecated-button ref="addCommentButton" class="btn-text-field" @click="showCommentInput">
+    <button
+      ref="addCommentButton"
+      class="btn btn-text-field"
+      type="button"
+      @click="showCommentInput"
+    >
       {{ s__('vulnerability|Add a comment') }}
-    </gl-deprecated-button>
+    </button>
   </div>
 </template>

ee/spec/frontend/vulnerabilities/history_comment_spec.js

@@ -64,7 +64,7 @@ describe('History Comment', () => {
   // whichever one exists and click it to show the editor.
   const showEditView = () => {
     if (addCommentButton().exists()) {
-      addCommentButton().vm.$emit('click');
+      addCommentButton().trigger('click');
     } else {
       editButton().vm.$emit('click');
     }