Wired up the Dynamic Root extension types in the UI

We don't need to call `dynamicRootRepository.getQuerySteps()` API,
as the manifest should contain all the custom Dynamic Root query steps.

src/Umbraco.Web.UI.Client/src/packages/dynamic-root/modals/dynamic-root-origin-picker-modal.element.ts

@@ -1,44 +1,59 @@
 import { UmbDocumentPickerContext } from '../../documents/documents/components/input-document/input-document.context.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, map } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, map, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { type UmbTreePickerDynamicRoot } from '@umbraco-cms/backoffice/components';
-import { type DocumentItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import type { UmbTreePickerDynamicRoot } from '@umbraco-cms/backoffice/components';
+import { type ManifestDynamicRootOrigin, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 
 @customElement('umb-dynamic-root-origin-picker-modal')
 export class UmbDynamicRootOriginPickerModalModalElement extends UmbModalBaseElement {
+	@state()
+	private _origins: Array<ManifestDynamicRootOrigin> = [];
+
+	#documentPickerContext = new UmbDocumentPickerContext(this);
+
 	constructor() {
 		super();
 
 		this.#documentPickerContext.max = 1;
 
-		this.observe(this.#documentPickerContext.selectedItems, (selectedItems) => this.#selectedDocument(selectedItems));
+		this.observe(
+			umbExtensionsRegistry.extensionsOfType('dynamicRootOrigin'),
+			(origins: Array<ManifestDynamicRootOrigin>) => {
+				this._origins = origins;
+			},
+		);
 	}
 
-	#choose(alias: string) {
-		this.#submit({
-			originAlias: alias,
-		});
+	#choose(item: ManifestDynamicRootOrigin) {
+		switch (item.meta.originAlias) {
+			// NOTE: Edge-case. Currently this is the only one that uses a document picker,
+			// but other custom origins may want other configuration options. [LK:2024-01-25]
+			case 'ByKey':
+				this.#openDocumentPicker(item.meta.originAlias);
+				break;
+			default:
+				this.#submit({ originAlias: item.meta.originAlias });
+				break;
+		}
 	}
 
 	#close() {
 		this.modalContext?.reject();
 	}
 
-	#documentPickerContext = new UmbDocumentPickerContext(this);
-
-	#openDocumentPicker() {
-		this.#documentPickerContext.openPicker({
-			hideTreeRoot: true,
-		});
-	}
-
-	#selectedDocument(selectedItems: Array<DocumentItemResponseModel>) {
-		if (selectedItems.length !== 1) return;
-		this.#submit({
-			originAlias: 'ByKey',
-			originKey: selectedItems[0].id,
-		});
+	#openDocumentPicker(originAlias: string) {
+		this.#documentPickerContext
+			.openPicker({
+				hideTreeRoot: true,
+			})
+			.then(() => {
+				const selectedItems = this.#documentPickerContext.getSelection();
+				if (selectedItems.length !== 1) return;
+				this.#submit({
+					originAlias,
+					originKey: selectedItems[0],
+				});
+			});
 	}
 
 	#submit(value: UmbTreePickerDynamicRoot) {
@@ -46,50 +61,17 @@ export class UmbDynamicRootOriginPickerModalModalElement extends UmbModalBaseEle
 		this.modalContext?.submit();
 	}
 
-	#originButtons = [
-		{
-			alias: 'Root',
-			title: this.localize.term('dynamicRoot_originRootTitle'),
-			description: this.localize.term('dynamicRoot_originRootDesc'),
-			action: () => this.#choose('Root'),
-		},
-		{
-			alias: 'Parent',
-			title: this.localize.term('dynamicRoot_originParentTitle'),
-			description: this.localize.term('dynamicRoot_originParentDesc'),
-			action: () => this.#choose('Parent'),
-		},
-		{
-			alias: 'Current',
-			title: this.localize.term('dynamicRoot_originCurrentTitle'),
-			description: this.localize.term('dynamicRoot_originCurrentDesc'),
-			action: () => this.#choose('Current'),
-		},
-		{
-			alias: 'Site',
-			title: this.localize.term('dynamicRoot_originSiteTitle'),
-			description: this.localize.term('dynamicRoot_originSiteDesc'),
-			action: () => this.#choose('Site'),
-		},
-		{
-			alias: 'ByKey',
-			title: this.localize.term('dynamicRoot_originByKeyTitle'),
-			description: this.localize.term('dynamicRoot_originByKeyDesc'),
-			action: () => this.#openDocumentPicker(),
-		},
-	];
-
 	render() {
 		return html`
 			<umb-body-layout headline="${this.localize.term('dynamicRoot_pickDynamicRootOriginTitle')}">
 				<div id="main">
 					<uui-box>
 						${map(
-							this.#originButtons,
-							(btn) => html`
-								<uui-button @click=${btn.action} look="placeholder" label="${btn.title}">
-									<h3>${btn.title}</h3>
-									<p>${btn.description}</p>
+							this._origins,
+							(item) => html`
+								<uui-button @click=${() => this.#choose(item)} look="placeholder" label="${ifDefined(item.meta.label)}">
+									<h3>${item.meta.label}</h3>
+									<p>${item.meta.description}</p>
 								</uui-button>
 							`,
 						)}
@@ -103,7 +85,6 @@ export class UmbDynamicRootOriginPickerModalModalElement extends UmbModalBaseEle
 	}
 
 	static styles = [
-		UmbTextStyles,
 		css`
 			uui-box > uui-button {
 				display: block;

src/Umbraco.Web.UI.Client/src/packages/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.ts

@@ -1,43 +1,36 @@
 import { UmbDocumentTypePickerContext } from '../../documents/document-types/components/input-document-type/input-document-type.context.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, map } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, map, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { type UmbTreePickerDynamicRootQueryStep } from '@umbraco-cms/backoffice/components';
-import { UmbDynamicRootRepository } from '@umbraco-cms/backoffice/dynamic-root';
+import type { UmbTreePickerDynamicRootQueryStep } from '@umbraco-cms/backoffice/components';
+import { type ManifestDynamicRootQueryStep, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 
 @customElement('umb-dynamic-root-query-step-picker-modal')
 export class UmbDynamicRootQueryStepPickerModalModalElement extends UmbModalBaseElement {
-	#dynamicRootRepository: UmbDynamicRootRepository;
+	@state()
+	private _querySteps: Array<ManifestDynamicRootQueryStep> = [];
+
+	#documentTypePickerContext = new UmbDocumentTypePickerContext(this);
 
 	constructor() {
 		super();
 
-		this.#dynamicRootRepository = new UmbDynamicRootRepository(this);
+		this.observe(
+			umbExtensionsRegistry.extensionsOfType('dynamicRootQueryStep'),
+			(querySteps: Array<ManifestDynamicRootQueryStep>) => {
+				this._querySteps = querySteps;
+			},
+		);
 	}
 
-	// TODO: LK to read up on this: https://lit.dev/docs/components/lifecycle/ [LK]
-	protected firstUpdated(): void {
-		this.#getDynamicRootQuerySteps();
-	}
-
-	async #getDynamicRootQuerySteps() {
-		const { data } = await this.#dynamicRootRepository.getQuerySteps();
-		console.log('steps', data);
+	#choose(item: ManifestDynamicRootQueryStep) {
+		this.#openDocumentTypePicker(item.meta.queryStepAlias);
 	}
 
 	#close() {
 		this.modalContext?.reject();
 	}
 
-	#documentTypePickerContext = new UmbDocumentTypePickerContext(this);
-
-	#openCustom() {
-		this.#submit({
-			alias: 'custom',
-			anyOfDocTypeKeys: [],
-		});
-	}
-
 	#openDocumentTypePicker(alias: string) {
 		this.#documentTypePickerContext
 			.openPicker({
@@ -57,52 +50,17 @@ export class UmbDynamicRootQueryStepPickerModalModalElement extends UmbModalBase
 		this.modalContext?.submit();
 	}
 
-	// TODO: This needs to be replaced with a lookup from the manifests, e.g. new extension type `dynamicRoot` [LK]
-	#queryStepButtons = [
-		{
-			alias: 'NearestAncestorOrSelf',
-			title: this.localize.term('dynamicRoot_queryStepNearestAncestorOrSelfTitle'),
-			description: this.localize.term('dynamicRoot_queryStepNearestAncestorOrSelfDesc'),
-			action: () => this.#openDocumentTypePicker('NearestAncestorOrSelf'),
-		},
-		{
-			alias: 'FurthestAncestorOrSelf',
-			title: this.localize.term('dynamicRoot_queryStepFurthestAncestorOrSelfTitle'),
-			description: this.localize.term('dynamicRoot_queryStepFurthestAncestorOrSelfDesc'),
-			action: () => this.#openDocumentTypePicker('FurthestAncestorOrSelf'),
-		},
-		{
-			alias: 'NearestDescendantOrSelf',
-			title: this.localize.term('dynamicRoot_queryStepNearestDescendantOrSelfTitle'),
-			description: this.localize.term('dynamicRoot_queryStepNearestDescendantOrSelfDesc'),
-			action: () => this.#openDocumentTypePicker('NearestDescendantOrSelf'),
-		},
-		{
-			alias: 'FurthestDescendantOrSelf',
-			title: this.localize.term('dynamicRoot_queryStepFurthestDescendantOrSelfTitle'),
-			description: this.localize.term('dynamicRoot_queryStepFurthestDescendantOrSelfDesc'),
-			action: () => this.#openDocumentTypePicker('FurthestDescendantOrSelf'),
-		},
-		// TODO: Remove `custom` once the above are implemented. [LK]
-		{
-			alias: 'custom',
-			title: this.localize.term('dynamicRoot_queryStepCustomTitle'),
-			description: this.localize.term('dynamicRoot_queryStepCustomDesc'),
-			action: () => this.#openCustom(),
-		},
-	];
-
 	render() {
 		return html`
 			<umb-body-layout headline="${this.localize.term('dynamicRoot_pickDynamicRootQueryStepTitle')}">
 				<div id="main">
 					<uui-box>
 						${map(
-							this.#queryStepButtons,
-							(btn) => html`
-								<uui-button @click=${btn.action} look="placeholder" label="${btn.title}">
-									<h3>${btn.title}</h3>
-									<p>${btn.description}</p>
+							this._querySteps,
+							(item) => html`
+								<uui-button @click=${() => this.#choose(item)} look="placeholder" label="${ifDefined(item.meta.label)}">
+									<h3>${item.meta.label}</h3>
+									<p>${item.meta.description}</p>
 								</uui-button>
 							`,
 						)}

src/Umbraco.Web.UI.Client/src/packages/dynamic-root/repository/dynamic-root.repository.ts

@@ -1,5 +1,5 @@
 import { UmbDynamicRootServerDataSource } from './dynamic-root.server.data.js';
-import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbBaseController } from '@umbraco-cms/backoffice/class-api';
 import type { DynamicRootRequestModel } from '@umbraco-cms/backoffice/backend-api';
 

src/Umbraco.Web.UI.Client/src/packages/dynamic-root/repository/dynamic-root.server.data.ts

@@ -1,4 +1,4 @@
-import { DynamicRootRequestModel, DynamicRootResource } from '@umbraco-cms/backoffice/backend-api';
+import { type DynamicRootRequestModel, DynamicRootResource } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';