Add telemetry event for license compliance MR widget body Link

This commit introduces a telemetry event when the detail link
in the License Compliance MR widget is clicked which targets
an external website.

Changelog: added

config/metrics/counts_28d/20211216083832_full_report.yml

+---
+data_category: optional
+key_path: redis_hll_counters.testing.users_clicking_license_visiting_external_website_monthly
+description: Count of users clicking licence to visit external information website
+product_section: sec
+product_stage: secure
+product_group: group::static analysis
+product_category: dependency_scanning
+value_type: number
+status: active
+milestone: '14.7'
+introduced_by_url:
+time_frame: 28d
+data_source: redis_hll
+instrumentation_class: RedisHLLMetric
+options: 
+  events: 
+    - users_clicking_license_visiting_external_website
+distribution:
+  - ce
+  - ee
+tier:
+  - free
+  - premium
+  - ultimate
\ No newline at end of file

config/metrics/counts_7d/20211216084934_full_report.yml

+---
+data_category: optional
+key_path: redis_hll_counters.testing.users_clicking_license_visiting_external_website_weekly
+description: Count of users clicking licence to visit external information website
+product_section: sec
+product_stage: secure
+product_group: group::static analysis
+product_category: dependency_scanning
+value_type: number
+status: active
+milestone: '14.7'
+introduced_by_url:
+time_frame: 7d
+data_source: redis_hll
+instrumentation_class: RedisHLLMetric
+options: 
+  events: 
+    - users_clicking_license_visiting_external_website
+distribution:
+  - ce
+  - ee
+tier:
+  - free
+  - premium
+  - ultimate
\ No newline at end of file

ee/app/assets/javascripts/vue_shared/license_compliance/components/license_issue_body.vue

 <script>
 import { GlLink } from '@gitlab/ui';
 import { mapActions } from 'vuex';
+import api from '~/api';
 import { LICENSE_MANAGEMENT } from 'ee/vue_shared/license_compliance/store/constants';
 import LicensePackages from './license_packages.vue';
@@ -19,13 +20,25 @@ export default {
       return Boolean(this.issue.packages.length);
     },
   },
-  methods: { ...mapActions(LICENSE_MANAGEMENT, ['setLicenseInModal']) },
+  methods: {
+    ...mapActions(LICENSE_MANAGEMENT, ['setLicenseInModal']),
+    trackLinkClick() {
+      api.trackRedisHllUserEvent('users_clicking_license_visiting_external_website');
+    },
+  },
 };
 </script>
 <template>
   <div class="report-block-info license-item">
-    <gl-link v-if="issue.url" :href="issue.url" target="_blank">{{ issue.name }}</gl-link>
+    <gl-link
+      v-if="issue.url"
+      data-testid="licenseissuebody-link"
+      :href="issue.url"
+      target="_blank"
+      @click="trackLinkClick"
+      >{{ issue.name }}</gl-link
+    >
     <span v-else data-testid="license-copy">{{ issue.name }}</span>
     <license-packages v-if="hasPackages" :packages="issue.packages" class="text-secondary" />
   </div>

ee/spec/frontend/vue_shared/license_compliance/components/license_issue_body_spec.js

 import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import api from '~/api';
 import LicenseIssueBody from 'ee/vue_shared/license_compliance/components/license_issue_body.vue';
 import LicensePackages from 'ee/vue_shared/license_compliance/components/license_packages.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -79,4 +80,24 @@ describe('LicenseIssueBody', () => {
       expect(packages.exists()).toBe(false);
     });
   });
+
+  describe('snowplow', () => {
+    let trackEventSpy;
+
+    beforeEach(() => {
+      trackEventSpy = jest.spyOn(api, 'trackRedisHllUserEvent').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      trackEventSpy.mockRestore();
+    });
+
+    it('tracks users_visiting_testing_license_compliance_full_report', () => {
+      wrapper.find('[data-testid="licenseissuebody-link"]').vm.$emit('click');
+
+      expect(trackEventSpy).toHaveBeenCalledWith(
+        'users_clicking_license_visiting_external_website',
+      );
+    });
+  });
 });