wip:milestone 0 fixes

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/GridColumnsPanel.js

@@ -0,0 +1,233 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnsPanel = GridColumnsPanel;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Switch = require("@mui/material/Switch");
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _styles = require("@mui/material/styles");
+var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _GridPanelContent = require("./GridPanelContent");
+var _GridPanelFooter = require("./GridPanelFooter");
+var _GridPanelHeader = require("./GridPanelHeader");
+var _GridPanelWrapper = require("./GridPanelWrapper");
+var _envConstants = require("../../constants/envConstants");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton", "getTogglableColumns"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnsPanel'],
+    columnsPanelRow: ['columnsPanelRow']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridColumnsPanelRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsPanel',
+  overridesResolver: (props, styles) => styles.columnsPanel
+})({
+  padding: '8px 0px 8px 8px'
+});
+const GridColumnsPanelRowRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsPanelRow',
+  overridesResolver: (props, styles) => styles.columnsPanelRow
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '1px 8px 1px 7px',
+  [`& .${_Switch.switchClasses.root}`]: {
+    marginRight: theme.spacing(0.5)
+  }
+}));
+const GridIconButtonRoot = (0, _styles.styled)(_IconButton.default)({
+  justifyContent: 'flex-end'
+});
+const collator = new Intl.Collator();
+const defaultSearchPredicate = (column, searchValue) => {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};
+function GridColumnsPanel(props) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const searchInputRef = React.useRef(null);
+  const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
+  const columnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [searchValue, setSearchValue] = React.useState('');
+  const classes = useUtilityClasses(rootProps);
+  const {
+      sort,
+      searchPredicate = defaultSearchPredicate,
+      autoFocusSearchField = true,
+      disableHideAllButton = false,
+      disableShowAllButton = false,
+      getTogglableColumns
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const sortedColumns = React.useMemo(() => {
+    switch (sort) {
+      case 'asc':
+        return [...columns].sort((a, b) => collator.compare(a.headerName || a.field, b.headerName || b.field));
+      case 'desc':
+        return [...columns].sort((a, b) => -collator.compare(a.headerName || a.field, b.headerName || b.field));
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
+  const toggleColumn = event => {
+    const {
+      name: field
+    } = event.target;
+    apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
+  };
+  const toggleAllColumns = React.useCallback(isVisible => {
+    const currentModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+    const newModel = (0, _extends2.default)({}, currentModel);
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
+    columns.forEach(col => {
+      if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
+        if (isVisible) {
+          // delete the key from the model instead of setting it to `true`
+          delete newModel[col.field];
+        } else {
+          newModel[col.field] = false;
+        }
+      }
+    });
+    return apiRef.current.setColumnVisibilityModel(newModel);
+  }, [apiRef, columns, getTogglableColumns]);
+  const handleSearchValueChange = React.useCallback(event => {
+    setSearchValue(event.target.value);
+  }, []);
+  const currentColumns = React.useMemo(() => {
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
+      field
+    }) => togglableColumns.includes(field)) : sortedColumns;
+    if (!searchValue) {
+      return togglableSortedColumns;
+    }
+    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
+  const firstSwitchRef = React.useRef(null);
+  React.useEffect(() => {
+    if (autoFocusSearchField) {
+      searchInputRef.current.focus();
+    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
+      firstSwitchRef.current.focus();
+    }
+  }, [autoFocusSearchField]);
+  let firstHideableColumnFound = false;
+  const isFirstHideableColumn = column => {
+    if (firstHideableColumnFound === false && column.hideable !== false) {
+      firstHideableColumnFound = true;
+      return true;
+    }
+    return false;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelHeader.GridPanelHeader, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+        label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
+        placeholder: apiRef.current.getLocaleText('columnsPanelTextFieldPlaceholder'),
+        inputRef: searchInputRef,
+        value: searchValue,
+        onChange: handleSearchValueChange,
+        variant: "standard",
+        fullWidth: true
+      }, rootProps.slotProps?.baseTextField))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelContent.GridPanelContent, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsPanelRoot, {
+        className: classes.root,
+        ownerState: rootProps,
+        children: currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsPanelRowRoot, {
+          className: classes.columnsPanelRow,
+          ownerState: rootProps,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+            control: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSwitch, (0, _extends2.default)({
+              disabled: column.hideable === false,
+              checked: columnVisibilityModel[column.field] !== false,
+              onClick: toggleColumn,
+              name: column.field,
+              size: "small",
+              inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
+            }, rootProps.slotProps?.baseSwitch)),
+            label: column.headerName || column.field
+          }), !rootProps.disableColumnReorder && _envConstants.GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridIconButtonRoot, {
+            draggable: true,
+            "aria-label": apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
+            title: apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
+            size: "small",
+            disabled: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnReorderIcon, {})
+          })]
+        }, column.field))
+      })
+    }), disableShowAllButton && disableHideAllButton ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelFooter.GridPanelFooter, {
+      children: [!disableHideAllButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+        onClick: () => toggleAllColumns(false)
+      }, rootProps.slotProps?.baseButton, {
+        disabled: disableHideAllButton,
+        children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableShowAllButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+        onClick: () => toggleAllColumns(true)
+      }, rootProps.slotProps?.baseButton, {
+        disabled: disableShowAllButton,
+        children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
+      })) : null]
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * If `true`, the column search field will be focused automatically.
+   * If `false`, the first column switch input will be focused automatically.
+   * This helps to avoid input keyboard panel to popup automatically on touch devices.
+   * @default true
+   */
+  autoFocusSearchField: _propTypes.default.bool,
+  /**
+   * If `true`, the `Hide all` button will not be displayed.
+   * @default false
+   */
+  disableHideAllButton: _propTypes.default.bool,
+  /**
+   * If `true`, the `Show all` button will be disabled
+   * @default false
+   */
+  disableShowAllButton: _propTypes.default.bool,
+  /**
+   * Returns the list of togglable columns.
+   * If used, only those columns will be displayed in the panel
+   * which are passed as the return value of the function.
+   * @param {GridColDef[]} columns The `ColDef` list of all columns.
+   * @returns {GridColDef['field'][]} The list of togglable columns' field names.
+   */
+  getTogglableColumns: _propTypes.default.func,
+  searchPredicate: _propTypes.default.func,
+  slotProps: _propTypes.default.object,
+  sort: _propTypes.default.oneOf(['asc', 'desc'])
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/GridPanel.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridPanelClasses = exports.GridPanel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _utils = require("@mui/utils");
+var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _keyboardUtils = require("../../utils/keyboardUtils");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "className", "classes"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const gridPanelClasses = exports.gridPanelClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['panel', 'paper']);
+const GridPanelRoot = (0, _styles.styled)(_Popper.default, {
+  name: 'MuiDataGrid',
+  slot: 'Panel',
+  overridesResolver: (props, styles) => styles.panel
+})(({
+  theme
+}) => ({
+  zIndex: theme.zIndex.modal
+}));
+const GridPaperRoot = (0, _styles.styled)(_Paper.default, {
+  name: 'MuiDataGrid',
+  slot: 'Paper',
+  overridesResolver: (props, styles) => styles.paper
+})(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  minWidth: 300,
+  maxHeight: 450,
+  display: 'flex'
+}));
+const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = gridPanelClasses;
+  const [isPlaced, setIsPlaced] = React.useState(false);
+  const handleClickAway = React.useCallback(() => {
+    apiRef.current.hidePreferences();
+  }, [apiRef]);
+  const handleKeyDown = React.useCallback(event => {
+    if ((0, _keyboardUtils.isEscapeKey)(event.key)) {
+      apiRef.current.hidePreferences();
+    }
+  }, [apiRef]);
+  const modifiers = React.useMemo(() => [{
+    name: 'flip',
+    enabled: true,
+    options: {
+      rootBoundary: 'document'
+    }
+  }, {
+    name: 'isPlaced',
+    enabled: true,
+    phase: 'main',
+    fn: () => {
+      setIsPlaced(true);
+    },
+    effect: () => () => {
+      setIsPlaced(false);
+    }
+  }], []);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  React.useEffect(() => {
+    const columnHeadersElement = apiRef.current.rootElementRef?.current?.querySelector(`.${_gridClasses.gridClasses.columnHeaders}`);
+    if (columnHeadersElement) {
+      setAnchorEl(columnHeadersElement);
+    }
+  }, [apiRef]);
+  if (!anchorEl) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelRoot, (0, _extends2.default)({
+    ref: ref,
+    placement: "bottom-start",
+    className: (0, _clsx.default)(className, classes.panel),
+    ownerState: rootProps,
+    anchorEl: anchorEl,
+    modifiers: modifiers
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
+      mouseEvent: "onMouseUp",
+      onClickAway: handleClickAway,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaperRoot, {
+        className: classes.paper,
+        ownerState: rootProps,
+        elevation: 8,
+        onKeyDown: handleKeyDown,
+        children: isPlaced && children
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Popper render function or node.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: _propTypes.default.bool.isRequired,
+  ownerState: _propTypes.default.object
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/GridPanelContent.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPanelContent = GridPanelContent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _utils = require("@mui/utils");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelContent']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridPanelContentRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelContent',
+  overridesResolver: (props, styles) => styles.panelContent
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'auto',
+  flex: '1 1',
+  maxHeight: 400
+});
+function GridPanelContent(props) {
+  const {
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelContentRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: rootProps
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridPanelContent.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/GridPanelFooter.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPanelFooter = GridPanelFooter;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _utils = require("@mui/utils");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelFooter']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridPanelFooterRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelFooter',
+  overridesResolver: (props, styles) => styles.panelFooter
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(0.5),
+  display: 'flex',
+  justifyContent: 'space-between'
+}));
+function GridPanelFooter(props) {
+  const {
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelFooterRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: rootProps
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridPanelFooter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/GridPanelHeader.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPanelHeader = GridPanelHeader;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _utils = require("@mui/utils");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelHeader']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridPanelHeaderRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelHeader',
+  overridesResolver: (props, styles) => styles.panelHeader
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(1)
+}));
+function GridPanelHeader(props) {
+  const {
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelHeaderRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: rootProps
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridPanelHeader.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/GridPanelWrapper.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPanelWrapper = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/material/Unstable_TrapFocus"));
+var _styles = require("@mui/material/styles");
+var _utils = require("@mui/utils");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "slotProps"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelWrapper']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridPanelWrapperRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelWrapper',
+  overridesResolver: (props, styles) => styles.panelWrapper
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  '&:focus': {
+    outline: 0
+  }
+});
+const isEnabled = () => true;
+const GridPanelWrapper = exports.GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
+  const {
+      className,
+      slotProps = {}
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, (0, _extends2.default)({
+    open: true,
+    disableEnforceFocus: true,
+    isEnabled: isEnabled
+  }, slotProps.TrapFocus, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
+      ref: ref,
+      tabIndex: -1,
+      className: (0, _clsx.default)(className, classes.root),
+      ownerState: rootProps
+    }, other))
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  slotProps: _propTypes.default.object
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/GridPreferencesPanel.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPreferencesPanel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
+var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const GridPreferencesPanel = exports.GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const preferencePanelState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
+  const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? _gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.panel, (0, _extends2.default)({
+    ref: ref,
+    as: rootProps.slots.basePopper,
+    open: columns.length > 0 && preferencePanelState.open,
+    id: preferencePanelState.panelId,
+    "aria-labelledby": preferencePanelState.labelId
+  }, rootProps.slotProps?.panel, props, rootProps.slotProps?.basePopper, {
+    children: panelContent
+  }));
+});

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/GridFilterForm.js

@@ -0,0 +1,446 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFilterForm = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
+var _gridFilterSelector = require("../../../hooks/features/filter/gridFilterSelector");
+var _useGridSelector = require("../../../hooks/utils/useGridSelector");
+var _gridFilterItem = require("../../../models/gridFilterItem");
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+  _excluded2 = ["InputComponentProps"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['filterForm'],
+    deleteIcon: ['filterFormDeleteIcon'],
+    logicOperatorInput: ['filterFormLogicOperatorInput'],
+    columnInput: ['filterFormColumnInput'],
+    operatorInput: ['filterFormOperatorInput'],
+    valueInput: ['filterFormValueInput']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridFilterFormRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterForm',
+  overridesResolver: (props, styles) => styles.filterForm
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  padding: theme.spacing(1)
+}));
+const FilterFormDeleteIcon = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormDeleteIcon',
+  overridesResolver: (_, styles) => styles.filterFormDeleteIcon
+})(({
+  theme
+}) => ({
+  flexShrink: 0,
+  justifyContent: 'flex-end',
+  marginRight: theme.spacing(0.5),
+  marginBottom: theme.spacing(0.2)
+}));
+const FilterFormLogicOperatorInput = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormLogicOperatorInput',
+  overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
+})({
+  minWidth: 55,
+  marginRight: 5,
+  justifyContent: 'end'
+});
+const FilterFormColumnInput = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormColumnInput',
+  overridesResolver: (_, styles) => styles.filterFormColumnInput
+})({
+  width: 150
+});
+const FilterFormOperatorInput = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormOperatorInput',
+  overridesResolver: (_, styles) => styles.filterFormOperatorInput
+})({
+  width: 120
+});
+const FilterFormValueInput = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormValueInput',
+  overridesResolver: (_, styles) => styles.filterFormValueInput
+})({
+  width: 190
+});
+const getLogicOperatorLocaleKey = logicOperator => {
+  switch (logicOperator) {
+    case _gridFilterItem.GridLogicOperator.And:
+      return 'filterPanelOperatorAnd';
+    case _gridFilterItem.GridLogicOperator.Or:
+      return 'filterPanelOperatorOr';
+    default:
+      throw new Error('MUI: Invalid `logicOperator` property in the `GridFilterPanel`.');
+  }
+};
+const getColumnLabel = col => col.headerName || col.field;
+const collator = new Intl.Collator();
+const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
+  const {
+      item,
+      hasMultipleFilters,
+      deleteFilter,
+      applyFilterChanges,
+      multiFilterOperator,
+      showMultiFilterOperators,
+      disableMultiFilterOperator,
+      applyMultiFilterOperatorChanges,
+      focusElementRef,
+      logicOperators = [_gridFilterItem.GridLogicOperator.And, _gridFilterItem.GridLogicOperator.Or],
+      columnsSort,
+      filterColumns,
+      deleteIconProps = {},
+      logicOperatorInputProps = {},
+      operatorInputProps = {},
+      columnInputProps = {},
+      valueInputProps = {}
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
+  const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
+  const columnSelectId = (0, _utils.unstable_useId)();
+  const columnSelectLabelId = (0, _utils.unstable_useId)();
+  const operatorSelectId = (0, _utils.unstable_useId)();
+  const operatorSelectLabelId = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  const valueRef = React.useRef(null);
+  const filterSelectorRef = React.useRef(null);
+  const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
+  const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
+  const isBaseSelectNative = baseSelectProps.native ?? true;
+  const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {};
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
+  const {
+      InputComponentProps
+    } = valueInputProps,
+    valueInputPropsOther = (0, _objectWithoutPropertiesLoose2.default)(valueInputProps, _excluded2);
+  const filteredColumns = React.useMemo(() => {
+    if (filterColumns === undefined || typeof filterColumns !== 'function') {
+      return filterableColumns;
+    }
+    const filteredFields = filterColumns({
+      field: item.field,
+      columns: filterableColumns,
+      currentFilters: filterModel?.items || []
+    });
+    return filterableColumns.filter(column => filteredFields.includes(column.field));
+  }, [filterColumns, filterModel?.items, filterableColumns, item.field]);
+  const sortedFilteredColumns = React.useMemo(() => {
+    switch (columnsSort) {
+      case 'asc':
+        return filteredColumns.sort((a, b) => collator.compare(getColumnLabel(a), getColumnLabel(b)));
+      case 'desc':
+        return filteredColumns.sort((a, b) => -collator.compare(getColumnLabel(a), getColumnLabel(b)));
+      default:
+        return filteredColumns;
+    }
+  }, [filteredColumns, columnsSort]);
+  const currentColumn = item.field ? apiRef.current.getColumn(item.field) : null;
+  const currentOperator = React.useMemo(() => {
+    if (!item.operator || !currentColumn) {
+      return null;
+    }
+    return currentColumn.filterOperators?.find(operator => operator.value === item.operator);
+  }, [item, currentColumn]);
+  const changeColumn = React.useCallback(event => {
+    const field = event.target.value;
+    const column = apiRef.current.getColumn(field);
+    if (column.field === currentColumn.field) {
+      // column did not change
+      return;
+    }
+
+    // try to keep the same operator when column change
+    const newOperator = column.filterOperators.find(operator => operator.value === item.operator) || column.filterOperators[0];
+
+    // Erase filter value if the input component or filtered column type is modified
+    const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== currentOperator?.InputComponent || column.type !== currentColumn.type;
+    applyFilterChanges((0, _extends2.default)({}, item, {
+      field,
+      operator: newOperator.value,
+      value: eraseItemValue ? undefined : item.value
+    }));
+  }, [apiRef, applyFilterChanges, item, currentColumn, currentOperator]);
+  const changeOperator = React.useCallback(event => {
+    const operator = event.target.value;
+    const newOperator = currentColumn?.filterOperators.find(op => op.value === operator);
+    const eraseItemValue = !newOperator?.InputComponent || newOperator?.InputComponent !== currentOperator?.InputComponent;
+    applyFilterChanges((0, _extends2.default)({}, item, {
+      operator,
+      value: eraseItemValue ? undefined : item.value
+    }));
+  }, [applyFilterChanges, item, currentColumn, currentOperator]);
+  const changeLogicOperator = React.useCallback(event => {
+    const logicOperator = event.target.value === _gridFilterItem.GridLogicOperator.And.toString() ? _gridFilterItem.GridLogicOperator.And : _gridFilterItem.GridLogicOperator.Or;
+    applyMultiFilterOperatorChanges(logicOperator);
+  }, [applyMultiFilterOperatorChanges]);
+  const handleDeleteFilter = () => {
+    if (rootProps.disableMultipleColumnsFiltering) {
+      if (item.value === undefined) {
+        deleteFilter(item);
+      } else {
+        // TODO v6: simplify the behavior by always remove the filter form
+        applyFilterChanges((0, _extends2.default)({}, item, {
+          value: undefined
+        }));
+      }
+    } else {
+      deleteFilter(item);
+    }
+  };
+  React.useImperativeHandle(focusElementRef, () => ({
+    focus: () => {
+      if (currentOperator?.InputComponent) {
+        valueRef?.current?.focus();
+      } else {
+        filterSelectorRef.current.focus();
+      }
+    }
+  }), [currentOperator]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridFilterFormRoot, (0, _extends2.default)({
+    ref: ref,
+    className: classes.root,
+    "data-id": item.id,
+    ownerState: rootProps
+  }, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
+      variant: "standard",
+      as: rootProps.slots.baseFormControl
+    }, baseFormControlProps, deleteIconProps, {
+      className: (0, _clsx.default)(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
+      ownerState: rootProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+        "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
+        title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
+        onClick: handleDeleteFilter,
+        size: "small"
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelDeleteIcon, {
+          fontSize: "small"
+        })
+      }))
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormLogicOperatorInput, (0, _extends2.default)({
+      variant: "standard",
+      as: rootProps.slots.baseFormControl
+    }, baseFormControlProps, logicOperatorInputProps, {
+      sx: (0, _extends2.default)({
+        display: hasLogicOperatorColumn ? 'flex' : 'none',
+        visibility: showMultiFilterOperators ? 'visible' : 'hidden'
+      }, baseFormControlProps.sx || {}, logicOperatorInputProps.sx || {}),
+      className: (0, _clsx.default)(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
+      ownerState: rootProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
+        inputProps: {
+          'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
+        },
+        value: multiFilterOperator,
+        onChange: changeLogicOperator,
+        disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
+        native: isBaseSelectNative
+      }, rootProps.slotProps?.baseSelect, {
+        children: logicOperators.map(logicOperator => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: logicOperator.toString(),
+          value: logicOperator.toString()
+        }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
+      }))
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormColumnInput, (0, _extends2.default)({
+      variant: "standard",
+      as: rootProps.slots.baseFormControl
+    }, baseFormControlProps, columnInputProps, {
+      className: (0, _clsx.default)(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
+      ownerState: rootProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, baseInputLabelProps, {
+        htmlFor: columnSelectId,
+        id: columnSelectLabelId,
+        children: apiRef.current.getLocaleText('filterPanelColumns')
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
+        labelId: columnSelectLabelId,
+        id: columnSelectId,
+        label: apiRef.current.getLocaleText('filterPanelColumns'),
+        value: item.field || '',
+        onChange: changeColumn,
+        native: isBaseSelectNative
+      }, rootProps.slotProps?.baseSelect, {
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: col.field,
+          value: col.field
+        }), getColumnLabel(col)))
+      }))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormOperatorInput, (0, _extends2.default)({
+      variant: "standard",
+      as: rootProps.slots.baseFormControl
+    }, baseFormControlProps, operatorInputProps, {
+      className: (0, _clsx.default)(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
+      ownerState: rootProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, baseInputLabelProps, {
+        htmlFor: operatorSelectId,
+        id: operatorSelectLabelId,
+        children: apiRef.current.getLocaleText('filterPanelOperator')
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
+        labelId: operatorSelectLabelId,
+        label: apiRef.current.getLocaleText('filterPanelOperator'),
+        id: operatorSelectId,
+        value: item.operator,
+        onChange: changeOperator,
+        native: isBaseSelectNative,
+        inputRef: filterSelectorRef
+      }, rootProps.slotProps?.baseSelect, {
+        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: operator.value,
+          value: operator.value
+        }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
+      }))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({
+      variant: "standard",
+      as: rootProps.slots.baseFormControl
+    }, baseFormControlProps, valueInputPropsOther, {
+      className: (0, _clsx.default)(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
+      ownerState: rootProps,
+      children: currentOperator?.InputComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(currentOperator.InputComponent, (0, _extends2.default)({
+        apiRef: apiRef,
+        item: item,
+        applyValue: applyFilterChanges,
+        focusElementRef: valueRef
+      }, currentOperator.InputComponentProps, InputComponentProps)) : null
+    }))]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Callback called when the operator, column field or value is changed.
+   * @param {GridFilterItem} item The updated [[GridFilterItem]].
+   */
+  applyFilterChanges: _propTypes.default.func.isRequired,
+  /**
+   * Callback called when the logic operator is changed.
+   * @param {GridLogicOperator} operator The new logic operator.
+   */
+  applyMultiFilterOperatorChanges: _propTypes.default.func.isRequired,
+  /**
+   * @ignore - do not document.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Props passed to the column input component.
+   * @default {}
+   */
+  columnInputProps: _propTypes.default.any,
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
+  columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
+  /**
+   * Callback called when the delete button is clicked.
+   * @param {GridFilterItem} item The deleted [[GridFilterItem]].
+   */
+  deleteFilter: _propTypes.default.func.isRequired,
+  /**
+   * Props passed to the delete icon.
+   * @default {}
+   */
+  deleteIconProps: _propTypes.default.any,
+  /**
+   * If `true`, disables the logic operator field but still renders it.
+   */
+  disableMultiFilterOperator: _propTypes.default.bool,
+  /**
+   * Allows to filter the columns displayed in the filter form.
+   * @param {FilterColumnsArgs} args The columns of the grid and name of field.
+   * @returns {GridColDef['field'][]} The filtered fields array.
+   */
+  filterColumns: _propTypes.default.func,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the el
+   */
+  focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * If `true`, the logic operator field is rendered.
+   * The field will be invisible if `showMultiFilterOperators` is also `true`.
+   */
+  hasMultipleFilters: _propTypes.default.bool.isRequired,
+  /**
+   * The [[GridFilterItem]] representing this form.
+   */
+  item: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    operator: _propTypes.default.string.isRequired,
+    value: _propTypes.default.any
+  }).isRequired,
+  /**
+   * Props passed to the logic operator input component.
+   * @default {}
+   */
+  logicOperatorInputProps: _propTypes.default.any,
+  /**
+   * Sets the available logic operators.
+   * @default [GridLogicOperator.And, GridLogicOperator.Or]
+   */
+  logicOperators: _propTypes.default.arrayOf(_propTypes.default.oneOf(['and', 'or']).isRequired),
+  /**
+   * The current logic operator applied.
+   */
+  multiFilterOperator: _propTypes.default.oneOf(['and', 'or']),
+  /**
+   * Props passed to the operator input component.
+   * @default {}
+   */
+  operatorInputProps: _propTypes.default.any,
+  /**
+   * If `true`, the logic operator field is visible.
+   */
+  showMultiFilterOperators: _propTypes.default.bool,
+  /**
+   * Props passed to the value input component.
+   * @default {}
+   */
+  valueInputProps: _propTypes.default.any
+} : void 0;
+
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterForm API](https://mui.com/x/api/data-grid/grid-filter-form/)
+ */

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFilterInputBoolean = GridFilterInputBoolean;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _styles = require("@mui/material/styles");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const BooleanOperatorContainer = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  [`& button`]: {
+    margin: 'auto 0px 5px 5px'
+  }
+});
+function GridFilterInputBoolean(props) {
+  const {
+      item,
+      applyValue,
+      apiRef,
+      focusElementRef,
+      clearButton,
+      tabIndex,
+      label: labelProp,
+      variant = 'standard'
+    } = props,
+    others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const [filterValueState, setFilterValueState] = React.useState(item.value || '');
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const labelId = (0, _utils.unstable_useId)();
+  const selectId = (0, _utils.unstable_useId)();
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? true;
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
+  const onFilterChange = React.useCallback(event => {
+    const value = event.target.value;
+    setFilterValueState(value);
+    applyValue((0, _extends2.default)({}, item, {
+      value
+    }));
+  }, [applyValue, item]);
+  React.useEffect(() => {
+    setFilterValueState(item.value || '');
+  }, [item.value]);
+  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BooleanOperatorContainer, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseFormControl, {
+      fullWidth: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
+        id: labelId,
+        shrink: true,
+        variant: variant,
+        children: label
+      })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, (0, _extends2.default)({
+        labelId: labelId,
+        id: selectId,
+        label: label,
+        value: filterValueState,
+        onChange: onFilterChange,
+        variant: variant,
+        notched: variant === 'outlined' ? true : undefined,
+        native: isSelectNative,
+        displayEmpty: true,
+        inputProps: {
+          ref: focusElementRef,
+          tabIndex
+        }
+      }, others, baseSelectProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isSelectNative,
+          value: "",
+          children: apiRef.current.getLocaleText('filterValueAny')
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isSelectNative,
+          value: "true",
+          children: apiRef.current.getLocaleText('filterValueTrue')
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isSelectNative,
+          value: "false",
+          children: apiRef.current.getLocaleText('filterValueFalse')
+        }))]
+      }))]
+    }), clearButton]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
+  applyValue: _propTypes.default.func.isRequired,
+  clearButton: _propTypes.default.node,
+  focusElementRef: _utils.refType,
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: _propTypes.default.bool,
+  item: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    operator: _propTypes.default.string.isRequired,
+    value: _propTypes.default.any
+  }).isRequired
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/GridFilterInputDate.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFilterInputDate = GridFilterInputDate;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _useTimeout = require("../../../hooks/utils/useTimeout");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "isFilterActive", "clearButton", "tabIndex", "disabled"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function GridFilterInputDate(props) {
+  const {
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      InputProps,
+      clearButton,
+      tabIndex,
+      disabled
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const filterTimeout = (0, _useTimeout.useTimeout)();
+  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+  const [applying, setIsApplying] = React.useState(false);
+  const id = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const onFilterChange = React.useCallback(event => {
+    const value = event.target.value;
+    setFilterValueState(String(value));
+    setIsApplying(true);
+    filterTimeout.start(rootProps.filterDebounceMs, () => {
+      applyValue((0, _extends2.default)({}, item, {
+        value
+      }));
+      setIsApplying(false);
+    });
+  }, [applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
+  React.useEffect(() => {
+    const itemValue = item.value ?? '';
+    setFilterValueState(String(itemValue));
+  }, [item.value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+    fullWidth: true,
+    id: id,
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    value: filterValueState,
+    onChange: onFilterChange,
+    variant: "standard",
+    type: type || 'text',
+    InputLabelProps: {
+      shrink: true
+    },
+    inputRef: focusElementRef,
+    InputProps: (0, _extends2.default)({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, {
+      disabled
+    }, InputProps, {
+      inputProps: (0, _extends2.default)({
+        max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
+        tabIndex
+      }, InputProps?.inputProps)
+    })
+  }, other, rootProps.slotProps?.baseTextField));
+}
+process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
+  applyValue: _propTypes.default.func.isRequired,
+  clearButton: _propTypes.default.node,
+  focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: _propTypes.default.bool,
+  item: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    operator: _propTypes.default.string.isRequired,
+    value: _propTypes.default.any
+  }).isRequired
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFilterInputMultipleSingleSelect = GridFilterInputMultipleSingleSelect;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Autocomplete = _interopRequireWildcard(require("@mui/material/Autocomplete"));
+var _utils = require("@mui/utils");
+var _filterPanelUtils = require("./filterPanelUtils");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant", "getOptionLabel", "getOptionValue"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const filter = (0, _Autocomplete.createFilterOptions)();
+function GridFilterInputMultipleSingleSelect(props) {
+  const {
+      item,
+      applyValue,
+      apiRef,
+      focusElementRef,
+      color,
+      error,
+      helperText,
+      size,
+      variant = 'standard',
+      getOptionLabel: getOptionLabelProp,
+      getOptionValue: getOptionValueProp
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
+  const id = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  let resolvedColumn = null;
+  if (item.field) {
+    const column = apiRef.current.getColumn(item.field);
+    if ((0, _filterPanelUtils.isSingleSelectColDef)(column)) {
+      resolvedColumn = column;
+    }
+  }
+  const getOptionValue = getOptionValueProp || resolvedColumn?.getOptionValue;
+  const getOptionLabel = getOptionLabelProp || resolvedColumn?.getOptionLabel;
+  const isOptionEqualToValue = React.useCallback((option, value) => getOptionValue(option) === getOptionValue(value), [getOptionValue]);
+  const resolvedValueOptions = React.useMemo(() => {
+    if (!resolvedColumn?.valueOptions) {
+      return [];
+    }
+    if (typeof resolvedColumn.valueOptions === 'function') {
+      return resolvedColumn.valueOptions({
+        field: resolvedColumn.field
+      });
+    }
+    return resolvedColumn.valueOptions;
+  }, [resolvedColumn]);
+  const resolvedFormattedValueOptions = React.useMemo(() => {
+    return resolvedValueOptions?.map(getOptionValue);
+  }, [resolvedValueOptions, getOptionValue]);
+
+  // The value is computed from the item.value and used directly
+  // If it was done by a useEffect/useState, the Autocomplete could receive incoherent value and options
+  const filteredValues = React.useMemo(() => {
+    if (!Array.isArray(item.value)) {
+      return [];
+    }
+    if (resolvedValueOptions !== undefined) {
+      const itemValueIndexes = item.value.map(element => {
+        // Gets the index matching between values and valueOptions
+        return resolvedFormattedValueOptions?.findIndex(formattedOption => formattedOption === element);
+      });
+      return itemValueIndexes.filter(index => index >= 0).map(index => resolvedValueOptions[index]);
+    }
+    return item.value;
+  }, [item.value, resolvedValueOptions, resolvedFormattedValueOptions]);
+  React.useEffect(() => {
+    if (!Array.isArray(item.value) || filteredValues.length !== item.value.length) {
+      // Updates the state if the filter value has been cleaned by the component
+      applyValue((0, _extends2.default)({}, item, {
+        value: filteredValues.map(getOptionValue)
+      }));
+    }
+  }, [item, filteredValues, applyValue, getOptionValue]);
+  const handleChange = React.useCallback((event, value) => {
+    applyValue((0, _extends2.default)({}, item, {
+      value: value.map(getOptionValue)
+    }));
+  }, [applyValue, item, getOptionValue]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
+    multiple: true,
+    options: resolvedValueOptions,
+    isOptionEqualToValue: isOptionEqualToValue,
+    filterOptions: filter,
+    id: id,
+    value: filteredValues,
+    onChange: handleChange,
+    getOptionLabel: getOptionLabel,
+    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
+      variant: "outlined",
+      size: "small",
+      label: getOptionLabel(option)
+    }, getTagProps({
+      index
+    })))),
+    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, params, {
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
+        shrink: true
+      }),
+      inputRef: focusElementRef,
+      type: "singleSelect"
+    }, TextFieldProps, rootProps.slotProps?.baseTextField))
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
+  applyValue: _propTypes.default.func.isRequired,
+  focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Used to determine the label displayed for a given value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The text to be displayed.
+   */
+  getOptionLabel: _propTypes.default.func,
+  /**
+   * Used to determine the value used for a value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The value to be used.
+   */
+  getOptionValue: _propTypes.default.func,
+  item: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    operator: _propTypes.default.string.isRequired,
+    value: _propTypes.default.any
+  }).isRequired,
+  type: _propTypes.default.oneOf(['singleSelect'])
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFilterInputMultipleValue = GridFilterInputMultipleValue;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
+var _utils = require("@mui/utils");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function GridFilterInputMultipleValue(props) {
+  const {
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      color,
+      error,
+      helperText,
+      size,
+      variant
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
+  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
+  const id = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  React.useEffect(() => {
+    const itemValue = item.value ?? [];
+    setFilterValueState(itemValue.map(String));
+  }, [item.value]);
+  const handleChange = React.useCallback((event, value) => {
+    setFilterValueState(value.map(String));
+    applyValue((0, _extends2.default)({}, item, {
+      value: [...value]
+    }));
+  }, [applyValue, item]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
+    multiple: true,
+    freeSolo: true,
+    options: [],
+    filterOptions: (options, params) => {
+      const {
+        inputValue
+      } = params;
+      return inputValue == null || inputValue === '' ? [] : [inputValue];
+    },
+    id: id,
+    value: filterValueState,
+    onChange: handleChange,
+    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
+      variant: "outlined",
+      size: "small",
+      label: option
+    }, getTagProps({
+      index
+    })))),
+    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, params, {
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
+        shrink: true
+      }),
+      inputRef: focusElementRef,
+      type: type || 'text'
+    }, TextFieldProps, rootProps.slotProps?.baseTextField))
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
+  applyValue: _propTypes.default.func.isRequired,
+  focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  item: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    operator: _propTypes.default.string.isRequired,
+    value: _propTypes.default.any
+  }).isRequired,
+  type: _propTypes.default.oneOf(['number', 'text'])
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFilterInputSingleSelect = GridFilterInputSingleSelect;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _styles = require("@mui/material/styles");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _filterPanelUtils = require("./filterPanelUtils");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "InputLabelProps"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const renderSingleSelectOptions = ({
+  column: {
+    valueOptions,
+    field
+  },
+  OptionComponent,
+  getOptionLabel,
+  getOptionValue,
+  isSelectNative,
+  baseSelectOptionProps
+}) => {
+  const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
+    field
+  })] : ['', ...(valueOptions || [])];
+  return iterableColumnValues.map(option => {
+    const value = getOptionValue(option);
+    const label = getOptionLabel(option);
+    return /*#__PURE__*/(0, _react.createElement)(OptionComponent, (0, _extends2.default)({}, baseSelectOptionProps, {
+      native: isSelectNative,
+      key: value,
+      value: value
+    }), label);
+  });
+};
+const SingleSelectOperatorContainer = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  width: '100%',
+  [`& button`]: {
+    margin: 'auto 0px 5px 5px'
+  }
+});
+function GridFilterInputSingleSelect(props) {
+  const {
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      getOptionLabel: getOptionLabelProp,
+      getOptionValue: getOptionValueProp,
+      placeholder,
+      tabIndex,
+      label: labelProp,
+      variant = 'standard',
+      clearButton
+    } = props,
+    others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+  const id = (0, _utils.unstable_useId)();
+  const labelId = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? true;
+  let resolvedColumn = null;
+  if (item.field) {
+    const column = apiRef.current.getColumn(item.field);
+    if ((0, _filterPanelUtils.isSingleSelectColDef)(column)) {
+      resolvedColumn = column;
+    }
+  }
+  const getOptionValue = getOptionValueProp || resolvedColumn?.getOptionValue;
+  const getOptionLabel = getOptionLabelProp || resolvedColumn?.getOptionLabel;
+  const currentValueOptions = React.useMemo(() => {
+    if (!resolvedColumn) {
+      return undefined;
+    }
+    return typeof resolvedColumn.valueOptions === 'function' ? resolvedColumn.valueOptions({
+      field: resolvedColumn.field
+    }) : resolvedColumn.valueOptions;
+  }, [resolvedColumn]);
+  const onFilterChange = React.useCallback(event => {
+    let value = event.target.value;
+
+    // NativeSelect casts the value to a string.
+    value = (0, _filterPanelUtils.getValueFromValueOptions)(value, currentValueOptions, getOptionValue);
+    setFilterValueState(String(value));
+    applyValue((0, _extends2.default)({}, item, {
+      value
+    }));
+  }, [currentValueOptions, getOptionValue, applyValue, item]);
+  React.useEffect(() => {
+    let itemValue;
+    if (currentValueOptions !== undefined) {
+      // sanitize if valueOptions are provided
+      itemValue = (0, _filterPanelUtils.getValueFromValueOptions)(item.value, currentValueOptions, getOptionValue);
+      if (itemValue !== item.value) {
+        applyValue((0, _extends2.default)({}, item, {
+          value: itemValue
+        }));
+        return;
+      }
+    } else {
+      itemValue = item.value;
+    }
+    itemValue = itemValue ?? '';
+    setFilterValueState(String(itemValue));
+  }, [item, currentValueOptions, applyValue, getOptionValue]);
+  if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
+    return null;
+  }
+  if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
+    return null;
+  }
+  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SingleSelectOperatorContainer, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseFormControl, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
+        id: labelId,
+        htmlFor: id,
+        shrink: true,
+        variant: variant,
+        children: label
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
+        id: id,
+        label: label,
+        labelId: labelId,
+        value: filterValueState,
+        onChange: onFilterChange,
+        variant: variant,
+        type: type || 'text',
+        inputProps: {
+          tabIndex,
+          ref: focusElementRef,
+          placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+        },
+        native: isSelectNative,
+        notched: variant === 'outlined' ? true : undefined
+      }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
+        children: renderSingleSelectOptions({
+          column: resolvedColumn,
+          OptionComponent: rootProps.slots.baseSelectOption,
+          getOptionLabel,
+          getOptionValue,
+          isSelectNative,
+          baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
+        })
+      }))]
+    }), clearButton]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
+  applyValue: _propTypes.default.func.isRequired,
+  clearButton: _propTypes.default.node,
+  focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Used to determine the label displayed for a given value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The text to be displayed.
+   */
+  getOptionLabel: _propTypes.default.func,
+  /**
+   * Used to determine the value used for a value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The value to be used.
+   */
+  getOptionValue: _propTypes.default.func,
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: _propTypes.default.bool,
+  item: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    operator: _propTypes.default.string.isRequired,
+    value: _propTypes.default.any
+  }).isRequired
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/GridFilterInputValue.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFilterInputValue = GridFilterInputValue;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _useTimeout = require("../../../hooks/utils/useTimeout");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps", "variant"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function GridFilterInputValue(props) {
+  const {
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      tabIndex,
+      disabled,
+      clearButton,
+      InputProps,
+      variant = 'standard'
+    } = props,
+    others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const filterTimeout = (0, _useTimeout.useTimeout)();
+  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+  const [applying, setIsApplying] = React.useState(false);
+  const id = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const onFilterChange = React.useCallback(event => {
+    const {
+      value
+    } = event.target;
+    setFilterValueState(String(value));
+    setIsApplying(true);
+    filterTimeout.start(rootProps.filterDebounceMs, () => {
+      const newItem = (0, _extends2.default)({}, item, {
+        value,
+        fromInput: id
+      });
+      applyValue(newItem);
+      setIsApplying(false);
+    });
+  }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
+  React.useEffect(() => {
+    const itemPlusTag = item;
+    if (itemPlusTag.fromInput !== id || item.value === undefined) {
+      setFilterValueState(String(item.value ?? ''));
+    }
+  }, [id, item]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+    id: id,
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    value: filterValueState,
+    onChange: onFilterChange,
+    variant: variant,
+    type: type || 'text',
+    InputProps: (0, _extends2.default)({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, {
+      disabled
+    }, InputProps, {
+      inputProps: (0, _extends2.default)({
+        tabIndex
+      }, InputProps?.inputProps)
+    }),
+    InputLabelProps: {
+      shrink: true
+    },
+    inputRef: focusElementRef
+  }, others, rootProps.slotProps?.baseTextField));
+}
+process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
+  applyValue: _propTypes.default.func.isRequired,
+  clearButton: _propTypes.default.node,
+  focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: _propTypes.default.bool,
+  item: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    operator: _propTypes.default.string.isRequired,
+    value: _propTypes.default.any
+  }).isRequired
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/GridFilterInputValueProps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/GridFilterPanel.js

@@ -0,0 +1,230 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGridFilter = exports.GridFilterPanel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _gridFilterItem = require("../../../models/gridFilterItem");
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _GridPanelContent = require("../GridPanelContent");
+var _GridPanelFooter = require("../GridPanelFooter");
+var _GridPanelWrapper = require("../GridPanelWrapper");
+var _GridFilterForm = require("./GridFilterForm");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _useGridSelector = require("../../../hooks/utils/useGridSelector");
+var _gridFilterSelector = require("../../../hooks/features/filter/gridFilterSelector");
+var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["logicOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children", "disableAddFilterButton", "disableRemoveAllButton"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getGridFilter = col => ({
+  field: col.field,
+  operator: col.filterOperators[0].value,
+  id: Math.round(Math.random() * 1e5)
+});
+exports.getGridFilter = getGridFilter;
+const GridFilterPanel = exports.GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
+  const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
+  const lastFilterRef = React.useRef(null);
+  const placeholderFilter = React.useRef(null);
+  const {
+      logicOperators = [_gridFilterItem.GridLogicOperator.And, _gridFilterItem.GridLogicOperator.Or],
+      columnsSort,
+      filterFormProps,
+      getColumnForNewFilter,
+      disableAddFilterButton = false,
+      disableRemoveAllButton = false
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const applyFilter = apiRef.current.upsertFilterItem;
+  const applyFilterLogicOperator = React.useCallback(operator => {
+    apiRef.current.setFilterLogicOperator(operator);
+  }, [apiRef]);
+  const getDefaultFilter = React.useCallback(() => {
+    let nextColumnWithOperator;
+    if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
+      // To allow override the column for default (first) filter
+      const nextFieldName = getColumnForNewFilter({
+        currentFilters: filterModel?.items || [],
+        columns: filterableColumns
+      });
+      if (nextFieldName === null) {
+        return null;
+      }
+      nextColumnWithOperator = filterableColumns.find(({
+        field
+      }) => field === nextFieldName);
+    } else {
+      nextColumnWithOperator = filterableColumns.find(colDef => colDef.filterOperators?.length);
+    }
+    if (!nextColumnWithOperator) {
+      return null;
+    }
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel?.items, filterableColumns, getColumnForNewFilter]);
+  const getNewFilter = React.useCallback(() => {
+    if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
+      return getDefaultFilter();
+    }
+    const currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean);
+
+    // If no items are there in filterModel, we have to pass defaultFilter
+    const nextColumnFieldName = getColumnForNewFilter({
+      currentFilters: currentFilters,
+      columns: filterableColumns
+    });
+    if (nextColumnFieldName === null) {
+      return null;
+    }
+    const nextColumnWithOperator = filterableColumns.find(({
+      field
+    }) => field === nextColumnFieldName);
+    if (!nextColumnWithOperator) {
+      return null;
+    }
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
+  const items = React.useMemo(() => {
+    if (filterModel.items.length) {
+      return filterModel.items;
+    }
+    if (!placeholderFilter.current) {
+      placeholderFilter.current = getDefaultFilter();
+    }
+    return placeholderFilter.current ? [placeholderFilter.current] : [];
+  }, [filterModel.items, getDefaultFilter]);
+  const hasMultipleFilters = items.length > 1;
+  const addNewFilter = () => {
+    const newFilter = getNewFilter();
+    if (!newFilter) {
+      return;
+    }
+    apiRef.current.upsertFilterItems([...items, newFilter]);
+  };
+  const deleteFilter = React.useCallback(item => {
+    const shouldCloseFilterPanel = items.length === 1;
+    apiRef.current.deleteFilterItem(item);
+    if (shouldCloseFilterPanel) {
+      apiRef.current.hideFilterPanel();
+    }
+  }, [apiRef, items.length]);
+  const handleRemoveAll = () => {
+    if (items.length === 1 && items[0].value === undefined) {
+      apiRef.current.deleteFilterItem(items[0]);
+      apiRef.current.hideFilterPanel();
+    }
+    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
+      items: []
+    }));
+  };
+  React.useEffect(() => {
+    if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {
+      applyFilterLogicOperator(logicOperators[0]);
+    }
+  }, [logicOperators, applyFilterLogicOperator, filterModel.logicOperator]);
+  React.useEffect(() => {
+    if (items.length > 0) {
+      lastFilterRef.current.focus();
+    }
+  }, [items.length]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({
+    ref: ref
+  }, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelContent.GridPanelContent, {
+      children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
+        item: item,
+        applyFilterChanges: applyFilter,
+        deleteFilter: deleteFilter,
+        hasMultipleFilters: hasMultipleFilters,
+        showMultiFilterOperators: index > 0,
+        multiFilterOperator: filterModel.logicOperator,
+        disableMultiFilterOperator: index !== 1,
+        applyMultiFilterOperatorChanges: applyFilterLogicOperator,
+        focusElementRef: index === items.length - 1 ? lastFilterRef : null,
+        logicOperators: logicOperators,
+        columnsSort: columnsSort
+      }, filterFormProps), item.id == null ? index : item.id))
+    }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelFooter.GridPanelFooter, {
+      children: [!disableAddFilterButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+        onClick: addNewFilter,
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelAddIcon, {})
+      }, rootProps.slotProps?.baseButton, {
+        children: apiRef.current.getLocaleText('filterPanelAddFilter')
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableRemoveAllButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+        onClick: handleRemoveAll,
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelRemoveAllIcon, {})
+      }, rootProps.slotProps?.baseButton, {
+        children: apiRef.current.getLocaleText('filterPanelRemoveAll')
+      })) : null]
+    }) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore - do not document.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
+  columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
+  disableAddFilterButton: _propTypes.default.bool,
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
+  disableRemoveAllButton: _propTypes.default.bool,
+  /**
+   * Props passed to each filter form.
+   */
+  filterFormProps: _propTypes.default.shape({
+    columnInputProps: _propTypes.default.any,
+    columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
+    deleteIconProps: _propTypes.default.any,
+    filterColumns: _propTypes.default.func,
+    logicOperatorInputProps: _propTypes.default.any,
+    operatorInputProps: _propTypes.default.any,
+    valueInputProps: _propTypes.default.any
+  }),
+  /**
+   * Function that returns the next filter item to be picked as default filter.
+   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+   * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter.
+   */
+  getColumnForNewFilter: _propTypes.default.func,
+  /**
+   * Sets the available logic operators.
+   * @default [GridLogicOperator.And, GridLogicOperator.Or]
+   */
+  logicOperators: _propTypes.default.arrayOf(_propTypes.default.oneOf(['and', 'or']).isRequired),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
+ */

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/filterPanelUtils.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelFromValueOption = void 0;
+exports.getValueFromValueOptions = getValueFromValueOptions;
+exports.isSingleSelectColDef = isSingleSelectColDef;
+function isSingleSelectColDef(colDef) {
+  return colDef?.type === 'singleSelect';
+}
+function getValueFromValueOptions(value, valueOptions, getOptionValue) {
+  if (valueOptions === undefined) {
+    return undefined;
+  }
+  const result = valueOptions.find(option => {
+    const optionValue = getOptionValue(option);
+    return String(optionValue) === String(value);
+  });
+  return getOptionValue(result);
+}
+const getLabelFromValueOption = valueOption => {
+  const label = typeof valueOption === 'object' ? valueOption.label : valueOption;
+  return label != null ? String(label) : '';
+};
+exports.getLabelFromValueOption = getLabelFromValueOption;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/filterPanel/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  GridFilterPanel: true
+};
+Object.defineProperty(exports, "GridFilterPanel", {
+  enumerable: true,
+  get: function () {
+    return _GridFilterPanel.GridFilterPanel;
+  }
+});
+var _GridFilterForm = require("./GridFilterForm");
+Object.keys(_GridFilterForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterForm[key];
+    }
+  });
+});
+var _GridFilterInputValue = require("./GridFilterInputValue");
+Object.keys(_GridFilterInputValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputValue[key];
+    }
+  });
+});
+var _GridFilterInputDate = require("./GridFilterInputDate");
+Object.keys(_GridFilterInputDate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputDate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputDate[key];
+    }
+  });
+});
+var _GridFilterInputSingleSelect = require("./GridFilterInputSingleSelect");
+Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputSingleSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputSingleSelect[key];
+    }
+  });
+});
+var _GridFilterInputBoolean = require("./GridFilterInputBoolean");
+Object.keys(_GridFilterInputBoolean).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputBoolean[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputBoolean[key];
+    }
+  });
+});
+var _GridFilterInputValueProps = require("./GridFilterInputValueProps");
+Object.keys(_GridFilterInputValueProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputValueProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputValueProps[key];
+    }
+  });
+});
+var _GridFilterPanel = require("./GridFilterPanel");
+var _GridFilterInputMultipleValue = require("./GridFilterInputMultipleValue");
+Object.keys(_GridFilterInputMultipleValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputMultipleValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputMultipleValue[key];
+    }
+  });
+});
+var _GridFilterInputMultipleSingleSelect = require("./GridFilterInputMultipleSingleSelect");
+Object.keys(_GridFilterInputMultipleSingleSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputMultipleSingleSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputMultipleSingleSelect[key];
+    }
+  });
+});

control-plane-ui/node_modules/@mui/x-data-grid/node/components/panel/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GridColumnsPanel = require("./GridColumnsPanel");
+Object.keys(_GridColumnsPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnsPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnsPanel[key];
+    }
+  });
+});
+var _GridPanel = require("./GridPanel");
+Object.keys(_GridPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPanel[key];
+    }
+  });
+});
+var _GridPanelContent = require("./GridPanelContent");
+Object.keys(_GridPanelContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPanelContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPanelContent[key];
+    }
+  });
+});
+var _GridPanelFooter = require("./GridPanelFooter");
+Object.keys(_GridPanelFooter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPanelFooter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPanelFooter[key];
+    }
+  });
+});
+var _GridPanelHeader = require("./GridPanelHeader");
+Object.keys(_GridPanelHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPanelHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPanelHeader[key];
+    }
+  });
+});
+var _GridPanelWrapper = require("./GridPanelWrapper");
+Object.keys(_GridPanelWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPanelWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPanelWrapper[key];
+    }
+  });
+});
+var _GridPreferencesPanel = require("./GridPreferencesPanel");
+Object.keys(_GridPreferencesPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPreferencesPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPreferencesPanel[key];
+    }
+  });
+});
+var _filterPanel = require("./filterPanel");
+Object.keys(_filterPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _filterPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _filterPanel[key];
+    }
+  });
+});