Make full widget extension row clickable

Instead of the click area being the small toggle button on each
extension row, this changes it to make the full row clickable.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/348798

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({
@@ -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);
     });