Adjust Popover trigger on licence-check approvers panel

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

@@ -33,20 +33,16 @@ export default {
 </script>
 
 <template>
-  <span class="vertical-align-middle text-muted js-help">
+  <span class="vertical-align-middle text-muted js-help ml-2">
     <gl-icon
-      ref="reportInfo"
+      id="reportInfo"
       name="question"
-      class="text-info"
+      class="author-link suggestion-help-hover"
       :aria-label="__('help')"
       :size="14"
+      data-testid="icon2"
     />
-    <gl-popover
-      :target="() => $refs.reportInfo.$el"
-      placement="top"
-      triggers="click blur"
-      :title="title"
-    >
+    <gl-popover target="reportInfo" 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/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue

@@ -117,14 +117,14 @@ export default {
         <td class="w-0 gl-pr-4!"><approved-icon class="gl-pl-2" :is-approved="rule.approved" /></td>
         <td :colspan="rule.rule_type === $options.ruleTypeAnyApprover ? 2 : 1" class="gl-pl-0!">
           <div
-            :class="glFeatures.approvalsCommentedBy ? 'd-md-block' : 'd-sm-block'"
-            class="d-none js-name"
+            :class="glFeatures.approvalsCommentedBy ? 'd-md-flex' : 'd-sm-flex'"
+            class="d-none js-name align-items-center"
           >
             <empty-rule-name
               v-if="rule.rule_type === $options.ruleTypeAnyApprover"
               :eligible-approvers-docs-path="eligibleApproversDocsPath"
             />
-            <span v-else>
+            <span v-else class="mt-n1">
               <span
                 v-if="rule.section && rule.section !== 'codeowners'"
                 :aria-label="sectionNameLabel(rule)"

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

-import { GlPopover, GlLink } from '@gitlab/ui';
+import { GlPopover, GlLink, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import component from 'ee/approvals/components/approval_check_popover.vue';
@@ -34,4 +34,18 @@ describe('Approval Check Popover', () => {
       expect(wrapper.find(GlPopover).find(GlLink).exists()).toBeFalsy();
     });
   });
+
+  it('renders an Icon with an id that matches the Popover target', () => {
+    expect(wrapper.find(GlPopover).props().target).toBe(
+      wrapper.find(GlIcon).element.getAttribute('id'),
+    );
+  });
+
+  it('should render gl-popover with correct props', () => {
+    expect(wrapper.find(GlPopover).props()).toMatchObject({
+      title: 'Title',
+      target: 'reportInfo',
+      placement: 'top',
+    });
+  });
 });