Alerting: Fix possible undefined value in the form not being protected (grafana#88860)

Fix possible undefined value in the form not being protected

Author: soniaAguilarPeiron

public/app/features/alerting/unified/components/receivers/form/fields/TemplateSelector.tsx

@@ -163,14 +163,14 @@ function TemplateSelector({ onSelect, onClose, option, valueInForm }: TemplateSe
 
   // if we are using only one template, we should settemplate to that template
   useEffect(() => {
-    if (matchesOnlyOneTemplate(valueInForm)) {
-      const name = getTemplateName(valueInForm);
-      setTemplate({
-        name,
-        content: getContentFromOptions(name, options),
-      });
-    } else {
-      if (Boolean(valueInForm)) {
+    if (Boolean(valueInForm)) {
+      if (matchesOnlyOneTemplate(valueInForm)) {
+        const name = getTemplateName(valueInForm);
+        setTemplate({
+          name,
+          content: getContentFromOptions(name, options),
+        });
+      } else {
         // if it's empty we default to select existing template
         setTemplateOption('Custom');
       }
@@ -303,20 +303,16 @@ export function WrapWithTemplateSelection({
   name,
   children,
 }: WrapWithTemplateSelectionProps) {
-  const { getValues } = useFormContext();
-  const value: string = getValues(name) ?? '';
-  const emptyValue = value === '' || value === undefined;
-  const onlyOneTemplate = value ? matchesOnlyOneTemplate(value) : false;
   const styles = useStyles2(getStyles);
-
+  const { getValues } = useFormContext();
+  const value = getValues(name) ?? '';
   // if the placeholder does not contain a template, we don't need to show the template picker
-  if (!option.placeholder.includes('{{ template ')) {
+  if (!option.placeholder.includes('{{ template ') || typeof value !== 'string') {
     return <>{children}</>;
   }
   // Otherwise, we can use templates on this field
-
   // if the value is empty, we only show the template picker
-  if (emptyValue) {
+  if (!value) {
     return (
       <div className={styles.inputContainer}>
         <Stack direction="row" gap={1} alignItems="center">
@@ -327,6 +323,7 @@ export function WrapWithTemplateSelection({
       </div>
     );
   }
+  const onlyOneTemplate = value ? matchesOnlyOneTemplate(value) : false;
   if (onlyOneTemplate) {
     return (
       <div className={styles.inputContainer}>