Moves popover button to it's own component

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

@@ -20,8 +20,8 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue">
-    <div class="report-block-list-icon append-right-10 prepend-left-10">
+  <div class="report-block-list-issue prepend-left-default append-right-default">
+    <div class="report-block-list-icon append-right-10 prepend-left-5">
       <ci-icon :status="iconStatus" />
     </div>
     <div class="report-block-list-issue-description">

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

+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import popover from '~/vue_shared/directives/popover';
+
+export default {
+  name: 'SecurityReportsHelpPopover',
+  components: {
+    Icon,
+  },
+  directives: {
+    popover,
+  },
+  props: {
+    options: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    popoverOptions() {
+      return {
+        html: true,
+        trigger: 'focus',
+        placement: 'top',
+        template:
+          '<div class="popover" role="tooltip"><div class="arrow"></div><p class="popover-title"></p><div class="popover-content"></div></div>',
+        ...this.options,
+      };
+    },
+  },
+};
+</script>
+<template>
+  <button
+    type="button"
+    class="btn-transparent btn-blank"
+    v-popover="popoverOptions"
+    tabindex="0"
+  >
+    <icon name="question" />
+  </button>
+</template>

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

@@ -13,8 +13,8 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue">
-    <div class="report-block-list-icon append-right-15 prepend-left-10">
+  <div class="report-block-list-issue prepend-left-default append-right-default">
+    <div class="report-block-list-icon append-right-10 prepend-left-5">
       <loading-icon />
     </div>
     <div class="report-block-list-issue-description">

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

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import popover from '~/vue_shared/directives/popover';
+import Popover from './help_popover.vue';
 
 /**
  * Renders the summary row for each security report
@@ -10,11 +9,8 @@ import popover from '~/vue_shared/directives/popover';
 export default {
   name: 'SecuritySummaryRow',
   components: {
-    Icon,
     CiIcon,
-  },
-  directives: {
-    popover,
+    Popover,
   },
   props: {
     summary: {
@@ -25,26 +21,12 @@ export default {
       type: String,
       required: true,
     },
-    popoverTitle: {
-      type: String,
-      required: true,
-    },
-    popoverContent: {
-      type: String,
+    popoverOptions: {
+      type: Object,
       required: true,
     },
   },
   computed: {
-    popoverOptions() {
-      return {
-        html: true,
-        trigger: 'focus',
-        placement: 'top',
-        title: this.popoverTitle,
-        content: this.popoverContent,
-        template: '<div class="popover" role="tooltip"><div class="arrow"></div><p class="popover-title"></p><div class="popover-content"></div></div>',
-      };
-    },
     iconStatus() {
       return {
         group: this.statusIcon,
@@ -55,24 +37,17 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue">
-    <div class="report-block-list-icon append-right-10 prepend-left-10">
+  <div class="report-block-list-issue prepend-left-default append-right-default">
+    <div class="report-block-list-icon append-right-10 prepend-left-5">
       <ci-icon :status="iconStatus" />
     </div>
 
-    <div class="report-block-list-issue-description">
+    <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
       <div class="report-block-list-issue-description-text append-right-5">
         {{ summary }}
       </div>
 
-      <button
-        type="button"
-        class="btn-transparent btn-blank"
-        v-popover="popoverOptions"
-        tabindex="0"
-      >
-        <icon name="question" />
-      </button>
+      <popover :options="popoverOptions" />
     </div>
   </div>
 </template>

spec/javascripts/vue_shared/security_reports/components/summary_row_spec.js

@@ -8,8 +8,10 @@ describe('Summary row', () => {
 
   const props = {
     summary: 'SAST detected 1 new vulnerability and 1 fixed vulnerability',
-    popoverTitle: 'Static Application Security Testing (SAST)',
-    popoverContent: '<a>Learn more about SAST</a>',
+    popoverOptions: {
+      title: 'Static Application Security Testing (SAST)',
+      content: '<a>Learn more about SAST</a>',
+    },
     statusIcon: 'warning',
   };
 
@@ -32,9 +34,4 @@ describe('Summary row', () => {
       'js-ci-status-icon-warning',
     );
   });
-
-  it('renders tooltip with provided title and content', () => {
-    expect(vm.popoverOptions.title).toEqual(props.popoverTitle);
-    expect(vm.popoverOptions.content).toEqual(props.popoverContent);
-  });
 });