@umbraco-cms/backoffice 17.5.1 → 17.5.3

package/dist-cms/packages/documents/documents/workspace/document-workspace-editor.element.js

@@ -10,6 +10,7 @@ import { customElement, state, css, html } from '../../../../external/lit/index.
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../core/style/index.js';
 import { UMB_APP_LANGUAGE_CONTEXT } from '../../../language/index.js';
+import { createObservablePart } from '../../../../libs/observable-api/index.js';
 // TODO: This seem fully identical with Media Workspace Editor, so we can refactor this to a generic component. [NL]
 let UmbDocumentWorkspaceEditorElement = class UmbDocumentWorkspaceEditorElement extends UmbLitElement {
     #appLanguage;
@@ -17,13 +18,11 @@ let UmbDocumentWorkspaceEditorElement = class UmbDocumentWorkspaceEditorElement
     #workspaceRoute;
     #appCulture;
     #variants;
-    #isForbidden;
     constructor() {
         super();
         //
         // TODO: Refactor: when having a split view/variants context token, we can rename the split view/variants component to a generic and make this component generic as well. [NL]
         this._splitViewElement = new UmbDocumentWorkspaceSplitViewElement();
-        this.#isForbidden = false;
         this._loading = true;
         this._gotWorkspaceRoute = (e) => {
             this.#workspaceRoute = e.target.absoluteRouterPath;
@@ -34,20 +33,25 @@ let UmbDocumentWorkspaceEditorElement = class UmbDocumentWorkspaceEditorElement
             this.observe(this.#appLanguage?.appLanguageCulture, (appCulture) => {
                 const previousCulture = this.#appCulture;
                 this.#appCulture = appCulture;
-                this.#generateRoutes();
+                if (previousCulture === undefined) {
+                    // Only relevant to call generate routes initially, a later update of appCulture has no effect on the routes.
+                    this.#generateRoutes();
+                }
                 this.#syncUrlToCulture(previousCulture, appCulture);
             });
         });
         this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (instance) => {
             this.#workspaceContext = instance;
-            this.observe(this.#workspaceContext?.variantOptions, (variants) => {
+            this.observe(this.#workspaceContext
+                ? createObservablePart(this.#workspaceContext.variantOptions, (variants) => variants.map((v) => ({
+                    culture: v.culture,
+                    segment: v.segment,
+                    unique: v.unique,
+                })))
+                : undefined, (variants) => {
                 this.#variants = variants;
                 this.#generateRoutes();
             }, '_observeVariants');
-            this.observe(this.#workspaceContext?.forbidden.isOn, (isForbidden) => {
-                this.#isForbidden = isForbidden ?? false;
-                this.#generateRoutes();
-            }, '_observeForbidden');
             this.observe(this.#workspaceContext?.loading.isOn, (loading) => {
                 this._loading = loading ?? false;
             }, '_observeLoading');
@@ -80,8 +84,7 @@ let UmbDocumentWorkspaceEditorElement = class UmbDocumentWorkspaceEditorElement
     }
     #generateRoutes() {
         if (!this.#variants || this.#variants.length === 0 || !this.#appCulture) {
-            this._routes = [];
-            this.#ensureForbiddenRoute(this._routes);
+            this._routes = [this.#createNotFoundRoute()];
             return;
         }
         // Generate split view routes for all available routes
@@ -143,23 +146,19 @@ let UmbDocumentWorkspaceEditorElement = class UmbDocumentWorkspaceEditorElement
                 },
             });
         }
-        this.#ensureForbiddenRoute(routes);
+        routes.push(this.#createNotFoundRoute());
         this._routes = routes;
     }
-    /**
-     * Ensure that there is a route to handle forbidden access.
-     * This route will display a forbidden message when the user does not have permission to access certain resources.
-     * Also handles not found routes.
-     * @param routes
-     */
-    #ensureForbiddenRoute(routes = []) {
-        routes.push({
+    #createNotFoundRoute() {
+        return {
             path: '**',
             component: async () => {
                 const router = await import('../../../core/router/index.js');
-                return this.#isForbidden ? router.UmbRouteForbiddenElement : router.UmbRouteNotFoundElement;
+                return this.#workspaceContext?.forbidden.getIsOn()
+                    ? router.UmbRouteForbiddenElement
+                    : router.UmbRouteNotFoundElement;
             },
-        });
+        };
     }
     render() {
         return !this._loading && this._routes

package/dist-cms/packages/media/media/workspace/media-workspace-editor.element.js

@@ -9,16 +9,15 @@ import { UMB_MEDIA_WORKSPACE_CONTEXT } from './media-workspace.context-token.js'
 import { UmbTextStyles } from '../../../core/style/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import { customElement, state, css, html } from '../../../../external/lit/index.js';
+import { createObservablePart } from '../../../../libs/observable-api/index.js';
 let UmbMediaWorkspaceEditorElement = class UmbMediaWorkspaceEditorElement extends UmbLitElement {
     #workspaceContext;
     #variants;
-    #isForbidden;
     constructor() {
         super();
         //
         // TODO: Refactor: when having a split view/variants context token, we can rename the split view/variants component to a generic and make this component generic as well. [NL]
         this._splitViewElement = new UmbMediaWorkspaceSplitViewElement();
-        this.#isForbidden = false;
         this._loading = true;
         this._gotWorkspaceRoute = (e) => {
             this.#workspaceContext?.splitView.setWorkspaceRoute(e.target.absoluteRouterPath);
@@ -26,22 +25,21 @@ let UmbMediaWorkspaceEditorElement = class UmbMediaWorkspaceEditorElement extend
         this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (instance) => {
             this.#workspaceContext = instance;
             this.#observeVariants();
-            this.#observeForbidden();
             this.#observeLoading();
         });
     }
     #observeVariants() {
-        this.observe(this.#workspaceContext?.variantOptions, (options) => {
+        this.observe(this.#workspaceContext
+            ? createObservablePart(this.#workspaceContext.variantOptions, (variants) => variants.map((v) => ({
+                culture: v.culture,
+                segment: v.segment,
+                unique: v.unique,
+            })))
+            : undefined, (options) => {
             this.#variants = options;
             this._generateRoutes();
         }, '_observeVariants');
     }
-    #observeForbidden() {
-        this.observe(this.#workspaceContext?.forbidden.isOn, (forbidden) => {
-            this.#isForbidden = forbidden ?? false;
-            this._generateRoutes();
-        }, '_observeForbidden');
-    }
     #observeLoading() {
         this.observe(this.#workspaceContext?.loading.isOn, (loading) => {
             this._loading = loading ?? false;
@@ -49,8 +47,7 @@ let UmbMediaWorkspaceEditorElement = class UmbMediaWorkspaceEditorElement extend
     }
     async _generateRoutes() {
         if (!this.#variants || this.#variants.length === 0) {
-            this._routes = [];
-            this.#ensureForbiddenRoute(this._routes);
+            this._routes = [this.#createNotFoundRoute()];
             return;
         }
         // Generate split view routes for all available routes
@@ -90,23 +87,19 @@ let UmbMediaWorkspaceEditorElement = class UmbMediaWorkspaceEditorElement extend
                 redirectTo: routes[this.#variants.length * this.#variants.length]?.path,
             });
         }
-        this.#ensureForbiddenRoute(routes);
+        routes.push(this.#createNotFoundRoute());
         this._routes = routes;
     }
-    /**
-     * Ensure that there is a route to handle forbidden access.
-     * This route will display a forbidden message when the user does not have permission to access certain resources.
-     * Also handles not found routes.
-     * @param {Array<UmbRoute>} routes - The array of routes to append the forbidden route to
-     */
-    #ensureForbiddenRoute(routes = []) {
-        routes.push({
+    #createNotFoundRoute() {
+        return {
             path: '**',
             component: async () => {
                 const router = await import('../../../core/router/index.js');
-                return this.#isForbidden ? router.UmbRouteForbiddenElement : router.UmbRouteNotFoundElement;
+                return this.#workspaceContext?.forbidden.getIsOn()
+                    ? router.UmbRouteForbiddenElement
+                    : router.UmbRouteNotFoundElement;
             },
-        });
+        };
     }
     render() {
         return !this._loading && this._routes && this._routes.length > 0