From 25e61c2b4aebf93024b05c15a9b7b318cf66878c Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 12 Mar 2024 14:44:06 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20enableSorting=20suppor?=
 =?UTF-8?q?t=20on=20DataGrid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously it was only available at column level. This way we will
be able to disable sorting on all columns at once.

Closes #298
---
 .changeset/three-tables-leave.md              |  5 ++
 .../src/components/DataGrid/DataList.tsx      |  2 +-
 .../DataGrid/SimpleDataGrid.spec.tsx          | 62 +++++++++++++++++++
 .../react/src/components/DataGrid/index.tsx   |  3 +
 4 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/three-tables-leave.md

diff --git a/.changeset/three-tables-leave.md b/.changeset/three-tables-leave.md
new file mode 100644
index 0000000..8f356c0
--- /dev/null
+++ b/.changeset/three-tables-leave.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+add enableSorting support on DataGrid
diff --git a/packages/react/src/components/DataGrid/DataList.tsx b/packages/react/src/components/DataGrid/DataList.tsx
index 7a9c54f..625d113 100644
--- a/packages/react/src/components/DataGrid/DataList.tsx
+++ b/packages/react/src/components/DataGrid/DataList.tsx
@@ -9,8 +9,8 @@ export const DataList = <T extends Row>({ rows, ...props }: BaseProps<T>) => {
       rows={rows}
       columns={props.columns.map((column) => ({
         ...column,
-        enableSorting: false,
       }))}
+      enableSorting={false}
     />
   );
 };
diff --git a/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx b/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
index e871da7..4b2a55b 100644
--- a/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
+++ b/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
@@ -678,4 +678,66 @@ describe("<SimpleDataGrid/>", () => {
       name: "Loading data",
     });
   });
+
+  it("should render a grid with non-sortable columns by using enableSorting=false at DataGrid level", async () => {
+    const rows = Array.from(Array(23))
+      .map(() => ({
+        id: faker.string.uuid(),
+        firstName: faker.person.firstName(),
+        lastName: faker.person.lastName(),
+        email: faker.internet.email(),
+        address: faker.location.streetAddress(),
+      }))
+      .sort((a, b) => a.firstName.localeCompare(b.firstName));
+
+    const Wrapper = ({ enableSorting }: { enableSorting: boolean }) => {
+      return (
+        <CunninghamProvider>
+          <SimpleDataGrid
+            columns={[
+              {
+                field: "firstName",
+                headerName: "First name",
+              },
+              {
+                field: "lastName",
+                headerName: "Last name",
+              },
+              {
+                field: "email",
+                headerName: "Email",
+              },
+              {
+                field: "address",
+                headerName: "Address",
+              },
+            ]}
+            rows={rows}
+            defaultPaginationParams={{
+              pageSize: 10,
+            }}
+            enableSorting={enableSorting}
+          />
+        </CunninghamProvider>
+      );
+    };
+
+    const { rerender } = render(<Wrapper enableSorting={true} />);
+
+    const table = screen.getByRole("table");
+    const ths = getAllByRole(table, "columnheader");
+    expect(ths.length).toBe(4);
+
+    ths.forEach((th) => {
+      // headers are turned into buttons exclusively when they are sortable
+      expect(within(th).queryByRole("button")).toBeInTheDocument();
+    });
+
+    rerender(<Wrapper enableSorting={false} />);
+
+    ths.forEach((th) => {
+      // headers are turned into buttons exclusively when they are sortable
+      expect(within(th).queryByRole("button")).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index 7e7606b..acf4ed7 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -62,6 +62,7 @@ export interface BaseProps<T extends Row = Row> {
   emptyPlaceholderLabel?: string;
   emptyCta?: ReactNode;
   hideEmptyPlaceholderImage?: boolean;
+  enableSorting?: boolean;
 }
 
 export interface DataGridProps<T extends Row = Row> extends BaseProps<T> {
@@ -88,6 +89,7 @@ export const DataGrid = <T extends Row>({
   emptyCta,
   hideEmptyPlaceholderImage,
   displayHeader = true,
+  enableSorting = true,
 }: DataGridProps<T>) => {
   const { t } = useCunningham();
   const headlessColumns = useHeadlessColumns({ columns, enableRowSelection });
@@ -124,6 +126,7 @@ export const DataGrid = <T extends Row>({
       pagination: paginationState,
     },
     // Sorting
+    enableSorting,
     getSortedRowModel: getSortedRowModel(),
     manualSorting: true,
     onSortingChange: (newHeadlessSorting) => {