@patternfly/react-data-view 5.1.1 → 5.1.3

package/src/DataViewTableBasic/DataViewTableBasic.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataViewTableBasic } from './DataViewTableBasic';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { 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' },
+  { 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' }
+];
+
+const rows = repositories.map(repo => ({
+  row: Object.values(repo),
+}));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableExample';
+
+describe('DataViewTable component', () => {
+  test('should render correctly', () => {
+    const { container } = render(
+      <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  Table,
+  TableProps,
+  Tbody,
+  Td,
+  Tr,
+} from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+import { DataViewTableHeader } from '../DataViewTableHeader';
+import { DataViewTh, DataViewTr, isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
+
+export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
+  /** Columns definition */
+  columns: DataViewTh[];
+  /** Current page rows */
+  rows: DataViewTr[];
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
+  columns,
+  rows,
+  ouiaId = 'DataViewTableBasic',
+  ...props
+}: DataViewTableBasicProps) => {
+  const { selection } = useInternalContext();
+  const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
+
+  return (
+    <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
+      <DataViewTableHeader columns={columns} ouiaId={ouiaId} />
+      <Tbody>
+        {rows.map((row, rowIndex) => { 
+          const rowIsObject = isDataViewTrObject(row);
+          return (
+            <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && (row?.props ?? {}))}>
+              {onSelect && isSelected && (
+                <Td
+                  key={`select-${rowIndex}`}
+                  select={{
+                    rowIndex,
+                    onSelect: (_event, isSelecting) => {
+                      onSelect?.(isSelecting, rowIsObject ? row : [ row ])
+                    },
+                    isSelected: isSelected?.(row) || false,
+                    isDisabled: isSelectDisabled?.(row) || false,
+                  }}
+                />
+              )}
+              {(rowIsObject ? row.row : row).map((cell, colIndex) => {
+                const cellIsObject = isDataViewTdObject(cell);
+                return (
+                  <Td
+                    key={colIndex}
+                    {...(cellIsObject && (cell?.props ?? {}))}
+                    data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
+                  >
+                    {cellIsObject ? cell.cell : cell}
+                  </Td>
+                )
+              })}
+            </Tr>
+          )})}
+      </Tbody>
+    </Table>
+  );
+};
+
+export default DataViewTableBasic;

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

@@ -0,0 +1,324 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewTable component should render correctly 1`] = `
+<div>
+  <table
+    aria-label="Repositories table"
+    class="pf-v5-c-table pf-m-grid-md"
+    data-ouia-component-id="TableExample"
+    data-ouia-component-type="PF5/Table"
+    data-ouia-safe="true"
+    role="grid"
+  >
+    <thead
+      class="pf-v5-c-table__thead"
+      data-ouia-component-id="TableExample-thead"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-head"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-0"
+          scope="col"
+          tabindex="-1"
+        >
+          Repositories
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-1"
+          scope="col"
+          tabindex="-1"
+        >
+          Branches
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-2"
+          scope="col"
+          tabindex="-1"
+        >
+          Pull requests
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-3"
+          scope="col"
+          tabindex="-1"
+        >
+          Workspaces
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-4"
+          scope="col"
+          tabindex="-1"
+        >
+          Last commit
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="pf-v5-c-table__tbody"
+      role="rowgroup"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-0"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-0-0"
+          tabindex="-1"
+        >
+          Repository one
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-0-1"
+          tabindex="-1"
+        >
+          Branch one
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-0-2"
+          tabindex="-1"
+        >
+          Pull request one
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-0-3"
+          tabindex="-1"
+        >
+          Workspace one
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-0-4"
+          tabindex="-1"
+        >
+          Timestamp one
+        </td>
+      </tr>
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-1"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-1-0"
+          tabindex="-1"
+        >
+          Repository two
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-1-1"
+          tabindex="-1"
+        >
+          Branch two
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-1-2"
+          tabindex="-1"
+        >
+          Pull request two
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-1-3"
+          tabindex="-1"
+        >
+          Workspace two
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-1-4"
+          tabindex="-1"
+        >
+          Timestamp two
+        </td>
+      </tr>
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-2"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-2-0"
+          tabindex="-1"
+        >
+          Repository three
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-2-1"
+          tabindex="-1"
+        >
+          Branch three
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-2-2"
+          tabindex="-1"
+        >
+          Pull request three
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-2-3"
+          tabindex="-1"
+        >
+          Workspace three
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-2-4"
+          tabindex="-1"
+        >
+          Timestamp three
+        </td>
+      </tr>
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-3"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-3-0"
+          tabindex="-1"
+        >
+          Repository four
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-3-1"
+          tabindex="-1"
+        >
+          Branch four
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-3-2"
+          tabindex="-1"
+        >
+          Pull request four
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-3-3"
+          tabindex="-1"
+        >
+          Workspace four
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-3-4"
+          tabindex="-1"
+        >
+          Timestamp four
+        </td>
+      </tr>
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-4"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-4-0"
+          tabindex="-1"
+        >
+          Repository five
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-4-1"
+          tabindex="-1"
+        >
+          Branch five
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-4-2"
+          tabindex="-1"
+        >
+          Pull request five
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-4-3"
+          tabindex="-1"
+        >
+          Workspace five
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-4-4"
+          tabindex="-1"
+        >
+          Timestamp five
+        </td>
+      </tr>
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-5"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-5-0"
+          tabindex="-1"
+        >
+          Repository six
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-5-1"
+          tabindex="-1"
+        >
+          Branch six
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-5-2"
+          tabindex="-1"
+        >
+          Pull request six
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-5-3"
+          tabindex="-1"
+        >
+          Workspace six
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-5-4"
+          tabindex="-1"
+        >
+          Timestamp six
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;

package/src/DataViewTableBasic/index.ts

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

package/src/DataViewTableHeader/DataViewTableHeader.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Table } from '@patternfly/react-table';
+import { DataViewTableHeader } from './DataViewTableHeader';
+import { DataViewSelection } from '../InternalContext';
+import { DataView } from '../DataView';
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'HeaderExample';
+
+describe('DataViewTableHeader component', () => {
+  const mockSelection: DataViewSelection = {
+    onSelect: jest.fn(),
+    isSelected: jest.fn(),
+    isSelectDisabled: jest.fn(),
+  };
+
+  test('should render correctly', () => {
+    const { container } = render(
+      <Table>
+        <DataViewTableHeader 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>
+          <DataViewTableHeader 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>
+          <DataViewTableHeader columns={columns} ouiaId={ouiaId} />
+        </Table>
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
+
+
+

package/src/DataViewTableHeader/DataViewTableHeader.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import {
+  Th,
+  Thead,
+  TheadProps,
+  Tr
+} from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+import { DataViewTh, isDataViewThObject } from '../DataViewTable';
+
+export interface DataViewTableHeaderProps extends TheadProps {
+  /** Indicates whether table is a tree */
+  isTreeTable?: boolean;
+  /** Columns definition */
+  columns: DataViewTh[];
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewTableHeader: React.FC<DataViewTableHeaderProps> = ({
+  isTreeTable = false,
+  columns,
+  ouiaId = 'DataViewTableHeader',
+  ...props
+}: DataViewTableHeaderProps) => {
+  const { selection } = useInternalContext();
+  const { onSelect, isSelected } = selection ?? {};
+
+  const cells = useMemo(() => [
+    onSelect && isSelected && !isTreeTable ? (
+      <Th key="row-select" screenReaderText='Data selection table header 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 DataViewTableHeader;