From 974f139f143f1d03987ad545a1ed4936c46061fc Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 11 Mar 2024 16:00:01 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20add=20warning=20when=20on?=
 =?UTF-8?q?SortModelChange=20is=20missing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We encountered the case were a user reported that the column were
making cursor pointer but clicking on it was doing nothing. It was
caused by the fact that onSortModelChange was not provided. So in
this case we trigger a warning only if enableSorting is true on one
column at least.
---
 .changeset/chatty-rabbits-remember.md               |  5 +++++
 packages/react/src/components/DataGrid/DataList.tsx | 12 +++++++++++-
 packages/react/src/components/DataGrid/index.tsx    |  8 ++++++++
 packages/react/src/components/DataGrid/utils.tsx    |  3 ++-
 4 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/chatty-rabbits-remember.md

diff --git a/.changeset/chatty-rabbits-remember.md b/.changeset/chatty-rabbits-remember.md
new file mode 100644
index 0000000..4a9dc9f
--- /dev/null
+++ b/.changeset/chatty-rabbits-remember.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+add warning on DataGrid when sortModel is missing
diff --git a/packages/react/src/components/DataGrid/DataList.tsx b/packages/react/src/components/DataGrid/DataList.tsx
index b7b6a43..7a9c54f 100644
--- a/packages/react/src/components/DataGrid/DataList.tsx
+++ b/packages/react/src/components/DataGrid/DataList.tsx
@@ -2,5 +2,15 @@ import React from "react";
 import { BaseProps, DataGrid, Row } from ":/components/DataGrid/index";
 
 export const DataList = <T extends Row>({ rows, ...props }: BaseProps<T>) => {
-  return <DataGrid {...props} displayHeader={false} rows={rows} />;
+  return (
+    <DataGrid
+      {...props}
+      displayHeader={false}
+      rows={rows}
+      columns={props.columns.map((column) => ({
+        ...column,
+        enableSorting: false,
+      }))}
+    />
+  );
 };
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index a5003e6..7e7606b 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -92,6 +92,14 @@ export const DataGrid = <T extends Row>({
   const { t } = useCunningham();
   const headlessColumns = useHeadlessColumns({ columns, enableRowSelection });
 
+  headlessColumns.forEach((column) => {
+    if (column.enableSorting && !onSortModelChange) {
+      console.warn(
+        "You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected.",
+      );
+    }
+  });
+
   /**
    * Features.
    */
diff --git a/packages/react/src/components/DataGrid/utils.tsx b/packages/react/src/components/DataGrid/utils.tsx
index 61e79ad..aee8256 100644
--- a/packages/react/src/components/DataGrid/utils.tsx
+++ b/packages/react/src/components/DataGrid/utils.tsx
@@ -28,7 +28,8 @@ export const useHeadlessColumns = <T extends Row>({
     const id = (column.id ?? column.field) as string;
     const opts = {
       id,
-      enableSorting: column.enableSorting,
+      enableSorting:
+        column.enableSorting === undefined ? true : column.enableSorting,
       header: column.headerName,
       cell: (info: CellContext<any, any>) => {
         if (column.renderCell) {