wip:milestone 0 fixes

control-plane-ui/node_modules/@mui/x-data-grid/components/toolbar/GridToolbar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { GridToolbarContainerProps } from '../containers/GridToolbarContainer';
+import { GridToolbarExportProps } from './GridToolbarExport';
+import { GridToolbarQuickFilterProps } from './GridToolbarQuickFilter';
+export interface GridToolbarProps extends GridToolbarContainerProps, Omit<GridToolbarExportProps, 'color'> {
+    /**
+     * Show the quick filter component.
+     * @default false
+     */
+    showQuickFilter?: boolean;
+    /**
+     * Props passed to the quick filter component.
+     */
+    quickFilterProps?: GridToolbarQuickFilterProps;
+}
+declare const GridToolbar: React.ForwardRefExoticComponent<Omit<GridToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { GridToolbar };

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

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

control-plane-ui/node_modules/@mui/x-data-grid/components/toolbar/GridToolbarColumnsButton.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+export declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

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

control-plane-ui/node_modules/@mui/x-data-grid/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+export declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

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

control-plane-ui/node_modules/@mui/x-data-grid/components/toolbar/GridToolbarExport.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+import { GridCsvExportOptions, GridPrintExportOptions } from '../../models/gridExport';
+export interface GridExportDisplayOptions {
+    /**
+     * If `true`, this export option will be removed from the GridToolbarExport menu.
+     * @default false
+     */
+    disableToolbarButton?: boolean;
+}
+export interface GridExportMenuItemProps<Options extends {}> {
+    hideMenu?: () => void;
+    options?: Options & GridExportDisplayOptions;
+}
+export type GridCsvExportMenuItemProps = GridExportMenuItemProps<GridCsvExportOptions>;
+export type GridPrintExportMenuItemProps = GridExportMenuItemProps<GridPrintExportOptions>;
+export interface GridToolbarExportProps extends ButtonProps {
+    csvOptions?: GridCsvExportOptions & GridExportDisplayOptions;
+    printOptions?: GridPrintExportOptions & GridExportDisplayOptions;
+    [key: string]: any;
+}
+export declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): React.JSX.Element;
+export declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): React.JSX.Element;
+declare const GridToolbarExport: React.ForwardRefExoticComponent<Omit<GridToolbarExportProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { GridToolbarExport };

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

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

control-plane-ui/node_modules/@mui/x-data-grid/components/toolbar/GridToolbarExportContainer.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+export declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

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

control-plane-ui/node_modules/@mui/x-data-grid/components/toolbar/GridToolbarFilterButton.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+import { TooltipProps } from '@mui/material/Tooltip';
+export interface GridToolbarFilterButtonProps extends Omit<TooltipProps, 'title' | 'children' | 'componentsProps'> {
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    componentsProps?: {
+        button?: ButtonProps;
+    };
+}
+declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<Omit<GridToolbarFilterButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { GridToolbarFilterButton };

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

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

control-plane-ui/node_modules/@mui/x-data-grid/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+import { GridFilterModel } from '../../models/gridFilterModel';
+export type GridToolbarQuickFilterProps = TextFieldProps & {
+    /**
+     * Function responsible for parsing text input in an array of independent values for quick filtering.
+     * @param {string} input The value entered by the user
+     * @returns {any[]} The array of value on which quick filter is applied
+     * @default (searchText: string) => searchText
+     *   .split(' ')
+     *   .filter((word) => word !== '')
+     */
+    quickFilterParser?: (input: string) => any[];
+    /**
+     * Function responsible for formatting values of quick filter in a string when the model is modified
+     * @param {any[]} values The new values passed to the quick filter model
+     * @returns {string} The string to display in the text field
+     * @default (values: string[]) => values.join(' ')
+     */
+    quickFilterFormatter?: (values: NonNullable<GridFilterModel['quickFilterValues']>) => string;
+    /**
+     * The debounce time in milliseconds.
+     * @default 150
+     */
+    debounceMs?: number;
+};
+declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): React.JSX.Element;
+declare namespace GridToolbarQuickFilter {
+    var propTypes: any;
+}
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ * - [Filtering - quick filter](https://mui.com/x/react-data-grid/filtering/quick-filter/)
+ *
+ * API:
+ * - [GridToolbarQuickFilter API](https://mui.com/x/api/data-grid/grid-toolbar-quick-filter/)
+ */
+export { GridToolbarQuickFilter };

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

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

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

@@ -0,0 +1,8 @@
+export * from './GridToolbar';
+export * from './GridToolbarColumnsButton';
+export * from './GridToolbarDensitySelector';
+export type { GridExportDisplayOptions, GridExportMenuItemProps, GridCsvExportMenuItemProps, GridPrintExportMenuItemProps, } from './GridToolbarExport';
+export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport, } from './GridToolbarExport';
+export * from './GridToolbarFilterButton';
+export * from './GridToolbarExportContainer';
+export * from './GridToolbarQuickFilter';

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

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