Prometheus: Ensure values in metric selector are visible

[NWRichmond]

What is this fix and why do we need it?

In the Prometheus data source's Query Builder, users must select a metric name. As described in #85829, the select can display options below the viewport. This happens because we are lazy-loading the options, and the component determines the placement (top/bottom) of options (based on available space above/below the select) before he options have finished loading. This presents a UX issue because users can get the false impression that metric names are missing from the select.

In addition to some light refactoring, this PR changes the select in the following ways:

• The select can correctly place options above when there isn't enough space to place them below.
• The select leverages the <CustomScrollbar />'s showScrollIndicators prop to indicate to the user when there are results above or below their current scroll position.

Before

(on main)

Note the various issues described above and in #85829.

demo.metrics.select.issues.in.before.state.mov

After

(on 85829/fix-prometheus-query-builder-metric-selector-display-beyond-viewport)

In the beginning of the video, note how the top and bottom of the options are greyed-out when the top-most and bottom-most options are out-of-view. This provides a visual cue to the user that they must scroll to reach the bottom or top. Next, note how regardless of how much space is available to render the select, the options are always visible.

demo.metrics.select.scroll.indicators.and.options.placement.without.border.changes.mov

Who is this feature for?

Prometheus data source users who rely on the Query Builder.

Which issue(s) does this PR fix?

This PR fixes #85829.

Special notes for your reviewer

N/A

Future work

These changes could also be applied elsewhere. We should examine any <Select /> or <AsyncSelect /> that uses onOpenMenu to lazy-load options, as they likely suffer from the same UX issues. In the Prometheus data source, LabelFilterItem.tsx and LabelParamEditor.tsx in packages/grafana-prometheus/src/querybuilder/components are candidates.

Please check that:

• It works as expected from a user's perspective.
• (Not applicable) If this is a pre-GA feature, it is behind a feature toggle.
• (Not applicable) The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[itsmylife]

LGTM 🚀