Adds a shouldCollapse computed prop to widget extensions

Adds the a `shouldCollapse` computed property to widget extension
which can be used to tell the base component that more content
will be available if expanded.

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

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

@@ -66,7 +66,15 @@ export default {
       return this.loadingState === LOADING_STATES.expandedLoading;
     },
     isCollapsible() {
-      return !this.isLoadingSummary && this.loadingState !== LOADING_STATES.collapsedError;
+      if (!this.isLoadingSummary && this.loadingState !== LOADING_STATES.collapsedError) {
+        if (this.shouldCollapse) {
+          return this.shouldCollapse();
+        }
+
+        return true;
+      }
+
+      return false;
     },
     hasFullData() {
       return this.fullData.length > 0;
@@ -128,7 +136,7 @@ export default {
       }
     }),
     toggleCollapsed(e) {
-      if (!e?.target?.closest('.btn:not(.btn-icon),a')) {
+      if (this.isCollapsible && !e?.target?.closest('.btn:not(.btn-icon),a')) {
         this.isCollapsed = !this.isCollapsed;
 
         this.triggerRedisTracking();
@@ -226,7 +234,12 @@ export default {
 
 <template>
   <section class="media-section" data-testid="widget-extension">
-    <div class="media gl-p-5 gl-cursor-pointer" @mousedown="onRowMouseDown" @mouseup="onRowMouseUp">
+    <div
+      :class="{ 'gl-cursor-pointer': isCollapsible }"
+      class="media gl-p-5"
+      @mousedown="onRowMouseDown"
+      @mouseup="onRowMouseUp"
+    >
       <status-icon
         :name="$options.label || $options.name"
         :is-loading="isLoadingSummary"

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

@@ -48,6 +48,9 @@ export default {
         { text: 'Full report', href: this.conflictsDocsPath, target: '_blank' },
       ];
     },
+    shouldCollapse() {
+      return true;
+    },
   },
   methods: {
     // Fetches the collapsed data

doc/development/new_fe_guide/modules/widget_extensions.md

@@ -40,6 +40,7 @@ export default {
     summary(data) {},     // Required: Level 1 summary text
     statusIcon(data) {},  // Required: Level 1 status icon
     tertiaryButtons() {}, // Optional: Level 1 action buttons
+    shouldCollapse() {}, // Optional: Add logic to determine if the widget can expand or not
   },
   methods: {
     fetchCollapsedData(props) {}, // Required: Fetches data required for collapsed state

spec/frontend/vue_mr_widget/mr_widget_options_spec.js

@@ -46,6 +46,8 @@ describe('MrWidgetOptions', () => {
   let mock;
 
   const COLLABORATION_MESSAGE = 'Members who can merge are allowed to add commits';
+  const findExtensionToggleButton = () =>
+    wrapper.find('[data-testid="widget-extension"] [data-testid="toggle-button"]');
 
   beforeEach(() => {
     gl.mrWidgetData = { ...mockData };
@@ -905,7 +907,7 @@ describe('MrWidgetOptions', () => {
     beforeEach(() => {
       pollRequest = jest.spyOn(Poll.prototype, 'makeRequest');
 
-      registerExtension(workingExtension);
+      registerExtension(workingExtension());
 
       createComponent();
     });
@@ -937,9 +939,7 @@ describe('MrWidgetOptions', () => {
     it('renders full data', async () => {
       await waitForPromises();
 
-      wrapper
-        .find('[data-testid="widget-extension"] [data-testid="toggle-button"]')
-        .trigger('click');
+      findExtensionToggleButton().trigger('click');
 
       await nextTick();
 
@@ -975,6 +975,24 @@ describe('MrWidgetOptions', () => {
     });
   });
 
+  describe('expansion', () => {
+    it('hides collapse button', async () => {
+      registerExtension(workingExtension(false));
+      createComponent();
+      await waitForPromises();
+
+      expect(findExtensionToggleButton().exists()).toBe(false);
+    });
+
+    it('shows collapse button', async () => {
+      registerExtension(workingExtension(true));
+      createComponent();
+      await waitForPromises();
+
+      expect(findExtensionToggleButton().exists()).toBe(true);
+    });
+  });
+
   describe('mock polling extension', () => {
     let pollRequest;
     let pollStop;

spec/frontend/vue_mr_widget/test_extensions.js

 import { EXTENSION_ICONS } from '~/vue_merge_request_widget/constants';
 
-export const workingExtension = {
+export const workingExtension = (shouldCollapse = true) => ({
   name: 'WidgetTestExtension',
   props: ['targetProjectFullPath'],
   expandEvent: 'test_expand_event',
@@ -11,6 +11,9 @@ export const workingExtension = {
     statusIcon({ count }) {
       return count > 0 ? EXTENSION_ICONS.warning : EXTENSION_ICONS.success;
     },
+    shouldCollapse() {
+      return shouldCollapse;
+    },
   },
   methods: {
     fetchCollapsedData({ targetProjectFullPath }) {
@@ -36,7 +39,7 @@ export const workingExtension = {
       ]);
     },
   },
-};
+});
 
 export const collapsedDataErrorExtension = {
   name: 'WidgetTestCollapsedErrorExtension',
@@ -99,7 +102,7 @@ export const fullDataErrorExtension = {
 };
 
 export const pollingExtension = {
-  ...workingExtension,
+  ...workingExtension(),
   enablePolling: true,
 };