feat(scaffolder): use virtualization with MultiEntityPicker

Signed-off-by: Mikko Korhonen <mikko.korhonen@op.fi>

.changeset/heavy-moose-pull.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': minor
+---
+
+Use virtualization with MultiEntityPicker. Fixes performance issues with large data sets.

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"
   },

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 (
+    <div ref={ref}>
+      <FixedSizeList
+        height={height}
+        itemData={itemData}
+        itemCount={itemCount}
+        itemSize={itemSize}
+        width="100%"
+      >
+        {renderRow}
+      </FixedSizeList>
+    </div>
+  );
+});
+
 /**
  * The underlying component that is rendered in the form for the `MultiEntityPicker`
  * field extension.
@@ -177,6 +210,7 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {
             }}
           />
         )}
+        ListboxComponent={ListboxComponent}
       />
     </FormControl>
   );

yarn.lock

@@ -7138,6 +7138,7 @@ __metadata:
     "@types/humanize-duration": ^3.18.1
     "@types/json-schema": ^7.0.9
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
+    "@types/react-window": ^1.8.8
     "@uiw/react-codemirror": ^4.9.3
     classnames: ^2.2.6
     git-url-parse: ^14.0.0
@@ -7150,6 +7151,7 @@ __metadata:
     msw: ^1.0.0
     qs: ^6.9.4
     react-use: ^17.2.4
+    react-window: ^1.8.10
     swr: ^2.0.0
     yaml: ^2.0.0
     zen-observable: ^0.10.0
@@ -18077,7 +18079,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-window@npm:^1.8.5":
+"@types/react-window@npm:^1.8.5, @types/react-window@npm:^1.8.8":
   version: 1.8.8
   resolution: "@types/react-window@npm:1.8.8"
   dependencies:
@@ -38305,7 +38307,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-window@npm:^1.8.6":
+"react-window@npm:^1.8.10, react-window@npm:^1.8.6":
   version: 1.8.10
   resolution: "react-window@npm:1.8.10"
   dependencies: