wip:milestone 0 fixes

control-plane-ui/node_modules/@mui/x-data-grid/components/panel/GridColumnsPanel.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { GridPanelWrapperProps } from './GridPanelWrapper';
+import type { GridColDef } from '../../models/colDef/gridColDef';
+export interface GridColumnsPanelProps extends GridPanelWrapperProps {
+    sort?: 'asc' | 'desc';
+    searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
+    /**
+     * 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?: boolean;
+    /**
+     * If `true`, the `Hide all` button will not be displayed.
+     * @default false
+     */
+    disableHideAllButton?: boolean;
+    /**
+     * If `true`, the `Show all` button will be disabled
+     * @default false
+     */
+    disableShowAllButton?: boolean;
+    /**
+     * 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?: (columns: GridColDef[]) => GridColDef['field'][];
+}
+declare function GridColumnsPanel(props: GridColumnsPanelProps): React.JSX.Element;
+declare namespace GridColumnsPanel {
+    var propTypes: any;
+}
+export { GridColumnsPanel };

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

@@ -0,0 +1,230 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton", "getTogglableColumns"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import IconButton from '@mui/material/IconButton';
+import { switchClasses } from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { styled } from '@mui/material/styles';
+import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { GridPanelContent } from './GridPanelContent';
+import { GridPanelFooter } from './GridPanelFooter';
+import { GridPanelHeader } from './GridPanelHeader';
+import { GridPanelWrapper } from './GridPanelWrapper';
+import { GRID_EXPERIMENTAL_ENABLED } from '../../constants/envConstants';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnsPanel'],
+    columnsPanelRow: ['columnsPanelRow']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridColumnsPanelRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsPanel',
+  overridesResolver: (props, styles) => styles.columnsPanel
+})({
+  padding: '8px 0px 8px 8px'
+});
+const GridColumnsPanelRowRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsPanelRow',
+  overridesResolver: (props, styles) => styles.columnsPanelRow
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '1px 8px 1px 7px',
+  [`& .${switchClasses.root}`]: {
+    marginRight: theme.spacing(0.5)
+  }
+}));
+const GridIconButtonRoot = styled(IconButton)({
+  justifyContent: 'flex-end'
+});
+const collator = new Intl.Collator();
+const defaultSearchPredicate = (column, searchValue) => {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};
+function GridColumnsPanel(props) {
+  var _rootProps$slotProps, _rootProps$slotProps3, _rootProps$slotProps4;
+  const apiRef = useGridApiContext();
+  const searchInputRef = React.useRef(null);
+  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  const rootProps = useGridRootProps();
+  const [searchValue, setSearchValue] = React.useState('');
+  const classes = useUtilityClasses(rootProps);
+  const {
+      sort,
+      searchPredicate = defaultSearchPredicate,
+      autoFocusSearchField = true,
+      disableHideAllButton = false,
+      disableShowAllButton = false,
+      getTogglableColumns
+    } = props,
+    other = _objectWithoutPropertiesLoose(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 = gridColumnVisibilityModelSelector(apiRef);
+    const newModel = _extends({}, 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__*/_jsxs(GridPanelWrapper, _extends({}, other, {
+    children: [/*#__PURE__*/_jsx(GridPanelHeader, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+        label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
+        placeholder: apiRef.current.getLocaleText('columnsPanelTextFieldPlaceholder'),
+        inputRef: searchInputRef,
+        value: searchValue,
+        onChange: handleSearchValueChange,
+        variant: "standard",
+        fullWidth: true
+      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField))
+    }), /*#__PURE__*/_jsx(GridPanelContent, {
+      children: /*#__PURE__*/_jsx(GridColumnsPanelRoot, {
+        className: classes.root,
+        ownerState: rootProps,
+        children: currentColumns.map(column => {
+          var _rootProps$slotProps2;
+          return /*#__PURE__*/_jsxs(GridColumnsPanelRowRoot, {
+            className: classes.columnsPanelRow,
+            ownerState: rootProps,
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+              control: /*#__PURE__*/_jsx(rootProps.slots.baseSwitch, _extends({
+                disabled: column.hideable === false,
+                checked: columnVisibilityModel[column.field] !== false,
+                onClick: toggleColumn,
+                name: column.field,
+                size: "small",
+                inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
+              }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSwitch)),
+              label: column.headerName || column.field
+            }), !rootProps.disableColumnReorder && GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/_jsx(GridIconButtonRoot, {
+              draggable: true,
+              "aria-label": apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
+              title: apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
+              size: "small",
+              disabled: true,
+              children: /*#__PURE__*/_jsx(rootProps.slots.columnReorderIcon, {})
+            })]
+          }, column.field);
+        })
+      })
+    }), disableShowAllButton && disableHideAllButton ? null : /*#__PURE__*/_jsxs(GridPanelFooter, {
+      children: [!disableHideAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        onClick: () => toggleAllColumns(false)
+      }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseButton, {
+        disabled: disableHideAllButton,
+        children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
+      })) : /*#__PURE__*/_jsx("span", {}), !disableShowAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        onClick: () => toggleAllColumns(true)
+      }, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.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.bool,
+  /**
+   * If `true`, the `Hide all` button will not be displayed.
+   * @default false
+   */
+  disableHideAllButton: PropTypes.bool,
+  /**
+   * If `true`, the `Show all` button will be disabled
+   * @default false
+   */
+  disableShowAllButton: PropTypes.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.func,
+  searchPredicate: PropTypes.func,
+  slotProps: PropTypes.object,
+  sort: PropTypes.oneOf(['asc', 'desc'])
+} : void 0;
+export { GridColumnsPanel };

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

@@ -0,0 +1,125 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className", "classes"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { isEscapeKey } from '../../utils/keyboardUtils';
+import { gridClasses } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
+const GridPanelRoot = styled(Popper, {
+  name: 'MuiDataGrid',
+  slot: 'Panel',
+  overridesResolver: (props, styles) => styles.panel
+})(({
+  theme
+}) => ({
+  zIndex: theme.zIndex.modal
+}));
+const GridPaperRoot = styled(Paper, {
+  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 = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const classes = gridPanelClasses;
+  const [isPlaced, setIsPlaced] = React.useState(false);
+  const handleClickAway = React.useCallback(() => {
+    apiRef.current.hidePreferences();
+  }, [apiRef]);
+  const handleKeyDown = React.useCallback(event => {
+    if (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(() => {
+    var _apiRef$current$rootE;
+    const columnHeadersElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE.querySelector(`.${gridClasses.columnHeaders}`);
+    if (columnHeadersElement) {
+      setAnchorEl(columnHeadersElement);
+    }
+  }, [apiRef]);
+  if (!anchorEl) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridPanelRoot, _extends({
+    ref: ref,
+    placement: "bottom-start",
+    className: clsx(className, classes.panel),
+    ownerState: rootProps,
+    anchorEl: anchorEl,
+    modifiers: modifiers
+  }, other, {
+    children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      mouseEvent: "onMouseUp",
+      onClickAway: handleClickAway,
+      children: /*#__PURE__*/_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.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool.isRequired,
+  ownerState: PropTypes.object
+} : void 0;
+export { GridPanel };

control-plane-ui/node_modules/@mui/x-data-grid/components/panel/GridPanelContent.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+declare function GridPanelContent(props: React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+}): React.JSX.Element;
+declare namespace GridPanelContent {
+    var propTypes: any;
+}
+export { GridPanelContent };

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

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridPanelContentRoot = 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 = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridPanelContentRoot, _extends({
+    className: clsx(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.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridPanelContent };

control-plane-ui/node_modules/@mui/x-data-grid/components/panel/GridPanelFooter.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+declare function GridPanelFooter(props: React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+}): React.JSX.Element;
+declare namespace GridPanelFooter {
+    var propTypes: any;
+}
+export { GridPanelFooter };

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

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelFooter']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridPanelFooterRoot = 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 = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridPanelFooterRoot, _extends({
+    className: clsx(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.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridPanelFooter };

control-plane-ui/node_modules/@mui/x-data-grid/components/panel/GridPanelHeader.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+declare function GridPanelHeader(props: React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+}): React.JSX.Element;
+declare namespace GridPanelHeader {
+    var propTypes: any;
+}
+export { GridPanelHeader };

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

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelHeader']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridPanelHeaderRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelHeader',
+  overridesResolver: (props, styles) => styles.panelHeader
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(1)
+}));
+function GridPanelHeader(props) {
+  const {
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridPanelHeaderRoot, _extends({
+    className: clsx(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.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridPanelHeader };

control-plane-ui/node_modules/@mui/x-data-grid/components/panel/GridPanelWrapper.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { TrapFocusProps } from '@mui/material/Unstable_TrapFocus';
+import { Theme } from '@mui/material/styles';
+import { MUIStyledCommonProps } from '@mui/system';
+export interface GridPanelWrapperProps extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>, MUIStyledCommonProps<Theme> {
+    slotProps?: {
+        TrapFocus?: TrapFocusProps;
+    };
+}
+declare const GridPanelWrapper: React.ForwardRefExoticComponent<GridPanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export { GridPanelWrapper };

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

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "slotProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import FocusTrap from '@mui/material/Unstable_TrapFocus';
+import { styled } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelWrapper']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridPanelWrapperRoot = 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 = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
+  const {
+      className,
+      slotProps = {}
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(FocusTrap, _extends({
+    open: true,
+    disableEnforceFocus: true,
+    isEnabled: isEnabled
+  }, slotProps.TrapFocus, {
+    children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
+      ref: ref,
+      tabIndex: -1,
+      className: clsx(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.object
+} : void 0;
+export { GridPanelWrapper };

control-plane-ui/node_modules/@mui/x-data-grid/components/panel/GridPreferencesPanel.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const GridPreferencesPanel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
+import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
+  var _preferencePanelState, _rootProps$slotProps, _rootProps$slotProps2;
+  const apiRef = useGridApiContext();
+  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  const rootProps = useGridRootProps();
+  const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : GridPreferencePanelsValue.filters);
+  return /*#__PURE__*/_jsx(rootProps.slots.panel, _extends({
+    ref: ref,
+    as: rootProps.slots.basePopper,
+    open: columns.length > 0 && preferencePanelState.open,
+    id: preferencePanelState.panelId,
+    "aria-labelledby": preferencePanelState.labelId
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.panel, props, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.basePopper, {
+    children: panelContent
+  }));
+});

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

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { GridFilterItem, GridLogicOperator } from '../../../models/gridFilterItem';
+import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
+export interface FilterColumnsArgs {
+    field: GridColDef['field'];
+    columns: GridStateColDef[];
+    currentFilters: GridFilterItem[];
+}
+export interface GridFilterFormProps {
+    /**
+     * The [[GridFilterItem]] representing this form.
+     */
+    item: GridFilterItem;
+    /**
+     * If `true`, the logic operator field is rendered.
+     * The field will be invisible if `showMultiFilterOperators` is also `true`.
+     */
+    hasMultipleFilters: boolean;
+    /**
+     * If `true`, the logic operator field is visible.
+     */
+    showMultiFilterOperators?: boolean;
+    /**
+     * The current logic operator applied.
+     */
+    multiFilterOperator?: GridLogicOperator;
+    /**
+     * If `true`, disables the logic operator field but still renders it.
+     */
+    disableMultiFilterOperator?: boolean;
+    /**
+     * A ref allowing to set imperative focus.
+     * It can be passed to the el
+     */
+    focusElementRef?: React.Ref<any>;
+    /**
+     * Callback called when the operator, column field or value is changed.
+     * @param {GridFilterItem} item The updated [[GridFilterItem]].
+     */
+    applyFilterChanges: (item: GridFilterItem) => void;
+    /**
+     * Callback called when the logic operator is changed.
+     * @param {GridLogicOperator} operator The new logic operator.
+     */
+    applyMultiFilterOperatorChanges: (operator: GridLogicOperator) => void;
+    /**
+     * Callback called when the delete button is clicked.
+     * @param {GridFilterItem} item The deleted [[GridFilterItem]].
+     */
+    deleteFilter: (item: GridFilterItem) => void;
+    /**
+     * 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?: (args: FilterColumnsArgs) => GridColDef['field'][];
+    /**
+     * Sets the available logic operators.
+     * @default [GridLogicOperator.And, GridLogicOperator.Or]
+     */
+    logicOperators?: GridLogicOperator[];
+    /**
+     * Changes how the options in the columns selector should be ordered.
+     * If not specified, the order is derived from the `columns` prop.
+     */
+    columnsSort?: 'asc' | 'desc';
+    /**
+     * Props passed to the delete icon.
+     * @default {}
+     */
+    deleteIconProps?: any;
+    /**
+     * Props passed to the logic operator input component.
+     * @default {}
+     */
+    logicOperatorInputProps?: any;
+    /**
+     * Props passed to the operator input component.
+     * @default {}
+     */
+    operatorInputProps?: any;
+    /**
+     * Props passed to the column input component.
+     * @default {}
+     */
+    columnInputProps?: any;
+    /**
+     * Props passed to the value input component.
+     * @default {}
+     */
+    valueInputProps?: any;
+    /**
+     * @ignore - do not document.
+     */
+    children?: React.ReactNode;
+}
+declare const GridFilterForm: React.ForwardRefExoticComponent<GridFilterFormProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterForm API](https://mui.com/x/api/data-grid/grid-filter-form/)
+ */
+export { GridFilterForm };

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

@@ -0,0 +1,442 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+  _excluded2 = ["InputComponentProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
+import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
+import { useGridSelector } from '../../../hooks/utils/useGridSelector';
+import { GridLogicOperator } from '../../../models/gridFilterItem';
+import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['filterForm'],
+    deleteIcon: ['filterFormDeleteIcon'],
+    logicOperatorInput: ['filterFormLogicOperatorInput'],
+    columnInput: ['filterFormColumnInput'],
+    operatorInput: ['filterFormOperatorInput'],
+    valueInput: ['filterFormValueInput']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridFilterFormRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterForm',
+  overridesResolver: (props, styles) => styles.filterForm
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  padding: theme.spacing(1)
+}));
+const FilterFormDeleteIcon = 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 = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormLogicOperatorInput',
+  overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
+})({
+  minWidth: 55,
+  marginRight: 5,
+  justifyContent: 'end'
+});
+const FilterFormColumnInput = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormColumnInput',
+  overridesResolver: (_, styles) => styles.filterFormColumnInput
+})({
+  width: 150
+});
+const FilterFormOperatorInput = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormOperatorInput',
+  overridesResolver: (_, styles) => styles.filterFormOperatorInput
+})({
+  width: 120
+});
+const FilterFormValueInput = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormValueInput',
+  overridesResolver: (_, styles) => styles.filterFormValueInput
+})({
+  width: 190
+});
+const getLogicOperatorLocaleKey = logicOperator => {
+  switch (logicOperator) {
+    case GridLogicOperator.And:
+      return 'filterPanelOperatorAnd';
+    case 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 = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2, _baseSelectProps$nati, _rootProps$slotProps3, _rootProps$slotProps4, _rootProps$slotProps5, _rootProps$slotProps6, _rootProps$slotProps7, _rootProps$slotProps8, _currentColumn$filter2;
+  const {
+      item,
+      hasMultipleFilters,
+      deleteFilter,
+      applyFilterChanges,
+      multiFilterOperator,
+      showMultiFilterOperators,
+      disableMultiFilterOperator,
+      applyMultiFilterOperatorChanges,
+      focusElementRef,
+      logicOperators = [GridLogicOperator.And, GridLogicOperator.Or],
+      columnsSort,
+      filterColumns,
+      deleteIconProps = {},
+      logicOperatorInputProps = {},
+      operatorInputProps = {},
+      columnInputProps = {},
+      valueInputProps = {}
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  const columnSelectId = useId();
+  const columnSelectLabelId = useId();
+  const operatorSelectId = useId();
+  const operatorSelectLabelId = useId();
+  const rootProps = 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 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseFormControl) || {};
+  const baseSelectProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {};
+  const isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  const baseInputLabelProps = ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel) || {};
+  const baseSelectOptionProps = ((_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption) || {};
+  const {
+      InputComponentProps
+    } = valueInputProps,
+    valueInputPropsOther = _objectWithoutPropertiesLoose(valueInputProps, _excluded2);
+  const filteredColumns = React.useMemo(() => {
+    if (filterColumns === undefined || typeof filterColumns !== 'function') {
+      return filterableColumns;
+    }
+    const filteredFields = filterColumns({
+      field: item.field,
+      columns: filterableColumns,
+      currentFilters: (filterModel == null ? void 0 : filterModel.items) || []
+    });
+    return filterableColumns.filter(column => filteredFields.includes(column.field));
+  }, [filterColumns, filterModel == null ? void 0 : 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(() => {
+    var _currentColumn$filter;
+    if (!item.operator || !currentColumn) {
+      return null;
+    }
+    return (_currentColumn$filter = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter.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 == null ? void 0 : currentOperator.InputComponent) || column.type !== currentColumn.type;
+    applyFilterChanges(_extends({}, 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 == null ? void 0 : currentColumn.filterOperators.find(op => op.value === operator);
+    const eraseItemValue = !(newOperator != null && newOperator.InputComponent) || (newOperator == null ? void 0 : newOperator.InputComponent) !== (currentOperator == null ? void 0 : currentOperator.InputComponent);
+    applyFilterChanges(_extends({}, item, {
+      operator,
+      value: eraseItemValue ? undefined : item.value
+    }));
+  }, [applyFilterChanges, item, currentColumn, currentOperator]);
+  const changeLogicOperator = React.useCallback(event => {
+    const logicOperator = event.target.value === GridLogicOperator.And.toString() ? GridLogicOperator.And : 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(_extends({}, item, {
+          value: undefined
+        }));
+      }
+    } else {
+      deleteFilter(item);
+    }
+  };
+  React.useImperativeHandle(focusElementRef, () => ({
+    focus: () => {
+      if (currentOperator != null && currentOperator.InputComponent) {
+        var _valueRef$current;
+        valueRef == null || (_valueRef$current = valueRef.current) == null || _valueRef$current.focus();
+      } else {
+        filterSelectorRef.current.focus();
+      }
+    }
+  }), [currentOperator]);
+  return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
+    ref: ref,
+    className: classes.root,
+    "data-id": item.id,
+    ownerState: rootProps
+  }, other, {
+    children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
+      variant: "standard",
+      as: rootProps.slots.baseFormControl
+    }, baseFormControlProps, deleteIconProps, {
+      className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
+      ownerState: rootProps,
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
+        title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
+        onClick: handleDeleteFilter,
+        size: "small"
+      }, (_rootProps$slotProps5 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps5.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.filterPanelDeleteIcon, {
+          fontSize: "small"
+        })
+      }))
+    })), /*#__PURE__*/_jsx(FilterFormLogicOperatorInput, _extends({
+      variant: "standard",
+      as: rootProps.slots.baseFormControl
+    }, baseFormControlProps, logicOperatorInputProps, {
+      sx: _extends({
+        display: hasLogicOperatorColumn ? 'flex' : 'none',
+        visibility: showMultiFilterOperators ? 'visible' : 'hidden'
+      }, baseFormControlProps.sx || {}, logicOperatorInputProps.sx || {}),
+      className: clsx(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
+      ownerState: rootProps,
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+        inputProps: {
+          'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
+        },
+        value: multiFilterOperator,
+        onChange: changeLogicOperator,
+        disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
+        native: isBaseSelectNative
+      }, (_rootProps$slotProps6 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps6.baseSelect, {
+        children: logicOperators.map(logicOperator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: logicOperator.toString(),
+          value: logicOperator.toString()
+        }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
+      }))
+    })), /*#__PURE__*/_jsxs(FilterFormColumnInput, _extends({
+      variant: "standard",
+      as: rootProps.slots.baseFormControl
+    }, baseFormControlProps, columnInputProps, {
+      className: clsx(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
+      ownerState: rootProps,
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
+        htmlFor: columnSelectId,
+        id: columnSelectLabelId,
+        children: apiRef.current.getLocaleText('filterPanelColumns')
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+        labelId: columnSelectLabelId,
+        id: columnSelectId,
+        label: apiRef.current.getLocaleText('filterPanelColumns'),
+        value: item.field || '',
+        onChange: changeColumn,
+        native: isBaseSelectNative
+      }, (_rootProps$slotProps7 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps7.baseSelect, {
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: col.field,
+          value: col.field
+        }), getColumnLabel(col)))
+      }))]
+    })), /*#__PURE__*/_jsxs(FilterFormOperatorInput, _extends({
+      variant: "standard",
+      as: rootProps.slots.baseFormControl
+    }, baseFormControlProps, operatorInputProps, {
+      className: clsx(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
+      ownerState: rootProps,
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
+        htmlFor: operatorSelectId,
+        id: operatorSelectLabelId,
+        children: apiRef.current.getLocaleText('filterPanelOperator')
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+        labelId: operatorSelectLabelId,
+        label: apiRef.current.getLocaleText('filterPanelOperator'),
+        id: operatorSelectId,
+        value: item.operator,
+        onChange: changeOperator,
+        native: isBaseSelectNative,
+        inputRef: filterSelectorRef
+      }, (_rootProps$slotProps8 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps8.baseSelect, {
+        children: currentColumn == null || (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: operator.value,
+          value: operator.value
+        }), operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)))
+      }))]
+    })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
+      variant: "standard",
+      as: rootProps.slots.baseFormControl
+    }, baseFormControlProps, valueInputPropsOther, {
+      className: clsx(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
+      ownerState: rootProps,
+      children: currentOperator != null && currentOperator.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
+        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.func.isRequired,
+  /**
+   * Callback called when the logic operator is changed.
+   * @param {GridLogicOperator} operator The new logic operator.
+   */
+  applyMultiFilterOperatorChanges: PropTypes.func.isRequired,
+  /**
+   * @ignore - do not document.
+   */
+  children: PropTypes.node,
+  /**
+   * Props passed to the column input component.
+   * @default {}
+   */
+  columnInputProps: PropTypes.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.oneOf(['asc', 'desc']),
+  /**
+   * Callback called when the delete button is clicked.
+   * @param {GridFilterItem} item The deleted [[GridFilterItem]].
+   */
+  deleteFilter: PropTypes.func.isRequired,
+  /**
+   * Props passed to the delete icon.
+   * @default {}
+   */
+  deleteIconProps: PropTypes.any,
+  /**
+   * If `true`, disables the logic operator field but still renders it.
+   */
+  disableMultiFilterOperator: PropTypes.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.func,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the el
+   */
+  focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the logic operator field is rendered.
+   * The field will be invisible if `showMultiFilterOperators` is also `true`.
+   */
+  hasMultipleFilters: PropTypes.bool.isRequired,
+  /**
+   * The [[GridFilterItem]] representing this form.
+   */
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired,
+  /**
+   * Props passed to the logic operator input component.
+   * @default {}
+   */
+  logicOperatorInputProps: PropTypes.any,
+  /**
+   * Sets the available logic operators.
+   * @default [GridLogicOperator.And, GridLogicOperator.Or]
+   */
+  logicOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+  /**
+   * The current logic operator applied.
+   */
+  multiFilterOperator: PropTypes.oneOf(['and', 'or']),
+  /**
+   * Props passed to the operator input component.
+   * @default {}
+   */
+  operatorInputProps: PropTypes.any,
+  /**
+   * If `true`, the logic operator field is visible.
+   */
+  showMultiFilterOperators: PropTypes.bool,
+  /**
+   * Props passed to the value input component.
+   * @default {}
+   */
+  valueInputProps: PropTypes.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/)
+ */
+export { GridFilterForm };

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+export type GridFilterInputBooleanProps = GridFilterInputValueProps & TextFieldProps & {
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (e.g. `isEmpty`)
+     */
+    isFilterActive?: boolean;
+};
+declare function GridFilterInputBoolean(props: GridFilterInputBooleanProps): React.JSX.Element;
+declare namespace GridFilterInputBoolean {
+    var propTypes: any;
+}
+export { GridFilterInputBoolean };

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

@@ -0,0 +1,113 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { refType, unstable_useId as useId } from '@mui/utils';
+import { styled } from '@mui/material/styles';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const BooleanOperatorContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  [`& button`]: {
+    margin: 'auto 0px 5px 5px'
+  }
+});
+function GridFilterInputBoolean(props) {
+  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
+  const {
+      item,
+      applyValue,
+      apiRef,
+      focusElementRef,
+      clearButton,
+      tabIndex,
+      label: labelProp,
+      variant = 'standard'
+    } = props,
+    others = _objectWithoutPropertiesLoose(props, _excluded);
+  const [filterValueState, setFilterValueState] = React.useState(item.value || '');
+  const rootProps = useGridRootProps();
+  const labelId = useId();
+  const selectId = useId();
+  const baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  const baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
+  const onFilterChange = React.useCallback(event => {
+    const value = event.target.value;
+    setFilterValueState(value);
+    applyValue(_extends({}, item, {
+      value
+    }));
+  }, [applyValue, item]);
+  React.useEffect(() => {
+    setFilterValueState(item.value || '');
+  }, [item.value]);
+  const label = labelProp != null ? labelProp : apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(BooleanOperatorContainer, {
+    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+      fullWidth: true,
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel, {
+        id: labelId,
+        shrink: true,
+        variant: variant,
+        children: label
+      })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
+        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__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isSelectNative,
+          value: "",
+          children: apiRef.current.getLocaleText('filterValueAny')
+        })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isSelectNative,
+          value: "true",
+          children: apiRef.current.getLocaleText('filterValueTrue')
+        })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, 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.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
+  applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
+  focusElementRef: 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.bool,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired
+} : void 0;
+export { GridFilterInputBoolean };

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+export type GridFilterInputDateProps = GridFilterInputValueProps & TextFieldProps & {
+    type?: 'date' | 'datetime-local';
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (e.g. `isEmpty`)
+     */
+    isFilterActive?: boolean;
+};
+declare function GridFilterInputDate(props: GridFilterInputDateProps): React.JSX.Element;
+declare namespace GridFilterInputDate {
+    var propTypes: any;
+}
+export { GridFilterInputDate };

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

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "isFilterActive", "clearButton", "tabIndex", "disabled"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_useId as useId } from '@mui/utils';
+import { useTimeout } from '../../../hooks/utils/useTimeout';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+function GridFilterInputDate(props) {
+  var _item$value, _rootProps$slotProps;
+  const {
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      InputProps,
+      clearButton,
+      tabIndex,
+      disabled
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const filterTimeout = useTimeout();
+  const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
+  const [applying, setIsApplying] = React.useState(false);
+  const id = useId();
+  const rootProps = useGridRootProps();
+  const onFilterChange = React.useCallback(event => {
+    const value = event.target.value;
+    setFilterValueState(String(value));
+    setIsApplying(true);
+    filterTimeout.start(rootProps.filterDebounceMs, () => {
+      applyValue(_extends({}, item, {
+        value
+      }));
+      setIsApplying(false);
+    });
+  }, [applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
+  React.useEffect(() => {
+    var _item$value2;
+    const itemValue = (_item$value2 = item.value) != null ? _item$value2 : '';
+    setFilterValueState(String(itemValue));
+  }, [item.value]);
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+    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: _extends({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, {
+      disabled
+    }, InputProps, {
+      inputProps: _extends({
+        max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
+        tabIndex
+      }, InputProps == null ? void 0 : InputProps.inputProps)
+    })
+  }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _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.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
+  applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
+  focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.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.bool,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired
+} : void 0;
+export { GridFilterInputDate };

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+import type { GridSingleSelectColDef, ValueOptions } from '../../../models/colDef/gridColDef';
+export interface GridFilterInputMultipleSingleSelectProps extends Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options' | 'renderInput' | 'onChange' | 'value' | 'id' | 'filterOptions' | 'isOptionEqualToValue' | 'multiple' | 'color' | 'getOptionLabel'>, Pick<GridSingleSelectColDef, 'getOptionLabel' | 'getOptionValue'>, GridFilterInputValueProps {
+    type?: 'singleSelect';
+}
+declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element;
+declare namespace GridFilterInputMultipleSingleSelect {
+    var propTypes: any;
+}
+export { GridFilterInputMultipleSingleSelect };

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

@@ -0,0 +1,151 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant", "getOptionLabel", "getOptionValue"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+import { unstable_useId as useId } from '@mui/utils';
+import { isSingleSelectColDef } from './filterPanelUtils';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const filter = createFilterOptions();
+function GridFilterInputMultipleSingleSelect(props) {
+  var _resolvedColumn, _resolvedColumn2;
+  const {
+      item,
+      applyValue,
+      apiRef,
+      focusElementRef,
+      color,
+      error,
+      helperText,
+      size,
+      variant = 'standard',
+      getOptionLabel: getOptionLabelProp,
+      getOptionValue: getOptionValueProp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
+  const id = useId();
+  const rootProps = useGridRootProps();
+  let resolvedColumn = null;
+  if (item.field) {
+    const column = apiRef.current.getColumn(item.field);
+    if (isSingleSelectColDef(column)) {
+      resolvedColumn = column;
+    }
+  }
+  const getOptionValue = getOptionValueProp || ((_resolvedColumn = resolvedColumn) == null ? void 0 : _resolvedColumn.getOptionValue);
+  const getOptionLabel = getOptionLabelProp || ((_resolvedColumn2 = resolvedColumn) == null ? void 0 : _resolvedColumn2.getOptionLabel);
+  const isOptionEqualToValue = React.useCallback((option, value) => getOptionValue(option) === getOptionValue(value), [getOptionValue]);
+  const resolvedValueOptions = React.useMemo(() => {
+    var _resolvedColumn3;
+    if (!((_resolvedColumn3 = resolvedColumn) != null && _resolvedColumn3.valueOptions)) {
+      return [];
+    }
+    if (typeof resolvedColumn.valueOptions === 'function') {
+      return resolvedColumn.valueOptions({
+        field: resolvedColumn.field
+      });
+    }
+    return resolvedColumn.valueOptions;
+  }, [resolvedColumn]);
+  const resolvedFormattedValueOptions = React.useMemo(() => {
+    return resolvedValueOptions == null ? void 0 : 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 == null ? void 0 : 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(_extends({}, item, {
+        value: filteredValues.map(getOptionValue)
+      }));
+    }
+  }, [item, filteredValues, applyValue, getOptionValue]);
+  const handleChange = React.useCallback((event, value) => {
+    applyValue(_extends({}, item, {
+      value: value.map(getOptionValue)
+    }));
+  }, [applyValue, item, getOptionValue]);
+  return /*#__PURE__*/_jsx(Autocomplete, _extends({
+    multiple: true,
+    options: resolvedValueOptions,
+    isOptionEqualToValue: isOptionEqualToValue,
+    filterOptions: filter,
+    id: id,
+    value: filteredValues,
+    onChange: handleChange,
+    getOptionLabel: getOptionLabel,
+    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
+      variant: "outlined",
+      size: "small",
+      label: getOptionLabel(option)
+    }, getTagProps({
+      index
+    })))),
+    renderInput: params => {
+      var _rootProps$slotProps;
+      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
+        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+        InputLabelProps: _extends({}, params.InputLabelProps, {
+          shrink: true
+        }),
+        inputRef: focusElementRef,
+        type: "singleSelect"
+      }, TextFieldProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _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.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
+  applyValue: PropTypes.func.isRequired,
+  focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.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.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.func,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired,
+  type: PropTypes.oneOf(['singleSelect'])
+} : void 0;
+export { GridFilterInputMultipleSingleSelect };

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+export type GridFilterInputMultipleValueProps = {
+    type?: 'text' | 'number';
+} & GridFilterInputValueProps & Omit<AutocompleteProps<string, true, false, true>, 'options' | 'renderInput'>;
+declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): React.JSX.Element;
+declare namespace GridFilterInputMultipleValue {
+    var propTypes: any;
+}
+export { GridFilterInputMultipleValue };

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

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Autocomplete from '@mui/material/Autocomplete';
+import { unstable_useId as useId } from '@mui/utils';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+function GridFilterInputMultipleValue(props) {
+  const {
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      color,
+      error,
+      helperText,
+      size,
+      variant
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
+  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
+  const id = useId();
+  const rootProps = useGridRootProps();
+  React.useEffect(() => {
+    var _item$value;
+    const itemValue = (_item$value = item.value) != null ? _item$value : [];
+    setFilterValueState(itemValue.map(String));
+  }, [item.value]);
+  const handleChange = React.useCallback((event, value) => {
+    setFilterValueState(value.map(String));
+    applyValue(_extends({}, item, {
+      value: [...value]
+    }));
+  }, [applyValue, item]);
+  return /*#__PURE__*/_jsx(Autocomplete, _extends({
+    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__*/_jsx(rootProps.slots.baseChip, _extends({
+      variant: "outlined",
+      size: "small",
+      label: option
+    }, getTagProps({
+      index
+    })))),
+    renderInput: params => {
+      var _rootProps$slotProps;
+      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
+        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+        InputLabelProps: _extends({}, params.InputLabelProps, {
+          shrink: true
+        }),
+        inputRef: focusElementRef,
+        type: type || 'text'
+      }, TextFieldProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _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.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
+  applyValue: PropTypes.func.isRequired,
+  focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired,
+  type: PropTypes.oneOf(['number', 'text'])
+} : void 0;
+export { GridFilterInputMultipleValue };

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+import { GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
+export type GridFilterInputSingleSelectProps = GridFilterInputValueProps & TextFieldProps & Pick<GridSingleSelectColDef, 'getOptionLabel' | 'getOptionValue'> & {
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (e.g. `isEmpty`)
+     */
+    isFilterActive?: boolean;
+    type?: 'singleSelect';
+};
+declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): React.JSX.Element | null;
+declare namespace GridFilterInputSingleSelect {
+    var propTypes: any;
+}
+export { GridFilterInputSingleSelect };

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

@@ -0,0 +1,190 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "InputLabelProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_useId as useId } from '@mui/utils';
+import { styled } from '@mui/material/styles';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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__*/_createElement(OptionComponent, _extends({}, baseSelectOptionProps, {
+      native: isSelectNative,
+      key: value,
+      value: value
+    }), label);
+  });
+};
+const SingleSelectOperatorContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  width: '100%',
+  [`& button`]: {
+    margin: 'auto 0px 5px 5px'
+  }
+});
+function GridFilterInputSingleSelect(props) {
+  var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
+  const {
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      getOptionLabel: getOptionLabelProp,
+      getOptionValue: getOptionValueProp,
+      placeholder,
+      tabIndex,
+      label: labelProp,
+      variant = 'standard',
+      clearButton
+    } = props,
+    others = _objectWithoutPropertiesLoose(props, _excluded);
+  const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
+  const id = useId();
+  const labelId = useId();
+  const rootProps = useGridRootProps();
+  const isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null || (_rootProps$slotProps = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps.native) != null ? _rootProps$slotProps$ : true;
+  let resolvedColumn = null;
+  if (item.field) {
+    const column = apiRef.current.getColumn(item.field);
+    if (isSingleSelectColDef(column)) {
+      resolvedColumn = column;
+    }
+  }
+  const getOptionValue = getOptionValueProp || ((_resolvedColumn = resolvedColumn) == null ? void 0 : _resolvedColumn.getOptionValue);
+  const getOptionLabel = getOptionLabelProp || ((_resolvedColumn2 = resolvedColumn) == null ? void 0 : _resolvedColumn2.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 = getValueFromValueOptions(value, currentValueOptions, getOptionValue);
+    setFilterValueState(String(value));
+    applyValue(_extends({}, item, {
+      value
+    }));
+  }, [currentValueOptions, getOptionValue, applyValue, item]);
+  React.useEffect(() => {
+    var _itemValue;
+    let itemValue;
+    if (currentValueOptions !== undefined) {
+      // sanitize if valueOptions are provided
+      itemValue = getValueFromValueOptions(item.value, currentValueOptions, getOptionValue);
+      if (itemValue !== item.value) {
+        applyValue(_extends({}, item, {
+          value: itemValue
+        }));
+        return;
+      }
+    } else {
+      itemValue = item.value;
+    }
+    itemValue = (_itemValue = itemValue) != null ? _itemValue : '';
+    setFilterValueState(String(itemValue));
+  }, [item, currentValueOptions, applyValue, getOptionValue]);
+  if (!isSingleSelectColDef(resolvedColumn)) {
+    return null;
+  }
+  if (!isSingleSelectColDef(resolvedColumn)) {
+    return null;
+  }
+  const label = labelProp != null ? labelProp : apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(SingleSelectOperatorContainer, {
+    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseInputLabel, {
+        id: labelId,
+        htmlFor: id,
+        shrink: true,
+        variant: variant,
+        children: label
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+        id: id,
+        label: label,
+        labelId: labelId,
+        value: filterValueState,
+        onChange: onFilterChange,
+        variant: variant,
+        type: type || 'text',
+        inputProps: {
+          tabIndex,
+          ref: focusElementRef,
+          placeholder: placeholder != null ? placeholder : apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+        },
+        native: isSelectNative,
+        notched: variant === 'outlined' ? true : undefined
+      }, others /* FIXME: typing error */, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+        children: renderSingleSelectOptions({
+          column: resolvedColumn,
+          OptionComponent: rootProps.slots.baseSelectOption,
+          getOptionLabel,
+          getOptionValue,
+          isSelectNative,
+          baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.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.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
+  applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
+  focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.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.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.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.bool,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired
+} : void 0;
+export { GridFilterInputSingleSelect };

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFieldProps & {
+    type?: 'text' | 'number' | 'date' | 'datetime-local';
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (e.g. `isEmpty`)
+     */
+    isFilterActive?: boolean;
+};
+declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): React.JSX.Element;
+declare namespace GridFilterInputValue {
+    var propTypes: any;
+}
+export { GridFilterInputValue };

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

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps", "variant"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_useId as useId } from '@mui/utils';
+import { useTimeout } from '../../../hooks/utils/useTimeout';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+function GridFilterInputValue(props) {
+  var _item$value, _rootProps$slotProps;
+  const {
+      item,
+      applyValue,
+      type,
+      apiRef,
+      focusElementRef,
+      tabIndex,
+      disabled,
+      clearButton,
+      InputProps,
+      variant = 'standard'
+    } = props,
+    others = _objectWithoutPropertiesLoose(props, _excluded);
+  const filterTimeout = useTimeout();
+  const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
+  const [applying, setIsApplying] = React.useState(false);
+  const id = useId();
+  const rootProps = useGridRootProps();
+  const onFilterChange = React.useCallback(event => {
+    const {
+      value
+    } = event.target;
+    setFilterValueState(String(value));
+    setIsApplying(true);
+    filterTimeout.start(rootProps.filterDebounceMs, () => {
+      const newItem = _extends({}, 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) {
+      var _item$value2;
+      setFilterValueState(String((_item$value2 = item.value) != null ? _item$value2 : ''));
+    }
+  }, [id, item]);
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+    id: id,
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    value: filterValueState,
+    onChange: onFilterChange,
+    variant: variant,
+    type: type || 'text',
+    InputProps: _extends({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, {
+      disabled
+    }, InputProps, {
+      inputProps: _extends({
+        tabIndex
+      }, InputProps == null ? void 0 : InputProps.inputProps)
+    }),
+    InputLabelProps: {
+      shrink: true
+    },
+    inputRef: focusElementRef
+  }, others, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _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.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
+  applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
+  focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.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.bool,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired
+} : void 0;
+export { GridFilterInputValue };

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+import { GridFilterItem } from '../../../models/gridFilterItem';
+import type { GridApiCommon } from '../../../models/api/gridApiCommon';
+import type { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+export type GridFilterInputValueProps<Api extends GridApiCommon = GridApiCommunity> = {
+    item: GridFilterItem;
+    applyValue: (value: GridFilterItem) => void;
+    apiRef: React.MutableRefObject<Api>;
+    focusElementRef?: React.Ref<any>;
+} & Pick<TextFieldProps, 'color' | 'error' | 'helperText' | 'size' | 'variant'>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { GridFilterItem } from '../../../models/gridFilterItem';
+import { GridFilterFormProps } from './GridFilterForm';
+import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
+export interface GetColumnForNewFilterArgs {
+    currentFilters: GridFilterItem[];
+    columns: GridStateColDef[];
+}
+export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOperators' | 'columnsSort'> {
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * 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?: (args: GetColumnForNewFilterArgs) => GridColDef['field'] | null;
+    /**
+     * Props passed to each filter form.
+     */
+    filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'logicOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps' | 'filterColumns'>;
+    /**
+     * If `true`, the `Add filter` button will not be displayed.
+     * @default false
+     */
+    disableAddFilterButton?: boolean;
+    /**
+     * If `true`, the `Remove all` button will be disabled
+     * @default false
+     */
+    disableRemoveAllButton?: boolean;
+    /**
+     * @ignore - do not document.
+     */
+    children?: React.ReactNode;
+}
+declare const getGridFilter: (col: GridStateColDef) => GridFilterItem;
+declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
+ */
+export { GridFilterPanel, getGridFilter };

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

@@ -0,0 +1,226 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["logicOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children", "disableAddFilterButton", "disableRemoveAllButton"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { GridLogicOperator } from '../../../models/gridFilterItem';
+import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
+import { GridPanelContent } from '../GridPanelContent';
+import { GridPanelFooter } from '../GridPanelFooter';
+import { GridPanelWrapper } from '../GridPanelWrapper';
+import { GridFilterForm } from './GridFilterForm';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { useGridSelector } from '../../../hooks/utils/useGridSelector';
+import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
+import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getGridFilter = col => ({
+  field: col.field,
+  operator: col.filterOperators[0].value,
+  id: Math.round(Math.random() * 1e5)
+});
+const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  const lastFilterRef = React.useRef(null);
+  const placeholderFilter = React.useRef(null);
+  const {
+      logicOperators = [GridLogicOperator.And, GridLogicOperator.Or],
+      columnsSort,
+      filterFormProps,
+      getColumnForNewFilter,
+      disableAddFilterButton = false,
+      disableRemoveAllButton = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(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 == null ? void 0 : filterModel.items) || [],
+        columns: filterableColumns
+      });
+      if (nextFieldName === null) {
+        return null;
+      }
+      nextColumnWithOperator = filterableColumns.find(({
+        field
+      }) => field === nextFieldName);
+    } else {
+      nextColumnWithOperator = filterableColumns.find(colDef => {
+        var _colDef$filterOperato;
+        return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
+      });
+    }
+    if (!nextColumnWithOperator) {
+      return null;
+    }
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel == null ? void 0 : 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(_extends({}, 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__*/_jsxs(GridPanelWrapper, _extends({
+    ref: ref
+  }, other, {
+    children: [/*#__PURE__*/_jsx(GridPanelContent, {
+      children: items.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
+        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__*/_jsxs(GridPanelFooter, {
+      children: [!disableAddFilterButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        onClick: addNewFilter,
+        startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelAddIcon, {})
+      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
+        children: apiRef.current.getLocaleText('filterPanelAddFilter')
+      })) : /*#__PURE__*/_jsx("span", {}), !disableRemoveAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        onClick: handleRemoveAll,
+        startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelRemoveAllIcon, {})
+      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.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.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.oneOf(['asc', 'desc']),
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
+  disableAddFilterButton: PropTypes.bool,
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
+  disableRemoveAllButton: PropTypes.bool,
+  /**
+   * Props passed to each filter form.
+   */
+  filterFormProps: PropTypes.shape({
+    columnInputProps: PropTypes.any,
+    columnsSort: PropTypes.oneOf(['asc', 'desc']),
+    deleteIconProps: PropTypes.any,
+    filterColumns: PropTypes.func,
+    logicOperatorInputProps: PropTypes.any,
+    operatorInputProps: PropTypes.any,
+    valueInputProps: PropTypes.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.func,
+  /**
+   * Sets the available logic operators.
+   * @default [GridLogicOperator.And, GridLogicOperator.Or]
+   */
+  logicOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.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/)
+ */
+export { GridFilterPanel, getGridFilter };

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

@@ -0,0 +1,4 @@
+import type { GridColDef, GridSingleSelectColDef, ValueOptions } from '../../../models/colDef/gridColDef';
+export declare function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef;
+export declare function getValueFromValueOptions(value: string, valueOptions: any[] | undefined, getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']>): any;
+export declare const getLabelFromValueOption: (valueOption: ValueOptions) => string;

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

@@ -0,0 +1,17 @@
+export function isSingleSelectColDef(colDef) {
+  return (colDef == null ? void 0 : colDef.type) === 'singleSelect';
+}
+export 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);
+}
+export const getLabelFromValueOption = valueOption => {
+  const label = typeof valueOption === 'object' ? valueOption.label : valueOption;
+  return label != null ? String(label) : '';
+};

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

@@ -0,0 +1,10 @@
+export * from './GridFilterForm';
+export * from './GridFilterInputValue';
+export * from './GridFilterInputDate';
+export * from './GridFilterInputSingleSelect';
+export * from './GridFilterInputBoolean';
+export * from './GridFilterInputValueProps';
+export { GridFilterPanel } from './GridFilterPanel';
+export type { GetColumnForNewFilterArgs } from './GridFilterPanel';
+export * from './GridFilterInputMultipleValue';
+export * from './GridFilterInputMultipleSingleSelect';

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

@@ -0,0 +1,9 @@
+export * from './GridFilterForm';
+export * from './GridFilterInputValue';
+export * from './GridFilterInputDate';
+export * from './GridFilterInputSingleSelect';
+export * from './GridFilterInputBoolean';
+export * from './GridFilterInputValueProps';
+export { GridFilterPanel } from './GridFilterPanel';
+export * from './GridFilterInputMultipleValue';
+export * from './GridFilterInputMultipleSingleSelect';

control-plane-ui/node_modules/@mui/x-data-grid/components/panel/index.d.ts

@@ -0,0 +1,8 @@
+export * from './GridColumnsPanel';
+export * from './GridPanel';
+export * from './GridPanelContent';
+export * from './GridPanelFooter';
+export * from './GridPanelHeader';
+export * from './GridPanelWrapper';
+export * from './GridPreferencesPanel';
+export * from './filterPanel';

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

@@ -0,0 +1,8 @@
+export * from './GridColumnsPanel';
+export * from './GridPanel';
+export * from './GridPanelContent';
+export * from './GridPanelFooter';
+export * from './GridPanelHeader';
+export * from './GridPanelWrapper';
+export * from './GridPreferencesPanel';
+export * from './filterPanel';