From 92eb2c900e9dc67b369e796bbe0e3652062402ac Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Wed, 14 Feb 2024 11:43:46 +0100
Subject: [PATCH] Alerting: Use VirtualizedSelect for ContactPointSelector
 (#82345)

* Use VirtualizedSelect for ContactPointSelector

* Conditionally use virtualized to keep description when having less than 500 contact points
---
 .../contactPoint/ContactPointSelector.tsx           | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
index 5788b9dd44a..1e7d178496b 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
@@ -30,6 +30,8 @@ export interface ContactPointSelectorProps {
   refetchReceivers: () => Promise<unknown>;
 }
 
+const MAX_CONTACT_POINTS_RENDERED = 500;
+
 export function ContactPointSelector({
   alertManager,
   options,
@@ -42,9 +44,10 @@ export function ContactPointSelector({
   const contactPointInForm = watch(`contactPoints.${alertManager}.selectedContactPoint`);
 
   const selectedContactPointWithMetadata = options.find((option) => option.value.name === contactPointInForm)?.value;
-  const selectedContactPointSelectableValue = selectedContactPointWithMetadata
-    ? { value: selectedContactPointWithMetadata, label: selectedContactPointWithMetadata.name }
-    : undefined;
+  const selectedContactPointSelectableValue: SelectableValue<ContactPointWithMetadata> =
+    selectedContactPointWithMetadata
+      ? { value: selectedContactPointWithMetadata, label: selectedContactPointWithMetadata.name }
+      : { value: undefined, label: '' };
 
   const LOADING_SPINNER_DURATION = 1000;
 
@@ -80,8 +83,8 @@ export function ContactPointSelector({
             render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
               <>
                 <div className={styles.contactPointsSelector}>
-                  <Select
-                    {...field}
+                  <Select<ContactPointWithMetadata>
+                    virtualized={options.length > MAX_CONTACT_POINTS_RENDERED}
                     aria-label="Contact point"
                     defaultValue={selectedContactPointSelectableValue}
                     onChange={(value: SelectableValue<ContactPointWithMetadata>, _: ActionMeta) => {