Add tooltip with help docs to license scanning widget

* Added tooltip to be consistent with other widgets

Changelog: changed

ee/app/assets/javascripts/vue_merge_request_widget/extensions/license_compliance/index.vue

@@ -5,6 +5,7 @@ import axios from '~/lib/utils/axios_utils';
 import { EXTENSION_ICONS } from '~/vue_merge_request_widget/constants';
 import { LICENSE_APPROVAL_STATUS } from 'ee/vue_shared/license_compliance/constants';
 import MrWidget from '~/vue_merge_request_widget/components/widget/widget.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { parseDependencies } from './utils';
 
 const APPROVAL_STATUS_TO_ICON = {
@@ -249,6 +250,16 @@ export default {
       });
     },
   },
+  widgetHelpPopover: {
+    options: { title: s__('ciReport|License scan results') },
+    content: {
+      text: s__('ciReport|Detects known vulnerabilities in your software dependencies.'),
+      learnMorePath: helpPagePath('user/compliance/license_approval_policies', {
+        anchor:
+          'criteria-comparing-licenses-detected-in-the-merge-request-branch-to-licenses-detected-in-the-default-branch',
+      }),
+    },
+  },
 };
 </script>
 
@@ -264,5 +275,6 @@ export default {
     :summary="summary"
     :is-collapsible="shouldCollapse"
     :content="licenseComplianceData.expanded"
+    :help-popover="$options.widgetHelpPopover"
   />
 </template>

ee/spec/frontend/vue_merge_request_widget/extensions/license_compliance/index_spec.js

@@ -3,6 +3,7 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import ActionButtons from '~/vue_merge_request_widget/components/widget/action_buttons.vue';
+import Widget from '~/vue_merge_request_widget/components/widget/widget.vue';
 
 import licenseComplianceExtension from 'ee/vue_merge_request_widget/extensions/license_compliance/index.vue';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
@@ -36,6 +37,7 @@ describe('License Compliance extension', () => {
     mock.onGet(endpoint).reply(statusCode, data, {});
   };
 
+  const findWidget = () => wrapper.findComponent(Widget);
   const findToggleCollapsedButton = () => wrapper.findByTestId('toggle-button');
   const findAllExtensionListItems = () => wrapper.findAllByTestId('extension-list-item');
   const findActionButtons = () => wrapper.findComponent(ActionButtons);
@@ -112,6 +114,23 @@ describe('License Compliance extension', () => {
         expect(findToggleCollapsedButton().exists()).toBe(isExpandable);
       },
     );
+
+    it('displays the help popover', () => {
+      mockApi(licenseComparisonPathCollapsed, HTTP_STATUS_OK, licenseComplianceNewLicenses);
+
+      createComponent();
+
+      expect(findWidget().props('helpPopover')).toEqual({
+        content: {
+          learnMorePath:
+            '/help/user/compliance/license_approval_policies#criteria-comparing-licenses-detected-in-the-merge-request-branch-to-licenses-detected-in-the-default-branch',
+          text: 'Detects known vulnerabilities in your software dependencies.',
+        },
+        options: {
+          title: 'License scan results',
+        },
+      });
+    });
   });
 
   describe('actions buttons', () => {

locale/gitlab.pot

@@ -58166,6 +58166,9 @@ msgstr ""
 msgid "ciReport|Dependency scanning"
 msgstr ""
+msgid "ciReport|Detects known vulnerabilities in your software dependencies."
+msgstr ""
+
 msgid "ciReport|Detects known vulnerabilities in your source code's dependencies."
 msgstr ""
@@ -58220,6 +58223,9 @@ msgstr ""
 msgid "ciReport|License Compliance test metrics results are being parsed"
 msgstr ""
+msgid "ciReport|License scan results"
+msgstr ""
+
 msgid "ciReport|Load Performance"
 msgstr ""