Feat: add ListManager component group (#766)

* feat: add drag and drop column component

* feat: refactor Column into ColumnManagement and add patternfly-docs/examples

* fix: address column accessibility issues

* fix: add ul for DataListItem

* chore: revert ul change

* fix: implement DragDropSort and BulkSelect

* chore: add react-drag-drop package

* style: appease linter

* feat: rename ColumnManagement to ListManager

* test: remove unused listmanager cypress test

* style: add ActionListItems and update isShown to isSelected

* docs: update ListManager README with isSelected change

* style: update with PF styles and fix unit tests

Author: apinkert

package-lock.json

@@ -83,6 +83,7 @@
     "whatwg-fetch": "^3.6.20"
   },
   "dependencies": {
+    "@patternfly/react-drag-drop": "^6.3.0",
     "@patternfly/react-tokens": "^6.0.0",
     "sharp": "^0.34.0"
   }

package.json

@@ -0,0 +1,28 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: Component groups
+subsection: Helpers
+# Sidenav secondary level section
+# should be the same for all markdown files
+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: ['ListManager']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManager.md
+---
+
+import ListManager from '@patternfly/react-component-groups/dist/dynamic/ListManager';
+import { FunctionComponent, useState } from 'react';
+
+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 `isSelected` (if needed) to the same boolean value in the initial state.
+
+```js file="./ListManagerExample.tsx"

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

@@ -0,0 +1,55 @@
+import { FunctionComponent, useState } from 'react';
+import { Column, ListManager } from '@patternfly/react-component-groups';
+
+const DEFAULT_COLUMNS: Column[] = [
+  {
+    title: 'ID',
+    key: 'id',
+    isShownByDefault: true,
+    isShown: true,
+    isUntoggleable: true
+  },
+  {
+    title: 'Publish date',
+    key: 'publishDate',
+    isShownByDefault: true,
+    isShown: true
+  },
+  {
+    title: 'Impact',
+    key: 'impact',
+    isShownByDefault: true,
+    isShown: true
+  },
+  {
+    title: 'Score',
+    key: 'score',
+    isShownByDefault: false,
+    isShown: false
+  }
+];
+
+export const ColumnExample: FunctionComponent = () => {
+  const [ columns, setColumns ] = useState(DEFAULT_COLUMNS);
+
+  return (
+    <ListManager
+      columns={columns}
+      onOrderChange={setColumns}
+      onSelect={(col) => {
+        const newColumns = [ ...columns ];
+        const changedColumn = newColumns.find(c => c.key === col.key);
+        if (changedColumn) {
+          changedColumn.isShown = col.isShown;
+        }
+        setColumns(newColumns);
+      }}
+      onSelectAll={(newColumns) => setColumns(newColumns)}
+      onSave={(newColumns) => {
+        setColumns(newColumns);
+        alert('Changes saved!');
+      }}
+      onCancel={() => alert('Changes cancelled!')}
+    />
+  );
+};

packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManagerExample.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import ListManager from './ListManager';
+
+jest.mock('@patternfly/react-drag-drop', () => {
+  const originalModule = jest.requireActual('@patternfly/react-drag-drop');
+  return {
+    ...originalModule,
+    DragDropSort: ({ onDrop, items }) => {
+      const handleDrop = () => {
+        const reorderedItems = [ ...items ].reverse();
+        onDrop({}, reorderedItems);
+      };
+      return <div onDrop={handleDrop}>{items.map(item => item.content)}</div>;
+    },
+  };
+});
+
+const mockColumns = [
+  { key: 'name', title: 'Name', isSelected: true, isShownByDefault: true },
+  { key: 'status', title: 'Status', isSelected: true, isShownByDefault: true },
+  { key: 'version', title: 'Version', isSelected: false, isShownByDefault: false },
+];
+
+describe('ListManager', () => {
+  it('renders with initial columns', () => {
+    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 a cancel button', async () => {
+    const onCancel = jest.fn();
+    render(<ListManager columns={mockColumns} onCancel={onCancel} />);
+    const cancelButton = screen.getByText('Cancel');
+    expect(cancelButton).toBeInTheDocument();
+    await userEvent.click(cancelButton);
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  it('toggles a column', async () => {
+    const onSelect = jest.fn();
+    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', isSelected: false }));
+  });
+
+  it('selects all columns', async () => {
+    render(<ListManager columns={mockColumns} />);
+    const menuToggle = screen.getByLabelText('Bulk select toggle');
+    if (menuToggle) {
+      await userEvent.click(menuToggle);
+    }
+    const selectAllButton = screen.getByText('Select all (3)');
+    await userEvent.click(selectAllButton);
+    expect(screen.getByTestId('column-check-name')).toBeChecked();
+    expect(screen.getByTestId('column-check-status')).toBeChecked();
+    expect(screen.getByTestId('column-check-version')).toBeChecked();
+  });
+
+  it('selects no columns', async () => {
+    render(<ListManager columns={mockColumns} />);
+    const menuToggle = screen.getByLabelText('Bulk select toggle');
+    if (menuToggle) {
+      await userEvent.click(menuToggle);
+    }
+    const selectNoneButton = screen.getByText('Select none (0)');
+    await userEvent.click(selectNoneButton);
+    expect(screen.getByTestId('column-check-name')).not.toBeChecked();
+    expect(screen.getByTestId('column-check-status')).not.toBeChecked();
+    expect(screen.getByTestId('column-check-version')).not.toBeChecked();
+  });
+
+  it('saves changes', async () => {
+    const onSave = jest.fn();
+    render(<ListManager columns={mockColumns} onSave={onSave} />);
+    const saveButton = screen.getByText('Save');
+    await userEvent.click(saveButton);
+    expect(onSave).toHaveBeenCalledWith(expect.any(Array));
+  });
+});