diff --git a/.changeset/heavy-moose-pull.md b/.changeset/heavy-moose-pull.md new file mode 100644 index 0000000000..7ba7b1aa39 --- /dev/null +++ b/.changeset/heavy-moose-pull.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': minor +--- + +Use virtualization with MultiEntityPicker. Fixes performance issues with large data sets. diff --git a/plugins/scaffolder/package.json b/plugins/scaffolder/package.json index f2c96eee58..50cbda8e31 100644 --- a/plugins/scaffolder/package.json +++ b/plugins/scaffolder/package.json @@ -97,6 +97,7 @@ "luxon": "^3.0.0", "qs": "^6.9.4", "react-use": "^17.2.4", + "react-window": "^1.8.10", "yaml": "^2.0.0", "zen-observable": "^0.10.0", "zod": "^3.22.4", @@ -115,6 +116,7 @@ "@testing-library/user-event": "^14.0.0", "@types/humanize-duration": "^3.18.1", "@types/json-schema": "^7.0.9", + "@types/react-window": "^1.8.8", "msw": "^1.0.0", "swr": "^2.0.0" }, diff --git a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx index 4ea26b4414..84a050622a 100644 --- a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx +++ b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx @@ -35,6 +35,7 @@ import Autocomplete, { AutocompleteChangeReason, } from '@material-ui/lab/Autocomplete'; import React, { useCallback, useEffect } from 'react'; +import { FixedSizeList, ListChildComponentProps } from 'react-window'; import useAsync from 'react-use/esm/useAsync'; import { FieldValidation } from '@rjsf/utils'; import { @@ -46,6 +47,38 @@ import { export { MultiEntityPickerSchema } from './schema'; +const renderRow = (props: ListChildComponentProps) => { + const { data, index, style } = props; + return React.cloneElement(data[index], { style }); +}; + +const ListboxComponent = React.forwardRef< + HTMLDivElement, + { children?: React.ReactNode } +>((props, ref) => { + const itemData = React.Children.toArray(props.children); + const itemCount = itemData.length; + + const itemSize = 36; + + const itemsToShow = Math.min(10, itemCount); + const height = Math.max(itemSize, itemsToShow * itemSize - 0.5 * itemSize); + + return ( +