wip:milestone 0 fixes

control-plane-ui/node_modules/@mui/x-data-grid/modern/hooks/features/pagination/gridPaginationInterfaces.js

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

control-plane-ui/node_modules/@mui/x-data-grid/modern/hooks/features/pagination/gridPaginationSelector.js

@@ -0,0 +1,108 @@
+import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
+import { gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
+import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
+import { getPageCount } from './gridPaginationUtils';
+
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export const gridPaginationSelector = state => state.pagination;
+
+/**
+ * Get the pagination model
+ * @category Pagination
+ */
+export const gridPaginationModelSelector = createSelector(gridPaginationSelector, pagination => pagination.paginationModel);
+
+/**
+ * Get the row count
+ * @category Pagination
+ */
+export const gridPaginationRowCountSelector = createSelector(gridPaginationSelector, pagination => pagination.rowCount);
+
+/**
+ * Get the index of the page to render if the pagination is enabled
+ * @category Pagination
+ */
+export const gridPageSelector = createSelector(gridPaginationModelSelector, paginationModel => paginationModel.page);
+
+/**
+ * Get the maximum amount of rows to display on a single page if the pagination is enabled
+ * @category Pagination
+ */
+export const gridPageSizeSelector = createSelector(gridPaginationModelSelector, paginationModel => paginationModel.pageSize);
+
+/**
+ * Get the amount of pages needed to display all the rows if the pagination is enabled
+ * @category Pagination
+ */
+export const gridPageCountSelector = createSelector(gridPageSizeSelector, gridPaginationRowCountSelector, (pageSize, rowCount) => getPageCount(rowCount, pageSize));
+
+/**
+ * Get the index of the first and the last row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginationModelSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridExpandedSortedRowEntriesSelector, gridFilteredSortedTopLevelRowEntriesSelector, (paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+  const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
+  const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
+  const topLevelLastRowIndex = Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);
+
+  // The range contains no element
+  if (topLevelFirstRowIndex === -1 || topLevelLastRowIndex === -1) {
+    return null;
+  }
+
+  // The tree is flat, there is no need to look for children
+  if (rowTreeDepth < 2) {
+    return {
+      firstRowIndex: topLevelFirstRowIndex,
+      lastRowIndex: topLevelLastRowIndex
+    };
+  }
+  const topLevelFirstRow = visibleSortedTopLevelRowEntries[topLevelFirstRowIndex];
+  const topLevelRowsInCurrentPageCount = topLevelLastRowIndex - topLevelFirstRowIndex + 1;
+  const firstRowIndex = visibleSortedRowEntries.findIndex(row => row.id === topLevelFirstRow.id);
+  let lastRowIndex = firstRowIndex;
+  let topLevelRowAdded = 0;
+  while (lastRowIndex < visibleSortedRowEntries.length && topLevelRowAdded <= topLevelRowsInCurrentPageCount) {
+    const row = visibleSortedRowEntries[lastRowIndex];
+    const depth = rowTree[row.id]?.depth;
+    if (depth === undefined) {
+      lastRowIndex += 1;
+    } else {
+      if (topLevelRowAdded < topLevelRowsInCurrentPageCount || depth > 0) {
+        lastRowIndex += 1;
+      }
+      if (depth === 0) {
+        topLevelRowAdded += 1;
+      }
+    }
+  }
+  return {
+    firstRowIndex,
+    lastRowIndex: lastRowIndex - 1
+  };
+});
+
+/**
+ * Get the id and the model of each row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+export const gridPaginatedVisibleSortedGridRowEntriesSelector = createSelectorMemoized(gridExpandedSortedRowEntriesSelector, gridPaginationRowRangeSelector, (visibleSortedRowEntries, paginationRange) => {
+  if (!paginationRange) {
+    return [];
+  }
+  return visibleSortedRowEntries.slice(paginationRange.firstRowIndex, paginationRange.lastRowIndex + 1);
+});
+
+/**
+ * Get the id of each row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+export const gridPaginatedVisibleSortedGridRowIdsSelector = createSelectorMemoized(gridExpandedSortedRowIdsSelector, gridPaginationRowRangeSelector, (visibleSortedRowIds, paginationRange) => {
+  if (!paginationRange) {
+    return [];
+  }
+  return visibleSortedRowIds.slice(paginationRange.firstRowIndex, paginationRange.lastRowIndex + 1);
+});

control-plane-ui/node_modules/@mui/x-data-grid/modern/hooks/features/pagination/gridPaginationUtils.js

@@ -0,0 +1,26 @@
+import { buildWarning } from '../../../utils/warning';
+import { GridSignature } from '../../utils';
+const MAX_PAGE_SIZE = 100;
+export const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
+export const getPageCount = (rowCount, pageSize) => {
+  if (pageSize > 0 && rowCount > 0) {
+    return Math.ceil(rowCount / pageSize);
+  }
+  return 0;
+};
+export const noRowCountInServerMode = buildWarning(["MUI: the 'rowCount' prop is undefined while using paginationMode='server'", 'For more detail, see http://mui.com/components/data-grid/pagination/#basic-implementation'], 'error');
+export const getDefaultGridPaginationModel = autoPageSize => ({
+  page: 0,
+  pageSize: autoPageSize ? 0 : 100
+});
+export const getValidPage = (page, pageCount = 0) => {
+  if (pageCount === 0) {
+    return page;
+  }
+  return Math.max(Math.min(page, pageCount - 1), 0);
+};
+export const throwIfPageSizeExceedsTheLimit = (pageSize, signatureProp) => {
+  if (signatureProp === GridSignature.DataGrid && pageSize > MAX_PAGE_SIZE) {
+    throw new Error(['MUI: `pageSize` cannot exceed 100 in the MIT version of the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+  }
+};

control-plane-ui/node_modules/@mui/x-data-grid/modern/hooks/features/pagination/index.js

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

control-plane-ui/node_modules/@mui/x-data-grid/modern/hooks/features/pagination/useGridPagination.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel } from './gridPaginationUtils';
+import { useGridPaginationModel } from './useGridPaginationModel';
+import { useGridRowCount } from './useGridRowCount';
+export const paginationStateInitializer = (state, props) => {
+  const paginationModel = _extends({}, getDefaultGridPaginationModel(props.autoPageSize), props.paginationModel ?? props.initialState?.pagination?.paginationModel);
+  throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, props.signature);
+  const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount ?? 0;
+  return _extends({}, state, {
+    pagination: {
+      paginationModel,
+      rowCount
+    }
+  });
+};
+
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export const useGridPagination = (apiRef, props) => {
+  useGridPaginationModel(apiRef, props);
+  useGridRowCount(apiRef, props);
+};

control-plane-ui/node_modules/@mui/x-data-grid/modern/hooks/features/pagination/useGridPaginationModel.js

@@ -0,0 +1,171 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridDensityFactorSelector } from '../density';
+import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
+import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { gridPageCountSelector, gridPaginationModelSelector } from './gridPaginationSelector';
+import { getPageCount, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from './gridPaginationUtils';
+export const getDerivedPaginationModel = (paginationState, signature, paginationModelProp) => {
+  let paginationModel = paginationState.paginationModel;
+  const rowCount = paginationState.rowCount;
+  const pageSize = paginationModelProp?.pageSize ?? paginationModel.pageSize;
+  const pageCount = getPageCount(rowCount, pageSize);
+  if (paginationModelProp && (paginationModelProp?.page !== paginationModel.page || paginationModelProp?.pageSize !== paginationModel.pageSize)) {
+    paginationModel = paginationModelProp;
+  }
+  const validPage = getValidPage(paginationModel.page, pageCount);
+  if (validPage !== paginationModel.page) {
+    paginationModel = _extends({}, paginationModel, {
+      page: validPage
+    });
+  }
+  throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, signature);
+  return paginationModel;
+};
+
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export const useGridPaginationModel = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridPaginationModel');
+  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const rowHeight = Math.floor(props.rowHeight * densityFactor);
+  apiRef.current.registerControlState({
+    stateId: 'paginationModel',
+    propModel: props.paginationModel,
+    propOnChange: props.onPaginationModelChange,
+    stateSelector: gridPaginationModelSelector,
+    changeEvent: 'paginationModelChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setPage = React.useCallback(page => {
+    const currentModel = gridPaginationModelSelector(apiRef);
+    if (page === currentModel.page) {
+      return;
+    }
+    logger.debug(`Setting page to ${page}`);
+    apiRef.current.setPaginationModel({
+      page,
+      pageSize: currentModel.pageSize
+    });
+  }, [apiRef, logger]);
+  const setPageSize = React.useCallback(pageSize => {
+    const currentModel = gridPaginationModelSelector(apiRef);
+    if (pageSize === currentModel.pageSize) {
+      return;
+    }
+    logger.debug(`Setting page size to ${pageSize}`);
+    apiRef.current.setPaginationModel({
+      pageSize,
+      page: currentModel.page
+    });
+  }, [apiRef, logger]);
+  const setPaginationModel = React.useCallback(paginationModel => {
+    const currentModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel === currentModel) {
+      return;
+    }
+    logger.debug("Setting 'paginationModel' to", paginationModel);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
+      })
+    }));
+  }, [apiRef, logger, props.signature]);
+  const paginationModelApi = {
+    setPage,
+    setPageSize,
+    setPaginationModel
+  };
+  useGridApiMethod(apiRef, paginationModelApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    const shouldExportPaginationModel =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the `paginationModel` is controlled
+    props.paginationModel != null ||
+    // Always export if the `paginationModel` has been initialized
+    props.initialState?.pagination?.paginationModel != null ||
+    // Export if `page` or `pageSize` is not equal to the default value
+    paginationModel.page !== 0 && paginationModel.pageSize !== defaultPageSize(props.autoPageSize);
+    if (!shouldExportPaginationModel) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        paginationModel
+      })
+    });
+  }, [apiRef, props.paginationModel, props.initialState?.pagination?.paginationModel, props.autoPageSize]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const paginationModel = context.stateToRestore.pagination?.paginationModel ? _extends({}, getDefaultGridPaginationModel(props.autoPageSize), context.stateToRestore.pagination?.paginationModel) : gridPaginationModelSelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
+      })
+    }));
+    return params;
+  }, [apiRef, props.autoPageSize, props.signature]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EVENTS
+   */
+  const handlePaginationModelChange = () => {
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    if (apiRef.current.virtualScrollerRef?.current) {
+      apiRef.current.scrollToIndexes({
+        rowIndex: paginationModel.page * paginationModel.pageSize
+      });
+    }
+  };
+  const handleUpdateAutoPageSize = React.useCallback(() => {
+    if (!props.autoPageSize) {
+      return;
+    }
+    const dimensions = apiRef.current.getRootDimensions() || {
+      viewportInnerSize: {
+        height: 0
+      }
+    };
+    const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
+    const maximumPageSizeWithoutScrollBar = Math.floor((dimensions.viewportInnerSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom) / rowHeight);
+    apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
+  }, [apiRef, props.autoPageSize, rowHeight]);
+  const handleRowCountChange = React.useCallback(newRowCount => {
+    if (newRowCount == null) {
+      return;
+    }
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    const pageCount = gridPageCountSelector(apiRef);
+    if (paginationModel.page > pageCount - 1) {
+      apiRef.current.setPage(Math.max(0, pageCount - 1));
+    }
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
+  useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
+  useGridApiEventHandler(apiRef, 'rowCountChange', handleRowCountChange);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, props.paginationModel)
+      })
+    }));
+  }, [apiRef, props.paginationModel, props.paginationMode, props.signature]);
+  React.useEffect(handleUpdateAutoPageSize, [handleUpdateAutoPageSize]);
+};

control-plane-ui/node_modules/@mui/x-data-grid/modern/hooks/features/pagination/useGridRowCount.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridFilteredTopLevelRowCountSelector } from '../filter';
+import { useGridLogger, useGridSelector, useGridApiMethod } from '../../utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { gridPaginationRowCountSelector } from './gridPaginationSelector';
+import { noRowCountInServerMode } from './gridPaginationUtils';
+
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export const useGridRowCount = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridRowCount');
+  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
+  const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);
+  apiRef.current.registerControlState({
+    stateId: 'paginationRowCount',
+    propModel: props.rowCount,
+    propOnChange: props.onRowCountChange,
+    stateSelector: gridPaginationRowCountSelector,
+    changeEvent: 'rowCountChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setRowCount = React.useCallback(newRowCount => {
+    if (rowCount === newRowCount) {
+      return;
+    }
+    logger.debug("Setting 'rowCount' to", newRowCount);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        rowCount: newRowCount
+      })
+    }));
+  }, [apiRef, logger, rowCount]);
+  const paginationRowCountApi = {
+    setRowCount
+  };
+  useGridApiMethod(apiRef, paginationRowCountApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const exportedRowCount = gridPaginationRowCountSelector(apiRef);
+    const shouldExportRowCount =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the `rowCount` is controlled
+    props.rowCount != null ||
+    // Always export if the `rowCount` has been initialized
+    props.initialState?.pagination?.rowCount != null;
+    if (!shouldExportRowCount) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        rowCount: exportedRowCount
+      })
+    });
+  }, [apiRef, props.rowCount, props.initialState?.pagination?.rowCount]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const restoredRowCount = context.stateToRestore.pagination?.rowCount ? context.stateToRestore.pagination.rowCount : gridPaginationRowCountSelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        rowCount: restoredRowCount
+      })
+    }));
+    return params;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (props.paginationMode === 'server' && props.rowCount == null) {
+        noRowCountInServerMode();
+      }
+    }
+  }, [props.rowCount, props.paginationMode]);
+  React.useEffect(() => {
+    if (props.paginationMode === 'client') {
+      apiRef.current.setRowCount(visibleTopLevelRowCount);
+    } else if (props.rowCount != null) {
+      apiRef.current.setRowCount(props.rowCount);
+    }
+  }, [apiRef, visibleTopLevelRowCount, props.paginationMode, props.rowCount]);
+};