test file, udi to key

src/Umbraco.Web.UI.Client/libs/utils/udi-service.ts

@@ -1,3 +1,23 @@
 export function buildUdi(entityType: string, guid: string) {
 	return `umb://${entityType}/${guid.replace(/-/g, '')}`;
 }
+
+export function getKeyFromUdi(udi: string) {
+	if (typeof udi !== 'string') {
+		throw 'udi is not a string';
+	}
+	if (!udi.startsWith('umb://')) {
+		throw 'udi does not start with umb://';
+	}
+	const withoutScheme = udi.substring('umb://'.length);
+	const withoutHost = withoutScheme.substring(withoutScheme.indexOf('/') + 1).trim();
+
+	if (withoutHost.length !== 32) {
+		throw 'udi is not 32 chars';
+	}
+
+	return `${withoutHost.substring(0, 8)}-${withoutHost.substring(8, 12)}-${withoutHost.substring(
+		12,
+		16
+	)}-${withoutHost.substring(16, 20)}-${withoutHost.substring(20)}`;
+}

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts

@@ -146,7 +146,10 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	private _renderItem(link: MultiUrlData, index: number) {
-		return html`<uui-ref-node .name="${link.name || ''}" .detail="${(link.url || '') + (link.queryString || '')}">
+		return html`<uui-ref-node
+			.name="${link.name || ''}"
+			.detail="${(link.url || '') + (link.queryString || '')}"
+			@open="${() => this._openPicker(link, index)}">
 			<uui-icon slot="icon" name="${link.icon || 'umb:link'}"></uui-icon>
 			<uui-action-bar slot="actions">
 				<uui-button @click="${() => this._openPicker(link, index)}" label="Edit link">Edit</uui-button>

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.test.ts

@@ -0,0 +1,18 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbInputMultiUrlPickerElement } from './input-multi-url-picker.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+describe('UmbInputMultiUrlPickerElement', () => {
+	let element: UmbInputMultiUrlPickerElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-input-multi-url-picker></umb-input-multi-url-picker> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbInputMultiUrlPickerElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
+});

src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts

@@ -5,7 +5,7 @@ import { UUIBooleanInputEvent, UUIInputElement } from '@umbraco-ui/uui';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbModalLayoutElement } from '../modal-layout.element';
 import { UmbTreeElement } from '../../../../backoffice/shared/components/tree/tree.element';
-import { buildUdi } from '@umbraco-cms/utils';
+import { buildUdi, getKeyFromUdi } from '@umbraco-cms/utils';
 
 export interface UmbModalLinkPickerData {
 	link: LinkPickerData;
@@ -13,14 +13,14 @@ export interface UmbModalLinkPickerData {
 }
 
 export interface LinkPickerData {
-	icon?: string;
-	name?: string;
-	published?: boolean;
-	queryString?: string;
-	target?: string;
-	trashed?: boolean;
-	udi?: string;
-	url?: string;
+	icon?: string | null;
+	name?: string | null;
+	published?: boolean | null;
+	queryString?: string | null;
+	target?: string | null;
+	trashed?: boolean | null;
+	udi?: string | null;
+	url?: string | null;
 }
 
 export interface LinkPickerConfig {
@@ -70,14 +70,14 @@ export class UmbModalLayoutLinkPickerElement extends UmbModalLayoutElement<UmbMo
 
 	@state()
 	_link: LinkPickerData = {
-		icon: undefined,
-		name: undefined,
+		icon: null,
+		name: null,
 		published: true,
-		queryString: undefined,
-		target: undefined,
+		queryString: null,
+		target: null,
 		trashed: false,
-		udi: undefined,
-		url: undefined,
+		udi: null,
+		url: null,
 	};
 
 	@state()
@@ -100,6 +100,9 @@ export class UmbModalLayoutLinkPickerElement extends UmbModalLayoutElement<UmbMo
 		if (!this.data) return;
 		this._link = this.data?.link;
 		this._layout = this.data?.config;
+
+		if (!this._link.udi) return;
+		this._selectedKey = getKeyFromUdi(this._link.udi);
 	}
 
 	private _handleQueryString() {