From 6fe6ac55d17ae1fbfc8a883ecbb2b61fa0fdad0f Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Thu, 30 May 2024 13:53:49 +0300
Subject: [PATCH] feat: add empty state API to grid

---
 packages/react-components/src/Grid.tsx | 12 +++++++-
 test/Grid.spec.tsx                     | 40 ++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/Grid.tsx b/packages/react-components/src/Grid.tsx
index 6bc10e8a..3218bb74 100644
--- a/packages/react-components/src/Grid.tsx
+++ b/packages/react-components/src/Grid.tsx
@@ -1,4 +1,11 @@
-import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
+import {
+  type ComponentType,
+  type ForwardedRef,
+  forwardRef,
+  type ReactElement,
+  type RefAttributes,
+  type ReactNode,
+} from 'react';
 import {
   Grid as _Grid,
   type GridDefaultItem,
@@ -13,6 +20,7 @@ export * from './generated/Grid.js';
 export type GridProps<TItem> = Partial<Omit<_GridProps<TItem>, 'rowDetailsRenderer'>> &
   Readonly<{
     rowDetailsRenderer?: ComponentType<GridRowDetailsReactRendererProps<TItem>> | null;
+    emptyState?: ReactNode;
   }>;
 
 function Grid<TItem = GridDefaultItem>(
@@ -25,6 +33,8 @@ function Grid<TItem = GridDefaultItem>(
     <_Grid<TItem> {...props} ref={ref} rowDetailsRenderer={rowDetailsRenderer}>
       {props.children}
       {portals}
+
+      {props.emptyState && <div slot="empty-state">{props.emptyState}</div>}
     </_Grid>
   );
 }
diff --git a/test/Grid.spec.tsx b/test/Grid.spec.tsx
index a5a8a7b7..228e6834 100644
--- a/test/Grid.spec.tsx
+++ b/test/Grid.spec.tsx
@@ -615,4 +615,44 @@ describe('Grid', () => {
       expect(treeFooterCell).to.have.text('Name Footer');
     });
   });
+
+  describe('empty state', () => {
+    it('should not render empty state content by default', async () => {
+      render(
+        <Grid>
+          <GridColumn path="name"></GridColumn>
+        </Grid>,
+      );
+
+      const grid = await findByQuerySelector('vaadin-grid');
+      const emptyState = grid.querySelector('[slot="empty-state"]');
+      expect(emptyState).not.to.exist;
+    });
+
+    it('should render empty state content', async () => {
+      render(
+        <Grid emptyState="No items">
+          <GridColumn path="name"></GridColumn>
+        </Grid>,
+      );
+
+      const grid = await findByQuerySelector('vaadin-grid');
+      const emptyState = grid.querySelector('[slot="empty-state"]');
+      expect(emptyState).to.exist;
+      expect(emptyState).to.have.text('No items');
+    });
+
+    it('should render empty state component', async () => {
+      render(
+        <Grid emptyState={<div>No items</div>}>
+          <GridColumn path="name"></GridColumn>
+        </Grid>,
+      );
+
+      const grid = await findByQuerySelector('vaadin-grid');
+      const emptyState = grid.querySelector('[slot="empty-state"]');
+      expect(emptyState).to.exist;
+      expect(emptyState).to.have.text('No items');
+    });
+  });
 });