fix(ColumnManagementModal): update reset to default behavior (#868)

Author: nicolethoen

packages/module/src/ColumnManagementModal/ColumnManagementModal.test.tsx

@@ -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'));
@@ -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
+        }))
+      );
+    });
+  });
 });

packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx

@@ -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> = (
@@ -51,6 +55,8 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
     applyColumns,
     ouiaId = 'ColumnManagementModal',
     enableDragDrop = false,
+    onReset,
+    resetToDefaultLabel = 'Reset to default',
     ...props }: ColumnManagementModalProps) => {
 
   const [ currentColumns, setCurrentColumns ] = useState(() =>
@@ -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[]) => {
@@ -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>
         </>
       }