Collection: hide children of collection until active child (#20392)

* remove use of modals in collections

* add parent path to support absolute path generation

* add note

* make tree load more minimalistic

* set type and expand inherited styles

* also set title

* Update src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts

Co-authored-by: Copilot <[email protected]>

* create actions should not open as modal

* remove unused import

* fix router getActivePath

* make expand open the collection

* setTargetTakeSize to low when Collection parent

* expose typeUnique

* fix opening collection

* remove log

* active manager

* export

* impl active manager

* prepare for search param redirects

* fixed collapse feature

* set routes to undefined

* preserveQuery

* ensureSlash

* make a hard redirect for collections

* only if anscenstors are present in data.

* not full match anyway

* only forceShow on hasCollection

* remove umb-section-sidebar-context-menu

* rename to isMenu

* Update src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-split-view.element.ts

Co-authored-by: Copilot <[email protected]>

* Update src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.context.ts

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor.element.ts

@@ -115,7 +115,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 	private _hasRootGroups = false;
 
 	@state()
-	private _routes: UmbRoute[] = [];
+	private _routes?: UmbRoute[];
 
 	@state()
 	private _tabs?: Array<UmbPropertyTypeContainerMergedModel>;

src/Umbraco.Web.UI.Client/src/packages/core/router/route/route.context.ts

@@ -42,7 +42,7 @@ export class UmbRouteContext extends UmbContextBase {
 		return this.#basePath.getValue();
 	}
 	getActivePath() {
-		return this.getBasePath() + '/' + this.#activeLocalPath;
+		return this.getBasePath() + '/' + this.#activeLocalPath.getValue();
 	}
 
 	public registerModal(registration: UmbModalRouteRegistration) {

src/Umbraco.Web.UI.Client/src/packages/core/tree/active-manager/index.ts

@@ -0,0 +1 @@
+export * from './tree-active-manager.js';

src/Umbraco.Web.UI.Client/src/packages/core/tree/active-manager/tree-active-manager.test.ts

@@ -0,0 +1,68 @@
+import { expect } from '@open-wc/testing';
+import { Observable } from '@umbraco-cms/backoffice/external/rxjs';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
+import { UmbTreeItemActiveManager } from './tree-active-manager';
+
+@customElement('test-my-controller-host')
+class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
+
+describe('UmbTreeItemActiveManager', () => {
+	let manager: UmbTreeItemActiveManager;
+	const item = { entityType: 'test', unique: '123' };
+	const item2 = { entityType: 'test', unique: '456' };
+
+	beforeEach(() => {
+		const hostElement = new UmbTestControllerHostElement();
+		manager = new UmbTreeItemActiveManager(hostElement);
+	});
+
+	describe('Public API', () => {
+		describe('properties', () => {
+			it('has an active property', () => {
+				expect(manager).to.have.property('active').to.be.an.instanceOf(Observable);
+			});
+		});
+
+		describe('methods', () => {
+			it('has an isActive method', () => {
+				expect(manager).to.have.property('isActive').that.is.a('function');
+			});
+		});
+	});
+
+	describe('isActive', () => {
+		it('checks if an item is active', (done) => {
+			manager.setActive([item]);
+			const isActive = manager.isActive(item);
+			expect(isActive).to.be.an.instanceOf(Observable);
+			manager.isActive(item).subscribe((value) => {
+				expect(value).to.be.true;
+				done();
+			});
+		});
+	});
+
+	describe('setActive & getActive', () => {
+		it('sets and gets the active state', () => {
+			const active = [item];
+			manager.setActive(active);
+			expect(manager.getActive()).to.deep.equal(active);
+		});
+	});
+
+	describe('removeActiveIfMatch', () => {
+		it('removes the active state', () => {
+			const active = [item];
+			manager.setActive(active);
+			manager.removeActiveIfMatch(active);
+			expect(manager.getActive()).to.deep.equal([]);
+		});
+		it('does not remove the active state if it does not match', () => {
+			const active = [item];
+			manager.setActive(active);
+			manager.removeActiveIfMatch([item2]);
+			expect(manager.getActive()).to.deep.equal([item]);
+		});
+	});
+});

src/Umbraco.Web.UI.Client/src/packages/core/tree/active-manager/tree-active-manager.ts

@@ -0,0 +1,93 @@
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbArrayState, type Observable } from '@umbraco-cms/backoffice/observable-api';
+import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+
+/**
+ * Manages the expansion state of a tree
+ * @exports
+ * @class UmbTreeItemActiveManager
+ * @augments {UmbControllerBase}
+ */
+export class UmbTreeItemActiveManager extends UmbControllerBase {
+	#active = new UmbArrayState<UmbEntityModel>([], (x) => x.entityType + x.unique);
+	readonly active = this.#active.asObservable();
+
+	/**
+	 * Checks if an entity is active
+	 * @param {UmbEntityModel} entity The entity to check
+	 * @returns {Observable<boolean>} True if the entity is active
+	 * @memberof UmbTreeItemActiveManager
+	 */
+	isActive(entity: UmbEntityModel): Observable<boolean> {
+		return this.#active.asObservablePart((entities) => {
+			const index = entities.findIndex((e) => e.entityType === entity.entityType && e.unique === entity.unique);
+			return index === entities.length;
+		});
+	}
+
+	/**
+	 * Checks if an descendant entity is active
+	 * @param {UmbEntityModel} entity The entity to check
+	 * @returns {Observable<boolean>} True if a descendant entity is active
+	 * @memberof UmbTreeItemActiveManager
+	 */
+	hasActiveDescendants(entity: UmbEntityModel): Observable<boolean> {
+		return this.#active.asObservablePart((entities) => {
+			const index = entities.findIndex((e) => e.entityType === entity.entityType && e.unique === entity.unique);
+			return index > -1 && index < entities.length - 1;
+		});
+	}
+	/**
+	 * Checks if an descendant entity is active
+	 * @param {UmbEntityModel} entity The entity to check
+	 * @returns {boolean} True if a descendant entity is active
+	 * @memberof UmbTreeItemActiveManager
+	 */
+	getHasActiveDescendants(entity: UmbEntityModel): boolean {
+		return this.#active.getValue().some((e) => e.entityType === entity.entityType && e.unique === entity.unique);
+	}
+
+	/**
+	 * Sets the active chain state
+	 * @param {Array<UmbEntityModel>} activeChain The active entries.
+	 * @memberof UmbTreeItemActiveManager
+	 * @returns {void}
+	 */
+	setActive(activeChain: Array<UmbEntityModel>): void {
+		this.#active.setValue(activeChain);
+	}
+
+	/**
+	 * Sets the active chain state
+	 * @param {Array<UmbEntityModel>} activeChain The active entries.
+	 * @memberof UmbTreeItemActiveManager
+	 * @returns {void}
+	 */
+	removeActiveIfMatch(activeChain: Array<UmbEntityModel>): void {
+		const currentChain = this.#active.getValue();
+		// test if new chain and current chain matches:
+		// Test length for a start:
+		if (activeChain.length !== currentChain.length) return;
+		// test content next:
+		for (let i = 0; i < activeChain.length; i++) {
+			if (
+				activeChain[i].entityType !== currentChain[i].entityType ||
+				activeChain[i].unique !== currentChain[i].unique
+			) {
+				return;
+			}
+		}
+		// TODO: Problem!!!! we are removing the active state, but something is loading that wants to add it...
+		// then we can remove it all:
+		this.#active.setValue([]);
+	}
+
+	/**
+	 * Gets the expansion state
+	 * @memberof UmbTreeItemActiveManager
+	 * @returns {Array<UmbEntityModel>} The expansion state
+	 */
+	getActive(): Array<UmbEntityModel> {
+		return this.#active.getValue();
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.context.ts

@@ -14,6 +14,7 @@ import { UmbDeprecation, UmbSelectionManager, debounce } from '@umbraco-cms/back
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry, type ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbTreeItemActiveManager } from '../active-manager/tree-active-manager.js';
 
 export class UmbDefaultTreeContext<
 		TreeItemType extends UmbTreeItemModel,
@@ -53,6 +54,8 @@ export class UmbDefaultTreeContext<
 		targetPaginationManager: this.targetPagination,
 	});
 
+	readonly activeManager = new UmbTreeItemActiveManager(this);
+
 	#manifest?: ManifestTree;
 	#repository?: UmbTreeRepository<TreeItemType, TreeRootType>;
 

src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.element.ts

@@ -47,6 +47,9 @@ export class UmbDefaultTreeElement extends UmbLitElement {
 	@property({ type: Boolean, attribute: false })
 	foldersOnly?: boolean = false;
 
+	@property({ type: Boolean, attribute: false })
+	isMenu?: boolean = false;
+
 	@property({ attribute: false })
 	selectableFilter: (item: UmbTreeItemModelBase) => boolean = () => true;
 
@@ -165,7 +168,11 @@ export class UmbDefaultTreeElement extends UmbLitElement {
 		return html`
 			<umb-tree-item
 				.entityType=${this._treeRoot.entityType}
-				.props=${{ hideActions: this.hideTreeItemActions, item: this._treeRoot }}></umb-tree-item>
+				.props=${{
+					hideActions: this.hideTreeItemActions,
+					item: this._treeRoot,
+					isMenu: this.isMenu,
+				}}></umb-tree-item>
 		`;
 	}
 
@@ -180,7 +187,7 @@ export class UmbDefaultTreeElement extends UmbLitElement {
 					(item) => html`
 						<umb-tree-item
 							.entityType=${item.entityType}
-							.props=${{ hideActions: this.hideTreeItemActions, item }}></umb-tree-item>
+							.props=${{ hideActions: this.hideTreeItemActions, item, isMenu: this.isMenu }}></umb-tree-item>
 					`,
 				)}
 				${this.#renderLoadNextButton()}

src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts

@@ -1,3 +1,4 @@
+export * from './active-manager/index.js';
 export * from './components/index.js';
 export * from './constants.js';
 export * from './data/index.js';