Added support for actions level 2 in the widget extension

This uses the same actions component so that when
support for more actions gets added, the level 2
sections will also get this support added.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/341049

app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue

@@ -200,17 +200,25 @@ export default {
           <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" />
           <gl-intersection-observer
             :options="{ rootMargin: '100px', thresholds: 0.1 }"
-            class="gl-flex-wrap gl-align-self-center gl-display-flex"
+            class="gl-flex-wrap gl-display-flex gl-w-full"
             @appear="appear(index)"
             @disappear="disappear(index)"
           >
-            <div v-safe-html="data.text" class="gl-mr-4"></div>
+            <div
+              v-safe-html="data.text"
+              class="gl-mr-4 gl-display-flex gl-align-items-center"
+            ></div>
             <div v-if="data.link">
               <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
             </div>
             <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
               {{ data.badge.text }}
             </gl-badge>
+            <actions
+              :widget="$options.label || $options.name"
+              :tertiary-buttons="data.actions"
+              class="gl-ml-auto"
+            />
           </gl-intersection-observer>
         </li>
       </smart-virtual-list>

app/assets/javascripts/vue_merge_request_widget/extensions/issues.js

@@ -66,6 +66,7 @@ export default {
             //   href: 'https://google.com', // Required: href for the link
             //   text: 'Link text', // Required: Text to be used inside the link
             // },
+            actions: [{ text: 'Full report', href: 'https://gitlab.com', target: '_blank' }],
           }));
         });
     },

spec/frontend/vue_mr_widget/mr_widget_options_spec.js

-import { GlBadge, GlLink, GlIcon, GlDropdown } from '@gitlab/ui';
+import { GlBadge, GlLink, GlIcon, GlButton, GlDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
@@ -932,6 +932,9 @@ describe('MrWidgetOptions', () => {
       // Renders a link in the row
       expect(collapsedSection.find(GlLink).exists()).toBe(true);
       expect(collapsedSection.find(GlLink).text()).toBe('GitLab.com');
+
+      expect(collapsedSection.find(GlButton).exists()).toBe(true);
+      expect(collapsedSection.find(GlButton).text()).toBe('Full report');
     });
   });
 });

spec/frontend/vue_mr_widget/test_extension.js

@@ -30,6 +30,7 @@ export default {
             href: 'https://gitlab.com',
             text: 'GitLab.com',
           },
+          actions: [{ text: 'Full report', href: 'https://gitlab.com', target: '_blank' }],
         },
       ]);
     },