From 184eb267e83ccf574404ec6d1f396a4a79d6316e Mon Sep 17 00:00:00 2001
From: HanBinKim <37659866+hanbin9775@users.noreply.github.com>
Date: Tue, 13 Dec 2022 21:53:40 +0900
Subject: [PATCH] [DataGrid] Display sort column menu items as per
 `sortingOrder` prop (#7125)

---
 .../menu/columnMenu/SortGridMenuItems.tsx     | 31 +++++++++++++------
 .../src/tests/columnHeaders.DataGrid.test.tsx | 20 ++++++++++++
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx
index ac345d2fe112..62f2cd9a8879 100644
--- a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx
+++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx
@@ -6,11 +6,14 @@ import { gridSortModelSelector } from '../../../hooks/features/sorting/gridSorti
 import { GridSortDirection } from '../../../models/gridSortModel';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { GridFilterItemProps } from './GridFilterItemProps';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
 function SortGridMenuItems(props: GridFilterItemProps) {
   const { column, onClick } = props;
   const apiRef = useGridApiContext();
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const rootProps = useGridRootProps();
+  const sortingOrder: GridSortDirection[] = column.sortingOrder ?? rootProps.sortingOrder;
 
   const sortDirection = React.useMemo(() => {
     if (!column) {
@@ -35,15 +38,25 @@ function SortGridMenuItems(props: GridFilterItemProps) {
 
   return (
     <React.Fragment>
-      <MenuItem onClick={onSortMenuItemClick} disabled={sortDirection == null}>
-        {apiRef.current.getLocaleText('columnMenuUnsort')}
-      </MenuItem>
-      <MenuItem onClick={onSortMenuItemClick} data-value="asc" disabled={sortDirection === 'asc'}>
-        {apiRef.current.getLocaleText('columnMenuSortAsc')}
-      </MenuItem>
-      <MenuItem onClick={onSortMenuItemClick} data-value="desc" disabled={sortDirection === 'desc'}>
-        {apiRef.current.getLocaleText('columnMenuSortDesc')}
-      </MenuItem>
+      {sortingOrder.includes(null) ? (
+        <MenuItem onClick={onSortMenuItemClick} disabled={sortDirection == null}>
+          {apiRef.current.getLocaleText('columnMenuUnsort')}
+        </MenuItem>
+      ) : null}
+      {sortingOrder.includes('asc') ? (
+        <MenuItem onClick={onSortMenuItemClick} data-value="asc" disabled={sortDirection === 'asc'}>
+          {apiRef.current.getLocaleText('columnMenuSortAsc')}
+        </MenuItem>
+      ) : null}
+      {sortingOrder.includes('desc') ? (
+        <MenuItem
+          onClick={onSortMenuItemClick}
+          data-value="desc"
+          disabled={sortDirection === 'desc'}
+        >
+          {apiRef.current.getLocaleText('columnMenuSortDesc')}
+        </MenuItem>
+      ) : null}
     </React.Fragment>
   );
 }
diff --git a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
index 60618f7c339d..5798a70caaba 100644
--- a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
@@ -117,4 +117,24 @@ describe('<DataGrid /> - Column Headers', () => {
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']);
     });
   });
+
+  it('should display sort column menu items as per sortingOrder prop', () => {
+    render(
+      <div style={{ width: 300, height: 500 }}>
+        <DataGrid
+          {...baselineProps}
+          sortingOrder={['desc', 'asc']}
+          columns={[{ field: 'brand', headerClassName: 'foobar' }]}
+        />
+      </div>,
+    );
+    const columnCell = getColumnHeaderCell(0);
+    const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]');
+    fireEvent.click(menuIconButton);
+    clock.runToLast();
+
+    expect(screen.queryByRole('menuitem', { name: /asc/i })).not.to.equal(null);
+    expect(screen.queryByRole('menuitem', { name: /desc/i })).not.to.equal(null);
+    expect(screen.queryByRole('menuitem', { name: /unsort/i })).to.equal(null);
+  });
 });