Alerting: improve FolderPicker and Evaluation Group Select for Huge lists (#61221)

* Add AsyncVirtualizedSelect component in grafana-ui

* Slice FolderPicker results to 1k and virtualize list using AsyncVirtualizedSelect

* Group list in alert form: Use AsyncSelect and slice results to 1000

* Virtualize and slice always in FolderPicker: set default sliceResults value and let consumers change this value

* Always slice results in FolderPicker

* Limit folder results setting the limit in the api call instead slicing in the FE

* Remove warning about the limit in the Select label

packages/grafana-ui/src/components/Select/Select.tsx

@@ -4,7 +4,13 @@ import { SelectableValue } from '@grafana/data';
 
 import { SelectBase } from './SelectBase';
 import { SelectContainer, SelectContainerProps } from './SelectContainer';
-import { SelectCommonProps, MultiSelectCommonProps, SelectAsyncProps, VirtualizedSelectProps } from './types';
+import {
+  SelectCommonProps,
+  MultiSelectCommonProps,
+  SelectAsyncProps,
+  VirtualizedSelectProps,
+  VirtualizedSelectAsyncProps,
+} from './types';
 
 export function Select<T>(props: SelectCommonProps<T>) {
   return <SelectBase {...props} />;
@@ -28,6 +34,10 @@ export function VirtualizedSelect<T>(props: VirtualizedSelectProps<T>) {
   return <SelectBase virtualized {...props} />;
 }
 
+export function AsyncVirtualizedSelect<T>(props: VirtualizedSelectAsyncProps<T>) {
+  return <SelectBase virtualized {...props} />;
+}
+
 interface AsyncMultiSelectProps<T> extends Omit<MultiSelectCommonProps<T>, 'options'>, SelectAsyncProps<T> {
   // AsyncSelect has options stored internally. We cannot enable plain values as we don't have access to the fetched options
   value?: Array<SelectableValue<T>>;

packages/grafana-ui/src/components/Select/types.ts

@@ -112,6 +112,11 @@ export interface VirtualizedSelectProps<T> extends Omit<SelectCommonProps<T>, 'v
   options?: Array<Pick<SelectableValue<T>, 'label' | 'value'>>;
 }
 
+/** The AsyncVirtualizedSelect component uses a slightly different SelectableValue, description and other props are not supported */
+export interface VirtualizedSelectAsyncProps<T>
+  extends Omit<SelectCommonProps<T>, 'virtualized'>,
+    SelectAsyncProps<T> {}
+
 export interface MultiSelectCommonProps<T> extends Omit<SelectCommonProps<T>, 'onChange' | 'isMulti' | 'value'> {
   value?: Array<SelectableValue<T>> | T[];
   onChange: (item: Array<SelectableValue<T>>) => {} | void;