From e4c1df5b0b2aed992759484c88ef7aaa9cc9d00c Mon Sep 17 00:00:00 2001
From: Anthony LC <freelance.anthony@gmail.com>
Date: Mon, 10 Jul 2023 16:06:18 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20datagrid=20column?=
 =?UTF-8?q?=20unique=20key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If we had more than 1 columns with custom cells, we would get a warning
about duplicate keys, because every columns got the key `actions`.
We add the column index to the key to make it unique.
---
 .changeset/selfish-phones-enjoy.md            |  5 +++++
 .../src/components/DataGrid/index.spec.tsx    | 21 +++++++++++++++++--
 .../react/src/components/DataGrid/index.tsx   | 20 ++++++++++++++----
 .../react/src/components/DataGrid/utils.tsx   |  7 ++++---
 4 files changed, 44 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/selfish-phones-enjoy.md

diff --git a/.changeset/selfish-phones-enjoy.md b/.changeset/selfish-phones-enjoy.md
new file mode 100644
index 0000000..ca9e447
--- /dev/null
+++ b/.changeset/selfish-phones-enjoy.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+fix datagrid column unique key
diff --git a/packages/react/src/components/DataGrid/index.spec.tsx b/packages/react/src/components/DataGrid/index.spec.tsx
index 1928629..4d56601 100644
--- a/packages/react/src/components/DataGrid/index.spec.tsx
+++ b/packages/react/src/components/DataGrid/index.spec.tsx
@@ -235,6 +235,17 @@ describe("<DataGrid/>", () => {
                 highlight: true,
               },
               {
+                id: "firstName2",
+                field: "firstName",
+                headerName: "First name",
+              },
+              {
+                id: "lastName",
+                headerName: "Last Name",
+                renderCell: ({ row: { lastName } }) => lastName,
+              },
+              {
+                id: "buttonValidator",
                 renderCell: () => (
                   <Button
                     color="tertiary"
@@ -250,17 +261,23 @@ describe("<DataGrid/>", () => {
       );
     };
 
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+
     render(<Component />);
 
     database.forEach((row) => {
       const element = screen.getByTestId(row.id);
       const tds = getAllByRole(element, "cell");
-      expect(tds.length).toBe(2);
+      expect(tds.length).toBe(4);
       expect(tds[0].textContent).toEqual(row.firstName);
-      getByRole(tds[1], "button", {
+      expect(tds[1].textContent).toEqual(row.firstName);
+      expect(tds[2].textContent).toEqual(row.lastName);
+      getByRole(tds[3], "button", {
         name: "delete",
       });
     });
+
+    expect(error).not.toHaveBeenCalled();
   });
 
   it("should render highlighted column", async () => {
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index a2bbd57..a6a427c 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -23,13 +23,25 @@ export interface Row extends Record<string, any> {
   id: string;
 }
 
-export interface Column<T extends Row = Row> {
-  field?: string;
+export interface ColumnField {
+  id?: string;
+  field: string;
+  renderCell?: never;
+}
+
+export interface ColumnCustomCell<T extends Row = Row> {
+  id: string;
+  renderCell: (params: { row: T }) => React.ReactNode;
+}
+
+export type Column<T extends Row = Row> = (
+  | ColumnCustomCell<T>
+  | ColumnField
+) & {
   headerName?: string;
   highlight?: boolean;
-  renderCell?: (params: { row: T }) => React.ReactNode;
   enableSorting?: boolean;
-}
+};
 
 export type SortModel = { field: string; sort: "asc" | "desc" | null }[];
 
diff --git a/packages/react/src/components/DataGrid/utils.tsx b/packages/react/src/components/DataGrid/utils.tsx
index 6cf051e..0827e26 100644
--- a/packages/react/src/components/DataGrid/utils.tsx
+++ b/packages/react/src/components/DataGrid/utils.tsx
@@ -24,19 +24,20 @@ export const useHeadlessColumns = <T extends Row>({
   const columnHelper = createColumnHelper<T>();
   let headlessColumns = columns.map((column) => {
     const opts = {
-      id: column.field ?? "actions",
+      id: column.renderCell ? column.id : column.id ?? column.field,
       enableSorting: column.enableSorting,
       header: column.headerName,
     };
-    if (column.field) {
+    if (!column.renderCell) {
       // The any cast is needed because the type of the accessor is hard-defined on react-table.
       // On our side we only use string as type for simplicity purpose.
       return columnHelper.accessor(column.field as any, opts);
     }
+
     return columnHelper.display({
       ...opts,
       cell: (info) => {
-        return column.renderCell!({ row: info.row.original });
+        return column.renderCell({ row: info.row.original });
       },
     });
   });