@patternfly/react-data-view 5.1.0 → 5.1.2

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

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

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

package/src/DataViewTableTree/DataViewTableTree.test.tsx

@@ -0,0 +1,85 @@
+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();
+  });
+});

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -0,0 +1,144 @@
+import React, { useMemo } from 'react';
+import {
+  Table,
+  TableProps,
+  Tbody,
+  Td,
+  TdProps,
+  TreeRowWrapper,
+} from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+import { DataViewTableHeader } from '../DataViewTableHeader';
+import { DataViewTh, DataViewTrTree, isDataViewTdObject } from '../DataViewTable';
+
+const getDescendants = (node: DataViewTrTree): DataViewTrTree[] => (!node.children || !node.children.length) ? [ node ] : node.children.flatMap(getDescendants);
+
+const isNodeChecked = (node: DataViewTrTree, isSelected: (node: DataViewTrTree) => boolean) => {
+  let allSelected = true;
+  let someSelected = false;
+
+  for (const descendant of getDescendants(node)) {
+    const selected = !!isSelected?.(descendant);
+
+    someSelected ||= selected;
+    allSelected &&= selected;
+
+    if (!allSelected && someSelected) { return null }
+  }
+
+  return allSelected;
+};
+
+export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
+  /** Columns definition */
+  columns: DataViewTh[];
+  /** Current page rows */
+  rows: DataViewTrTree[];
+  /** 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,
+  leafIcon = null,
+  expandedIcon = null,
+  collapsedIcon = null,
+  ouiaId = 'DataViewTableTree',
+  ...props
+}: DataViewTableTreeProps) => {
+  const { selection } = useInternalContext();
+  const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
+  const [ expandedNodeIds, setExpandedNodeIds ] = React.useState<string[]>([]);
+  const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = React.useState<string[]>([]);
+
+  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 && isNodeChecked(node, isSelected);
+      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, getDescendants(node)),
+        rowIndex,
+        props: {
+          isExpanded,
+          isDetailsExpanded,
+          isHidden,
+          'aria-level': level,
+          'aria-posinset': posinset,
+          'aria-setsize': node.children?.length ?? 0,
+          isChecked,
+          ouiaId: `${ouiaId}-tree-toggle-${node.id}`,
+          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 }}>
+          {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}>
+      <DataViewTableHeader isTreeTable columns={columns} ouiaId={ouiaId} />
+      <Tbody>{nodes}</Tbody>
+    </Table>
+  );
+};
+
+export default DataViewTableTree;