@umbraco-cms/backoffice 17.5.3 → 17.6.0-rc

package/dist-cms/packages/content/content/workspace/content-detail-workspace-base.d.ts

@@ -18,6 +18,7 @@ import type { ClassConstructor } from '../../../../libs/extension-api/index.js';
 import type { Observable } from '../../../../external/rxjs/index.js';
 import type { UmbContentTypeDetailModel, UmbPropertyTypeModel } from '../../content-type/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { UmbEntityModel } from '../../../core/entity/index.js';
 import type { UmbDetailRepository, UmbDetailRepositoryConstructor } from '../../../core/repository/index.js';
 import type { UmbEntityDetailWorkspaceContextArgs, UmbEntityDetailWorkspaceContextCreateArgs, UmbSaveableWorkspaceContext } from '../../../core/workspace/index.js';
 import type { UmbEntityVariantModel, UmbEntityVariantOptionModel } from '../../../core/variant/index.js';
@@ -36,6 +37,13 @@ export interface UmbContentDetailWorkspaceContextArgs<DetailModelType extends Um
     collectionAlias?: string;
     saveModalToken?: UmbModalToken<UmbContentVariantPickerData<VariantOptionModelType>, UmbContentVariantPickerValue>;
 }
+/**
+ * Interface for the third argument of performCreateOrUpdate, relevant if the persistence method should be different from default.
+ */
+export interface UmbContentWorkspaceCreateOrUpdatePersistMethods<DetailModelType extends UmbContentDetailModel> {
+    create?: (saveData: DetailModelType, variantIds: Array<UmbVariantId>, parent: UmbEntityModel) => Promise<DetailModelType>;
+    update?: (saveData: DetailModelType, variantIds: Array<UmbVariantId>) => Promise<DetailModelType>;
+}
 /**
  * The base class for a content detail workspace context.
  * @exports
@@ -235,9 +243,10 @@ export declare abstract class UmbContentDetailWorkspaceContextBase<DetailModelTy
      * Perform the create or update of the content
      * @param {Array<UmbVariantId>} variantIds - The variant ids to save
      * @param {DetailModelType} saveData - The data to save
+     * @param {UmbContentWorkspaceCreateOrUpdatePersistMethods<DetailModelType>} [persistenceMethod] - Optional custom persistence logic.
      * @memberof UmbContentDetailWorkspaceContextBase
      */
-    performCreateOrUpdate(variantIds: Array<UmbVariantId>, saveData: DetailModelType): Promise<void>;
+    performCreateOrUpdate(variantIds: Array<UmbVariantId>, saveData: DetailModelType, persistenceMethod?: UmbContentWorkspaceCreateOrUpdatePersistMethods<DetailModelType>): Promise<void>;
     resetState(): void;
     abstract getContentTypeUnique(): string | undefined;
     abstract createPropertyDatasetContext(host: UmbControllerHost, variantId: UmbVariantId): UmbContentPropertyDatasetContext<DetailModelType, ContentTypeDetailModelType, VariantModelType>;

package/dist-cms/packages/content/content/workspace/content-detail-workspace-base.js

@@ -237,7 +237,7 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
     }
     async loadLanguages() {
         // TODO: If we don't end up having a Global Context for languages, then we should at least change this into using a asObservable which should be returned from the repository. [Nl]
-        const { data } = await this.#languageRepository.requestCollection({});
+        const { data } = await this.#languageRepository.requestAllItems();
         this.#languages.setValue(data?.items ?? []);
     }
     /**
@@ -776,83 +776,78 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
      * Perform the create or update of the content
      * @param {Array<UmbVariantId>} variantIds - The variant ids to save
      * @param {DetailModelType} saveData - The data to save
+     * @param {UmbContentWorkspaceCreateOrUpdatePersistMethods<DetailModelType>} [persistenceMethod] - Optional custom persistence logic.
      * @memberof UmbContentDetailWorkspaceContextBase
      */
-    async performCreateOrUpdate(variantIds, saveData) {
+    async performCreateOrUpdate(variantIds, saveData, persistenceMethod) {
         if (this.getIsNew()) {
-            await this.#create(variantIds, saveData);
+            await this.#create(variantIds, saveData, persistenceMethod?.create);
         }
         else {
-            await this.#update(variantIds, saveData);
+            await this.#update(variantIds, saveData, persistenceMethod?.update);
         }
     }
-    async #create(variantIds, saveData) {
-        if (!this._detailRepository)
-            throw new Error('Detail repository is not set');
+    async #create(variantIds, saveData, overwriteCreate) {
         const parent = this._internal_getCreateUnderParent();
         if (!parent)
             throw new Error('Parent is not set');
-        const { data, error } = await this._detailRepository.create(saveData, parent.unique);
-        if (!data || error) {
-            throw new Error('Error creating content');
-        }
-        const variantIdsIncludingInvariant = [...variantIds, UmbVariantId.CreateInvariant()];
-        // Only update the variants that was chosen to be saved:
-        const persistedData = this._data.getCurrent();
-        const newPersistedData = await new UmbMergeContentVariantDataController(this).process(persistedData, data, variantIds, variantIdsIncludingInvariant);
-        this._data.setPersisted(newPersistedData);
-        // Only update the variants that was chosen to be saved:
-        const currentData = this._data.getCurrent();
-        const newCurrentData = await new UmbMergeContentVariantDataController(this).process(currentData, data, variantIds, variantIdsIncludingInvariant);
-        this._data.setCurrent(newCurrentData);
+        const persisted = overwriteCreate
+            ? await overwriteCreate(saveData, variantIds, parent)
+            : await this.#defaultCreatePersistence(saveData, parent.unique);
+        // Set persisted AND current before flipping isNew: the flip triggers the new->edit redirect,
+        // whose navigation guard compares the two states with an order-sensitive comparison.
+        await this.#applyPersistedData(persisted, variantIds);
         this.setIsNew(false);
-        const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
-        if (!eventContext) {
-            throw new Error('Event context is missing');
+        await this.#dispatchActionEvents(new UmbRequestReloadStructureForEntityEvent({ entityType: parent.entityType, unique: parent.unique }), new UmbRequestReloadChildrenOfEntityEvent({ entityType: parent.entityType, unique: parent.unique }));
+    }
+    async #update(variantIds, saveData, overwriteUpdate) {
+        const persisted = overwriteUpdate
+            ? await overwriteUpdate(saveData, variantIds)
+            : await this.#defaultUpdatePersistence(saveData);
+        await this.#applyPersistedData(persisted, variantIds);
+        const unique = this.getUnique();
+        if (!unique) {
+            return;
         }
-        const reloadStructureEvent = new UmbRequestReloadStructureForEntityEvent({
-            entityType: parent.entityType,
-            unique: parent.unique,
-        });
-        eventContext.dispatchEvent(reloadStructureEvent);
-        const reloadChildrenEvent = new UmbRequestReloadChildrenOfEntityEvent({
-            entityType: parent.entityType,
-            unique: parent.unique,
-        });
-        eventContext.dispatchEvent(reloadChildrenEvent);
+        const entityType = this.getEntityType();
+        await this.#dispatchActionEvents(new UmbRequestReloadStructureForEntityEvent({ unique, entityType }), new UmbEntityUpdatedEvent({ unique, entityType, eventUnique: this._workspaceEventUnique }));
+    }
+    async #defaultCreatePersistence(saveData, parentUnique) {
+        if (!this._detailRepository)
+            throw new Error('Detail repository is not set');
+        const { data, error } = await this._detailRepository.create(saveData, parentUnique);
+        if (!data || error)
+            throw new Error('Error creating content');
+        return data;
     }
-    async #update(variantIds, saveData) {
+    async #defaultUpdatePersistence(saveData) {
         if (!this._detailRepository)
             throw new Error('Detail repository is not set');
         const { data, error } = await this._detailRepository.save(saveData);
-        if (!data || error) {
+        if (!data || error)
             throw new Error('Error saving content');
+        return data;
+    }
+    /**
+     * Partial update the current data with the persisted data, only for the variants that were saved.
+     * @param {DetailModelType | undefined} persisted - The saved document, or undefined if not returned
+     * @param {Array<UmbVariantId>} variantIds - The variants that were saved
+     */
+    async #applyPersistedData(persisted, variantIds) {
+        if (!persisted) {
+            throw new Error('Persisted data is missing, persistence methods should return latest draft from the server.');
         }
         const variantIdsIncludingInvariant = [...variantIds, UmbVariantId.CreateInvariant()];
-        // Only update the variants that was chosen to be saved:
-        // Use getPersisted() as the base so non-saved variants retain the actual
-        // server state, not unsaved local edits from current data.
-        const persistedData = this._data.getPersisted();
-        const newPersistedData = await new UmbMergeContentVariantDataController(this).process(persistedData, data, variantIds, variantIdsIncludingInvariant);
+        const newPersistedData = await new UmbMergeContentVariantDataController(this).process(this._data.getPersisted(), persisted, variantIds, variantIdsIncludingInvariant);
         this._data.setPersisted(newPersistedData);
-        // Only update the variants that was chosen to be saved:
-        const currentData = this._data.getCurrent();
-        const newCurrentData = await new UmbMergeContentVariantDataController(this).process(currentData, data, variantIds, variantIdsIncludingInvariant);
+        const newCurrentData = await new UmbMergeContentVariantDataController(this).process(this._data.getCurrent(), persisted, variantIds, variantIdsIncludingInvariant);
         this._data.setCurrent(newCurrentData);
-        const unique = this.getUnique();
-        const entityType = this.getEntityType();
+    }
+    async #dispatchActionEvents(...events) {
         const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
-        if (!eventContext) {
+        if (!eventContext)
             throw new Error('Event context is missing');
-        }
-        const structureEvent = new UmbRequestReloadStructureForEntityEvent({ unique, entityType });
-        eventContext.dispatchEvent(structureEvent);
-        const updatedEvent = new UmbEntityUpdatedEvent({
-            unique,
-            entityType,
-            eventUnique: this._workspaceEventUnique,
-        });
-        eventContext.dispatchEvent(updatedEvent);
+        events.forEach((event) => eventContext.dispatchEvent(event));
     }
     resetState() {
         super.resetState();

package/dist-cms/packages/content/content/workspace/index.d.ts

@@ -1,3 +1,4 @@
 export * from './content-detail-workspace-base.js';
 export * from './content-validation-to-hints.manager.js';
+export * from './publishable-split-view-variant-selector.element.js';
 export type * from './content-workspace-context.interface.js';

package/dist-cms/packages/content/content/workspace/index.js

@@ -1,2 +1,3 @@
 export * from './content-detail-workspace-base.js';
 export * from './content-validation-to-hints.manager.js';
+export * from './publishable-split-view-variant-selector.element.js';

package/dist-cms/packages/content/content/workspace/publishable-split-view-variant-selector.element.d.ts

@@ -0,0 +1,38 @@
+import type { UmbPublishedVariantWithPendingChanges } from '../publishing/index.js';
+import { sortVariants } from '../../../core/variant/index.js';
+import { UmbWorkspaceSplitViewVariantSelectorElement } from '../../../core/workspace/index.js';
+import type { Observable } from '../../../../external/rxjs/index.js';
+import type { UmbContextToken } from '../../../../libs/context-api/index.js';
+import type { UmbEntityVariantModel, UmbEntityVariantOptionModel } from '../../../core/variant/index.js';
+import type { UmbPublishableWorkspaceContext } from '../../../core/workspace/index.js';
+/**
+ * Minimal interface that publishable workspace contexts must satisfy
+ * for the variant selector to observe pending changes.
+ */
+export interface UmbPublishableWorkspaceContextWithPendingChanges extends UmbPublishableWorkspaceContext {
+    /** Observable state for detecting pending (unpublished) changes per variant. */
+    publishedPendingChanges: {
+        variantsWithChanges: Observable<Array<UmbPublishedVariantWithPendingChanges>>;
+    };
+}
+/**
+ * A variant selector base class that adds publishable-state awareness
+ * (pending changes, publish state labels) to the split-view variant selector.
+ * Both Document and Element variant selectors extend this.
+ * @abstract
+ * @class UmbPublishableSplitViewVariantSelectorElement
+ * @augments {UmbWorkspaceSplitViewVariantSelectorElement}
+ */
+export declare abstract class UmbPublishableSplitViewVariantSelectorElement<VariantOptionModelType extends UmbEntityVariantOptionModel<UmbEntityVariantModel>, TContext extends UmbPublishableWorkspaceContextWithPendingChanges = UmbPublishableWorkspaceContextWithPendingChanges> extends UmbWorkspaceSplitViewVariantSelectorElement<VariantOptionModelType> {
+    #private;
+    /**
+     * Returns the context token used to consume the publishable workspace context.
+     * Subclasses must implement this to provide their entity-specific context token.
+     * @returns {UmbContextToken<TContext>} The context token for the publishable workspace context.
+     */
+    protected abstract getPublishingContextToken(): UmbContextToken<TContext>;
+    protected _variantSorter: typeof sortVariants;
+    private _variantsWithPendingChanges;
+    constructor();
+    protected _renderVariantDetails(variantOption: VariantOptionModelType): import("lit-html").TemplateResult<1>;
+}

package/dist-cms/packages/content/content/workspace/publishable-split-view-variant-selector.element.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, state } from '../../../../external/lit/index.js';
+import { sortVariants, UmbPublishableVariantState } from '../../../core/variant/index.js';
+import { UmbWorkspaceSplitViewVariantSelectorElement } from '../../../core/workspace/index.js';
+/**
+ * A variant selector base class that adds publishable-state awareness
+ * (pending changes, publish state labels) to the split-view variant selector.
+ * Both Document and Element variant selectors extend this.
+ * @abstract
+ * @class UmbPublishableSplitViewVariantSelectorElement
+ * @augments {UmbWorkspaceSplitViewVariantSelectorElement}
+ */
+export class UmbPublishableSplitViewVariantSelectorElement extends UmbWorkspaceSplitViewVariantSelectorElement {
+    #publishingContext;
+    #publishStateLocalizationMap;
+    constructor() {
+        super();
+        this._variantSorter = sortVariants;
+        this._variantsWithPendingChanges = [];
+        this.#publishStateLocalizationMap = {
+            [UmbPublishableVariantState.DRAFT]: 'content_unpublished',
+            [UmbPublishableVariantState.PUBLISHED]: 'content_published',
+            // TODO: The pending changes state can be removed once the management Api removes this state
+            // We only keep it here to make typescript happy
+            // We should also make our own state model for this
+            [UmbPublishableVariantState.PUBLISHED_PENDING_CHANGES]: 'content_published',
+            [UmbPublishableVariantState.NOT_CREATED]: 'content_notCreated',
+            [UmbPublishableVariantState.TRASHED]: 'mediaPicker_trashed',
+        };
+        this.consumeContext(this.getPublishingContextToken(), (instance) => {
+            this.#publishingContext = instance;
+            this.#observePendingChanges();
+        });
+    }
+    #observePendingChanges() {
+        this.observe(this.#publishingContext?.publishedPendingChanges.variantsWithChanges, (variants) => {
+            this._variantsWithPendingChanges = variants || [];
+        }, '_observePendingChanges');
+    }
+    #isPublished(variantOption) {
+        return (variantOption.variant?.state === UmbPublishableVariantState.PUBLISHED ||
+            variantOption.variant?.state === UmbPublishableVariantState.PUBLISHED_PENDING_CHANGES);
+    }
+    #hasPendingChanges(variant) {
+        return this._variantsWithPendingChanges.some((x) => x.variantId.compare(variant));
+    }
+    #getVariantState(variantOption) {
+        let term = this.#publishStateLocalizationMap[variantOption.variant?.state || UmbPublishableVariantState.NOT_CREATED];
+        if (this.#isPublished(variantOption) && this.#hasPendingChanges(variantOption)) {
+            term = 'content_publishedPendingChanges';
+        }
+        return this.localize.term(term);
+    }
+    _renderVariantDetails(variantOption) {
+        return html `${this.#getVariantState(variantOption)}`;
+    }
+}
+__decorate([
+    state()
+], UmbPublishableSplitViewVariantSelectorElement.prototype, "_variantsWithPendingChanges", void 0);

package/dist-cms/packages/content/content-type/global-components/content-type-workspace-editor-header.element.js

@@ -66,7 +66,13 @@ let UmbContentTypeWorkspaceEditorHeaderElement = class UmbContentTypeWorkspaceEd
     render() {
         return html `
 			<div id="header">
-				<uui-button id="icon" compact label=${this.#iconTitle ?? 'icon'} look="outline" title=${ifDefined(this.#iconTitle)} @click=${this._handleIconClick}>
+				<uui-button
+					id="icon"
+					compact
+					label=${this.#iconTitle ?? 'icon'}
+					look="outline"
+					title=${ifDefined(this.#iconTitle)}
+					@click=${this._handleIconClick}>
 					<umb-icon aria-hidden="true" name=${ifDefined(this._icon)}></umb-icon>
 				</uui-button>
 
@@ -77,6 +83,7 @@ let UmbContentTypeWorkspaceEditorHeaderElement = class UmbContentTypeWorkspaceEd
 						.value=${this._name}
 						.alias=${this._alias}
 						?auto-generate-alias=${this._isNew}
+						.autocomplete=${'off'}
 						@change=${this.#onNameAndAliasChange}
 						required
 						${umbBindToValidation(this, '$.name', this._name)}

package/dist-cms/packages/content/content-type/modals/composition-picker/composition-picker-modal.element.js

@@ -107,6 +107,19 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
         this._selection = this._selection.filter((s) => s !== unique);
         this.modalContext?.setValue({ selection: this._selection });
     }
+    get #typeKeySuffix() {
+        switch (this.data?.entityType) {
+            case 'media-type':
+                return 'MediaType';
+            case 'member-type':
+                return 'MemberType';
+            default:
+                return '';
+        }
+    }
+    get #editPathBase() {
+        return `/section/settings/workspace/${this.data?.entityType ?? 'document-type'}/edit/`;
+    }
     render() {
         return html `
 			<umb-body-layout headline="${this.localize.term('contentTypeEditor_compositions')}">
@@ -130,19 +143,19 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
     }
     #renderHasReference() {
         return html `
-			<umb-localize key="contentTypeEditor_compositionInUse">
+			<umb-localize key="contentTypeEditor_compositionInUse${this.#typeKeySuffix}">
 				This Content Type is used in a composition, and therefore cannot be composed itself.
 			</umb-localize>
 			<h4>
 				<umb-localize key="contentTypeEditor_compositionUsageHeading">Where is this composition used?</umb-localize>
 			</h4>
-			<umb-localize key="contentTypeEditor_compositionUsageSpecification">
+			<umb-localize key="contentTypeEditor_compositionUsageSpecification${this.#typeKeySuffix}">
 				This composition is currently used in the composition of the following Content Types:
 			</umb-localize>
 			<div class="reference-list">
 				${repeat(this._references, (item) => item.unique, (item) => html `
 						<uui-ref-node-document-type
-							href=${'/section/settings/workspace/document-type/edit/' + item.unique}
+							href=${this.#editPathBase + item.unique}
 							name=${this.localize.string(item.name)}>
 							<umb-icon slot="icon" name=${item.icon}></umb-icon>
 						</uui-ref-node-document-type>
@@ -158,7 +171,7 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
         }
         if (this._compatibleCompositions) {
             return html `
-				<umb-localize key="contentTypeEditor_compositionsDescription">
+				<umb-localize key="contentTypeEditor_compositionsDescription${this.#typeKeySuffix}">
 					Inherit tabs and properties from an existing Document Type. New tabs will be<br />added to the current
 					Document Type or merged if a tab with an identical name exists.<br />
 				</umb-localize>
@@ -176,7 +189,7 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
         }
         else {
             return html `
-				<umb-localize key="contentTypeEditor_noAvailableCompositions">
+				<umb-localize key="contentTypeEditor_noAvailableCompositions${this.#typeKeySuffix}">
 					There are no Content Types available to use as a composition
 				</umb-localize>
 			`;

package/dist-cms/packages/content/content-type/modals/composition-picker/composition-picker-modal.token.d.ts

@@ -8,6 +8,7 @@ export interface UmbCompositionPickerModalData {
     isElement: boolean;
     currentPropertyAliases: Array<string>;
     isNew: boolean;
+    entityType?: string;
 }
 export interface UmbCompositionPickerModalValue {
     selection: Array<string>;

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.js

@@ -155,7 +155,7 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
             return html `
 				<div id="header">
 					<umb-input-with-alias
-						name="name"
+						name="propertyTypeName"
 						id="name-alias-input"
 						required
 						.placeholder=${this.localize.term('placeholders_label')}
@@ -170,11 +170,10 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 					<slot name="action-menu"></slot>
 					<p>
 						<uui-textarea
-							label="description"
-							name="description"
 							data-mark="input:description"
 							id="description-input"
-							placeholder=${this.localize.term('placeholders_enterDescription')}
+							.label=${this.localize.term('general_description')}
+							.placeholder=${this.localize.term('placeholders_enterDescription')}
 							.value=${this.property.description ?? ''}
 							@input=${(e) => {
                 if (e.target)
@@ -192,7 +191,10 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
                 UMB_EDIT_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN.generateLocal({ unique: this.property.unique })}>
 					${this.#renderPropertyName()} ${this.#renderPropertyTags()}
 					<uui-action-bar>
-						<uui-button label="${this.localize.term('actions_delete')}" data-mark="action:delete" @click="${this.#requestRemove}">
+						<uui-button
+							label="${this.localize.term('actions_delete')}"
+							data-mark="action:delete"
+							@click="${this.#requestRemove}">
 							<uui-icon name="delete"></uui-icon>
 						</uui-button>
 					</uui-action-bar>
@@ -378,8 +380,8 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 			#header umb-input-with-alias {
 				--uui-input-border-color: transparent;
 			}
-			#name-alias-input,
-			#description-input {
+			#header umb-input-with-alias,
+			#header uui-textarea {
 				width: 100%;
 			}
 

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor.element.js

@@ -23,6 +23,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
     #tabsStructureHelper;
     #currentTabComponent;
     #processingTabId;
+    #landingLocalPath;
     set manifest(value) {
         this._compositionRepositoryAlias = value.meta.compositionRepositoryAlias;
     }
@@ -108,9 +109,24 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
             this._hasRootProperties = hasRootProperties;
             this.#createRoutes();
         }, 'observeRootProperties');
-        this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => {
+        this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, async (workspaceContext) => {
             this.#workspaceContext = workspaceContext;
-            this.#tabsStructureHelper.setStructureManager(workspaceContext?.structure);
+            if (!workspaceContext)
+                return;
+            // The router-slot does not re-match the URL when its routes are replaced, so the
+            // initial route set must reflect real data. Awaiting the structure load here ensures
+            // the tabs helper subscribes to populated containers and #createRoutes runs against
+            // actual tabs/groups rather than the empty initial emissions of the underlying state.
+            await workspaceContext.structure.whenLoaded();
+            if (workspaceContext !== this.#workspaceContext)
+                return; // stale, superseded by newer context
+            // Ensure root-group state is correct before the first route set is generated. #createRoutes() can
+            // run synchronously when setStructureManager attaches observers, and umb-router-slot does not
+            // re-match the URL when routes are replaced.
+            this._hasRootGroups = (await workspaceContext.structure.getRootContainers('Group')).length > 0;
+            if (workspaceContext !== this.#workspaceContext)
+                return; // stale, superseded by newer context
+            this.#tabsStructureHelper.setStructureManager(workspaceContext.structure);
             this.#observeRootGroups();
         });
     }
@@ -156,22 +172,21 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
                 this.#currentTabComponent.containerId = null;
             },
         });
-        if (this._hasRootGroups || this._hasRootProperties || this._tabs.length === 0) {
-            routes.push({
-                path: '',
-                pathMatch: 'full',
-                redirectTo: 'root',
-                guards: [() => this.#processingTabId === undefined],
-            });
-        }
-        else {
-            routes.push({
-                path: '',
-                pathMatch: 'full',
-                redirectTo: routes[0]?.path,
-                guards: [() => this.#processingTabId === undefined],
-            });
-        }
+        // Duplicate the landing route onto the empty path rather than using `redirectTo`. The
+        // router-slot library only applies `redirectTo` on navigation events, not on the initial
+        // route attachment, so an empty-path redirect would leave the view stuck. The landing
+        // route is `root` when the content type has root properties/groups (or has no tabs),
+        // otherwise the first tab. Note: we deliberately do NOT set `pathMatch: 'full'`, because
+        // the modal sub-router appends paths like `/add-property/...` to the active local path;
+        // with `path: ''` matching prefix-wise (regex `/^/`), the tab stays mounted and the
+        // modal-router can match the appended segment.
+        const defaultRoute = this._hasRootGroups || this._hasRootProperties || this._tabs.length === 0 ? routes[routes.length - 1] : routes[0];
+        this.#landingLocalPath = defaultRoute.path;
+        routes.push({
+            ...defaultRoute,
+            path: '',
+            guards: [() => this.#processingTabId === undefined],
+        });
         if (routes.length !== 0) {
             routes.push({
                 path: `**`,
@@ -328,6 +343,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
             isElement: ownerContentType.isElement,
             currentPropertyAliases,
             isNew: this.#workspaceContext.getIsNew(),
+            entityType: this.#workspaceContext.getEntityType(),
         };
         const value = await umbOpenModal(this, UMB_COMPOSITION_PICKER_MODAL, {
             data: compositionConfiguration,
@@ -359,15 +375,24 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 					<div id="container-list">${this.renderTabsNavigation()}</div>
 					${this.#renderActions()}
 				</div>
-				<umb-router-slot
-					.routes=${this._routes}
-					@init=${(event) => {
-            this._routerPath = event.target.absoluteRouterPath;
-        }}
-					@change=${(event) => {
-            this._activePath = event.target.absoluteActiveViewPath ?? '';
-        }}>
-				</umb-router-slot>
+				${this._routes
+            ? html `<umb-router-slot
+							.routes=${this._routes}
+							@init=${(event) => {
+                this._routerPath = event.target.absoluteRouterPath;
+            }}
+							@change=${(event) => {
+                let activePath = event.target.absoluteActiveViewPath ?? '';
+                // When the duplicated empty-path landing route is active, the router reports
+                // the absolute path as `${routerPath}/` with no local segment. Map it back to
+                // the canonical landing path so tab-navigation highlight and rename UI work.
+                if (this.#landingLocalPath && activePath === this._routerPath + '/') {
+                    activePath = this._routerPath + '/' + this.#landingLocalPath;
+                }
+                this._activePath = activePath;
+            }}>
+						</umb-router-slot>`
+            : nothing}
 			</umb-body-layout>
 		`;
     }

package/dist-cms/packages/content/property-type/workspace/views/settings/property-workspace-view-settings.element.js

@@ -145,9 +145,9 @@ let UmbPropertyTypeWorkspaceViewSettingsElement = class UmbPropertyTypeWorkspace
 			<uui-box class="uui-text">
 				<umb-property-layout label=${this.localize.term('general_name')} orientation="vertical" mandatory>
 					<umb-input-with-alias
-						id="name-input"
-						data-mark="input:entity-name"
-						name="name"
+						data-mark="input:propertytype-name"
+						name="propertyTypeName"
+						autocomplete="on"
 						slot="editor"
 						required
 						.value=${this._data?.name ?? ''}
@@ -161,8 +161,7 @@ let UmbPropertyTypeWorkspaceViewSettingsElement = class UmbPropertyTypeWorkspace
 
 				<umb-property-layout label=${this.localize.term('general_description')} orientation="vertical">
 					<uui-textarea
-						id="description-input"
-						data-mark="input:entity-description"
+						data-mark="input:propertytype-description"
 						label="${this.localize.term('general_description')}"
 						slot="editor"
 						name="description"
@@ -174,7 +173,7 @@ let UmbPropertyTypeWorkspaceViewSettingsElement = class UmbPropertyTypeWorkspace
 				<umb-property-layout label=${this.localize.term('general_propertyEditor')} orientation="vertical" mandatory>
 					<umb-data-type-flow-input
 						slot="editor"
-						id="data-type-input"
+						data-mark="input:data-type"
 						label="${this.localize.term('general_propertyEditor')}"
 						.value=${this._data?.dataType?.unique ?? ''}
 						.suggestionQuery=${this._data?.name}