fix(empty): Add empty state support

Author: fhlavac

packages/module/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Table,
   TableProps,
@@ -15,6 +15,8 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTr[];
+  /** Empty state to be displayed */
+  emptyState?: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string;
 }
@@ -23,20 +25,22 @@ export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
   columns,
   rows,
   ouiaId = 'DataViewTableBasic',
+  emptyState = null,
   ...props
 }: DataViewTableBasicProps) => {
   const { selection } = useInternalContext();
   const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
+  const isSelectable = useMemo(() => Boolean(onSelect && isSelected), [ onSelect, isSelected ])
 
   return (
     <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
       <DataViewTableHeader columns={columns} ouiaId={ouiaId} />
       <Tbody>
-        {rows.map((row, rowIndex) => { 
+        {rows?.length > 0 ? rows.map((row, rowIndex) => { 
           const rowIsObject = isDataViewTrObject(row);
           return (
             <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && (row?.props ?? {}))}>
-              {onSelect && isSelected && (
+              {isSelectable && (
                 <Td
                   key={`select-${rowIndex}`}
                   select={{
@@ -62,7 +66,13 @@ export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
                 )
               })}
             </Tr>
-          )})}
+          )}) : (
+          <Tr key="empty" ouiaId={`${ouiaId}-tr-empty`}>
+            <Td colSpan={columns.length + Number(isSelectable)}>
+              {emptyState}
+            </Td>
+          </Tr>
+        )}
       </Tbody>
     </Table>
   );

packages/module/src/DataViewTableTree/DataViewTableTree.tsx

@@ -5,6 +5,7 @@ import {
   Tbody,
   Td,
   TdProps,
+  Tr,
   TreeRowWrapper,
 } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
@@ -34,6 +35,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTrTree[];
+  /** Empty state to be displayed */
+  emptyState?: React.ReactNode;
   /** Optional icon for the leaf rows */
   leafIcon?: React.ReactNode;
   /** Optional icon for the expanded parent rows */
@@ -47,6 +50,7 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
 export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
   columns,
   rows,
+  emptyState = null,
   leafIcon = null,
   expandedIcon = null,
   collapsedIcon = null,
@@ -99,7 +103,6 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
           '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,
         },
@@ -110,7 +113,7 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
         : [];
 
       return [
-        <TreeRowWrapper key={node.id} row={{ props: treeRow.props }}>
+        <TreeRowWrapper key={node.id} row={{ props: treeRow.props }} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
           {node.row.map((cell, colIndex) => {
             const cellIsObject = isDataViewTdObject(cell);
             return (
@@ -136,7 +139,15 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
   return (
     <Table isTreeTable aria-label="Data table" ouiaId={ouiaId} {...props}>
       <DataViewTableHeader isTreeTable columns={columns} ouiaId={ouiaId} />
-      <Tbody>{nodes}</Tbody>
+      <Tbody>
+        {nodes.length > 0 ? nodes : (
+          <Tr key="empty" ouiaId={`${ouiaId}-tr-empty`}>
+            <Td colSpan={columns.length}>
+              {emptyState}
+            </Td>
+          </Tr>
+        )}
+      </Tbody>
     </Table>
   );
 };