Merge branch 'ph/348798/extensionFullRowClickable' into 'master'

Make full widget extension row clickable

See merge request gitlab-org/gitlab!78294

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

@@ -128,10 +128,12 @@ export default {
         api.trackRedisHllUserEvent(this.$options.expandEvent);
       }
     }),
-    toggleCollapsed() {
+    toggleCollapsed(e) {
+      if (!e?.target?.closest('.btn:not(.btn-icon),a')) {
         this.isCollapsed = !this.isCollapsed;
 
         this.triggerRedisTracking();
+      }
     },
     initExtensionPolling() {
       const poll = new Poll({
@@ -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>

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

@@ -25,9 +25,9 @@ export default {
         n__(
           'ciReport|Load performance test metrics detected %{strong_start}%{changesFound}%{strong_end} change',
           'ciReport|Load performance test metrics detected %{strong_start}%{changesFound}%{strong_end} changes',
-          changesFound,
+          count,
         ),
-        { changesFound },
+        { changesFound: count },
       );
     },
     // Status icon to be used next to the summary text

spec/frontend/vue_mr_widget/extentions/accessibility/index_spec.js

@@ -95,10 +95,11 @@ describe('Accessibility extension', () => {
 
       await waitForPromises();
 
-      findToggleCollapsedButton().vm.$emit('click');
+      findToggleCollapsedButton().trigger('click');
 
       await waitForPromises();
     });
+
     it('displays all report list items', async () => {
       expect(findAllExtensionListItems()).toHaveLength(10);
     });