wip:milestone 0 fixes

control-plane-ui/node_modules/@mui/x-data-grid/legacy/DataGrid/DataGrid.js

@@ -0,0 +1,689 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { chainPropTypes } from '@mui/utils';
+import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../components';
+import { GridContextProvider } from '../context/GridContextProvider';
+import { useDataGridComponent } from './useDataGridComponent';
+import { useDataGridProps, DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';
+import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
+  var props = useDataGridProps(inProps);
+  var privateApiRef = useDataGridComponent(props.apiRef, props);
+  return /*#__PURE__*/_jsx(GridContextProvider, {
+    privateApiRef: privateApiRef,
+    props: props,
+    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
+      className: props.className,
+      style: props.style,
+      sx: props.sx,
+      ref: ref
+    }, props.forwardedProps, {
+      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
+        VirtualScrollerComponent: DataGridVirtualScroller
+      }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+    }))
+  });
+});
+/**
+ * Demos:
+ * - [DataGrid](https://mui.com/x/react-data-grid/demo/)
+ *
+ * API:
+ * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
+ */
+export var DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
+
+/**
+ * Remove at v7
+ * @deprecated
+ */
+export var SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
+
+/**
+ * Remove at v7
+ * @deprecated
+ */
+export var SUBMIT_FILTER_DATE_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
+DataGridRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
+   */
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }),
+  /**
+   * The label of the Data Grid.
+   */
+  'aria-label': PropTypes.string,
+  /**
+   * The id of the element containing a label for the Data Grid.
+   */
+  'aria-labelledby': PropTypes.string,
+  /**
+   * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
+   * @default false
+   */
+  autoHeight: PropTypes.bool,
+  /**
+   * If `true`, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.
+   * @default false
+   */
+  autoPageSize: PropTypes.bool,
+  /**
+   * Controls the modes of the cells.
+   */
+  cellModesModel: PropTypes.object,
+  /**
+   * If `true`, the Data Grid will display an extra column with checkboxes for selecting rows.
+   * @default false
+   */
+  checkboxSelection: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The character used to separate cell values when copying to the clipboard.
+   * @default '\t'
+   */
+  clipboardCopyCellDelimiter: PropTypes.string,
+  /**
+   * Number of extra columns to be rendered before/after the visible slice.
+   * @default 3
+   */
+  columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * Sets the height in pixel of the column headers in the Data Grid.
+   * @default 56
+   */
+  columnHeaderHeight: PropTypes.number,
+  /**
+   * Set of columns of type [[GridColDef[]]].
+   */
+  columns: chainPropTypes(PropTypes.array.isRequired, function (props) {
+    // @ts-ignore because otherwise `build:api` doesn't work
+    if (props.columns && props.columns.some(function (column) {
+      return column.resizable;
+    })) {
+      return new Error(["MUI: `column.resizable = true` is not a valid prop.", 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+    }
+    return null;
+  }),
+  /**
+   * Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
+   * @default 3
+   */
+  columnThreshold: PropTypes.number,
+  /**
+   * Set the column visibility model of the Data Grid.
+   * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
+   */
+  columnVisibilityModel: PropTypes.object,
+  /**
+   * Overridable components.
+   * @deprecated Use `slots` instead.
+   */
+  components: PropTypes.object,
+  /**
+   * Overridable components props dynamically passed to the component at rendering.
+   * @deprecated Use the `slotProps` prop instead.
+   */
+  componentsProps: PropTypes.object,
+  /**
+   * Set the density of the Data Grid.
+   * @default "standard"
+   */
+  density: PropTypes.oneOf(['comfortable', 'compact', 'standard']),
+  /**
+   * If `true`, column filters are disabled.
+   * @default false
+   */
+  disableColumnFilter: PropTypes.bool,
+  /**
+   * If `true`, the column menu is disabled.
+   * @default false
+   */
+  disableColumnMenu: PropTypes.bool,
+  /**
+   * If `true`, hiding/showing columns is disabled.
+   * @default false
+   */
+  disableColumnSelector: PropTypes.bool,
+  /**
+   * If `true`, the density selector is disabled.
+   * @default false
+   */
+  disableDensitySelector: PropTypes.bool,
+  /**
+   * If `true`, `eval()` is not used for performance optimization.
+   * @default false
+   */
+  disableEval: PropTypes.bool,
+  /**
+   * If `true`, the selection on click on a row or cell is disabled.
+   * @default false
+   */
+  disableRowSelectionOnClick: PropTypes.bool,
+  /**
+   * If `true`, the virtualization is disabled.
+   * @default false
+   */
+  disableVirtualization: PropTypes.bool,
+  /**
+   * Controls whether to use the cell or row editing.
+   * @default "cell"
+   */
+  editMode: PropTypes.oneOf(['cell', 'row']),
+  /**
+   * Unstable features, breaking changes might be introduced.
+   * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
+   */
+  experimentalFeatures: PropTypes.shape({
+    ariaV7: PropTypes.bool,
+    columnGrouping: PropTypes.bool,
+    warnIfFocusStateIsNotSynced: PropTypes.bool
+  }),
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering.
+   * @default 150
+   */
+  filterDebounceMs: PropTypes.number,
+  /**
+   * Filtering can be processed on the server or client-side.
+   * Set it to 'server' if you would like to handle filtering on the server-side.
+   * @default "client"
+   */
+  filterMode: PropTypes.oneOf(['client', 'server']),
+  /**
+   * Set the filter model of the Data Grid.
+   */
+  filterModel: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.shape({
+      field: PropTypes.string.isRequired,
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      operator: PropTypes.string.isRequired,
+      value: PropTypes.any
+    })).isRequired,
+    logicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterExcludeHiddenColumns: PropTypes.bool,
+    quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterValues: PropTypes.array
+  }),
+  /**
+   * Forwarded props for the Data Grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: PropTypes.object,
+  /**
+   * Function that applies CSS classes dynamically on cells.
+   * @param {GridCellParams} params With all properties from [[GridCellParams]].
+   * @returns {string} The CSS class to apply to the cell.
+   */
+  getCellClassName: PropTypes.func,
+  /**
+   * Function that returns the element to render in row detail.
+   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @returns {React.JSX.Element} The row detail element.
+   */
+  getDetailPanelContent: PropTypes.func,
+  /**
+   * Function that returns the estimated height for a row.
+   * Only works if dynamic row height is used.
+   * Once the row height is measured this value is discarded.
+   * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
+   * @returns {number | null} The estimated row height value. If `null` or `undefined` then the default row height, based on the density, is applied.
+   */
+  getEstimatedRowHeight: PropTypes.func,
+  /**
+   * Function that applies CSS classes dynamically on rows.
+   * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
+   * @returns {string} The CSS class to apply to the row.
+   */
+  getRowClassName: PropTypes.func,
+  /**
+   * Function that sets the row height per row.
+   * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
+   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied. If "auto" then the row height is calculated based on the content.
+   */
+  getRowHeight: PropTypes.func,
+  /**
+   * Return the id of a given [[GridRowModel]].
+   */
+  getRowId: PropTypes.func,
+  /**
+   * Function that allows to specify the spacing between rows.
+   * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
+   * @returns {GridRowSpacing} The row spacing values.
+   */
+  getRowSpacing: PropTypes.func,
+  /**
+   * If `true`, the footer component is hidden.
+   * @default false
+   */
+  hideFooter: PropTypes.bool,
+  /**
+   * If `true`, the pagination component in the footer is hidden.
+   * @default false
+   */
+  hideFooterPagination: PropTypes.bool,
+  /**
+   * If `true`, the selected row count in the footer is hidden.
+   * @default false
+   */
+  hideFooterSelectedRowCount: PropTypes.bool,
+  /**
+   * If `true`, the diacritics (accents) are ignored when filtering or quick filtering.
+   * E.g. when filter value is `cafe`, the rows with `café` will be visible.
+   * @default false
+   */
+  ignoreDiacritics: PropTypes.bool,
+  /**
+   * The initial state of the DataGrid.
+   * The data in it will be set in the state on initialization but will not be controlled.
+   * If one of the data in `initialState` is also being controlled, then the control state wins.
+   */
+  initialState: PropTypes.object,
+  /**
+   * Callback fired when a cell is rendered, returns true if the cell is editable.
+   * @param {GridCellParams} params With all properties from [[GridCellParams]].
+   * @returns {boolean} A boolean indicating if the cell is editable.
+   */
+  isCellEditable: PropTypes.func,
+  /**
+   * Determines if a row can be selected.
+   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @returns {boolean} A boolean indicating if the cell is selectable.
+   */
+  isRowSelectable: PropTypes.func,
+  /**
+   * If `true`, the selection model will retain selected rows that do not exist.
+   * Useful when using server side pagination and row selections need to be retained
+   * when changing pages.
+   * @default false
+   */
+  keepNonExistentRowsSelected: PropTypes.bool,
+  /**
+   * If `true`, a  loading overlay is displayed.
+   */
+  loading: PropTypes.bool,
+  /**
+   * Set the locale text of the Data Grid.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/v6.19.4/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
+   */
+  localeText: PropTypes.object,
+  /**
+   * Pass a custom logger in the components that implements the [[Logger]] interface.
+   * @default console
+   */
+  logger: PropTypes.shape({
+    debug: PropTypes.func.isRequired,
+    error: PropTypes.func.isRequired,
+    info: PropTypes.func.isRequired,
+    warn: PropTypes.func.isRequired
+  }),
+  /**
+   * Allows to pass the logging level or false to turn off logging.
+   * @default "error" ("warn" in dev mode)
+   */
+  logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
+  /**
+   * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
+   */
+  nonce: PropTypes.string,
+  /**
+   * Callback fired when any cell is clicked.
+   * @param {GridCellParams} params With all properties from [[GridCellParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onCellClick: PropTypes.func,
+  /**
+   * Callback fired when a double click event comes from a cell element.
+   * @param {GridCellParams} params With all properties from [[GridCellParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onCellDoubleClick: PropTypes.func,
+  /**
+   * Callback fired when the cell turns to edit mode.
+   * @param {GridCellParams} params With all properties from [[GridCellParams]].
+   * @param {MuiEvent<React.KeyboardEvent | React.MouseEvent>} event The event that caused this prop to be called.
+   */
+  onCellEditStart: PropTypes.func,
+  /**
+   * Callback fired when the cell turns to view mode.
+   * @param {GridCellParams} params With all properties from [[GridCellParams]].
+   * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
+   */
+  onCellEditStop: PropTypes.func,
+  /**
+   * Callback fired when a keydown event comes from a cell element.
+   * @param {GridCellParams} params With all properties from [[GridCellParams]].
+   * @param {MuiEvent<React.KeyboardEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onCellKeyDown: PropTypes.func,
+  /**
+   * Callback fired when the `cellModesModel` prop changes.
+   * @param {GridCellModesModel} cellModesModel Object containing which cells are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onCellModesModelChange: PropTypes.func,
+  /**
+   * Callback called when the data is copied to the clipboard.
+   * @param {string} data The data copied to the clipboard.
+   */
+  onClipboardCopy: PropTypes.func,
+  /**
+   * Callback fired when a click event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnHeaderClick: PropTypes.func,
+  /**
+   * Callback fired when a double click event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnHeaderDoubleClick: PropTypes.func,
+  /**
+   * Callback fired when a mouse enter event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnHeaderEnter: PropTypes.func,
+  /**
+   * Callback fired when a mouse leave event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnHeaderLeave: PropTypes.func,
+  /**
+   * Callback fired when a mouseout event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnHeaderOut: PropTypes.func,
+  /**
+   * Callback fired when a mouseover event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnHeaderOver: PropTypes.func,
+  /**
+   * Callback fired when a column is reordered.
+   * @param {GridColumnOrderChangeParams} params With all properties from [[GridColumnOrderChangeParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnOrderChange: PropTypes.func,
+  /**
+   * Callback fired when the column visibility model changes.
+   * @param {GridColumnVisibilityModel} model The new model.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnVisibilityModelChange: PropTypes.func,
+  /**
+   * Callback fired when the Filter model changes before the filters are applied.
+   * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFilterModelChange: PropTypes.func,
+  /**
+   * Callback fired when the menu is closed.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuClose: PropTypes.func,
+  /**
+   * Callback fired when the menu is opened.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuOpen: PropTypes.func,
+  /**
+   * Callback fired when the pagination model has changed.
+   * @param {GridPaginationModel} model Updated pagination model.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPaginationModelChange: PropTypes.func,
+  /**
+   * Callback fired when the preferences panel is closed.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelClose: PropTypes.func,
+  /**
+   * Callback fired when the preferences panel is opened.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelOpen: PropTypes.func,
+  /**
+   * Callback called when `processRowUpdate` throws an error or rejects.
+   * @param {any} error The error thrown.
+   */
+  onProcessRowUpdateError: PropTypes.func,
+  /**
+   * Callback fired when the Data Grid is resized.
+   * @param {ElementSize} containerSize With all properties from [[ElementSize]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onResize: PropTypes.func,
+  /**
+   * Callback fired when a row is clicked.
+   * Not called if the target clicked is an interactive element added by the built-in columns.
+   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowClick: PropTypes.func,
+  /**
+   * Callback fired when the row count has changed.
+   * @param {number} count Updated row count.
+   */
+  onRowCountChange: PropTypes.func,
+  /**
+   * Callback fired when a double click event comes from a row container element.
+   * @param {GridRowParams} params With all properties from [[RowParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowDoubleClick: PropTypes.func,
+  /**
+   * Callback fired when the row turns to edit mode.
+   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {MuiEvent<React.KeyboardEvent | React.MouseEvent>} event The event that caused this prop to be called.
+   */
+  onRowEditStart: PropTypes.func,
+  /**
+   * Callback fired when the row turns to view mode.
+   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
+   */
+  onRowEditStop: PropTypes.func,
+  /**
+   * Callback fired when the `rowModesModel` prop changes.
+   * @param {GridRowModesModel} rowModesModel Object containing which rows are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowModesModelChange: PropTypes.func,
+  /**
+   * Callback fired when the selection state of one or multiple rows changes.
+   * @param {GridRowSelectionModel} rowSelectionModel With all the row ids [[GridSelectionModel]].
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowSelectionModelChange: PropTypes.func,
+  /**
+   * Callback fired when the sort model changes before a column is sorted.
+   * @param {GridSortModel} model With all properties from [[GridSortModel]].
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onSortModelChange: PropTypes.func,
+  /**
+   * Callback fired when the state of the Data Grid is updated.
+   * @param {GridState} state The new state.
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   * @ignore - do not document.
+   */
+  onStateChange: PropTypes.func,
+  /**
+   * Select the pageSize dynamically using the component UI.
+   * @default [25, 50, 100]
+   */
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
+  pagination: function pagination(props) {
+    if (props.pagination === false) {
+      return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));
+    }
+    return null;
+  },
+  /**
+   * Pagination can be processed on the server or client-side.
+   * Set it to 'client' if you would like to handle the pagination on the client-side.
+   * Set it to 'server' if you would like to handle the pagination on the server-side.
+   * @default "client"
+   */
+  paginationMode: PropTypes.oneOf(['client', 'server']),
+  /**
+   * The pagination model of type [[GridPaginationModel]] which refers to current `page` and `pageSize`.
+   */
+  paginationModel: PropTypes.shape({
+    page: PropTypes.number.isRequired,
+    pageSize: PropTypes.number.isRequired
+  }),
+  /**
+   * Callback called before updating a row with new values in the row and cell editing.
+   * @template R
+   * @param {R} newRow Row object with the new values.
+   * @param {R} oldRow Row object with the old values.
+   * @returns {Promise<R> | R} The final values to update the row.
+   */
+  processRowUpdate: PropTypes.func,
+  /**
+   * Number of extra rows to be rendered before/after the visible slice.
+   * @default 3
+   */
+  rowBuffer: PropTypes.number,
+  /**
+   * Set the total number of rows, if it is different from the length of the value `rows` prop.
+   * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
+   */
+  rowCount: PropTypes.number,
+  /**
+   * Sets the height in pixel of a row in the Data Grid.
+   * @default 52
+   */
+  rowHeight: PropTypes.number,
+  /**
+   * Controls the modes of the rows.
+   */
+  rowModesModel: PropTypes.object,
+  /**
+   * The milliseconds delay to wait after measuring the row height before recalculating row positions.
+   * Setting it to a lower value could be useful when using dynamic row height,
+   * but might reduce performance when displaying a large number of rows.
+   * @default 166
+   */
+  rowPositionsDebounceMs: PropTypes.number,
+  /**
+   * Set of rows of type [[GridRowsProp]].
+   */
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `false`, the row selection mode is disabled.
+   * @default true
+   */
+  rowSelection: PropTypes.bool,
+  /**
+   * Sets the row selection model of the Data Grid.
+   */
+  rowSelectionModel: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.string]),
+  /**
+   * Sets the type of space between rows added by `getRowSpacing`.
+   * @default "margin"
+   */
+  rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+  /**
+   * Number of rows from the `rowBuffer` that can be visible before a new slice is rendered.
+   * @default 3
+   */
+  rowThreshold: PropTypes.number,
+  /**
+   * Override the height/width of the Data Grid inner scrollbar.
+   */
+  scrollbarSize: PropTypes.number,
+  /**
+   * If `true`, the vertical borders of the cells are displayed.
+   * @default false
+   */
+  showCellVerticalBorder: PropTypes.bool,
+  /**
+   * If `true`, the right border of the column headers are displayed.
+   * @default false
+   */
+  showColumnVerticalBorder: PropTypes.bool,
+  /**
+   * Overridable components props dynamically passed to the component at rendering.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable components.
+   */
+  slots: PropTypes.object,
+  /**
+   * Sorting can be processed on the server or client-side.
+   * Set it to 'client' if you would like to handle sorting on the client-side.
+   * Set it to 'server' if you would like to handle sorting on the server-side.
+   * @default "client"
+   */
+  sortingMode: PropTypes.oneOf(['client', 'server']),
+  /**
+   * The order of the sorting sequence.
+   * @default ['asc', 'desc', null]
+   */
+  sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
+  /**
+   * Set the sort model of the Data Grid.
+   */
+  sortModel: PropTypes.arrayOf(PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    sort: PropTypes.oneOf(['asc', 'desc'])
+  })),
+  /**
+   * 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]),
+  /**
+   * If `true`, the Data Grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
+   * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
+   * @default false
+   */
+  unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
+    clipboardExport: PropTypes.bool,
+    csvExport: PropTypes.bool
+  }), PropTypes.bool])
+};

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

@@ -0,0 +1,2 @@
+export * from './DataGrid';
+export { DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';

control-plane-ui/node_modules/@mui/x-data-grid/legacy/DataGrid/useDataGridComponent.js

@@ -0,0 +1,80 @@
+import { useGridInitialization } from '../hooks/core/useGridInitialization';
+import { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
+import { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
+import { columnMenuStateInitializer, useGridColumnMenu } from '../hooks/features/columnMenu/useGridColumnMenu';
+import { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
+import { densityStateInitializer, useGridDensity } from '../hooks/features/density/useGridDensity';
+import { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
+import { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
+import { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
+import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/useGridFocus';
+import { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
+import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
+import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
+import { useGridEditing, editingStateInitializer } from '../hooks/features/editing/useGridEditing';
+import { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
+import { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
+import { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
+import { rowSelectionStateInitializer, useGridRowSelection } from '../hooks/features/rowSelection/useGridRowSelection';
+import { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection/useGridRowSelectionPreProcessors';
+import { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
+import { useGridScroll } from '../hooks/features/scroll/useGridScroll';
+import { useGridEvents } from '../hooks/features/events/useGridEvents';
+import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
+import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
+import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
+import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+import { useGridVirtualization, virtualizationStateInitializer } from '../hooks/features/virtualization';
+export var useDataGridComponent = function useDataGridComponent(inputApiRef, props) {
+  var apiRef = useGridInitialization(inputApiRef, props);
+
+  /**
+   * Register all pre-processors called during state initialization here.
+   */
+  useGridRowSelectionPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
+
+  /**
+   * Register all state initializers here.
+   */
+  useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
+  useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState(focusStateInitializer, apiRef, props);
+  useGridInitializeState(sortingStateInitializer, apiRef, props);
+  useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
+  useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(densityStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
+  useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
+  useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridKeyboardNavigation(apiRef, props);
+  useGridRowSelection(apiRef, props);
+  useGridColumns(apiRef, props);
+  useGridRows(apiRef, props);
+  useGridParamsApi(apiRef, props);
+  useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
+  useGridEditing(apiRef, props);
+  useGridFocus(apiRef, props);
+  useGridPreferencesPanel(apiRef, props);
+  useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
+  useGridDensity(apiRef, props);
+  useGridPagination(apiRef, props);
+  useGridRowsMeta(apiRef, props);
+  useGridScroll(apiRef, props);
+  useGridColumnMenu(apiRef);
+  useGridCsvExport(apiRef, props);
+  useGridPrintExport(apiRef, props);
+  useGridClipboard(apiRef, props);
+  useGridDimensions(apiRef, props);
+  useGridEvents(apiRef, props);
+  useGridStatePersistence(apiRef);
+  useGridVirtualization(apiRef, props);
+  return apiRef;
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/DataGrid/useDataGridProps.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { useThemeProps } from '@mui/material/styles';
+import { GRID_DEFAULT_LOCALE_TEXT } from '../constants';
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
+import { GridEditModes } from '../models';
+import { computeSlots, useProps, uncapitalizeObjectKeys } from '../internals/utils';
+var DATA_GRID_FORCED_PROPS = {
+  disableMultipleColumnsFiltering: true,
+  disableMultipleColumnsSorting: true,
+  disableMultipleRowSelection: true,
+  throttleRowsMs: undefined,
+  hideFooterRowCount: false,
+  pagination: true,
+  checkboxSelectionVisibleOnly: false,
+  disableColumnReorder: true,
+  disableColumnResize: true,
+  keepColumnPositionIfDraggedOutside: false,
+  signature: 'DataGrid'
+};
+
+/**
+ * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
+ */
+export var DATA_GRID_PROPS_DEFAULT_VALUES = {
+  autoHeight: false,
+  autoPageSize: false,
+  checkboxSelection: false,
+  checkboxSelectionVisibleOnly: false,
+  columnBuffer: 3,
+  rowBuffer: 3,
+  columnThreshold: 3,
+  rowThreshold: 3,
+  rowSelection: true,
+  density: 'standard',
+  disableColumnFilter: false,
+  disableColumnMenu: false,
+  disableColumnSelector: false,
+  disableDensitySelector: false,
+  disableEval: false,
+  disableMultipleColumnsFiltering: false,
+  disableMultipleRowSelection: false,
+  disableMultipleColumnsSorting: false,
+  disableRowSelectionOnClick: false,
+  disableVirtualization: false,
+  editMode: GridEditModes.Cell,
+  filterMode: 'client',
+  filterDebounceMs: 150,
+  columnHeaderHeight: 56,
+  hideFooter: false,
+  hideFooterPagination: false,
+  hideFooterRowCount: false,
+  hideFooterSelectedRowCount: false,
+  ignoreDiacritics: false,
+  logger: console,
+  logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+  pagination: false,
+  paginationMode: 'client',
+  rowHeight: 52,
+  pageSizeOptions: [25, 50, 100],
+  rowSpacingType: 'margin',
+  showCellVerticalBorder: false,
+  showColumnVerticalBorder: false,
+  sortingOrder: ['asc', 'desc', null],
+  sortingMode: 'client',
+  throttleRowsMs: 0,
+  disableColumnReorder: false,
+  disableColumnResize: false,
+  keepNonExistentRowsSelected: false,
+  keepColumnPositionIfDraggedOutside: false,
+  unstable_ignoreValueFormatterDuringExport: false,
+  clipboardCopyCellDelimiter: '\t',
+  rowPositionsDebounceMs: 166
+};
+var defaultSlots = uncapitalizeObjectKeys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
+export var useDataGridProps = function useDataGridProps(inProps) {
+  var _useProps = useProps(useThemeProps({
+      props: inProps,
+      name: 'MuiDataGrid'
+    })),
+    _useProps2 = _slicedToArray(_useProps, 3),
+    components = _useProps2[0],
+    componentsProps = _useProps2[1],
+    themedProps = _useProps2[2];
+  var localeText = React.useMemo(function () {
+    return _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText);
+  }, [themedProps.localeText]);
+  var slots = React.useMemo(function () {
+    return computeSlots({
+      defaultSlots: defaultSlots,
+      slots: themedProps.slots,
+      components: components
+    });
+  }, [components, themedProps.slots]);
+  return React.useMemo(function () {
+    var _themedProps$slotProp;
+    return _extends({}, DATA_GRID_PROPS_DEFAULT_VALUES, themedProps, {
+      localeText: localeText,
+      slots: slots,
+      slotProps: (_themedProps$slotProp = themedProps.slotProps) != null ? _themedProps$slotProp : componentsProps
+    }, DATA_GRID_FORCED_PROPS);
+  }, [themedProps, localeText, slots, componentsProps]);
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridActionsColDef.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { renderActionsCell } from '../components/cell/GridActionsCell';
+export var GRID_ACTIONS_COLUMN_TYPE = 'actions';
+export var GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  sortable: false,
+  filterable: false,
+  // @ts-ignore
+  aggregable: false,
+  width: 100,
+  align: 'center',
+  headerAlign: 'center',
+  headerName: '',
+  disableColumnMenu: true,
+  disableExport: true,
+  renderCell: renderActionsCell,
+  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridBooleanColDef.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { renderBooleanCell } from '../components/cell/GridBooleanCell';
+import { renderEditBooleanCell } from '../components/cell/GridEditBooleanCell';
+import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
+import { getGridBooleanOperators } from './gridBooleanOperators';
+function gridBooleanFormatter(_ref) {
+  var value = _ref.value,
+    api = _ref.api;
+  return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
+}
+var stringToBoolean = function stringToBoolean(value) {
+  switch (value.toLowerCase().trim()) {
+    case 'true':
+    case 'yes':
+    case '1':
+      return true;
+    case 'false':
+    case 'no':
+    case '0':
+    case 'null':
+    case 'undefined':
+      return false;
+    default:
+      return undefined;
+  }
+};
+export var GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'boolean',
+  align: 'center',
+  headerAlign: 'center',
+  renderCell: renderBooleanCell,
+  renderEditCell: renderEditBooleanCell,
+  sortComparator: gridNumberComparator,
+  valueFormatter: gridBooleanFormatter,
+  filterOperators: getGridBooleanOperators(),
+  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined,
+  // @ts-ignore
+  aggregable: false,
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value) {
+    return stringToBoolean(value);
+  }
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridBooleanOperators.js

@@ -0,0 +1,17 @@
+import { GridFilterInputBoolean } from '../components/panel/filterPanel/GridFilterInputBoolean';
+import { convertLegacyOperators } from './utils';
+export var getGridBooleanOperators = function getGridBooleanOperators() {
+  return convertLegacyOperators([{
+    value: 'is',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (!filterItem.value) {
+        return null;
+      }
+      var valueAsBoolean = filterItem.value === 'true';
+      return function (value) {
+        return Boolean(value) === valueAsBoolean;
+      };
+    },
+    InputComponent: GridFilterInputBoolean
+  }]);
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridCheckboxSelectionColDef.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridCellCheckboxRenderer } from '../components/columnSelection/GridCellCheckboxRenderer';
+import { GridHeaderCheckbox } from '../components/columnSelection/GridHeaderCheckbox';
+import { selectedIdsLookupSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
+import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var GRID_CHECKBOX_SELECTION_FIELD = '__check__';
+export var GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {
+  field: GRID_CHECKBOX_SELECTION_FIELD,
+  type: 'checkboxSelection',
+  width: 50,
+  resizable: false,
+  sortable: false,
+  filterable: false,
+  // @ts-ignore
+  aggregable: false,
+  disableColumnMenu: true,
+  disableReorder: true,
+  disableExport: true,
+  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined,
+  valueGetter: function valueGetter(params) {
+    var selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
+    return selectionLookup[params.id] !== undefined;
+  },
+  renderHeader: function renderHeader(params) {
+    return /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params));
+  },
+  renderCell: function renderCell(params) {
+    return /*#__PURE__*/_jsx(GridCellCheckboxRenderer, _extends({}, params));
+  }
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridDateColDef.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { gridDateComparator } from '../hooks/features/sorting/gridSortingUtils';
+import { getGridDateOperators } from './gridDateOperators';
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { renderEditDateCell } from '../components/cell/GridEditDateCell';
+function throwIfNotDateObject(_ref) {
+  var value = _ref.value,
+    columnType = _ref.columnType,
+    rowId = _ref.rowId,
+    field = _ref.field;
+  if (!(value instanceof Date)) {
+    throw new Error(["MUI: `".concat(columnType, "` column type only accepts `Date` objects as values."), 'Use `valueGetter` to transform the value into a `Date` object.', "Row ID: ".concat(rowId, ", field: \"").concat(field, "\".")].join('\n'));
+  }
+}
+export function gridDateFormatter(_ref2) {
+  var value = _ref2.value,
+    field = _ref2.field,
+    id = _ref2.id;
+  if (!value) {
+    return '';
+  }
+  throwIfNotDateObject({
+    value: value,
+    columnType: 'date',
+    rowId: id,
+    field: field
+  });
+  return value.toLocaleDateString();
+}
+export function gridDateTimeFormatter(_ref3) {
+  var value = _ref3.value,
+    field = _ref3.field,
+    id = _ref3.id;
+  if (!value) {
+    return '';
+  }
+  throwIfNotDateObject({
+    value: value,
+    columnType: 'dateTime',
+    rowId: id,
+    field: field
+  });
+  return value.toLocaleString();
+}
+export var GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'date',
+  sortComparator: gridDateComparator,
+  valueFormatter: gridDateFormatter,
+  filterOperators: getGridDateOperators(),
+  renderEditCell: renderEditDateCell,
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value) {
+    return new Date(value);
+  }
+});
+export var GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'dateTime',
+  sortComparator: gridDateComparator,
+  valueFormatter: gridDateTimeFormatter,
+  filterOperators: getGridDateOperators(true),
+  renderEditCell: renderEditDateCell,
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value) {
+    return new Date(value);
+  }
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridDateOperators.js

@@ -0,0 +1,116 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { GridFilterInputDate } from '../components/panel/filterPanel/GridFilterInputDate';
+import { convertLegacyOperators } from './utils';
+var dateRegex = /(\d+)-(\d+)-(\d+)/;
+var dateTimeRegex = /(\d+)-(\d+)-(\d+)T(\d+):(\d+)/;
+function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
+  if (!filterItem.value) {
+    return null;
+  }
+  var _slice$map = filterItem.value.match(showTime ? dateTimeRegex : dateRegex).slice(1).map(Number),
+    _slice$map2 = _slicedToArray(_slice$map, 5),
+    year = _slice$map2[0],
+    month = _slice$map2[1],
+    day = _slice$map2[2],
+    hour = _slice$map2[3],
+    minute = _slice$map2[4];
+  var time = new Date(year, month - 1, day, hour || 0, minute || 0).getTime();
+  return function (value) {
+    if (!value) {
+      return false;
+    }
+    if (keepHours) {
+      return compareFn(value.getTime(), time);
+    }
+
+    // Make a copy of the date to not reset the hours in the original object
+    var dateCopy = new Date(value);
+    var timeToCompare = dateCopy.setHours(showTime ? value.getHours() : 0, showTime ? value.getMinutes() : 0, 0, 0);
+    return compareFn(timeToCompare, time);
+  };
+}
+export var getGridDateOperators = function getGridDateOperators(showTime) {
+  return convertLegacyOperators([{
+    value: 'is',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      return buildApplyFilterFn(filterItem, function (value1, value2) {
+        return value1 === value2;
+      }, showTime);
+    },
+    InputComponent: GridFilterInputDate,
+    InputComponentProps: {
+      type: showTime ? 'datetime-local' : 'date'
+    }
+  }, {
+    value: 'not',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      return buildApplyFilterFn(filterItem, function (value1, value2) {
+        return value1 !== value2;
+      }, showTime);
+    },
+    InputComponent: GridFilterInputDate,
+    InputComponentProps: {
+      type: showTime ? 'datetime-local' : 'date'
+    }
+  }, {
+    value: 'after',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      return buildApplyFilterFn(filterItem, function (value1, value2) {
+        return value1 > value2;
+      }, showTime);
+    },
+    InputComponent: GridFilterInputDate,
+    InputComponentProps: {
+      type: showTime ? 'datetime-local' : 'date'
+    }
+  }, {
+    value: 'onOrAfter',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      return buildApplyFilterFn(filterItem, function (value1, value2) {
+        return value1 >= value2;
+      }, showTime);
+    },
+    InputComponent: GridFilterInputDate,
+    InputComponentProps: {
+      type: showTime ? 'datetime-local' : 'date'
+    }
+  }, {
+    value: 'before',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      return buildApplyFilterFn(filterItem, function (value1, value2) {
+        return value1 < value2;
+      }, showTime, !showTime);
+    },
+    InputComponent: GridFilterInputDate,
+    InputComponentProps: {
+      type: showTime ? 'datetime-local' : 'date'
+    }
+  }, {
+    value: 'onOrBefore',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      return buildApplyFilterFn(filterItem, function (value1, value2) {
+        return value1 <= value2;
+      }, showTime);
+    },
+    InputComponent: GridFilterInputDate,
+    InputComponentProps: {
+      type: showTime ? 'datetime-local' : 'date'
+    }
+  }, {
+    value: 'isEmpty',
+    getApplyFilterFnV7: function getApplyFilterFnV7() {
+      return function (value) {
+        return value == null;
+      };
+    },
+    requiresFilterValue: false
+  }, {
+    value: 'isNotEmpty',
+    getApplyFilterFnV7: function getApplyFilterFnV7() {
+      return function (value) {
+        return value != null;
+      };
+    },
+    requiresFilterValue: false
+  }]);
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridDefaultColumnTypes.js

@@ -0,0 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { GRID_NUMERIC_COL_DEF } from './gridNumericColDef';
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from './gridDateColDef';
+import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
+import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from './gridActionsColDef';
+export var DEFAULT_GRID_COL_TYPE_KEY = '__default__';
+export var getGridDefaultColumnTypes = function getGridDefaultColumnTypes() {
+  var nativeColumnTypes = _defineProperty(_defineProperty({
+    string: GRID_STRING_COL_DEF,
+    number: GRID_NUMERIC_COL_DEF,
+    date: GRID_DATE_COL_DEF,
+    dateTime: GRID_DATETIME_COL_DEF,
+    boolean: GRID_BOOLEAN_COL_DEF,
+    singleSelect: GRID_SINGLE_SELECT_COL_DEF
+  }, GRID_ACTIONS_COLUMN_TYPE, GRID_ACTIONS_COL_DEF), DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF);
+  return nativeColumnTypes;
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridNumericColDef.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
+import { isNumber } from '../utils/utils';
+import { getGridNumericOperators, getGridNumericQuickFilterFn } from './gridNumericOperators';
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { convertQuickFilterV7ToLegacy } from './utils';
+export var GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'number',
+  align: 'right',
+  headerAlign: 'right',
+  sortComparator: gridNumberComparator,
+  valueParser: function valueParser(value) {
+    return value === '' ? null : Number(value);
+  },
+  valueFormatter: function valueFormatter(_ref) {
+    var value = _ref.value;
+    return isNumber(value) ? value.toLocaleString() : value || '';
+  },
+  filterOperators: getGridNumericOperators(),
+  getApplyQuickFilterFn: convertQuickFilterV7ToLegacy(getGridNumericQuickFilterFn),
+  getApplyQuickFilterFnV7: getGridNumericQuickFilterFn
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridNumericOperators.js

@@ -0,0 +1,146 @@
+import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
+import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+import { convertLegacyOperators, tagInternalFilter } from './utils';
+var parseNumericValue = function parseNumericValue(value) {
+  if (value == null) {
+    return null;
+  }
+  return Number(value);
+};
+export var getGridNumericQuickFilterFn = tagInternalFilter(function (value) {
+  if (value == null || Number.isNaN(value) || value === '') {
+    return null;
+  }
+  return function (columnValue) {
+    return parseNumericValue(columnValue) === parseNumericValue(value);
+  };
+});
+export var getGridNumericOperators = function getGridNumericOperators() {
+  return convertLegacyOperators([{
+    value: '=',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+        return null;
+      }
+      return function (value) {
+        return parseNumericValue(value) === filterItem.value;
+      };
+    },
+    InputComponent: GridFilterInputValue,
+    InputComponentProps: {
+      type: 'number'
+    }
+  }, {
+    value: '!=',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+        return null;
+      }
+      return function (value) {
+        return parseNumericValue(value) !== filterItem.value;
+      };
+    },
+    InputComponent: GridFilterInputValue,
+    InputComponentProps: {
+      type: 'number'
+    }
+  }, {
+    value: '>',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+        return null;
+      }
+      return function (value) {
+        if (value == null) {
+          return false;
+        }
+        return parseNumericValue(value) > filterItem.value;
+      };
+    },
+    InputComponent: GridFilterInputValue,
+    InputComponentProps: {
+      type: 'number'
+    }
+  }, {
+    value: '>=',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+        return null;
+      }
+      return function (value) {
+        if (value == null) {
+          return false;
+        }
+        return parseNumericValue(value) >= filterItem.value;
+      };
+    },
+    InputComponent: GridFilterInputValue,
+    InputComponentProps: {
+      type: 'number'
+    }
+  }, {
+    value: '<',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+        return null;
+      }
+      return function (value) {
+        if (value == null) {
+          return false;
+        }
+        return parseNumericValue(value) < filterItem.value;
+      };
+    },
+    InputComponent: GridFilterInputValue,
+    InputComponentProps: {
+      type: 'number'
+    }
+  }, {
+    value: '<=',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+        return null;
+      }
+      return function (value) {
+        if (value == null) {
+          return false;
+        }
+        return parseNumericValue(value) <= filterItem.value;
+      };
+    },
+    InputComponent: GridFilterInputValue,
+    InputComponentProps: {
+      type: 'number'
+    }
+  }, {
+    value: 'isEmpty',
+    getApplyFilterFnV7: function getApplyFilterFnV7() {
+      return function (value) {
+        return value == null;
+      };
+    },
+    requiresFilterValue: false
+  }, {
+    value: 'isNotEmpty',
+    getApplyFilterFnV7: function getApplyFilterFnV7() {
+      return function (value) {
+        return value != null;
+      };
+    },
+    requiresFilterValue: false
+  }, {
+    value: 'isAnyOf',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+        return null;
+      }
+      return function (value) {
+        return value != null && filterItem.value.includes(Number(value));
+      };
+    },
+    InputComponent: GridFilterInputMultipleValue,
+    InputComponentProps: {
+      type: 'number'
+    }
+  }]);
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridSingleSelectColDef.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { renderEditSingleSelectCell } from '../components/cell/GridEditSingleSelectCell';
+import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
+import { isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
+import { isObject } from '../utils/utils';
+var isArrayOfObjects = function isArrayOfObjects(options) {
+  return _typeof(options[0]) === 'object';
+};
+var defaultGetOptionValue = function defaultGetOptionValue(value) {
+  return isObject(value) ? value.value : value;
+};
+var defaultGetOptionLabel = function defaultGetOptionLabel(value) {
+  return isObject(value) ? value.label : String(value);
+};
+export var GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'singleSelect',
+  getOptionLabel: defaultGetOptionLabel,
+  getOptionValue: defaultGetOptionValue,
+  valueFormatter: function valueFormatter(params) {
+    var id = params.id,
+      field = params.field,
+      value = params.value,
+      api = params.api;
+    var colDef = params.api.getColumn(field);
+    if (!isSingleSelectColDef(colDef)) {
+      return '';
+    }
+    var valueOptions;
+    if (typeof colDef.valueOptions === 'function') {
+      valueOptions = colDef.valueOptions({
+        id: id,
+        row: id ? api.getRow(id) : null,
+        field: field
+      });
+    } else {
+      valueOptions = colDef.valueOptions;
+    }
+    if (value == null) {
+      return '';
+    }
+    if (!valueOptions) {
+      return value;
+    }
+    if (!isArrayOfObjects(valueOptions)) {
+      return colDef.getOptionLabel(value);
+    }
+    var valueOption = valueOptions.find(function (option) {
+      return colDef.getOptionValue(option) === value;
+    });
+    return valueOption ? colDef.getOptionLabel(valueOption) : '';
+  },
+  renderEditCell: renderEditSingleSelectCell,
+  filterOperators: getGridSingleSelectOperators(),
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value, params) {
+    var colDef = params.colDef;
+    var colDefValueOptions = colDef.valueOptions;
+    var valueOptions = typeof colDefValueOptions === 'function' ? colDefValueOptions({
+      field: colDef.field
+    }) : colDefValueOptions || [];
+    var getOptionValue = colDef.getOptionValue;
+    var valueOption = valueOptions.find(function (option) {
+      if (getOptionValue(option) === value) {
+        return true;
+      }
+      return false;
+    });
+    if (valueOption) {
+      return value;
+    }
+    // do not paste the value if it is not in the valueOptions
+    return undefined;
+  }
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridSingleSelectOperators.js

@@ -0,0 +1,47 @@
+import { GridFilterInputSingleSelect } from '../components/panel/filterPanel/GridFilterInputSingleSelect';
+import { GridFilterInputMultipleSingleSelect } from '../components/panel/filterPanel/GridFilterInputMultipleSingleSelect';
+import { isObject } from '../utils/utils';
+import { convertLegacyOperators } from './utils';
+var parseObjectValue = function parseObjectValue(value) {
+  if (value == null || !isObject(value)) {
+    return value;
+  }
+  return value.value;
+};
+export var getGridSingleSelectOperators = function getGridSingleSelectOperators() {
+  return convertLegacyOperators([{
+    value: 'is',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (filterItem.value == null || filterItem.value === '') {
+        return null;
+      }
+      return function (value) {
+        return parseObjectValue(value) === parseObjectValue(filterItem.value);
+      };
+    },
+    InputComponent: GridFilterInputSingleSelect
+  }, {
+    value: 'not',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (filterItem.value == null || filterItem.value === '') {
+        return null;
+      }
+      return function (value) {
+        return parseObjectValue(value) !== parseObjectValue(filterItem.value);
+      };
+    },
+    InputComponent: GridFilterInputSingleSelect
+  }, {
+    value: 'isAnyOf',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+        return null;
+      }
+      var filterItemValues = filterItem.value.map(parseObjectValue);
+      return function (value) {
+        return filterItemValues.includes(parseObjectValue(value));
+      };
+    },
+    InputComponent: GridFilterInputMultipleSingleSelect
+  }]);
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridStringColDef.js

@@ -0,0 +1,29 @@
+import { renderEditInputCell } from '../components/cell/GridEditInputCell';
+import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
+import { getGridStringOperators, getGridStringQuickFilterFn } from './gridStringOperators';
+import { convertQuickFilterV7ToLegacy } from './utils';
+
+/**
+ * TODO: Move pro and premium properties outside of this Community file
+ */
+export var GRID_STRING_COL_DEF = {
+  width: 100,
+  minWidth: 50,
+  maxWidth: Infinity,
+  hideable: true,
+  sortable: true,
+  resizable: true,
+  filterable: true,
+  groupable: true,
+  pinnable: true,
+  // @ts-ignore
+  aggregable: true,
+  editable: false,
+  sortComparator: gridStringOrNumberComparator,
+  type: 'string',
+  align: 'left',
+  filterOperators: getGridStringOperators(),
+  renderEditCell: renderEditInputCell,
+  getApplyQuickFilterFn: convertQuickFilterV7ToLegacy(getGridStringQuickFilterFn),
+  getApplyQuickFilterFnV7: getGridStringQuickFilterFn
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/gridStringOperators.js

@@ -0,0 +1,113 @@
+import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
+import { escapeRegExp } from '../utils/utils';
+import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+import { convertLegacyOperators, tagInternalFilter } from './utils';
+import { removeDiacritics } from '../hooks/features/filter/gridFilterUtils';
+export var getGridStringQuickFilterFn = tagInternalFilter(function (value) {
+  if (!value) {
+    return null;
+  }
+  var filterRegex = new RegExp(escapeRegExp(value), 'i');
+  return function (_, row, column, apiRef) {
+    var columnValue = apiRef.current.getRowFormattedValue(row, column);
+    if (apiRef.current.ignoreDiacritics) {
+      columnValue = removeDiacritics(columnValue);
+    }
+    return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
+  };
+});
+export var getGridStringOperators = function getGridStringOperators() {
+  var disableTrim = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return convertLegacyOperators([{
+    value: 'contains',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (!filterItem.value) {
+        return null;
+      }
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+      var filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');
+      return function (value) {
+        return value != null ? filterRegex.test(String(value)) : false;
+      };
+    },
+    InputComponent: GridFilterInputValue
+  }, {
+    value: 'equals',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (!filterItem.value) {
+        return null;
+      }
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+      var collator = new Intl.Collator(undefined, {
+        sensitivity: 'base',
+        usage: 'search'
+      });
+      return function (value) {
+        return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
+      };
+    },
+    InputComponent: GridFilterInputValue
+  }, {
+    value: 'startsWith',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (!filterItem.value) {
+        return null;
+      }
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+      var filterRegex = new RegExp("^".concat(escapeRegExp(filterItemValue), ".*$"), 'i');
+      return function (value) {
+        return value != null ? filterRegex.test(value.toString()) : false;
+      };
+    },
+    InputComponent: GridFilterInputValue
+  }, {
+    value: 'endsWith',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (!filterItem.value) {
+        return null;
+      }
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+      var filterRegex = new RegExp(".*".concat(escapeRegExp(filterItemValue), "$"), 'i');
+      return function (value) {
+        return value != null ? filterRegex.test(value.toString()) : false;
+      };
+    },
+    InputComponent: GridFilterInputValue
+  }, {
+    value: 'isEmpty',
+    getApplyFilterFnV7: function getApplyFilterFnV7() {
+      return function (value) {
+        return value === '' || value == null;
+      };
+    },
+    requiresFilterValue: false
+  }, {
+    value: 'isNotEmpty',
+    getApplyFilterFnV7: function getApplyFilterFnV7() {
+      return function (value) {
+        return value !== '' && value != null;
+      };
+    },
+    requiresFilterValue: false
+  }, {
+    value: 'isAnyOf',
+    getApplyFilterFnV7: function getApplyFilterFnV7(filterItem) {
+      if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+        return null;
+      }
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.map(function (val) {
+        return val.trim();
+      });
+      var collator = new Intl.Collator(undefined, {
+        sensitivity: 'base',
+        usage: 'search'
+      });
+      return function (value) {
+        return value != null ? filterItemValue.some(function (filterValue) {
+          return collator.compare(filterValue, value.toString() || '') === 0;
+        }) : false;
+      };
+    },
+    InputComponent: GridFilterInputMultipleValue
+  }]);
+};

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

@@ -0,0 +1,13 @@
+export * from './gridActionsColDef';
+export * from './gridBooleanColDef';
+export * from './gridCheckboxSelectionColDef';
+export * from './gridDateColDef';
+export * from './gridNumericColDef';
+export * from './gridSingleSelectColDef';
+export * from './gridStringColDef';
+export * from './gridBooleanOperators';
+export * from './gridDateOperators';
+export * from './gridNumericOperators';
+export * from './gridSingleSelectOperators';
+export * from './gridStringOperators';
+export * from './gridDefaultColumnTypes';

control-plane-ui/node_modules/@mui/x-data-grid/legacy/colDef/utils.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/**
+ * A global API ref, for v7-to-legacy converter
+ */
+export var GLOBAL_API_REF = {
+  current: null
+};
+
+/**
+ * A tagger to determine if the filter is internal or custom user-supplied.
+ * To be a valid internal filter, the v7 function *must* be defined/redefined at
+ * the same time as the legacy one.
+ * https://github.com/mui/mui-x/pull/9254#discussion_r1231095551
+ */
+export function tagInternalFilter(fn) {
+  fn.isInternal = true;
+  return fn;
+}
+export function isInternalFilter(fn) {
+  return fn !== undefined && fn.isInternal === true;
+}
+export function convertFilterV7ToLegacy(fn) {
+  return tagInternalFilter(function (filterItem, column) {
+    var filterFn = fn(filterItem, column);
+    if (!filterFn) {
+      return filterFn;
+    }
+    return function (cellParams) {
+      return filterFn(cellParams.value, cellParams.row, column, GLOBAL_API_REF.current);
+    };
+  });
+}
+export function convertLegacyOperators(ops) {
+  return ops.map(function (op) {
+    return _extends({}, op, {
+      getApplyFilterFn: convertFilterV7ToLegacy(op.getApplyFilterFnV7),
+      getApplyFilterFnV7: tagInternalFilter(op.getApplyFilterFnV7)
+    });
+  });
+}
+export function convertQuickFilterV7ToLegacy(fn) {
+  return tagInternalFilter(function (filterItem, column, apiRef) {
+    var filterFn = fn(filterItem, column, apiRef);
+    if (!filterFn) {
+      return filterFn;
+    }
+    return function (cellParams) {
+      return filterFn(cellParams.value, cellParams.row, column, apiRef);
+    };
+  });
+}

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

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className"];
+import * as React from 'react';
+import { GridVirtualScroller } from './virtualization/GridVirtualScroller';
+import { GridVirtualScrollerContent } from './virtualization/GridVirtualScrollerContent';
+import { GridVirtualScrollerRenderZone } from './virtualization/GridVirtualScrollerRenderZone';
+import { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+import { GridOverlays } from './base/GridOverlays';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridVirtualScroller(props, ref) {
+  var className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var _useGridVirtualScroll = useGridVirtualScroller({
+      ref: ref
+    }),
+    getRootProps = _useGridVirtualScroll.getRootProps,
+    getContentProps = _useGridVirtualScroll.getContentProps,
+    getRenderZoneProps = _useGridVirtualScroll.getRenderZoneProps,
+    getRows = _useGridVirtualScroll.getRows;
+  return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({
+    className: className
+  }, getRootProps(other), {
+    children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(GridVirtualScrollerContent, _extends({}, getContentProps(), {
+      children: /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
+        children: getRows()
+      }))
+    }))]
+  }));
+});
+export { DataGridVirtualScroller };

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export var GridApiContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  GridApiContext.displayName = 'GridApiContext';
+}

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

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { refType } from '@mui/utils';
+import { fastMemo } from '../utils/fastMemo';
+import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
+import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+  var innerRef = props.innerRef,
+    className = props.className,
+    visibleColumns = props.visibleColumns,
+    sortColumnLookup = props.sortColumnLookup,
+    filterColumnLookup = props.filterColumnLookup,
+    columnPositions = props.columnPositions,
+    columnHeaderTabIndexState = props.columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState = props.columnGroupHeaderTabIndexState,
+    columnHeaderFocus = props.columnHeaderFocus,
+    columnGroupHeaderFocus = props.columnGroupHeaderFocus,
+    densityFactor = props.densityFactor,
+    headerGroupingMaxDepth = props.headerGroupingMaxDepth,
+    columnMenuState = props.columnMenuState,
+    columnVisibility = props.columnVisibility,
+    columnGroupsHeaderStructure = props.columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence = props.hasOtherElementInTabSequence,
+    other = _objectWithoutProperties(props, _excluded);
+  var _useGridColumnHeaders = useGridColumnHeaders({
+      innerRef: innerRef,
+      visibleColumns: visibleColumns,
+      sortColumnLookup: sortColumnLookup,
+      filterColumnLookup: filterColumnLookup,
+      columnPositions: columnPositions,
+      columnHeaderTabIndexState: columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+      columnHeaderFocus: columnHeaderFocus,
+      columnGroupHeaderFocus: columnGroupHeaderFocus,
+      densityFactor: densityFactor,
+      headerGroupingMaxDepth: headerGroupingMaxDepth,
+      columnMenuState: columnMenuState,
+      columnVisibility: columnVisibility,
+      columnGroupsHeaderStructure: columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence
+    }),
+    isDragging = _useGridColumnHeaders.isDragging,
+    getRootProps = _useGridColumnHeaders.getRootProps,
+    getInnerProps = _useGridColumnHeaders.getInnerProps,
+    getColumnHeaders = _useGridColumnHeaders.getColumnHeaders,
+    getColumnGroupHeaders = _useGridColumnHeaders.getColumnGroupHeaders;
+  return /*#__PURE__*/_jsx(GridBaseColumnHeaders, _extends({
+    ref: ref
+  }, getRootProps(other), {
+    children: /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: [getColumnGroupHeaders(), getColumnHeaders()]
+    }))
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnGroupHeaderFocus: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupHeaderTabIndexState: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupsHeaderStructure: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
+    columnFields: PropTypes.arrayOf(PropTypes.string).isRequired,
+    groupId: PropTypes.string
+  }))).isRequired,
+  columnHeaderFocus: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnHeaderTabIndexState: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnMenuState: PropTypes.shape({
+    field: PropTypes.string,
+    open: PropTypes.bool.isRequired
+  }).isRequired,
+  columnPositions: PropTypes.arrayOf(PropTypes.number).isRequired,
+  columnVisibility: PropTypes.object.isRequired,
+  densityFactor: PropTypes.number.isRequired,
+  filterColumnLookup: PropTypes.object.isRequired,
+  hasOtherElementInTabSequence: PropTypes.bool.isRequired,
+  headerGroupingMaxDepth: PropTypes.number.isRequired,
+  innerRef: refType,
+  minColumnIndex: PropTypes.number,
+  sortColumnLookup: PropTypes.object.isRequired,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+} : void 0;
+var MemoizedGridColumnHeaders = fastMemo(GridColumnHeaders);
+export { MemoizedGridColumnHeaders as GridColumnHeaders };

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

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
+import { selectedGridRowsCountSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
+import { gridFilteredTopLevelRowCountSelector } from '../hooks/features/filter/gridFilterSelector';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridSelectedRowCount } from './GridSelectedRowCount';
+import { GridFooterContainer } from './containers/GridFooterContainer';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
+  var selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector);
+  var visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
+  var selectedRowCountElement = !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? /*#__PURE__*/_jsx(GridSelectedRowCount, {
+    selectedRowCount: selectedRowCount
+  }) : /*#__PURE__*/_jsx("div", {});
+  var rowCountElement = !rootProps.hideFooterRowCount && !rootProps.pagination ? /*#__PURE__*/_jsx(rootProps.slots.footerRowCount, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footerRowCount, {
+    rowCount: totalTopLevelRowCount,
+    visibleRowCount: visibleTopLevelRowCount
+  })) : null;
+  var paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.pagination));
+  return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
+    ref: ref
+  }, props, {
+    children: [selectedRowCountElement, rowCountElement, paginationElement]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridFooter.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 { GridFooter };

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

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function GridHeader() {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  var rootProps = useGridRootProps();
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.preferencesPanel, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.preferencesPanel)), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.toolbar))]
+  });
+}

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

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import CircularProgress from '@mui/material/CircularProgress';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, props, {
+    children: /*#__PURE__*/_jsx(CircularProgress, {})
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridLoadingOverlay.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 { GridLoadingOverlay };

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

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var GridNoResultsOverlay = /*#__PURE__*/React.forwardRef(function GridNoResultsOverlay(props, ref) {
+  var apiRef = useGridApiContext();
+  var noResultsOverlayLabel = apiRef.current.getLocaleText('noResultsOverlayLabel');
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, props, {
+    children: noResultsOverlayLabel
+  }));
+});

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

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+  var apiRef = useGridApiContext();
+  var noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, props, {
+    children: noRowsLabel
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridNoRowsOverlay.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 { GridNoRowsOverlay };

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

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
+import { styled } from '@mui/material/styles';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridPaginationModelSelector, gridPaginationRowCountSelector } from '../hooks/features/pagination/gridPaginationSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridPaginationRoot = styled(TablePagination)(function (_ref) {
+  var theme = _ref.theme;
+  return _defineProperty(_defineProperty({}, "& .".concat(tablePaginationClasses.selectLabel), _defineProperty({
+    display: 'none'
+  }, theme.breakpoints.up('sm'), {
+    display: 'block'
+  })), "& .".concat(tablePaginationClasses.input), _defineProperty({
+    display: 'none'
+  }, theme.breakpoints.up('sm'), {
+    display: 'inline-flex'
+  }));
+});
+
+// A mutable version of a readonly array.
+
+var GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
+  var rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);
+  var lastPage = React.useMemo(function () {
+    return Math.floor(rowCount / (paginationModel.pageSize || 1));
+  }, [rowCount, paginationModel.pageSize]);
+  var handlePageSizeChange = React.useCallback(function (event) {
+    var pageSize = Number(event.target.value);
+    apiRef.current.setPageSize(pageSize);
+  }, [apiRef]);
+  var handlePageChange = React.useCallback(function (_, page) {
+    apiRef.current.setPage(page);
+  }, [apiRef]);
+  var isPageSizeIncludedInPageSizeOptions = function isPageSizeIncludedInPageSizeOptions(pageSize) {
+    for (var i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      var option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
+          return true;
+        }
+      } else if (option.value === pageSize) {
+        return true;
+      }
+    }
+    return false;
+  };
+  if (process.env.NODE_ENV !== 'production') {
+    var _rootProps$pagination, _rootProps$pagination2;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var warnedOnceMissingInPageSizeOptions = React.useRef(false);
+    var pageSize = (_rootProps$pagination = (_rootProps$pagination2 = rootProps.paginationModel) == null ? void 0 : _rootProps$pagination2.pageSize) != null ? _rootProps$pagination : paginationModel.pageSize;
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
+      console.warn(["MUI X: The page size `".concat(paginationModel.pageSize, "` is not preset in the `pageSizeOptions`."), "Add it to show the pagination select."].join('\n'));
+      warnedOnceMissingInPageSizeOptions.current = true;
+    }
+  }
+  var pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
+  return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
+    ref: ref,
+    component: "div",
+    count: rowCount,
+    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage
+    // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
+    // for x-data-grid is past the fix.
+    // Note that Material UI will not mutate the array, so this is safe.
+    ,
+    rowsPerPageOptions: pageSizeOptions,
+    rowsPerPage: paginationModel.pageSize,
+    onPageChange: handlePageChange,
+    onRowsPerPageChange: handlePageSizeChange
+  }, apiRef.current.getLocaleText('MuiTablePagination'), props));
+});
+process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  component: PropTypes.elementType
+} : void 0;
+export { GridPagination };

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

@@ -0,0 +1,388 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { fastMemo } from '../utils/fastMemo';
+import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
+import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
+import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
+import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
+import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
+import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
+import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
+import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { randomNumberBetween } from '../utils/utils';
+import { GridCellWrapper, GridCellV7 } from './cell/GridCell';
+import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var editable = ownerState.editable,
+    editing = ownerState.editing,
+    selected = ownerState.selected,
+    isLastVisible = ownerState.isLastVisible,
+    rowHeight = ownerState.rowHeight,
+    classes = ownerState.classes;
+  var slots = {
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function EmptyCell(_ref) {
+  var width = _ref.width;
+  if (!width) {
+    return null;
+  }
+  var style = {
+    width: width
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(gridClasses.cell, " ").concat(gridClasses.withBorderColor),
+    style: style
+  }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
+}
+var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
+  var selected = props.selected,
+    hovered = props.hovered,
+    rowId = props.rowId,
+    row = props.row,
+    index = props.index,
+    styleProp = props.style,
+    position = props.position,
+    rowHeight = props.rowHeight,
+    className = props.className,
+    visibleColumns = props.visibleColumns,
+    renderedColumns = props.renderedColumns,
+    containerWidth = props.containerWidth,
+    firstColumnToRender = props.firstColumnToRender,
+    lastColumnToRender = props.lastColumnToRender,
+    _props$isLastVisible = props.isLastVisible,
+    isLastVisible = _props$isLastVisible === void 0 ? false : _props$isLastVisible,
+    focusedCellColumnIndexNotInRange = props.focusedCellColumnIndexNotInRange,
+    isNotVisible = props.isNotVisible,
+    focusedCell = props.focusedCell,
+    tabbableCell = props.tabbableCell,
+    onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onMouseOut = props.onMouseOut,
+    onMouseOver = props.onMouseOver,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var ref = React.useRef(null);
+  var rootProps = useGridRootProps();
+  var currentPage = useGridVisibleRows(apiRef, rootProps);
+  var columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  var sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  var treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  var editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
+  var handleRef = useForkRef(ref, refProp);
+  var ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
+
+  var ownerState = {
+    selected: selected,
+    hovered: hovered,
+    isLastVisible: isLastVisible,
+    classes: rootProps.classes,
+    editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
+    editable: rootProps.editMode === GridEditModes.Row,
+    rowHeight: rowHeight
+  };
+  var classes = useUtilityClasses(ownerState);
+  React.useLayoutEffect(function () {
+    if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
+      // Fallback for IE
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight, position);
+    }
+  }, [apiRef, rowHeight, rowId, position]);
+  React.useLayoutEffect(function () {
+    if (currentPage.range) {
+      // The index prop is relative to the rows from all pages. As example, the index prop of the
+      // first row is 5 if `paginationModel.pageSize=5` and `paginationModel.page=1`. However, the index used by the virtualization
+      // doesn't care about pagination and considers the rows from the current page only, so the
+      // first row always has index=0. We need to subtract the index of the first row to make it
+      // compatible with the index used by the virtualization.
+      var rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
+      // pinned rows are not part of the visible rows
+      if (rowIndex != null) {
+        apiRef.current.unstable_setLastMeasuredRowIndex(rowIndex);
+      }
+    }
+    var rootElement = ref.current;
+    var hasFixedHeight = rowHeight !== 'auto';
+    if (!rootElement || hasFixedHeight || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var _entries = _slicedToArray(entries, 1),
+        entry = _entries[0];
+      var height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height, position);
+    });
+    resizeObserver.observe(rootElement);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
+  var publish = React.useCallback(function (eventName, propHandler) {
+    return function (event) {
+      // Ignore portal
+      if (isEventTargetInPortal(event)) {
+        return;
+      }
+
+      // The row might have been deleted
+      if (!apiRef.current.getRow(rowId)) {
+        return;
+      }
+      apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(rowId), event);
+      if (propHandler) {
+        propHandler(event);
+      }
+    };
+  }, [apiRef, rowId]);
+  var publishClick = React.useCallback(function (event) {
+    var cell = findParentElementFromClassName(event.target, gridClasses.cell);
+    var field = cell == null ? void 0 : cell.getAttribute('data-field');
+
+    // Check if the field is available because the cell that fills the empty
+    // space of the row has no field.
+    if (field) {
+      // User clicked in the checkbox added by checkboxSelection
+      if (field === GRID_CHECKBOX_SELECTION_COL_DEF.field) {
+        return;
+      }
+
+      // User opened a detail panel
+      if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+        return;
+      }
+
+      // User reorders a row
+      if (field === '__reorder__') {
+        return;
+      }
+
+      // User is editing a cell
+      if (apiRef.current.getCellMode(rowId, field) === GridCellModes.Edit) {
+        return;
+      }
+
+      // User clicked a button from the "actions" column type
+      var column = apiRef.current.getColumn(field);
+      if ((column == null ? void 0 : column.type) === GRID_ACTIONS_COLUMN_TYPE) {
+        return;
+      }
+    }
+    publish('rowClick', onClick)(event);
+  }, [apiRef, onClick, publish, rowId]);
+  var slots = rootProps.slots,
+    slotProps = rootProps.slotProps,
+    disableColumnReorder = rootProps.disableColumnReorder;
+  var CellComponent = slots.cell === GridCellV7 ? GridCellV7 : GridCellWrapper;
+  var rowReordering = rootProps.rowReordering;
+  var getCell = function getCell(column, cellProps) {
+    var _editRowsState$rowId$, _editRowsState$rowId;
+    var disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
+    var editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
+    var cellIsNotVisible = false;
+    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+      cellIsNotVisible = true;
+    }
+    return /*#__PURE__*/_jsx(CellComponent, _extends({
+      column: column,
+      width: cellProps.width,
+      rowId: rowId,
+      height: rowHeight,
+      showRightBorder: cellProps.showRightBorder,
+      align: column.align || 'left',
+      colIndex: cellProps.indexRelativeToAllColumns,
+      colSpan: cellProps.colSpan,
+      disableDragEvents: disableDragEvents,
+      editCellState: editCellState,
+      isNotVisible: cellIsNotVisible
+    }, slotProps == null ? void 0 : slotProps.cell), column.field);
+  };
+  var sizes = useGridSelector(apiRef, function () {
+    return _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId));
+  }, objectShallowCompare);
+  var minHeight = rowHeight;
+  if (minHeight === 'auto' && sizes) {
+    var numberOfBaseSizes = 0;
+    var maximumSize = Object.entries(sizes).reduce(function (acc, _ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        size = _ref3[1];
+      var isBaseHeight = /^base[A-Z]/.test(key);
+      if (!isBaseHeight) {
+        return acc;
+      }
+      numberOfBaseSizes += 1;
+      if (size > acc) {
+        return size;
+      }
+      return acc;
+    }, 0);
+    if (maximumSize > 0 && numberOfBaseSizes > 1) {
+      minHeight = maximumSize;
+    }
+  }
+  var style = React.useMemo(function () {
+    if (isNotVisible) {
+      return {
+        opacity: 0,
+        width: 0,
+        height: 0
+      };
+    }
+    var rowStyle = _extends({}, styleProp, {
+      maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+      // max-height doesn't support "auto"
+      minHeight: minHeight
+    });
+    if (sizes != null && sizes.spacingTop) {
+      var property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+      rowStyle[property] = sizes.spacingTop;
+    }
+    if (sizes != null && sizes.spacingBottom) {
+      var _property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+      var propertyValue = rowStyle[_property];
+      // avoid overriding existing value
+      if (typeof propertyValue !== 'number') {
+        propertyValue = parseInt(propertyValue || '0', 10);
+      }
+      propertyValue += sizes.spacingBottom;
+      rowStyle[_property] = propertyValue;
+    }
+    return rowStyle;
+  }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
+  var rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
+  if (typeof rootProps.getRowClassName === 'function') {
+    var _currentPage$range;
+    var indexRelativeToCurrentPage = index - (((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0);
+    var rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage: indexRelativeToCurrentPage
+    });
+    rowClassNames.push(rootProps.getRowClassName(rowParams));
+  }
+  var randomNumber = randomNumberBetween(10000, 20, 80);
+  var rowNode = apiRef.current.getRowNode(rowId);
+  if (!rowNode) {
+    return null;
+  }
+  var rowType = rowNode.type;
+  var cells = [];
+  for (var i = 0; i < renderedColumns.length; i += 1) {
+    var column = renderedColumns[i];
+    var indexRelativeToAllColumns = firstColumnToRender + i;
+    if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) {
+      if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+        indexRelativeToAllColumns = focusedCellColumnIndexNotInRange;
+      } else {
+        indexRelativeToAllColumns -= 1;
+      }
+    }
+    var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+      if (rowType !== 'skeletonRow') {
+        var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
+          colSpan = _cellColSpanInfo$cell.colSpan,
+          width = _cellColSpanInfo$cell.width;
+        var cellProps = {
+          width: width,
+          colSpan: colSpan,
+          showRightBorder: rootProps.showCellVerticalBorder,
+          indexRelativeToAllColumns: indexRelativeToAllColumns
+        };
+        cells.push(getCell(column, cellProps));
+      } else {
+        var _width = cellColSpanInfo.cellProps.width;
+        var contentWidth = Math.round(randomNumber());
+        cells.push( /*#__PURE__*/_jsx(slots.skeletonCell, {
+          width: _width,
+          contentWidth: contentWidth,
+          field: column.field,
+          align: column.align
+        }, column.field));
+      }
+    }
+  }
+  var emptyCellWidth = containerWidth - columnsTotalWidth;
+  var eventHandlers = row ? {
+    onClick: publishClick,
+    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
+    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave),
+    onMouseOut: publish('rowMouseOut', onMouseOut),
+    onMouseOver: publish('rowMouseOver', onMouseOver)
+  } : null;
+  return /*#__PURE__*/_jsxs("div", _extends({
+    ref: handleRef,
+    "data-id": rowId,
+    "data-rowindex": index,
+    role: "row",
+    className: clsx.apply(void 0, _toConsumableArray(rowClassNames).concat([classes.root, className, hovered && 'Mui-hovered'])),
+    "aria-rowindex": ariaRowIndex,
+    "aria-selected": selected,
+    style: style
+  }, eventHandlers, other, {
+    children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
+      width: emptyCellWidth
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  containerWidth: PropTypes.number.isRequired,
+  firstColumnToRender: PropTypes.number.isRequired,
+  /**
+   * Determines which cell has focus.
+   * If `null`, no cell in this row has focus.
+   */
+  focusedCell: PropTypes.string,
+  focusedCellColumnIndexNotInRange: PropTypes.number,
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
+  index: PropTypes.number.isRequired,
+  isLastVisible: PropTypes.bool,
+  isNotVisible: PropTypes.bool,
+  lastColumnToRender: PropTypes.number.isRequired,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  position: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  row: PropTypes.object,
+  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  selected: PropTypes.bool.isRequired,
+  /**
+   * Determines which cell should be tabbable by having tabIndex=0.
+   * If `null`, no cell in this row is in the tab sequence.
+   */
+  tabbableCell: PropTypes.string,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+} : void 0;
+var MemoizedGridRow = fastMemo(GridRow);
+export { MemoizedGridRow as GridRow };

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

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "rowCount", "visibleRowCount"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../constants/gridClasses';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['rowCount']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridRowCountRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'RowCount',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.rowCount;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    margin: theme.spacing(0, 2)
+  };
+});
+var GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props, ref) {
+  var className = props.className,
+    rowCount = props.rowCount,
+    visibleRowCount = props.visibleRowCount,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var ownerState = useGridRootProps();
+  var classes = useUtilityClasses(ownerState);
+  if (rowCount === 0) {
+    return null;
+  }
+  var text = visibleRowCount < rowCount ? apiRef.current.getLocaleText('footerTotalVisibleRows')(visibleRowCount, rowCount) : rowCount.toLocaleString();
+  return /*#__PURE__*/_jsxs(GridRowCountRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState
+  }, other, {
+    children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  rowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  visibleRowCount: PropTypes.number.isRequired
+} : void 0;
+export { GridRowCount };

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

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["className", "selectedRowCount"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../constants/gridClasses';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['selectedRowCount']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridSelectedRowCountRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'SelectedRowCount',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.selectedRowCount;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _defineProperty({
+    alignItems: 'center',
+    display: 'flex',
+    margin: theme.spacing(0, 2),
+    visibility: 'hidden',
+    width: 0,
+    height: 0
+  }, theme.breakpoints.up('sm'), {
+    visibility: 'visible',
+    width: 'auto',
+    height: 'auto'
+  });
+});
+var GridSelectedRowCount = /*#__PURE__*/React.forwardRef(function GridSelectedRowCount(props, ref) {
+  var className = props.className,
+    selectedRowCount = props.selectedRowCount,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var ownerState = useGridRootProps();
+  var classes = useUtilityClasses(ownerState);
+  var rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
+  return /*#__PURE__*/_jsx(GridSelectedRowCountRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState
+  }, other, {
+    children: rowSelectedText
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridSelectedRowCount.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  selectedRowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridSelectedRowCount };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/base/GridBody.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { GridMainContainer } from '../containers/GridMainContainer';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridColumnPositionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector';
+import { gridSortColumnLookupSelector } from '../../hooks/features/sorting/gridSortingSelector';
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, unstable_gridTabIndexColumnGroupHeaderSelector, unstable_gridFocusColumnGroupHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
+import { gridDensityFactorSelector } from '../../hooks/features/density/densitySelector';
+import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMenuSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridBody(props) {
+  var VirtualScrollerComponent = props.VirtualScrollerComponent,
+    ColumnHeadersProps = props.ColumnHeadersProps,
+    children = props.children;
+  var apiRef = useGridPrivateApiContext();
+  var rootProps = useGridRootProps();
+  var rootRef = React.useRef(null);
+  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  var columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  var cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  var columnGroupHeaderTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnGroupHeaderSelector);
+  var columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  var columnGroupHeaderFocus = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
+  var densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  var columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  var columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  var columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
+  var hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+  useEnhancedEffect(function () {
+    apiRef.current.computeSizeAndPublishResizeEvent();
+    var elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return function () {};
+    }
+    var animationFrame;
+    var observer = new ResizeObserver(function () {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = requestAnimationFrame(function () {
+        apiRef.current.computeSizeAndPublishResizeEvent();
+      });
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return function () {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [apiRef]);
+  var columnHeadersRef = React.useRef(null);
+  var columnsContainerRef = React.useRef(null);
+  var virtualScrollerRef = React.useRef(null);
+  apiRef.current.register('private', {
+    columnHeadersContainerElementRef: columnsContainerRef,
+    columnHeadersElementRef: columnHeadersRef,
+    virtualScrollerRef: virtualScrollerRef,
+    mainElementRef: rootRef
+  });
+  var hasDimensions = !!apiRef.current.getRootDimensions();
+  return /*#__PURE__*/_jsxs(GridMainContainer, {
+    ref: rootRef,
+    children: [/*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
+      ref: columnsContainerRef,
+      innerRef: columnHeadersRef,
+      visibleColumns: visibleColumns,
+      filterColumnLookup: filterColumnLookup,
+      sortColumnLookup: sortColumnLookup,
+      columnPositions: columnPositions,
+      columnHeaderTabIndexState: columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+      columnHeaderFocus: columnHeaderFocus,
+      columnGroupHeaderFocus: columnGroupHeaderFocus,
+      densityFactor: densityFactor,
+      headerGroupingMaxDepth: headerGroupingMaxDepth,
+      columnMenuState: columnMenuState,
+      columnVisibility: columnVisibility,
+      columnGroupsHeaderStructure: columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence
+    }, ColumnHeadersProps)), hasDimensions && /*#__PURE__*/_jsx(VirtualScrollerComponent
+    // The content is only rendered after dimensions are computed because
+    // the lazy-loading hook is listening to `renderedRowsIntervalChange`,
+    // but only does something if the dimensions are also available.
+    // If this event is published while dimensions haven't been computed,
+    // the `onFetchRows` prop won't be called during mount.
+    , {
+      ref: virtualScrollerRef
+    }), children]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  ColumnHeadersProps: PropTypes.object,
+  VirtualScrollerComponent: PropTypes.elementType.isRequired
+} : void 0;
+export { GridBody };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/base/GridFooterPlaceholder.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GridFooterPlaceholder() {
+  var _rootProps$slotProps;
+  var rootProps = useGridRootProps();
+  if (rootProps.hideFooter) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer));
+}

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/base/GridOverlays.js

@@ -0,0 +1,137 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import clsx from 'clsx';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridExpandedRowCountSelector } from '../../hooks/features/filter/gridFilterSelector';
+import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getMinimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridOverlayWrapperRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapper',
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'overlayType';
+  },
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.overlayWrapper;
+  }
+})(function (_ref) {
+  var overlayType = _ref.overlayType;
+  return {
+    position: 'sticky',
+    // To stay in place while scrolling
+    top: 0,
+    left: 0,
+    width: 0,
+    // To stay above the content instead of shifting it down
+    height: 0,
+    // To stay above the content instead of shifting it down
+    zIndex: overlayType === 'loadingOverlay' ? 5 // Should be above pinned columns, pinned rows, and detail panel
+    : 4 // Should be above pinned columns and detail panel
+  };
+});
+var GridOverlayWrapperInner = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapperInner',
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'overlayType';
+  },
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.overlayWrapperInner;
+  }
+})({});
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['overlayWrapper'],
+    inner: ['overlayWrapperInner']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridOverlayWrapper(props) {
+  var _viewportInnerSize$he, _viewportInnerSize$wi;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var _React$useState = React.useState(function () {
+      var _apiRef$current$getRo, _apiRef$current$getRo2;
+      return (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize) != null ? _apiRef$current$getRo : null;
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    viewportInnerSize = _React$useState2[0],
+    setViewportInnerSize = _React$useState2[1];
+  var handleViewportSizeChange = React.useCallback(function () {
+    var _apiRef$current$getRo3, _apiRef$current$getRo4;
+    setViewportInnerSize((_apiRef$current$getRo3 = (_apiRef$current$getRo4 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo4.viewportInnerSize) != null ? _apiRef$current$getRo3 : null);
+  }, [apiRef]);
+  useEnhancedEffect(function () {
+    return apiRef.current.subscribeEvent('viewportInnerSizeChange', handleViewportSizeChange);
+  }, [apiRef, handleViewportSizeChange]);
+  var height = (_viewportInnerSize$he = viewportInnerSize == null ? void 0 : viewportInnerSize.height) != null ? _viewportInnerSize$he : 0;
+  if (rootProps.autoHeight && height === 0) {
+    height = getMinimalContentHeight(apiRef, rootProps.rowHeight); // Give room to show the overlay when there no rows.
+  }
+  var classes = useUtilityClasses(_extends({}, props, {
+    classes: rootProps.classes
+  }));
+  if (!viewportInnerSize) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, {
+    className: clsx(classes.root),
+    overlayType: props.overlayType,
+    children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
+      className: clsx(classes.inner),
+      style: {
+        height: height,
+        width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0
+      }
+    }, props))
+  });
+}
+process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  overlayType: PropTypes.string.isRequired
+} : void 0;
+export function GridOverlays() {
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  var visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
+  var loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  var showNoRowsOverlay = !loading && totalRowCount === 0;
+  var showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
+  var overlay = null;
+  var overlayType = '';
+  if (showNoRowsOverlay) {
+    var _rootProps$slotProps;
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.noRowsOverlay, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.noRowsOverlay));
+    overlayType = 'noRowsOverlay';
+  }
+  if (showNoResultsOverlay) {
+    var _rootProps$slotProps2;
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.noResultsOverlay, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.noResultsOverlay));
+    overlayType = 'noResultsOverlay';
+  }
+  if (loading) {
+    var _rootProps$slotProps3;
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.loadingOverlay, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.loadingOverlay));
+    overlayType = 'loadingOverlay';
+  }
+  if (overlay === null) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridOverlayWrapper, {
+    overlayType: overlayType,
+    children: overlay
+  });
+}

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

@@ -0,0 +1,3 @@
+export * from './GridBody';
+export * from './GridFooterPlaceholder';
+export * from './GridOverlays';

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/cell/GridActionsCell.js

@@ -0,0 +1,294 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuList from '@mui/material/MenuList';
+import { useTheme } from '@mui/material/styles';
+import { unstable_useId as useId } from '@mui/utils';
+import { gridClasses } from '../../constants/gridClasses';
+import { GridMenu } from '../menu/GridMenu';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var hasActions = function hasActions(colDef) {
+  return typeof colDef.getActions === 'function';
+};
+function GridActionsCell(props) {
+  var _rootProps$slotProps;
+  var api = props.api,
+    colDef = props.colDef,
+    id = props.id,
+    hasFocus = props.hasFocus,
+    isEditable = props.isEditable,
+    field = props.field,
+    value = props.value,
+    formattedValue = props.formattedValue,
+    row = props.row,
+    rowNode = props.rowNode,
+    cellMode = props.cellMode,
+    tabIndex = props.tabIndex,
+    _props$position = props.position,
+    position = _props$position === void 0 ? 'bottom-end' : _props$position,
+    focusElementRef = props.focusElementRef,
+    other = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React.useState(-1),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedButtonIndex = _React$useState2[0],
+    setFocusedButtonIndex = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    open = _React$useState4[0],
+    setOpen = _React$useState4[1];
+  var apiRef = useGridApiContext();
+  var rootRef = React.useRef(null);
+  var buttonRef = React.useRef(null);
+  var ignoreCallToFocus = React.useRef(false);
+  var touchRippleRefs = React.useRef({});
+  var theme = useTheme();
+  var menuId = useId();
+  var buttonId = useId();
+  var rootProps = useGridRootProps();
+  if (!hasActions(colDef)) {
+    throw new Error('MUI: Missing the `getActions` property in the `GridColDef`.');
+  }
+  var options = colDef.getActions(apiRef.current.getRowParams(id));
+  var iconButtons = options.filter(function (option) {
+    return !option.props.showInMenu;
+  });
+  var menuButtons = options.filter(function (option) {
+    return option.props.showInMenu;
+  });
+  var numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
+  React.useLayoutEffect(function () {
+    if (!hasFocus) {
+      Object.entries(touchRippleRefs.current).forEach(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          index = _ref2[0],
+          ref = _ref2[1];
+        ref == null || ref.stop({}, function () {
+          delete touchRippleRefs.current[index];
+        });
+      });
+    }
+  }, [hasFocus]);
+  React.useEffect(function () {
+    if (focusedButtonIndex < 0 || !rootRef.current) {
+      return;
+    }
+    if (focusedButtonIndex >= rootRef.current.children.length) {
+      return;
+    }
+    var child = rootRef.current.children[focusedButtonIndex];
+    child.focus({
+      preventScroll: true
+    });
+  }, [focusedButtonIndex]);
+  React.useEffect(function () {
+    if (!hasFocus) {
+      setFocusedButtonIndex(-1);
+      ignoreCallToFocus.current = false;
+    }
+  }, [hasFocus]);
+  React.useImperativeHandle(focusElementRef, function () {
+    return {
+      focus: function focus() {
+        // If ignoreCallToFocus is true, then one of the buttons was clicked and the focus is already set
+        if (!ignoreCallToFocus.current) {
+          // find the first focusable button and pass the index to the state
+          var focusableButtonIndex = options.findIndex(function (o) {
+            return !o.props.disabled;
+          });
+          setFocusedButtonIndex(focusableButtonIndex);
+        }
+      }
+    };
+  }, [options]);
+  React.useEffect(function () {
+    if (focusedButtonIndex >= numberOfButtons) {
+      setFocusedButtonIndex(numberOfButtons - 1);
+    }
+  }, [focusedButtonIndex, numberOfButtons]);
+  var showMenu = function showMenu() {
+    setOpen(true);
+    setFocusedButtonIndex(numberOfButtons - 1);
+    ignoreCallToFocus.current = true;
+  };
+  var hideMenu = function hideMenu() {
+    setOpen(false);
+  };
+  var handleTouchRippleRef = function handleTouchRippleRef(index) {
+    return function (instance) {
+      touchRippleRefs.current[index] = instance;
+    };
+  };
+  var handleButtonClick = function handleButtonClick(index, onClick) {
+    return function (event) {
+      setFocusedButtonIndex(index);
+      ignoreCallToFocus.current = true;
+      if (onClick) {
+        onClick(event);
+      }
+    };
+  };
+  var handleRootKeyDown = function handleRootKeyDown(event) {
+    if (numberOfButtons <= 1) {
+      return;
+    }
+    var getNewIndex = function getNewIndex(index, direction) {
+      var _options;
+      if (index < 0 || index > options.length) {
+        return index;
+      }
+
+      // for rtl mode we need to reverse the direction
+      var rtlMod = theme.direction === 'rtl' ? -1 : 1;
+      var indexMod = (direction === 'left' ? -1 : 1) * rtlMod;
+
+      // if the button that should receive focus is disabled go one more step
+      return (_options = options[index + indexMod]) != null && _options.props.disabled ? getNewIndex(index + indexMod, direction) : index + indexMod;
+    };
+    var newIndex = focusedButtonIndex;
+    if (event.key === 'ArrowRight') {
+      newIndex = getNewIndex(focusedButtonIndex, 'right');
+    } else if (event.key === 'ArrowLeft') {
+      newIndex = getNewIndex(focusedButtonIndex, 'left');
+    }
+    if (newIndex < 0 || newIndex >= numberOfButtons) {
+      return; // We're already in the first or last item = do nothing and let the grid listen the event
+    }
+    if (newIndex !== focusedButtonIndex) {
+      event.preventDefault(); // Prevent scrolling
+      event.stopPropagation(); // Don't stop propagation for other keys, e.g. ArrowUp
+      setFocusedButtonIndex(newIndex);
+    }
+  };
+  var handleListKeyDown = function handleListKeyDown(event) {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+    }
+    if (['Tab', 'Escape'].includes(event.key)) {
+      hideMenu();
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", _extends({
+    role: "menu",
+    ref: rootRef,
+    tabIndex: -1,
+    className: gridClasses.actionsCell,
+    onKeyDown: handleRootKeyDown
+  }, other, {
+    children: [iconButtons.map(function (button, index) {
+      return /*#__PURE__*/React.cloneElement(button, {
+        key: index,
+        touchRippleRef: handleTouchRippleRef(index),
+        onClick: handleButtonClick(index, button.props.onClick),
+        tabIndex: focusedButtonIndex === index ? tabIndex : -1
+      });
+    }), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+      ref: buttonRef,
+      id: buttonId,
+      "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? menuId : undefined,
+      role: "menuitem",
+      size: "small",
+      onClick: showMenu,
+      touchRippleRef: handleTouchRippleRef(buttonId),
+      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.moreActionsIcon, {
+        fontSize: "small"
+      })
+    })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
+      open: open,
+      target: buttonRef.current,
+      position: position,
+      onClose: hideMenu,
+      children: /*#__PURE__*/_jsx(MenuList, {
+        id: menuId,
+        className: gridClasses.menuList,
+        onKeyDown: handleListKeyDown,
+        "aria-labelledby": buttonId,
+        variant: "menu",
+        autoFocusItem: true,
+        children: menuButtons.map(function (button, index) {
+          return /*#__PURE__*/React.cloneElement(button, {
+            key: index,
+            closeMenu: hideMenu
+          });
+        })
+      })
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  api: PropTypes.object,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  position: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridActionsCell };
+export var renderActionsCell = function renderActionsCell(params) {
+  return /*#__PURE__*/_jsx(GridActionsCell, _extends({}, params));
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/cell/GridActionsCellItem.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["label", "icon", "showInMenu", "onClick"],
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GridActionsCellItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var rootProps = useGridRootProps();
+  if (!props.showInMenu) {
+    var _rootProps$slotProps;
+    var _label = props.label,
+      _icon = props.icon,
+      _showInMenu = props.showInMenu,
+      _onClick = props.onClick,
+      _other = _objectWithoutProperties(props, _excluded);
+    var _handleClick = function _handleClick(event) {
+      _onClick == null || _onClick(event);
+    };
+    return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+      ref: ref,
+      size: "small",
+      role: "menuitem",
+      "aria-label": _label
+    }, _other, {
+      onClick: _handleClick
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      children: /*#__PURE__*/React.cloneElement(_icon, {
+        fontSize: 'small'
+      })
+    }));
+  }
+  var label = props.label,
+    icon = props.icon,
+    showInMenu = props.showInMenu,
+    onClick = props.onClick,
+    _props$closeMenuOnCli = props.closeMenuOnClick,
+    closeMenuOnClick = _props$closeMenuOnCli === void 0 ? true : _props$closeMenuOnCli,
+    closeMenu = props.closeMenu,
+    other = _objectWithoutProperties(props, _excluded2);
+  var handleClick = function handleClick(event) {
+    onClick == null || onClick(event);
+    if (closeMenuOnClick) {
+      closeMenu == null || closeMenu();
+    }
+  };
+  return /*#__PURE__*/_jsxs(MenuItem, _extends({
+    ref: ref
+  }, other, {
+    onClick: handleClick,
+    children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
+      children: icon
+    }), label]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
+   */
+  component: PropTypes.elementType,
+  icon: PropTypes.element,
+  label: PropTypes.string.isRequired,
+  showInMenu: PropTypes.bool
+} : void 0;
+export { GridActionsCellItem };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/cell/GridBooleanCell.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { isAutoGeneratedRow } from '../../hooks/features/rows/gridRowsUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['booleanCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridBooleanCellRaw(props) {
+  var id = props.id,
+    value = props.value,
+    formattedValue = props.formattedValue,
+    api = props.api,
+    field = props.field,
+    row = props.row,
+    rowNode = props.rowNode,
+    colDef = props.colDef,
+    cellMode = props.cellMode,
+    isEditable = props.isEditable,
+    hasFocus = props.hasFocus,
+    tabIndex = props.tabIndex,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var Icon = React.useMemo(function () {
+    return value ? rootProps.slots.booleanCellTrueIcon : rootProps.slots.booleanCellFalseIcon;
+  }, [rootProps.slots.booleanCellFalseIcon, rootProps.slots.booleanCellTrueIcon, value]);
+  return /*#__PURE__*/_jsx(Icon, _extends({
+    fontSize: "small",
+    className: classes.root,
+    titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
+    "data-value": Boolean(value)
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+var GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
+export { GridBooleanCell };
+export var renderBooleanCell = function renderBooleanCell(params) {
+  if (isAutoGeneratedRow(params.rowNode)) {
+    return '';
+  }
+  return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/cell/GridCell.js

@@ -0,0 +1,660 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["changeReason", "unstable_updateValueOnRender"],
+  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "style", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver", "style"],
+  _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
+import { fastMemo } from '../../utils/fastMemo';
+import { doesSupportPreventScroll } from '../../utils/doesSupportPreventScroll';
+import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
+import { GridCellModes } from '../../models';
+import { useGridSelector, objectShallowCompare } from '../../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
+import { MissingRowIdError } from '../../hooks/features/rows/useGridParamsApi';
+import { jsx as _jsx } from "react/jsx-runtime";
+var EMPTY_CELL_PARAMS = {
+  id: -1,
+  field: '__unset__',
+  row: {},
+  rowNode: {
+    id: -1,
+    depth: 0,
+    type: 'leaf',
+    parent: -1,
+    groupingKey: null
+  },
+  colDef: {
+    type: 'string',
+    field: '__unset__',
+    computedWidth: 0
+  },
+  cellMode: GridCellModes.View,
+  hasFocus: false,
+  tabIndex: -1,
+  value: null,
+  formattedValue: '__unset__',
+  isEditable: false,
+  api: {}
+};
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var align = ownerState.align,
+    showRightBorder = ownerState.showRightBorder,
+    isEditable = ownerState.isEditable,
+    isSelected = ownerState.isSelected,
+    isSelectionMode = ownerState.isSelectionMode,
+    classes = ownerState.classes;
+  var slots = {
+    root: ['cell', "cell--text".concat(capitalize(align)), isEditable && 'cell--editable', isSelected && 'selected', showRightBorder && 'cell--withRightBorder', isSelectionMode && !isEditable && 'cell--selectionMode', 'withBorderColor'],
+    content: ['cellContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var warnedOnce = false;
+
+// GridCellWrapper is a compatibility layer for the V6 cell slot. If we can use the more efficient
+// `GridCellV7`, we should. That component is a merge of `GridCellWrapper` and `GridCell`.
+// TODO(v7): Remove the wrapper & cellV6 and use the cellV7 exclusively.
+// TODO(v7): Removing the wrapper will break the docs performance visualization demo.
+var GridCellWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var column = props.column,
+    rowId = props.rowId,
+    editCellState = props.editCellState;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var field = column.field;
+  var cellParamsWithAPI = useGridSelector(apiRef, function () {
+    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
+    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
+    // updated, while `rowId`/`fieldId` reference an entry in the old state.
+    try {
+      var cellParams = apiRef.current.getCellParams(rowId, field);
+      var result = cellParams;
+      result.api = apiRef.current;
+      return result;
+    } catch (e) {
+      if (e instanceof MissingRowIdError) {
+        return EMPTY_CELL_PARAMS;
+      }
+      throw e;
+    }
+  }, objectShallowCompare);
+  var isSelected = useGridSelector(apiRef, function () {
+    return apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
+      id: rowId,
+      field: field
+    });
+  });
+  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
+    return null;
+  }
+  var cellMode = cellParamsWithAPI.cellMode,
+    hasFocus = cellParamsWithAPI.hasFocus,
+    isEditable = cellParamsWithAPI.isEditable,
+    value = cellParamsWithAPI.value,
+    formattedValue = cellParamsWithAPI.formattedValue;
+  var managesOwnFocus = column.type === 'actions';
+  var tabIndex = (cellMode === 'view' || !isEditable) && !managesOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+  var rootClasses = rootProps.classes,
+    getCellClassName = rootProps.getCellClassName;
+  var classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+    id: rowId,
+    field: field
+  });
+  if (column.cellClassName) {
+    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
+  }
+  if (getCellClassName) {
+    classNames.push(getCellClassName(cellParamsWithAPI));
+  }
+  var children;
+  if (editCellState == null && column.renderCell) {
+    children = column.renderCell(cellParamsWithAPI);
+    classNames.push(gridClasses['cell--withRenderer']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--withRenderer']);
+  }
+  if (editCellState != null && column.renderEditCell) {
+    var updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var changeReason = editCellState.changeReason,
+      unstable_updateValueOnRender = editCellState.unstable_updateValueOnRender,
+      editCellStateRest = _objectWithoutProperties(editCellState, _excluded);
+    var params = _extends({}, cellParamsWithAPI, {
+      row: updatedRow
+    }, editCellStateRest);
+    children = column.renderEditCell(params);
+    classNames.push(gridClasses['cell--editing']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--editing']);
+  }
+  var slots = rootProps.slots;
+  var CellComponent = slots.cell;
+  var cellProps = _extends({}, props, {
+    ref: ref,
+    field: field,
+    formattedValue: formattedValue,
+    hasFocus: hasFocus,
+    isEditable: isEditable,
+    isSelected: isSelected,
+    value: value,
+    cellMode: cellMode,
+    children: children,
+    tabIndex: tabIndex,
+    className: clsx(classNames)
+  });
+  return /*#__PURE__*/React.createElement(CellComponent, cellProps);
+});
+var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _rootProps$experiment, _rootProps$experiment2;
+  var align = props.align,
+    childrenProp = props.children,
+    editCellState = props.editCellState,
+    colIndex = props.colIndex,
+    column = props.column,
+    cellMode = props.cellMode,
+    field = props.field,
+    formattedValue = props.formattedValue,
+    hasFocus = props.hasFocus,
+    height = props.height,
+    isEditable = props.isEditable,
+    isSelected = props.isSelected,
+    rowId = props.rowId,
+    tabIndex = props.tabIndex,
+    styleProp = props.style,
+    value = props.value,
+    width = props.width,
+    className = props.className,
+    showRightBorder = props.showRightBorder,
+    extendRowFullWidth = props.extendRowFullWidth,
+    row = props.row,
+    colSpan = props.colSpan,
+    disableDragEvents = props.disableDragEvents,
+    isNotVisible = props.isNotVisible,
+    onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick,
+    onMouseDown = props.onMouseDown,
+    onMouseUp = props.onMouseUp,
+    onMouseOver = props.onMouseOver,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
+    onDragEnter = props.onDragEnter,
+    onDragOver = props.onDragOver,
+    other = _objectWithoutProperties(props, _excluded2);
+  var valueToRender = formattedValue == null ? value : formattedValue;
+  var cellRef = React.useRef(null);
+  var handleRef = useForkRef(ref, cellRef);
+  var focusElementRef = React.useRef(null);
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    align: align,
+    showRightBorder: showRightBorder,
+    isEditable: isEditable,
+    classes: rootProps.classes,
+    isSelected: isSelected
+  };
+  var classes = useUtilityClasses(ownerState);
+  var publishMouseUp = React.useCallback(function (eventName) {
+    return function (event) {
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+      if (onMouseUp) {
+        onMouseUp(event);
+      }
+    };
+  }, [apiRef, field, onMouseUp, rowId]);
+  var publishMouseDown = React.useCallback(function (eventName) {
+    return function (event) {
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+      if (onMouseDown) {
+        onMouseDown(event);
+      }
+    };
+  }, [apiRef, field, onMouseDown, rowId]);
+  var publish = React.useCallback(function (eventName, propHandler) {
+    return function (event) {
+      // The row might have been deleted during the click
+      if (!apiRef.current.getRow(rowId)) {
+        return;
+      }
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+      if (propHandler) {
+        propHandler(event);
+      }
+    };
+  }, [apiRef, field, rowId]);
+  var style = React.useMemo(function () {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0,
+        border: 0
+      };
+    }
+    var cellStyle = _extends({
+      minWidth: width,
+      maxWidth: width,
+      minHeight: height,
+      maxHeight: height === 'auto' ? 'none' : height
+    }, styleProp);
+    return cellStyle;
+  }, [width, height, isNotVisible, styleProp]);
+  React.useEffect(function () {
+    if (!hasFocus || cellMode === GridCellModes.Edit) {
+      return;
+    }
+    var doc = ownerDocument(apiRef.current.rootElementRef.current);
+    if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      var focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      var elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
+      if (doesSupportPreventScroll()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        var scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
+      }
+    }
+  }, [hasFocus, cellMode, apiRef]);
+  var handleFocus = other.onFocus;
+  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.warnIfFocusStateIsNotSynced) {
+    handleFocus = function handleFocus(event) {
+      var focusedCell = gridFocusCellSelector(apiRef);
+      if ((focusedCell == null ? void 0 : focusedCell.id) === rowId && focusedCell.field === field) {
+        if (typeof other.onFocus === 'function') {
+          other.onFocus(event);
+        }
+        return;
+      }
+      if (!warnedOnce) {
+        console.warn(["MUI: The cell with id=".concat(rowId, " and field=").concat(field, " received focus."), "According to the state, the focus should be at id=".concat(focusedCell == null ? void 0 : focusedCell.id, ", field=").concat(focusedCell == null ? void 0 : focusedCell.field, "."), "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
+        warnedOnce = true;
+      }
+    };
+  }
+  var managesOwnFocus = column.type === 'actions';
+  var children = childrenProp;
+  if (children === undefined) {
+    var valueString = valueToRender == null ? void 0 : valueToRender.toString();
+    children = /*#__PURE__*/_jsx("div", {
+      className: classes.content,
+      title: valueString,
+      role: "presentation",
+      children: valueString
+    });
+  }
+  if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
+    children = /*#__PURE__*/React.cloneElement(children, {
+      focusElementRef: focusElementRef
+    });
+  }
+  var draggableEventHandlers = disableDragEvents ? null : {
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
+  };
+  var ariaV7 = (_rootProps$experiment2 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment2.ariaV7;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", _extends({
+      ref: handleRef,
+      className: clsx(className, classes.root),
+      role: ariaV7 ? 'gridcell' : 'cell',
+      "data-field": field,
+      "data-colindex": colIndex,
+      "aria-colindex": colIndex + 1,
+      "aria-colspan": colSpan,
+      style: style,
+      tabIndex: tabIndex,
+      onClick: publish('cellClick', onClick),
+      onDoubleClick: publish('cellDoubleClick', onDoubleClick),
+      onMouseOver: publish('cellMouseOver', onMouseOver),
+      onMouseDown: publishMouseDown('cellMouseDown'),
+      onMouseUp: publishMouseUp('cellMouseUp'),
+      onKeyDown: publish('cellKeyDown', onKeyDown),
+      onKeyUp: publish('cellKeyUp', onKeyUp)
+    }, draggableEventHandlers, other, {
+      onFocus: handleFocus,
+      children: children
+    }))
+  );
+});
+var MemoizedCellWrapper = fastMemo(GridCellWrapper);
+process.env.NODE_ENV !== "production" ? GridCellWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.oneOf(['center', 'left', 'right']),
+  className: PropTypes.string,
+  colIndex: PropTypes.number,
+  colSpan: PropTypes.number,
+  column: PropTypes.object,
+  disableDragEvents: PropTypes.bool,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  showRightBorder: PropTypes.bool,
+  width: PropTypes.number
+} : void 0;
+process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.oneOf(['center', 'left', 'right']),
+  cellMode: PropTypes.oneOf(['edit', 'view']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  colIndex: PropTypes.number,
+  colSpan: PropTypes.number,
+  column: PropTypes.object,
+  disableDragEvents: PropTypes.bool,
+  editCellState: PropTypes.shape({
+    changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+    isProcessingProps: PropTypes.bool,
+    isValidating: PropTypes.bool,
+    value: PropTypes.any
+  }),
+  isNotVisible: PropTypes.bool,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  showRightBorder: PropTypes.bool,
+  width: PropTypes.number
+} : void 0;
+export { MemoizedCellWrapper as GridCellWrapper, GridCell };
+var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _getActions, _ref, _rootProps$unstable_c, _rootProps$experiment3, _rootProps$experiment4;
+  var column = props.column,
+    rowId = props.rowId,
+    editCellState = props.editCellState,
+    align = props.align,
+    childrenProp = props.children,
+    colIndex = props.colIndex,
+    height = props.height,
+    width = props.width,
+    className = props.className,
+    showRightBorder = props.showRightBorder,
+    extendRowFullWidth = props.extendRowFullWidth,
+    row = props.row,
+    colSpan = props.colSpan,
+    disableDragEvents = props.disableDragEvents,
+    isNotVisible = props.isNotVisible,
+    onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick,
+    onMouseDown = props.onMouseDown,
+    onMouseUp = props.onMouseUp,
+    onMouseOver = props.onMouseOver,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
+    onDragEnter = props.onDragEnter,
+    onDragOver = props.onDragOver,
+    styleProp = props.style,
+    other = _objectWithoutProperties(props, _excluded3);
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var field = column.field;
+  var cellParamsWithAPI = useGridSelector(apiRef, function () {
+    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
+    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
+    // updated, while `rowId`/`fieldId` reference an entry in the old state.
+    try {
+      var cellParams = apiRef.current.getCellParams(rowId, field);
+      var result = cellParams;
+      result.api = apiRef.current;
+      return result;
+    } catch (e) {
+      if (e instanceof MissingRowIdError) {
+        return EMPTY_CELL_PARAMS;
+      }
+      throw e;
+    }
+  }, objectShallowCompare);
+  var isSelected = useGridSelector(apiRef, function () {
+    return apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
+      id: rowId,
+      field: field
+    });
+  });
+  var cellMode = cellParamsWithAPI.cellMode,
+    hasFocus = cellParamsWithAPI.hasFocus,
+    isEditable = cellParamsWithAPI.isEditable,
+    value = cellParamsWithAPI.value,
+    formattedValue = cellParamsWithAPI.formattedValue;
+  var canManageOwnFocus = column.type === 'actions' && ((_getActions = (_ref = column).getActions) == null ? void 0 : _getActions.call(_ref, apiRef.current.getRowParams(rowId)).some(function (action) {
+    return !action.props.disabled;
+  }));
+  var tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+  var rootClasses = rootProps.classes,
+    getCellClassName = rootProps.getCellClassName;
+  var classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+    id: rowId,
+    field: field
+  });
+  if (column.cellClassName) {
+    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
+  }
+  if (getCellClassName) {
+    classNames.push(getCellClassName(cellParamsWithAPI));
+  }
+  var valueToRender = formattedValue == null ? value : formattedValue;
+  var cellRef = React.useRef(null);
+  var handleRef = useForkRef(ref, cellRef);
+  var focusElementRef = React.useRef(null);
+  // @ts-expect-error To access `unstable_cellSelection` flag as it's a `premium` feature
+  var isSelectionMode = (_rootProps$unstable_c = rootProps.unstable_cellSelection) != null ? _rootProps$unstable_c : false;
+  var ownerState = {
+    align: align,
+    showRightBorder: showRightBorder,
+    isEditable: isEditable,
+    classes: rootProps.classes,
+    isSelected: isSelected,
+    isSelectionMode: isSelectionMode
+  };
+  var classes = useUtilityClasses(ownerState);
+  var publishMouseUp = React.useCallback(function (eventName) {
+    return function (event) {
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+      if (onMouseUp) {
+        onMouseUp(event);
+      }
+    };
+  }, [apiRef, field, onMouseUp, rowId]);
+  var publishMouseDown = React.useCallback(function (eventName) {
+    return function (event) {
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+      if (onMouseDown) {
+        onMouseDown(event);
+      }
+    };
+  }, [apiRef, field, onMouseDown, rowId]);
+  var publish = React.useCallback(function (eventName, propHandler) {
+    return function (event) {
+      // The row might have been deleted during the click
+      if (!apiRef.current.getRow(rowId)) {
+        return;
+      }
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+      if (propHandler) {
+        propHandler(event);
+      }
+    };
+  }, [apiRef, field, rowId]);
+  var style = React.useMemo(function () {
+    if (isNotVisible) {
+      return _extends({
+        padding: 0,
+        opacity: 0,
+        width: 0,
+        border: 0
+      }, styleProp);
+    }
+    var cellStyle = _extends({
+      minWidth: width,
+      maxWidth: width,
+      minHeight: height,
+      maxHeight: height === 'auto' ? 'none' : height
+    }, styleProp);
+    return cellStyle;
+  }, [width, height, isNotVisible, styleProp]);
+  React.useEffect(function () {
+    if (!hasFocus || cellMode === GridCellModes.Edit) {
+      return;
+    }
+    var doc = ownerDocument(apiRef.current.rootElementRef.current);
+    if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      var focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      var elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
+      if (doesSupportPreventScroll()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        var scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
+      }
+    }
+  }, [hasFocus, cellMode, apiRef]);
+  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
+    return null;
+  }
+  var handleFocus = other.onFocus;
+  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment3 = rootProps.experimentalFeatures) != null && _rootProps$experiment3.warnIfFocusStateIsNotSynced) {
+    handleFocus = function handleFocus(event) {
+      var focusedCell = gridFocusCellSelector(apiRef);
+      if ((focusedCell == null ? void 0 : focusedCell.id) === rowId && focusedCell.field === field) {
+        if (typeof other.onFocus === 'function') {
+          other.onFocus(event);
+        }
+        return;
+      }
+      if (!warnedOnce) {
+        console.warn(["MUI: The cell with id=".concat(rowId, " and field=").concat(field, " received focus."), "According to the state, the focus should be at id=".concat(focusedCell == null ? void 0 : focusedCell.id, ", field=").concat(focusedCell == null ? void 0 : focusedCell.field, "."), "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
+        warnedOnce = true;
+      }
+    };
+  }
+  var children;
+  if (editCellState == null && column.renderCell) {
+    children = column.renderCell(cellParamsWithAPI);
+    classNames.push(gridClasses['cell--withRenderer']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--withRenderer']);
+  }
+  if (editCellState != null && column.renderEditCell) {
+    var updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var changeReason = editCellState.changeReason,
+      unstable_updateValueOnRender = editCellState.unstable_updateValueOnRender,
+      editCellStateRest = _objectWithoutProperties(editCellState, _excluded4);
+    var params = _extends({}, cellParamsWithAPI, {
+      row: updatedRow
+    }, editCellStateRest);
+    children = column.renderEditCell(params);
+    classNames.push(gridClasses['cell--editing']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--editing']);
+  }
+  if (children === undefined) {
+    var valueString = valueToRender == null ? void 0 : valueToRender.toString();
+    children = /*#__PURE__*/_jsx("div", {
+      className: classes.content,
+      title: valueString,
+      role: "presentation",
+      children: valueString
+    });
+  }
+  if ( /*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
+    children = /*#__PURE__*/React.cloneElement(children, {
+      focusElementRef: focusElementRef
+    });
+  }
+  var draggableEventHandlers = disableDragEvents ? null : {
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
+  };
+  var ariaV7 = (_rootProps$experiment4 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment4.ariaV7;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", _extends({
+      ref: handleRef,
+      className: clsx(className, classNames, classes.root),
+      role: ariaV7 ? 'gridcell' : 'cell',
+      "data-field": field,
+      "data-colindex": colIndex,
+      "aria-colindex": colIndex + 1,
+      "aria-colspan": colSpan,
+      style: style,
+      tabIndex: tabIndex,
+      onClick: publish('cellClick', onClick),
+      onDoubleClick: publish('cellDoubleClick', onDoubleClick),
+      onMouseOver: publish('cellMouseOver', onMouseOver),
+      onMouseDown: publishMouseDown('cellMouseDown'),
+      onMouseUp: publishMouseUp('cellMouseUp'),
+      onKeyDown: publish('cellKeyDown', onKeyDown),
+      onKeyUp: publish('cellKeyUp', onKeyUp)
+    }, draggableEventHandlers, other, {
+      onFocus: handleFocus,
+      children: children
+    }))
+  );
+});
+process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  className: PropTypes.string,
+  colIndex: PropTypes.number.isRequired,
+  colSpan: PropTypes.number,
+  column: PropTypes.object.isRequired,
+  disableDragEvents: PropTypes.bool,
+  editCellState: PropTypes.shape({
+    changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+    isProcessingProps: PropTypes.bool,
+    isValidating: PropTypes.bool,
+    value: PropTypes.any
+  }),
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  isNotVisible: PropTypes.bool,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  showRightBorder: PropTypes.bool,
+  width: PropTypes.number.isRequired
+} : void 0;
+var MemoizedGridCellV7 = fastMemo(GridCellV7);
+export { MemoizedGridCellV7 as GridCellV7 };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/cell/GridEditBooleanCell.js

@@ -0,0 +1,174 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['editBooleanCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridEditBooleanCell(props) {
+  var _rootProps$slotProps;
+  var idProp = props.id,
+    value = props.value,
+    formattedValue = props.formattedValue,
+    api = props.api,
+    field = props.field,
+    row = props.row,
+    rowNode = props.rowNode,
+    colDef = props.colDef,
+    cellMode = props.cellMode,
+    isEditable = props.isEditable,
+    tabIndex = props.tabIndex,
+    className = props.className,
+    hasFocus = props.hasFocus,
+    isValidating = props.isValidating,
+    isProcessingProps = props.isProcessingProps,
+    error = props.error,
+    onValueChange = props.onValueChange,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var inputRef = React.useRef(null);
+  var id = useId();
+  var _React$useState = React.useState(value),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    valueState = _React$useState2[0],
+    setValueState = _React$useState2[1];
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var handleChange = React.useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var newValue;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            newValue = event.target.checked;
+            if (!onValueChange) {
+              _context.next = 4;
+              break;
+            }
+            _context.next = 4;
+            return onValueChange(event, newValue);
+          case 4:
+            setValueState(newValue);
+            _context.next = 7;
+            return apiRef.current.setEditCellValue({
+              id: idProp,
+              field: field,
+              value: newValue
+            }, event);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [apiRef, field, idProp, onValueChange]);
+  React.useEffect(function () {
+    setValueState(value);
+  }, [value]);
+  useEnhancedEffect(function () {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx("label", _extends({
+    htmlFor: id,
+    className: clsx(classes.root, className)
+  }, other, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+      id: id,
+      inputRef: inputRef,
+      checked: Boolean(valueState),
+      onChange: handleChange,
+      size: "small"
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox))
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditBooleanCell };
+export var renderEditBooleanCell = function renderEditBooleanCell(params) {
+  return /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/cell/GridEditDateCell.js

@@ -0,0 +1,230 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "inputProps", "isValidating", "isProcessingProps", "onValueChange"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import InputBase from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+var StyledInputBase = styled(InputBase)({
+  fontSize: 'inherit'
+});
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['editInputCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridEditDateCell(props) {
+  var id = props.id,
+    valueProp = props.value,
+    formattedValue = props.formattedValue,
+    api = props.api,
+    field = props.field,
+    row = props.row,
+    rowNode = props.rowNode,
+    colDef = props.colDef,
+    cellMode = props.cellMode,
+    isEditable = props.isEditable,
+    tabIndex = props.tabIndex,
+    hasFocus = props.hasFocus,
+    inputProps = props.inputProps,
+    isValidating = props.isValidating,
+    isProcessingProps = props.isProcessingProps,
+    onValueChange = props.onValueChange,
+    other = _objectWithoutProperties(props, _excluded);
+  var isDateTime = colDef.type === 'dateTime';
+  var apiRef = useGridApiContext();
+  var inputRef = React.useRef();
+  var valueTransformed = React.useMemo(function () {
+    var parsedDate;
+    if (valueProp == null) {
+      parsedDate = null;
+    } else if (valueProp instanceof Date) {
+      parsedDate = valueProp;
+    } else {
+      parsedDate = new Date((valueProp != null ? valueProp : '').toString());
+    }
+    var formattedDate;
+    if (parsedDate == null || Number.isNaN(parsedDate.getTime())) {
+      formattedDate = '';
+    } else {
+      var localDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60 * 1000);
+      formattedDate = localDate.toISOString().substr(0, isDateTime ? 16 : 10);
+    }
+    return {
+      parsed: parsedDate,
+      formatted: formattedDate
+    };
+  }, [valueProp, isDateTime]);
+  var _React$useState = React.useState(valueTransformed),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    valueState = _React$useState2[0],
+    setValueState = _React$useState2[1];
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var parseValueToDate = React.useCallback(function (value) {
+    if (value === '') {
+      return null;
+    }
+    var _value$split = value.split('T'),
+      _value$split2 = _slicedToArray(_value$split, 2),
+      date = _value$split2[0],
+      time = _value$split2[1];
+    var _date$split = date.split('-'),
+      _date$split2 = _slicedToArray(_date$split, 3),
+      year = _date$split2[0],
+      month = _date$split2[1],
+      day = _date$split2[2];
+    var parsedDate = new Date();
+    parsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
+    parsedDate.setHours(0, 0, 0, 0);
+    if (time) {
+      var _time$split = time.split(':'),
+        _time$split2 = _slicedToArray(_time$split, 2),
+        hours = _time$split2[0],
+        minutes = _time$split2[1];
+      parsedDate.setHours(Number(hours), Number(minutes), 0, 0);
+    }
+    return parsedDate;
+  }, []);
+  var handleChange = React.useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var newFormattedDate, newParsedDate;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            newFormattedDate = event.target.value;
+            newParsedDate = parseValueToDate(newFormattedDate);
+            if (!onValueChange) {
+              _context.next = 5;
+              break;
+            }
+            _context.next = 5;
+            return onValueChange(event, newParsedDate);
+          case 5:
+            setValueState({
+              parsed: newParsedDate,
+              formatted: newFormattedDate
+            });
+            apiRef.current.setEditCellValue({
+              id: id,
+              field: field,
+              value: newParsedDate
+            }, event);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [apiRef, field, id, onValueChange, parseValueToDate]);
+  React.useEffect(function () {
+    setValueState(function (state) {
+      var _valueTransformed$par, _state$parsed;
+      if (valueTransformed.parsed !== state.parsed && ((_valueTransformed$par = valueTransformed.parsed) == null ? void 0 : _valueTransformed$par.getTime()) !== ((_state$parsed = state.parsed) == null ? void 0 : _state$parsed.getTime())) {
+        return valueTransformed;
+      }
+      return state;
+    });
+  }, [valueTransformed]);
+  useEnhancedEffect(function () {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx(StyledInputBase, _extends({
+    inputRef: inputRef,
+    fullWidth: true,
+    className: classes.root,
+    type: isDateTime ? 'datetime-local' : 'date',
+    inputProps: _extends({
+      max: isDateTime ? '9999-12-31T23:59' : '9999-12-31'
+    }, inputProps),
+    value: valueState.formatted,
+    onChange: handleChange
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditDateCell };
+export var renderEditDateCell = function renderEditDateCell(params) {
+  return /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/cell/GridEditInputCell.js

@@ -0,0 +1,198 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { styled } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['editInputCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridEditInputCellRoot = styled(InputBase, {
+  name: 'MuiDataGrid',
+  slot: 'EditInputCell',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.editInputCell;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _extends({}, theme.typography.body2, {
+    padding: '1px 0',
+    '& input': {
+      padding: '0 16px',
+      height: '100%'
+    }
+  });
+});
+var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var rootProps = useGridRootProps();
+  var id = props.id,
+    value = props.value,
+    formattedValue = props.formattedValue,
+    api = props.api,
+    field = props.field,
+    row = props.row,
+    rowNode = props.rowNode,
+    colDef = props.colDef,
+    cellMode = props.cellMode,
+    isEditable = props.isEditable,
+    tabIndex = props.tabIndex,
+    hasFocus = props.hasFocus,
+    isValidating = props.isValidating,
+    _props$debounceMs = props.debounceMs,
+    debounceMs = _props$debounceMs === void 0 ? 200 : _props$debounceMs,
+    isProcessingProps = props.isProcessingProps,
+    onValueChange = props.onValueChange,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var inputRef = React.useRef();
+  var _React$useState = React.useState(value),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    valueState = _React$useState2[0],
+    setValueState = _React$useState2[1];
+  var classes = useUtilityClasses(rootProps);
+  var handleChange = React.useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var newValue, column, parsedValue;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            newValue = event.target.value;
+            if (!onValueChange) {
+              _context.next = 4;
+              break;
+            }
+            _context.next = 4;
+            return onValueChange(event, newValue);
+          case 4:
+            column = apiRef.current.getColumn(field);
+            parsedValue = newValue;
+            if (column.valueParser) {
+              parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+            }
+            setValueState(parsedValue);
+            apiRef.current.setEditCellValue({
+              id: id,
+              field: field,
+              value: parsedValue,
+              debounceMs: debounceMs,
+              unstable_skipValueParser: true
+            }, event);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [apiRef, debounceMs, field, id, onValueChange]);
+  var meta = apiRef.current.unstable_getEditCellMeta(id, field);
+  React.useEffect(function () {
+    if ((meta == null ? void 0 : meta.changeReason) !== 'debouncedSetEditCellValue') {
+      setValueState(value);
+    }
+  }, [meta, value]);
+  useEnhancedEffect(function () {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
+    ref: ref,
+    inputRef: inputRef,
+    className: classes.root,
+    ownerState: rootProps,
+    fullWidth: true,
+    type: colDef.type === 'number' ? colDef.type : 'text',
+    value: valueState != null ? valueState : '',
+    onChange: handleChange,
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+      fontSize: "small",
+      color: "action"
+    }) : undefined
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  debounceMs: PropTypes.number,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditInputCell };
+export var renderEditInputCell = function renderEditInputCell(params) {
+  return /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/cell/GridEditSingleSelectCell.js

@@ -0,0 +1,251 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "getOptionLabel", "getOptionValue"],
+  _excluded2 = ["MenuProps"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams';
+import { isEscapeKey } from '../../utils/keyboardUtils';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridEditModes } from '../../models/gridEditRowModel';
+import { getValueFromValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function isKeyboardEvent(event) {
+  return !!event.key;
+}
+function GridEditSingleSelectCell(props) {
+  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2;
+  var rootProps = useGridRootProps();
+  var id = props.id,
+    valueProp = props.value,
+    formattedValue = props.formattedValue,
+    api = props.api,
+    field = props.field,
+    row = props.row,
+    rowNode = props.rowNode,
+    colDef = props.colDef,
+    cellMode = props.cellMode,
+    isEditable = props.isEditable,
+    tabIndex = props.tabIndex,
+    className = props.className,
+    hasFocus = props.hasFocus,
+    isValidating = props.isValidating,
+    isProcessingProps = props.isProcessingProps,
+    error = props.error,
+    onValueChange = props.onValueChange,
+    _props$initialOpen = props.initialOpen,
+    initialOpen = _props$initialOpen === void 0 ? rootProps.editMode === GridEditModes.Cell : _props$initialOpen,
+    getOptionLabelProp = props.getOptionLabel,
+    getOptionValueProp = props.getOptionValue,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var ref = React.useRef();
+  var inputRef = React.useRef();
+  var _React$useState = React.useState(initialOpen),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
+  var _ref = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {},
+    MenuProps = _ref.MenuProps,
+    otherBaseSelectProps = _objectWithoutProperties(_ref, _excluded2);
+  useEnhancedEffect(function () {
+    if (hasFocus) {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+    }
+  }, [hasFocus]);
+  if (!isSingleSelectColDef(colDef)) {
+    return null;
+  }
+  var valueOptions;
+  if (typeof (colDef == null ? void 0 : colDef.valueOptions) === 'function') {
+    valueOptions = colDef == null ? void 0 : colDef.valueOptions({
+      id: id,
+      row: row,
+      field: field
+    });
+  } else {
+    valueOptions = colDef == null ? void 0 : colDef.valueOptions;
+  }
+  if (!valueOptions) {
+    return null;
+  }
+  var getOptionValue = getOptionValueProp || colDef.getOptionValue;
+  var getOptionLabel = getOptionLabelProp || colDef.getOptionLabel;
+  var handleChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var target, formattedTargetValue;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!isSingleSelectColDef(colDef) || !valueOptions)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            setOpen(false);
+            target = event.target; // NativeSelect casts the value to a string.
+            formattedTargetValue = getValueFromValueOptions(target.value, valueOptions, getOptionValue);
+            if (!onValueChange) {
+              _context.next = 8;
+              break;
+            }
+            _context.next = 8;
+            return onValueChange(event, formattedTargetValue);
+          case 8:
+            _context.next = 10;
+            return apiRef.current.setEditCellValue({
+              id: id,
+              field: field,
+              value: formattedTargetValue
+            }, event);
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleClose = function handleClose(event, reason) {
+    if (rootProps.editMode === GridEditModes.Row) {
+      setOpen(false);
+      return;
+    }
+    if (reason === 'backdropClick' || isEscapeKey(event.key)) {
+      var params = apiRef.current.getCellParams(id, field);
+      apiRef.current.publishEvent('cellEditStop', _extends({}, params, {
+        reason: isEscapeKey(event.key) ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
+      }));
+    }
+  };
+  var handleOpen = function handleOpen(event) {
+    if (isKeyboardEvent(event) && event.key === 'Enter') {
+      return;
+    }
+    setOpen(true);
+  };
+  if (!valueOptions || !colDef) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+    ref: ref,
+    inputRef: inputRef,
+    value: valueProp,
+    onChange: handleChange,
+    open: open,
+    onOpen: handleOpen,
+    MenuProps: _extends({
+      onClose: handleClose
+    }, MenuProps),
+    error: error,
+    native: isSelectNative,
+    fullWidth: true
+  }, other, otherBaseSelectProps, {
+    children: valueOptions.map(function (valueOption) {
+      var _rootProps$slotProps3;
+      var value = getOptionValue(valueOption);
+      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelectOption) || {}, {
+        native: isSelectNative,
+        key: value,
+        value: value
+      }), getOptionLabel(valueOption));
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * 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,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the select opens by default.
+   */
+  initialOpen: PropTypes.bool,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditSingleSelectCell };
+export var renderEditSingleSelectCell = function renderEditSingleSelectCell(params) {
+  return /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/cell/GridSkeletonCell.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["field", "align", "width", "contentWidth"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Skeleton from '@mui/material/Skeleton';
+import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var align = ownerState.align,
+    classes = ownerState.classes;
+  var slots = {
+    root: ['cell', 'cellSkeleton', "cell--text".concat(capitalize(align)), 'withBorderColor']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridSkeletonCell(props) {
+  var field = props.field,
+    align = props.align,
+    width = props.width,
+    contentWidth = props.contentWidth,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes,
+    align: align
+  };
+  var classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx("div", _extends({
+    className: classes.root,
+    style: {
+      width: width
+    }
+  }, other, {
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      width: "".concat(contentWidth, "%")
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.string.isRequired,
+  contentWidth: PropTypes.number.isRequired,
+  field: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired
+} : void 0;
+export { GridSkeletonCell };

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

@@ -0,0 +1,9 @@
+export { GridCell } from './GridCell';
+export * from './GridBooleanCell';
+export * from './GridEditBooleanCell';
+export * from './GridEditDateCell';
+export * from './GridEditInputCell';
+export * from './GridEditSingleSelectCell';
+export * from './GridActionsCell';
+export * from './GridActionsCellItem';
+export * from './GridSkeletonCell';

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+    open = ownerState.open;
+  var slots = {
+    root: ['menuIcon', open && 'menuOpen'],
+    button: ['menuIconButton']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+export var ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(function (props) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  var colDef = props.colDef,
+    open = props.open,
+    columnMenuId = props.columnMenuId,
+    columnMenuButtonId = props.columnMenuButtonId,
+    iconButtonRef = props.iconButtonRef;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+  var classes = useUtilityClasses(ownerState);
+  var handleMenuIconClick = React.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    apiRef.current.toggleColumnMenu(colDef.field);
+  }, [apiRef, colDef.field]);
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+      title: apiRef.current.getLocaleText('columnMenuLabel'),
+      enterDelay: 1000
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        ref: iconButtonRef,
+        tabIndex: -1,
+        className: classes.button,
+        "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+        size: "small",
+        onClick: handleMenuIconClick,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? columnMenuId : undefined,
+        id: columnMenuButtonId
+      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
+          fontSize: "small"
+        })
+      }))
+    }))
+  });
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/GridBaseColumnHeaders.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['columnHeaders', 'withBorderColor']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridColumnHeadersRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaders',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.columnHeaders;
+  }
+})({
+  position: 'relative',
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  borderBottom: '1px solid',
+  borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+  borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
+});
+export var GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+  var className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridColumnHeadersRoot, _extends({
+    ref: ref,
+    className: clsx(className, classes.root),
+    ownerState: rootProps
+  }, other, {
+    role: "presentation"
+  }));
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/GridColumnGroupHeader.js

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_useId as useId, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { isEventTargetInPortal } from '../../utils/domUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+    headerAlign = ownerState.headerAlign,
+    isDragging = ownerState.isDragging,
+    showColumnBorder = ownerState.showColumnBorder,
+    groupId = ownerState.groupId;
+  var slots = {
+    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showColumnBorder && 'columnHeader--showColumnBorder', showColumnBorder && 'columnHeader--withRightBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup'],
+    draggableContainer: ['columnHeaderDraggableContainer'],
+    titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
+    titleContainerContent: ['columnHeaderTitleContainerContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridColumnGroupHeader(props) {
+  var _columnGroupsLookup$g;
+  var groupId = props.groupId,
+    width = props.width,
+    depth = props.depth,
+    maxDepth = props.maxDepth,
+    fields = props.fields,
+    height = props.height,
+    colIndex = props.colIndex,
+    hasFocus = props.hasFocus,
+    tabIndex = props.tabIndex,
+    isLastColumn = props.isLastColumn;
+  var rootProps = useGridRootProps();
+  var headerCellRef = React.useRef(null);
+  var apiRef = useGridApiContext();
+  var columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
+  var group = groupId ? columnGroupsLookup[groupId] : {};
+  var _group$headerName = group.headerName,
+    headerName = _group$headerName === void 0 ? groupId != null ? groupId : '' : _group$headerName,
+    _group$description = group.description,
+    description = _group$description === void 0 ? '' : _group$description,
+    _group$headerAlign = group.headerAlign,
+    headerAlign = _group$headerAlign === void 0 ? undefined : _group$headerAlign;
+  var headerComponent;
+  var render = groupId && ((_columnGroupsLookup$g = columnGroupsLookup[groupId]) == null ? void 0 : _columnGroupsLookup$g.renderHeaderGroup);
+  var renderParams = React.useMemo(function () {
+    return {
+      groupId: groupId,
+      headerName: headerName,
+      description: description,
+      depth: depth,
+      maxDepth: maxDepth,
+      fields: fields,
+      colIndex: colIndex,
+      isLastColumn: isLastColumn
+    };
+  }, [groupId, headerName, description, depth, maxDepth, fields, colIndex, isLastColumn]);
+  if (groupId && render) {
+    headerComponent = render(renderParams);
+  }
+  var showColumnBorder = rootProps.showColumnVerticalBorder;
+  var ownerState = _extends({}, props, {
+    classes: rootProps.classes,
+    showColumnBorder: showColumnBorder,
+    headerAlign: headerAlign,
+    depth: depth,
+    isDragging: false
+  });
+  var label = headerName != null ? headerName : groupId;
+  var id = useId();
+  var elementId = groupId === null ? "empty-group-cell-".concat(id) : groupId;
+  var classes = useUtilityClasses(ownerState);
+  React.useLayoutEffect(function () {
+    if (hasFocus) {
+      var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      var elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null || elementToFocus.focus();
+    }
+  }, [apiRef, hasFocus]);
+  var publish = React.useCallback(function (eventName) {
+    return function (event) {
+      // Ignore portal
+      // See https://github.com/mui/mui-x/issues/1721
+      if (isEventTargetInPortal(event)) {
+        return;
+      }
+      apiRef.current.publishEvent(eventName, renderParams, event);
+    };
+  },
+  // For now this is stupid, because renderParams change all the time.
+  // Need to move it's computation in the api, such that for a given depth+columnField, I can get the group parameters
+  [apiRef, renderParams]);
+  var mouseEventsHandlers = React.useMemo(function () {
+    return {
+      onKeyDown: publish('columnGroupHeaderKeyDown'),
+      onFocus: publish('columnGroupHeaderFocus'),
+      onBlur: publish('columnGroupHeaderBlur')
+    };
+  }, [publish]);
+  var headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
+  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
+    ref: headerCellRef,
+    classes: classes,
+    columnMenuOpen: false,
+    colIndex: colIndex,
+    height: height,
+    isResizing: false,
+    sortDirection: null,
+    hasFocus: false,
+    tabIndex: tabIndex,
+    isDraggable: false,
+    headerComponent: headerComponent,
+    headerClassName: headerClassName,
+    description: description,
+    elementId: elementId,
+    width: width,
+    columnMenuIconButton: null,
+    columnTitleIconButtons: null,
+    resizable: false,
+    label: label,
+    "aria-colspan": fields.length
+    // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=
+    ,
+    "data-fields": "|-".concat(fields.join('-|-'), "-|")
+  }, mouseEventsHandlers));
+}
+export { GridColumnGroupHeader };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
+import Badge from '@mui/material/Badge';
+import { useGridSelector } from '../../hooks';
+import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
+import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridIconButtonContainer } from './GridIconButtonContainer';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    icon: ['filterIcon']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridColumnHeaderFilterIconButton(props) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  var counter = props.counter,
+    field = props.field,
+    onClick = props.onClick;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+  var classes = useUtilityClasses(ownerState);
+  var preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  var labelId = useId();
+  var panelId = useId();
+  var toggleFilter = React.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var _gridPreferencePanelS = gridPreferencePanelStateSelector(apiRef.current.state),
+      open = _gridPreferencePanelS.open,
+      openedPanelValue = _gridPreferencePanelS.openedPanelValue;
+    if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
+      apiRef.current.hideFilterPanel();
+    } else {
+      apiRef.current.showFilterPanel(undefined, panelId, labelId);
+    }
+    if (onClick) {
+      onClick(apiRef.current.getColumnHeaderParams(field), event);
+    }
+  }, [apiRef, field, onClick, panelId, labelId]);
+  if (!counter) {
+    return null;
+  }
+  var open = preferencePanel.open && preferencePanel.labelId === labelId;
+  var iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    id: labelId,
+    onClick: toggleFilter,
+    color: "default",
+    "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
+    size: "small",
+    tabIndex: -1,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? panelId : undefined
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
+      className: classes.icon,
+      fontSize: "small"
+    })
+  }));
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+    title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
+    enterDelay: 1000
+  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTooltip, {
+    children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
+      children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
+        badgeContent: counter,
+        color: "default",
+        children: iconButton
+      }), counter === 1 && iconButton]
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
+export { GridColumnHeaderFilterIconButton };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -0,0 +1,211 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
+import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
+import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { isEventTargetInPortal } from '../../utils/domUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var colDef = ownerState.colDef,
+    classes = ownerState.classes,
+    isDragging = ownerState.isDragging,
+    sortDirection = ownerState.sortDirection,
+    showRightBorder = ownerState.showRightBorder,
+    filterItemsCounter = ownerState.filterItemsCounter;
+  var isColumnSorted = sortDirection != null;
+  var isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0;
+  // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
+  var isColumnNumeric = colDef.type === 'number';
+  var slots = {
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder'],
+    draggableContainer: ['columnHeaderDraggableContainer'],
+    titleContainer: ['columnHeaderTitleContainer'],
+    titleContainerContent: ['columnHeaderTitleContainerContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridColumnHeaderItem(props) {
+  var _rootProps$slotProps, _colDef$sortingOrder, _rootProps$slotProps2, _colDef$headerName;
+  var colDef = props.colDef,
+    columnMenuOpen = props.columnMenuOpen,
+    colIndex = props.colIndex,
+    headerHeight = props.headerHeight,
+    isResizing = props.isResizing,
+    sortDirection = props.sortDirection,
+    sortIndex = props.sortIndex,
+    filterItemsCounter = props.filterItemsCounter,
+    hasFocus = props.hasFocus,
+    tabIndex = props.tabIndex,
+    disableReorder = props.disableReorder,
+    separatorSide = props.separatorSide;
+  var apiRef = useGridPrivateApiContext();
+  var rootProps = useGridRootProps();
+  var headerCellRef = React.useRef(null);
+  var columnMenuId = useId();
+  var columnMenuButtonId = useId();
+  var iconButtonRef = React.useRef(null);
+  var _React$useState = React.useState(columnMenuOpen),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showColumnMenuIcon = _React$useState2[0],
+    setShowColumnMenuIcon = _React$useState2[1];
+  var isDraggable = React.useMemo(function () {
+    return !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder;
+  }, [rootProps.disableColumnReorder, disableReorder, colDef.disableReorder]);
+  var headerComponent;
+  if (colDef.renderHeader) {
+    headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
+  }
+  var ownerState = _extends({}, props, {
+    classes: rootProps.classes,
+    showRightBorder: rootProps.showColumnVerticalBorder
+  });
+  var classes = useUtilityClasses(ownerState);
+  var publish = React.useCallback(function (eventName) {
+    return function (event) {
+      // Ignore portal
+      // See https://github.com/mui/mui-x/issues/1721
+      if (isEventTargetInPortal(event)) {
+        return;
+      }
+      apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);
+    };
+  }, [apiRef, colDef.field]);
+  var mouseEventsHandlers = React.useMemo(function () {
+    return {
+      onClick: publish('columnHeaderClick'),
+      onDoubleClick: publish('columnHeaderDoubleClick'),
+      onMouseOver: publish('columnHeaderOver'),
+      // TODO remove as it's not used
+      onMouseOut: publish('columnHeaderOut'),
+      // TODO remove as it's not used
+      onMouseEnter: publish('columnHeaderEnter'),
+      // TODO remove as it's not used
+      onMouseLeave: publish('columnHeaderLeave'),
+      // TODO remove as it's not used
+      onKeyDown: publish('columnHeaderKeyDown'),
+      onFocus: publish('columnHeaderFocus'),
+      onBlur: publish('columnHeaderBlur')
+    };
+  }, [publish]);
+  var draggableEventHandlers = React.useMemo(function () {
+    return isDraggable ? {
+      onDragStart: publish('columnHeaderDragStart'),
+      onDragEnter: publish('columnHeaderDragEnter'),
+      onDragOver: publish('columnHeaderDragOver'),
+      onDragEnd: publish('columnHeaderDragEnd')
+    } : {};
+  }, [isDraggable, publish]);
+  var columnHeaderSeparatorProps = React.useMemo(function () {
+    return {
+      onMouseDown: publish('columnSeparatorMouseDown'),
+      onDoubleClick: publish('columnSeparatorDoubleClick')
+    };
+  }, [publish]);
+  React.useEffect(function () {
+    if (!showColumnMenuIcon) {
+      setShowColumnMenuIcon(columnMenuOpen);
+    }
+  }, [showColumnMenuIcon, columnMenuOpen]);
+  var handleExited = React.useCallback(function () {
+    setShowColumnMenuIcon(false);
+  }, []);
+  var columnMenuIconButton = !rootProps.disableColumnMenu && !colDef.disableColumnMenu && /*#__PURE__*/_jsx(ColumnHeaderMenuIcon, {
+    colDef: colDef,
+    columnMenuId: columnMenuId,
+    columnMenuButtonId: columnMenuButtonId,
+    open: showColumnMenuIcon,
+    iconButtonRef: iconButtonRef
+  });
+  var columnMenu = /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
+    columnMenuId: columnMenuId,
+    columnMenuButtonId: columnMenuButtonId,
+    field: colDef.field,
+    open: columnMenuOpen,
+    target: iconButtonRef.current,
+    ContentComponent: rootProps.slots.columnMenu,
+    contentComponentProps: (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.columnMenu,
+    onExited: handleExited
+  });
+  var sortingOrder = (_colDef$sortingOrder = colDef.sortingOrder) != null ? _colDef$sortingOrder : rootProps.sortingOrder;
+  var columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.columnHeaderFilterIconButton, _extends({
+      field: colDef.field,
+      counter: filterItemsCounter
+    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.columnHeaderFilterIconButton)), colDef.sortable && !colDef.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+      direction: sortDirection,
+      index: sortIndex,
+      sortingOrder: sortingOrder
+    })]
+  });
+  React.useLayoutEffect(function () {
+    var columnMenuState = apiRef.current.state.columnMenu;
+    if (hasFocus && !columnMenuState.open) {
+      var _apiRef$current$colum;
+      var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      var elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null || elementToFocus.focus();
+      if ((_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) != null && _apiRef$current$colum.current) {
+        apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+      }
+    }
+  }, [apiRef, hasFocus]);
+  var headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
+    field: colDef.field,
+    colDef: colDef
+  }) : colDef.headerClassName;
+  var label = (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field;
+  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
+    ref: headerCellRef,
+    classes: classes,
+    columnMenuOpen: columnMenuOpen,
+    colIndex: colIndex,
+    height: headerHeight,
+    isResizing: isResizing,
+    sortDirection: sortDirection,
+    hasFocus: hasFocus,
+    tabIndex: tabIndex,
+    separatorSide: separatorSide,
+    isDraggable: isDraggable,
+    headerComponent: headerComponent,
+    description: colDef.description,
+    elementId: colDef.field,
+    width: colDef.computedWidth,
+    columnMenuIconButton: columnMenuIconButton,
+    columnTitleIconButtons: columnTitleIconButtons,
+    headerClassName: headerClassName,
+    label: label,
+    resizable: !rootProps.disableColumnResize && !!colDef.resizable,
+    "data-field": colDef.field,
+    columnMenu: columnMenu,
+    draggableContainerProps: draggableEventHandlers,
+    columnHeaderSeparatorProps: columnHeaderSeparatorProps
+  }, mouseEventsHandlers));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  colIndex: PropTypes.number.isRequired,
+  columnMenuOpen: PropTypes.bool.isRequired,
+  disableReorder: PropTypes.bool,
+  filterItemsCounter: PropTypes.number,
+  hasFocus: PropTypes.bool,
+  headerHeight: PropTypes.number.isRequired,
+  isDragging: PropTypes.bool.isRequired,
+  isResizing: PropTypes.bool.isRequired,
+  separatorSide: PropTypes.oneOf(['left', 'right']),
+  sortDirection: PropTypes.oneOf(['asc', 'desc']),
+  sortIndex: PropTypes.number,
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired
+} : void 0;
+export { GridColumnHeaderItem };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["resizable", "resizing", "height", "side"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridColumnHeaderSeparatorSides = /*#__PURE__*/function (GridColumnHeaderSeparatorSides) {
+  GridColumnHeaderSeparatorSides["Left"] = "left";
+  GridColumnHeaderSeparatorSides["Right"] = "right";
+  return GridColumnHeaderSeparatorSides;
+}(GridColumnHeaderSeparatorSides || {});
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var resizable = ownerState.resizable,
+    resizing = ownerState.resizing,
+    classes = ownerState.classes,
+    side = ownerState.side;
+  var slots = {
+    root: ['columnSeparator', resizable && 'columnSeparator--resizable', resizing && 'columnSeparator--resizing', side && "columnSeparator--side".concat(capitalize(side))],
+    icon: ['iconSeparator']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridColumnHeaderSeparatorRaw(props) {
+  var resizable = props.resizable,
+    resizing = props.resizing,
+    height = props.height,
+    _props$side = props.side,
+    side = _props$side === void 0 ? GridColumnHeaderSeparatorSides.Right : _props$side,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var ownerState = _extends({}, props, {
+    side: side,
+    classes: rootProps.classes
+  });
+  var classes = useUtilityClasses(ownerState);
+  var stopClick = React.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    _jsx("div", _extends({
+      className: classes.root,
+      style: {
+        minHeight: height,
+        opacity: rootProps.showColumnVerticalBorder ? 0 : 1
+      }
+    }, other, {
+      onClick: stopClick,
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnResizeIcon, {
+        className: classes.icon
+      })
+    }))
+  );
+}
+var GridColumnHeaderSeparator = /*#__PURE__*/React.memo(GridColumnHeaderSeparatorRaw);
+process.env.NODE_ENV !== "production" ? GridColumnHeaderSeparatorRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  height: PropTypes.number.isRequired,
+  resizable: PropTypes.bool.isRequired,
+  resizing: PropTypes.bool.isRequired,
+  side: PropTypes.oneOf(['left', 'right'])
+} : void 0;
+export { GridColumnHeaderSeparator, GridColumnHeaderSeparatorSides };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import Badge from '@mui/material/Badge';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridIconButtonContainer } from './GridIconButtonContainer';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    icon: ['sortIcon']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function getIcon(icons, direction, className, sortingOrder) {
+  var Icon;
+  var iconProps = {};
+  if (direction === 'asc') {
+    Icon = icons.columnSortedAscendingIcon;
+  } else if (direction === 'desc') {
+    Icon = icons.columnSortedDescendingIcon;
+  } else {
+    Icon = icons.columnUnsortedIcon;
+    iconProps.sortingOrder = sortingOrder;
+  }
+  return Icon ? /*#__PURE__*/_jsx(Icon, _extends({
+    fontSize: "small",
+    className: className
+  }, iconProps)) : null;
+}
+function GridColumnHeaderSortIconRaw(props) {
+  var _rootProps$slotProps;
+  var direction = props.direction,
+    index = props.index,
+    sortingOrder = props.sortingOrder;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+  var classes = useUtilityClasses(ownerState);
+  var iconElement = getIcon(rootProps.slots, direction, classes.icon, sortingOrder);
+  if (!iconElement) {
+    return null;
+  }
+  var iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    tabIndex: -1,
+    "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    size: "small"
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+    children: iconElement
+  }));
+  return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
+    children: [index != null && /*#__PURE__*/_jsx(Badge, {
+      badgeContent: index,
+      color: "default",
+      children: iconButton
+    }), index == null && iconButton]
+  });
+}
+var GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
+process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  direction: PropTypes.oneOf(['asc', 'desc']),
+  index: PropTypes.number,
+  sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired
+} : void 0;
+export { GridColumnHeaderSortIcon };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/GridColumnHeaderTitle.js

@@ -0,0 +1,84 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { isOverflown } from '../../utils/domUtils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['columnHeaderTitle']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridColumnHeaderTitleRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderTitle',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.columnHeaderTitle;
+  }
+})({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  fontWeight: 'var(--unstable_DataGrid-headWeight)'
+});
+var ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
+  var className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridColumnHeaderTitleRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: rootProps
+  }, other));
+});
+// No React.memo here as if we display the sort icon, we need to recalculate the isOver
+function GridColumnHeaderTitle(props) {
+  var _rootProps$slotProps;
+  var label = props.label,
+    description = props.description;
+  var rootProps = useGridRootProps();
+  var titleRef = React.useRef(null);
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    tooltip = _React$useState2[0],
+    setTooltip = _React$useState2[1];
+  var handleMouseOver = React.useCallback(function () {
+    if (!description && titleRef != null && titleRef.current) {
+      var isOver = isOverflown(titleRef.current);
+      if (isOver) {
+        setTooltip(label);
+      } else {
+        setTooltip('');
+      }
+    }
+  }, [description, label]);
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+    title: description || tooltip
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    children: /*#__PURE__*/_jsx(ColumnHeaderInnerTitle, {
+      onMouseOver: handleMouseOver,
+      ref: titleRef,
+      children: label
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderTitle.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnWidth: PropTypes.number.isRequired,
+  description: PropTypes.node,
+  label: PropTypes.string.isRequired
+} : void 0;
+export { GridColumnHeaderTitle };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/GridColumnHeadersInner.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["isDragging", "className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var isDragging = ownerState.isDragging,
+    hasScrollX = ownerState.hasScrollX,
+    classes = ownerState.classes;
+  var slots = {
+    root: ['columnHeadersInner', isDragging && 'columnHeaderDropZone', hasScrollX && 'columnHeadersInner--scrollable']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridColumnHeadersInnerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'columnHeadersInner',
+  overridesResolver: function overridesResolver(props, styles) {
+    return [_defineProperty({}, "&.".concat(gridClasses.columnHeaderDropZone), styles.columnHeaderDropZone), styles.columnHeadersInner];
+  }
+})(function () {
+  return _defineProperty(_defineProperty({
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexDirection: 'column'
+  }, "&.".concat(gridClasses.columnHeaderDropZone, " .").concat(gridClasses.columnHeaderDraggableContainer), {
+    cursor: 'move'
+  }), "&.".concat(gridClasses['columnHeadersInner--scrollable'], " .").concat(gridClasses.columnHeader, ":last-child"), {
+    borderRight: 'none'
+  });
+});
+export var GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function GridColumnHeadersInner(props, ref) {
+  var _apiRef$current$getRo, _apiRef$current$getRo2;
+  var isDragging = props.isDragging,
+    className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var ownerState = _extends({}, rootProps, {
+    isDragging: isDragging,
+    hasScrollX: (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.hasScrollX) != null ? _apiRef$current$getRo : false
+  });
+  var classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridColumnHeadersInnerRoot, _extends({
+    ref: ref,
+    className: clsx(className, classes.root),
+    ownerState: ownerState
+  }, other));
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
+import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
+  var classes = props.classes,
+    columnMenuOpen = props.columnMenuOpen,
+    colIndex = props.colIndex,
+    height = props.height,
+    isResizing = props.isResizing,
+    sortDirection = props.sortDirection,
+    hasFocus = props.hasFocus,
+    tabIndex = props.tabIndex,
+    separatorSide = props.separatorSide,
+    isDraggable = props.isDraggable,
+    headerComponent = props.headerComponent,
+    description = props.description,
+    elementId = props.elementId,
+    width = props.width,
+    _props$columnMenuIcon = props.columnMenuIconButton,
+    columnMenuIconButton = _props$columnMenuIcon === void 0 ? null : _props$columnMenuIcon,
+    _props$columnMenu = props.columnMenu,
+    columnMenu = _props$columnMenu === void 0 ? null : _props$columnMenu,
+    _props$columnTitleIco = props.columnTitleIconButtons,
+    columnTitleIconButtons = _props$columnTitleIco === void 0 ? null : _props$columnTitleIco,
+    headerClassName = props.headerClassName,
+    label = props.label,
+    resizable = props.resizable,
+    draggableContainerProps = props.draggableContainerProps,
+    columnHeaderSeparatorProps = props.columnHeaderSeparatorProps,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridPrivateApiContext();
+  var rootProps = useGridRootProps();
+  var headerCellRef = React.useRef(null);
+  var _React$useState = React.useState(columnMenuOpen),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showColumnMenuIcon = _React$useState2[0],
+    setShowColumnMenuIcon = _React$useState2[1];
+  var handleRef = useForkRef(headerCellRef, ref);
+  var ariaSort = 'none';
+  if (sortDirection != null) {
+    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
+  }
+  React.useEffect(function () {
+    if (!showColumnMenuIcon) {
+      setShowColumnMenuIcon(columnMenuOpen);
+    }
+  }, [showColumnMenuIcon, columnMenuOpen]);
+  React.useLayoutEffect(function () {
+    var columnMenuState = apiRef.current.state.columnMenu;
+    if (hasFocus && !columnMenuState.open) {
+      var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      var elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null || elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    }
+  }, [apiRef, hasFocus]);
+  return /*#__PURE__*/_jsxs("div", _extends({
+    ref: handleRef,
+    className: clsx(classes.root, headerClassName),
+    style: {
+      height: height,
+      width: width,
+      minWidth: width,
+      maxWidth: width
+    },
+    role: "columnheader",
+    tabIndex: tabIndex,
+    "aria-colindex": colIndex + 1,
+    "aria-sort": ariaSort,
+    "aria-label": headerComponent == null ? label : undefined
+  }, other, {
+    children: [/*#__PURE__*/_jsxs("div", _extends({
+      className: classes.draggableContainer,
+      draggable: isDraggable,
+      role: "presentation"
+    }, draggableContainerProps, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classes.titleContainer,
+        role: "presentation",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classes.titleContainerContent,
+          children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+            label: label,
+            description: description,
+            columnWidth: width
+          })
+        }), columnTitleIconButtons]
+      }), columnMenuIconButton]
+    })), /*#__PURE__*/_jsx(GridColumnHeaderSeparator, _extends({
+      resizable: !rootProps.disableColumnResize && !!resizable,
+      resizing: isResizing,
+      height: height,
+      side: separatorSide
+    }, columnHeaderSeparatorProps)), columnMenu]
+  }));
+});
+export { GridGenericColumnHeaderItem };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnHeaders/GridIconButtonContainer.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['iconButtonContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridIconButtonContainerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'IconButtonContainer',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.iconButtonContainer;
+  }
+})(function () {
+  return {
+    display: 'flex',
+    visibility: 'hidden',
+    width: 0
+  };
+});
+export var GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function GridIconButtonContainer(props, ref) {
+  var className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridIconButtonContainerRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: rootProps
+  }, other));
+});

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

@@ -0,0 +1,5 @@
+export * from './GridColumnHeaderItem';
+export * from './GridColumnHeaderSeparator';
+export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
+export * from './GridColumnHeaderTitle';

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -0,0 +1,160 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { isSpaceKey } from '../../utils/keyboardUtils';
+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";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['checkboxInput']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCellCheckboxRenderer(props, ref) {
+  var _rootProps$slotProps;
+  var field = props.field,
+    id = props.id,
+    isChecked = props.value,
+    formattedValue = props.formattedValue,
+    row = props.row,
+    rowNode = props.rowNode,
+    colDef = props.colDef,
+    isEditable = props.isEditable,
+    cellMode = props.cellMode,
+    hasFocus = props.hasFocus,
+    tabIndex = props.tabIndex,
+    api = props.api,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var checkboxElement = React.useRef(null);
+  var rippleRef = React.useRef(null);
+  var handleRef = useForkRef(checkboxElement, ref);
+  var element = apiRef.current.getCellElement(id, field);
+  var handleChange = function handleChange(event) {
+    var params = {
+      value: event.target.checked,
+      id: id
+    };
+    apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
+  };
+  React.useLayoutEffect(function () {
+    if (tabIndex === 0 && element) {
+      element.tabIndex = -1;
+    }
+  }, [element, tabIndex]);
+  React.useEffect(function () {
+    if (hasFocus) {
+      var _checkboxElement$curr;
+      var input = (_checkboxElement$curr = checkboxElement.current) == null ? void 0 : _checkboxElement$curr.querySelector('input');
+      input == null || input.focus({
+        preventScroll: true
+      });
+    } else if (rippleRef.current) {
+      // Only available in @mui/material v5.4.1 or later
+      rippleRef.current.stop({});
+    }
+  }, [hasFocus]);
+  var handleKeyDown = React.useCallback(function (event) {
+    if (isSpaceKey(event.key)) {
+      // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
+      // TODO: Remove and add a check inside useGridKeyboardNavigation
+      event.stopPropagation();
+    }
+  }, []);
+  if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
+    return null;
+  }
+  var isSelectable = apiRef.current.isRowSelectable(id);
+  var label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
+  return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+    ref: handleRef,
+    tabIndex: tabIndex,
+    checked: isChecked,
+    onChange: handleChange,
+    className: classes.root,
+    inputProps: {
+      'aria-label': label
+    },
+    onKeyDown: handleKeyDown,
+    disabled: !isSelectable,
+    touchRippleRef: rippleRef
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
+});
+process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridCellCheckboxForwardRef };
+export var GridCellCheckboxRenderer = GridCellCheckboxForwardRef;

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/columnSelection/GridHeaderCheckbox.js

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["field", "colDef"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
+import { gridRowSelectionStateSelector } from '../../hooks/features/rowSelection/gridRowSelectionSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridExpandedSortedRowIdsSelector } from '../../hooks/features/filter/gridFilterSelector';
+import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../../hooks/features/pagination/gridPaginationSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['checkboxInput']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckbox(props, ref) {
+  var _rootProps$slotProps;
+  var field = props.field,
+    colDef = props.colDef,
+    other = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    forceUpdate = _React$useState2[1];
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  var selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
+  var visibleRowIds = useGridSelector(apiRef, gridExpandedSortedRowIdsSelector);
+  var paginatedVisibleRowIds = useGridSelector(apiRef, gridPaginatedVisibleSortedGridRowIdsSelector);
+  var filteredSelection = React.useMemo(function () {
+    if (typeof rootProps.isRowSelectable !== 'function') {
+      return selection;
+    }
+    return selection.filter(function (id) {
+      // The row might have been deleted
+      if (!apiRef.current.getRow(id)) {
+        return false;
+      }
+      return rootProps.isRowSelectable(apiRef.current.getRowParams(id));
+    });
+  }, [apiRef, rootProps.isRowSelectable, selection]);
+
+  // All the rows that could be selected / unselected by toggling this checkbox
+  var selectionCandidates = React.useMemo(function () {
+    var rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+
+    // Convert to an object to make O(1) checking if a row exists or not
+    // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
+    return rowIds.reduce(function (acc, id) {
+      acc[id] = true;
+      return acc;
+    }, {});
+  }, [rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+
+  // Amount of rows selected and that are visible in the current page
+  var currentSelectionSize = React.useMemo(function () {
+    return filteredSelection.filter(function (id) {
+      return selectionCandidates[id];
+    }).length;
+  }, [filteredSelection, selectionCandidates]);
+  var isIndeterminate = currentSelectionSize > 0 && currentSelectionSize < Object.keys(selectionCandidates).length;
+  var isChecked = currentSelectionSize > 0;
+  var handleChange = function handleChange(event) {
+    var params = {
+      value: event.target.checked
+    };
+    apiRef.current.publishEvent('headerSelectionCheckboxChange', params);
+  };
+  var tabIndex = tabIndexState !== null && tabIndexState.field === props.field ? 0 : -1;
+  React.useLayoutEffect(function () {
+    var element = apiRef.current.getColumnHeaderElement(props.field);
+    if (tabIndex === 0 && element) {
+      element.tabIndex = -1;
+    }
+  }, [tabIndex, apiRef, props.field]);
+  var handleKeyDown = React.useCallback(function (event) {
+    if (event.key === ' ') {
+      // imperative toggle the checkbox because Space is disable by some preventDefault
+      apiRef.current.publishEvent('headerSelectionCheckboxChange', {
+        value: !isChecked
+      });
+    }
+  }, [apiRef, isChecked]);
+  var handleSelectionChange = React.useCallback(function () {
+    forceUpdate(function (p) {
+      return !p;
+    });
+  }, []);
+  React.useEffect(function () {
+    return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
+  }, [apiRef, handleSelectionChange]);
+  var label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
+  return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+    ref: ref,
+    indeterminate: isIndeterminate,
+    checked: isChecked,
+    onChange: handleChange,
+    className: classes.root,
+    inputProps: {
+      'aria-label': label
+    },
+    tabIndex: tabIndex,
+    onKeyDown: handleKeyDown
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
+});
+process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The column of the current header component.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the column that triggered the event
+   */
+  field: PropTypes.string.isRequired
+} : void 0;
+export { GridHeaderCheckbox };

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

@@ -0,0 +1,2 @@
+export * from './GridCellCheckboxRenderer';
+export * from './GridHeaderCheckbox';

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/containers/GridFooterContainer.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['footerContainer', 'withBorderColor']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridFooterContainerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FooterContainer',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.footerContainer;
+  }
+})({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  minHeight: 52,
+  borderTop: '1px solid'
+});
+var GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
+  var className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridFooterContainerRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: rootProps
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? GridFooterContainer.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 { GridFooterContainer };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/containers/GridMainContainer.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['main']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridMainContainerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'Main',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.main;
+  }
+})(function () {
+  return {
+    position: 'relative',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden'
+  };
+});
+export var GridMainContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _rootProps$experiment;
+  var rootProps = useGridRootProps();
+  var classes = useUtilityClasses(rootProps);
+  var getAriaAttributes = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 // ariaV7 should never change
+  ? useGridAriaAttributes : null;
+  var ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
+  return /*#__PURE__*/_jsx(GridMainContainerRoot, _extends({
+    ref: ref,
+    className: classes.root,
+    ownerState: rootProps
+  }, ariaAttributes, {
+    children: props.children
+  }));
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/containers/GridOverlay.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['overlay']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridOverlayRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'Overlay',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.overlay;
+  }
+})({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignSelf: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
+});
+var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+  var className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridOverlayRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: rootProps
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? GridOverlay.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 { GridOverlay };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/containers/GridRoot.js

@@ -0,0 +1,76 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { GridRootStyles } from './GridRootStyles';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
+import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var autoHeight = ownerState.autoHeight,
+    density = ownerState.density,
+    classes = ownerState.classes;
+  var slots = {
+    root: ['root', autoHeight && 'autoHeight', "root--density".concat(capitalize(density)), 'withBorderColor']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
+  var _rootProps$experiment;
+  var rootProps = useGridRootProps();
+  var children = props.children,
+    className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridPrivateApiContext();
+  var densityValue = useGridSelector(apiRef, gridDensityValueSelector);
+  var rootContainerRef = React.useRef(null);
+  var handleRef = useForkRef(rootContainerRef, ref);
+  var getAriaAttributes = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 // ariaV7 should never change
+  ? null : useGridAriaAttributes;
+  var ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
+  var ownerState = _extends({}, rootProps, {
+    density: densityValue
+  });
+  var classes = useUtilityClasses(ownerState);
+  apiRef.current.register('public', {
+    rootElementRef: rootContainerRef
+  });
+
+  // Our implementation of <NoSsr />
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    mountedState = _React$useState2[0],
+    setMountedState = _React$useState2[1];
+  useEnhancedEffect(function () {
+    setMountedState(true);
+  }, []);
+  if (!mountedState) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
+    ref: handleRef,
+    className: clsx(className, classes.root),
+    ownerState: ownerState
+  }, ariaAttributes, other, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * 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;
+export { GridRoot };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/containers/GridRootStyles.js

@@ -0,0 +1,318 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { alpha, styled, darken, lighten } from '@mui/material/styles';
+import { gridClasses } from '../../constants/gridClasses';
+function getBorderColor(theme) {
+  if (theme.vars) {
+    return theme.vars.palette.TableCell.border;
+  }
+  if (theme.palette.mode === 'light') {
+    return lighten(alpha(theme.palette.divider, 1), 0.88);
+  }
+  return darken(alpha(theme.palette.divider, 1), 0.68);
+}
+var columnHeadersStyles = _defineProperty({}, ".".concat(gridClasses.columnSeparator, ", .").concat(gridClasses['columnSeparator--resizing']), {
+  visibility: 'visible',
+  width: 'auto'
+});
+var columnHeaderStyles = _defineProperty(_defineProperty({}, "& .".concat(gridClasses.iconButtonContainer), {
+  visibility: 'visible',
+  width: 'auto'
+}), "& .".concat(gridClasses.menuIcon), {
+  width: 'auto',
+  visibility: 'visible'
+});
+export var GridRootStyles = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeader), styles.aggregationColumnHeader), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignLeft']), styles['aggregationColumnHeader--alignLeft']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignCenter']), styles['aggregationColumnHeader--alignCenter']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignRight']), styles['aggregationColumnHeader--alignRight']), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeaderLabel), styles.aggregationColumnHeaderLabel), _defineProperty({}, "&.".concat(gridClasses['root--disableUserSelection'], " .").concat(gridClasses.cell), styles['root--disableUserSelection']), _defineProperty({}, "&.".concat(gridClasses.autosizing), styles.autosizing), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
+    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses['cell--rangeTop']), styles['cell--rangeTop']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeBottom']), styles['cell--rangeBottom']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeLeft']), styles['cell--rangeLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeRight']), styles['cell--rangeRight']), _defineProperty({}, "& .".concat(gridClasses['cell--withRightBorder']), styles['cell--withRightBorder']), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--withRightBorder']), styles['columnHeader--withRightBorder']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.headerFilterRow), styles.headerFilterRow), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorderColor), styles.withBorderColor), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
+  }
+})(function (_ref61) {
+  var _extends2;
+  var theme = _ref61.theme;
+  var borderColor = getBorderColor(theme);
+  var radius = theme.shape.borderRadius;
+  var gridStyle = _extends({
+    '--unstable_DataGrid-radius': typeof radius === 'number' ? "".concat(radius, "px") : radius,
+    '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
+    '--unstable_DataGrid-overlayBackground': theme.vars ? "rgba(".concat(theme.vars.palette.background.defaultChannel, " / ").concat(theme.vars.palette.action.disabledOpacity, ")") : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
+    '--DataGrid-cellOffsetMultiplier': 2,
+    flex: 1,
+    boxSizing: 'border-box',
+    position: 'relative',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: borderColor,
+    borderRadius: 'var(--unstable_DataGrid-radius)',
+    color: (theme.vars || theme).palette.text.primary
+  }, theme.typography.body2, (_extends2 = {
+    outline: 'none',
+    height: '100%',
+    display: 'flex',
+    minWidth: 0,
+    // See https://github.com/mui/mui-x/issues/8547
+    minHeight: 0,
+    flexDirection: 'column',
+    overflowAnchor: 'none'
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({
+    height: 'auto'
+  }, "& .".concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
+    borderBottomColor: 'transparent'
+  })), "&.".concat(gridClasses.autosizing), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainerContent, " > *"), {
+    overflow: 'visible !important'
+  }), "& .".concat(gridClasses.cell, " > *"), {
+    overflow: 'visible !important',
+    whiteSpace: 'nowrap'
+  }), "& .".concat(gridClasses.groupingCriteriaCell), {
+    width: 'unset'
+  }), "& .".concat(gridClasses.treeDataGroupingCell), {
+    width: 'unset'
+  })), "& .".concat(gridClasses['virtualScrollerContent--overflowed'], " .").concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
+    borderBottomColor: 'transparent'
+  }), "& .".concat(gridClasses.columnHeader, ", & .").concat(gridClasses.cell), {
+    WebkitTapHighlightColor: 'transparent',
+    lineHeight: null,
+    padding: '0 10px',
+    boxSizing: 'border-box'
+  }), "& .".concat(gridClasses.columnHeader, ":focus-within, & .").concat(gridClasses.cell, ":focus-within"), {
+    outline: "solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / 0.5)") : alpha(theme.palette.primary.main, 0.5), " 1px"),
+    outlineWidth: 1,
+    outlineOffset: -1
+  }), "& .".concat(gridClasses.columnHeader, ":focus, & .").concat(gridClasses.cell, ":focus"), {
+    outline: "solid ".concat(theme.palette.primary.main, " 1px")
+  }), "& .".concat(gridClasses.columnHeaderCheckbox, ", & .").concat(gridClasses.cellCheckbox), {
+    padding: 0,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }), "& .".concat(gridClasses.columnHeader), {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center'
+  }), "& .".concat(gridClasses['columnHeader--sorted'], " .").concat(gridClasses.iconButtonContainer, ", & .").concat(gridClasses['columnHeader--filtered'], " .").concat(gridClasses.iconButtonContainer), {
+    visibility: 'visible',
+    width: 'auto'
+  }), "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], ") .").concat(gridClasses.sortIcon), {
+    opacity: 0,
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.shorter
+    })
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainer), {
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    flex: 1,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    // to anchor the aggregation label
+    position: 'relative'
+  }), "& .".concat(gridClasses.columnHeaderTitleContainerContent), {
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems: 'center'
+  }), "& .".concat(gridClasses['columnHeader--filledGroup'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    boxSizing: 'border-box'
+  }), "& .".concat(gridClasses['columnHeader--filledGroup'], ".").concat(gridClasses['columnHeader--showColumnBorder'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+    borderBottom: "none"
+  }), "& .".concat(gridClasses['columnHeader--filledGroup'], ".").concat(gridClasses['columnHeader--showColumnBorder']), {
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    boxSizing: 'border-box'
+  }), "& .".concat(gridClasses.headerFilterRow), {
+    borderTop: "1px solid ".concat(borderColor)
+  }), "& .".concat(gridClasses.sortIcon, ", & .").concat(gridClasses.filterIcon), {
+    fontSize: 'inherit'
+  }), "& .".concat(gridClasses['columnHeader--sortable']), {
+    cursor: 'pointer'
+  }), "& .".concat(gridClasses['columnHeader--alignCenter'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+    justifyContent: 'center'
+  }), "& .".concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.columnHeaderDraggableContainer, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+    flexDirection: 'row-reverse'
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--alignCenter'], " .").concat(gridClasses.menuIcon, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon), {
+    marginRight: 'auto',
+    marginLeft: -6
+  }), "& .".concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon), {
+    marginRight: 'auto',
+    marginLeft: -10
+  }), "& .".concat(gridClasses['columnHeader--moving']), {
+    backgroundColor: (theme.vars || theme).palette.action.hover
+  }), "& .".concat(gridClasses.columnSeparator), {
+    visibility: 'hidden',
+    position: 'absolute',
+    zIndex: 100,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    color: borderColor
+  }), '@media (hover: hover)', _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(gridClasses.columnHeaders, ":hover"), columnHeadersStyles), "& .".concat(gridClasses.columnHeader, ":hover"), columnHeaderStyles), "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], "):hover .").concat(gridClasses.sortIcon), {
+    opacity: 0.5
+  })), '@media (hover: none)', _defineProperty(_defineProperty({}, "& .".concat(gridClasses.columnHeaders), columnHeadersStyles), "& .".concat(gridClasses.columnHeader), columnHeaderStyles)), "& .".concat(gridClasses['columnSeparator--sideLeft']), {
+    left: -12
+  }), "& .".concat(gridClasses['columnSeparator--sideRight']), {
+    right: -12
+  }), "& .".concat(gridClasses['columnSeparator--resizable']), _defineProperty(_defineProperty({
+    cursor: 'col-resize',
+    touchAction: 'none',
+    '&:hover': {
+      color: (theme.vars || theme).palette.text.primary,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        color: borderColor
+      }
+    }
+  }, "&.".concat(gridClasses['columnSeparator--resizing']), {
+    color: (theme.vars || theme).palette.text.primary
+  }), '& svg', {
+    pointerEvents: 'none'
+  })), "& .".concat(gridClasses.iconSeparator), {
+    color: 'inherit'
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses.menuIcon), {
+    width: 0,
+    visibility: 'hidden',
+    fontSize: 20,
+    marginRight: -10,
+    display: 'flex',
+    alignItems: 'center'
+  }), ".".concat(gridClasses.menuOpen), {
+    visibility: 'visible',
+    width: 'auto'
+  }), "& .".concat(gridClasses.row), {
+    display: 'flex',
+    width: 'fit-content',
+    breakInside: 'avoid',
+    // Avoid the row to be broken in two different print pages.
+    '&:hover, &.Mui-hovered': {
+      backgroundColor: (theme.vars || theme).palette.action.hover,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    },
+    '&.Mui-selected': {
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      '&:hover, &.Mui-hovered': {
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(\n                ").concat(theme.vars.palette.action.selectedOpacity, " + \n                ").concat(theme.vars.palette.action.hoverOpacity, "\n              ))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        }
+      }
+    }
+  }), "& .".concat(gridClasses.cell), {
+    display: 'flex',
+    alignItems: 'center',
+    borderBottom: '1px solid',
+    '&.Mui-selected': {
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      '&:hover, &.Mui-hovered': {
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        }
+      }
+    }
+  }), "&.".concat(gridClasses['root--disableUserSelection'], " .").concat(gridClasses.cell), {
+    userSelect: 'none'
+  }), "& .".concat(gridClasses.row, ":not(.").concat(gridClasses['row--dynamicHeight'], ") > .").concat(gridClasses.cell), {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  }), "& .".concat(gridClasses.cellContent), {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }), "& .".concat(gridClasses.cell, ".").concat(gridClasses['cell--selectionMode']), {
+    cursor: 'default'
+  }), "& .".concat(gridClasses.cell, ".").concat(gridClasses['cell--editing']), {
+    padding: 1,
+    display: 'flex',
+    boxShadow: theme.shadows[2],
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    '&:focus-within': {
+      outline: "solid ".concat((theme.vars || theme).palette.primary.main, " 1px"),
+      outlineOffset: '-1px'
+    }
+  }), "& .".concat(gridClasses['row--editing']), {
+    boxShadow: theme.shadows[2]
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses['row--editing'], " .").concat(gridClasses.cell), {
+    boxShadow: theme.shadows[0],
+    backgroundColor: (theme.vars || theme).palette.background.paper
+  }), "& .".concat(gridClasses.editBooleanCell), {
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }), "& .".concat(gridClasses.booleanCell, "[data-value=\"true\"]"), {
+    color: (theme.vars || theme).palette.text.secondary
+  }), "& .".concat(gridClasses.booleanCell, "[data-value=\"false\"]"), {
+    color: (theme.vars || theme).palette.text.disabled
+  }), "& .".concat(gridClasses.actionsCell), {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gridGap: theme.spacing(1)
+  }), "& .".concat(gridClasses.rowReorderCell), {
+    display: 'inline-flex',
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  }), "& .".concat(gridClasses['rowReorderCell--draggable']), {
+    cursor: 'move',
+    opacity: 1
+  }), "& .".concat(gridClasses.rowReorderCellContainer), {
+    padding: 0,
+    alignItems: 'stretch'
+  }), ".".concat(gridClasses.withBorderColor), {
+    borderColor: borderColor
+  }), "& .".concat(gridClasses['cell--withRightBorder']), {
+    borderRightWidth: '1px',
+    borderRightStyle: 'solid'
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--withRightBorder']), {
+    borderRightWidth: '1px',
+    borderRightStyle: 'solid'
+  }), "& .".concat(gridClasses['cell--textLeft']), {
+    justifyContent: 'flex-start'
+  }), "& .".concat(gridClasses['cell--textRight']), {
+    justifyContent: 'flex-end'
+  }), "& .".concat(gridClasses['cell--textCenter']), {
+    justifyContent: 'center'
+  }), "& .".concat(gridClasses.columnHeaderDraggableContainer), {
+    display: 'flex',
+    width: '100%',
+    height: '100%'
+  }), "& .".concat(gridClasses.rowReorderCellPlaceholder), {
+    display: 'none'
+  }), "& .".concat(gridClasses['columnHeader--dragging'], ", & .").concat(gridClasses['row--dragging']), {
+    background: (theme.vars || theme).palette.background.paper,
+    padding: '0 12px',
+    borderRadius: 'var(--unstable_DataGrid-radius)',
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  }), "& .".concat(gridClasses['row--dragging']), _defineProperty({
+    background: (theme.vars || theme).palette.background.paper,
+    padding: '0 12px',
+    borderRadius: 'var(--unstable_DataGrid-radius)',
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  }, "& .".concat(gridClasses.rowReorderCellPlaceholder), {
+    display: 'flex'
+  })), "& .".concat(gridClasses.treeDataGroupingCell), {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%'
+  }), "& .".concat(gridClasses.treeDataGroupingCellToggle), {
+    flex: '0 0 28px',
+    alignSelf: 'stretch',
+    marginRight: theme.spacing(2)
+  }), _defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses.groupingCriteriaCell), {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%'
+  }), "& .".concat(gridClasses.groupingCriteriaCellToggle), {
+    flex: '0 0 28px',
+    alignSelf: 'stretch',
+    marginRight: theme.spacing(2)
+  })));
+  return gridStyle;
+});

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/containers/GridToolbarContainer.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+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";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['toolbarContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridToolbarContainerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarContainer',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.toolbarContainer;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: theme.spacing(1),
+    padding: theme.spacing(0.5, 0.5, 0)
+  };
+});
+var GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
+  var className = props.className,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var classes = useUtilityClasses(rootProps);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridToolbarContainerRoot, _extends({
+    ref: ref,
+    className: clsx(className, classes.root),
+    ownerState: rootProps
+  }, other, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridToolbarContainer.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 { GridToolbarContainer };

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

@@ -0,0 +1,4 @@
+export * from './GridRoot';
+export * from './GridFooterContainer';
+export * from './GridOverlay';
+export * from './GridToolbarContainer';

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

@@ -0,0 +1,18 @@
+export * from './base';
+export * from './cell';
+export * from './containers';
+export * from './columnHeaders';
+export * from './columnSelection';
+export * from '../material/icons';
+export * from './menu';
+export * from './panel';
+export * from './toolbar';
+export * from './GridApiContext';
+export * from './GridFooter';
+export * from './GridHeader';
+export * from './GridLoadingOverlay';
+export * from './GridNoRowsOverlay';
+export * from './GridPagination';
+export * from './GridRowCount';
+export * from './GridRow';
+export * from './GridSelectedRowCount';

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/GridMenu.js

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["open", "target", "onClose", "children", "position", "className", "onExited"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect, HTMLElementType } from '@mui/utils';
+import Grow from '@mui/material/Grow';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['menu']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridMenuRoot = styled(Popper, {
+  name: 'MuiDataGrid',
+  slot: 'Menu',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.menu;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _defineProperty({
+    zIndex: theme.zIndex.modal
+  }, "& .".concat(gridClasses.menuList), {
+    outline: 0
+  });
+});
+var transformOrigin = {
+  'bottom-start': 'top left',
+  'bottom-end': 'top right'
+};
+function GridMenu(props) {
+  var _rootProps$slotProps;
+  var open = props.open,
+    target = props.target,
+    onClose = props.onClose,
+    _children = props.children,
+    position = props.position,
+    className = props.className,
+    onExited = props.onExited,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var classes = useUtilityClasses(rootProps);
+  var savedFocusRef = React.useRef(null);
+  useEnhancedEffect(function () {
+    if (open) {
+      savedFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    } else {
+      var _savedFocusRef$curren, _savedFocusRef$curren2;
+      (_savedFocusRef$curren = savedFocusRef.current) == null || (_savedFocusRef$curren2 = _savedFocusRef$curren.focus) == null || _savedFocusRef$curren2.call(_savedFocusRef$curren);
+      savedFocusRef.current = null;
+    }
+  }, [open]);
+  React.useEffect(function () {
+    // Emit menuOpen or menuClose events
+    var eventName = open ? 'menuOpen' : 'menuClose';
+    apiRef.current.publishEvent(eventName, {
+      target: target
+    });
+  }, [apiRef, open, target]);
+  var handleExited = function handleExited(popperOnExited) {
+    return function (node) {
+      if (popperOnExited) {
+        popperOnExited();
+      }
+      if (onExited) {
+        onExited(node);
+      }
+    };
+  };
+  var handleClickAway = function handleClickAway(event) {
+    if (event.target && (target === event.target || target != null && target.contains(event.target))) {
+      return;
+    }
+    onClose(event);
+  };
+  return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
+    as: rootProps.slots.basePopper,
+    className: clsx(className, classes.root),
+    ownerState: rootProps,
+    open: open,
+    anchorEl: target,
+    transition: true,
+    placement: position
+  }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.basePopper, {
+    children: function children(_ref3) {
+      var TransitionProps = _ref3.TransitionProps,
+        placement = _ref3.placement;
+      return /*#__PURE__*/_jsx(ClickAwayListener, {
+        onClickAway: handleClickAway,
+        mouseEvent: "onMouseDown",
+        children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
+          style: {
+            transformOrigin: transformOrigin[placement]
+          },
+          onExited: handleExited(TransitionProps == null ? void 0 : TransitionProps.onExited),
+          children: /*#__PURE__*/_jsx(Paper, {
+            children: _children
+          })
+        }))
+      });
+    }
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  onClose: PropTypes.func.isRequired,
+  onExited: PropTypes.func,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool.isRequired,
+  position: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  target: HTMLElementType
+} : void 0;
+export { GridMenu };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_useEventCallback as useEventCallback, HTMLElementType } from '@mui/utils';
+import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
+import { GridMenu } from '../GridMenu';
+import { jsx as _jsx } from "react/jsx-runtime";
+function GridColumnHeaderMenu(_ref) {
+  var columnMenuId = _ref.columnMenuId,
+    columnMenuButtonId = _ref.columnMenuButtonId,
+    ContentComponent = _ref.ContentComponent,
+    contentComponentProps = _ref.contentComponentProps,
+    field = _ref.field,
+    open = _ref.open,
+    target = _ref.target,
+    onExited = _ref.onExited;
+  var apiRef = useGridApiContext();
+  var colDef = apiRef.current.getColumn(field);
+  var hideMenu = useEventCallback(function (event) {
+    if (event) {
+      // Prevent triggering the sorting
+      event.stopPropagation();
+      if (target != null && target.contains(event.target)) {
+        return;
+      }
+    }
+    apiRef.current.hideColumnMenu();
+  });
+  if (!target || !colDef) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridMenu, {
+    placement: "bottom-".concat(colDef.align === 'right' ? 'start' : 'end'),
+    open: open,
+    target: target,
+    onClose: hideMenu,
+    onExited: onExited,
+    children: /*#__PURE__*/_jsx(ContentComponent, _extends({
+      colDef: colDef,
+      hideMenu: hideMenu,
+      open: open,
+      id: columnMenuId,
+      labelledby: columnMenuButtonId
+    }, contentComponentProps))
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnMenuButtonId: PropTypes.string,
+  columnMenuId: PropTypes.string,
+  ContentComponent: PropTypes.elementType.isRequired,
+  contentComponentProps: PropTypes.any,
+  field: PropTypes.string.isRequired,
+  onExited: PropTypes.func,
+  open: PropTypes.bool.isRequired,
+  target: HTMLElementType
+} : void 0;
+export { GridColumnHeaderMenu };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/columnMenu/GridColumnMenu.js

@@ -0,0 +1,81 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridColumnMenuSlots } from '../../../hooks/features/columnMenu/useGridColumnMenuSlots';
+import { GridColumnMenuContainer } from './GridColumnMenuContainer';
+import { GridColumnMenuColumnsItem } from './menuItems/GridColumnMenuColumnsItem';
+import { GridColumnMenuFilterItem } from './menuItems/GridColumnMenuFilterItem';
+import { GridColumnMenuSortItem } from './menuItems/GridColumnMenuSortItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var GRID_COLUMN_MENU_SLOTS = {
+  columnMenuSortItem: GridColumnMenuSortItem,
+  columnMenuFilterItem: GridColumnMenuFilterItem,
+  columnMenuColumnsItem: GridColumnMenuColumnsItem
+};
+export var GRID_COLUMN_MENU_SLOT_PROPS = {
+  columnMenuSortItem: {
+    displayOrder: 10
+  },
+  columnMenuFilterItem: {
+    displayOrder: 20
+  },
+  columnMenuColumnsItem: {
+    displayOrder: 30
+  }
+};
+var GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
+  var defaultSlots = props.defaultSlots,
+    defaultSlotProps = props.defaultSlotProps,
+    slots = props.slots,
+    slotProps = props.slotProps,
+    other = _objectWithoutProperties(props, _excluded);
+  var orderedSlots = useGridColumnMenuSlots(_extends({}, other, {
+    defaultSlots: defaultSlots,
+    defaultSlotProps: defaultSlotProps,
+    slots: slots,
+    slotProps: slotProps
+  }));
+  return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
+    ref: ref
+  }, other, {
+    children: orderedSlots.map(function (_ref, index) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        Component = _ref2[0],
+        otherProps = _ref2[1];
+      return /*#__PURE__*/_jsx(Component, _extends({}, otherProps), index);
+    })
+  }));
+});
+var GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
+  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
+    ref: ref,
+    defaultSlots: GRID_COLUMN_MENU_SLOTS,
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  hideMenu: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  labelledby: PropTypes.string,
+  open: PropTypes.bool.isRequired,
+  /**
+   * Could be used to pass new props or override props specific to a column menu component
+   * e.g. `displayOrder`
+   */
+  slotProps: PropTypes.object,
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots: PropTypes.object
+} : void 0;
+export { GridColumnMenu, GridGenericColumnMenu };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["hideMenu", "colDef", "id", "labelledby", "className", "children", "open"];
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import MenuList from '@mui/material/MenuList';
+import { styled } from '@mui/material/styles';
+import { isHideMenuKey, isTabKey } from '../../../utils/keyboardUtils';
+import { gridClasses } from '../../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+var StyledMenuList = styled(MenuList)(function () {
+  return {
+    minWidth: 248
+  };
+});
+var GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColumnMenuContainer(props, ref) {
+  var hideMenu = props.hideMenu,
+    colDef = props.colDef,
+    id = props.id,
+    labelledby = props.labelledby,
+    className = props.className,
+    children = props.children,
+    open = props.open,
+    other = _objectWithoutProperties(props, _excluded);
+  var handleListKeyDown = React.useCallback(function (event) {
+    if (isTabKey(event.key)) {
+      event.preventDefault();
+    }
+    if (isHideMenuKey(event.key)) {
+      hideMenu(event);
+    }
+  }, [hideMenu]);
+  return /*#__PURE__*/_jsx(StyledMenuList, _extends({
+    id: id,
+    ref: ref,
+    className: clsx(gridClasses.menuList, className),
+    "aria-labelledby": labelledby,
+    onKeyDown: handleListKeyDown,
+    autoFocus: open
+  }, other, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridColumnMenuContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  hideMenu: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  labelledby: PropTypes.string,
+  open: PropTypes.bool.isRequired
+} : void 0;
+export { GridColumnMenuContainer };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/columnMenu/GridColumnMenuItemProps.js

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

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/columnMenu/GridColumnMenuProps.js

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

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

@@ -0,0 +1,9 @@
+// shared modules
+export * from './GridColumnHeaderMenu';
+export * from './GridColumnMenuProps';
+export * from './GridColumnMenuItemProps';
+export * from './GridColumnMenuContainer';
+export { GridGenericColumnMenu } from './GridColumnMenu';
+
+// items
+export * from './menuItems';

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { GridColumnMenuHideItem } from './GridColumnMenuHideItem';
+import { GridColumnMenuManageItem } from './GridColumnMenuManageItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridColumnMenuColumnsItem(props) {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(GridColumnMenuHideItem, _extends({}, props)), /*#__PURE__*/_jsx(GridColumnMenuManageItem, _extends({}, props))]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnMenuColumnsItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired
+} : void 0;
+export { GridColumnMenuColumnsItem };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridColumnMenuFilterItem(props) {
+  var colDef = props.colDef,
+    onClick = props.onClick;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var showFilter = React.useCallback(function (event) {
+    onClick(event);
+    apiRef.current.showFilterPanel(colDef.field);
+  }, [apiRef, colDef.field, onClick]);
+  if (rootProps.disableColumnFilter || !colDef.filterable) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(MenuItem, {
+    onClick: showFilter,
+    children: [/*#__PURE__*/_jsx(ListItemIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuFilterIcon, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/_jsx(ListItemText, {
+      children: apiRef.current.getLocaleText('columnMenuFilter')
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnMenuFilterItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired
+} : void 0;
+export { GridColumnMenuFilterItem };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
+import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridColumnMenuHideItem(props) {
+  var colDef = props.colDef,
+    onClick = props.onClick;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+  var columnsWithMenu = visibleColumns.filter(function (col) {
+    return col.disableColumnMenu !== true;
+  });
+  // do not allow to hide the last column with menu
+  var disabled = columnsWithMenu.length === 1;
+  var toggleColumn = React.useCallback(function (event) {
+    /**
+     * Disabled `MenuItem` would trigger `click` event
+     * after imperative `.click()` call on HTML element.
+     * Also, click is triggered in testing environment as well.
+     */
+    if (disabled) {
+      return;
+    }
+    apiRef.current.setColumnVisibility(colDef.field, false);
+    onClick(event);
+  }, [apiRef, colDef.field, onClick, disabled]);
+  if (rootProps.disableColumnSelector) {
+    return null;
+  }
+  if (colDef.hideable === false) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(MenuItem, {
+    onClick: toggleColumn,
+    disabled: disabled,
+    children: [/*#__PURE__*/_jsx(ListItemIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuHideIcon, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/_jsx(ListItemText, {
+      children: apiRef.current.getLocaleText('columnMenuHideColumn')
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnMenuHideItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired
+} : void 0;
+export { GridColumnMenuHideItem };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+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";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridColumnMenuManageItem(props) {
+  var onClick = props.onClick;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var showColumns = React.useCallback(function (event) {
+    onClick(event); // hide column menu
+    apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
+  }, [apiRef, onClick]);
+  if (rootProps.disableColumnSelector) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(MenuItem, {
+    onClick: showColumns,
+    children: [/*#__PURE__*/_jsx(ListItemIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuManageColumnsIcon, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/_jsx(ListItemText, {
+      children: apiRef.current.getLocaleText('columnMenuManageColumns')
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnMenuManageItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired
+} : void 0;
+export { GridColumnMenuManageItem };

control-plane-ui/node_modules/@mui/x-data-grid/legacy/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { useGridSelector } from '../../../../hooks/utils/useGridSelector';
+import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector';
+import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridColumnMenuSortItem(props) {
+  var _colDef$sortingOrder;
+  var colDef = props.colDef,
+    onClick = props.onClick;
+  var apiRef = useGridApiContext();
+  var sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  var rootProps = useGridRootProps();
+  var sortDirection = React.useMemo(function () {
+    if (!colDef) {
+      return null;
+    }
+    var sortItem = sortModel.find(function (item) {
+      return item.field === colDef.field;
+    });
+    return sortItem == null ? void 0 : sortItem.sort;
+  }, [colDef, sortModel]);
+  var sortingOrder = (_colDef$sortingOrder = colDef.sortingOrder) != null ? _colDef$sortingOrder : rootProps.sortingOrder;
+  var onSortMenuItemClick = React.useCallback(function (event) {
+    onClick(event);
+    var direction = event.currentTarget.getAttribute('data-value') || null;
+    apiRef.current.sortColumn(colDef, direction === sortDirection ? null : direction);
+  }, [apiRef, colDef, onClick, sortDirection]);
+  if (!colDef || !colDef.sortable || !sortingOrder.some(function (item) {
+    return !!item;
+  })) {
+    return null;
+  }
+  var getLabel = function getLabel(key) {
+    var label = apiRef.current.getLocaleText(key);
+    return typeof label === 'function' ? label(colDef) : label;
+  };
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/_jsxs(MenuItem, {
+      onClick: onSortMenuItemClick,
+      "data-value": "asc",
+      children: [/*#__PURE__*/_jsx(ListItemIcon, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortAscendingIcon, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/_jsx(ListItemText, {
+        children: getLabel('columnMenuSortAsc')
+      })]
+    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/_jsxs(MenuItem, {
+      onClick: onSortMenuItemClick,
+      "data-value": "desc",
+      children: [/*#__PURE__*/_jsx(ListItemIcon, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortDescendingIcon, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/_jsx(ListItemText, {
+        children: getLabel('columnMenuSortDesc')
+      })]
+    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/_jsxs(MenuItem, {
+      onClick: onSortMenuItemClick,
+      children: [/*#__PURE__*/_jsx(ListItemIcon, {}), /*#__PURE__*/_jsx(ListItemText, {
+        children: apiRef.current.getLocaleText('columnMenuUnsort')
+      })]
+    }) : null]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnMenuSortItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired
+} : void 0;
+export { GridColumnMenuSortItem };

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

@@ -0,0 +1,5 @@
+export * from './GridColumnMenuColumnsItem';
+export * from './GridColumnMenuManageItem';
+export * from './GridColumnMenuFilterItem';
+export * from './GridColumnMenuHideItem';
+export * from './GridColumnMenuSortItem';

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

@@ -0,0 +1,2 @@
+export * from './columnMenu';
+export * from './GridMenu';

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

@@ -0,0 +1,250 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _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";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['columnsPanel'],
+    columnsPanelRow: ['columnsPanelRow']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridColumnsPanelRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsPanel',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.columnsPanel;
+  }
+})({
+  padding: '8px 0px 8px 8px'
+});
+var GridColumnsPanelRowRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsPanelRow',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.columnsPanelRow;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _defineProperty({
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '1px 8px 1px 7px'
+  }, "& .".concat(switchClasses.root), {
+    marginRight: theme.spacing(0.5)
+  });
+});
+var GridIconButtonRoot = styled(IconButton)({
+  justifyContent: 'flex-end'
+});
+var collator = new Intl.Collator();
+var defaultSearchPredicate = function defaultSearchPredicate(column, searchValue) {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};
+function GridColumnsPanel(props) {
+  var _rootProps$slotProps, _rootProps$slotProps3, _rootProps$slotProps4;
+  var apiRef = useGridApiContext();
+  var searchInputRef = React.useRef(null);
+  var columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  var columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  var rootProps = useGridRootProps();
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    searchValue = _React$useState2[0],
+    setSearchValue = _React$useState2[1];
+  var classes = useUtilityClasses(rootProps);
+  var sort = props.sort,
+    _props$searchPredicat = props.searchPredicate,
+    searchPredicate = _props$searchPredicat === void 0 ? defaultSearchPredicate : _props$searchPredicat,
+    _props$autoFocusSearc = props.autoFocusSearchField,
+    autoFocusSearchField = _props$autoFocusSearc === void 0 ? true : _props$autoFocusSearc,
+    _props$disableHideAll = props.disableHideAllButton,
+    disableHideAllButton = _props$disableHideAll === void 0 ? false : _props$disableHideAll,
+    _props$disableShowAll = props.disableShowAllButton,
+    disableShowAllButton = _props$disableShowAll === void 0 ? false : _props$disableShowAll,
+    getTogglableColumns = props.getTogglableColumns,
+    other = _objectWithoutProperties(props, _excluded);
+  var sortedColumns = React.useMemo(function () {
+    switch (sort) {
+      case 'asc':
+        return _toConsumableArray(columns).sort(function (a, b) {
+          return collator.compare(a.headerName || a.field, b.headerName || b.field);
+        });
+      case 'desc':
+        return _toConsumableArray(columns).sort(function (a, b) {
+          return -collator.compare(a.headerName || a.field, b.headerName || b.field);
+        });
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
+  var toggleColumn = function toggleColumn(event) {
+    var _ref3 = event.target,
+      field = _ref3.name;
+    apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
+  };
+  var toggleAllColumns = React.useCallback(function (isVisible) {
+    var currentModel = gridColumnVisibilityModelSelector(apiRef);
+    var newModel = _extends({}, currentModel);
+    var togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
+    columns.forEach(function (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]);
+  var handleSearchValueChange = React.useCallback(function (event) {
+    setSearchValue(event.target.value);
+  }, []);
+  var currentColumns = React.useMemo(function () {
+    var togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    var togglableSortedColumns = togglableColumns ? sortedColumns.filter(function (_ref4) {
+      var field = _ref4.field;
+      return togglableColumns.includes(field);
+    }) : sortedColumns;
+    if (!searchValue) {
+      return togglableSortedColumns;
+    }
+    return togglableSortedColumns.filter(function (column) {
+      return searchPredicate(column, searchValue.toLowerCase());
+    });
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
+  var firstSwitchRef = React.useRef(null);
+  React.useEffect(function () {
+    if (autoFocusSearchField) {
+      searchInputRef.current.focus();
+    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
+      firstSwitchRef.current.focus();
+    }
+  }, [autoFocusSearchField]);
+  var firstHideableColumnFound = false;
+  var isFirstHideableColumn = function 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(function (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: function onClick() {
+          return 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: function onClick() {
+          return 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/legacy/components/panel/GridPanel.js

@@ -0,0 +1,141 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "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 var gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
+var GridPanelRoot = styled(Popper, {
+  name: 'MuiDataGrid',
+  slot: 'Panel',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.panel;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    zIndex: theme.zIndex.modal
+  };
+});
+var GridPaperRoot = styled(Paper, {
+  name: 'MuiDataGrid',
+  slot: 'Paper',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.paper;
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    minWidth: 300,
+    maxHeight: 450,
+    display: 'flex'
+  };
+});
+var GridPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    classesProp = props.classes,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var classes = gridPanelClasses;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isPlaced = _React$useState2[0],
+    setIsPlaced = _React$useState2[1];
+  var handleClickAway = React.useCallback(function () {
+    apiRef.current.hidePreferences();
+  }, [apiRef]);
+  var handleKeyDown = React.useCallback(function (event) {
+    if (isEscapeKey(event.key)) {
+      apiRef.current.hidePreferences();
+    }
+  }, [apiRef]);
+  var modifiers = React.useMemo(function () {
+    return [{
+      name: 'flip',
+      enabled: true,
+      options: {
+        rootBoundary: 'document'
+      }
+    }, {
+      name: 'isPlaced',
+      enabled: true,
+      phase: 'main',
+      fn: function fn() {
+        setIsPlaced(true);
+      },
+      effect: function effect() {
+        return function () {
+          setIsPlaced(false);
+        };
+      }
+    }];
+  }, []);
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    anchorEl = _React$useState4[0],
+    setAnchorEl = _React$useState4[1];
+  React.useEffect(function () {
+    var _apiRef$current$rootE;
+    var columnHeadersElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE.querySelector(".".concat(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/legacy/components/panel/GridPanelContent.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['panelContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridPanelContentRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelContent',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.panelContent;
+  }
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'auto',
+  flex: '1 1',
+  maxHeight: 400
+});
+function GridPanelContent(props) {
+  var className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var 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/legacy/components/panel/GridPanelFooter.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['panelFooter']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridPanelFooterRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelFooter',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.panelFooter;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    padding: theme.spacing(0.5),
+    display: 'flex',
+    justifyContent: 'space-between'
+  };
+});
+function GridPanelFooter(props) {
+  var className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var 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/legacy/components/panel/GridPanelHeader.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['panelHeader']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridPanelHeaderRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelHeader',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.panelHeader;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    padding: theme.spacing(1)
+  };
+});
+function GridPanelHeader(props) {
+  var className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var 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/legacy/components/panel/GridPanelWrapper.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['panelWrapper']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridPanelWrapperRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelWrapper',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.panelWrapper;
+  }
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  '&:focus': {
+    outline: 0
+  }
+});
+var isEnabled = function isEnabled() {
+  return true;
+};
+var GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
+  var className = props.className,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootProps = useGridRootProps();
+  var 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/legacy/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 var GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
+  var _preferencePanelState, _rootProps$slotProps, _rootProps$slotProps2;
+  var apiRef = useGridApiContext();
+  var columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  var rootProps = useGridRootProps();
+  var preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  var 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/legacy/components/panel/filterPanel/GridFilterForm.js

@@ -0,0 +1,479 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['filterForm'],
+    deleteIcon: ['filterFormDeleteIcon'],
+    logicOperatorInput: ['filterFormLogicOperatorInput'],
+    columnInput: ['filterFormColumnInput'],
+    operatorInput: ['filterFormOperatorInput'],
+    valueInput: ['filterFormValueInput']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridFilterFormRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterForm',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.filterForm;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: 'flex',
+    padding: theme.spacing(1)
+  };
+});
+var FilterFormDeleteIcon = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormDeleteIcon',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.filterFormDeleteIcon;
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    flexShrink: 0,
+    justifyContent: 'flex-end',
+    marginRight: theme.spacing(0.5),
+    marginBottom: theme.spacing(0.2)
+  };
+});
+var FilterFormLogicOperatorInput = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormLogicOperatorInput',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.filterFormLogicOperatorInput;
+  }
+})({
+  minWidth: 55,
+  marginRight: 5,
+  justifyContent: 'end'
+});
+var FilterFormColumnInput = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormColumnInput',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.filterFormColumnInput;
+  }
+})({
+  width: 150
+});
+var FilterFormOperatorInput = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormOperatorInput',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.filterFormOperatorInput;
+  }
+})({
+  width: 120
+});
+var FilterFormValueInput = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FilterFormValueInput',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.filterFormValueInput;
+  }
+})({
+  width: 190
+});
+var getLogicOperatorLocaleKey = function 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`.');
+  }
+};
+var getColumnLabel = function getColumnLabel(col) {
+  return col.headerName || col.field;
+};
+var collator = new Intl.Collator();
+var 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;
+  var item = props.item,
+    hasMultipleFilters = props.hasMultipleFilters,
+    deleteFilter = props.deleteFilter,
+    applyFilterChanges = props.applyFilterChanges,
+    multiFilterOperator = props.multiFilterOperator,
+    showMultiFilterOperators = props.showMultiFilterOperators,
+    disableMultiFilterOperator = props.disableMultiFilterOperator,
+    applyMultiFilterOperatorChanges = props.applyMultiFilterOperatorChanges,
+    focusElementRef = props.focusElementRef,
+    _props$logicOperators = props.logicOperators,
+    logicOperators = _props$logicOperators === void 0 ? [GridLogicOperator.And, GridLogicOperator.Or] : _props$logicOperators,
+    columnsSort = props.columnsSort,
+    filterColumns = props.filterColumns,
+    _props$deleteIconProp = props.deleteIconProps,
+    deleteIconProps = _props$deleteIconProp === void 0 ? {} : _props$deleteIconProp,
+    _props$logicOperatorI = props.logicOperatorInputProps,
+    logicOperatorInputProps = _props$logicOperatorI === void 0 ? {} : _props$logicOperatorI,
+    _props$operatorInputP = props.operatorInputProps,
+    operatorInputProps = _props$operatorInputP === void 0 ? {} : _props$operatorInputP,
+    _props$columnInputPro = props.columnInputProps,
+    columnInputProps = _props$columnInputPro === void 0 ? {} : _props$columnInputPro,
+    _props$valueInputProp = props.valueInputProps,
+    valueInputProps = _props$valueInputProp === void 0 ? {} : _props$valueInputProp,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
+  var filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  var filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  var columnSelectId = useId();
+  var columnSelectLabelId = useId();
+  var operatorSelectId = useId();
+  var operatorSelectLabelId = useId();
+  var rootProps = useGridRootProps();
+  var classes = useUtilityClasses(rootProps);
+  var valueRef = React.useRef(null);
+  var filterSelectorRef = React.useRef(null);
+  var hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
+  var baseFormControlProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseFormControl) || {};
+  var baseSelectProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {};
+  var isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  var baseInputLabelProps = ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel) || {};
+  var baseSelectOptionProps = ((_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption) || {};
+  var InputComponentProps = valueInputProps.InputComponentProps,
+    valueInputPropsOther = _objectWithoutProperties(valueInputProps, _excluded2);
+  var filteredColumns = React.useMemo(function () {
+    if (filterColumns === undefined || typeof filterColumns !== 'function') {
+      return filterableColumns;
+    }
+    var filteredFields = filterColumns({
+      field: item.field,
+      columns: filterableColumns,
+      currentFilters: (filterModel == null ? void 0 : filterModel.items) || []
+    });
+    return filterableColumns.filter(function (column) {
+      return filteredFields.includes(column.field);
+    });
+  }, [filterColumns, filterModel == null ? void 0 : filterModel.items, filterableColumns, item.field]);
+  var sortedFilteredColumns = React.useMemo(function () {
+    switch (columnsSort) {
+      case 'asc':
+        return filteredColumns.sort(function (a, b) {
+          return collator.compare(getColumnLabel(a), getColumnLabel(b));
+        });
+      case 'desc':
+        return filteredColumns.sort(function (a, b) {
+          return -collator.compare(getColumnLabel(a), getColumnLabel(b));
+        });
+      default:
+        return filteredColumns;
+    }
+  }, [filteredColumns, columnsSort]);
+  var currentColumn = item.field ? apiRef.current.getColumn(item.field) : null;
+  var currentOperator = React.useMemo(function () {
+    var _currentColumn$filter;
+    if (!item.operator || !currentColumn) {
+      return null;
+    }
+    return (_currentColumn$filter = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter.find(function (operator) {
+      return operator.value === item.operator;
+    });
+  }, [item, currentColumn]);
+  var changeColumn = React.useCallback(function (event) {
+    var field = event.target.value;
+    var column = apiRef.current.getColumn(field);
+    if (column.field === currentColumn.field) {
+      // column did not change
+      return;
+    }
+
+    // try to keep the same operator when column change
+    var newOperator = column.filterOperators.find(function (operator) {
+      return operator.value === item.operator;
+    }) || column.filterOperators[0];
+
+    // Erase filter value if the input component or filtered column type is modified
+    var eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent) || column.type !== currentColumn.type;
+    applyFilterChanges(_extends({}, item, {
+      field: field,
+      operator: newOperator.value,
+      value: eraseItemValue ? undefined : item.value
+    }));
+  }, [apiRef, applyFilterChanges, item, currentColumn, currentOperator]);
+  var changeOperator = React.useCallback(function (event) {
+    var operator = event.target.value;
+    var newOperator = currentColumn == null ? void 0 : currentColumn.filterOperators.find(function (op) {
+      return op.value === operator;
+    });
+    var eraseItemValue = !(newOperator != null && newOperator.InputComponent) || (newOperator == null ? void 0 : newOperator.InputComponent) !== (currentOperator == null ? void 0 : currentOperator.InputComponent);
+    applyFilterChanges(_extends({}, item, {
+      operator: operator,
+      value: eraseItemValue ? undefined : item.value
+    }));
+  }, [applyFilterChanges, item, currentColumn, currentOperator]);
+  var changeLogicOperator = React.useCallback(function (event) {
+    var logicOperator = event.target.value === GridLogicOperator.And.toString() ? GridLogicOperator.And : GridLogicOperator.Or;
+    applyMultiFilterOperatorChanges(logicOperator);
+  }, [applyMultiFilterOperatorChanges]);
+  var handleDeleteFilter = function 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, function () {
+    return {
+      focus: function 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(function (logicOperator) {
+          return /*#__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(function (col) {
+          return /*#__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(function (operator) {
+          return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+            native: isBaseSelectNative,
+            key: operator.value,
+            value: operator.value
+          }), operator.label || apiRef.current.getLocaleText("filterOperator".concat(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/legacy/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -0,0 +1,118 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["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";
+var BooleanOperatorContainer = styled('div')(_defineProperty({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%'
+}, "& button", {
+  margin: 'auto 0px 5px 5px'
+}));
+function GridFilterInputBoolean(props) {
+  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
+  var item = props.item,
+    applyValue = props.applyValue,
+    apiRef = props.apiRef,
+    focusElementRef = props.focusElementRef,
+    isFilterActive = props.isFilterActive,
+    clearButton = props.clearButton,
+    tabIndex = props.tabIndex,
+    labelProp = props.label,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'standard' : _props$variant,
+    InputLabelProps = props.InputLabelProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React.useState(item.value || ''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filterValueState = _React$useState2[0],
+    setFilterValueState = _React$useState2[1];
+  var rootProps = useGridRootProps();
+  var labelId = useId();
+  var selectId = useId();
+  var baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  var baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
+  var onFilterChange = React.useCallback(function (event) {
+    var value = event.target.value;
+    setFilterValueState(value);
+    applyValue(_extends({}, item, {
+      value: value
+    }));
+  }, [applyValue, item]);
+  React.useEffect(function () {
+    setFilterValueState(item.value || '');
+  }, [item.value]);
+  var 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: 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/legacy/components/panel/filterPanel/GridFilterInputDate.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["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;
+  var item = props.item,
+    applyValue = props.applyValue,
+    type = props.type,
+    apiRef = props.apiRef,
+    focusElementRef = props.focusElementRef,
+    InputProps = props.InputProps,
+    isFilterActive = props.isFilterActive,
+    clearButton = props.clearButton,
+    tabIndex = props.tabIndex,
+    disabled = props.disabled,
+    other = _objectWithoutProperties(props, _excluded);
+  var filterTimeout = useTimeout();
+  var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filterValueState = _React$useState2[0],
+    setFilterValueState = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    applying = _React$useState4[0],
+    setIsApplying = _React$useState4[1];
+  var id = useId();
+  var rootProps = useGridRootProps();
+  var onFilterChange = React.useCallback(function (event) {
+    var value = event.target.value;
+    setFilterValueState(String(value));
+    setIsApplying(true);
+    filterTimeout.start(rootProps.filterDebounceMs, function () {
+      applyValue(_extends({}, item, {
+        value: value
+      }));
+      setIsApplying(false);
+    });
+  }, [applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
+  React.useEffect(function () {
+    var _item$value2;
+    var 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: disabled
+    }, InputProps, {
+      inputProps: _extends({
+        max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
+        tabIndex: 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/legacy/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -0,0 +1,163 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var filter = createFilterOptions();
+function GridFilterInputMultipleSingleSelect(props) {
+  var _resolvedColumn, _resolvedColumn2;
+  var item = props.item,
+    applyValue = props.applyValue,
+    type = props.type,
+    apiRef = props.apiRef,
+    focusElementRef = props.focusElementRef,
+    color = props.color,
+    error = props.error,
+    helperText = props.helperText,
+    size = props.size,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'standard' : _props$variant,
+    getOptionLabelProp = props.getOptionLabel,
+    getOptionValueProp = props.getOptionValue,
+    other = _objectWithoutProperties(props, _excluded);
+  var TextFieldProps = {
+    color: color,
+    error: error,
+    helperText: helperText,
+    size: size,
+    variant: variant
+  };
+  var id = useId();
+  var rootProps = useGridRootProps();
+  var resolvedColumn = null;
+  if (item.field) {
+    var column = apiRef.current.getColumn(item.field);
+    if (isSingleSelectColDef(column)) {
+      resolvedColumn = column;
+    }
+  }
+  var getOptionValue = getOptionValueProp || ((_resolvedColumn = resolvedColumn) == null ? void 0 : _resolvedColumn.getOptionValue);
+  var getOptionLabel = getOptionLabelProp || ((_resolvedColumn2 = resolvedColumn) == null ? void 0 : _resolvedColumn2.getOptionLabel);
+  var isOptionEqualToValue = React.useCallback(function (option, value) {
+    return getOptionValue(option) === getOptionValue(value);
+  }, [getOptionValue]);
+  var resolvedValueOptions = React.useMemo(function () {
+    var _resolvedColumn3;
+    if (!((_resolvedColumn3 = resolvedColumn) != null && _resolvedColumn3.valueOptions)) {
+      return [];
+    }
+    if (typeof resolvedColumn.valueOptions === 'function') {
+      return resolvedColumn.valueOptions({
+        field: resolvedColumn.field
+      });
+    }
+    return resolvedColumn.valueOptions;
+  }, [resolvedColumn]);
+  var resolvedFormattedValueOptions = React.useMemo(function () {
+    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
+  var filteredValues = React.useMemo(function () {
+    if (!Array.isArray(item.value)) {
+      return [];
+    }
+    if (resolvedValueOptions !== undefined) {
+      var itemValueIndexes = item.value.map(function (element) {
+        // Gets the index matching between values and valueOptions
+        return resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(function (formattedOption) {
+          return formattedOption === element;
+        });
+      });
+      return itemValueIndexes.filter(function (index) {
+        return index >= 0;
+      }).map(function (index) {
+        return resolvedValueOptions[index];
+      });
+    }
+    return item.value;
+  }, [item.value, resolvedValueOptions, resolvedFormattedValueOptions]);
+  React.useEffect(function () {
+    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]);
+  var handleChange = React.useCallback(function (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: function renderTags(value, getTagProps) {
+      return value.map(function (option, index) {
+        return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
+          variant: "outlined",
+          size: "small",
+          label: getOptionLabel(option)
+        }, getTagProps({
+          index: index
+        })));
+      });
+    },
+    renderInput: function 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/legacy/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -0,0 +1,102 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["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) {
+  var item = props.item,
+    applyValue = props.applyValue,
+    type = props.type,
+    apiRef = props.apiRef,
+    focusElementRef = props.focusElementRef,
+    color = props.color,
+    error = props.error,
+    helperText = props.helperText,
+    size = props.size,
+    variant = props.variant,
+    other = _objectWithoutProperties(props, _excluded);
+  var TextFieldProps = {
+    color: color,
+    error: error,
+    helperText: helperText,
+    size: size,
+    variant: variant
+  };
+  var _React$useState = React.useState(item.value || []),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filterValueState = _React$useState2[0],
+    setFilterValueState = _React$useState2[1];
+  var id = useId();
+  var rootProps = useGridRootProps();
+  React.useEffect(function () {
+    var _item$value;
+    var itemValue = (_item$value = item.value) != null ? _item$value : [];
+    setFilterValueState(itemValue.map(String));
+  }, [item.value]);
+  var handleChange = React.useCallback(function (event, value) {
+    setFilterValueState(value.map(String));
+    applyValue(_extends({}, item, {
+      value: _toConsumableArray(value)
+    }));
+  }, [applyValue, item]);
+  return /*#__PURE__*/_jsx(Autocomplete, _extends({
+    multiple: true,
+    freeSolo: true,
+    options: [],
+    filterOptions: function filterOptions(options, params) {
+      var inputValue = params.inputValue;
+      return inputValue == null || inputValue === '' ? [] : [inputValue];
+    },
+    id: id,
+    value: filterValueState,
+    onChange: handleChange,
+    renderTags: function renderTags(value, getTagProps) {
+      return value.map(function (option, index) {
+        return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
+          variant: "outlined",
+          size: "small",
+          label: option
+        }, getTagProps({
+          index: index
+        })));
+      });
+    },
+    renderInput: function 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/legacy/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -0,0 +1,194 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _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";
+var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
+  var _ref$column = _ref.column,
+    valueOptions = _ref$column.valueOptions,
+    field = _ref$column.field,
+    OptionComponent = _ref.OptionComponent,
+    getOptionLabel = _ref.getOptionLabel,
+    getOptionValue = _ref.getOptionValue,
+    isSelectNative = _ref.isSelectNative,
+    baseSelectOptionProps = _ref.baseSelectOptionProps;
+  var iterableColumnValues = typeof valueOptions === 'function' ? [''].concat(_toConsumableArray(valueOptions({
+    field: field
+  }))) : [''].concat(_toConsumableArray(valueOptions || []));
+  return iterableColumnValues.map(function (option) {
+    var value = getOptionValue(option);
+    var label = getOptionLabel(option);
+    return /*#__PURE__*/_createElement(OptionComponent, _extends({}, baseSelectOptionProps, {
+      native: isSelectNative,
+      key: value,
+      value: value
+    }), label);
+  });
+};
+var SingleSelectOperatorContainer = styled('div')(_defineProperty({
+  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;
+  var item = props.item,
+    applyValue = props.applyValue,
+    type = props.type,
+    apiRef = props.apiRef,
+    focusElementRef = props.focusElementRef,
+    getOptionLabelProp = props.getOptionLabel,
+    getOptionValueProp = props.getOptionValue,
+    placeholder = props.placeholder,
+    tabIndex = props.tabIndex,
+    labelProp = props.label,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'standard' : _props$variant,
+    isFilterActive = props.isFilterActive,
+    clearButton = props.clearButton,
+    InputLabelProps = props.InputLabelProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filterValueState = _React$useState2[0],
+    setFilterValueState = _React$useState2[1];
+  var id = useId();
+  var labelId = useId();
+  var rootProps = useGridRootProps();
+  var isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null || (_rootProps$slotProps = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps.native) != null ? _rootProps$slotProps$ : true;
+  var resolvedColumn = null;
+  if (item.field) {
+    var column = apiRef.current.getColumn(item.field);
+    if (isSingleSelectColDef(column)) {
+      resolvedColumn = column;
+    }
+  }
+  var getOptionValue = getOptionValueProp || ((_resolvedColumn = resolvedColumn) == null ? void 0 : _resolvedColumn.getOptionValue);
+  var getOptionLabel = getOptionLabelProp || ((_resolvedColumn2 = resolvedColumn) == null ? void 0 : _resolvedColumn2.getOptionLabel);
+  var currentValueOptions = React.useMemo(function () {
+    if (!resolvedColumn) {
+      return undefined;
+    }
+    return typeof resolvedColumn.valueOptions === 'function' ? resolvedColumn.valueOptions({
+      field: resolvedColumn.field
+    }) : resolvedColumn.valueOptions;
+  }, [resolvedColumn]);
+  var onFilterChange = React.useCallback(function (event) {
+    var value = event.target.value;
+
+    // NativeSelect casts the value to a string.
+    value = getValueFromValueOptions(value, currentValueOptions, getOptionValue);
+    setFilterValueState(String(value));
+    applyValue(_extends({}, item, {
+      value: value
+    }));
+  }, [currentValueOptions, getOptionValue, applyValue, item]);
+  React.useEffect(function () {
+    var _itemValue;
+    var 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;
+  }
+  var 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: 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: getOptionLabel,
+          getOptionValue: getOptionValue,
+          isSelectNative: 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/legacy/components/panel/filterPanel/GridFilterInputValue.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["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;
+  var item = props.item,
+    applyValue = props.applyValue,
+    type = props.type,
+    apiRef = props.apiRef,
+    focusElementRef = props.focusElementRef,
+    tabIndex = props.tabIndex,
+    disabled = props.disabled,
+    isFilterActive = props.isFilterActive,
+    clearButton = props.clearButton,
+    InputProps = props.InputProps,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'standard' : _props$variant,
+    others = _objectWithoutProperties(props, _excluded);
+  var filterTimeout = useTimeout();
+  var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filterValueState = _React$useState2[0],
+    setFilterValueState = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    applying = _React$useState4[0],
+    setIsApplying = _React$useState4[1];
+  var id = useId();
+  var rootProps = useGridRootProps();
+  var onFilterChange = React.useCallback(function (event) {
+    var value = event.target.value;
+    setFilterValueState(String(value));
+    setIsApplying(true);
+    filterTimeout.start(rootProps.filterDebounceMs, function () {
+      var newItem = _extends({}, item, {
+        value: value,
+        fromInput: id
+      });
+      applyValue(newItem);
+      setIsApplying(false);
+    });
+  }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
+  React.useEffect(function () {
+    var 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: disabled
+    }, InputProps, {
+      inputProps: _extends({
+        tabIndex: 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/legacy/components/panel/filterPanel/GridFilterInputValueProps.js

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

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

@@ -0,0 +1,235 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var getGridFilter = function getGridFilter(col) {
+  return {
+    field: col.field,
+    operator: col.filterOperators[0].value,
+    id: Math.round(Math.random() * 1e5)
+  };
+};
+var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  var filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  var lastFilterRef = React.useRef(null);
+  var placeholderFilter = React.useRef(null);
+  var _props$logicOperators = props.logicOperators,
+    logicOperators = _props$logicOperators === void 0 ? [GridLogicOperator.And, GridLogicOperator.Or] : _props$logicOperators,
+    columnsSort = props.columnsSort,
+    filterFormProps = props.filterFormProps,
+    getColumnForNewFilter = props.getColumnForNewFilter,
+    children = props.children,
+    _props$disableAddFilt = props.disableAddFilterButton,
+    disableAddFilterButton = _props$disableAddFilt === void 0 ? false : _props$disableAddFilt,
+    _props$disableRemoveA = props.disableRemoveAllButton,
+    disableRemoveAllButton = _props$disableRemoveA === void 0 ? false : _props$disableRemoveA,
+    other = _objectWithoutProperties(props, _excluded);
+  var applyFilter = apiRef.current.upsertFilterItem;
+  var applyFilterLogicOperator = React.useCallback(function (operator) {
+    apiRef.current.setFilterLogicOperator(operator);
+  }, [apiRef]);
+  var getDefaultFilter = React.useCallback(function () {
+    var nextColumnWithOperator;
+    if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
+      // To allow override the column for default (first) filter
+      var nextFieldName = getColumnForNewFilter({
+        currentFilters: (filterModel == null ? void 0 : filterModel.items) || [],
+        columns: filterableColumns
+      });
+      if (nextFieldName === null) {
+        return null;
+      }
+      nextColumnWithOperator = filterableColumns.find(function (_ref) {
+        var field = _ref.field;
+        return field === nextFieldName;
+      });
+    } else {
+      nextColumnWithOperator = filterableColumns.find(function (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]);
+  var getNewFilter = React.useCallback(function () {
+    if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
+      return getDefaultFilter();
+    }
+    var currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean);
+
+    // If no items are there in filterModel, we have to pass defaultFilter
+    var nextColumnFieldName = getColumnForNewFilter({
+      currentFilters: currentFilters,
+      columns: filterableColumns
+    });
+    if (nextColumnFieldName === null) {
+      return null;
+    }
+    var nextColumnWithOperator = filterableColumns.find(function (_ref2) {
+      var field = _ref2.field;
+      return field === nextColumnFieldName;
+    });
+    if (!nextColumnWithOperator) {
+      return null;
+    }
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
+  var items = React.useMemo(function () {
+    if (filterModel.items.length) {
+      return filterModel.items;
+    }
+    if (!placeholderFilter.current) {
+      placeholderFilter.current = getDefaultFilter();
+    }
+    return placeholderFilter.current ? [placeholderFilter.current] : [];
+  }, [filterModel.items, getDefaultFilter]);
+  var hasMultipleFilters = items.length > 1;
+  var addNewFilter = function addNewFilter() {
+    var newFilter = getNewFilter();
+    if (!newFilter) {
+      return;
+    }
+    apiRef.current.upsertFilterItems([].concat(_toConsumableArray(items), [newFilter]));
+  };
+  var deleteFilter = React.useCallback(function (item) {
+    var shouldCloseFilterPanel = items.length === 1;
+    apiRef.current.deleteFilterItem(item);
+    if (shouldCloseFilterPanel) {
+      apiRef.current.hideFilterPanel();
+    }
+  }, [apiRef, items.length]);
+  var handleRemoveAll = function 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(function () {
+    if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {
+      applyFilterLogicOperator(logicOperators[0]);
+    }
+  }, [logicOperators, applyFilterLogicOperator, filterModel.logicOperator]);
+  React.useEffect(function () {
+    if (items.length > 0) {
+      lastFilterRef.current.focus();
+    }
+  }, [items.length]);
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({
+    ref: ref
+  }, other, {
+    children: [/*#__PURE__*/_jsx(GridPanelContent, {
+      children: items.map(function (item, index) {
+        return /*#__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/legacy/components/panel/filterPanel/filterPanelUtils.js

@@ -0,0 +1,18 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+export function isSingleSelectColDef(colDef) {
+  return (colDef == null ? void 0 : colDef.type) === 'singleSelect';
+}
+export function getValueFromValueOptions(value, valueOptions, getOptionValue) {
+  if (valueOptions === undefined) {
+    return undefined;
+  }
+  var result = valueOptions.find(function (option) {
+    var optionValue = getOptionValue(option);
+    return String(optionValue) === String(value);
+  });
+  return getOptionValue(result);
+}
+export var getLabelFromValueOption = function getLabelFromValueOption(valueOption) {
+  var label = _typeof(valueOption) === 'object' ? valueOption.label : valueOption;
+  return label != null ? String(label) : '';
+};

control-plane-ui/node_modules/@mui/x-data-grid/legacy/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';