diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/members/section-members.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/members/section-members.element.ts
index 7698281d58..6677983e01 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/members/section-members.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/members/section-members.element.ts
@@ -1,13 +1,19 @@
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
+import '../shared/section-trees.element.ts';
+
@customElement('umb-section-members')
export class UmbSectionMembers extends LitElement {
render() {
return html`
- RENDER TREE
- Some main content here
+
+
+
+
+
+
`;
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-trees.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-trees.element.ts
new file mode 100644
index 0000000000..fa6af47959
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-trees.element.ts
@@ -0,0 +1,88 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { map, Subscription, first } from 'rxjs';
+
+import { UmbContextConsumerMixin } from '../../../core/context';
+import { UmbExtensionManifestTree, UmbExtensionRegistry } from '../../../core/extension';
+import { UmbSectionContext } from '../section.context';
+
+import '../../tree/tree.element';
+
+@customElement('umb-section-trees')
+export class UmbSectionTrees extends UmbContextConsumerMixin(LitElement) {
+ static styles = [UUITextStyles];
+
+ @state()
+ private _trees: Array = [];
+
+ private _currentSectionAlias = '';
+
+ private _extensionStore?: UmbExtensionRegistry;
+ private _treesSubscription?: Subscription;
+
+ private _sectionContext?: UmbSectionContext;
+ private _sectionContextSubscription?: Subscription;
+
+ constructor() {
+ super();
+
+ // TODO: wait for more contexts
+ this.consumeContext('umbExtensionRegistry', (_instance: UmbExtensionRegistry) => {
+ this._extensionStore = _instance;
+ this._useTrees();
+ });
+
+ this.consumeContext('umbSectionContext', (context: UmbSectionContext) => {
+ this._sectionContext = context;
+ this._useSectionContext();
+ });
+ }
+
+ private _useSectionContext() {
+ this._sectionContextSubscription?.unsubscribe();
+
+ this._sectionContextSubscription = this._sectionContext?.data.pipe(first()).subscribe((section) => {
+ this._currentSectionAlias = section.alias;
+ this._useTrees();
+ });
+ }
+
+ private _useTrees() {
+ //TODO: Merge streams
+ if (this._extensionStore && this._currentSectionAlias) {
+ this._treesSubscription?.unsubscribe();
+
+ this._treesSubscription = this._extensionStore
+ ?.extensionsOfType('tree')
+ .pipe(
+ map((extensions) =>
+ extensions
+ .filter((extension) => extension.meta.sections.includes(this._currentSectionAlias as string)) // TODO: Why do whe need "as string" here??
+ .sort((a, b) => b.meta.weight - a.meta.weight)
+ )
+ )
+ .subscribe((treeExtensions) => {
+ this._trees = treeExtensions;
+ });
+ }
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ this._treesSubscription?.unsubscribe();
+ this._sectionContextSubscription?.unsubscribe();
+ }
+
+ render() {
+ return html`${this._trees.map((tree) => html``)} `;
+ }
+}
+
+export default UmbSectionTrees;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-section-trees': UmbSectionTrees;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
index 1649044bc5..657ac9f3b5 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
@@ -275,4 +275,27 @@ export const internalManifests: Array = [
sections: ['Umb.Section.Content'],
},
},
+ {
+ type: 'dashboard',
+ alias: 'Umb.Dashboard.MembersTest',
+ name: 'Members Test',
+ elementName: 'umb-dashboard-welcome',
+ js: () => import('./backoffice/dashboards/welcome/dashboard-welcome.element'),
+ meta: {
+ weight: -10,
+ pathname: 'welcome',
+ sections: ['Umb.Section.Members'],
+ },
+ },
+ {
+ type: 'tree',
+ alias: 'Umb.Tree.Members',
+ name: 'Members',
+ elementName: 'umb-document-type-tree',
+ js: () => import('./backoffice/tree/document-type-tree.element'),
+ meta: {
+ weight: -10,
+ sections: ['Umb.Section.Members'],
+ },
+ },
];