From 31fa91e92f441fa02a487d1804fb8f08d4a547d7 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 4 Mar 2024 16:04:59 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20empty=20placeholder=20?=
 =?UTF-8?q?customization=20props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want to be able to customize the empty placeholder label, add a
call to action and choose whether we want to display the image as well.

Closes #27
---
 .changeset/stale-weeks-vanish.md              |  5 +++
 .../DataGrid/SimpleDataGrid.spec.tsx          | 45 +++++++++++++++++++
 .../src/components/DataGrid/index.stories.tsx | 40 +++++++++++++++++
 .../react/src/components/DataGrid/index.tsx   | 16 +++++--
 4 files changed, 103 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/stale-weeks-vanish.md

diff --git a/.changeset/stale-weeks-vanish.md b/.changeset/stale-weeks-vanish.md
new file mode 100644
index 0000000..7a4f017
--- /dev/null
+++ b/.changeset/stale-weeks-vanish.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add empty placeholder customization props
diff --git a/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx b/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
index 8b6292b..85cac9f 100644
--- a/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
+++ b/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
@@ -512,6 +512,51 @@ describe("<SimpleDataGrid/>", () => {
     screen.getByRole("img", { name: /illustration of an empty table/i });
     screen.getByText(/this table is empty/i);
   });
+  it("should render an empty grid with custom label and cta", async () => {
+    const rows: Row[] = [];
+    render(
+      <CunninghamProvider>
+        <SimpleDataGrid
+          columns={[
+            {
+              field: "firstName",
+              headerName: "First name",
+            },
+          ]}
+          rows={rows}
+          emptyPlaceholderLabel="Custom empty label"
+          emptyCta={<button>Custom empty CTA</button>}
+        />
+      </CunninghamProvider>,
+    );
+
+    screen.getByRole("img", { name: /illustration of an empty table/i });
+    expect(screen.queryByText(/this table is empty/i)).not.toBeInTheDocument();
+    screen.getByText(/Custom empty label/i);
+    screen.getByRole("button", { name: /Custom empty CTA/i });
+  });
+  it("should render an empty grid without image", async () => {
+    const rows: Row[] = [];
+    render(
+      <CunninghamProvider>
+        <SimpleDataGrid
+          columns={[
+            {
+              field: "firstName",
+              headerName: "First name",
+            },
+          ]}
+          rows={rows}
+          hideEmptyPlaceholderImage={true}
+        />
+      </CunninghamProvider>,
+    );
+
+    expect(
+      screen.queryByRole("img", { name: /illustration of an empty table/i }),
+    ).not.toBeInTheDocument();
+    screen.getByText(/this table is empty/i);
+  });
   it("should render a loading grid even if rows are empty", async () => {
     const rows: Row[] = [];
     render(
diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
index 2860647..0cf2e12 100644
--- a/packages/react/src/components/DataGrid/index.stories.tsx
+++ b/packages/react/src/components/DataGrid/index.stories.tsx
@@ -26,6 +26,46 @@ export const Empty = () => {
     />
   );
 };
+export const EmptyCustomWithButton = () => {
+  return (
+    <DataGrid
+      columns={[
+        {
+          field: "firstName",
+          headerName: "First name",
+          highlight: true,
+        },
+      ]}
+      rows={[]}
+      emptyPlaceholderLabel="This table is empty, create the first object"
+      emptyCta={
+        <Button
+          color="secondary"
+          icon={<span className="material-icons">add</span>}
+        >
+          Create object
+        </Button>
+      }
+    />
+  );
+};
+
+export const EmptyCustomNoImage = () => {
+  return (
+    <DataGrid
+      columns={[
+        {
+          field: "firstName",
+          headerName: "First name",
+          highlight: true,
+        },
+      ]}
+      rows={[]}
+      hideEmptyPlaceholderImage={true}
+      emptyPlaceholderLabel="This table is empty :("
+    />
+  );
+};
 
 export const Loading = () => {
   return (
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index 86db957..0f3edf8 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { ReactNode, useMemo } from "react";
 import classNames from "classnames";
 import {
   flexRender,
@@ -52,6 +52,9 @@ export interface BaseProps<T extends Row = Row> {
   enableRowSelection?: TableOptions<T>["enableRowSelection"];
   onRowSelectionChange?: (newSelection: RowSelectionState) => void;
   rowSelection?: RowSelectionState;
+  emptyPlaceholderLabel?: string;
+  emptyCta?: ReactNode;
+  hideEmptyPlaceholderImage?: boolean;
 }
 
 export interface DataGridProps<T extends Row = Row> extends BaseProps<T> {
@@ -74,6 +77,9 @@ export const DataGrid = <T extends Row>({
   onRowSelectionChange,
   rowSelection,
   tableOptions,
+  emptyPlaceholderLabel,
+  emptyCta,
+  hideEmptyPlaceholderImage,
   displayHeader = true,
 }: DataGridProps<T>) => {
   const { t } = useCunningham();
@@ -143,8 +149,12 @@ export const DataGrid = <T extends Row>({
     if (showEmptyPlaceholder) {
       return (
         <div className="c__datagrid__empty-placeholder fs-h3 clr-greyscale-900 fw-bold">
-          <img src={emptyImageUrl} alt={t("components.datagrid.empty_alt")} />
-          {t("components.datagrid.empty")}
+          {!hideEmptyPlaceholderImage && (
+            <img src={emptyImageUrl} alt={t("components.datagrid.empty_alt")} />
+          )}
+
+          {emptyPlaceholderLabel ?? t("components.datagrid.empty")}
+          {emptyCta}
         </div>
       );
     }