Select the first property on SchemaEditor load

Author: alistair3149

resources/ext.neowiki/src/components/SchemaEditor/PropertyList.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { CdxMenu, MenuItemData } from '@wikimedia/codex';
 import { cdxIconAdd } from '@wikimedia/codex-icons';
 import { PropertyDefinitionList } from '@/domain/PropertyDefinitionList.ts';
@@ -21,6 +21,7 @@ import { NeoWikiServices } from '@/NeoWikiServices.ts';
 
 const props = defineProps<{
 	properties: PropertyDefinitionList;
+	selectedPropertyName?: string;
 }>();
 
 const emit = defineEmits<{
@@ -31,7 +32,13 @@ const emit = defineEmits<{
 const componentRegistry = NeoWikiServices.getComponentRegistry();
 
 // CdxMenu doesn't support passing a PropertyName as a value, so we use a string instead.
-const selectedValue = ref( '' );
+const selectedValue = ref( props.selectedPropertyName ?? '' );
+
+watch( () => props.selectedPropertyName, ( newProperty ) => {
+	if ( newProperty !== undefined ) {
+		selectedValue.value = newProperty;
+	}
+} );
 
 const menuItems = computed( (): MenuItemData[] => [ ...props.properties ].map( ( property: PropertyDefinition ): MenuItemData => ( {
 	label: property.name.toString(),

resources/ext.neowiki/src/components/SchemaEditor/SchemaEditor.vue

@@ -5,6 +5,7 @@
 	>
 		<PropertyList
 			:properties="currentSchema.getPropertyDefinitions()"
+			:selected-property-name="selectedPropertyName"
 			@property-selected="onPropertySelected"
 			@property-created="onPropertyCreated"
 		/>
@@ -30,7 +31,9 @@ const props = defineProps<{
 }>();
 
 const currentSchema = ref<Schema>( props.initialSchema );
-const selectedPropertyName = ref<string | undefined>( undefined );
+
+const firstProperty = [ ...props.initialSchema.getPropertyDefinitions() ][ 0 ];
+const selectedPropertyName = ref<string | undefined>( firstProperty?.name.toString() );
 
 const selectedProperty = computed( () => {
 	if ( selectedPropertyName.value === undefined ) {

resources/ext.neowiki/tests/components/SchemaEditor/SchemaEditor.spec.ts

@@ -0,0 +1,64 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import SchemaEditor from '@/components/SchemaEditor/SchemaEditor.vue';
+import { Schema } from '@/domain/Schema.ts';
+import { PropertyDefinitionList } from '@/domain/PropertyDefinitionList.ts';
+import { createPropertyDefinitionFromJson } from '@/domain/PropertyDefinition.ts';
+import { TextType } from '@/domain/propertyTypes/Text.ts';
+
+function createWrapper( schema: Schema ): VueWrapper {
+	return mount( SchemaEditor, {
+		props: {
+			initialSchema: schema,
+		},
+		global: {
+			stubs: {
+				PropertyList: true,
+				PropertyDefinitionEditor: true,
+			},
+		},
+	} );
+}
+
+describe( 'SchemaEditor', () => {
+
+	beforeEach( () => {
+		vi.stubGlobal( 'mw', {
+			message: vi.fn( ( str ) => ( {
+				text: () => str,
+				parse: () => str,
+			} ) ),
+		} );
+	} );
+
+	it( 'selects the first property by default when properties exist', () => {
+		const schema = new Schema(
+			'TestSchema',
+			'Description',
+			new PropertyDefinitionList( [
+				createPropertyDefinitionFromJson( 'firstProp', { type: TextType.typeName } ),
+				createPropertyDefinitionFromJson( 'secondProp', { type: TextType.typeName } ),
+			] ),
+		);
+
+		const wrapper = createWrapper( schema );
+
+		expect( wrapper.classes() ).toContain( 'ext-neowiki-schema-editor--has-selected-property' );
+		expect( wrapper.findComponent( { name: 'PropertyList' } ).props( 'selectedPropertyName' ) ).toBe( 'firstProp' );
+		expect( wrapper.findComponent( { name: 'PropertyDefinitionEditor' } ).props( 'property' ).name.toString() ).toBe( 'firstProp' );
+	} );
+
+	it( 'does not select any property if schema has no properties', () => {
+		const schema = new Schema(
+			'EmptySchema',
+			'Description',
+			new PropertyDefinitionList( [] ),
+		);
+
+		const wrapper = createWrapper( schema );
+
+		expect( wrapper.classes() ).not.toContain( 'ext-neowiki-schema-editor--has-selected-property' );
+		expect( wrapper.findComponent( { name: 'PropertyList' } ).props( 'selectedPropertyName' ) ).toBe( undefined );
+		expect( wrapper.findComponent( { name: 'PropertyDefinitionEditor' } ).exists() ).toBe( false );
+	} );
+} );