Only show script or zip source 'required' validation error after fiel…

…d is touched/changed. (#132339) (cherry picked from commit a989e20)
elastic · May 18, 2022 · 4417701 · 4417701
1 parent 9a3c3f1
commit 4417701
Showing 1 changed file with 21 additions and 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
@@ -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}
           />