structure manager refactor implementation

src/Umbraco.Web.UI.Client/examples/workspace-view-hint/README.md

@@ -0,0 +1,3 @@
+# Workspace View Badge Example
+
+This example demonstrates the essence of the Workspace View Navigation Context. And how to append a Status that will be displayed as a badge on the Workspace Views Tab Navigation.

src/Umbraco.Web.UI.Client/examples/workspace-view-hint/hint-workspace-view.ts

@@ -0,0 +1,84 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import { UMB_WORKSPACE_VIEW_CONTEXT } from '@umbraco-cms/backoffice/workspace';
+import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document';
+
+@customElement('example-hint-workspace-view')
+export class ExampleHintWorkspaceView extends UmbElementMixin(LitElement) {
+	//
+
+	async onClick() {
+		/*
+		const context = await this.getContext(UMB_WORKSPACE_VIEW_NAVIGATION_CONTEXT);
+		if (!context) {
+			throw new Error('Could not find the context');
+		}
+		const view = await context.getViewContext('example.workspaceView.hint');
+		*/
+
+		/*
+		const view = await this.getContext(UMB_WORKSPACE_VIEW_CONTEXT);
+		if (!view) {
+			throw new Error('Could not find the view');
+		}
+
+		if (view.hints.has('exampleHintFromToggleAction')) {
+			view.hints.removeOne('exampleHintFromToggleAction');
+		} else {
+			view.hints.addOne({
+				unique: 'exampleHintFromToggleAction',
+				text: 'Hi',
+				color: 'invalid',
+				weight: 100,
+			});
+		}
+			*/
+
+		const workspace = await this.getContext(UMB_DOCUMENT_WORKSPACE_CONTEXT);
+		if (!workspace) {
+			throw new Error('Could not find the workspace');
+		}
+
+		if (workspace.hints.has('exampleHintFromToggleAction')) {
+			workspace.hints.removeOne('exampleHintFromToggleAction');
+		} else {
+			workspace.hints.addOne({
+				unique: 'exampleHintFromToggleAction',
+				path: ['Umb.WorkspaceView.Document.Edit', 'root'],
+				text: 'Hi',
+				color: 'invalid',
+				weight: 100,
+			});
+		}
+	}
+
+	override render() {
+		return html`
+			<uui-box class="uui-text">
+				<h1 class="uui-h2" style="margin-top: var(--uui-size-layout-1);">See the hint on this views tab</h1>
+				<p>This is toggle on/off via this button:</p>
+				<uui-button type="button" @click=${this.onClick} look="primary" color="positive">Toggle hint</uui-button>
+			</uui-box>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1);
+			}
+		`,
+	];
+}
+
+export { ExampleHintWorkspaceView as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-hint-workspace-view': ExampleHintWorkspaceView;
+	}
+}

src/Umbraco.Web.UI.Client/examples/workspace-view-hint/index.ts

@@ -0,0 +1,22 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'workspaceView',
+		name: 'Example Badge Workspace View',
+		alias: 'example.workspaceView.hint',
+		element: () => import('./hint-workspace-view.js'),
+		weight: 900,
+		meta: {
+			label: 'View with badge',
+			pathname: 'badge',
+			icon: 'icon-lab',
+		},
+		conditions: [
+			{
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
+				match: 'Umb.Workspace.Document',
+			},
+		],
+	},
+];

src/Umbraco.Web.UI.Client/package.json

@@ -52,6 +52,7 @@
 		"./extension-registry": "./dist-cms/packages/core/extension-registry/index.js",
 		"./health-check": "./dist-cms/packages/health-check/index.js",
 		"./help": "./dist-cms/packages/help/index.js",
+		"./hint": "./dist-cms/packages/core/hint/index.js",
 		"./http-client": "./dist-cms/packages/core/http-client/index.js",
 		"./icon": "./dist-cms/packages/core/icon-registry/index.js",
 		"./id": "./dist-cms/packages/core/id/index.js",
@@ -116,6 +117,7 @@
 		"./utils": "./dist-cms/packages/core/utils/index.js",
 		"./validation": "./dist-cms/packages/core/validation/index.js",
 		"./variant": "./dist-cms/packages/core/variant/index.js",
+		"./view": "./dist-cms/packages/core/view/index.js",
 		"./webhook": "./dist-cms/packages/webhook/index.js",
 		"./workspace": "./dist-cms/packages/core/workspace/index.js",
 		"./external/backend-api": "./dist-cms/packages/core/backend-api/index.js",

src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.test.ts

@@ -44,6 +44,13 @@ describe('ArrayState', () => {
 		});
 	});
 
+	it('getHasOne method, return true when key exists', () => {
+		expect(subject.getHasOne('2')).to.be.true;
+	});
+	it('getHasOne method, return false when key does not exists', () => {
+		expect(subject.getHasOne('1337')).to.be.false;
+	});
+
 	it('filter method, removes anything that is not true of the given predicate method', (done) => {
 		const expectedData = [initialData[0], initialData[2]];
 

src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts

@@ -48,10 +48,10 @@ export class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
 	 * @param {T} data - The next data for this state to hold.
 	 * @description - Set the data of this state, if sortBy has been defined for this state the data will be sorted before set. If data is different than current this will trigger observations to update.
 	 * @example <caption>Example change the data of a state</caption>
-	 * const myState = new UmbArrayState('Good morning');
-	 * // myState.value is equal 'Good morning'.
-	 * myState.setValue('Goodnight')
-	 * // myState.value is equal 'Goodnight'.
+	 * const myState = new UmbArrayState(['Good morning']);
+	 * // myState.value is equal ['Good morning'].
+	 * myState.setValue(['Goodnight'])
+	 * // myState.value is equal ['Goodnight'].
 	 */
 	override setValue(value: T[]) {
 		if (value && this.#sortMethod) {
@@ -61,6 +61,19 @@ export class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
 		}
 	}
 
+	/**
+	 * @function clear
+	 * @description - Set the data of this state to an empty array.
+	 * @example <caption>Example clearing the data of a state</caption>
+	 * const myState = new UmbArrayState(['Good morning']);
+	 * // myState.value is equal ['Good morning'].
+	 * myState.clear()
+	 * // myState.value is equal [].
+	 */
+	clear() {
+		super.setValue([]);
+	}
+
 	/**
 	 * @function getHasOne
 	 * @param {U} unique - the unique value to compare with.

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context-token.ts

@@ -1,7 +1,7 @@
 import type { UmbBlockGridManagerContext } from './block-grid-manager.context.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
-// TODO: Make discriminator method for this:
+// TODO: Make discriminator method for this: (Aim to do this for v.17) [NL]
 export const UMB_BLOCK_GRID_MANAGER_CONTEXT = new UmbContextToken<
 	UmbBlockGridManagerContext,
 	UmbBlockGridManagerContext

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context-token.ts

@@ -1,5 +1,5 @@
 import type { UmbBlockGridEntriesContext } from './block-grid-entries.context.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
-// TODO: Make discriminator method for this:
+// TODO: Make discriminator method for this: (Aim to do this for v.17) [NL]
 export const UMB_BLOCK_GRID_ENTRIES_CONTEXT = new UmbContextToken<UmbBlockGridEntriesContext>('UmbBlockEntriesContext');

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context-token.ts

@@ -1,5 +1,5 @@
 import type { UmbBlockGridEntryContext } from './block-grid-entry.context.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
-// TODO: Make discriminator method for this:
+// TODO: Make discriminator method for this: (Aim to do this for v.17) [NL]
 export const UMB_BLOCK_GRID_ENTRY_CONTEXT = new UmbContextToken<UmbBlockGridEntryContext>('UmbBlockEntryContext');

src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entries.context-token.ts

@@ -1,5 +1,5 @@
 import type { UmbBlockListEntriesContext } from './block-list-entries.context.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
-// TODO: Make discriminator method for this:
+// TODO: Make discriminator method for this: (Aim to do this for v.17) [NL]
 export const UMB_BLOCK_LIST_ENTRIES_CONTEXT = new UmbContextToken<UmbBlockListEntriesContext>('UmbBlockEntriesContext');

src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context-token.ts

@@ -1,7 +1,7 @@
 import type { UmbBlockListManagerContext } from './block-list-manager.context.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
-// TODO: Make discriminator method for this:
+// TODO: Make discriminator method for this: (Aim to do this for v.16)
 export const UMB_BLOCK_LIST_MANAGER_CONTEXT = new UmbContextToken<
 	UmbBlockListManagerContext,
 	UmbBlockListManagerContext

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

@@ -216,6 +216,7 @@ export class UmbPropertyEditorUIBlockListElement
 			this.#gotPropertyContext(context);
 		});
 
+		// TODO: Why is this logic not part of the Block Grid and RTE Editors? [NL]
 		// Observe Blocks and clean up validation messages for content/settings that are not in the block list anymore:
 		this.observe(
 			this.#managerContext.layouts,
@@ -224,6 +225,7 @@ export class UmbPropertyEditorUIBlockListElement
 				const contentKeys = layouts.map((x) => x.contentKey);
 				this.#validationContext.messages.getMessagesOfPathAndDescendant('$.contentData').forEach((message) => {
 					// get the KEY from this string: $.contentData[?(@.key == 'KEY')]
+					// TODO: Investigate if this is missing a part to just get the [] part of the path. Cause couldn't there be a sub path inside of this. [NL]
 					const key = extractJsonQueryProps(message.path).key;
 					if (key && contentKeys.indexOf(key) === -1) {
 						validationMessagesToRemove.push(message.key);
@@ -232,6 +234,7 @@ export class UmbPropertyEditorUIBlockListElement
 
 				const settingsKeys = layouts.map((x) => x.settingsKey).filter((x) => x !== undefined) as string[];
 				this.#validationContext.messages.getMessagesOfPathAndDescendant('$.settingsData').forEach((message) => {
+					// TODO: Investigate if this is missing a part to just get the [] part of the path. Cause couldn't there be a sub path inside of this. [NL]
 					// get the key from this string: $.settingsData[?(@.key == 'KEY')]
 					const key = extractJsonQueryProps(message.path).key;
 					if (key && settingsKeys.indexOf(key) === -1) {

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context-token.ts

@@ -1,5 +1,5 @@
 import type { UmbBlockRteEntriesContext } from './block-rte-entries.context.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
-// TODO: Make discriminator method for this:
+// TODO: Make discriminator method for this: (Aim to do this for v.17) [NL]
 export const UMB_BLOCK_RTE_ENTRIES_CONTEXT = new UmbContextToken<UmbBlockRteEntriesContext>('UmbBlockEntriesContext');

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context-token.ts

@@ -1,6 +1,7 @@
 import type { UmbBlockElementPropertyDatasetContext } from './block-element-property-dataset.context.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
+// TODO: Use a discriminator (Aim to do this for v.17) [NL]
 export const UMB_BLOCK_ELEMENT_PROPERTY_DATASET_CONTEXT = new UmbContextToken<UmbBlockElementPropertyDatasetContext>(
 	'UmbPropertyDatasetContext',
 );

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts

@@ -4,7 +4,7 @@ import { css, html, customElement, state, repeat, nothing } from '@umbraco-cms/b
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
+import type { UmbPropertyTypeContainerMergedModel } from '@umbraco-cms/backoffice/content-type';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace';
 
 /**
@@ -20,10 +20,10 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 	private _hasRootGroups = false;
 
 	@state()
-	private _tabs?: Array<UmbPropertyTypeContainerModel>;
+	private _tabs?: Array<UmbPropertyTypeContainerMergedModel>;
 
 	@state()
-	private _activeTabId?: string | null | undefined;
+	private _activeTabKey?: string | null | undefined;
 
 	//@state()
 	//private _activeTabName?: string | null | undefined;
@@ -36,7 +36,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 
 		this.#tabsStructureHelper.setIsRoot(true);
 		this.#tabsStructureHelper.setContainerChildType('Tab');
-		this.observe(this.#tabsStructureHelper.mergedContainers, (tabs) => {
+		this.observe(this.#tabsStructureHelper.childContainers, (tabs) => {
 			this._tabs = tabs;
 			this.#checkDefaultTabName();
 		});
@@ -68,20 +68,20 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 		if (!this._tabs || !this.#blockWorkspace) return;
 
 		// Find the default tab to grab:
-		if (this._activeTabId === undefined) {
+		if (this._activeTabKey === undefined) {
 			if (this._hasRootGroups) {
 				//this._activeTabName = null;
-				this._activeTabId = null;
+				this._activeTabKey = null;
 			} else if (this._tabs.length > 0) {
 				//this._activeTabName = this._tabs[0].name;
-				this._activeTabId = this._tabs[0].id;
+				this._activeTabKey = this._tabs[0].key;
 			}
 		}
 	}
 
-	#setTabName(tabName: string | undefined | null, tabId: string | null | undefined) {
+	#setTabName(tabName: string | undefined | null, tabKey: string | null | undefined) {
 		//this._activeTabName = tabName;
-		this._activeTabId = tabId;
+		this._activeTabKey = tabKey;
 	}
 
 	override render() {
@@ -93,7 +93,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 							? html`
 									<uui-tab
 										label="Content"
-										.active=${null === this._activeTabId}
+										.active=${null === this._activeTabKey}
 										@click=${() => this.#setTabName(null, null)}
 										>Content</uui-tab
 									>
@@ -105,19 +105,19 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 							(tab) => {
 								return html`<uui-tab
 									label=${tab.name ?? 'Unnamed'}
-									.active=${tab.id === this._activeTabId}
-									@click=${() => this.#setTabName(tab.name, tab.id)}
+									.active=${tab.key === this._activeTabKey}
+									@click=${() => this.#setTabName(tab.name, tab.key)}
 									>${tab.name}</uui-tab
 								>`;
 							},
 						)}
 					</uui-tab-group>`
 				: nothing}
-			${this._activeTabId !== undefined
+			${this._activeTabKey !== undefined
 				? html`<umb-block-workspace-view-edit-tab
 						.managerName=${'content'}
 						.hideSingleGroup=${true}
-						.containerId=${this._activeTabId}>
+						.containerId=${this._activeTabKey}>
 					</umb-block-workspace-view-edit-tab>`
 				: nothing}
 		`;

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts

@@ -1,7 +1,7 @@
 import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context-token.js';
 import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { UmbContentTypeModel, UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
+import type { UmbContentTypeModel, UmbPropertyTypeContainerMergedModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
@@ -42,7 +42,7 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 	hideSingleGroup = false;
 
 	@state()
-	private _groups: Array<UmbPropertyTypeContainerModel> = [];
+	private _groups: Array<UmbPropertyTypeContainerMergedModel> = [];
 
 	@state()
 	private _hasProperties = false;
@@ -60,7 +60,7 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 		if (!this.#blockWorkspace || !this.#managerName) return;
 		this.#groupStructureHelper.setStructureManager(this.#blockWorkspace[this.#managerName].structure);
 		this.observe(
-			this.#groupStructureHelper.mergedContainers,
+			this.#groupStructureHelper.childContainers,
 			(groups) => {
 				this._groups = groups;
 			},
@@ -89,18 +89,18 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 				? this.renderGroup(this._groups[0])
 				: repeat(
 						this._groups,
-						(group) => group.id,
+						(group) => group.key,
 						(group) => html` <uui-box .headline=${group.name}>${this.renderGroup(group)}</uui-box>`,
 					)}
 		`;
 	}
 
-	renderGroup(group: UmbPropertyTypeContainerModel) {
+	renderGroup(group: UmbPropertyTypeContainerMergedModel) {
 		return html`
 			<umb-block-workspace-view-edit-properties
 				.managerName=${this.#managerName}
 				data-mark="property-group:${group.name}"
-				.containerId=${group.id}></umb-block-workspace-view-edit-properties>
+				.containerId=${group.key}></umb-block-workspace-view-edit-properties>
 		`;
 	}