@patternfly/react-data-view 6.1.0-prerelease.1 → 6.2.0

package/src/DataViewTableHead/DataViewTableHead.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Table } from '@patternfly/react-table';
+import { DataViewTableHead } from './DataViewTableHead';
+import { DataViewSelection } from '../InternalContext';
+import { DataView } from '../DataView';
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'HeaderExample';
+
+describe('DataViewTableHead component', () => {
+  const mockSelection: DataViewSelection = {
+    onSelect: jest.fn(),
+    isSelected: jest.fn(),
+    isSelectDisabled: jest.fn(),
+  };
+
+  test('should render correctly', () => {
+    const { container } = render(
+      <Table>
+        <DataViewTableHead columns={columns} ouiaId={ouiaId} />
+      </Table>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render the tree table correctly when isTreeTable is true', () => {
+    const { container } = render(
+      <DataView selection={mockSelection}>
+        <Table>
+          <DataViewTableHead isTreeTable columns={columns} ouiaId={ouiaId} />
+        </Table>
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render selection column when selection is provided', () => {
+    const { container } = render(
+      <DataView selection={mockSelection}>
+        <Table>
+          <DataViewTableHead columns={columns} ouiaId={ouiaId} />
+        </Table>
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
+

package/src/DataViewTableHead/DataViewTableHead.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import {
+  Th,
+  Thead,
+  TheadProps,
+  Tr
+} from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+import { DataViewTh, isDataViewThObject } from '../DataViewTable';
+
+/** extends TheadProps */
+export interface DataViewTableHeadProps extends TheadProps {
+  /** Indicates whether table is a tree */
+  isTreeTable?: boolean;
+  /** Columns definition */
+  columns: DataViewTh[];
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewTableHead: React.FC<DataViewTableHeadProps> = ({
+  isTreeTable = false,
+  columns,
+  ouiaId = 'DataViewTableHead',
+  ...props
+}: DataViewTableHeadProps) => {
+  const { selection } = useInternalContext();
+  const { onSelect, isSelected } = selection ?? {};
+
+  const cells = useMemo(() => [
+    onSelect && isSelected && !isTreeTable ? (
+      <Th key="row-select" screenReaderText='Data selection table head cell' />
+    ) : null,
+    ...columns.map((column, index) => (
+      <Th
+        key={index}
+        {...(isDataViewThObject(column) && (column?.props ?? {}))}
+        data-ouia-component-id={`${ouiaId}-th-${index}`}
+      >
+        {isDataViewThObject(column) ? column.cell : column}
+      </Th>
+    )
+    ) ], [ columns, ouiaId, onSelect, isSelected, isTreeTable ]);
+
+  return (
+    <Thead data-ouia-component-id={`${ouiaId}-thead`} {...props}>
+      <Tr ouiaId={`${ouiaId}-tr-head`}>
+        {cells}
+      </Tr>
+    </Thead>
+  );
+};
+
+export default DataViewTableHead;

package/src/DataViewTableHead/__snapshots__/DataViewTableHead.test.tsx.snap

@@ -0,0 +1,227 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewTableHead component should render correctly 1`] = `
+<div>
+  <table
+    class="pf-v6-c-table pf-m-grid-md"
+    data-ouia-component-id="OUIA-Generated-Table-1"
+    data-ouia-component-type="PF6/Table"
+    data-ouia-safe="true"
+    role="grid"
+  >
+    <thead
+      class="pf-v6-c-table__thead"
+      data-ouia-component-id="HeaderExample-thead"
+    >
+      <tr
+        class="pf-v6-c-table__tr"
+        data-ouia-component-id="HeaderExample-tr-head"
+        data-ouia-component-type="PF6/TableRow"
+        data-ouia-safe="true"
+      >
+        <th
+          class="pf-v6-c-table__th"
+          data-ouia-component-id="HeaderExample-th-0"
+          scope="col"
+          tabindex="-1"
+        >
+          Repositories
+        </th>
+        <th
+          class="pf-v6-c-table__th"
+          data-ouia-component-id="HeaderExample-th-1"
+          scope="col"
+          tabindex="-1"
+        >
+          Branches
+        </th>
+        <th
+          class="pf-v6-c-table__th"
+          data-ouia-component-id="HeaderExample-th-2"
+          scope="col"
+          tabindex="-1"
+        >
+          Pull requests
+        </th>
+        <th
+          class="pf-v6-c-table__th"
+          data-ouia-component-id="HeaderExample-th-3"
+          scope="col"
+          tabindex="-1"
+        >
+          Workspaces
+        </th>
+        <th
+          class="pf-v6-c-table__th"
+          data-ouia-component-id="HeaderExample-th-4"
+          scope="col"
+          tabindex="-1"
+        >
+          Last commit
+        </th>
+      </tr>
+    </thead>
+  </table>
+</div>
+`;
+
+exports[`DataViewTableHead component should render selection column when selection is provided 1`] = `
+<div>
+  <div
+    class="pf-v6-l-stack"
+    data-ouia-component-id="DataView-stack"
+  >
+    <div
+      class="pf-v6-l-stack__item"
+      data-ouia-component-id="DataView-stack-item-0"
+    >
+      <table
+        class="pf-v6-c-table pf-m-grid-md"
+        data-ouia-component-id="OUIA-Generated-Table-3"
+        data-ouia-component-type="PF6/Table"
+        data-ouia-safe="true"
+        role="grid"
+      >
+        <thead
+          class="pf-v6-c-table__thead"
+          data-ouia-component-id="HeaderExample-thead"
+        >
+          <tr
+            class="pf-v6-c-table__tr"
+            data-ouia-component-id="HeaderExample-tr-head"
+            data-ouia-component-type="PF6/TableRow"
+            data-ouia-safe="true"
+          >
+            <th
+              class="pf-v6-c-table__th"
+              scope="col"
+              tabindex="-1"
+            >
+              <span
+                class="pf-v6-u-screen-reader"
+              >
+                Data selection table head cell
+              </span>
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="HeaderExample-th-0"
+              scope="col"
+              tabindex="-1"
+            >
+              Repositories
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="HeaderExample-th-1"
+              scope="col"
+              tabindex="-1"
+            >
+              Branches
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="HeaderExample-th-2"
+              scope="col"
+              tabindex="-1"
+            >
+              Pull requests
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="HeaderExample-th-3"
+              scope="col"
+              tabindex="-1"
+            >
+              Workspaces
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="HeaderExample-th-4"
+              scope="col"
+              tabindex="-1"
+            >
+              Last commit
+            </th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DataViewTableHead component should render the tree table correctly when isTreeTable is true 1`] = `
+<div>
+  <div
+    class="pf-v6-l-stack"
+    data-ouia-component-id="DataView-stack"
+  >
+    <div
+      class="pf-v6-l-stack__item"
+      data-ouia-component-id="DataView-stack-item-0"
+    >
+      <table
+        class="pf-v6-c-table pf-m-grid-md"
+        data-ouia-component-id="OUIA-Generated-Table-2"
+        data-ouia-component-type="PF6/Table"
+        data-ouia-safe="true"
+        role="grid"
+      >
+        <thead
+          class="pf-v6-c-table__thead"
+          data-ouia-component-id="HeaderExample-thead"
+        >
+          <tr
+            class="pf-v6-c-table__tr"
+            data-ouia-component-id="HeaderExample-tr-head"
+            data-ouia-component-type="PF6/TableRow"
+            data-ouia-safe="true"
+          >
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="HeaderExample-th-0"
+              scope="col"
+              tabindex="-1"
+            >
+              Repositories
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="HeaderExample-th-1"
+              scope="col"
+              tabindex="-1"
+            >
+              Branches
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="HeaderExample-th-2"
+              scope="col"
+              tabindex="-1"
+            >
+              Pull requests
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="HeaderExample-th-3"
+              scope="col"
+              tabindex="-1"
+            >
+              Workspaces
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="HeaderExample-th-4"
+              scope="col"
+              tabindex="-1"
+            >
+              Last commit
+            </th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  </div>
+</div>
+`;

package/src/DataViewTableHead/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewTableHead';
+export * from './DataViewTableHead';

package/src/DataViewTableTree/DataViewTableTree.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
+import { DataView } from '../DataView';
+import { DataViewTable } from '../DataViewTable';
+import { DataViewSelection } from '../InternalContext';
+
+const repositories = [
+  {
+    name: 'Repository one',
+    branches: 'Branch one',
+    prs: 'Pull request one',
+    workspaces: 'Workspace one',
+    lastCommit: 'Timestamp one',
+    children: [
+      {
+        name: 'Repository two',
+        branches: 'Branch two',
+        prs: 'Pull request two',
+        workspaces: 'Workspace two',
+        lastCommit: 'Timestamp two',
+      },
+      {
+        name: 'Repository three',
+        branches: 'Branch three',
+        prs: 'Pull request three',
+        workspaces: 'Workspace three',
+        lastCommit: 'Timestamp three',
+      },
+    ],
+  },
+  {
+    name: 'Repository four',
+    branches: 'Branch four',
+    prs: 'Pull request four',
+    workspaces: 'Workspace four',
+    lastCommit: 'Timestamp four',
+    children: [
+      {
+        name: 'Repository five',
+        branches: 'Branch five',
+        prs: 'Pull request five',
+        workspaces: 'Workspace five',
+        lastCommit: 'Timestamp five',
+      },
+    ],
+  },
+  {
+    name: 'Repository six',
+    branches: 'Branch six',
+    prs: 'Pull request six',
+    workspaces: 'Workspace six',
+    lastCommit: 'Timestamp six',
+  },
+];
+
+// Build rows for DataViewTable
+const buildRows = (repositories) => repositories.map((repo) => ({
+  row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
+  id: repo.name,
+  ...(repo.children ? { children: buildRows(repo.children) } : {}),
+}));
+
+const rows = buildRows(repositories);
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TreeTableExample';
+
+describe('DataViewTableTree component', () => {
+  const mockSelection: DataViewSelection = {
+    onSelect: jest.fn(),
+    isSelected: jest.fn(),
+    isSelectDisabled: jest.fn(),
+  };
+
+  test('should render the tree table correctly', () => {
+    const { container } = render(
+      <DataView selection={mockSelection}>
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} leafIcon={<LeafIcon/>} expandedIcon={<FolderOpenIcon aria-hidden />} collapsedIcon={<FolderIcon aria-hidden />} />
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render tree table with an empty state', () => {
+    const { container } = render(
+      <DataView activeState="empty">
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ empty: "No data found" }} rows={[]} />
+
+      </DataView> 
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render tree table with an error state', () => {
+    const { container } = render(
+      <DataView activeState="error">
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ error: "Some error" }} rows={[]} />
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render tree table with a loading state', () => {
+    const { container } = render(
+      <DataView activeState="loading">
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ loading: "Data is loading" }} rows={[]} />
+      </DataView> 
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -0,0 +1,186 @@
+import React, { useMemo } from 'react';
+import {
+  Table,
+  TableProps,
+  Tbody,
+  Td,
+  TdProps,
+  TreeRowWrapper,
+} from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+import { DataViewTableHead } from '../DataViewTableHead';
+import { DataViewTh, DataViewTrTree, isDataViewTdObject } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
+
+const getNodesAffectedBySelection = (
+  allRows: DataViewTrTree[],
+  node: DataViewTrTree,
+  isChecking: boolean,
+  isSelected?: (item: DataViewTrTree) => boolean
+): DataViewTrTree[] => {
+
+  const getDescendants = (node: DataViewTrTree): DataViewTrTree[] =>
+    node.children ? node.children.flatMap(getDescendants).concat(node) : [ node ];
+
+  const findParent = (child: DataViewTrTree, rows: DataViewTrTree[]): DataViewTrTree | undefined =>
+    rows.find(row => row.children?.some(c => c === child)) ?? 
+    rows.flatMap(row => row.children ?? []).map(c => findParent(child, [ c ])).find(p => p);
+
+  const getAncestors = (node: DataViewTrTree): DataViewTrTree[] => {
+    const ancestors: DataViewTrTree[] = [];
+    let parent = findParent(node, allRows);
+    while (parent) {
+      ancestors.push(parent);
+      parent = findParent(parent, allRows);
+    }
+    return ancestors;
+  };
+
+  const affectedNodes = new Set([ node, ...getDescendants(node) ]);
+
+  getAncestors(node).forEach(ancestor => {
+    const allChildrenSelected = ancestor.children?.every(child => isSelected?.(child) || affectedNodes.has(child));
+    const anyChildAffected = ancestor.children?.some(child => affectedNodes.has(child) || child.id === node.id);
+
+    if (isChecking ? !isSelected?.(ancestor) && allChildrenSelected : isSelected?.(ancestor) && anyChildAffected) {
+      affectedNodes.add(ancestor);
+    }
+  });
+
+  return Array.from(affectedNodes);
+};
+
+
+/** extends TableProps */
+export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
+  /** Columns definition */
+  columns: DataViewTh[];
+  /** Current page rows */
+  rows: DataViewTrTree[];
+  /** Table head states to be displayed when active */
+  headStates?: Partial<Record<DataViewState | string, React.ReactNode>>
+  /** Table body states to be displayed when active */
+  bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>
+  /** Optional icon for the leaf rows */
+  leafIcon?: React.ReactNode;
+  /** Optional icon for the expanded parent rows */
+  expandedIcon?: React.ReactNode;
+  /** Optional icon for the collapsed parent rows */
+  collapsedIcon?: React.ReactNode;
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
+  columns,
+  rows,
+  headStates,
+  bodyStates,
+  leafIcon = null,
+  expandedIcon = null,
+  collapsedIcon = null,
+  ouiaId = 'DataViewTableTree',
+  ...props
+}: DataViewTableTreeProps) => {
+  const { selection, activeState } = useInternalContext();
+  const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
+  const [ expandedNodeIds, setExpandedNodeIds ] = React.useState<string[]>([]);
+  const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = React.useState<string[]>([]);
+
+  const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
+  const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
+
+  const nodes = useMemo(() => {
+
+    const renderRows = (
+      [ node, ...remainingNodes ]: DataViewTrTree[],
+      level = 1,
+      posinset = 1,
+      rowIndex = 0,
+      isHidden = false
+    ): React.ReactNode[] => {
+      if (!node) {
+        return [];
+      }
+      const isExpanded = expandedNodeIds.includes(node.id);
+      const isDetailsExpanded = expandedDetailsNodeNames.includes(node.id);
+      const isChecked = isSelected?.(node);
+      let icon = leafIcon;
+      if (node.children) {
+        icon = isExpanded ? expandedIcon : collapsedIcon;
+      }
+
+      const treeRow: TdProps['treeRow'] = {
+        onCollapse: () =>
+          setExpandedNodeIds(prevExpanded => {
+            const otherExpandedNodeIds = prevExpanded.filter(id => id !== node.id);
+            return isExpanded ? otherExpandedNodeIds : [ ...otherExpandedNodeIds, node.id ];
+          }),
+        onToggleRowDetails: () =>
+          setExpandedDetailsNodeIds(prevDetailsExpanded => {
+            const otherDetailsExpandedNodeIds = prevDetailsExpanded.filter(id => id !== node.id);
+            return isDetailsExpanded ? otherDetailsExpandedNodeIds : [ ...otherDetailsExpandedNodeIds, node.id ];
+          }),
+        onCheckChange: (isSelectDisabled?.(node) || !onSelect) ? undefined : (_event, isChecking) => onSelect?.(isChecking, getNodesAffectedBySelection(rows, node, isChecking, isSelected)),
+        rowIndex,
+        props: {
+          isExpanded,
+          isDetailsExpanded,
+          isHidden,
+          'aria-level': level,
+          'aria-posinset': posinset,
+          'aria-setsize': node.children?.length ?? 0,
+          isChecked,
+          checkboxId: `checkbox_id_${node.id?.toLowerCase().replace(/\s+/g, '_')}`,
+          icon,
+        },
+      };
+
+      const childRows = node.children?.length
+        ? renderRows(node.children, level + 1, 1, rowIndex + 1, !isExpanded || isHidden)
+        : [];
+
+      return [
+        <TreeRowWrapper key={node.id} row={{ props: treeRow.props }} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+          {node.row.map((cell, colIndex) => {
+            const cellIsObject = isDataViewTdObject(cell);
+            return (
+              <Td
+                key={colIndex}
+                treeRow={colIndex === 0 ? treeRow : undefined}
+                {...(cellIsObject && (cell?.props ?? {}))}
+                data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
+              >
+                {cellIsObject ? cell.cell : cell}
+              </Td>
+            );
+          })}
+        </TreeRowWrapper>,
+        ...childRows,
+        ...renderRows(remainingNodes, level, posinset + 1, rowIndex + 1 + childRows.length, isHidden),
+      ];
+    };
+
+    return renderRows(rows);
+  }, [
+    rows,
+    expandedNodeIds,
+    expandedDetailsNodeNames,
+    leafIcon,
+    expandedIcon,
+    collapsedIcon,
+    isSelected,
+    onSelect,
+    isSelectDisabled,
+    ouiaId
+  ]);
+
+  return (
+    <Table isTreeTable aria-label="Data table" ouiaId={ouiaId} {...props}>
+      {activeHeadState || <DataViewTableHead isTreeTable columns={columns} ouiaId={ouiaId} />}
+      {activeBodyState || <Tbody>{nodes}</Tbody>}
+    </Table>
+  );
+};
+
+export default DataViewTableTree;