Alerting: use virtualized list of namespaces / groups for cloud rules (#56415)

.betterer.results

@@ -3132,9 +3132,6 @@ exports[`better eslint`] = {
     "public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],

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

@@ -58,11 +58,12 @@ export const VirtualizedSelectMenu = ({ children, maxHeight, options, getValue }
 
   const longestOption = max(options.map((option) => option.label?.length)) ?? 0;
   const widthEstimate = longestOption * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER;
+  const heightEstimate = Math.min(options.length * VIRTUAL_LIST_ITEM_HEIGHT, maxHeight);
 
   return (
     <List
       className={styles.menu}
-      height={maxHeight}
+      height={heightEstimate}
       width={widthEstimate}
       aria-label="Select options menu"
       itemCount={children.length}

public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx

@@ -1,16 +1,15 @@
 import { css } from '@emotion/css';
-import React, { FC, useEffect, useMemo, useState } from 'react';
+import React, { FC, useEffect, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Field, InputControl, useStyles2 } from '@grafana/ui';
+import { Field, InputControl, useStyles2, VirtualizedSelect } from '@grafana/ui';
 import { useDispatch } from 'app/types';
 
 import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
 import { fetchRulerRulesAction } from '../../state/actions';
 import { RuleFormValues } from '../../types/rule-form';
 
-import { SelectWithAdd } from './SelectWIthAdd';
 import { checkForPathSeparator } from './util';
 
 interface Props {
@@ -27,8 +26,6 @@ export const GroupAndNamespaceFields: FC<Props> = ({ rulesSourceName }) => {
 
   const style = useStyles2(getStyle);
 
-  const [customGroup, setCustomGroup] = useState(false);
-
   const rulerRequests = useUnifiedAlertingSelector((state) => state.rulerRules);
   const dispatch = useDispatch();
   useEffect(() => {
@@ -61,15 +58,13 @@ export const GroupAndNamespaceFields: FC<Props> = ({ rulesSourceName }) => {
       >
         <InputControl
           render={({ field: { onChange, ref, ...field } }) => (
-            <SelectWithAdd
+            <VirtualizedSelect
               {...field}
+              allowCustomValue
               className={style.input}
               onChange={(value) => {
                 setValue('group', ''); //reset if namespace changes
-                onChange(value);
-              }}
-              onCustomChange={(custom: boolean) => {
-                custom && setCustomGroup(true);
+                onChange(value.value);
               }}
               options={namespaceOptions}
               width={42}
@@ -88,7 +83,16 @@ export const GroupAndNamespaceFields: FC<Props> = ({ rulesSourceName }) => {
       <Field data-testid="group-picker" label="Group" error={errors.group?.message} invalid={!!errors.group?.message}>
         <InputControl
           render={({ field: { ref, ...field } }) => (
-            <SelectWithAdd {...field} options={groupOptions} width={42} custom={customGroup} className={style.input} />
+            <VirtualizedSelect
+              {...field}
+              allowCustomValue
+              options={groupOptions}
+              width={42}
+              onChange={(value) => {
+                setValue('group', value.value ?? '');
+              }}
+              className={style.input}
+            />
           )}
           name="group"
           control={control}

public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx

@@ -53,7 +53,7 @@ export const SelectWithAdd: FC<Props> = ({
         placeholder={placeholder}
         className={className}
         disabled={disabled}
-        onChange={(e) => onChange((e.target as HTMLInputElement).value)}
+        onChange={(e) => onChange(e.currentTarget.value)}
       />
     );
   } else {