@patternfly/react-data-view 5.1.4 → 5.3.0

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableErrorExample.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ErrorState } from '@patternfly/react-component-groups';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [];
+
+// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
+const rows: DataViewTr[] = repositories.map((repository) => Object.values(repository));
+
+const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableErrorExample';
+
+const error = (
+  <ErrorState errorTitle='Unable to load data' errorDescription='There was an error retrieving data. Check your connection and reload the page.' />
+);
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataView activeState={DataViewState.error}>
+    <DataViewTable 
+      aria-label='Repositories table' 
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+      states={{ error }}
+    />
+  </DataView>
+);

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarActionsExample.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BulkSelect, ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewToolbar 
+    bulkSelect={
+      <BulkSelect
+        selectedCount={0}
+        pageCount={5}
+        onSelect={() => null}
+      />  
+    }
+    actions={
+      <ResponsiveActions breakpoint="lg" ouiaId="example-actions">
+        <ResponsiveAction isPersistent variant="primary">Persistent</ResponsiveAction>
+        <ResponsiveAction isPinned variant="secondary">Pinned</ResponsiveAction>
+        <ResponsiveAction>Action three</ResponsiveAction>
+        <ResponsiveAction>Action four</ResponsiveAction>
+      </ResponsiveActions>
+    }
+    pagination={
+      <Pagination page={1} perPage={10} />
+    }
+  />
+)

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx

@@ -6,15 +6,15 @@ import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewTo
 
 export const BasicExample: React.FunctionComponent = () => (
   <DataViewToolbar 
-    pagination={
-      <Pagination page={1} perPage={10} />
-    }
     bulkSelect={
       <BulkSelect
         selectedCount={0}
         pageCount={5}
         onSelect={() => null}
       />  
-    } 
+    }
+    pagination={
+      <Pagination page={1} perPage={10} />
+    }
   />
 )

package/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md

@@ -62,7 +62,7 @@ This example uses the URL for persisting the pagination state.
 Allows to select data records inside the data view and show the selection state.
 
 ### Toolbar usage
-Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) from the [component groups](/extensions/component-groups/about-component-groups) extension.
+Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) component from the [component groups](/extensions/component-groups/about-component-groups) extension.
 
 ### Selection state
 
@@ -84,4 +84,3 @@ The `useDataViewSelection` hook manages the selection state of the data view.
 ```js file="./SelectionExample.tsx"
 
 ```
-

package/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md

@@ -11,7 +11,7 @@ source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
 sortValue: 2
-propComponents: ['DataView']
+propComponents: ['DataView', 'DataViewState']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md
 ---
 import { useMemo } from 'react';

package/src/DataView/DataView.tsx

@@ -2,13 +2,23 @@ import React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
 import { DataViewSelection, InternalContextProvider } from '../InternalContext';
 
+export const DataViewState = {
+  empty: 'empty',
+  loading: 'loading',
+  error: 'error'
+} as const;
+
+export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
+
 export interface DataViewProps {
   /** Content rendered inside the data view */
   children: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string;
   /** Selection context configuration */
-  selection?: DataViewSelection
+  selection?: DataViewSelection;
+  /** Currently active state */
+  activeState?: DataViewState;
 }
 
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
@@ -16,7 +26,7 @@ export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isIte
 const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
   children, ouiaId = 'DataView', ...props
 }: DataViewImpementationProps) => (
-  <Stack data-ouia-component-id={`${ouiaId}-stack}`} {...props}>
+  <Stack data-ouia-component-id={`${ouiaId}-stack`} {...props}>
     {React.Children.map(children, (child, index) => (
       <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
         {child}
@@ -25,8 +35,8 @@ const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
   </Stack>
 )
 
-export const DataView: React.FC<DataViewProps> = ({ children, selection, ...props }: DataViewProps) => (
-  <InternalContextProvider selection={selection}>
+export const DataView: React.FC<DataViewProps> = ({ children, selection, activeState, ...props }: DataViewProps) => (
+  <InternalContextProvider selection={selection} activeState={activeState} >
     <DataViewImplementation {...props}>{children}</DataViewImplementation>
   </InternalContextProvider>
 );

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

@@ -7,7 +7,7 @@ exports[`DataView component should render correctly 1`] = `
     <div>
       <div
         class="pf-v5-l-stack"
-        data-ouia-component-id="DataView-stack}"
+        data-ouia-component-id="DataView-stack"
       >
         <div
           class="pf-v5-l-stack__item"
@@ -45,7 +45,7 @@ exports[`DataView component should render correctly 1`] = `
   "container": <div>
     <div
       class="pf-v5-l-stack"
-      data-ouia-component-id="DataView-stack}"
+      data-ouia-component-id="DataView-stack"
     >
       <div
         class="pf-v5-l-stack__item"

package/src/DataViewTableBasic/DataViewTableBasic.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { DataViewTableBasic } from './DataViewTableBasic';
+import DataView from '../DataView/DataView';
 
 interface Repository {
   name: string;
@@ -37,7 +38,18 @@ describe('DataViewTable component', () => {
 
   test('should render with an empty state', () => {
     const { container } = render(
-      <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} emptyState="No data found" rows={[]} />
+      <DataView activeState="empty">
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} states={{ 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} states={{ error:"Some error" }} rows={[]} />
+      </DataView>
     );
     expect(container).toMatchSnapshot();
   });

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -9,14 +9,15 @@ import {
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHeader } from '../DataViewTableHeader';
 import { DataViewTh, DataViewTr, isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
 
 export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
   /** Columns definition */
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTr[];
-  /** Empty state to be displayed */
-  emptyState?: React.ReactNode;
+  /** States to be displayed when active */
+  states?: Partial<Record<DataViewState, React.ReactNode>>
   /** Custom OUIA ID */
   ouiaId?: string;
 }
@@ -25,54 +26,56 @@ export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
   columns,
   rows,
   ouiaId = 'DataViewTableBasic',
-  emptyState = null,
+  states = {},
   ...props
 }: DataViewTableBasicProps) => {
-  const { selection } = useInternalContext();
+  const { selection, activeState } = useInternalContext();
   const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
-  const isSelectable = useMemo(() => Boolean(onSelect && isSelected), [ onSelect, isSelected ])
+  const isSelectable = useMemo(() => Boolean(onSelect && isSelected), [ onSelect, isSelected ]);
 
   return (
     <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
       <DataViewTableHeader columns={columns} ouiaId={ouiaId} />
       <Tbody>
-        {rows?.length > 0 ? 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>
-          )}) : (
-          <Tr key="empty" ouiaId={`${ouiaId}-tr-empty`}>
+        {activeState && Object.keys(states).includes(activeState) ? (
+          <Tr key={activeState} ouiaId={`${ouiaId}-tr-${activeState}`}>
             <Td colSpan={columns.length + Number(isSelectable)}>
-              {emptyState}
+              {states[activeState]}
             </Td>
           </Tr>
-        )}
+        ) : (
+          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>
+            );
+          }))}
       </Tbody>
     </Table>
   );

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

@@ -325,85 +325,190 @@ exports[`DataViewTable component should render correctly 1`] = `
 
 exports[`DataViewTable component should render with an empty state 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"
+  <div
+    class="pf-v5-l-stack"
+    data-ouia-component-id="DataView-stack"
   >
-    <thead
-      class="pf-v5-c-table__thead"
-      data-ouia-component-id="TableExample-thead"
+    <div
+      class="pf-v5-l-stack__item"
+      data-ouia-component-id="DataView-stack-item-0"
     >
-      <tr
-        class="pf-v5-c-table__tr"
-        data-ouia-component-id="TableExample-tr-head"
-        data-ouia-component-type="PF5/TableRow"
+      <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"
       >
-        <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"
+        <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-empty"
+            data-ouia-component-type="PF5/TableRow"
+            data-ouia-safe="true"
+          >
+            <td
+              class="pf-v5-c-table__td"
+              colspan="5"
+              tabindex="-1"
+            >
+              No data found
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DataViewTable component should render with an error state 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"
     >
-      <tr
-        class="pf-v5-c-table__tr"
-        data-ouia-component-id="TableExample-tr-empty"
-        data-ouia-component-type="PF5/TableRow"
+      <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"
       >
-        <td
-          class="pf-v5-c-table__td"
-          colspan="5"
-          tabindex="-1"
-        >
-          No data found
-        </td>
-      </tr>
-    </tbody>
-  </table>
+        <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-error"
+            data-ouia-component-type="PF5/TableRow"
+            data-ouia-safe="true"
+          >
+            <td
+              class="pf-v5-c-table__td"
+              colspan="5"
+              tabindex="-1"
+            >
+              Some error
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </div>
 `;

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

@@ -69,7 +69,7 @@ exports[`DataViewTableHeader component should render selection column when selec
 <div>
   <div
     class="pf-v5-l-stack"
-    data-ouia-component-id="DataView-stack}"
+    data-ouia-component-id="DataView-stack"
   >
     <div
       class="pf-v5-l-stack__item"
@@ -155,7 +155,7 @@ exports[`DataViewTableHeader component should render the tree table correctly wh
 <div>
   <div
     class="pf-v5-l-stack"
-    data-ouia-component-id="DataView-stack}"
+    data-ouia-component-id="DataView-stack"
   >
     <div
       class="pf-v5-l-stack__item"

package/src/DataViewTableTree/DataViewTableTree.test.tsx

@@ -85,7 +85,19 @@ describe('DataViewTableTree component', () => {
 
   test('should render tree table with an empty state', () => {
     const { container } = render(
-      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} emptyState="No data found" rows={[]} />
+      <DataView activeState="empty">
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} states={{ 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} states={{ error: "Some error" }} rows={[]} />
+      </DataView>
     );
     expect(container).toMatchSnapshot();
   });