refactor(value-editor): own validity instead of the format row

The parse check lived inside LanguageValidation, which renders inside
LanguageSelector, so validity only existed when the format row did. That
is why the SAML field could ask for language='xml' and get no XML
validation: hiding the row hid the check with it.

ValueEditor computes it now and passes it down, so LanguageValidation is
presentational and can be rendered anywhere. Callers can read it too, via
onValidityChange.

saveFeatureWithValidation still reads 'language-validation-error' off the
DOM, so that id stays. Moving it onto the callback needs a decision this
change should not make on its own: the DOM query is global, so today a
parse error in a segment override also blocks saving the feature value,
and a callback has to say which editors gate which save.

Also documents why onChange hands back a string rather than a
FlagsmithValue: this edits text, and deciding "123" is a number is domain
logic that belongs to the caller. Two SegmentOverrides handlers were still
annotated as taking events and wrapping in safeParseEventValue, which has
been a no-op since ValueEditor started passing strings.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/web/components/SegmentOverrides.js

@@ -217,11 +217,7 @@ const SegmentOverrideInner = class Override extends React.Component {
                       onCompare={onCompare}
                       onCopyValue={() => {
                         this.setState({ changed: true })
-                        setValue(
-                          Utils.getTypedValue(
-                            Utils.safeParseEventValue(controlValue),
-                          ),
-                        )
+                        setValue(Utils.getTypedValue(controlValue))
                       }}
                       canCopyValue={
                         permission &&
@@ -286,11 +282,9 @@ const SegmentOverrideInner = class Override extends React.Component {
                   onChange={
                     readOnly
                       ? null
-                      : (e) => {
+                      : (newValue) => {
                           this.setState({ changed: true })
-                          setValue(
-                            Utils.getTypedValue(Utils.safeParseEventValue(e)),
-                          )
+                          setValue(Utils.getTypedValue(newValue))
                         }
                   }
                   placeholder="Value e.g. 'big' "
@@ -307,11 +301,9 @@ const SegmentOverrideInner = class Override extends React.Component {
                 onChange={
                   readOnly
                     ? null
-                    : (e) => {
+                    : (newValue) => {
                         this.setState({ changed: true })
-                        setValue(
-                          Utils.getTypedValue(Utils.safeParseEventValue(e)),
-                        )
+                        setValue(Utils.getTypedValue(newValue))
                       }
                 }
               />

frontend/web/components/ValueEditor/ValueEditor.tsx

@@ -1,4 +1,12 @@
-import React, { FC, ReactNode, useEffect, useId, useRef, useState } from 'react'
+import React, {
+  FC,
+  ReactNode,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import cx from 'classnames'
 
 import FieldLabel from 'components/base/forms/FieldLabel'
@@ -8,6 +16,7 @@ import { FlagsmithValue } from 'common/types/responses'
 import CopyValueButton from './components/CopyValueButton'
 import LanguageSelector from './components/LanguageSelector'
 import { ValueEditorLanguage } from './types'
+import { validateValue } from './validate'
 
 import './ValueEditor.scss'
 
@@ -25,7 +34,12 @@ export interface ValueEditorProps {
   labelTooltip?: string
   language?: ValueEditorLanguage
   onBlur?: () => void
+  // The edited text. Deliberately a string, not FlagsmithValue: this edits
+  // text, and deciding that "123" is a number is Flagsmith's domain logic.
+  // Callers interpret it (Utils.getTypedValue, Utils.valueToFeatureState).
   onChange?: (value: string) => void
+  // Fires when the value stops or starts parsing under the active format.
+  onValidityChange?: (error: string | false) => void
   value?: FlagsmithValue
 }
 
@@ -38,6 +52,7 @@ const ValueEditor: FC<ValueEditorProps> = ({
   language: languageProp,
   onBlur,
   onChange,
+  onValidityChange,
   value,
 }) => {
   const [language, setLanguage] = useState<ValueEditorLanguage>(
@@ -62,6 +77,16 @@ const ValueEditor: FC<ValueEditorProps> = ({
     } catch (e) {}
   }, [text])
 
+  // Validity lives here rather than in the format row, so it can be reported
+  // to callers and rendered anywhere. Keeping it in the row is what left the
+  // SAML field with language='xml' and no XML validation at all.
+  const error = useMemo(() => validateValue(language, text), [language, text])
+
+  useEffect(() => {
+    onValidityChange?.(error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error])
+
   const pickLanguage = (next: ValueEditorLanguage) => {
     formatSettled.current = true
     setLanguage(next)
@@ -90,9 +115,9 @@ const ValueEditor: FC<ValueEditorProps> = ({
           )}
           {showControls && (
             <LanguageSelector
+              error={error}
               language={language}
               onChange={pickLanguage}
-              value={text}
             />
           )}
         </div>

frontend/web/components/ValueEditor/components/LanguageSelector.tsx

@@ -14,14 +14,16 @@ import LanguageValidation from './LanguageValidation'
 interface LanguageSelectorProps {
   language: ValueEditorLanguage
   onChange: (language: ValueEditorLanguage) => void
-  value: string
+  // The active language's parse error, or false. Passed through rather than
+  // computed here so the row does not own validity.
+  error: string | false
 }
 
 /** The .txt/.json/.xml/.toml/.yaml row above the editor. */
 const LanguageSelector: FC<LanguageSelectorProps> = ({
+  error,
   language,
   onChange,
-  value,
 }) => (
   <Row className='select-language gap-1' role='group' aria-label='Value format'>
     {LANGUAGES.map((option) => (
@@ -37,7 +39,7 @@ const LanguageSelector: FC<LanguageSelectorProps> = ({
       >
         {LANGUAGE_LABELS[option]}{' '}
         {option !== 'txt' && language === option && (
-          <LanguageValidation language={option} value={value} />
+          <LanguageValidation language={option} error={error} />
         )}
       </BareButton>
     ))}

frontend/web/components/ValueEditor/components/LanguageValidation.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import Icon from 'components/icons/Icon'
 import Tooltip from 'components/Tooltip'
@@ -7,33 +7,32 @@ import {
   LANGUAGE_LABELS,
   ValueEditorLanguage,
 } from 'components/ValueEditor/types'
-import { validateValue } from 'components/ValueEditor/validate'
 
 interface LanguageValidationProps {
   language: ValueEditorLanguage
-  value: string
+  // The parse error for the current value, or false when it is valid. Computed
+  // by ValueEditor, so this stays presentational and can be rendered anywhere,
+  // not only inside the format row.
+  error: string | false
 }
 
 // Icon drops className for most icons and only a few spread their rest props,
 // so the colour class goes on a wrapper and the icon inherits via currentColor.
 const Wrapper: FC<{
   tone: 'success' | 'danger'
-  children: React.ReactNode
+  children: ReactNode
   id?: string
 }> = ({ children, id, tone }) => (
   <span id={id} className={`language-icon text-${tone}`}>
     {children}
   </span>
 )
 
-/** Tick or warning beside the active format label. */
+/** Tick or warning for the current value under the active format. */
 const LanguageValidation: FC<LanguageValidationProps> = ({
+  error,
   language,
-  value,
 }) => {
-  const error = useMemo(() => validateValue(language, value), [language, value])
-  const name = LANGUAGE_LABELS[language].replace('.', '')
-
   if (!error) {
     return (
       <Wrapper tone='success'>
@@ -42,11 +41,13 @@ const LanguageValidation: FC<LanguageValidationProps> = ({
     )
   }
 
+  const name = LANGUAGE_LABELS[language].replace('.', '')
   return (
     <Tooltip
       title={
         // saveFeatureWithValidation reads this id off the DOM to decide
-        // whether to warn before saving, so it has to stay.
+        // whether to warn before saving. ValueEditor now reports validity
+        // through onValidityChange; the id stays until that caller moves over.
         <Wrapper tone='danger' id='language-validation-error'>
           <Icon name='warning' width={14} fill='currentColor' />
         </Wrapper>