Merge pull request #25 from fhlavac/empty

dlabaj · web-flow · commit 8784729a85e0 · 2024-09-19T15:28:04.000-04:00
Add empty state support
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -13,6 +13,8 @@ export default defineConfig({
   },
 
   component: {
+    viewportHeight: 1024,
+    viewportWidth: 1400,
     devServer: {
       framework: "react",
       bundler: "webpack",
diff --git a/cypress/component/DataViewTable.cy.tsx b/cypress/component/DataViewTable.cy.tsx
@@ -117,6 +117,6 @@ describe('DataViewTable', () => {
     cy.get('[data-ouia-component-id="tree-td-4-3"]').contains('Workspace five');
     cy.get('[data-ouia-component-id="tree-td-4-3"]').should('not.be.visible');
     cy.get('[data-ouia-component-id="tree-td-5-4"]').contains('Timestamp six');
-    cy.get('[data-ouia-component-id="tree-td-5-4"]').should('not.be.visible');
+    cy.get('[data-ouia-component-id="tree-td-5-4"]').should('be.visible');
   });
 });
diff --git a/cypress/component/DataViewTableBasic.cy.tsx b/cypress/component/DataViewTableBasic.cy.tsx
@@ -43,4 +43,21 @@ describe('DataViewTableBasic', () => {
     cy.get('[data-ouia-component-id="data-td-4-3"]').contains('Workspace five');
     cy.get('[data-ouia-component-id="data-td-5-4"]').contains('Timestamp six');
   });
+
+  it('renders a basic data view table with an empty state', () => {
+    const ouiaId = 'data';
+
+    cy.mount(
+      <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} emptyState="No data found" />
+    );
+
+    cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
+    cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
+    cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
+    cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
+    cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
+
+    cy.get('[data-ouia-component-id="data-tr-empty"]').should('be.visible');
+    cy.get('[data-ouia-component-id="data-tr-empty"]').contains('No data found');
+  });
 });
diff --git a/cypress/component/DataViewTableTree.cy.tsx b/cypress/component/DataViewTableTree.cy.tsx
@@ -125,4 +125,21 @@ describe('DataViewTableTree', () => {
 
     cy.get('[data-ouia-component-id="tree-td-4-0"]').should('not.be.visible');
   });
+
+  it('renders a tree data view table with an empty state', () => {
+    const ouiaId = 'tree';
+
+    cy.mount(
+      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} emptyState="No data found" />
+    );
+
+    cy.get('[data-ouia-component-id="tree-th-0"]').contains('Repositories');
+    cy.get('[data-ouia-component-id="tree-th-1"]').contains('Branches');
+    cy.get('[data-ouia-component-id="tree-th-2"]').contains('Pull requests');
+    cy.get('[data-ouia-component-id="tree-th-3"]').contains('Workspaces');
+    cy.get('[data-ouia-component-id="tree-th-4"]').contains('Last commit');
+
+    cy.get('[data-ouia-component-id="tree-tr-empty"]').should('be.visible');
+    cy.get('[data-ouia-component-id="tree-tr-empty"]').contains('No data found');
+  });
 });
diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
@@ -14,7 +14,8 @@ sortValue: 4
 propComponents: ['DataViewToolbar', 'DataViewTableBasic', 'DataViewTableTree']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
 ---
-import { FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 import { BulkSelect } from '@patternfly/react-component-groups';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
@@ -71,3 +72,10 @@ It is also possible to disable row selection using the `isSelectDisabled` functi
 ```js file="./DataViewTableTreeExample.tsx"
 
 ```
+
+### Empty state example
+The data view table also supports displaying a custom empty state. You can pass it using the `emptyState` property and it will be displayed in case there are no rows to be rendered.
+
+```js file="./DataViewTableEmptyExample.tsx"
+
+```
diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableEmptyExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableEmptyExample.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { CubesIcon } from '@patternfly/react-icons';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+
+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 = 'TableExample';
+
+const emptyState = (
+  <EmptyState>
+    <EmptyStateHeader titleText="No data found" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+    <EmptyStateBody>There are no matching data to be displayed.</EmptyStateBody>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</Button>
+      </EmptyStateActions>
+      <EmptyStateActions>
+        <Button variant="link">Multiple</Button>
+        <Button variant="link">Action Buttons</Button>
+      </EmptyStateActions>
+    </EmptyStateFooter>
+  </EmptyState>
+);
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewTable 
+    aria-label='Repositories table' 
+    ouiaId={ouiaId}
+    columns={columns}
+    rows={rows}
+    emptyState={emptyState}
+  />
+);
diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableTreeExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableTreeExample.tsx
@@ -42,19 +42,13 @@ const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories
   ...(repo.children
     ? { 
       children: buildRows(repo.children) // build rows for children
-    }
+    } 
     : {})
 }));
 
 const rows: DataViewTrTree[] = buildRows(repositories);
 
-const columns: DataViewTh[] = [
-  'Repositories', 
-  'Branches', 
-  'Pull requests', 
-  'Workspaces', 
-  'Last commit'
-];
+const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 const ouiaId = 'TreeTableExample';
 
@@ -63,7 +57,15 @@ export const BasicExample: React.FunctionComponent = () => {
 
   return (
     <DataView selection={selection}>
-      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} leafIcon={<LeafIcon/>} expandedIcon={<FolderOpenIcon aria-hidden />} collapsedIcon={<FolderIcon aria-hidden />} />
+      <DataViewTable 
+        isTreeTable 
+        ouiaId={ouiaId}
+        columns={columns} 
+        rows={rows}
+        leafIcon={<LeafIcon/>}
+        expandedIcon={<FolderOpenIcon aria-hidden />}
+        collapsedIcon={<FolderIcon aria-hidden />} 
+      />
     </DataView>
   );
 }
diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js
@@ -34,11 +34,23 @@ module.exports = {
     sortValue: 3,
     Component: () => import(/* webpackChunkName: "extensions/data-view/functionality/react/index" */ './extensions/data-view/functionality/react')
   },
+  '/extensions/data-view/events-context/react': {
+    id: "Events context",
+    title: "Events context",
+    toc: [[{"text":"Row click subscription example"}]],
+    examples: ["Row click subscription example"],
+    section: "extensions",
+    subsection: "Data view",
+    source: "react",
+    tabName: null,
+    sortValue: 3,
+    Component: () => import(/* webpackChunkName: "extensions/data-view/events-context/react/index" */ './extensions/data-view/events-context/react')
+  },
   '/extensions/data-view/components/react': {
     id: "Components",
     title: "Components",
-    toc: [{"text":"Data view toolbar"},[{"text":"Basic example"}]],
-    examples: ["Basic example"],
+    toc: [{"text":"Data view toolbar"},[{"text":"Basic toolbar example"}],{"text":"Data view table"},[{"text":"Rows and columns customization"},{"text":"Tree table example"},{"text":"Empty state example"}]],
+    examples: ["Basic toolbar example","Rows and columns customization","Tree table example","Empty state example"],
     section: "extensions",
     subsection: "Data view",
     source: "react",
diff --git a/packages/module/src/DataViewTable/__snapshots__/DataViewTable.test.tsx.snap b/packages/module/src/DataViewTable/__snapshots__/DataViewTable.test.tsx.snap
@@ -395,7 +395,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="2"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-9"
+        data-ouia-component-id="TableExample-tr-0"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
@@ -519,7 +519,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-10"
+        data-ouia-component-id="TableExample-tr-1"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -611,7 +611,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="2"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-11"
+        data-ouia-component-id="TableExample-tr-2"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -703,7 +703,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="2"
         aria-setsize="1"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-12"
+        data-ouia-component-id="TableExample-tr-3"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
@@ -827,7 +827,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-13"
+        data-ouia-component-id="TableExample-tr-4"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -919,7 +919,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="3"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-14"
+        data-ouia-component-id="TableExample-tr-5"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
diff --git a/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx b/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx
@@ -34,4 +34,11 @@ describe('DataViewTable component', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render with an empty state', () => {
+    const { container } = render(
+      <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} emptyState="No data found" rows={[]} />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/module/src/DataViewTableBasic/DataViewTableBasic.tsx b/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>
   );
diff --git a/packages/module/src/DataViewTableBasic/__snapshots__/DataViewTableBasic.test.tsx.snap b/packages/module/src/DataViewTableBasic/__snapshots__/DataViewTableBasic.test.tsx.snap
diff --git a/packages/module/src/DataViewTableTree/DataViewTableTree.test.tsx b/packages/module/src/DataViewTableTree/DataViewTableTree.test.tsx
diff --git a/packages/module/src/DataViewTableTree/DataViewTableTree.tsx b/packages/module/src/DataViewTableTree/DataViewTableTree.tsx
diff --git a/packages/module/src/DataViewTableTree/__snapshots__/DataViewTableTree.test.tsx.snap b/packages/module/src/DataViewTableTree/__snapshots__/DataViewTableTree.test.tsx.snap
