Use callback methods instead of emits for event item

1. Renamed app.vue to header.vue to match with footer.vue and updated
its component name from VulnerabilityManagementApp to
VulnerabilityHeader to match with VulnerabilityFooter.
2. Fixed some spacing issues and removed some unnecessary wrapper
elements.
3. Moved the issue note from below the horizontal line to above it.

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

@@ -77,12 +77,12 @@ export default {
       return [
         {
           iconName: 'pencil',
-          emit: 'editVulnerabilityDismissalComment',
+          onClick: () => this.$emit('editVulnerabilityDismissalComment'),
           title: __('Edit Comment'),
         },
         {
           iconName: 'remove',
-          emit: 'showDismissalDeleteButtons',
+          onClick: () => this.$emit('showDismissalDeleteButtons'),
           title: __('Delete Comment'),
         },
       ];
@@ -97,7 +97,7 @@ export default {
       :author="feedback.author"
       :created-at="feedback.created_at"
       icon-name="cancel"
-      icon-style="ci-status-icon-pending"
+      icon-class="ci-status-icon-pending"
     >
       <div v-if="feedback.created_at" v-html="eventText"></div>
     </event-item>
@@ -110,15 +110,11 @@ export default {
         :show-right-slot="isShowingDeleteButtons"
         :show-action-buttons="showDismissalCommentActions"
         icon-name="comment"
-        icon-style="ci-status-icon-pending"
-        @editVulnerabilityDismissalComment="$emit('editVulnerabilityDismissalComment')"
-        @showDismissalDeleteButtons="$emit('showDismissalDeleteButtons')"
-        @hideDismissalDeleteButtons="$emit('hideDismissalDeleteButtons')"
-        @deleteDismissalComment="$emit('deleteDismissalComment')"
+        icon-class="ci-status-icon-pending"
       >
         {{ commentDetails.comment }}
 
-        <template v-slot:right-content>
+        <template #right-content>
           <div class="d-flex flex-grow-1 align-self-start flex-row-reverse">
             <loading-button
               :label="__('Delete comment')"

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

@@ -28,7 +28,7 @@ export default {
       required: false,
       default: 'plus',
     },
-    iconStyle: {
+    iconClass: {
       type: String,
       required: false,
       default: 'ci-status-icon-success',
@@ -54,16 +54,16 @@ export default {
 
 <template>
   <div class="d-flex align-items-center">
-    <div class="circle-icon-container" :class="iconStyle">
+    <div class="circle-icon-container" :class="iconClass">
       <icon :size="16" :name="iconName" />
     </div>
-    <div class="ml-3" data-qa-selector="event_item_content">
+    <div class="ml-3 flex-grow-1" data-qa-selector="event_item_content">
       <div class="note-header-info pb-0">
         <a
           :href="author.path"
           :data-user-id="author.id"
           :data-username="author.username"
-          class="js-author"
+          class="js-author js-user-link"
         >
           <strong class="note-header-author-name">{{ author.name }}</strong>
           <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
@@ -81,21 +81,18 @@ export default {
 
     <slot v-if="showRightSlot" name="right-content"></slot>
 
-    <div v-else class="d-flex flex-grow-1 align-self-start flex-row-reverse">
-      <div v-if="showActionButtons" class="action-buttons">
-        <gl-deprecated-button
-          v-for="button in actionButtons"
-          :key="button.title"
-          ref="button"
-          v-gl-tooltip
-          class="px-1"
-          variant="transparent"
-          :title="button.title"
-          @click="$emit(button.emit)"
-        >
-          <icon :name="button.iconName" class="link-highlight" />
-        </gl-deprecated-button>
-      </div>
+    <div v-else-if="showActionButtons" class="align-self-start">
+      <gl-deprecated-button
+        v-for="button in actionButtons"
+        :key="button.title"
+        v-gl-tooltip
+        class="px-1"
+        variant="transparent"
+        :title="button.title"
+        @click="button.onClick"
+      >
+        <icon :name="button.iconName" class="link-highlight" />
+      </gl-deprecated-button>
     </div>
   </div>
 </template>

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

+import { GlDeprecatedButton } from '@gitlab/ui';
 import Component from 'ee/vue_shared/security_reports/components/event_item.vue';
 import { shallowMount, mount } from '@vue/test-utils';
 
@@ -37,7 +38,7 @@ describe('Event Item', () => {
     });
 
     it('uses the fallback icon class', () => {
-      expect(wrapper.props().iconStyle).toBe('ci-status-icon-success');
+      expect(wrapper.props().iconClass).toBe('ci-status-icon-success');
     });
 
     it('renders the action buttons tontainer', () => {
@@ -53,12 +54,12 @@ describe('Event Item', () => {
       actionButtons: [
         {
           iconName: 'pencil',
-          emit: 'fooEvent',
+          onClick: jest.fn(),
           title: 'Foo Action',
         },
         {
           iconName: 'remove',
-          emit: 'barEvent',
+          onClick: jest.fn(),
           title: 'Bar Action',
         },
       ],
@@ -77,12 +78,12 @@ describe('Event Item', () => {
     });
 
     it('renders the action buttons', () => {
-      expect(wrapper.findAll('.action-buttons > button').length).toBe(2);
+      expect(wrapper.findAll(GlDeprecatedButton).length).toBe(2);
       expect(wrapper).toMatchSnapshot();
     });
 
     it('emits the button events when clicked', () => {
-      const buttons = wrapper.findAll('.action-buttons > button');
+      const buttons = wrapper.findAll(GlDeprecatedButton);
       buttons.at(0).trigger('click');
       return wrapper.vm
         .$nextTick()
@@ -91,8 +92,8 @@ describe('Event Item', () => {
           return wrapper.vm.$nextTick();
         })
         .then(() => {
-          expect(wrapper.emitted().fooEvent.length).toEqual(1);
-          expect(wrapper.emitted().barEvent.length).toEqual(1);
+          expect(propsData.actionButtons[0].onClick).toHaveBeenCalledTimes(1);
+          expect(propsData.actionButtons[1].onClick).toHaveBeenCalledTimes(1);
         });
     });
   });