wip:milestone 0 fixes

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/toolbar/GridToolbar.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { GridToolbarContainer } from '../containers/GridToolbarContainer';
+import { GridToolbarColumnsButton } from './GridToolbarColumnsButton';
+import { GridToolbarDensitySelector } from './GridToolbarDensitySelector';
+import { GridToolbarFilterButton } from './GridToolbarFilterButton';
+import { GridToolbarExport } from './GridToolbarExport';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridToolbarQuickFilter } from './GridToolbarQuickFilter';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+  // TODO v7: think about where export option should be passed.
+  // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
+  var className = props.className,
+    csvOptions = props.csvOptions,
+    printOptions = props.printOptions,
+    excelOptions = props.excelOptions,
+    _props$showQuickFilte = props.showQuickFilter,
+    showQuickFilter = _props$showQuickFilte === void 0 ? false : _props$showQuickFilte,
+    _props$quickFilterPro = props.quickFilterProps,
+    quickFilterProps = _props$quickFilterPro === void 0 ? {} : _props$quickFilterPro,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(GridToolbarContainer, _extends({
+    ref: ref
+  }, other, {
+    children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
+      csvOptions: csvOptions,
+      printOptions: printOptions
+      // TODO: remove the reference to excelOptions in community package
+      ,
+      excelOptions: excelOptions
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        flex: 1
+      }
+    }), showQuickFilter && /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Props passed to the quick filter component.
+   */
+  quickFilterProps: PropTypes.object,
+  /**
+   * Show the quick filter component.
+   * @default false
+   */
+  showQuickFilter: PropTypes.bool,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridToolbar };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/toolbar/GridToolbarColumnsButton.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["onClick"];
+import * as React from 'react';
+import { unstable_useId as useId } from '@mui/material/utils';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
+import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+  var _rootProps$slotProps;
+  var onClick = props.onClick,
+    other = _objectWithoutProperties(props, _excluded);
+  var columnButtonId = useId();
+  var columnPanelId = useId();
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  var showColumns = function showColumns(event) {
+    if (preferencePanel.open && preferencePanel.openedPanelValue === GridPreferencePanelsValue.columns) {
+      apiRef.current.hidePreferences();
+    } else {
+      apiRef.current.showPreferences(GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
+    }
+    onClick == null || onClick(event);
+  };
+
+  // Disable the button if the corresponding is disabled
+  if (rootProps.disableColumnSelector) {
+    return null;
+  }
+  var isOpen = preferencePanel.open && preferencePanel.panelId === columnPanelId;
+  return /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+    ref: ref,
+    id: columnButtonId,
+    size: "small",
+    "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? columnPanelId : undefined,
+    startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
+  }, other, {
+    onClick: showColumns
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
+    children: apiRef.current.getLocaleText('toolbarColumns')
+  }));
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["onClick"];
+import * as React from 'react';
+import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
+import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { GridMenu } from '../menu/GridMenu';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridClasses } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
+  var _rootProps$slotProps;
+  var onClick = props.onClick,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var densityValue = useGridSelector(apiRef, gridDensityValueSelector);
+  var densityButtonId = useId();
+  var densityMenuId = useId();
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var buttonRef = React.useRef(null);
+  var handleRef = useForkRef(ref, buttonRef);
+  var densityOptions = [{
+    icon: /*#__PURE__*/_jsx(rootProps.slots.densityCompactIcon, {}),
+    label: apiRef.current.getLocaleText('toolbarDensityCompact'),
+    value: 'compact'
+  }, {
+    icon: /*#__PURE__*/_jsx(rootProps.slots.densityStandardIcon, {}),
+    label: apiRef.current.getLocaleText('toolbarDensityStandard'),
+    value: 'standard'
+  }, {
+    icon: /*#__PURE__*/_jsx(rootProps.slots.densityComfortableIcon, {}),
+    label: apiRef.current.getLocaleText('toolbarDensityComfortable'),
+    value: 'comfortable'
+  }];
+  var startIcon = React.useMemo(function () {
+    switch (densityValue) {
+      case 'compact':
+        return /*#__PURE__*/_jsx(rootProps.slots.densityCompactIcon, {});
+      case 'comfortable':
+        return /*#__PURE__*/_jsx(rootProps.slots.densityComfortableIcon, {});
+      default:
+        return /*#__PURE__*/_jsx(rootProps.slots.densityStandardIcon, {});
+    }
+  }, [densityValue, rootProps]);
+  var handleDensitySelectorOpen = function handleDensitySelectorOpen(event) {
+    setOpen(function (prevOpen) {
+      return !prevOpen;
+    });
+    onClick == null || onClick(event);
+  };
+  var handleDensitySelectorClose = function handleDensitySelectorClose() {
+    setOpen(false);
+  };
+  var handleDensityUpdate = function handleDensityUpdate(newDensity) {
+    apiRef.current.setDensity(newDensity);
+    setOpen(false);
+  };
+  var handleListKeyDown = function handleListKeyDown(event) {
+    if (isTabKey(event.key)) {
+      event.preventDefault();
+    }
+    if (isHideMenuKey(event.key)) {
+      setOpen(false);
+    }
+  };
+
+  // Disable the button if the corresponding is disabled
+  if (rootProps.disableDensitySelector) {
+    return null;
+  }
+  var densityElements = densityOptions.map(function (option, index) {
+    return /*#__PURE__*/_jsxs(MenuItem, {
+      onClick: function onClick() {
+        return handleDensityUpdate(option.value);
+      },
+      selected: option.value === densityValue,
+      children: [/*#__PURE__*/_jsx(ListItemIcon, {
+        children: option.icon
+      }), option.label]
+    }, index);
+  });
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      ref: handleRef,
+      size: "small",
+      startIcon: startIcon,
+      "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? densityMenuId : undefined,
+      id: densityButtonId
+    }, other, {
+      onClick: handleDensitySelectorOpen
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
+      children: apiRef.current.getLocaleText('toolbarDensity')
+    })), /*#__PURE__*/_jsx(GridMenu, {
+      open: open,
+      target: buttonRef.current,
+      onClose: handleDensitySelectorClose,
+      position: "bottom-start",
+      children: /*#__PURE__*/_jsx(MenuList, {
+        id: densityMenuId,
+        className: gridClasses.menuList,
+        "aria-labelledby": densityButtonId,
+        onKeyDown: handleListKeyDown,
+        autoFocusItem: open,
+        children: densityElements
+      })
+    })]
+  });
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/toolbar/GridToolbarExport.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["hideMenu", "options"],
+  _excluded2 = ["hideMenu", "options"],
+  _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { GridToolbarExportContainer } from './GridToolbarExportContainer';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GridCsvExportMenuItem(props) {
+  var apiRef = useGridApiContext();
+  var hideMenu = props.hideMenu,
+    options = props.options,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_jsx(MenuItem, _extends({
+    onClick: function onClick() {
+      apiRef.current.exportDataAsCsv(options);
+      hideMenu == null || hideMenu();
+    }
+  }, other, {
+    children: apiRef.current.getLocaleText('toolbarExportCSV')
+  }));
+}
+export function GridPrintExportMenuItem(props) {
+  var apiRef = useGridApiContext();
+  var hideMenu = props.hideMenu,
+    options = props.options,
+    other = _objectWithoutProperties(props, _excluded2);
+  return /*#__PURE__*/_jsx(MenuItem, _extends({
+    onClick: function onClick() {
+      apiRef.current.exportDataAsPrint(options);
+      hideMenu == null || hideMenu();
+    }
+  }, other, {
+    children: apiRef.current.getLocaleText('toolbarExportPrint')
+  }));
+}
+var GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
+  var _props$csvOptions = props.csvOptions,
+    csvOptions = _props$csvOptions === void 0 ? {} : _props$csvOptions,
+    _props$printOptions = props.printOptions,
+    printOptions = _props$printOptions === void 0 ? {} : _props$printOptions,
+    excelOptions = props.excelOptions,
+    other = _objectWithoutProperties(props, _excluded3);
+  var apiRef = useGridApiContext();
+  var preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {
+    excelOptions: excelOptions,
+    csvOptions: csvOptions,
+    printOptions: printOptions
+  }).sort(function (a, b) {
+    return a.componentName > b.componentName ? 1 : -1;
+  });
+  if (preProcessedButtons.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridToolbarExportContainer, _extends({}, other, {
+    ref: ref,
+    children: preProcessedButtons.map(function (button, index) {
+      return /*#__PURE__*/React.cloneElement(button.component, {
+        key: index
+      });
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  csvOptions: PropTypes.object,
+  printOptions: PropTypes.object
+} : void 0;
+export { GridToolbarExport };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/toolbar/GridToolbarExportContainer.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "onClick"];
+import * as React from 'react';
+import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
+import MenuList from '@mui/material/MenuList';
+import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { GridMenu } from '../menu/GridMenu';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridClasses } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
+  var _rootProps$slotProps;
+  var children = props.children,
+    onClick = props.onClick,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var exportButtonId = useId();
+  var exportMenuId = useId();
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var buttonRef = React.useRef(null);
+  var handleRef = useForkRef(ref, buttonRef);
+  var handleMenuOpen = function handleMenuOpen(event) {
+    setOpen(function (prevOpen) {
+      return !prevOpen;
+    });
+    onClick == null || onClick(event);
+  };
+  var handleMenuClose = function handleMenuClose() {
+    return setOpen(false);
+  };
+  var handleListKeyDown = function handleListKeyDown(event) {
+    if (isTabKey(event.key)) {
+      event.preventDefault();
+    }
+    if (isHideMenuKey(event.key)) {
+      handleMenuClose();
+    }
+  };
+  if (children == null) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      ref: handleRef,
+      size: "small",
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
+      "aria-expanded": open,
+      "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
+      "aria-haspopup": "menu",
+      "aria-controls": open ? exportMenuId : undefined,
+      id: exportButtonId
+    }, other, {
+      onClick: handleMenuOpen
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
+      children: apiRef.current.getLocaleText('toolbarExport')
+    })), /*#__PURE__*/_jsx(GridMenu, {
+      open: open,
+      target: buttonRef.current,
+      onClose: handleMenuClose,
+      position: "bottom-start",
+      children: /*#__PURE__*/_jsx(MenuList, {
+        id: exportMenuId,
+        className: gridClasses.menuList,
+        "aria-labelledby": exportButtonId,
+        onKeyDown: handleListKeyDown,
+        autoFocusItem: open,
+        children: React.Children.map(children, function (child) {
+          if (! /*#__PURE__*/React.isValidElement(child)) {
+            return child;
+          }
+          return /*#__PURE__*/React.cloneElement(child, {
+            hideMenu: handleMenuClose
+          });
+        })
+      })
+    })]
+  });
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -0,0 +1,138 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["componentsProps"];
+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_useId as useId } from '@mui/utils';
+import Badge from '@mui/material/Badge';
+import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridFilterActiveItemsSelector } from '../../hooks/features/filter/gridFilterSelector';
+import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
+import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['toolbarFilterList']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridToolbarFilterListRoot = styled('ul', {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarFilterList',
+  overridesResolver: function overridesResolver(_props, styles) {
+    return styles.toolbarFilterList;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    margin: theme.spacing(1, 1, 0.5),
+    padding: theme.spacing(0, 1)
+  };
+});
+var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  var _props$componentsProp = props.componentsProps,
+    componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
+    other = _objectWithoutProperties(props, _excluded);
+  var buttonProps = componentsProps.button || {};
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
+  var lookup = useGridSelector(apiRef, gridColumnLookupSelector);
+  var preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  var classes = useUtilityClasses(rootProps);
+  var filterButtonId = useId();
+  var filterPanelId = useId();
+  var tooltipContentNode = React.useMemo(function () {
+    if (preferencePanel.open) {
+      return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');
+    }
+    if (activeFilters.length === 0) {
+      return apiRef.current.getLocaleText('toolbarFiltersTooltipShow');
+    }
+    var getOperatorLabel = function getOperatorLabel(item) {
+      return lookup[item.field].filterOperators.find(function (operator) {
+        return operator.value === item.operator;
+      }).label || apiRef.current.getLocaleText("filterOperator".concat(capitalize(item.operator))).toString();
+    };
+    var getFilterItemValue = function getFilterItemValue(item) {
+      var _ref2 = lookup[item.field].filterOperators.find(function (operator) {
+          return operator.value === item.operator;
+        }),
+        getValueAsString = _ref2.getValueAsString;
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
+    return /*#__PURE__*/_jsxs("div", {
+      children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
+        className: classes.root,
+        ownerState: rootProps,
+        children: activeFilters.map(function (item, index) {
+          return _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
+            children: "".concat(lookup[item.field].headerName || item.field, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat(
+            // implicit check for null and undefined
+            item.value != null ? getFilterItemValue(item) : '')
+          }, index));
+        })
+      })]
+    });
+  }, [apiRef, rootProps, preferencePanel.open, activeFilters, lookup, classes]);
+  var toggleFilter = function toggleFilter(event) {
+    var _buttonProps$onClick;
+    var open = preferencePanel.open,
+      openedPanelValue = preferencePanel.openedPanelValue;
+    if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
+      apiRef.current.hidePreferences();
+    } else {
+      apiRef.current.showPreferences(GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
+    }
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
+  };
+
+  // Disable the button if the corresponding is disabled
+  if (rootProps.disableColumnFilter) {
+    return null;
+  }
+  var isOpen = preferencePanel.open && preferencePanel.panelId === filterPanelId;
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+    title: tooltipContentNode,
+    enterDelay: 1000
+  }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      ref: ref,
+      id: filterButtonId,
+      size: "small",
+      "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
+      "aria-controls": isOpen ? filterPanelId : undefined,
+      "aria-expanded": isOpen,
+      "aria-haspopup": true,
+      startIcon: /*#__PURE__*/_jsx(Badge, {
+        badgeContent: activeFilters.length,
+        color: "primary",
+        children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})
+      })
+    }, buttonProps, {
+      onClick: toggleFilter
+    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+      children: apiRef.current.getLocaleText('toolbarFilters')
+    }))
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridToolbarFilterButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.object
+} : void 0;
+export { GridToolbarFilterButton };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/toolbar/GridToolbarQuickFilter.js

@@ -0,0 +1,164 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import TextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
+import { unstable_debounce as debounce } from '@mui/utils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridQuickFilterValuesSelector } from '../../hooks/features/filter';
+import { isDeepEqual } from '../../utils/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridToolbarQuickFilterRoot = styled(TextField, {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarQuickFilter',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.toolbarQuickFilter;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _defineProperty(_defineProperty({
+    width: 'auto',
+    paddingBottom: theme.spacing(0.5),
+    '& input': {
+      marginLeft: theme.spacing(0.5)
+    },
+    '& .MuiInput-underline:before': {
+      borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider)
+    }
+  }, "& input[type=search]::-ms-clear,\n& input[type=search]::-ms-reveal", {
+    /* clears the 'X' icon from IE */
+    display: 'none',
+    width: 0,
+    height: 0
+  }), "& input[type=\"search\"]::-webkit-search-decoration,\n  & input[type=\"search\"]::-webkit-search-cancel-button,\n  & input[type=\"search\"]::-webkit-search-results-button,\n  & input[type=\"search\"]::-webkit-search-results-decoration", {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
+  });
+});
+var defaultSearchValueParser = function defaultSearchValueParser(searchText) {
+  return searchText.split(' ').filter(function (word) {
+    return word !== '';
+  });
+};
+var defaultSearchValueFormatter = function defaultSearchValueFormatter(values) {
+  return values.join(' ');
+};
+function GridToolbarQuickFilter(props) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
+  var _props$quickFilterPar = props.quickFilterParser,
+    quickFilterParser = _props$quickFilterPar === void 0 ? defaultSearchValueParser : _props$quickFilterPar,
+    _props$quickFilterFor = props.quickFilterFormatter,
+    quickFilterFormatter = _props$quickFilterFor === void 0 ? defaultSearchValueFormatter : _props$quickFilterFor,
+    _props$debounceMs = props.debounceMs,
+    debounceMs = _props$debounceMs === void 0 ? rootProps.filterDebounceMs : _props$debounceMs,
+    other = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React.useState(function () {
+      return quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []);
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    searchValue = _React$useState2[0],
+    setSearchValue = _React$useState2[1];
+  var prevQuickFilterValuesRef = React.useRef(quickFilterValues);
+  React.useEffect(function () {
+    if (!isDeepEqual(prevQuickFilterValuesRef.current, quickFilterValues)) {
+      // The model of quick filter value has been updated
+      prevQuickFilterValuesRef.current = quickFilterValues;
+
+      // Update the input value if needed to match the new model
+      setSearchValue(function (prevSearchValue) {
+        return isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []);
+      });
+    }
+  }, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
+  var updateSearchValue = React.useCallback(function (newSearchValue) {
+    var newQuickFilterValues = quickFilterParser(newSearchValue);
+    prevQuickFilterValuesRef.current = newQuickFilterValues;
+    apiRef.current.setQuickFilterValues(newQuickFilterValues);
+  }, [apiRef, quickFilterParser]);
+  var debouncedUpdateSearchValue = React.useMemo(function () {
+    return debounce(updateSearchValue, debounceMs);
+  }, [updateSearchValue, debounceMs]);
+  var handleSearchValueChange = React.useCallback(function (event) {
+    var newSearchValue = event.target.value;
+    setSearchValue(newSearchValue);
+    debouncedUpdateSearchValue(newSearchValue);
+  }, [debouncedUpdateSearchValue]);
+  var handleSearchReset = React.useCallback(function () {
+    setSearchValue('');
+    updateSearchValue('');
+  }, [updateSearchValue]);
+  return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
+    as: rootProps.slots.baseTextField,
+    ownerState: rootProps,
+    variant: "standard",
+    value: searchValue,
+    onChange: handleSearchValueChange,
+    placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
+    "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
+    type: "search"
+  }, other, {
+    InputProps: _extends({
+      startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
+        fontSize: "small"
+      }),
+      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+        size: "small",
+        sx: {
+          visibility: searchValue ? 'visible' : 'hidden'
+        },
+        onClick: handleSearchReset
+      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+          fontSize: "small"
+        })
+      }))
+    }, other.InputProps)
+  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTextField));
+}
+process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs: PropTypes.number,
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @param {any[]} values The new values passed to the quick filter model
+   * @returns {string} The string to display in the text field
+   * @default (values: string[]) => values.join(' ')
+   */
+  quickFilterFormatter: PropTypes.func,
+  /**
+   * Function responsible for parsing text input in an array of independent values for quick filtering.
+   * @param {string} input The value entered by the user
+   * @returns {any[]} The array of value on which quick filter is applied
+   * @default (searchText: string) => searchText
+   *   .split(' ')
+   *   .filter((word) => word !== '')
+   */
+  quickFilterParser: PropTypes.func
+} : void 0;
+
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ * - [Filtering - quick filter](https://mui.com/x/react-data-grid/filtering/quick-filter/)
+ *
+ * API:
+ * - [GridToolbarQuickFilter API](https://mui.com/x/api/data-grid/grid-toolbar-quick-filter/)
+ */
+export { GridToolbarQuickFilter };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/toolbar/index.js

@@ -0,0 +1,7 @@
+export * from './GridToolbar';
+export * from './GridToolbarColumnsButton';
+export * from './GridToolbarDensitySelector';
+export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from './GridToolbarExport';
+export * from './GridToolbarFilterButton';
+export * from './GridToolbarExportContainer';
+export * from './GridToolbarQuickFilter';