Extract server-violation clearing into a shared composable

Replace the three ad-hoc per-input mechanisms for clearing stale server
validation violations on edit with one useServerViolations composable, and
fix the multi-value Text/Url field-level clear gap in the same stroke.

The composable centralises the property-name filter (previously copied four
times) and the neowiki-field message formatter (five times), and exposes
emitClears( 'all' | number[] ):

  - 'all' clears every held violation by its own index. The aggregate inputs
    (Select, Relation) render one error for the whole property with no per-part
    slot, so on any edit every held violation is stale; a single null clear
    would never remove a part-indexed one. This is the part-indexed clearing the
    narrow fix delivered for Select/Relation, now shared.
  - a touched-index list clears the edited parts that carry a violation plus the
    shared field-level summary slot. Multi Text/Url passes its changed indices;
    single-value and field-level inputs pass [].

The field-level clear in the number[] path fixes the bug where a
required/uniqueItems violation shown in a multi Text/Url summary slot was never
cleared on edit and lingered until the next dry-run validate.

Display stays per-input: the aggregate, per-part-plus-summary, and field-level
display models genuinely differ and cannot collapse. The wire contract and both
dialogs' handleClearViolation are byte-identical, so the migration is safe — an
unconverted input keeps working. useFieldServerViolation becomes a thin adapter
over the composable.

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

Author: 2 people

resources/ext.neowiki/src/components/Value/RelationInput.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, toRef } from 'vue';
 import { CdxField, CdxIcon, ValidationMessages } from '@wikimedia/codex';
 import { cdxIconInfo } from '@wikimedia/codex-icons';
 import NeoMultiLookupInput from '@/components/common/NeoMultiLookupInput.vue';
@@ -56,7 +56,7 @@ import { ValueInputEmits, ValueInputProps, ValueInputExposes } from '@/component
 import { RelationProperty, RelationType } from '@/domain/propertyTypes/Relation.ts';
 import { Value, ValueType, RelationValue, newRelation, relationValuesHaveSameTargets } from '@/domain/Value';
 import { NeoWikiServices } from '@/NeoWikiServices.ts';
-import { SubjectViolation } from '@/domain/SubjectViolation.ts';
+import { useServerViolations } from '@/composables/useServerViolations.ts';
 
 const props = withDefaults(
 	defineProps<ValueInputProps<RelationProperty>>(),
@@ -73,27 +73,18 @@ const emit = defineEmits<ValueInputEmits>();
 const internalValue = ref<RelationValue | undefined>( undefined );
 const singleHasUnmatchedText = ref( false );
 
-function relevantServerViolations(): readonly SubjectViolation[] {
-	const name = props.property.name.toString();
-	return ( props.serverViolations ?? [] ).filter( ( v ) => v.propertyName === name );
-}
-
-// Field-level server violation (NeoMultiLookupInput has no per-index slot).
-function serverFieldMessages(): ValidationMessages {
-	const hit = relevantServerViolations()[ 0 ];
-	if ( hit ) {
-		return {
-			error: mw.message( `neowiki-field-${ hit.code }`, ...( hit.args as string[] ) ).text()
-		};
-	}
-	return {};
-}
+const { firstMessage, emitClears } = useServerViolations(
+	toRef( props, 'property' ),
+	toRef( props, 'serverViolations' ),
+	emit
+);
 
+// One aggregate error for the whole property (NeoMultiLookupInput has no per-index slot).
 const displayedFieldMessages = computed( (): ValidationMessages => {
-	if ( singleHasUnmatchedText.value ) {
+	if ( singleHasUnmatchedText.value || firstMessage.value === null ) {
 		return {};
 	}
-	return serverFieldMessages();
+	return { error: firstMessage.value };
 } );
 
 const fieldStatus = computed( (): 'error' | 'default' => {
@@ -103,15 +94,6 @@ const fieldStatus = computed( (): 'error' | 'default' => {
 	return displayedFieldMessages.value.error !== undefined ? 'error' : 'default';
 } );
 
-function emitClearIfServerViolationPresent(): void {
-	if ( relevantServerViolations().length > 0 ) {
-		emit( 'clear-server-violation', {
-			propertyName: props.property.name.toString(),
-			valuePartIndex: null
-		} );
-	}
-}
-
 function initializeInternalValue( value: Value | undefined ): void {
 	if ( value && value.type === ValueType.Relation ) {
 		const relValue = value as RelationValue;
@@ -156,7 +138,7 @@ function onSingleSelectionChanged( id: string | null ): void {
 	}
 
 	emit( 'update:modelValue', newRelationValue );
-	emitClearIfServerViolationPresent();
+	emitClears( 'all' );
 }
 
 function onSingleBlur( hasUnmatchedText: boolean ): void {
@@ -179,7 +161,7 @@ function onSelectionsChanged( ids: ( string | null )[] ): void {
 	}
 
 	emit( 'update:modelValue', newRelationValue );
-	emitClearIfServerViolationPresent();
+	emitClears( 'all' );
 }
 
 defineExpose<ValueInputExposes>( {

resources/ext.neowiki/src/components/Value/SelectInput.vue

@@ -42,14 +42,14 @@ import type { Value } from '@/domain/Value';
 </script>
 
 <script setup lang="ts">
-import { ref, watch, computed, nextTick } from 'vue';
+import { ref, watch, computed, nextTick, toRef } from 'vue';
 import { CdxField, CdxIcon, CdxMultiselectLookup, CdxSelect } from '@wikimedia/codex';
 import type { ChipInputItem, MenuItemData } from '@wikimedia/codex';
 import { cdxIconInfo } from '@wikimedia/codex-icons';
 import { newStringValue, StringValue, ValueType } from '@/domain/Value';
 import { resolveSelectLabel, SelectProperty } from '@/domain/propertyTypes/Select.ts';
 import { ValueInputEmits, ValueInputExposes, ValueInputProps } from '@/components/Value/ValueInputContract.ts';
-import { SubjectViolation } from '@/domain/SubjectViolation.ts';
+import { useServerViolations } from '@/composables/useServerViolations.ts';
 
 const props = withDefaults(
 	defineProps<ValueInputProps<SelectProperty>>(),
@@ -61,19 +61,13 @@ const props = withDefaults(
 
 const emit = defineEmits<ValueInputEmits>();
 
-function relevantServerViolations(): readonly SubjectViolation[] {
-	const name = props.property.name.toString();
-	return ( props.serverViolations ?? [] ).filter( ( v ) => v.propertyName === name );
-}
-
-const validationError = computed<string | null>( () => {
-	// For Select (both single and multi), show the first relevant server violation.
-	const hit = relevantServerViolations()[ 0 ];
-	if ( hit ) {
-		return mw.message( `neowiki-field-${ hit.code }`, ...( hit.args as string[] ) ).text();
-	}
-	return null;
-} );
+// For Select (single and multi) the field shows one aggregate error — the first
+// relevant server violation — so an edit clears every held violation ('all').
+const { firstMessage: validationError, emitClears } = useServerViolations(
+	toRef( props, 'property' ),
+	toRef( props, 'serverViolations' ),
+	emit
+);
 
 const selectPlaceholder = computed( () =>
 	mw.message( 'neowiki-select-placeholder' ).text()
@@ -119,20 +113,11 @@ function getFilteredOptions(): MenuItemData[] {
 		.map( ( option ) => ( { value: option.id, label: option.label } ) );
 }
 
-function emitClearIfServerViolationPresent(): void {
-	if ( relevantServerViolations().length > 0 ) {
-		emit( 'clear-server-violation', {
-			propertyName: props.property.name.toString(),
-			valuePartIndex: null
-		} );
-	}
-}
-
 function onSingleSelect( selected: string ): void {
 	selection.value = selected ? [ selected ] : [];
 	emit( 'update:modelValue', selection.value.length > 0 ?
 		newStringValue( selection.value ) : undefined );
-	emitClearIfServerViolationPresent();
+	emitClears( 'all' );
 }
 
 function onInput(): void {
@@ -159,7 +144,7 @@ watch( chips, () => {
 		inputValue.value = '';
 		menuItems.value = [];
 		emit( 'update:modelValue', parts.length > 0 ? newStringValue( parts ) : undefined );
-		emitClearIfServerViolationPresent();
+		emitClears( 'all' );
 	} );
 }, { deep: true } );
 

resources/ext.neowiki/src/composables/useFieldServerViolation.ts

@@ -1,24 +1,21 @@
-import { computed, ComputedRef, Ref } from 'vue';
+import { ComputedRef, Ref } from 'vue';
 import { SubjectViolation } from '@/domain/SubjectViolation.ts';
 import { PropertyDefinition } from '@/domain/PropertyDefinition.ts';
 import { ValueInputEmitFunction } from '@/components/Value/ValueInputContract.ts';
+import { useServerViolations } from '@/composables/useServerViolations.ts';
 
 interface FieldServerViolation {
 	validationError: ComputedRef<string | null>;
 	clearServerViolation: () => void;
 }
 
 /**
- * Field-level server-violation handling shared by the single-value inputs
- * (Boolean, Number, Date, DateTime). Merges a server-sourced violation for
- * this property as the displayed error and clears it when the user edits the
- * field.
- *
- * Only field-level violations (valuePartIndex null/undefined) are handled;
- * single-value inputs have no per-index slot. Text and Url (via
- * useStringValueInput) merge per-index violations into their per-input slots;
- * Select and Relation do their own inline lookup, surfacing the first
- * violation for the property at field level.
+ * Field-level server-violation handling for the single-value inputs (Boolean,
+ * Number, Date, DateTime). A thin adapter over useServerViolations: these
+ * inputs have no per-part slot, so only the field-level violation (valuePartIndex
+ * null/undefined) is displayed, and clearing passes an empty touched-index set
+ * so exactly that violation is dropped — a per-index violation is neither shown
+ * nor cleared here.
  *
  * @param property The field's Property Definition; violations are matched on its name.
  * @param serverViolations The violations passed to this input.
@@ -31,31 +28,10 @@ export function useFieldServerViolation<P extends PropertyDefinition>(
 	emit: ValueInputEmitFunction,
 	formatArg: ( arg: string ) => string = ( arg ) => arg,
 ): FieldServerViolation {
-	const fieldLevelHit = (): SubjectViolation | undefined =>
-		( serverViolations.value ?? [] ).find(
-			( v ) => v.propertyName === property.value.name.toString() &&
-				( v.valuePartIndex === null || v.valuePartIndex === undefined ),
-		);
-
-	const validationError = computed<string | null>( () => {
-		const hit = fieldLevelHit();
-		if ( hit ) {
-			return mw.message(
-				`neowiki-field-${ hit.code }`,
-				...( hit.args as string[] ).map( formatArg ),
-			).text();
-		}
-		return null;
-	} );
-
-	function clearServerViolation(): void {
-		if ( fieldLevelHit() ) {
-			emit( 'clear-server-violation', {
-				propertyName: property.value.name.toString(),
-				valuePartIndex: null,
-			} );
-		}
-	}
+	const { fieldLevelMessage, emitClears } = useServerViolations( property, serverViolations, emit, formatArg );
 
-	return { validationError, clearServerViolation };
+	return {
+		validationError: fieldLevelMessage,
+		clearServerViolation: () => emitClears( [] ),
+	};
 }

resources/ext.neowiki/src/composables/useServerViolations.ts

@@ -0,0 +1,103 @@
+import { computed, ComputedRef, Ref } from 'vue';
+import { SubjectViolation } from '@/domain/SubjectViolation.ts';
+import { PropertyDefinition } from '@/domain/PropertyDefinition.ts';
+import { ValueInputEmitFunction } from '@/components/Value/ValueInputContract.ts';
+
+/**
+ * Which on-screen surfaces an edit could have resolved, so the matching stale
+ * server violations can be optimistically cleared:
+ *
+ * - `'all'` — the input renders one aggregate error for the whole property with
+ *   no per-part slot (Select, Relation), so every held violation is stale on any
+ *   edit. Each is cleared by its own index (numeric or null).
+ * - a list of value-part indices — the input renders an independent slot per
+ *   part (multi Text/Url), so only the edited slots are cleared, and the shared
+ *   field-level summary slot is cleared alongside them. A single-value or
+ *   field-level input passes `[]` to clear only that summary slot.
+ */
+export type ClearScope = 'all' | readonly number[];
+
+export interface UseServerViolationsReturn {
+	relevant: () => readonly SubjectViolation[];
+	format: ( violation: SubjectViolation ) => string;
+	firstMessage: ComputedRef<string | null>;
+	fieldLevelMessage: ComputedRef<string | null>;
+	emitClears: ( touched: ClearScope ) => void;
+}
+
+function isFieldLevel( violation: SubjectViolation ): boolean {
+	return violation.valuePartIndex === null || violation.valuePartIndex === undefined;
+}
+
+/**
+ * Shared server-violation handling for the value inputs. Centralises the
+ * property-name filter and the `neowiki-field-` message formatter (each was
+ * copied across four/five inputs) and, crucially, the optimistic
+ * clear-on-edit logic — which differs only by how each input DISPLAYS its
+ * violations. Display stays in the individual inputs, because the aggregate,
+ * per-part-plus-summary, and field-level models genuinely differ.
+ *
+ * The parent dialog drops violations by exact (propertyName, valuePartIndex)
+ * match, so every clear must carry the held violation's own index; a single
+ * null clear never removes a part-indexed one.
+ *
+ * @param property The field's Property Definition; violations match on its name.
+ * @param serverViolations The violations passed to this input (may be undefined).
+ * @param emit The component's emit function; used for clear-server-violation.
+ * @param formatArg Per-arg formatter; Date/DateTime format their bounds for display.
+ */
+export function useServerViolations<P extends PropertyDefinition>(
+	property: Ref<P>,
+	serverViolations: Ref<readonly SubjectViolation[] | undefined>,
+	emit: ValueInputEmitFunction,
+	formatArg: ( arg: string ) => string = ( arg ) => arg,
+): UseServerViolationsReturn {
+	function propertyName(): string {
+		return property.value.name.toString();
+	}
+
+	function relevant(): readonly SubjectViolation[] {
+		const name = propertyName();
+		return ( serverViolations.value ?? [] ).filter( ( v ) => v.propertyName === name );
+	}
+
+	function format( violation: SubjectViolation ): string {
+		return mw.message(
+			`neowiki-field-${ violation.code }`,
+			...( violation.args as string[] ).map( formatArg ),
+		).text();
+	}
+
+	const firstMessage = computed<string | null>( () => {
+		const hit = relevant()[ 0 ];
+		return hit ? format( hit ) : null;
+	} );
+
+	const fieldLevelMessage = computed<string | null>( () => {
+		const hit = relevant().find( isFieldLevel );
+		return hit ? format( hit ) : null;
+	} );
+
+	function emitClears( touched: ClearScope ): void {
+		const held = relevant();
+		const name = propertyName();
+
+		if ( touched === 'all' ) {
+			for ( const violation of held ) {
+				emit( 'clear-server-violation', { propertyName: name, valuePartIndex: violation.valuePartIndex } );
+			}
+			return;
+		}
+
+		for ( const index of touched ) {
+			if ( held.some( ( v ) => v.valuePartIndex === index ) ) {
+				emit( 'clear-server-violation', { propertyName: name, valuePartIndex: index } );
+			}
+		}
+		if ( held.some( isFieldLevel ) ) {
+			emit( 'clear-server-violation', { propertyName: name, valuePartIndex: null } );
+		}
+	}
+
+	return { relevant, format, firstMessage, fieldLevelMessage, emitClears };
+}