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

package/src/DataViewTable/index.ts

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

package/src/DataViewTableBasic/DataViewTableBasic.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataView } from '../DataView';
+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();
+  });
+
+  test('should render with an empty state', () => {
+    const { container } = render(
+      <DataView activeState="empty">
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ empty: "No data found" }} rows={[]} />
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render with an error state', () => {
+    const { container } = render(
+      <DataView activeState="error">
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ error: "Some error" }} rows={[]} />
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render with a loading state', () => {
+    const { container } = render(
+      <DataView activeState="loading">
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ loading: "Data is loading" }} rows={[]} />
+      </DataView> 
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -0,0 +1,83 @@
+import React, { useMemo } from 'react';
+import {
+  Table,
+  TableProps,
+  Tbody,
+  Td,
+  Tr,
+} from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+import { DataViewTableHead } from '../DataViewTableHead';
+import { DataViewTh, DataViewTr, isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
+
+/** extends TableProps */
+export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
+  /** Columns definition */
+  columns: DataViewTh[];
+  /** Current page rows */
+  rows: DataViewTr[];
+  /** 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>>
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
+  columns,
+  rows,
+  ouiaId = 'DataViewTableBasic',
+  headStates,
+  bodyStates,
+  ...props
+}: DataViewTableBasicProps) => {
+  const { selection, activeState, isSelectable } = useInternalContext();
+  const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
+
+  const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
+  const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
+
+  const renderedRows = useMemo(() => rows.map((row, rowIndex) => {
+    const rowIsObject = isDataViewTrObject(row);
+    return (
+      <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)}>
+        {isSelectable && (
+          <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>
+    );
+  }), [ rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId ]);
+
+  return (
+    <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
+      { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} /> }
+      { activeBodyState || <Tbody>{renderedRows}</Tbody> }
+    </Table>
+  );
+};
+
+export default DataViewTableBasic;

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

@@ -0,0 +1,555 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewTable component should render correctly 1`] = `
+<div>
+  <table
+    aria-label="Repositories table"
+    class="pf-v6-c-table pf-m-grid-md"
+    data-ouia-component-id="TableExample"
+    data-ouia-component-type="PF6/Table"
+    data-ouia-safe="true"
+    role="grid"
+  >
+    <thead
+      class="pf-v6-c-table__thead"
+      data-ouia-component-id="TableExample-thead"
+    >
+      <tr
+        class="pf-v6-c-table__tr"
+        data-ouia-component-id="TableExample-tr-head"
+        data-ouia-component-type="PF6/TableRow"
+        data-ouia-safe="true"
+      >
+        <th
+          class="pf-v6-c-table__th"
+          data-ouia-component-id="TableExample-th-0"
+          scope="col"
+          tabindex="-1"
+        >
+          Repositories
+        </th>
+        <th
+          class="pf-v6-c-table__th"
+          data-ouia-component-id="TableExample-th-1"
+          scope="col"
+          tabindex="-1"
+        >
+          Branches
+        </th>
+        <th
+          class="pf-v6-c-table__th"
+          data-ouia-component-id="TableExample-th-2"
+          scope="col"
+          tabindex="-1"
+        >
+          Pull requests
+        </th>
+        <th
+          class="pf-v6-c-table__th"
+          data-ouia-component-id="TableExample-th-3"
+          scope="col"
+          tabindex="-1"
+        >
+          Workspaces
+        </th>
+        <th
+          class="pf-v6-c-table__th"
+          data-ouia-component-id="TableExample-th-4"
+          scope="col"
+          tabindex="-1"
+        >
+          Last commit
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="pf-v6-c-table__tbody"
+      role="rowgroup"
+    >
+      <tr
+        class="pf-v6-c-table__tr"
+        data-ouia-component-id="TableExample-tr-0"
+        data-ouia-component-type="PF6/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-0-0"
+          tabindex="-1"
+        >
+          Repository one
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-0-1"
+          tabindex="-1"
+        >
+          Branch one
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-0-2"
+          tabindex="-1"
+        >
+          Pull request one
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-0-3"
+          tabindex="-1"
+        >
+          Workspace one
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-0-4"
+          tabindex="-1"
+        >
+          Timestamp one
+        </td>
+      </tr>
+      <tr
+        class="pf-v6-c-table__tr"
+        data-ouia-component-id="TableExample-tr-1"
+        data-ouia-component-type="PF6/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-1-0"
+          tabindex="-1"
+        >
+          Repository two
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-1-1"
+          tabindex="-1"
+        >
+          Branch two
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-1-2"
+          tabindex="-1"
+        >
+          Pull request two
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-1-3"
+          tabindex="-1"
+        >
+          Workspace two
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-1-4"
+          tabindex="-1"
+        >
+          Timestamp two
+        </td>
+      </tr>
+      <tr
+        class="pf-v6-c-table__tr"
+        data-ouia-component-id="TableExample-tr-2"
+        data-ouia-component-type="PF6/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-2-0"
+          tabindex="-1"
+        >
+          Repository three
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-2-1"
+          tabindex="-1"
+        >
+          Branch three
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-2-2"
+          tabindex="-1"
+        >
+          Pull request three
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-2-3"
+          tabindex="-1"
+        >
+          Workspace three
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-2-4"
+          tabindex="-1"
+        >
+          Timestamp three
+        </td>
+      </tr>
+      <tr
+        class="pf-v6-c-table__tr"
+        data-ouia-component-id="TableExample-tr-3"
+        data-ouia-component-type="PF6/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-3-0"
+          tabindex="-1"
+        >
+          Repository four
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-3-1"
+          tabindex="-1"
+        >
+          Branch four
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-3-2"
+          tabindex="-1"
+        >
+          Pull request four
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-3-3"
+          tabindex="-1"
+        >
+          Workspace four
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-3-4"
+          tabindex="-1"
+        >
+          Timestamp four
+        </td>
+      </tr>
+      <tr
+        class="pf-v6-c-table__tr"
+        data-ouia-component-id="TableExample-tr-4"
+        data-ouia-component-type="PF6/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-4-0"
+          tabindex="-1"
+        >
+          Repository five
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-4-1"
+          tabindex="-1"
+        >
+          Branch five
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-4-2"
+          tabindex="-1"
+        >
+          Pull request five
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-4-3"
+          tabindex="-1"
+        >
+          Workspace five
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-4-4"
+          tabindex="-1"
+        >
+          Timestamp five
+        </td>
+      </tr>
+      <tr
+        class="pf-v6-c-table__tr"
+        data-ouia-component-id="TableExample-tr-5"
+        data-ouia-component-type="PF6/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-5-0"
+          tabindex="-1"
+        >
+          Repository six
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-5-1"
+          tabindex="-1"
+        >
+          Branch six
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-5-2"
+          tabindex="-1"
+        >
+          Pull request six
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-5-3"
+          tabindex="-1"
+        >
+          Workspace six
+        </td>
+        <td
+          class="pf-v6-c-table__td"
+          data-ouia-component-id="TableExample-td-5-4"
+          tabindex="-1"
+        >
+          Timestamp six
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
+exports[`DataViewTable component should render with a loading state 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
+        aria-label="Repositories table"
+        class="pf-v6-c-table pf-m-grid-md"
+        data-ouia-component-id="TableExample"
+        data-ouia-component-type="PF6/Table"
+        data-ouia-safe="true"
+        role="grid"
+      >
+        <thead
+          class="pf-v6-c-table__thead"
+          data-ouia-component-id="TableExample-thead"
+        >
+          <tr
+            class="pf-v6-c-table__tr"
+            data-ouia-component-id="TableExample-tr-head"
+            data-ouia-component-type="PF6/TableRow"
+            data-ouia-safe="true"
+          >
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-0"
+              scope="col"
+              tabindex="-1"
+            >
+              Repositories
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-1"
+              scope="col"
+              tabindex="-1"
+            >
+              Branches
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-2"
+              scope="col"
+              tabindex="-1"
+            >
+              Pull requests
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-3"
+              scope="col"
+              tabindex="-1"
+            >
+              Workspaces
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-4"
+              scope="col"
+              tabindex="-1"
+            >
+              Last commit
+            </th>
+          </tr>
+        </thead>
+        Data is loading
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DataViewTable component should render with an empty state 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
+        aria-label="Repositories table"
+        class="pf-v6-c-table pf-m-grid-md"
+        data-ouia-component-id="TableExample"
+        data-ouia-component-type="PF6/Table"
+        data-ouia-safe="true"
+        role="grid"
+      >
+        <thead
+          class="pf-v6-c-table__thead"
+          data-ouia-component-id="TableExample-thead"
+        >
+          <tr
+            class="pf-v6-c-table__tr"
+            data-ouia-component-id="TableExample-tr-head"
+            data-ouia-component-type="PF6/TableRow"
+            data-ouia-safe="true"
+          >
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-0"
+              scope="col"
+              tabindex="-1"
+            >
+              Repositories
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-1"
+              scope="col"
+              tabindex="-1"
+            >
+              Branches
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-2"
+              scope="col"
+              tabindex="-1"
+            >
+              Pull requests
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-3"
+              scope="col"
+              tabindex="-1"
+            >
+              Workspaces
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-4"
+              scope="col"
+              tabindex="-1"
+            >
+              Last commit
+            </th>
+          </tr>
+        </thead>
+        No data found
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DataViewTable component should render with an error state 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
+        aria-label="Repositories table"
+        class="pf-v6-c-table pf-m-grid-md"
+        data-ouia-component-id="TableExample"
+        data-ouia-component-type="PF6/Table"
+        data-ouia-safe="true"
+        role="grid"
+      >
+        <thead
+          class="pf-v6-c-table__thead"
+          data-ouia-component-id="TableExample-thead"
+        >
+          <tr
+            class="pf-v6-c-table__tr"
+            data-ouia-component-id="TableExample-tr-head"
+            data-ouia-component-type="PF6/TableRow"
+            data-ouia-safe="true"
+          >
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-0"
+              scope="col"
+              tabindex="-1"
+            >
+              Repositories
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-1"
+              scope="col"
+              tabindex="-1"
+            >
+              Branches
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-2"
+              scope="col"
+              tabindex="-1"
+            >
+              Pull requests
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-3"
+              scope="col"
+              tabindex="-1"
+            >
+              Workspaces
+            </th>
+            <th
+              class="pf-v6-c-table__th"
+              data-ouia-component-id="TableExample-th-4"
+              scope="col"
+              tabindex="-1"
+            >
+              Last commit
+            </th>
+          </tr>
+        </thead>
+        Some error
+      </table>
+    </div>
+  </div>
+</div>
+`;

package/src/DataViewTableBasic/index.ts

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