From ae23cd7cf7c7be5e9515df5a9f11cb8c46c88feb Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Mon, 15 Jan 2024 17:45:01 +0100
Subject: [PATCH] Alerting: Fix validation of selected contact point being
 required in the alert form when simplified routing (#80565)

Fix validation of selected contact point being required in the alert rule form
---
 .../contactPoint/ContactPointSelector.tsx        | 16 ++++------------
 1 file changed, 4 insertions(+), 12 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 4e9e9cf5948..d78a2087c4c 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
@@ -16,12 +16,7 @@ export interface ContactPointSelectorProps {
 }
 export function ContactPointSelector({ alertManager, contactPoints, onSelectContactPoint }: ContactPointSelectorProps) {
   const styles = useStyles2(getStyles);
-  const {
-    register,
-    control,
-    formState: { errors },
-    watch,
-  } = useFormContext<RuleFormValues>();
+  const { control, watch } = useFormContext<RuleFormValues>();
 
   const options = contactPoints.map((receiver) => {
     const integrations = receiver?.grafana_managed_receiver_configs;
@@ -39,11 +34,7 @@ export function ContactPointSelector({ alertManager, contactPoints, onSelectCont
 
   return (
     <Stack direction="column">
-      <Field
-        label="Contact point"
-        {...register(`contactPoints.${alertManager}.selectedContactPoint`, { required: true })}
-        invalid={!!errors.contactPoints?.[alertManager]?.selectedContactPoint}
-      >
+      <Field label="Contact point">
         <InputControl
           render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
             <>
@@ -65,9 +56,10 @@ export function ContactPointSelector({ alertManager, contactPoints, onSelectCont
                   width={50}
                 />
               </div>
-              {error && <FieldValidationMessage>{'Contact point is required.'}</FieldValidationMessage>}
+              {error && <FieldValidationMessage>{error.message}</FieldValidationMessage>}
             </>
           )}
+          rules={{ required: { value: true, message: 'Contact point is required.' } }}
           control={control}
           name={`contactPoints.${alertManager}.selectedContactPoint`}
         />