feat: rename ColumnManagement to ListManager

apinkert · apinkert · commit e510e5822d26 · 2025-08-07T13:38:43.000-04:00
diff --git a/cypress/component/ListManager.cy.tsx b/cypress/component/ListManager.cy.tsx
@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import ListManager, { Column, ListManagerProps } from '../../packages/module/dist/dynamic/ListManager';
+
+const ALL_COLUMNS: Column[] = [
+  { key: 'first', title: 'First', isShownByDefault: true },
+  { key: 'second', title: 'Second', isShownByDefault: true },
+  { key: 'third', title: 'Third', isShownByDefault: false },
+  { key: 'fourth', title: 'Fourth', isShownByDefault: true, isUntoggleable: true },
+];
+
+const ListManagerTest = (props: Partial<ListManagerProps>) => {
+  const [columns, setColumns] = useState(props.columns || ALL_COLUMNS);
+  return <ListManager {...props} columns={columns} onSave={setColumns} onCancel={() => setColumns(props.columns || ALL_COLUMNS)} />;
+};
+
+describe('ListManager', () => {
+  it('renders', () => {
+    cy.mount(<ListManagerTest />);
+    cy.get('[data-ouia-component-id="Column-save-button"]').should('exist');
+    cy.get('[data-ouia-component-id="Column-cancel-button"]').should('exist');
+    cy.get('[data-ouia-component-id="BulkSelect-checkbox"]').should('exist');
+    cy.get('[data-ouia-component-id="Column-column-list"]').should('exist');
+  });
+
+  it('toggles checkboxes', () => {
+    cy.mount(<ListManagerTest />);
+    cy.get('[data-testid="column-check-first"]').find('input').should('be.checked');
+    cy.get('[data-testid="column-check-second"]').find('input').should('be.checked');
+    cy.get('[data-testid="column-check-third"]').find('input').should('not.be.checked');
+    cy.get('[data-testid="column-check-fourth"]').find('input').should('be.checked');
+    cy.get('[data-testid="column-check-fourth"]').find('input').should('be.disabled');
+
+    cy.get('[data-testid="column-check-first"]').click();
+    cy.get('[data-testid="column-check-first"]').find('input').should('not.be.checked');
+
+    cy.get('[data-testid="column-check-third"]').click();
+    cy.get('[data-testid="column-check-third"]').find('input').should('be.checked');
+  });
+
+  it('selects all and none', () => {
+    cy.mount(<ListManagerTest />);
+    cy.get('[data-ouia-component-id="BulkSelect-toggle"]').click();
+    cy.get('[data-ouia-component-id="BulkSelect-select-none"]').click();
+    cy.get('[data-testid="column-check-first"]').find('input').should('not.be.checked');
+    cy.get('[data-testid="column-check-second"]').find('input').should('not.be.checked');
+    cy.get('[data-testid="column-check-third"]').find('input').should('not.be.checked');
+    // fourth is untoggleable
+    cy.get('[data-testid="column-check-fourth"]').find('input').should('be.checked');
+
+    cy.get('[data-ouia-component-id="BulkSelect-toggle"]').click();
+    cy.get('[data-ouia-component-id="BulkSelect-select-all"]').click();
+    cy.get('[data-testid="column-check-first"]').find('input').should('be.checked');
+    cy.get('[data-testid="column-check-second"]').find('input').should('be.checked');
+    cy.get('[data-testid="column-check-third"]').find('input').should('be.checked');
+    cy.get('[data-testid="column-check-fourth"]').find('input').should('be.checked');
+  });
+
+  it('saves and cancels', () => {
+    cy.mount(<ListManagerTest />);
+    cy.get('[data-testid="column-check-first"]').click();
+    cy.get('[data-testid="column-check-first"]').find('input').should('not.be.checked');
+    cy.get('[data-ouia-component-id="Column-save-button"]').click();
+    cy.get('[data-testid="column-check-first"]').find('input').should('not.be.checked');
+
+    cy.get('[data-testid="column-check-first"]').click();
+    cy.get('[data-testid="column-check-first"]').find('input').should('be.checked');
+    cy.get('[data-ouia-component-id="Column-cancel-button"]').click();
+    cy.get('[data-testid="column-check-first"]').find('input').should('not.be.checked');
+  });
+});
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManager.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManager.md
@@ -5,24 +5,24 @@ section: Component groups
 subsection: Helpers
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: Column management
+id: List manager
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
-propComponents: ['ColumnManagement']
-sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagement/ColumnManagement.md
+propComponents: ['ListManager']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManager.md
 ---
 
-import ColumnManagement from '@patternfly/react-component-groups/dist/dynamic/ColumnManagement';
+import ListManager from '@patternfly/react-component-groups/dist/dynamic/ListManager';
 import { FunctionComponent, useState } from 'react';
 
-The **column management** component can be used to implement customizable table columns. Columns can be configured to be enabled or disabled by default or be unhidable. 
+The **list manager** component can be used to implement customizable table columns. Columns can be configured to be enabled or disabled by default or be unhidable. 
 
 ## Examples
 
 ### Basic column list
 
 The order of the columns can be changed by dragging and dropping the columns themselves. This list can be used within a page or within a modal. Always make sure to set `isShownByDefault` and `isShown` to the same boolean value in the initial state.
 
-```js file="./ColumnManagementExample.tsx"
+```js file="./ListManagerExample.tsx"
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManagerExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManagerExample.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, useState } from 'react';
-import { Column, ColumnManagement } from '@patternfly/react-component-groups';
+import { Column, ListManager } from '@patternfly/react-component-groups';
 
 const DEFAULT_COLUMNS: Column[] = [
   {
@@ -33,9 +33,7 @@ export const ColumnExample: FunctionComponent = () => {
   const [ columns, setColumns ] = useState(DEFAULT_COLUMNS);
 
   return (
-    <ColumnManagement
-      title="Manage columns"
-      description="Select the columns to display in the table."
+    <ListManager
       columns={columns}
       onOrderChange={setColumns}
       onSelect={(col) => {
diff --git a/packages/module/src/ColumnManagement/index.ts b/packages/module/src/ColumnManagement/index.ts
diff --git a/packages/module/src/ListManager/ListManager.test.tsx b/packages/module/src/ListManager/ListManager.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
-import ColumnManagement from './ColumnManagement';
+import ListManager from './ListManager';
 
 jest.mock('@patternfly/react-drag-drop', () => {
   const originalModule = jest.requireActual('@patternfly/react-drag-drop');
@@ -23,23 +23,17 @@ const mockColumns = [
   { key: 'version', title: 'Version', isShown: false, isShownByDefault: false },
 ];
 
-describe('Column', () => {
+describe('ListManager', () => {
   it('renders with initial columns', () => {
-    render(<ColumnManagement columns={mockColumns} />);
+    render(<ListManager columns={mockColumns} />);
     expect(screen.getByTestId('column-check-name')).toBeChecked();
     expect(screen.getByTestId('column-check-status')).toBeChecked();
     expect(screen.getByTestId('column-check-version')).not.toBeChecked();
   });
 
-  it('renders title and description', () => {
-    render(<ColumnManagement columns={mockColumns} title="Test Title" description="Test Description" />);
-    expect(screen.getByText('Test Title')).toBeInTheDocument();
-    expect(screen.getByText('Test Description')).toBeInTheDocument();
-  });
-
   it('renders a cancel button', async () => {
     const onCancel = jest.fn();
-    render(<ColumnManagement columns={mockColumns} onCancel={onCancel} />);
+    render(<ListManager columns={mockColumns} onCancel={onCancel} />);
     const cancelButton = screen.getByText('Cancel');
     expect(cancelButton).toBeInTheDocument();
     await userEvent.click(cancelButton);
@@ -48,15 +42,15 @@ describe('Column', () => {
 
   it('toggles a column', async () => {
     const onSelect = jest.fn();
-    render(<ColumnManagement columns={mockColumns} onSelect={onSelect} />);
+    render(<ListManager columns={mockColumns} onSelect={onSelect} />);
     const nameCheckbox = screen.getByTestId('column-check-name');
     await userEvent.click(nameCheckbox);
     expect(nameCheckbox).not.toBeChecked();
     expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ key: 'name', isShown: false }));
   });
 
   it('selects all columns', async () => {
-    render(<ColumnManagement columns={mockColumns} />);
+    render(<ListManager columns={mockColumns} />);
     const menuToggle = screen.getByLabelText('Bulk select toggle');
     if (menuToggle) {
       await userEvent.click(menuToggle);
@@ -69,7 +63,7 @@ describe('Column', () => {
   });
 
   it('selects no columns', async () => {
-    render(<ColumnManagement columns={mockColumns} />);
+    render(<ListManager columns={mockColumns} />);
     const menuToggle = screen.getByLabelText('Bulk select toggle');
     if (menuToggle) {
       await userEvent.click(menuToggle);
@@ -83,7 +77,7 @@ describe('Column', () => {
 
   it('saves changes', async () => {
     const onSave = jest.fn();
-    render(<ColumnManagement columns={mockColumns} onSave={onSave} />);
+    render(<ListManager columns={mockColumns} onSave={onSave} />);
     const saveButton = screen.getByText('Save');
     await userEvent.click(saveButton);
     expect(onSave).toHaveBeenCalledWith(expect.any(Array));
diff --git a/packages/module/src/ListManager/ListManager.tsx b/packages/module/src/ListManager/ListManager.tsx
@@ -8,7 +8,6 @@ import {
   DataListItemCells,
   Button,
   ButtonVariant,
-  Title
 } from '@patternfly/react-core';
 import { DragDropSort, Droppable } from '@patternfly/react-drag-drop';
 import BulkSelect, { BulkSelectValue } from '../BulkSelect';
@@ -26,13 +25,9 @@ export interface Column {
   isUntoggleable?: boolean;
 }
 
-export interface ColumnProps {
+export interface ListManagerProps {
   /** Current column state */
   columns: Column[];
-  /* Column description text */
-  description?: string;
-  /* Column title text */
-  title?: string;
   /** Custom OUIA ID */
   ouiaId?: string | number;
   /** Callback when a column is selected or deselected */
@@ -47,16 +42,14 @@ export interface ColumnProps {
   onCancel?: () => void;
 }
 
-const ColumnManagement: FunctionComponent<ColumnProps> = (
+const ListManager: FunctionComponent<ListManagerProps> = (
   { columns,
-    description,
-    title,
     ouiaId = 'Column',
     onSelect,
     onSelectAll,
     onOrderChange,
     onSave,
-    onCancel }: ColumnProps) => {
+    onCancel }: ListManagerProps) => {
 
   const [ currentColumns, setCurrentColumns ] = useState(
     () => columns.map(column => ({ ...column, isShown: column.isShown ?? column.isShownByDefault, id: column.key }))
@@ -100,8 +93,6 @@ const ColumnManagement: FunctionComponent<ColumnProps> = (
 
   return (
     <>
-      <Title headingLevel="h3">{title}</Title>
-      {description && <div style={{ paddingBottom: '1rem' }}><p>{description}</p></div>}
       <div style={{ paddingBottom: '1rem' }}>
         <BulkSelect
           canSelectAll
@@ -161,4 +152,4 @@ const ColumnManagement: FunctionComponent<ColumnProps> = (
   );
 }
 
-export default ColumnManagement;
+export default ListManager;
diff --git a/packages/module/src/ListManager/index.ts b/packages/module/src/ListManager/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ListManager';
+export * from './ListManager';
diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts
@@ -60,6 +60,9 @@ export * from './Maintenance';
 export { default as LogSnippet } from './LogSnippet';
 export * from './LogSnippet';
 
+export { default as ListManager } from './ListManager';
+export * from './ListManager';
+
 export { default as ExternalLinkButton } from './ExternalLinkButton';
 export * from './ExternalLinkButton';
 
@@ -75,9 +78,6 @@ export * from './ErrorBoundary';
 export { default as ColumnManagementModal } from './ColumnManagementModal';
 export * from './ColumnManagementModal';
 
-export { default as ColumnManagement } from './ColumnManagement';
-export * from './ColumnManagement';
-
 export { default as CloseButton } from './CloseButton';
 export * from './CloseButton';
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { default } from './ListManager';`
	`2`	`+export * from './ListManager';`