Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

3 files changed, 37 insertions, 7 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue
index 023367a794e..33a83aef057 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue
@@ -24,13 +24,20 @@ export default {
       return sprintf(__('%{widget} options'), { widget: this.widget });
     },
   },
+  methods: {
+    onClickAction(action) {
+      if (action.onClick) {
+        action.onClick();
+      }
+    },
+  },
 };
 </script>
 
 <template>
   <div>
     <gl-dropdown
-      v-if="tertiaryButtons"
+      v-if="tertiaryButtons.length"
       :text="dropdownLabel"
       icon="ellipsis_v"
       no-caret
@@ -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>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index 298f7c7ad8c..6f10f788952 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -8,6 +8,8 @@ import {
   GlTooltipDirective,
   GlIntersectionObserver,
 } from '@gitlab/ui';
+import { once } from 'lodash';
+import api from '~/api';
 import { sprintf, s__, __ } from '~/locale';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import { EXTENSION_ICON_CLASS } from '../../constants';
@@ -102,8 +104,15 @@ export default {
       });
   },
   methods: {
+    triggerRedisTracking: once(function triggerRedisTracking() {
+      if (this.$options.expandEvent) {
+        api.trackRedisHllUserEvent(this.$options.expandEvent);
+      }
+    }),
     toggleCollapsed() {
       this.isCollapsed = !this.isCollapsed;
+
+      this.triggerRedisTracking();
     },
     loadAllData() {
       if (this.fullData) return;
@@ -143,7 +152,10 @@ export default {
         :is-loading="isLoadingSummary"
         :icon-name="statusIconName"
       />
-      <div class="media-body gl-display-flex gl-flex-direction-row!">
+      <div
+        class="media-body gl-display-flex gl-flex-direction-row!"
+        data-testid="widget-extension-top-level"
+      >
         <div class="gl-flex-grow-1">
           <template v-if="isLoadingSummary">{{ widgetLoadingText }}</template>
           <div v-else v-safe-html="summary(collapsedData)"></div>
@@ -194,20 +206,28 @@ export default {
           class="gl-display-flex gl-align-items-center gl-py-3 gl-pl-7"
           data-testid="extension-list-item"
         >
-          <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" />
+          <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" class="gl-pl-0" />
           <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>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js
index 4ca0b660696..ec6e6ed2620 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js
@@ -12,6 +12,7 @@ export const registerExtension = (extension) => {
     name: extension.name,
     props: extension.props,
     i18n: extension.i18n,
+    expandEvent: extension.expandEvent,
     computed: {
       ...Object.keys(extension.computed).reduce(
         (acc, computedKey) => ({