Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,40 @@ describe('ColumnManagementModal component', () => {
fireEvent.click(screen.getByText('Score'));

fireEvent.click(screen.getByText('Reset to default'));

expect(getCheckboxesState()).toEqual(DEFAULT_COLUMNS.map(c => c.isShownByDefault));
});

it('should call onReset callback when reset to default is clicked', () => {
const onResetMock = jest.fn();
render(<ColumnManagementModal
appliedColumns={DEFAULT_COLUMNS}
applyColumns={setColumns}
isOpen
onClose={onClose}
onReset={onResetMock}
/>);

const resetButtons = screen.getAllByText('Reset to default');
// Click the last one rendered (the new modal)
fireEvent.click(resetButtons[resetButtons.length - 1]);

expect(onResetMock).toHaveBeenCalledTimes(1);
});

it('should display custom reset button label', () => {
const customLabel = 'Restaurer par défaut';
render(<ColumnManagementModal
appliedColumns={DEFAULT_COLUMNS}
applyColumns={setColumns}
isOpen
onClose={onClose}
resetToDefaultLabel={customLabel}
/>);

expect(screen.getByText(customLabel)).toBeInTheDocument();
});

it('should set all columns to show upon clicking on "Select all"', async () => {
// disable Impact column which is enabled by default
fireEvent.click(screen.getByText('Impact'));
Expand Down Expand Up @@ -138,4 +168,40 @@ describe('ColumnManagementModal component', () => {
expect(screen.getByTestId('drag-drop-sort')).toBeInTheDocument();
});
});

describe('reset functionality', () => {
it('should reset column order to original when reset to default is clicked', () => {
const reorderedColumns = [
DEFAULT_COLUMNS[3], // Score (last -> first)
DEFAULT_COLUMNS[0], // ID
DEFAULT_COLUMNS[2], // Impact
DEFAULT_COLUMNS[1], // Publish date
];

const applyColumnsMock = jest.fn();
render(<ColumnManagementModal
appliedColumns={reorderedColumns}
applyColumns={applyColumnsMock}
isOpen
onClose={onClose}
/>);

// Click reset to default - get all buttons and click the last one
const resetButtons = screen.getAllByText('Reset to default');
fireEvent.click(resetButtons[resetButtons.length - 1]);

// Click save to apply changes
const saveButtons = screen.getAllByText('Save');
fireEvent.click(saveButtons[saveButtons.length - 1]);

// Verify that the saved columns match the original reordered columns order
// (after reset, it should restore the order from appliedColumns which is reorderedColumns)
expect(applyColumnsMock).toHaveBeenCalledWith(
reorderedColumns.map(col => ({
...col,
isShown: col.isShownByDefault
}))
);
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ export interface ColumnManagementModalProps extends Omit<ModalProps, 'ref' | 'ch
ouiaId?: string | number;
/** Enable drag and drop functionality for reordering columns */
enableDragDrop?: boolean;
/** Invoked when reset to default button is clicked */
onReset?: () => void;
/** Custom label for reset to default button */
resetToDefaultLabel?: string;
}

const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
Expand All @@ -51,6 +55,8 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
applyColumns,
ouiaId = 'ColumnManagementModal',
enableDragDrop = false,
onReset,
resetToDefaultLabel = 'Reset to default',
...props }: ColumnManagementModalProps) => {

const [ currentColumns, setCurrentColumns ] = useState(() =>
Expand All @@ -72,7 +78,9 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
}));

const resetToDefault = () => {
setCurrentColumns(currentColumns.map(column => ({ ...column, isShown: column.isShownByDefault ?? false })));
// Reset both visibility and order to match the original appliedColumns
setCurrentColumns(appliedColumns.map(column => ({ ...column, isShown: column.isShownByDefault ?? false })));
onReset?.();
};

const updateColumns = (items: ListManagerItem[]) => {
Expand Down Expand Up @@ -131,7 +139,7 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
<>
<Content component={ContentVariants.p}>{description}</Content>
<Button isInline onClick={resetToDefault} variant={ButtonVariant.link} ouiaId={`${ouiaId}-reset-button`}>
Reset to default
{resetToDefaultLabel}
</Button>
</>
}
Expand Down
Loading