@umbraco-cms/backoffice 17.2.0-rc → 17.2.0-rc2

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.d.ts

@@ -8,8 +8,8 @@ import type { UmbWorkspaceViewElement } from '../../../../../core/workspace/inde
  */
 export declare class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitElement implements UmbWorkspaceViewElement {
     #private;
-    private _hasRootProperties;
-    private _hasRootGroups;
+    private _hasRootProperties?;
+    private _hasRootGroups?;
     private _tabs?;
     private _activeTabKey?;
     constructor();

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js

@@ -17,12 +17,9 @@ import { UmbLitElement } from '../../../../../core/lit-element/index.js';
  */
 let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitElement {
     #blockWorkspace;
-    #tabsStructureHelper;
+    #tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
     constructor() {
         super();
-        this._hasRootProperties = false;
-        this._hasRootGroups = false;
-        this.#tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
         this.#tabsStructureHelper.setIsRoot(true);
         this.#tabsStructureHelper.setContainerChildType('Tab');
         this.observe(this.#tabsStructureHelper.childContainers, (tabs) => {
@@ -48,8 +45,12 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
         }, 'observeGroups');
     }
     #checkDefaultTabName() {
-        if (!this._tabs || !this.#blockWorkspace)
+        if (!this._tabs ||
+            !this.#blockWorkspace ||
+            this._hasRootGroups === undefined ||
+            this._hasRootProperties === undefined) {
             return;
+        }
         // Find the default tab to grab
         if (this._activeTabKey === undefined) {
             if (this._hasRootGroups || this._hasRootProperties) {
@@ -74,9 +75,7 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
                 ? html `<uui-tab
 									label=${this.localize.term('general_generic')}
 									.active=${this._activeTabKey === null}
-									@click=${() => this.#setTabKey(null)}
-									>Content</uui-tab
-								>`
+									@click=${() => this.#setTabKey(null)}></uui-tab>`
                 : nothing}
 						${repeat(this._tabs, (tab) => tab.name, (tab) => {
                 const tabKey = tab.ownerId ?? tab.ids[0];

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context-token.js';
-import { css, html, customElement, state, repeat, property } from '../../../../../../external/lit/index.js';
+import { css, html, customElement, state, repeat, property, nothing } from '../../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
 import { UmbContentTypeContainerStructureHelper } from '../../../../../content/content-type/index.js';
 import { encodeFolderName } from '../../../../../core/router/index.js';
@@ -63,6 +63,16 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
         if (!this._tabs || !this.#blockWorkspace)
             return;
         const routes = [];
+        if (this._hasRootGroups || this._hasRootProperties) {
+            routes.push({
+                path: 'root',
+                component: () => import('./block-workspace-view-edit-tab.element.js'),
+                setup: (component) => {
+                    component.managerName = this.#managerName;
+                    component.containerId = null;
+                },
+            });
+        }
         if (this._tabs.length > 0) {
             this._tabs?.forEach((tab) => {
                 const tabName = tab.name ?? '';
@@ -76,24 +86,12 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
                 });
             });
         }
-        if (this._hasRootGroups || this._hasRootProperties) {
+        if (routes.length !== 0) {
             routes.push({
+                ...routes[0],
+                unique: 'emptyPathFor_' + routes[0].path,
                 path: '',
-                component: () => import('./block-workspace-view-edit-tab.element.js'),
-                setup: (component) => {
-                    component.managerName = this.#managerName;
-                    component.containerId = null;
-                },
             });
-        }
-        if (routes.length !== 0) {
-            if (!this._hasRootGroups) {
-                routes.push({
-                    path: '',
-                    pathMatch: 'full',
-                    redirectTo: routes[0]?.path,
-                });
-            }
             routes.push({
                 path: `**`,
                 component: async () => (await import('../../../../../core/router/index.js')).UmbRouteNotFoundElement,
@@ -106,26 +104,15 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
             return;
         return html `
 			<umb-body-layout header-fit-height>
-				${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && (this._hasRootGroups || this._hasRootProperties)))
+				${this._routerPath &&
+            (this._tabs.length > 1 || (this._tabs.length === 1 && (this._hasRootGroups || this._hasRootProperties)))
             ? html ` <uui-tab-group slot="header">
 							${(this._hasRootGroups || this._hasRootProperties) && this._tabs.length > 0
-                ? html `
-										<uui-tab
-											label="Content"
-											.active=${this._routerPath + '/' === this._activePath}
-											href=${this._routerPath + '/'}>
-											<umb-localize key="general_content">Content</umb-localize>
-										</uui-tab>
-									`
-                : ''}
-							${repeat(this._tabs, (tab) => tab.name, (tab) => {
-                const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
-                return html `<uui-tab
-										label=${this.localize.string(tab.name ?? '#general_unknown')}
-										.active=${path === this._activePath}
-										href=${path}>
-										${this.localize.string(tab.name)}
-									</uui-tab>`;
+                ? this.#renderTab(null, '#general_generic')
+                : nothing}
+							${repeat(this._tabs, (tab) => tab.name, (tab, index) => {
+                const path = 'tab/' + encodeFolderName(tab.name || '');
+                return this.#renderTab(path, tab.name, index);
             })}
 						</uui-tab-group>`
             : ''}
@@ -142,6 +129,22 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
 			</umb-body-layout>
 		`;
     }
+    #renderTab(path, name, index = 0) {
+        const isRootTab = path === null;
+        const hasRootItems = this._hasRootGroups || this._hasRootProperties;
+        const basePath = this._routerPath + '/';
+        const fullPath = basePath + (path ? path : 'root');
+        const active = fullPath === this._activePath ||
+            // When there are no root items, the first tab should be active on the alias path.
+            (!hasRootItems && index === 0 && basePath === this._activePath) ||
+            // When there are root items, the root tab should be active on both the canonical `/root` and alias `/` paths.
+            (hasRootItems && isRootTab && basePath === this._activePath);
+        return html `<uui-tab
+			label=${this.localize.string(name ?? '#general_unnamed')}
+			.active=${active}
+			href=${isRootTab ? basePath : fullPath}
+			data-mark="content-tab:${path ?? 'root'}"></uui-tab>`;
+    }
     static { this.styles = [
         UmbTextStyles,
         css `

package/dist-cms/packages/content/content-type/structure/content-type-structure-manager.class.js

@@ -67,6 +67,7 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
         this.ownerContentTypeAlias = createObservablePart(this.ownerContentType, (x) => x?.alias);
         this.ownerContentTypeName = createObservablePart(this.ownerContentType, (x) => x?.name);
         this.ownerContentTypeCompositions = createObservablePart(this.ownerContentType, (x) => x?.compositions);
+        // TODO: for v.18 make it pausable for this to be undefined when no content-type are present. [NL]
         this.contentTypeCompositions = this.#contentTypes.asObservablePart((contentTypes) => {
             return contentTypes.flatMap((x) => x.compositions ?? []);
         });