Show feedback for oversized flag values

frontend/common/utils/__tests__/featureValueValidation.test.ts

@@ -0,0 +1,33 @@
+import {
+  getFeatureValueLengthError,
+  hasInvalidFeatureValueLength,
+} from 'common/utils/featureValueValidation'
+
+describe('getFeatureValueLengthError', () => {
+  it('accepts values up to the configured maximum', () => {
+    expect(getFeatureValueLengthError('x'.repeat(20_000))).toBeUndefined()
+  })
+
+  it('reports the actual and maximum character counts when exceeded', () => {
+    expect(getFeatureValueLengthError('x'.repeat(20_001))).toBe(
+      'Flag value is 20,001 characters. Maximum length is 20,000 characters.',
+    )
+  })
+
+  it('counts Unicode code points as characters', () => {
+    expect(getFeatureValueLengthError('😀'.repeat(20_001))).toContain(
+      '20,001 characters',
+    )
+  })
+
+  it('does not apply the string limit to non-string values', () => {
+    expect(getFeatureValueLengthError(20_001)).toBeUndefined()
+  })
+
+  it('detects any over-limit value in a save', () => {
+    expect(hasInvalidFeatureValueLength(['valid', 'x'.repeat(20_001)])).toBe(
+      true,
+    )
+    expect(hasInvalidFeatureValueLength(['valid', 'also valid'])).toBe(false)
+  })
+})

frontend/common/utils/featureValueValidation.ts

@@ -0,0 +1,31 @@
+export const MAX_FEATURE_VALUE_LENGTH = 20_000
+
+export function getFeatureValueLengthError(
+  value: unknown,
+  label = 'Flag value',
+  maxLength = MAX_FEATURE_VALUE_LENGTH,
+): string | undefined {
+  if (typeof value !== 'string') return undefined
+
+  const characterCount = Array.from(value).length
+  if (characterCount <= maxLength) return undefined
+
+  return `${label} is ${characterCount.toLocaleString(
+    'en-GB',
+  )} characters. Maximum length is ${maxLength.toLocaleString(
+    'en-GB',
+  )} characters.`
+}
+
+export function getFeatureValueLengthErrors(
+  values: { label: string; value: unknown }[],
+): string[] {
+  return values.flatMap(({ label, value }) => {
+    const error = getFeatureValueLengthError(value, label)
+    return error ? [error] : []
+  })
+}
+
+export function hasInvalidFeatureValueLength(values: unknown[]): boolean {
+  return values.some((value) => !!getFeatureValueLengthError(value))
+}

frontend/web/components/SegmentOverrides.js

@@ -278,6 +278,7 @@ const SegmentOverrideInner = class Override extends React.Component {
               <div className='flex-fill overflow-hidden'>
                 <ValueEditor
                   label='Value'
+                  validateLength
                   disabled={readOnly}
                   value={v.value}
                   onChange={
@@ -295,6 +296,7 @@ const SegmentOverrideInner = class Override extends React.Component {
             <div className='flex-1 flex-column'>
               <ValueEditor
                 label='Segment Control Value'
+                validateLength
                 labelAfter={<ControlWeightChip percentage={controlPercent} />}
                 value={v.value}
                 disabled={readOnly}

frontend/web/components/ValueEditor/ValueEditor.tsx

@@ -9,9 +9,14 @@ import React, {
 } from 'react'
 import cx from 'classnames'
 
+import { FlagsmithValue } from 'common/types/responses'
+import {
+  getFeatureValueLengthError,
+  MAX_FEATURE_VALUE_LENGTH,
+} from 'common/utils/featureValueValidation'
+import ErrorMessage from 'components/ErrorMessage'
 import FieldLabel from 'components/base/forms/FieldLabel'
 import Highlight from 'components/Highlight'
-import { FlagsmithValue } from 'common/types/responses'
 
 import CopyValueButton from './components/CopyValueButton'
 import LanguageSelector from './components/LanguageSelector'
@@ -36,6 +41,7 @@ export interface ValueEditorProps {
   // caller's job (Utils.getTypedValue, Utils.valueToFeatureState).
   onChange?: (value: string) => void
   value?: FlagsmithValue
+  validateLength?: boolean
 }
 
 const ValueEditor: FC<ValueEditorProps> = ({
@@ -47,6 +53,7 @@ const ValueEditor: FC<ValueEditorProps> = ({
   language: languageProp,
   onBlur,
   onChange,
+  validateLength = false,
   value,
 }) => {
   const [picked, setPicked] = useState<ValueEditorLanguage>()
@@ -56,6 +63,13 @@ const ValueEditor: FC<ValueEditorProps> = ({
   const language = languageProp ?? picked ?? detected ?? 'txt'
   const labelId = useId()
   const text = value === undefined || value === null ? '' : `${value}`
+  const lengthError = validateLength
+    ? getFeatureValueLengthError(
+        text,
+        typeof label === 'string' ? label : 'Value',
+        MAX_FEATURE_VALUE_LENGTH,
+      )
+    : undefined
 
   // Detection waits for a value rather than running on mount: values load
   // after mount, and a mount-only check left JSON rendering as plaintext.
@@ -112,12 +126,18 @@ const ValueEditor: FC<ValueEditorProps> = ({
         </div>
       )}
 
+      {!!lengthError && (
+        <div role='alert' className='mb-2'>
+          <ErrorMessage error={lengthError} />
+        </div>
+      )}
       <div className='value-editor__field position-relative'>
         {showControls && <CopyValueButton value={text} />}
 
         <Highlight
           aria-labelledby={label ? labelId : undefined}
           aria-readonly={disabled || undefined}
+          aria-invalid={!!lengthError || undefined}
           disabled={disabled}
           onChange={disabled ? null : onChange}
           onBlur={disabled ? null : onBlur}

frontend/web/components/modals/create-feature/index.tsx

@@ -35,6 +35,7 @@ import {
 import { saveFeatureWithValidation } from 'components/saveFeatureWithValidation'
 import FeatureHistory from 'components/FeatureHistory'
 import { getChangeRequests } from 'common/services/useChangeRequest'
+import { getFeatureValueLengthErrors } from 'common/utils/featureValueValidation'
 import FeatureHealthTabContent from 'components/feature-health/FeatureHealthTabContent'
 import FeaturePipelineStatus from 'components/release-pipelines/FeaturePipelineStatus'
 import { History } from 'history'
@@ -350,7 +351,34 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
     return { featureError, featureWarning }
   }
 
+  const getValueLengthErrors = () =>
+    getFeatureValueLengthErrors([
+      {
+        label: identity ? 'Identity override' : 'Flag value',
+        value: environmentFlag.feature_state_value,
+      },
+      ...(projectFlag.multivariate_options || []).map(
+        (option: any, index: number) => ({
+          label: `Variant ${option.key || index + 1} value`,
+          value: option.string_value,
+        }),
+      ),
+      ...(segmentOverrides || [])
+        .filter((override: any) => !override.toRemove)
+        .map((override: any, index: number) => ({
+          label: `Segment override ${override.segment_name || index + 1} value`,
+          value: override.value,
+        })),
+    ])
+
+  const showValueLengthErrors = (errors = getValueLengthErrors()) => {
+    errors.forEach((error) => toast(error, 'danger'))
+    return errors.length > 0
+  }
+
   const save = (func: (...args: any[]) => void, isSaving: boolean) => {
+    if (showValueLengthErrors()) return
+
     const hasMultivariate =
       props.environmentFlag?.multivariate_feature_state_values?.length
 
@@ -476,6 +504,11 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
     !!projectFlag.multivariate_options &&
     projectFlag.multivariate_options.length &&
     controlValue < 0
+  const validateValueLengths =
+    (cb: (schedule?: boolean) => void) => (schedule?: boolean) => {
+      if (showValueLengthErrors()) return
+      cb(schedule)
+    }
   const isVersionedChangeRequest = existingChangeRequest && isVersioned
   const hideIdentityOverridesTab = Utils.getShouldHideIdentityOverridesTab()
   const isDependenciesTabEnabled = !existingChangeRequest
@@ -577,7 +610,16 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
         const hasVariationChanges =
           variationChanges.values || variationChanges.added
 
-        const onSaveVariationValues = () =>
+        const onSaveVariationValues = () => {
+          const valueLengthErrors = getFeatureValueLengthErrors(
+            (projectFlag.multivariate_options || []).map(
+              (option: any, index: number) => ({
+                label: `Variant ${option.key || index + 1} value`,
+                value: option.string_value,
+              }),
+            ),
+          )
+          if (showValueLengthErrors(valueLengthErrors)) return
           openConfirm({
             body: 'Variation values belong to the feature, so this applies to every environment straight away and is not part of a change request.',
             noText: 'Cancel',
@@ -624,9 +666,11 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
             title: 'Save variation values',
             yesText: 'Save for all environments',
           })
+        }
 
         const saveFeatureValue = saveFeatureWithValidation(
           (schedule?: boolean) => {
+            if (showValueLengthErrors()) return
             if ((is4Eyes || schedule) && !identity) {
               const approvable =
                 dependenciesChanged ||
@@ -831,7 +875,9 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
                       hasVariationChanges={hasVariationChanges}
                       onSaveVariationValues={onSaveVariationValues}
                       originalMultivariateOptions={originalMultivariateOptions}
-                      onSaveFeatureValue={saveFeatureValue}
+                      onSaveFeatureValue={validateValueLengths(
+                        saveFeatureValue,
+                      )}
                       onEnvironmentFlagChange={(changes: any) => {
                         setEnvironmentFlag((prev: any) => ({
                           ...prev,

frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx

@@ -404,6 +404,7 @@ const FeatureValueTab: FC<FeatureValueTabProps> = ({
           <div className='form-group'>
             <ValueEditor
               label={valueTitle}
+              validateLength
               labelAfter={
                 hasVariations && (
                   <ControlWeightChip percentage={controlPercentage} />

frontend/web/components/mv/VariationValueInput/VariationValueInput.tsx

@@ -72,6 +72,7 @@ export const VariationValueInput: React.FC<VariationValueProps> = ({
             : Constants.projectPermissions(ProjectPermission.CREATE_FEATURE),
           <ValueEditor
             label='Variation Value'
+            validateLength
             labelTooltip={Constants.strings.REMOTE_CONFIG_DESCRIPTION_VARIATION}
             className='full-width code-medium'
             value={Utils.getTypedValue(Utils.featureStateToValue(value))}