Commit 9b5e5ff4 authored by Phil Hughes's avatar Phil Hughes

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
parent 496e7198
......@@ -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"
......
......@@ -48,6 +48,9 @@ export default {
{ text: 'Full report', href: this.conflictsDocsPath, target: '_blank' },
];
},
shouldCollapse() {
return true;
},
},
methods: {
// Fetches the collapsed data
......
......@@ -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
......
......@@ -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;
......
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,
};
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment