Merge branch '209993-refactor-event-item' into '209990-refactor-vulnerability-header-footer'

Refactor event item component to use callback functions instead of $emit

See merge request gitlab-org/gitlab!29115

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);
         });
     });
   });