feat(ColumnManager): add drag and drop feature

jest.config.js

@@ -15,8 +15,7 @@ module.exports = {
     '!src/support/**/*.{js,jsx}',
   ],
   roots: ['<rootDir>/src/'],
-  transformIgnorePatterns: ['/node_modules/(?!(@faker-js)/)'],
-
+  transformIgnorePatterns: ['/node_modules/(?!@faker-js|@patternfly/)'],
   moduleNameMapper: {
     '\\.(css|scss|svg)$': 'identity-obj-proxy',
     '^~/(.*)$': '<rootDir>/src/$1',

src/components/StaticTableToolsTable/StaticTableToolsTable.stories.js

@@ -31,6 +31,7 @@ const argProps = {
   enableActions: propTypes.bool,
   dedicatedAction: propTypes.bool,
   manageColumns: propTypes.bool,
+  enableDragDrop: propTypes.bool,
   customEmptyRows: propTypes.bool,
   customEmptyState: propTypes.bool,
   enableExport: propTypes.bool,
@@ -63,6 +64,7 @@ const meta = {
     enableActions: true,
     dedicatedAction: true,
     manageColumns: true,
+    enableDragDrop: false,
     customEmptyRows: true,
     customEmptyState: true,
     enableExport: true,
@@ -79,6 +81,7 @@ const StaticTableExample = ({
   filtered,
   sortable,
   manageColumns,
+  enableDragDrop,
   enableRowActions,
   enableActions,
   dedicatedAction,
@@ -109,6 +112,7 @@ const StaticTableExample = ({
       options={{
         debug,
         manageColumns,
+        enableDragDrop,
         enableExport,
         ...(enableRowActions
           ? {

src/components/TableToolsTable/TableToolsTable.stories.js

@@ -50,6 +50,7 @@ const argProps = {
   enableActions: propTypes.bool,
   dedicatedAction: propTypes.bool,
   manageColumns: propTypes.bool,
+  enableDragDrop: propTypes.bool,
   customEmptyRows: propTypes.bool,
   customEmptyState: propTypes.bool,
   enableExport: propTypes.bool,
@@ -78,6 +79,7 @@ const meta = {
       direction: 'asc',
     },
     manageColumns: true,
+    enableDragDrop: false,
     enableRowActions: true,
     enableActions: true,
     dedicatedAction: true,
@@ -117,6 +119,7 @@ const CommonExample = ({
   initialSort,
   enableInitialSort,
   manageColumns,
+  enableDragDrop,
   enableRowActions,
   enableActions,
   dedicatedAction,
@@ -184,6 +187,7 @@ const CommonExample = ({
         ...defaultOptions,
         debug,
         manageColumns,
+        enableDragDrop,
         ...(enableInitialSort ? { sortBy: initialSort } : {}),
         ...(enableRowActions
           ? {
@@ -542,4 +546,29 @@ export const WithErrorPassed = {
   render: (args) => <WithErrorPassedExample {...args} />,
 };
 
+export const WithColumnDragDrop = {
+  args: {
+    manageColumns: true,
+    enableDragDrop: true,
+    enableRowActions: false,
+    enableActions: false,
+    dedicatedAction: false,
+    customEmptyRows: false,
+    customEmptyState: false,
+    enableExport: false,
+    enableDetails: false,
+    enableBulkSelect: false,
+  },
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <TableStateProvider>
+          <Story />
+        </TableStateProvider>
+      </QueryClientProvider>
+    ),
+  ],
+  render: (args) => <CommonExample {...args} />,
+};
+
 export default meta;

src/hooks/useColumnManager/helper.js

@@ -1,22 +1,113 @@
-export const getColumnsForModal = (columns = [], selectedColumns) =>
-  columns
-    .map(({ title, manageable, isShown: isShownProp }) => {
-      const isShown = selectedColumns?.includes(title) || isShownProp;
-      const isUntoggleable =
-        typeof manageable !== 'undefined' ? !manageable : false;
-
-      return {
-        title,
-        key: title,
-        isUntoggleable,
-        isShownByDefault: isShown,
-        isShown,
-      };
-    })
-    .filter(({ isUntoggleable }) => !isUntoggleable)
-    .map((column, idx) => ({
-      ...column,
-      // TODO this is a workaround to prevent users from deselecting all columns and see an empty table
-      // However, this should actually be handled directly within the Column management modal in the pf component groups component
-      isUntoggleable: idx === 0,
-    }));
+const isManageable = ({ manageable }) => manageable !== false;
+
+export const getColumnKey = (column, index) => {
+  if (typeof column.title === 'string') {
+    return column.title;
+  }
+
+  return `column-${index}`;
+};
+
+const toModalColumn = (column, index, isShown) => {
+  const isUntoggleable =
+    typeof column.manageable !== 'undefined' ? !column.manageable : false;
+
+  return {
+    title: column.title,
+    key: getColumnKey(column, index),
+    isUntoggleable,
+    isShownByDefault: isShown,
+    isShown,
+  };
+};
+
+/**
+ * Build columns including visibility and order based on columnState if provided.
+ * When `enableDragDrop` is true, unmanageable columns are included (with
+ * disabled checkboxes) so we can reorder them.
+ *
+ *  @param   {Array}   columns                  Table column definitions
+ *  @param   {Array}   [columnState]            Previously applied modal columns `{ key, isShown }[]`
+ *  @param   {object}  [options]                Modal column options
+ *  @param   {boolean} [options.enableDragDrop] Include unmanageable columns for reordering
+ *  @returns {Array}                            Columns shaped for ColumnManagementModal
+ */
+export const getColumnsForModal = (
+  columns = [],
+  columnState,
+  { enableDragDrop = false } = {},
+) => {
+  const columnsForModal = columns
+    .map((column, index) => ({ column, index }))
+    .filter(({ column }) => enableDragDrop || isManageable(column));
+
+  let modalColumns;
+
+  if (columnState?.length) {
+    const columnsByKey = new Map(
+      columnsForModal.map(({ column, index }) => [
+        getColumnKey(column, index),
+        { column, index },
+      ]),
+    );
+    const usedKeys = new Set();
+
+    modalColumns = [];
+
+    columnState.forEach(({ key, isShown }) => {
+      const entry = columnsByKey.get(key);
+
+      if (entry) {
+        modalColumns.push(toModalColumn(entry.column, entry.index, isShown));
+        usedKeys.add(key);
+      }
+    });
+
+    columnsForModal.forEach(({ column, index }) => {
+      const key = getColumnKey(column, index);
+
+      if (!usedKeys.has(key)) {
+        modalColumns.push(toModalColumn(column, index, column.isShown ?? true));
+      }
+    });
+  } else {
+    modalColumns = columnsForModal.map(({ column, index }) =>
+      toModalColumn(column, index, column.isShown ?? true),
+    );
+  }
+
+  return modalColumns.map((column, idx) => ({
+    ...column,
+    // TODO this is a workaround to prevent users from deselecting all columns and see an empty table
+    // However, this should actually be handled directly within the Column management modal in the pf component groups component
+    isUntoggleable: idx === 0 ? true : column.isUntoggleable,
+  }));
+};
+
+/**
+ * Resolves table columns to show from applied modal state, preserving order.
+ *
+ *  @param   {Array} columns     Table column definitions
+ *  @param   {Array} columnState Applied modal columns `{ key, isShown }[]`
+ *  @returns {Array}             Ordered columns currently visible in the table
+ */
+export const getColumnsToShow = (columns = [], columnState = []) => {
+  const columnsByKey = new Map(
+    columns.map((column, index) => [getColumnKey(column, index), column]),
+  );
+
+  const shownColumns = columnState
+    .filter(({ isShown }) => isShown)
+    .map(({ key }) => columnsByKey.get(key))
+    .filter(Boolean);
+
+  const shownKeys = new Set(
+    columnState.filter(({ isShown }) => isShown).map(({ key }) => key),
+  );
+  const alwaysVisibleColumns = columns.filter(
+    (column, index) =>
+      !isManageable(column) && !shownKeys.has(getColumnKey(column, index)),
+  );
+
+  return [...shownColumns, ...alwaysVisibleColumns];
+};

src/hooks/useColumnManager/helper.test.js

@@ -0,0 +1,95 @@
+import columns from '~/support/factories/columns';
+
+import { getColumnKey, getColumnsForModal, getColumnsToShow } from './helper';
+
+describe('getColumnKey', () => {
+  it('uses string titles as keys', () => {
+    expect(getColumnKey({ title: 'Title' }, 0)).toBe('Title');
+  });
+
+  it('falls back to an index-based key for ReactNode titles', () => {
+    expect(getColumnKey({ title: columns[2].title }, 2)).toBe('column-2');
+  });
+});
+
+describe('getColumnsForModal', () => {
+  it('excludes unmanageable columns by default', () => {
+    const modalColumns = getColumnsForModal(columns);
+
+    expect(modalColumns.map(({ key, isShown }) => ({ key, isShown }))).toEqual([
+      { key: 'Title', isShown: true },
+      { key: 'Artist', isShown: true },
+      { key: 'column-2', isShown: true },
+      { key: 'Genre', isShown: true },
+    ]);
+  });
+
+  it('includes unmanageable columns as untoggleable when enableDragDrop is true', () => {
+    const modalColumns = getColumnsForModal(columns, undefined, {
+      enableDragDrop: true,
+    });
+
+    expect(
+      modalColumns.map(({ key, isShown, isUntoggleable }) => ({
+        key,
+        isShown,
+        isUntoggleable,
+      })),
+    ).toEqual([
+      { key: 'Title', isShown: true, isUntoggleable: true },
+      { key: 'Artist', isShown: true, isUntoggleable: false },
+      { key: 'column-2', isShown: true, isUntoggleable: false },
+      { key: 'Genre', isShown: true, isUntoggleable: false },
+      { key: 'Rating', isShown: true, isUntoggleable: true },
+    ]);
+  });
+
+  it('preserves applied order and visibility by key', () => {
+    const columnState = [
+      { key: 'Genre', isShown: true },
+      { key: 'Title', isShown: false },
+      { key: 'Artist', isShown: true },
+      { key: 'column-2', isShown: true },
+    ];
+
+    const modalColumns = getColumnsForModal(columns, columnState);
+
+    expect(modalColumns.map(({ key, isShown }) => ({ key, isShown }))).toEqual(
+      columnState,
+    );
+  });
+});
+
+describe('getColumnsToShow', () => {
+  it('returns shown columns in applied order and appends unmanageable columns', () => {
+    const columnState = [
+      { key: 'Genre', isShown: true },
+      { key: 'Title', isShown: true },
+      { key: 'Artist', isShown: false },
+    ];
+
+    const columnsToShow = getColumnsToShow(columns, columnState);
+
+    expect(columnsToShow.map(({ title }) => title)).toEqual([
+      'Genre',
+      'Title',
+      'Rating',
+    ]);
+  });
+
+  it('preserves unmanageable column order when present in columnState', () => {
+    const columnState = [
+      { key: 'Rating', isShown: true },
+      { key: 'Genre', isShown: true },
+      { key: 'Title', isShown: true },
+    ];
+
+    const columnsToShow = getColumnsToShow(columns, columnState);
+
+    expect(columnsToShow.map(({ title }) => title)).toEqual([
+      'Rating',
+      'Genre',
+      'Title',
+    ]);
+  });
+});