[Discover] Fix invalid input highlight in Data View flyout (#226822)

jughosta · jughosta · commit 5bfd668d797a · 2025-07-08T07:53:04.000Z
## Summary This PR addresses the existing issue with invalid input highlights in Data View flyout. `isInvalid` prop was missing #224382 (comment) Before: <img width="939" alt="Screenshot 2025-07-07 at 15 46 59" src="https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4" /> <img width="935" alt="Screenshot 2025-07-07 at 15 49 32" src="https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75" /> After (notice the additional bottom outline in red): <img width="937" alt="Screenshot 2025-07-07 at 15 46 27" src="https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5" /> <img width="929" alt="Screenshot 2025-07-07 at 15 49 10" src="https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4" /> (cherry picked from commit 7483b8c)
diff --git a/src/platform/plugins/shared/data_view_editor/public/components/form_fields/name_field.tsx b/src/platform/plugins/shared/data_view_editor/public/components/form_fields/name_field.tsx
@@ -78,6 +78,7 @@ export const NameField = ({ namesNotAllowed }: NameFieldProps) => {
         return (
           <EuiFormRow label={field.label} fullWidth error={errorMessage} isInvalid={isInvalid}>
             <EuiFieldText
+              isInvalid={isInvalid}
               value={field.value}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 field.setValue(e.target.value);
diff --git a/src/platform/plugins/shared/data_view_editor/public/components/form_fields/timestamp_field.tsx b/src/platform/plugins/shared/data_view_editor/public/components/form_fields/timestamp_field.tsx
@@ -114,16 +114,19 @@ export const TimestampField = ({ options$, isLoadingOptions$, matchedIndices$ }:
           }
         }
 
+        const isComboBoxInvalid = !isDisabled && isInvalid;
+
         return (
           <>
             <EuiFormRow
               label={label}
               error={isDisabled ? null : errorMessage}
-              isInvalid={!isDisabled && isInvalid}
+              isInvalid={isComboBoxInvalid}
               fullWidth
             >
               <>
                 <EuiComboBox<string>
+                  isInvalid={isComboBoxInvalid}
                   placeholder={i18n.translate(
                     'indexPatternEditor.editor.form.runtimeType.placeholderLabel',
                     {

Original file line number	Diff line number	Diff line change
`@@ -114,16 +114,19 @@ export const TimestampField = ({ options$, isLoadingOptions$, matchedIndices$ }:`
`114`	`114`	`}`
`115`	`115`	`}`
`116`	`116`
	`117`	`+ const isComboBoxInvalid = !isDisabled && isInvalid;`
	`118`	`+`
`117`	`119`	`return (`
`118`	`120`	`<>`
`119`	`121`	`<EuiFormRow`
`120`	`122`	`label={label}`
`121`	`123`	`error={isDisabled ? null : errorMessage}`
`122`		`- isInvalid={!isDisabled && isInvalid}`
	`124`	`+ isInvalid={isComboBoxInvalid}`
`123`	`125`	`fullWidth`
`124`	`126`	`>`
`125`	`127`	`<>`
`126`	`128`	`<EuiComboBox<string>`
	`129`	`+ isInvalid={isComboBoxInvalid}`
`127`	`130`	`placeholder={i18n.translate(`
`128`	`131`	`'indexPatternEditor.editor.form.runtimeType.placeholderLabel',`
`129`	`132`	`{`