Merge branch 'fix-vuln-check-popovers' into 'master'

Fix for approval check popover bug

See merge request gitlab-org/gitlab!65579

ee/app/assets/javascripts/approvals/components/approval_check_popover.vue

@@ -29,20 +29,25 @@ export default {
       default: '',
     },
   },
+  computed: {
+    popoverTriggerId() {
+      return `reportInfo-${this.title}`;
+    },
+  },
 };
 </script>
 
 <template>
   <span class="vertical-align-middle text-muted js-help ml-2">
     <gl-icon
-      id="reportInfo"
+      :id="popoverTriggerId"
       name="question"
       class="author-link suggestion-help-hover"
       :aria-label="__('help')"
       :size="14"
       data-testid="icon2"
     />
-    <gl-popover target="reportInfo" placement="top" :title="title">
+    <gl-popover :target="popoverTriggerId" placement="top" :title="title">
       <div class="mb-2">{{ text }}</div>
       <gl-link v-if="documentationLink" target="_blank" :href="documentationLink">
         <span class="vertical-align-middle">{{ documentationText }}</span>

ee/spec/frontend/approvals/components/approval_check_popover_spec.js

@@ -7,11 +7,11 @@ import { TEST_HOST } from 'helpers/test_constants';
 describe('Approval Check Popover', () => {
   let wrapper;
 
+  const title = 'Title';
+
   beforeEach(() => {
     wrapper = shallowMount(component, {
-      propsData: {
-        title: 'Title',
-      },
+      propsData: { title },
     });
   });
 
@@ -43,8 +43,8 @@ describe('Approval Check Popover', () => {
 
   it('should render gl-popover with correct props', () => {
     expect(wrapper.find(GlPopover).props()).toMatchObject({
-      title: 'Title',
-      target: 'reportInfo',
+      title,
+      target: `reportInfo-${title}`,
       placement: 'top',
     });
   });

ee/spec/frontend/approvals/components/approval_check_rule_popover_spec.js

@@ -60,7 +60,7 @@ describe('Approval Check Popover', () => {
     });
 
     describe('approvalConfig', () => {
-      it('returns "Vulberability-Check" config', (done) => {
+      it('returns "Vulnerability-Check" config', (done) => {
         wrapper.setProps({ rule: { name: VULNERABILITY_CHECK_NAME } });
         Vue.nextTick(() => {
           expect(wrapper.vm.approvalRuleConfig.title).toBe(