Skip to content

Commit e510e58

Browse files
apinkertapinkert
committed
feat: rename ColumnManagement to ListManager
1 parent e7abf62 commit e510e58

8 files changed

Lines changed: 95 additions & 42 deletions

File tree

‎cypress/component/ListManager.cy.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { useState } from 'react';
2+
import ListManager, { Column, ListManagerProps } from '../../packages/module/dist/dynamic/ListManager';
3+
4+
const ALL_COLUMNS: Column[] = [
5+
{ key: 'first', title: 'First', isShownByDefault: true },
6+
{ key: 'second', title: 'Second', isShownByDefault: true },
7+
{ key: 'third', title: 'Third', isShownByDefault: false },
8+
{ key: 'fourth', title: 'Fourth', isShownByDefault: true, isUntoggleable: true },
9+
];
10+
11+
const ListManagerTest = (props: Partial<ListManagerProps>) => {
12+
const [columns, setColumns] = useState(props.columns || ALL_COLUMNS);
13+
return <ListManager {...props} columns={columns} onSave={setColumns} onCancel={() => setColumns(props.columns || ALL_COLUMNS)} />;
14+
};
15+
16+
describe('ListManager', () => {
17+
it('renders', () => {
18+
cy.mount(<ListManagerTest />);
19+
cy.get('[data-ouia-component-id="Column-save-button"]').should('exist');
20+
cy.get('[data-ouia-component-id="Column-cancel-button"]').should('exist');
21+
cy.get('[data-ouia-component-id="BulkSelect-checkbox"]').should('exist');
22+
cy.get('[data-ouia-component-id="Column-column-list"]').should('exist');
23+
});
24+
25+
it('toggles checkboxes', () => {
26+
cy.mount(<ListManagerTest />);
27+
cy.get('[data-testid="column-check-first"]').find('input').should('be.checked');
28+
cy.get('[data-testid="column-check-second"]').find('input').should('be.checked');
29+
cy.get('[data-testid="column-check-third"]').find('input').should('not.be.checked');
30+
cy.get('[data-testid="column-check-fourth"]').find('input').should('be.checked');
31+
cy.get('[data-testid="column-check-fourth"]').find('input').should('be.disabled');
32+
33+
cy.get('[data-testid="column-check-first"]').click();
34+
cy.get('[data-testid="column-check-first"]').find('input').should('not.be.checked');
35+
36+
cy.get('[data-testid="column-check-third"]').click();
37+
cy.get('[data-testid="column-check-third"]').find('input').should('be.checked');
38+
});
39+
40+
it('selects all and none', () => {
41+
cy.mount(<ListManagerTest />);
42+
cy.get('[data-ouia-component-id="BulkSelect-toggle"]').click();
43+
cy.get('[data-ouia-component-id="BulkSelect-select-none"]').click();
44+
cy.get('[data-testid="column-check-first"]').find('input').should('not.be.checked');
45+
cy.get('[data-testid="column-check-second"]').find('input').should('not.be.checked');
46+
cy.get('[data-testid="column-check-third"]').find('input').should('not.be.checked');
47+
// fourth is untoggleable
48+
cy.get('[data-testid="column-check-fourth"]').find('input').should('be.checked');
49+
50+
cy.get('[data-ouia-component-id="BulkSelect-toggle"]').click();
51+
cy.get('[data-ouia-component-id="BulkSelect-select-all"]').click();
52+
cy.get('[data-testid="column-check-first"]').find('input').should('be.checked');
53+
cy.get('[data-testid="column-check-second"]').find('input').should('be.checked');
54+
cy.get('[data-testid="column-check-third"]').find('input').should('be.checked');
55+
cy.get('[data-testid="column-check-fourth"]').find('input').should('be.checked');
56+
});
57+
58+
it('saves and cancels', () => {
59+
cy.mount(<ListManagerTest />);
60+
cy.get('[data-testid="column-check-first"]').click();
61+
cy.get('[data-testid="column-check-first"]').find('input').should('not.be.checked');
62+
cy.get('[data-ouia-component-id="Column-save-button"]').click();
63+
cy.get('[data-testid="column-check-first"]').find('input').should('not.be.checked');
64+
65+
cy.get('[data-testid="column-check-first"]').click();
66+
cy.get('[data-testid="column-check-first"]').find('input').should('be.checked');
67+
cy.get('[data-ouia-component-id="Column-cancel-button"]').click();
68+
cy.get('[data-testid="column-check-first"]').find('input').should('not.be.checked');
69+
});
70+
});

packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagement/ColumnManagement.md renamed to packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManager.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,24 @@ section: Component groups
55
subsection: Helpers
66
# Sidenav secondary level section
77
# should be the same for all markdown files
8-
id: Column management
8+
id: List manager
99
# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
1010
source: react
1111
# If you use typescript, the name of the interface to display props for
1212
# These are found through the sourceProps function provided in patternfly-docs.source.js
13-
propComponents: ['ColumnManagement']
14-
sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagement/ColumnManagement.md
13+
propComponents: ['ListManager']
14+
sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManager.md
1515
---
1616

17-
import ColumnManagement from '@patternfly/react-component-groups/dist/dynamic/ColumnManagement';
17+
import ListManager from '@patternfly/react-component-groups/dist/dynamic/ListManager';
1818
import { FunctionComponent, useState } from 'react';
1919

20-
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.
20+
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.
2121

2222
## Examples
2323

2424
### Basic column list
2525

2626
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.
2727

28-
```js file="./ColumnManagementExample.tsx"
28+
```js file="./ListManagerExample.tsx"

packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagement/ColumnManagementExample.tsx renamed to packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManagerExample.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FunctionComponent, useState } from 'react';
2-
import { Column, ColumnManagement } from '@patternfly/react-component-groups';
2+
import { Column, ListManager } from '@patternfly/react-component-groups';
33

44
const DEFAULT_COLUMNS: Column[] = [
55
{
@@ -33,9 +33,7 @@ export const ColumnExample: FunctionComponent = () => {
3333
const [ columns, setColumns ] = useState(DEFAULT_COLUMNS);
3434

3535
return (
36-
<ColumnManagement
37-
title="Manage columns"
38-
description="Select the columns to display in the table."
36+
<ListManager
3937
columns={columns}
4038
onOrderChange={setColumns}
4139
onSelect={(col) => {

‎packages/module/src/ColumnManagement/index.ts‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

packages/module/src/ColumnManagement/ColumnManagement.test.tsx renamed to packages/module/src/ListManager/ListManager.test.tsx

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { render, screen } from '@testing-library/react';
22
import userEvent from '@testing-library/user-event';
33
import '@testing-library/jest-dom';
4-
import ColumnManagement from './ColumnManagement';
4+
import ListManager from './ListManager';
55

66
jest.mock('@patternfly/react-drag-drop', () => {
77
const originalModule = jest.requireActual('@patternfly/react-drag-drop');
@@ -23,23 +23,17 @@ const mockColumns = [
2323
{ key: 'version', title: 'Version', isShown: false, isShownByDefault: false },
2424
];
2525

26-
describe('Column', () => {
26+
describe('ListManager', () => {
2727
it('renders with initial columns', () => {
28-
render(<ColumnManagement columns={mockColumns} />);
28+
render(<ListManager columns={mockColumns} />);
2929
expect(screen.getByTestId('column-check-name')).toBeChecked();
3030
expect(screen.getByTestId('column-check-status')).toBeChecked();
3131
expect(screen.getByTestId('column-check-version')).not.toBeChecked();
3232
});
3333

34-
it('renders title and description', () => {
35-
render(<ColumnManagement columns={mockColumns} title="Test Title" description="Test Description" />);
36-
expect(screen.getByText('Test Title')).toBeInTheDocument();
37-
expect(screen.getByText('Test Description')).toBeInTheDocument();
38-
});
39-
4034
it('renders a cancel button', async () => {
4135
const onCancel = jest.fn();
42-
render(<ColumnManagement columns={mockColumns} onCancel={onCancel} />);
36+
render(<ListManager columns={mockColumns} onCancel={onCancel} />);
4337
const cancelButton = screen.getByText('Cancel');
4438
expect(cancelButton).toBeInTheDocument();
4539
await userEvent.click(cancelButton);
@@ -48,15 +42,15 @@ describe('Column', () => {
4842

4943
it('toggles a column', async () => {
5044
const onSelect = jest.fn();
51-
render(<ColumnManagement columns={mockColumns} onSelect={onSelect} />);
45+
render(<ListManager columns={mockColumns} onSelect={onSelect} />);
5246
const nameCheckbox = screen.getByTestId('column-check-name');
5347
await userEvent.click(nameCheckbox);
5448
expect(nameCheckbox).not.toBeChecked();
5549
expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ key: 'name', isShown: false }));
5650
});
5751

5852
it('selects all columns', async () => {
59-
render(<ColumnManagement columns={mockColumns} />);
53+
render(<ListManager columns={mockColumns} />);
6054
const menuToggle = screen.getByLabelText('Bulk select toggle');
6155
if (menuToggle) {
6256
await userEvent.click(menuToggle);
@@ -69,7 +63,7 @@ describe('Column', () => {
6963
});
7064

7165
it('selects no columns', async () => {
72-
render(<ColumnManagement columns={mockColumns} />);
66+
render(<ListManager columns={mockColumns} />);
7367
const menuToggle = screen.getByLabelText('Bulk select toggle');
7468
if (menuToggle) {
7569
await userEvent.click(menuToggle);
@@ -83,7 +77,7 @@ describe('Column', () => {
8377

8478
it('saves changes', async () => {
8579
const onSave = jest.fn();
86-
render(<ColumnManagement columns={mockColumns} onSave={onSave} />);
80+
render(<ListManager columns={mockColumns} onSave={onSave} />);
8781
const saveButton = screen.getByText('Save');
8882
await userEvent.click(saveButton);
8983
expect(onSave).toHaveBeenCalledWith(expect.any(Array));

packages/module/src/ColumnManagement/ColumnManagement.tsx renamed to packages/module/src/ListManager/ListManager.tsx

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
DataListItemCells,
99
Button,
1010
ButtonVariant,
11-
Title
1211
} from '@patternfly/react-core';
1312
import { DragDropSort, Droppable } from '@patternfly/react-drag-drop';
1413
import BulkSelect, { BulkSelectValue } from '../BulkSelect';
@@ -26,13 +25,9 @@ export interface Column {
2625
isUntoggleable?: boolean;
2726
}
2827

29-
export interface ColumnProps {
28+
export interface ListManagerProps {
3029
/** Current column state */
3130
columns: Column[];
32-
/* Column description text */
33-
description?: string;
34-
/* Column title text */
35-
title?: string;
3631
/** Custom OUIA ID */
3732
ouiaId?: string | number;
3833
/** Callback when a column is selected or deselected */
@@ -47,16 +42,14 @@ export interface ColumnProps {
4742
onCancel?: () => void;
4843
}
4944

50-
const ColumnManagement: FunctionComponent<ColumnProps> = (
45+
const ListManager: FunctionComponent<ListManagerProps> = (
5146
{ columns,
52-
description,
53-
title,
5447
ouiaId = 'Column',
5548
onSelect,
5649
onSelectAll,
5750
onOrderChange,
5851
onSave,
59-
onCancel }: ColumnProps) => {
52+
onCancel }: ListManagerProps) => {
6053

6154
const [ currentColumns, setCurrentColumns ] = useState(
6255
() => columns.map(column => ({ ...column, isShown: column.isShown ?? column.isShownByDefault, id: column.key }))
@@ -100,8 +93,6 @@ const ColumnManagement: FunctionComponent<ColumnProps> = (
10093

10194
return (
10295
<>
103-
<Title headingLevel="h3">{title}</Title>
104-
{description && <div style={{ paddingBottom: '1rem' }}><p>{description}</p></div>}
10596
<div style={{ paddingBottom: '1rem' }}>
10697
<BulkSelect
10798
canSelectAll
@@ -161,4 +152,4 @@ const ColumnManagement: FunctionComponent<ColumnProps> = (
161152
);
162153
}
163154

164-
export default ColumnManagement;
155+
export default ListManager;

‎packages/module/src/ListManager/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './ListManager';
2+
export * from './ListManager';

‎packages/module/src/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,9 @@ export * from './Maintenance';
6060
export { default as LogSnippet } from './LogSnippet';
6161
export * from './LogSnippet';
6262

63+
export { default as ListManager } from './ListManager';
64+
export * from './ListManager';
65+
6366
export { default as ExternalLinkButton } from './ExternalLinkButton';
6467
export * from './ExternalLinkButton';
6568

@@ -75,9 +78,6 @@ export * from './ErrorBoundary';
7578
export { default as ColumnManagementModal } from './ColumnManagementModal';
7679
export * from './ColumnManagementModal';
7780

78-
export { default as ColumnManagement } from './ColumnManagement';
79-
export * from './ColumnManagement';
80-
8181
export { default as CloseButton } from './CloseButton';
8282
export * from './CloseButton';
8383

0 commit comments

Comments
 (0)