Basic implementation of entity-id snak types for wbui2025

Add support for entity-id values and entity-id-typed properties in the
wbui2025 user interface.

Includes support for searching entities and displaying the search
results in a lookup / drop-down.

Support for WikibaseLexeme - Lexemes, Senses and Forms - is excluded
because the extension is not available for all Wikibase installations.
Follow-up changes will add that support

Depends-On: I660dbbfcc43468c1d9b7f339f4432004559b545b
Bug: T403974
Change-Id: I99813bdf9b529892e06356ce84cea5c36a6a6964

Author: codders

cypress/e2e/wbui2025/editEntityDatatypes.cy.ts

@@ -0,0 +1,112 @@
+import { Util } from 'cypress-wikibase-api';
+
+import { checkA11y } from '../../support/checkA11y';
+import { ItemViewPage } from '../../support/pageObjects/ItemViewPage';
+import { EditStatementFormPage } from '../../support/pageObjects/EditStatementFormPage';
+
+describe( 'wbui2025 entityId datatypes (item, property)', () => {
+
+	const createEntityForDatatype = {
+		item: ( label: string ) => cy.task( 'MwApi:CreateEntity', {
+			entityType: 'item',
+			label: label,
+			data: { claims: [] },
+		} ),
+		property: ( label: string ) => cy.task( 'MwApi:CreateEntity', {
+			entityType: 'property',
+			label: label,
+			data: {
+				datatype: 'string',
+				claims: [],
+			},
+		} ),
+	};
+
+	for ( const datatype of [ 'item', 'property' ] ) {
+		context( 'mobile view - ' + datatype + ' datatype', () => {
+			let propertyName: string;
+			let entityId: string;
+			let linkedEntityId: string;
+			let linkedEntityLabel: string;
+			let newLinkedEntityLabel: string;
+
+			before( () => {
+				propertyName = Util.getTestString( datatype + '-property' + '-' );
+				linkedEntityLabel = Util.getTestString( 'linked-' + datatype + '-' );
+				newLinkedEntityLabel = Util.getTestString( 'new-linked-' + datatype + '-' );
+				createEntityForDatatype[ datatype ]( linkedEntityLabel ).then( ( newEntityId: string ) => {
+					linkedEntityId = newEntityId;
+				} );
+				createEntityForDatatype[ datatype ]( newLinkedEntityLabel );
+				cy.task( 'MwApi:CreateProperty', {
+					label: propertyName,
+					data: { datatype: 'wikibase-' + datatype },
+				} ).then( ( newPropertyId: string ) => {
+					const statementData = {
+						claims: [ {
+							mainsnak: {
+								snaktype: 'value',
+								property: newPropertyId,
+								datavalue: {
+									value: {
+										'entity-type': datatype,
+										id: linkedEntityId,
+									},
+									type: 'wikibase-entityid',
+								},
+								datatype: 'wikibase-' + datatype,
+							},
+							type: 'statement',
+							rank: 'normal',
+						} ],
+					};
+					cy.task( 'MwApi:CreateItem', {
+						label: Util.getTestString( 'item-with-' + datatype + '-statement' ),
+						data: statementData,
+					} ).then( ( newItemId: string ) => {
+						entityId = newItemId;
+					} );
+				} );
+			} );
+
+			beforeEach( () => {
+				cy.viewport( 375, 1280 );
+			} );
+
+			it( 'displays item statement and supports full editing workflow', () => {
+				const itemViewPage = new ItemViewPage( entityId );
+				itemViewPage.open().statementsSection();
+				checkA11y( ItemViewPage.STATEMENTS );
+
+				itemViewPage.editLinks().first().should( 'exist' ).should( 'be.visible' );
+				itemViewPage.editLinks().first().click();
+
+				const editFormPage = new EditStatementFormPage();
+				editFormPage.formHeading().should( 'exist' );
+				editFormPage.propertyName().should( 'have.text', propertyName );
+
+				editFormPage.lookupComponent()
+					.should( 'exist' ).should( 'be.visible' );
+
+				editFormPage.lookupInput()
+					.should( 'have.value', linkedEntityLabel );
+
+				editFormPage.lookupInput().clear();
+				editFormPage.lookupInput().type( newLinkedEntityLabel );
+				editFormPage.lookupInput().focus();
+
+				editFormPage.menu().should( 'be.visible' );
+
+				editFormPage.menuItems().first().click();
+				editFormPage.lookupInput().should( 'have.value', newLinkedEntityLabel );
+
+				editFormPage.publishButton().click();
+
+				/* Wait for the form to close, and check the value is changed */
+				editFormPage.formHeading().should( 'not.exist' );
+				itemViewPage.mainSnakValues().first().should( 'contain.text', newLinkedEntityLabel );
+
+			} );
+		} );
+	}
+} );

cypress/e2e/wbui2025/editStringDatatypes.cy.ts

@@ -123,7 +123,7 @@ describe( 'wbui2025 string datatypes (tabular-data and geo-shape)', () => {
 			cy.wait( '@commonsSearch' );
 			editFormPage.menu().should( 'exist' );
 
-			editFormPage.menuItems().eq( 3 ).click();
+			editFormPage.menuItems().eq( 0 ).click();
 			editFormPage.lookupInput().should( 'have.value', 'Data:Weather_data.tab' );
 
 			editFormPage.addValueButtons().first().click();
@@ -141,7 +141,7 @@ describe( 'wbui2025 string datatypes (tabular-data and geo-shape)', () => {
 			cy.wait( '@commonsSearch' );
 			editFormPage.menu().should( 'exist' );
 
-			editFormPage.menuItems().eq( 11 ).click();
+			editFormPage.menuItems().eq( 2 ).click();
 			editFormPage.valueForms()
 				.last()
 				.find( editFormPage.getLookupInputSelector() )
@@ -272,7 +272,7 @@ describe( 'wbui2025 string datatypes (tabular-data and geo-shape)', () => {
 				.should( 'exist' )
 				.should( 'be.visible' );
 
-			editFormPage.menuItems().eq( 3 ).click();
+			editFormPage.menuItems().eq( 0 ).click();
 			editFormPage.lookupInput().should( 'have.value', 'Data:Hamburg.map' );
 
 			editFormPage.addValueButtons().first().click();
@@ -290,7 +290,7 @@ describe( 'wbui2025 string datatypes (tabular-data and geo-shape)', () => {
 			cy.wait( '@commonsSearch' );
 			editFormPage.menu().should( 'exist' );
 
-			editFormPage.menuItems().eq( 9 ).click();
+			editFormPage.menuItems().eq( 1 ).click();
 			editFormPage.valueForms()
 				.last()
 				.find( editFormPage.getLookupInputSelector() )

cypress/support/pageObjects/EditStatementFormPage.ts

@@ -79,7 +79,7 @@ export class EditStatementFormPage {
 	}
 
 	public menuItems(): Chainable {
-		return cy.get( EditStatementFormPage.SELECTORS.MENU_ITEM );
+		return cy.get( EditStatementFormPage.SELECTORS.MENU_ITEM ).filter( ':visible' );
 	}
 
 	public references(): Chainable {

repo/includes/RepoHooks.php

@@ -1018,6 +1018,7 @@ public function onResourceLoaderRegisterModules( $rl ): void {
 					'resources/wikibase.wbui2025/store/parsedValueStore.js',
 					'resources/wikibase.wbui2025/store/savedStatementsStore.js',
 					'resources/wikibase.wbui2025/store/serverRenderedHtml.js',
+					'resources/wikibase.wbui2025/store/snakValueStrategies.js',
 					[
 						'name' => 'resources/wikibase.wbui2025/icons.json',
 						'callback' => CodexModule::getIcons( ... ),

repo/resources/wikibase.wbui2025/api/commons.js

@@ -10,7 +10,7 @@ const {
 	tabularDataStorageApiEndpointUrl,
 	geoShapeStorageApiEndpointUrl
 } = require( '../repoSettings.json' );
-const { foreignApi } = require( './api.js' );
+const { api, foreignApi } = require( './api.js' );
 const tabularDataSearchTerm = 'contentmodel:Tabular.JsonConfig';
 const geoShapeDataSearchTerm = 'contentmodel:Map.JsonConfig';
 
@@ -51,21 +51,37 @@ const searchGeoShapes = function ( searchTerm, offset = 0 ) {
 };
 
 /**
- * Generic search function that routes to appropriate search method based on datatype
+ * Search the repo for entities with a matching label
  *
- * @param {string} datatype The datatype to search for
- * @param {string} searchTerm The search term
- * @param {number} offset Optional result offset for pagination
- * @return {Promise<Object>} Promise resolving to search results
+ * @param {string} searchTerm
+ * @param {string} entityType
+ * @returns {Promise<*>}
+ */
+const searchForEntities = async function ( searchTerm, entityType ) {
+	return api.get( api.assertCurrentUser( {
+		action: 'wbsearchentities',
+		search: searchTerm,
+		type: entityType,
+		language: mw.config.get( 'wgUserLanguage' )
+	} ) ).then( ( response ) => response.search );
+};
+
+/**
+ * Transform entity search results into menu items format
+ *
+ * @param {Array} searchResults Array of search results from API
+ * @return {Array} Array of menu items with label, value, and description
  */
-const searchByDatatype = function ( datatype, searchTerm, offset = 0 ) {
-	if ( datatype === 'tabular-data' ) {
-		return searchTabularData( searchTerm, offset );
-	} else if ( datatype === 'geo-shape' ) {
-		return searchGeoShapes( searchTerm, offset );
+const transformEntitySearchResults = function ( searchResults ) {
+	if ( !searchResults || searchResults.length === 0 ) {
+		return [];
 	}
 
-	throw new Error( `Unsupported datatype: ${ datatype }` );
+	return searchResults.map( ( result ) => ( {
+		label: result.label,
+		value: result.id,
+		description: result.description
+	} ) );
 };
 
 /**
@@ -87,8 +103,9 @@ const transformSearchResults = function ( searchResults ) {
 };
 
 module.exports = {
+	searchForEntities,
 	searchTabularData,
 	searchGeoShapes,
-	searchByDatatype,
-	transformSearchResults
+	transformSearchResults,
+	transformEntitySearchResults
 };

repo/resources/wikibase.wbui2025/api/editEntity.js

@@ -13,13 +13,14 @@ const updateStatements = async function ( entityId, statements ) {
 };
 
 /**
+ * @param {string} generate
  * @param {Object} dataValue
  * @param {string|null} propertyId
  */
-const renderSnakValueHtml = async function ( dataValue, propertyId = null ) {
+const renderSnakValue = async function ( generate, dataValue, propertyId = null ) {
 	const params = {
 		action: 'wbformatvalue',
-		generate: 'text/html; disposition=verbose-preview',
+		generate: generate,
 		datavalue: JSON.stringify( dataValue )
 	};
 
@@ -29,7 +30,22 @@ const renderSnakValueHtml = async function ( dataValue, propertyId = null ) {
 
 	const fetchResult = await api.get( params );
 	return fetchResult.result;
+};
 
+/**
+ * @param {Object} dataValue
+ * @param {string|null} propertyId
+ */
+const renderSnakValueHtml = async function ( dataValue, propertyId = null ) {
+	return renderSnakValue( 'text/html; disposition=verbose-preview', dataValue, propertyId );
+};
+
+/**
+ * @param {Object} dataValue
+ * @param {string|null} propertyId
+ */
+const renderSnakValueText = async function ( dataValue, propertyId = null ) {
+	return renderSnakValue( 'text/plain', dataValue, propertyId );
 };
 
 const renderPropertyLinkHtml = async function ( propertyId ) {
@@ -44,18 +60,17 @@ const renderPropertyLinkHtml = async function ( propertyId ) {
 /**
  * Parse a given input into a full data value.
  *
- * @param {string} propertyId
  * @param {string} input
+ * @param {Object} parseOptions
  * @returns {Promise<Object|null>} A data value object (with "type" and "value" keys),
  * or null if the input could not be parsed successfully.
  */
-const parseValue = async function ( propertyId, input ) {
+const parseValue = async function ( input, parseOptions = {} ) {
 	try {
-		const { results } = await api.get( {
+		const { results } = await api.get( Object.assign( {
 			action: 'wbparsevalue',
-			property: propertyId,
 			values: [ input ]
-		} );
+		}, parseOptions ) );
 		return results.find( ( result ) => result.raw === input );
 	} catch ( e ) {
 		return null;
@@ -65,6 +80,7 @@ const parseValue = async function ( propertyId, input ) {
 module.exports = {
 	updateStatements,
 	renderSnakValueHtml,
+	renderSnakValueText,
 	renderPropertyLinkHtml,
 	parseValue
 };