Add new core component Autocomplete and use for Catalog entity filters

[jroebu14]

Hey, I just made a Pull Request!

Adds a new component Autocomplete to @backstage/core-components that has opinion on label and input styles and composition as well as the options popup animation style.

The new Autocomplete tries not to deviate from the original MUI Autocomplete component with regards to the API.

Use the Autocomplete component from @backstage/core-components to align autocompletes visual style and labelling with the Select component from @backstage/core-components

Demo

Below is a before and after video demoing the interacting with the catalog filters. The top 2 filters are Select components and the rest are Autocomplete components.

Before

Notice the visual differences such as bgColor, icon positioning, labels and popup animations.

https://github.com/user-attachments/assets/5d7678e2-616a-4be6-ab96-d1580729c752

After

The Select and Autocomplete components are aligned visually by use of a reusable component added to @backstage/core-components.

https://github.com/user-attachments/assets/77a6cf2d-5182-473a-843a-ae47f92fe174

:heavy_check_mark: 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[bot]]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@backstage/plugin-catalog-react	plugins/catalog-react	patch	v1.15.1-next.0

[backstage-goalie[bot]]

Thanks for the contribution! All commits need to be DCO signed before they are reviewed. Please refer to the the DCO section in CONTRIBUTING.md or the DCO status for more info.

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity from the author. It will be closed if no further activity occurs. If the PR was closed and you want it re-opened, let us know and we'll re-open the PR so that you can continue the contribution!

[camilaibs]

Hi @jroebu14 and @backstage/maintainers would we like to proceed with this pull request, or will this component be added to Canon?

[jroebu14]

Hi @jroebu14 and @backstage/maintainers would we like to proceed with this pull request, or will this component be added to Canon?

@camilaibs we've decided to remove the Autcomplete component from core-components and place it in catalog-react. When there is a need for this component to exist in a few more places then we can revisit adding it to core-components.

This of course means the PR will need re-reviewed.

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity from the author. It will be closed if no further activity occurs. If the PR was closed and you want it re-opened, let us know and we'll re-open the PR so that you can continue the contribution!

[github-actions[bot]]

Thank you for contributing to Backstage! The changes in this pull request will be part of the 1.35.0 release, scheduled for Tue, 14 Jan 2025.