Skip to content

Content Types: Root properties #21500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
madsrasmussen merged 6 commits into from
Jan 23, 2026
Merged

Content Types: Root properties #21500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
551feca
implement root properties
nielslyngsoe Jan 23, 2026
aa13550
Merge branch 'main' into v17/feature/root-properties
andr317c Jan 23, 2026
801b247
rename to in modal instead of is modal
madsrasmussen Jan 23, 2026
3aefd7a
Merge branch 'v17/feature/root-properties' of https://github.com/umbr…
madsrasmussen Jan 23, 2026
98af985
Revert "rename to in modal instead of is modal"
madsrasmussen Jan 23, 2026
fbfdd2d
Updated indexing for test to match new root property
andr317c Jan 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions ...s/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace'
*/
@customElement('umb-block-workspace-view-edit-content-no-router')
export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitElement implements UmbWorkspaceViewElement {
// private _hasRootProperties = false;
@state()
private _hasRootProperties = false;

@state()
private _hasRootGroups = false;
Expand All @@ -38,7 +39,14 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
this.#checkDefaultTabName();
});

// _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
this.observe(
this.#tabsStructureHelper.hasProperties,
(hasRootProperties) => {
this._hasRootProperties = hasRootProperties;
this.#checkDefaultTabName();
},
'observeRootProperties',
);

this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
this.#blockWorkspace = context;
Expand Down Expand Up @@ -66,7 +74,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme

// Find the default tab to grab
if (this._activeTabKey === undefined) {
if (this._hasRootGroups) {
if (this._hasRootGroups || this._hasRootProperties) {
this._activeTabKey = null;
} else if (this._tabs.length > 0) {
const tab = this._tabs[0];
Expand All @@ -83,9 +91,9 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
if (!this._tabs) return;

return html`
${this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups)
${this._tabs.length > 1 || (this._tabs.length === 1 && (this._hasRootGroups || this._hasRootProperties))
? html`<uui-tab-group slot="header">
${this._hasRootGroups && this._tabs.length > 0
${(this._hasRootGroups || this._hasRootProperties) && this._tabs.length > 0
? html`<uui-tab
label=${this.localize.term('general_generic')}
.active=${this._activeTabKey === null}
Expand Down
19 changes: 13 additions & 6 deletions ...Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
#blockWorkspace?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
#tabsStructureHelper = new UmbContentTypeContainerStructureHelper<UmbContentTypeModel>(this);

//@state()
//private _hasRootProperties = false;
@state()
private _hasRootProperties = false;

@state()
private _hasRootGroups = false;
Expand Down Expand Up @@ -56,7 +56,14 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
null,
);

// _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
this.observe(
this.#tabsStructureHelper.hasProperties,
(hasRootProperties) => {
this._hasRootProperties = hasRootProperties;
this.#createRoutes();
},
'observeRootProperties',
);

this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
this.#blockWorkspace = workspaceContext;
Expand Down Expand Up @@ -108,7 +115,7 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
});
}

if (this._hasRootGroups) {
if (this._hasRootGroups || this._hasRootProperties) {
routes.push({
path: '',
component: () => import('./block-workspace-view-edit-tab.element.js'),
Expand Down Expand Up @@ -140,9 +147,9 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
if (!this._routes || !this._tabs) return;
return html`
<umb-body-layout header-fit-height>
${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups))
${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && (this._hasRootGroups || this._hasRootProperties)))
? html` <uui-tab-group slot="header">
${this._hasRootGroups && this._tabs.length > 0
${(this._hasRootGroups || this._hasRootProperties) && this._tabs.length > 0
? html`
<uui-tab
label="Content"
Expand Down
29 changes: 28 additions & 1 deletion ...c/packages/content/content-type/structure/content-type-property-structure-helper.class.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,35 @@ export class UmbContentTypePropertyStructureHelper<T extends UmbContentTypeModel
}

#observeContainer() {
// Handle three cases:
// 1. containerId === undefined → Not set yet, clear properties
// 2. containerId === null → Root properties (no container)
// 3. containerId === string → Container-based properties

if (this.#containerId === undefined) {
// Not set yet, clear properties
this.#propertyStructure.setValue([]);
this.removeUmbControllerByAlias('observeProperties');
this.removeUmbControllerByAlias('observeContainer');
return;
}

if (this.#containerId === null) {
// Root properties (no container)
this.removeUmbControllerByAlias('observeContainer');
this.observe(
this.#structure?.rootPropertyStructures(),
(properties) => {
this.#propertyStructure.setValue(properties ?? []);
},
'observeProperties',
);
return;
}

// Container-based properties
this.observe(
this.#containerId ? this.#structure?.mergedContainersOfId(this.#containerId) : undefined,
this.#structure?.mergedContainersOfId(this.#containerId),
(container) => {
this.observe(
container ? this.#structure?.propertyStructuresOfGroupIds(container.ids ?? []) : undefined,
Expand Down
2 changes: 1 addition & 1 deletion ...lient/src/packages/content/content-type/structure/content-type-structure-manager.class.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -767,7 +767,7 @@
const props: UmbPropertyTypeModel[] = [];
docTypes.forEach((docType) => {
docType.properties?.forEach((property) => {
if (property.container?.id === containerId) {
if ((containerId === null && !property.container) || property.container?.id === containerId) {

Check warning on line 770 in src/Umbraco.Web.UI.Client/src/packages/content/content-type/structure/content-type-structure-manager.class.ts

View check run for this annotation

CodeScene Delta Analysis / CodeScene Code Health Review (main)

❌ New issue: Complex Conditional 

UmbContentTypeStructureManager.propertyStructuresOf has 1 complex conditionals with 2 branches, threshold = 2. A complex conditional is an expression inside a branch (e.g. if, for, while) which consists of multiple, logical operators such as AND/OR. The more logical operators in an expression, the more severe the code smell.
props.push(property);
}
});
Expand Down
2 changes: 1 addition & 1 deletion ...ges/content/content-type/workspace/views/design/content-type-design-editor-tab.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ export class UmbContentTypeDesignEditorTabElement extends UmbLitElement {
override render() {
return html`
${
this.#containerId
this.#containerId !== undefined
? html`
<uui-box class="${this._hasProperties ? '' : 'opaque'}">
<umb-content-type-design-editor-properties
Expand Down
21 changes: 15 additions & 6 deletions ...ackages/content/content-type/workspace/views/design/content-type-design-editor.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,9 @@

@state()
private _compositionRepositoryAlias?: string;
//private _hasRootProperties = false;

@state()
private _hasRootProperties = false;

@state()
private _hasRootGroups = false;
Expand Down Expand Up @@ -155,7 +157,14 @@
this.#createRoutes();
});

// _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
this.observe(
this.#tabsStructureHelper.hasProperties,
(hasRootProperties) => {
this._hasRootProperties = hasRootProperties;
this.#createRoutes();
},
'observeRootProperties',
);

this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => {
this.#workspaceContext = workspaceContext;
Expand Down Expand Up @@ -216,7 +225,7 @@
},
});

if (this._hasRootGroups || this._tabs.length === 0) {
if (this._hasRootGroups || this._hasRootProperties || this._tabs.length === 0) {

Check warning on line 228 in src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor.element.ts

View check run for this annotation

CodeScene Delta Analysis / CodeScene Code Health Review (main)

❌ Getting worse: Complex Conditional 

UmbContentTypeDesignEditorElement.createRoutes increases from 1 complex conditionals with 2 branches to 2 complex conditionals with 4 branches, threshold = 2. A complex conditional is an expression inside a branch (e.g. if, for, while) which consists of multiple, logical operators such as AND/OR. The more logical operators in an expression, the more severe the code smell.
routes.push({
path: '',
pathMatch: 'full',
Expand Down Expand Up @@ -536,15 +545,15 @@
renderRootTab() {
const path = this._routerPath + '/root';
const rootTabActive = path === this._activePath;
if (!this._hasRootGroups && !this._sortModeActive) {
// If we don't have any root groups and we are not in sort mode, then we don't want to render the root tab.
if (!this._hasRootGroups && !this._hasRootProperties && !this._sortModeActive) {

Check warning on line 548 in src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor.element.ts

View check run for this annotation

CodeScene Delta Analysis / CodeScene Code Health Review (main)

❌ New issue: Complex Conditional 

UmbContentTypeDesignEditorElement.renderRootTab has 1 complex conditionals with 2 branches, threshold = 2. A complex conditional is an expression inside a branch (e.g. if, for, while) which consists of multiple, logical operators such as AND/OR. The more logical operators in an expression, the more severe the code smell.
// If we don't have any root groups/properties and we are not in sort mode, then we don't want to render the root tab.
return nothing;
}
return html`
<uui-tab
id="root-tab"
data-mark="root-tab"
class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
class=${this._hasRootGroups || this._hasRootProperties || rootTabActive ? '' : 'content-tab-is-empty'}
label=${this.localize.term('general_generic')}
.active=${rootTabActive}
href=${path}
Expand Down
19 changes: 12 additions & 7 deletions ...Web.UI.Client/src/packages/content/content/workspace/views/edit/content-editor.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,9 @@ import './content-editor-tab.element.js';

@customElement('umb-content-workspace-view-edit')
export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement {
/*
// root properties is a possible feature with Bellissima, but as it is new its not fully implemented yet [NL]
@state()
private _hasRootProperties = false;
*/

#viewContext?: typeof UMB_VIEW_CONTEXT.TYPE;

@state()
Expand Down Expand Up @@ -81,7 +79,14 @@ export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements
null,
);

// _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
this.observe(
this._tabsStructureHelper.hasProperties,
(hasRootProperties) => {
this._hasRootProperties = hasRootProperties;
this.#createRoutes();
},
'observeRootProperties',
);

this.consumeContext(UMB_PROPERTY_STRUCTURE_WORKSPACE_CONTEXT, (workspaceContext) => {
this.#structureManager = workspaceContext?.structure;
Expand Down Expand Up @@ -114,7 +119,7 @@ export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements
if (!this._tabs || !this.#structureManager) return;
const routes: UmbRoute[] = [];

if (this._hasRootGroups) {
if (this._hasRootGroups || this._hasRootProperties) {
routes.push({
path: 'root',
component: () => import('./content-editor-tab.element.js'),
Expand Down Expand Up @@ -212,9 +217,9 @@ export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements
}
return html`
<umb-body-layout header-fit-height>
${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups))
${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && (this._hasRootGroups || this._hasRootProperties)))
? html` <uui-tab-group slot="header">
${this._hasRootGroups && this._tabs.length > 0 ? this.#renderTab(null, '#general_generic') : nothing}
${(this._hasRootGroups || this._hasRootProperties) && this._tabs.length > 0 ? this.#renderTab(null, '#general_generic') : nothing}
${repeat(
this._tabs,
(tab) => tab.name,
Expand Down
2 changes: 1 addition & 1 deletion ...co.Tests.AcceptanceTest/tests/DefaultConfig/Settings/MediaType/MediaTypeDesignTab.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ test('can create a media type with multiple groups', {tag: '@smoke'}, async ({um
await umbracoUi.mediaType.goToMediaType(mediaTypeName);
await umbracoUi.mediaType.clickAddGroupButton();
await umbracoUi.mediaType.enterGroupName(secondGroupName, 1);
await umbracoUi.mediaType.addPropertyEditor(secondDataTypeName, 1);
await umbracoUi.mediaType.addPropertyEditor(secondDataTypeName, 2);
await umbracoUi.mediaType.clickSaveButtonAndWaitForMediaTypeToBeUpdated();

// Assert
Expand Down
Loading