[DataGrid] Show label on the filter tooltip

packages/x-data-grid/src/components/panel/filterPanel/filterPanelUtils.ts

@@ -1,4 +1,8 @@
-import type { GridColDef, GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
+import type {
+  GridColDef,
+  GridSingleSelectColDef,
+  ValueOptions,
+} from '../../../models/colDef/gridColDef';
 import type { GridValueOptionsParams } from '../../../models/params/gridValueOptionsParams';
 
 export function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef {
@@ -31,3 +35,31 @@ export function getValueFromValueOptions(
   });
   return getOptionValue(result);
 }
+
+/**
+ * Find the option matching the given value in valueOptions and get its label
+ * @param {string} value is used to extract label from valueOptions.
+ * @param {any[] | undeinfed} valueOptions is used to extract label.
+ * @param {NonNullable<GridSingleSelectColDef['getOptionLabel']>} getOptionLabel is used to get label from valueOption
+ * @param {NonNullable<GridSingleSelectColDef['getOptionValue']>} getOptionValue is used to get value from valueOption
+ * @returns {string | undefined} The label matching with the value.
+ */
+export function getLabelFromValueOptions(
+  value: string,
+  valueOptions: any[] | undefined,
+  getOptionLabel: NonNullable<GridSingleSelectColDef['getOptionLabel']> = (
+    valueOption: ValueOptions,
+  ) => (typeof valueOption === 'object' ? valueOption.label : valueOption),
+  getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']> = (
+    valueOption: ValueOptions,
+  ) => (typeof valueOption === 'object' ? valueOption.value : valueOption),
+) {
+  if (valueOptions === undefined) {
+    return undefined;
+  }
+  const result = valueOptions.find((option) => {
+    const optionValue = getOptionValue(option);
+    return String(optionValue) === String(value);
+  });
+  return getOptionLabel(result);
+}

packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import {
-  unstable_composeClasses as composeClasses,
   unstable_capitalize as capitalize,
+  unstable_composeClasses as composeClasses,
   unstable_useId as useId,
 } from '@mui/utils';
 import { ButtonProps } from '@mui/material/Button';
@@ -20,6 +20,12 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { GridSingleSelectColDef, ValueOptions } from '../../models';
+import {
+  getLabelFromValueOptions,
+  getValueOptions,
+  isSingleSelectColDef,
+} from '../panel/filterPanel/filterPanelUtils';
 
 type OwnerState = DataGridProcessedProps;
 
@@ -85,12 +91,48 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
           .getLocaleText(`filterOperator${capitalize(item.operator!)}` as GridTranslationKeys)!
           .toString();
 
+      const getSingleSelectLabels = (
+        value: any,
+        valueOptions: ValueOptions[],
+        column: GridSingleSelectColDef,
+      ) => {
+        if (Array.isArray(value)) {
+          return value.map(
+            (singleValue) =>
+              getLabelFromValueOptions(
+                String(singleValue),
+                valueOptions,
+                column.getOptionLabel,
+                column.getOptionValue,
+              ) ?? singleValue,
+          );
+        }
+
+        return (
+          getLabelFromValueOptions(
+            String(value),
+            valueOptions,
+            column.getOptionLabel,
+            column.getOptionValue,
+          ) ?? value
+        );
+      };
+
       const getFilterItemValue = (item: GridFilterItem): string => {
-        const { getValueAsString } = lookup[item.field!].filterOperators!.find(
+        let itemValue = item.value;
+        let valueOptions: ValueOptions[] | undefined;
+        const column = lookup[item.field!];
+
+        if (isSingleSelectColDef(column)) {
+          valueOptions = getValueOptions(column as GridSingleSelectColDef);
+          itemValue = getSingleSelectLabels(itemValue, valueOptions ?? [], column);
+        }
+
+        const { getValueAsString } = column.filterOperators!.find(
           (operator) => operator.value === item.operator,
         )!;
 
-        return getValueAsString ? getValueAsString(item.value) : item.value;
+        return getValueAsString ? getValueAsString(itemValue) : itemValue;
       };
 
       return (

packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx

@@ -1457,6 +1457,50 @@ describe('<DataGrid /> - Filter', () => {
       setProps({ filterModel: { items: [{ id: 0, field: 'level', operator: '=', value: 0 }] } });
       expect(tooltip.textContent).to.contain('0');
     });
+
+    it('should display `label` instead of `value` if `label` exists', () => {
+      const { setProps } = render(
+        <DataGrid
+          filterModel={{
+            items: [{ field: 'status', operator: 'isAnyOf', value: ['Status 0', 'Status 1'] }],
+          }}
+          rows={[
+            { id: 0, status: 'Status 0' },
+            { id: 1, status: 'Status 1' },
+            { id: 2, status: 'Status 2' },
+          ]}
+          columns={[
+            {
+              field: 'status',
+              type: 'singleSelect',
+              valueOptions: [
+                { label: 'pending', value: 'Status 0' },
+                { label: 'success', value: 'Status 1' },
+                { label: 'error', value: 'Status 2' },
+              ],
+            },
+          ]}
+          slots={{ toolbar: GridToolbarFilterButton }}
+        />,
+      );
+
+      const filterButton = document.querySelector('button[aria-label="Show filters"]')!;
+      expect(screen.queryByRole('tooltip')).to.equal(null);
+
+      fireEvent.mouseOver(filterButton);
+      clock.tick(1000); // tooltip display delay
+
+      const tooltip = screen.getByRole('tooltip');
+
+      expect(tooltip).toBeVisible();
+      expect(tooltip.textContent).to.contain('pending');
+      expect(tooltip.textContent).to.contain('success');
+
+      setProps({
+        filterModel: { items: [{ field: 'status', operator: 'isAnyOf', value: ['Status 2'] }] },
+      });
+      expect(tooltip.textContent).to.contain('error');
+    });
   });
 
   describe('custom `filterOperators`', () => {