From b21b65f52df70a5369e16e495e6d1e3fac6c874c Mon Sep 17 00:00:00 2001
From: Rajat <robertdoweny2301@gmail.com>
Date: Fri, 20 Dec 2024 02:40:12 +0530
Subject: [PATCH] [DataGridPremium] Fix column unpinning with row grouping
 (#15908)

Co-authored-by: Armin Mehinovic <armin@mui.com>
---
 .../useGridRowGroupingPreProcessors.ts        | 22 +++++---
 .../rowGrouping.DataGridPremium.test.tsx      | 52 +++++++++++++++++++
 2 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
index ac43f038695ab..435ac1ca1a7eb 100644
--- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
+++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
@@ -116,10 +116,13 @@ export const useGridRowGroupingPreProcessors = (
       const groupingColDefs = getGroupingColDefs(columnsState);
       let newColumnFields: string[] = [];
       const newColumnsLookup: GridColumnRawLookup = {};
+      const prevGroupingfields: string[] = [];
 
       // We only keep the non-grouping columns
       columnsState.orderedFields.forEach((field) => {
-        if (!isGroupingColumn(field)) {
+        if (isGroupingColumn(field)) {
+          prevGroupingfields.push(field);
+        } else {
           newColumnFields.push(field);
           newColumnsLookup[field] = columnsState.lookup[field];
         }
@@ -135,14 +138,17 @@ export const useGridRowGroupingPreProcessors = (
 
         newColumnsLookup[groupingColDef.field] = groupingColDef;
       });
-      const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-      newColumnFields = [
-        ...newColumnFields.slice(0, startIndex),
-        ...groupingColDefs.map((colDef) => colDef.field),
-        ...newColumnFields.slice(startIndex),
-      ];
 
-      columnsState.orderedFields = newColumnFields;
+      if (prevGroupingfields.length !== groupingColDefs.length) {
+        const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
+        newColumnFields = [
+          ...newColumnFields.slice(0, startIndex),
+          ...groupingColDefs.map((colDef) => colDef.field),
+          ...newColumnFields.slice(startIndex),
+        ];
+        columnsState.orderedFields = newColumnFields;
+      }
+
       columnsState.lookup = newColumnsLookup;
 
       return columnsState;
diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
index f30b9e4374c7a..6a0979cff342c 100644
--- a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
@@ -2632,6 +2632,58 @@ describe('<DataGridPremium /> - Row grouping', () => {
     });
   });
 
+  describe('column pinning', () => {
+    it('should keep the checkbox selection column position after column is unpinned when groupingColumnMode = "single"', () => {
+      const { setProps } = render(
+        <Test
+          checkboxSelection
+          initialState={{ rowGrouping: { model: ['category1'] } }}
+          defaultGroupingExpansionDepth={-1}
+        />,
+      );
+      const initialColumnOrder = ['', 'category1', 'id', 'category1', 'category2'];
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+      setProps({ pinnedColumns: { left: ['id'] } });
+      expect(getColumnHeadersTextContent()).to.deep.equal([
+        'id',
+        '',
+        'category1',
+        'category1',
+        'category2',
+      ]);
+      setProps({ pinnedColumns: { left: [] } });
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+    });
+
+    it('should keep the checkbox selection column position after column is unpinned when groupingColumnMode = "multiple"', () => {
+      const { setProps } = render(
+        <Test
+          checkboxSelection
+          initialState={{ rowGrouping: { model: ['category1', 'category2'] } }}
+          rowGroupingColumnMode="multiple"
+          defaultGroupingExpansionDepth={-1}
+        />,
+      );
+      const initialColumnOrder = ['', 'category1', 'category2', 'id', 'category1', 'category2'];
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+      setProps({
+        pinnedColumns: {
+          left: ['__row_group_by_columns_group_category2__', 'id'],
+        },
+      });
+      expect(getColumnHeadersTextContent()).to.deep.equal([
+        'category2',
+        'id',
+        '',
+        'category1',
+        'category1',
+        'category2',
+      ]);
+      setProps({ pinnedColumns: { left: [] } });
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+    });
+  });
+
   describe('apiRef: addRowGroupingCriteria', () => {
     clock.withFakeTimers();