Display action buttons for the widget

What does this MR do and why?

Displays action buttons when the actionButtons property is populated.

Screenshots or screen recordings

How to set up and validate locally

1. This feature is behind a feature flag. Enable :refactor_security_extension to turn this feature on.

echo "Feature.enable(:refactor_security_extension)" | rails c

1. Visit an MR page with Security Scanning

The easiest way to populate data for testing is using this extension https://chrome.google.com/webstore/detail/mokku-mock-api-calls-seam/llflfcikklhgamfmnjkgpdadpmdplmji?hl=en and importing mokku-mocks-22-8-2022.json this json.

Once you have enabled the extension:

1. Open the developer tools
2. Find Mokku tab
3. Click on import
4. Import the file mentioned above

Apply the following patch to force displaying a button:

diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/mr_widget_security_reports.vue b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/mr_widget_security_reports.vue
index aa5e88420080..adf2bed13b4a 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/mr_widget_security_reports.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/mr_widget_security_reports.vue
@@ -23,6 +23,7 @@ export default {
   data() {
     return {
       isLoading: false,
+      clickText: 'click-me',
       vulnerabilities: {
         collapsed: null,
         extended: null,
@@ -30,6 +31,26 @@ export default {
     };
   },
   computed: {
+    actionButtons() {
+      return [
+        {
+          text: this.clickText,
+          href: '#',
+          target: '_blank',
+          onClick: () => {
+            this.clickText = 'you-have-clicked';
+          },
+        },
+        {
+          text: `click-me-2`,
+          href: '#',
+          onClick: () => {
+            alert('hello-world');
+          },
+        },
+      ];
+    },
+
     isCollapsible() {
       if (!this.vulnerabilities.collapsed) {
         return false;
@@ -129,6 +150,7 @@ export default {
     :status-icon-name="statusIconName"
     :widget-name="$options.name"
     :is-collapsible="isCollapsible"
+    :action-buttons="actionButtons"
     multi-polling
     @is-loading="handleIsLoading"
   >

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #368593 (closed)