Merge branch 'ph/widgetExtensionsTertiaryButtons' into 'master'

Adds support for tertiary buttons inside of the widget extension

See merge request gitlab-org/gitlab!71097

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

+<script>
+import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { sprintf, __ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+    GlDropdown,
+    GlDropdownItem,
+  },
+  props: {
+    widget: {
+      type: String,
+      required: true,
+    },
+    tertiaryButtons: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    dropdownLabel() {
+      return sprintf(__('%{widget} options'), { widget: this.widget });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-dropdown
+      :text="dropdownLabel"
+      icon="ellipsis_v"
+      no-caret
+      category="tertiary"
+      right
+      lazy
+      text-sr-only
+      size="small"
+      class="gl-display-block gl-md-display-none!"
+    >
+      <gl-dropdown-item
+        v-for="(btn, index) in tertiaryButtons"
+        :key="index"
+        :href="btn.href"
+        :target="btn.target"
+      >
+        {{ btn.text }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+    <template v-if="tertiaryButtons.length">
+      <gl-button
+        v-for="(btn, index) in tertiaryButtons"
+        :key="index"
+        :href="btn.href"
+        :target="btn.target"
+        :class="{ 'gl-mr-3': index > 1 }"
+        category="tertiary"
+        variant="confirm"
+        size="small"
+        class="gl-display-none gl-md-display-block"
+      >
+        {{ btn.text }}
+      </gl-button>
+    </template>
+  </div>
+</template>

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

@@ -11,6 +11,7 @@ import { sprintf, s__ } from '~/locale';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import { EXTENSION_ICON_CLASS } from '../../constants';
 import StatusIcon from './status_icon.vue';
+import Actions from './actions.vue';
 
 export const LOADING_STATES = {
   collapsedLoading: 'collapsedLoading',
@@ -26,6 +27,7 @@ export default {
     GlBadge,
     SmartVirtualList,
     StatusIcon,
+    Actions,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -66,6 +68,9 @@ export default {
 
       return this.statusIcon(this.collapsedData);
     },
+    tertiaryActionsButtons() {
+      return this.tertiaryButtons ? this.tertiaryButtons() : undefined;
+    },
   },
   watch: {
     isCollapsed(newVal) {
@@ -119,13 +124,16 @@ export default {
         :is-loading="isLoadingSummary"
         :icon-name="statusIconName"
       />
-      <div class="media-body gl-display-flex gl-align-self-center gl-align-items-center">
-        <div class="code-text">
+      <div
+        class="media-body gl-display-flex gl-align-self-center gl-align-items-center gl-flex-direction-row!"
+      >
+        <div class="gl-flex-grow-1">
           <template v-if="isLoadingSummary">
             {{ __('Loading...') }}
           </template>
           <div v-else v-safe-html="summary(collapsedData)"></div>
         </div>
+        <actions :widget="$options.name" :tertiary-buttons="tertiaryActionsButtons" />
         <div
           class="gl-float-right gl-align-self-center gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3"
         >
@@ -138,6 +146,7 @@ export default {
             :icon="isCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'"
             category="tertiary"
             data-testid="toggle-button"
+            size="small"
             @click="toggleCollapsed"
           />
         </div>

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

@@ -9,7 +9,7 @@ export default {
   name: 'Issues',
   // Add an array of props
   // These then get mapped to values stored in the MR Widget store
-  props: ['targetProjectFullPath'],
+  props: ['targetProjectFullPath', 'conflictsDocsPath'],
   // Add any extra computed props in here
   computed: {
     // Small summary text to be displayed in the collapsed state
@@ -22,6 +22,11 @@ export default {
     statusIcon(count) {
       return EXTENSION_ICONS.warning;
     },
+    // Tertiary action buttons that will take the user elsewhere
+    // in the GitLab app
+    tertiaryButtons() {
+      return [{ text: 'Full report', href: this.conflictsDocsPath, target: '_blank' }];
+    },
   },
   methods: {
     // Fetches the collapsed data

locale/gitlab.pot

@@ -1055,6 +1055,9 @@ msgstr ""
 msgid "%{webhooks_link_start}%{webhook_type}%{link_end} enable you to send notifications to web applications in response to events in a group or project. We recommend using an %{integrations_link_start}integration%{link_end} in preference to a webhook."
 msgstr ""
 
+msgid "%{widget} options"
+msgstr ""
+
 msgid "%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}v*%{code_tag_end} or %{code_tag_start}*-release%{code_tag_end} are supported."
 msgstr ""
 

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

+import { GlButton, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Actions from '~/vue_merge_request_widget/components/extensions/actions.vue';
+
+let wrapper;
+
+function factory(propsData = {}) {
+  wrapper = shallowMount(Actions, {
+    propsData: { ...propsData, widget: 'test' },
+  });
+}
+
+describe('MR widget extension actions', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('tertiaryButtons', () => {
+    it('renders buttons', () => {
+      factory({
+        tertiaryButtons: [{ text: 'hello world', href: 'https://gitlab.com', target: '_blank' }],
+      });
+
+      expect(wrapper.findAllComponents(GlButton)).toHaveLength(1);
+    });
+
+    it('renders tertiary actions in dropdown', () => {
+      factory({
+        tertiaryButtons: [{ text: 'hello world', href: 'https://gitlab.com', target: '_blank' }],
+      });
+
+      expect(wrapper.findAllComponents(GlDropdownItem)).toHaveLength(1);
+    });
+  });
+});