wip:milestone 0 fixes

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbar = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _GridToolbarContainer = require("../containers/GridToolbarContainer");
+var _GridToolbarColumnsButton = require("./GridToolbarColumnsButton");
+var _GridToolbarDensitySelector = require("./GridToolbarDensitySelector");
+var _GridToolbarFilterButton = require("./GridToolbarFilterButton");
+var _GridToolbarExport = require("./GridToolbarExport");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _GridToolbarQuickFilter = require("./GridToolbarQuickFilter");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const GridToolbar = exports.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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridToolbarContainer.GridToolbarContainer, (0, _extends2.default)({
+    ref: ref
+  }, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
+      csvOptions: csvOptions,
+      printOptions: printOptions
+      // TODO: remove the reference to excelOptions in community package
+      ,
+      excelOptions: excelOptions
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        flex: 1
+      }
+    }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, 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.default.object,
+  /**
+   * Show the quick filter component.
+   * @default false
+   */
+  showQuickFilter: _propTypes.default.bool,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbarColumnsButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/material/utils");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
+var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["onClick"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+  const {
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const columnButtonId = (0, _utils.unstable_useId)();
+  const columnPanelId = (0, _utils.unstable_useId)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
+  const showColumns = event => {
+    if (preferencePanel.open && preferencePanel.openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.columns) {
+      apiRef.current.hidePreferences();
+    } else {
+      apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
+    }
+    onClick?.(event);
+  };
+
+  // Disable the button if the corresponding is disabled
+  if (rootProps.disableColumnSelector) {
+    return null;
+  }
+  const isOpen = preferencePanel.open && preferencePanel.panelId === columnPanelId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+    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__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {})
+  }, other, {
+    onClick: showColumns
+  }, rootProps.slotProps?.baseButton, {
+    children: apiRef.current.getLocaleText('toolbarColumns')
+  }));
+});

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

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbarDensitySelector = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _densitySelector = require("../../hooks/features/density/densitySelector");
+var _keyboardUtils = require("../../utils/keyboardUtils");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _GridMenu = require("../menu/GridMenu");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["onClick"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
+  const {
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
+  const densityButtonId = (0, _utils.unstable_useId)();
+  const densityMenuId = (0, _utils.unstable_useId)();
+  const [open, setOpen] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const handleRef = (0, _utils.unstable_useForkRef)(ref, buttonRef);
+  const densityOptions = [{
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityCompactIcon, {}),
+    label: apiRef.current.getLocaleText('toolbarDensityCompact'),
+    value: 'compact'
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityStandardIcon, {}),
+    label: apiRef.current.getLocaleText('toolbarDensityStandard'),
+    value: 'standard'
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityComfortableIcon, {}),
+    label: apiRef.current.getLocaleText('toolbarDensityComfortable'),
+    value: 'comfortable'
+  }];
+  const startIcon = React.useMemo(() => {
+    switch (densityValue) {
+      case 'compact':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityCompactIcon, {});
+      case 'comfortable':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityComfortableIcon, {});
+      default:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityStandardIcon, {});
+    }
+  }, [densityValue, rootProps]);
+  const handleDensitySelectorOpen = event => {
+    setOpen(prevOpen => !prevOpen);
+    onClick?.(event);
+  };
+  const handleDensitySelectorClose = () => {
+    setOpen(false);
+  };
+  const handleDensityUpdate = newDensity => {
+    apiRef.current.setDensity(newDensity);
+    setOpen(false);
+  };
+  const handleListKeyDown = event => {
+    if ((0, _keyboardUtils.isTabKey)(event.key)) {
+      event.preventDefault();
+    }
+    if ((0, _keyboardUtils.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__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+    onClick: () => handleDensityUpdate(option.value),
+    selected: option.value === densityValue,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+      children: option.icon
+    }), option.label]
+  }, index));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+      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?.baseButton, {
+      children: apiRef.current.getLocaleText('toolbarDensity')
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
+      open: open,
+      target: buttonRef.current,
+      onClose: handleDensitySelectorClose,
+      position: "bottom-start",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+        id: densityMenuId,
+        className: _gridClasses.gridClasses.menuList,
+        "aria-labelledby": densityButtonId,
+        onKeyDown: handleListKeyDown,
+        autoFocusItem: open,
+        children: densityElements
+      })
+    })]
+  });
+});

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

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridCsvExportMenuItem = GridCsvExportMenuItem;
+exports.GridPrintExportMenuItem = GridPrintExportMenuItem;
+exports.GridToolbarExport = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _GridToolbarExportContainer = require("./GridToolbarExportContainer");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["hideMenu", "options"],
+  _excluded2 = ["hideMenu", "options"],
+  _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function GridCsvExportMenuItem(props) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const {
+      hideMenu,
+      options
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({
+    onClick: () => {
+      apiRef.current.exportDataAsCsv(options);
+      hideMenu?.();
+    }
+  }, other, {
+    children: apiRef.current.getLocaleText('toolbarExportCSV')
+  }));
+}
+function GridPrintExportMenuItem(props) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const {
+      hideMenu,
+      options
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({
+    onClick: () => {
+      apiRef.current.exportDataAsPrint(options);
+      hideMenu?.();
+    }
+  }, other, {
+    children: apiRef.current.getLocaleText('toolbarExportPrint')
+  }));
+}
+const GridToolbarExport = exports.GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
+  const {
+      csvOptions = {},
+      printOptions = {},
+      excelOptions
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
+  const apiRef = (0, _useGridApiContext.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__*/(0, _jsxRuntime.jsx)(_GridToolbarExportContainer.GridToolbarExportContainer, (0, _extends2.default)({}, 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.default.object,
+  printOptions: _propTypes.default.object
+} : void 0;

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbarExportContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _keyboardUtils = require("../../utils/keyboardUtils");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _GridMenu = require("../menu/GridMenu");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "onClick"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
+  const {
+      children,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const exportButtonId = (0, _utils.unstable_useId)();
+  const exportMenuId = (0, _utils.unstable_useId)();
+  const [open, setOpen] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const handleRef = (0, _utils.unstable_useForkRef)(ref, buttonRef);
+  const handleMenuOpen = event => {
+    setOpen(prevOpen => !prevOpen);
+    onClick?.(event);
+  };
+  const handleMenuClose = () => setOpen(false);
+  const handleListKeyDown = event => {
+    if ((0, _keyboardUtils.isTabKey)(event.key)) {
+      event.preventDefault();
+    }
+    if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {
+      handleMenuClose();
+    }
+  };
+  if (children == null) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+      ref: handleRef,
+      size: "small",
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.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?.baseButton, {
+      children: apiRef.current.getLocaleText('toolbarExport')
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
+      open: open,
+      target: buttonRef.current,
+      onClose: handleMenuClose,
+      position: "bottom-start",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+        id: exportMenuId,
+        className: _gridClasses.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/node/components/toolbar/GridToolbarFilterButton.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbarFilterButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _utils = require("@mui/utils");
+var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
+var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
+var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
+var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["componentsProps"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['toolbarFilterList']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridToolbarFilterListRoot = (0, _styles.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 = exports.GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
+  const {
+      componentsProps = {}
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const buttonProps = componentsProps.button || {};
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const activeFilters = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsSelector);
+  const lookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnLookupSelector);
+  const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
+  const classes = useUtilityClasses(rootProps);
+  const filterButtonId = (0, _utils.unstable_useId)();
+  const filterPanelId = (0, _utils.unstable_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${(0, _utils.unstable_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__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarFilterListRoot, {
+        className: classes.root,
+        ownerState: rootProps,
+        children: activeFilters.map((item, index) => (0, _extends2.default)({}, lookup[item.field] && /*#__PURE__*/(0, _jsxRuntime.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 => {
+    const {
+      open,
+      openedPanelValue
+    } = preferencePanel;
+    if (open && openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.filters) {
+      apiRef.current.hidePreferences();
+    } else {
+      apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
+    }
+    buttonProps.onClick?.(event);
+  };
+
+  // Disable the button if the corresponding is disabled
+  if (rootProps.disableColumnFilter) {
+    return null;
+  }
+  const isOpen = preferencePanel.open && preferencePanel.panelId === filterPanelId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+    title: tooltipContentNode,
+    enterDelay: 1000
+  }, other, rootProps.slotProps?.baseTooltip, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+      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__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+        badgeContent: activeFilters.length,
+        color: "primary",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {})
+      })
+    }, buttonProps, {
+      onClick: toggleFilter
+    }, rootProps.slotProps?.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.default.object
+} : void 0;

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

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbarQuickFilter = GridToolbarQuickFilter;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _styles = require("@mui/material/styles");
+var _utils = require("@mui/utils");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _filter = require("../../hooks/features/filter");
+var _utils2 = require("../../utils/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
+  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) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
+  const {
+      quickFilterParser = defaultSearchValueParser,
+      quickFilterFormatter = defaultSearchValueFormatter,
+      debounceMs = rootProps.filterDebounceMs
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
+  const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
+  React.useEffect(() => {
+    if (!(0, _utils2.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 => (0, _utils2.isDeepEqual)(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(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(() => (0, _utils.unstable_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__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
+    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: (0, _extends2.default)({
+      startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
+        fontSize: "small"
+      }),
+      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+        size: "small",
+        sx: {
+          visibility: searchValue ? 'visible' : 'hidden'
+        },
+        onClick: handleSearchReset
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
+          fontSize: "small"
+        })
+      }))
+    }, other.InputProps)
+  }, rootProps.slotProps?.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.default.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.default.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.default.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/)
+ */

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

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  GridCsvExportMenuItem: true,
+  GridPrintExportMenuItem: true,
+  GridToolbarExport: true
+};
+Object.defineProperty(exports, "GridCsvExportMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _GridToolbarExport.GridCsvExportMenuItem;
+  }
+});
+Object.defineProperty(exports, "GridPrintExportMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _GridToolbarExport.GridPrintExportMenuItem;
+  }
+});
+Object.defineProperty(exports, "GridToolbarExport", {
+  enumerable: true,
+  get: function () {
+    return _GridToolbarExport.GridToolbarExport;
+  }
+});
+var _GridToolbar = require("./GridToolbar");
+Object.keys(_GridToolbar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridToolbar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridToolbar[key];
+    }
+  });
+});
+var _GridToolbarColumnsButton = require("./GridToolbarColumnsButton");
+Object.keys(_GridToolbarColumnsButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridToolbarColumnsButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridToolbarColumnsButton[key];
+    }
+  });
+});
+var _GridToolbarDensitySelector = require("./GridToolbarDensitySelector");
+Object.keys(_GridToolbarDensitySelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridToolbarDensitySelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridToolbarDensitySelector[key];
+    }
+  });
+});
+var _GridToolbarExport = require("./GridToolbarExport");
+var _GridToolbarFilterButton = require("./GridToolbarFilterButton");
+Object.keys(_GridToolbarFilterButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridToolbarFilterButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridToolbarFilterButton[key];
+    }
+  });
+});
+var _GridToolbarExportContainer = require("./GridToolbarExportContainer");
+Object.keys(_GridToolbarExportContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridToolbarExportContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridToolbarExportContainer[key];
+    }
+  });
+});
+var _GridToolbarQuickFilter = require("./GridToolbarQuickFilter");
+Object.keys(_GridToolbarQuickFilter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridToolbarQuickFilter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridToolbarQuickFilter[key];
+    }
+  });
+});