hotfix(bazaar) add virtualization to UserSelector dropdown

workspaces/bazaar/.changeset/polite-cows-jog.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-bazaar': patch
+---
+
+Add virtualization to UserSelector dropdown

workspaces/bazaar/plugins/bazaar/package.json

@@ -53,7 +53,8 @@
     "luxon": "^3.0.0",
     "material-ui-search-bar": "^1.0.0",
     "react-hook-form": "^7.13.0",
-    "react-use": "^17.2.4"
+    "react-use": "^17.2.4",
+    "react-window": "^1.8.10"
   },
   "devDependencies": {
     "@backstage/cli": "^0.28.0",
@@ -63,6 +64,7 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^15.0.0",
     "@types/react-dom": "^18.2.19",
+    "@types/react-window": "^1.8.8",
     "canvas": "^2.11.2",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",

workspaces/bazaar/plugins/bazaar/src/components/UserSelector/UserSelector.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import Autocomplete, {
   createFilterOptions,
@@ -23,11 +23,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Controller, Control } from 'react-hook-form';
 import { FormValues } from '../../types';
 import { useApi } from '@backstage/core-plugin-api';
+import useAsync from 'react-use/esm/useAsync';
 import {
   entityPresentationApiRef,
   EntityDisplayName,
-  EntityRefPresentationSnapshot,
 } from '@backstage/plugin-catalog-react';
+import { VirtualizedListbox } from '../VirtualizedListbox';
 
 type Props = {
   users: Entity[];
@@ -55,42 +56,41 @@ export const UserSelector = ({
 }: Props) => {
   const classes = useStyles();
   const entityPresentationApi = useApi(entityPresentationApiRef);
-  const [entityPresentations, setEntityPresentations] = useState<
-    Map<string, EntityRefPresentationSnapshot>
-  >(new Map());
 
-  useEffect(() => {
-    const fetchPresentations = async () => {
-      const presentations = new Map<string, EntityRefPresentationSnapshot>();
+  const { value: entityData, loading } = useAsync(async () => {
+    const entityRefToPresentation = new Map(
       await Promise.all(
         users.map(async user => {
           const presentation = await entityPresentationApi.forEntity(user)
             .promise;
-          presentations.set(stringifyEntityRef(user), presentation);
+          return [stringifyEntityRef(user), presentation] as const;
         }),
-      );
-      setEntityPresentations(presentations);
-    };
-
-    fetchPresentations();
-  }, [users, entityPresentationApi]);
+      ),
+    );
 
-  const getOptionLabel = (option: Entity | string) => {
-    // option can be a string due to freeSolo.
-    if (typeof option === 'string') return option;
-    const entityRef = stringifyEntityRef(option);
+    return { users, entityRefToPresentation };
+  }, [users]);
 
-    return (
-      entityPresentations.get(entityRef)?.primaryTitle ?? option.metadata.name
-    );
-  };
+  const getOptionLabel = useCallback(
+    (option: Entity | string) => {
+      // option can be a string due to freeSolo.
+      if (typeof option === 'string') return option;
+      const entityRef = stringifyEntityRef(option);
+      return (
+        entityData?.entityRefToPresentation.get(entityRef)?.primaryTitle ??
+        option.metadata.name
+      );
+    },
+    [entityData],
+  );
 
   const filterOptions = createFilterOptions<Entity | string>({
     stringify: option => {
       if (typeof option === 'string') return option;
       const entityRef = stringifyEntityRef(option);
       return (
-        entityPresentations.get(entityRef)?.primaryTitle ?? option.metadata.name
+        entityData?.entityRefToPresentation.get(entityRef)?.primaryTitle ??
+        option.metadata.name
       );
     },
   });
@@ -105,6 +105,7 @@ export const UserSelector = ({
         render={({ field: { onChange, value }, fieldState: { error } }) => (
           <Autocomplete
             className={classes.autocomplete}
+            loading={loading}
             fullWidth
             freeSolo
             disableClearable={disableClearable}
@@ -148,6 +149,7 @@ export const UserSelector = ({
               }
               return filtered;
             }}
+            ListboxComponent={VirtualizedListbox}
           />
         )}
       />

workspaces/bazaar/plugins/bazaar/src/components/VirtualizedListbox/VirtualizedListbox.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { FixedSizeList, ListChildComponentProps } from 'react-window';
+
+type HTMLDivProps = React.HTMLAttributes<HTMLDivElement>;
+
+const renderRow = (props: ListChildComponentProps) => {
+  const { data, index, style } = props;
+  return React.cloneElement(data[index], { style });
+};
+
+// Context needed to keep Autocomplete working correctly : https://v4.mui.com/components/autocomplete/#Virtualize.tsx
+const OuterElementContext = React.createContext<HTMLDivProps>({});
+
+const OuterElementType = React.forwardRef<HTMLDivElement, HTMLDivProps>(
+  (props, ref) => {
+    const outerProps = React.useContext(OuterElementContext);
+    return <div ref={ref} {...props} {...outerProps} />;
+  },
+);
+
+OuterElementType.displayName = 'OuterElementType';
+
+export const VirtualizedListbox = React.forwardRef<
+  HTMLDivElement,
+  HTMLDivProps
+>((props, ref) => {
+  const { children, ...other } = props;
+  const itemData = React.Children.toArray(children);
+  const itemCount = itemData.length;
+
+  const itemSize = 36;
+  const itemsToShow = Math.min(10, itemCount) + 0.5;
+  const height = itemsToShow * itemSize;
+
+  return (
+    <div ref={ref}>
+      <OuterElementContext.Provider value={other}>
+        <FixedSizeList
+          height={height}
+          width="100%"
+          itemCount={itemCount}
+          itemSize={itemSize}
+          itemData={itemData}
+          outerElementType={OuterElementType}
+        >
+          {renderRow}
+        </FixedSizeList>
+      </OuterElementContext.Provider>
+    </div>
+  );
+});

workspaces/bazaar/plugins/bazaar/src/components/VirtualizedListbox/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { VirtualizedListbox } from './VirtualizedListbox';

workspaces/bazaar/yarn.lock

@@ -2567,6 +2567,7 @@ __metadata:
     "@testing-library/react": ^15.0.0
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
     "@types/react-dom": ^18.2.19
+    "@types/react-window": ^1.8.8
     canvas: ^2.11.2
     luxon: ^3.0.0
     material-ui-search-bar: ^1.0.0
@@ -2575,6 +2576,7 @@ __metadata:
     react-hook-form: ^7.13.0
     react-router-dom: 6.0.0-beta.0 || ^6.3.0
     react-use: ^17.2.4
+    react-window: ^1.8.10
   peerDependencies:
     react: ^16.13.1 || ^17.0.0 || ^18.0.0
     react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0
@@ -9434,6 +9436,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-window@npm:^1.8.8":
+  version: 1.8.8
+  resolution: "@types/react-window@npm:1.8.8"
+  dependencies:
+    "@types/react": "*"
+  checksum: 253c9d6e0c942f34633edbddcbc369324403c42458ff004457c5bd5972961d8433a909c0cc1a89c918063d5eb85ecbdd774142af2555fae61f4ceb3ba9884b5a
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:^18":
   version: 18.2.58
   resolution: "@types/react@npm:18.2.58"
@@ -23485,7 +23496,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: