feat(scaffolder): use virtualization with MultiEntityPicker

[kmikko]

Hey, I just made a Pull Request!

Use virtualization with MultiEntityPicker. This fixes performance issues with large data sets. Fixes #25243.

Testing

Not sure how you would test this with testing-library as the issue manifests itself only in real browser environment. However have tested this locally by comparing behaviour between master branch and this as follows:

• Generate catalog-info.yaml containing a large number (~5k will do it) of entities using a script like so:

#!/bin/bash

# Check if exactly one argument is passed
if [ "$#" -ne 1 ]; then
  echo "Usage: $0 <number_of_entries>"
  exit 1
fi

# Check if the argument is a positive integer
if ! [[ "$1" =~ ^[0-9]+$ ]]; then
  echo "Error: Argument must be a positive integer."
  exit 1
fi

# Number of entries to generate
NUM_ENTRIES=$1

# Output file
OUTPUT_FILE="generated-$NUM_ENTRIES.yaml"

# Create or clear the output file
>"$OUTPUT_FILE"

# Generate YAML entries
for ((i = 1; i <= NUM_ENTRIES; i++)); do
  cat <<EOL >>"$OUTPUT_FILE"
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: example-app-$i
  title: example-app-$i
spec:
  lifecycle: experimental
  type: backstage-frontend
  owner: maintainers
---
EOL
done

echo "Generated $NUM_ENTRIES entries in $OUTPUT_FILE"

• Include entities in app config

# app-config.yaml
...
catalog:
    ...
    - type: file
      target: ../../generated-10000.yaml
      rules:
        - allow: [Component]

• Start the app with yarn dev and wait until all entities have been ingested
• Open Custom Field Explorer from http://localhost:3000/create/edit and select MultiEntityPicker
• Open dropdown menu. Scrolling, searching and selecting items should work as expected without lag. Whereas compared to master branch browser (tested with latest Chrome) quickly becomes unresponsive and finally hangs:

I have tested this with 5k, 10k and 100k entities and in all cases the input remains responsive. Here's demo with 100k entities

Screen.Recording.2024-06-19.at.12.57.22.mov

✔️ Checklist

• A changeset describing the change and affected packages. (more info)
• Added or updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)
• All your commits have a Signed-off-by line in the message. (more info)

[backstage-goalie]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@backstage/plugin-scaffolder	plugins/scaffolder	minor	v1.21.0

[benjdlambert]

Nice! Let's go with this! 🎉

[github-actions]

Thank you for contributing to Backstage! The changes in this pull request will be part of the 1.29.0 release, scheduled for Tue, 16 Jul 2024.