Merge branch 'ph/345498/actionOnClickHandler' into 'master'

Added support for click handlers in widget extension action buttons

See merge request gitlab-org/gitlab!74401

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

@@ -24,6 +24,13 @@ export default {
       return sprintf(__('%{widget} options'), { widget: this.widget });
     },
   },
+  methods: {
+    onClickAction(action) {
+      if (action.onClick) {
+        action.onClick();
+      }
+    },
+  },
 };
 </script>
 
@@ -47,6 +54,7 @@ export default {
         :key="index"
         :href="btn.href"
         :target="btn.target"
+        @click="onClickAction(btn)"
       >
         {{ btn.text }}
       </gl-dropdown-item>
@@ -57,11 +65,12 @@ export default {
         :key="index"
         :href="btn.href"
         :target="btn.target"
-        :class="{ 'gl-mr-3': index > 1 }"
+        :class="{ 'gl-mr-3': index !== tertiaryButtons.length - 1 }"
         category="tertiary"
         variant="confirm"
         size="small"
-        class="gl-display-none gl-md-display-block"
+        class="gl-display-none gl-md-display-block gl-float-left"
+        @click="onClickAction(btn)"
       >
         {{ btn.text }}
       </gl-button>

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

@@ -30,7 +30,15 @@ export default {
     // Tertiary action buttons that will take the user elsewhere
     // in the GitLab app
     tertiaryButtons() {
-      return [{ text: 'Full report', href: this.conflictsDocsPath, target: '_blank' }];
+      return [
+        {
+          text: 'Click me',
+          onClick() {
+            console.log('Hello world');
+          },
+        },
+        { text: 'Full report', href: this.conflictsDocsPath, target: '_blank' },
+      ];
     },
   },
   methods: {

spec/frontend/vue_mr_widget/components/extensions/actions_spec.js

@@ -24,6 +24,18 @@ describe('MR widget extension actions', () => {
       expect(wrapper.findAllComponents(GlButton)).toHaveLength(1);
     });
 
+    it('calls action click handler', async () => {
+      const onClick = jest.fn();
+
+      factory({
+        tertiaryButtons: [{ text: 'hello world', onClick }],
+      });
+
+      await wrapper.findComponent(GlButton).vm.$emit('click');
+
+      expect(onClick).toHaveBeenCalled();
+    });
+
     it('renders tertiary actions in dropdown', () => {
       factory({
         tertiaryButtons: [{ text: 'hello world', href: 'https://gitlab.com', target: '_blank' }],