From 85bd116a1071b71d290487112e5532487f256781 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Fri, 15 Mar 2024 15:49:05 +0100
Subject: [PATCH] Alerting: Fix optional fields requiring validation rule
 (#84584)

fixes #84296
---
 .../receivers/form/fields/OptionField.tsx         | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
index 02384e0c63c..e5058dca9b9 100644
--- a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
@@ -122,7 +122,8 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
           {...register(name, {
             required: determineRequired(option, getValues, pathIndex),
             validate: {
-              validationRule: (v) => (option.validationRule ? validateOption(v, option.validationRule) : true),
+              validationRule: (v) =>
+                option.validationRule ? validateOption(v, option.validationRule, option.required) : true,
               customValidator: (v) => (customValidator ? customValidator(v) : true),
             },
             setValueAs: option.setValueAs,
@@ -167,7 +168,8 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
             rules={{
               required: option.required ? 'Option is required' : false,
               validate: {
-                validationRule: (v) => (option.validationRule ? validateOption(v, option.validationRule) : true),
+                validationRule: (v) =>
+                  option.validationRule ? validateOption(v, option.validationRule, option.required) : true,
                 customValidator: (v) => (customValidator ? customValidator(v) : true),
               },
             }}
@@ -183,7 +185,8 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
           placeholder={option.placeholder}
           {...register(name, {
             required: option.required ? 'Required' : false,
-            validate: (v) => (option.validationRule !== '' ? validateOption(v, option.validationRule) : true),
+            validate: (v) =>
+              option.validationRule !== '' ? validateOption(v, option.validationRule, option.required) : true,
           })}
         />
       );
@@ -223,7 +226,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
   `,
 });
 
-const validateOption = (value: string, validationRule: string) => {
+const validateOption = (value: string, validationRule: string, required: boolean) => {
+  if (value === '' && !required) {
+    return true;
+  }
+
   return RegExp(validationRule).test(value) ? true : 'Invalid format';
 };