From 71f7f44959197386599363012d693cafdd34ab80 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 18 May 2022 08:28:38 -0500
Subject: [PATCH] Only show script or zip source 'required' validation error
 after field is touched/changed. (#132339) (#132415)

(cherry picked from commit a989e20c8d7e1d2c487f43d877094d8eedd73891)

Co-authored-by: Abdul Wahab Zahid <awahab07@yahoo.com>
---
 .../fleet_package/browser/source_field.tsx    | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx b/x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx
index 89f34618009232..1ce559a16e52df 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx
@@ -78,11 +78,28 @@ export const SourceField = ({ onChange, onFieldBlur, defaultConfig = defaultValu
     getDefaultTab(defaultConfig, isZipUrlSourceEnabled)
   );
   const [config, setConfig] = useState<SourceConfig>(defaultConfig);
+  const [touchedFields, setTouchedFields] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
     onChange(config);
   }, [config, onChange]);
 
+  const onFieldTouched = (field: ConfigKey) => {
+    if (!touchedFields[field]) {
+      setTouchedFields((existing) => ({ ...existing, [field]: true }));
+    }
+
+    onFieldBlur(field);
+  };
+
+  const isWithInUptime = window.location.pathname.includes('/app/uptime');
+  const isZipUrlInvalid = isWithInUptime
+    ? touchedFields[ConfigKey.SOURCE_ZIP_URL] && !config.zipUrl
+    : !config.zipUrl;
+  const isScriptInvalid = isWithInUptime
+    ? touchedFields[ConfigKey.SOURCE_INLINE] && !config.inlineScript
+    : !config.inlineScript;
+
   const zipUrlLabel = (
     <FormattedMessage
       id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.browser.zipUrl.label"
@@ -101,7 +118,7 @@ export const SourceField = ({ onChange, onFieldBlur, defaultConfig = defaultValu
           <EuiSpacer size="m" />
           <EuiFormRow
             label={zipUrlLabel}
-            isInvalid={!config.zipUrl}
+            isInvalid={isZipUrlInvalid}
             error={
               <FormattedMessage
                 id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.browser.zipUrl.error"
@@ -119,7 +136,7 @@ export const SourceField = ({ onChange, onFieldBlur, defaultConfig = defaultValu
               onChange={({ target: { value } }) =>
                 setConfig((prevConfig) => ({ ...prevConfig, zipUrl: value }))
               }
-              onBlur={() => onFieldBlur(ConfigKey.SOURCE_ZIP_URL)}
+              onBlur={() => onFieldTouched(ConfigKey.SOURCE_ZIP_URL)}
               value={config.zipUrl}
               data-test-subj="syntheticsBrowserZipUrl"
             />
@@ -267,7 +284,7 @@ export const SourceField = ({ onChange, onFieldBlur, defaultConfig = defaultValu
       'data-test-subj': `syntheticsSourceTab__inline`,
       content: (
         <EuiFormRow
-          isInvalid={!config.inlineScript}
+          isInvalid={isScriptInvalid}
           error={
             <FormattedMessage
               id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.browser.inlineScript.error"
@@ -292,7 +309,7 @@ export const SourceField = ({ onChange, onFieldBlur, defaultConfig = defaultValu
             languageId={MonacoEditorLangId.JAVASCRIPT}
             onChange={(code) => {
               setConfig((prevConfig) => ({ ...prevConfig, inlineScript: code }));
-              onFieldBlur(ConfigKey.SOURCE_INLINE);
+              onFieldTouched(ConfigKey.SOURCE_INLINE);
             }}
             value={config.inlineScript}
           />