Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

1 files changed, 25 insertions, 6 deletions

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 7322958e6df..a25b4ab54e5 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
@@ -128,10 +128,12 @@ export default {
         api.trackRedisHllUserEvent(this.$options.expandEvent);
       }
     }),
-    toggleCollapsed() {
-      this.isCollapsed = !this.isCollapsed;
+    toggleCollapsed(e) {
+      if (!e?.target?.closest('.btn:not(.btn-icon),a')) {
+        this.isCollapsed = !this.isCollapsed;
 
-      this.triggerRedisTracking();
+        this.triggerRedisTracking();
+      }
     },
     initExtensionPolling() {
       const poll = new Poll({
@@ -139,7 +141,7 @@ export default {
           fetchData: () => this.fetchCollapsedData(this.$props),
         },
         method: 'fetchData',
-        successCallback: (data) => {
+        successCallback: ({ data }) => {
           if (Object.keys(data).length > 0) {
             poll.stop();
             this.setCollapsedData(data);
@@ -207,6 +209,19 @@ export default {
         this.showFade = true;
       }
     },
+    onRowMouseDown() {
+      this.down = Number(new Date());
+    },
+    onRowMouseUp(e) {
+      const up = Number(new Date());
+
+      // To allow for text to be selected we check if the the user is clicking
+      // or selecting, if they are selecting the time difference should be
+      // more than 200ms
+      if (up - this.down < 200) {
+        this.toggleCollapsed(e);
+      }
+    },
     generateText,
   },
   EXTENSION_ICON_CLASS,
@@ -215,7 +230,7 @@ export default {
 
 <template>
   <section class="media-section" data-testid="widget-extension">
-    <div class="media gl-p-5">
+    <div class="media gl-p-5 gl-cursor-pointer" @mousedown="onRowMouseDown" @mouseup="onRowMouseUp">
       <status-icon
         :name="$options.label || $options.name"
         :is-loading="isLoadingSummary"
@@ -253,7 +268,7 @@ export default {
             category="tertiary"
             data-testid="toggle-button"
             size="small"
-            @click="toggleCollapsed"
+            @click.self="toggleCollapsed"
           />
         </div>
       </div>
@@ -317,9 +332,13 @@ export default {
                   <div v-if="data.link">
                     <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
                   </div>
+                  <div v-if="data.supportingText">
+                    <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
+                  </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"