Block permissions: Correction of read-only inheritance and language access (closes #22472, #21973)

src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts

@@ -1,4 +1,4 @@
 import { onInit } from '../../packages/core/entry-point.js';
 import { UmbAppErrorElement } from './app-error.element.js';
 import { UmbAppAuthController } from './app-auth.controller.js';
 import { UmbAppAuthElement } from './app-auth.element.js';
@@ -14,17 +14,62 @@
 import { pathWithoutBasePath } from '@umbraco-cms/backoffice/router';
 import { RuntimeLevelModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { UmbContextDebugController } from '@umbraco-cms/backoffice/debug';
-import { UmbBundleExtensionInitializer, UmbServerExtensionRegistrator } from '@umbraco-cms/backoffice/extension-api';
+import {
+	UmbBundleExtensionInitializer,
+	UmbServerExtensionRegistrator,
+	type ManifestBase,
+} from '@umbraco-cms/backoffice/extension-api';
 import {
 	UmbAppEntryPointExtensionInitializer,
 	umbExtensionsRegistry,
+	type UmbExtensionManifestKind,
 } from '@umbraco-cms/backoffice/extension-registry';
-import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
 import { redirectToStoredPath } from '@umbraco-cms/backoffice/utils';
 import { umbHttpClient } from '@umbraco-cms/backoffice/http-client';
 import { UmbViewContext } from '@umbraco-cms/backoffice/view';
 
 import './app-logo.element.js';
+import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
+
+const CORE_PACKAGES: Array<Promise<{ name: string; extensions: Array<ManifestBase | UmbExtensionManifestKind> }>> = [
+	import('../../packages/block/umbraco-package.js'),
+	import('../../packages/clipboard/umbraco-package.js'),
+	import('../../packages/code-editor/umbraco-package.js'),
+	import('../../packages/content/umbraco-package.js'),
+	import('../../packages/data-type/umbraco-package.js'),
+	import('../../packages/dictionary/umbraco-package.js'),
+	import('../../packages/documents/umbraco-package.js'),
+	import('../../packages/embedded-media/umbraco-package.js'),
+	import('../../packages/extension-insights/umbraco-package.js'),
+	import('../../packages/health-check/umbraco-package.js'),
+	import('../../packages/help/umbraco-package.js'),
+	import('../../packages/language/umbraco-package.js'),
+	import('../../packages/log-viewer/umbraco-package.js'),
+	import('../../packages/management-api/umbraco-package.js'),
+	import('../../packages/markdown-editor/umbraco-package.js'),
+	import('../../packages/media/umbraco-package.js'),
+	import('../../packages/members/umbraco-package.js'),
+	import('../../packages/models-builder/umbraco-package.js'),
+	import('../../packages/multi-url-picker/umbraco-package.js'),
+	import('../../packages/packages/umbraco-package.js'),
+	import('../../packages/performance-profiling/umbraco-package.js'),
+	import('../../packages/property-editors/umbraco-package.js'),
+	import('../../packages/publish-cache/umbraco-package.js'),
+	import('../../packages/relations/umbraco-package.js'),
+	import('../../packages/rte/umbraco-package.js'),
+	import('../../packages/settings/umbraco-package.js'),
+	import('../../packages/static-file/umbraco-package.js'),
+	import('../../packages/sysinfo/umbraco-package.js'),
+	import('../../packages/tags/umbraco-package.js'),
+	import('../../packages/telemetry/umbraco-package.js'),
+	import('../../packages/templating/umbraco-package.js'),
+	import('../../packages/tiptap/umbraco-package.js'),
+	import('../../packages/translation/umbraco-package.js'),
+	import('../../packages/ufm/umbraco-package.js'),
+	import('../../packages/umbraco-news/umbraco-package.js'),
+	import('../../packages/user/umbraco-package.js'),
+	import('../../packages/webhook/umbraco-package.js'),
+];
 
 @customElement('umb-app')
 export class UmbAppElement extends UmbLitElement {
@@ -129,18 +174,22 @@
 		{
 			path: '**',
 			component: () => import('../backoffice/backoffice.element.js'),
-			guards: [this.#isAuthorizedGuard()],
+			guards: [this.#isAuthorizedGuard(), this.#loadedGuard()],
 		},
 	];
 
 	#authContext?: typeof UMB_AUTH_CONTEXT.TYPE;
 	#serverConnection?: UmbServerConnection;
 	#authController = new UmbAppAuthController(this);
+	#bundleInitializer: UmbBundleExtensionInitializer;
+
+	#currentUser?: typeof UMB_CURRENT_USER_CONTEXT.TYPE;
+	#packageModules?: Promise<Array<{ name: string; extensions: Array<ManifestBase | UmbExtensionManifestKind> }>>;
 
 	constructor() {
 		super();
 
-		new UmbBundleExtensionInitializer(this, umbExtensionsRegistry);
+		this.#bundleInitializer = new UmbBundleExtensionInitializer(this, umbExtensionsRegistry);
 
 		new UUIIconRegistryEssential().attach(this);
 
@@ -149,6 +198,13 @@
 		new UmbNetworkConnectionStatusManager(this);
 
 		new UmbViewContext(this, null);
+
+		this.consumeContext(UMB_CURRENT_USER_CONTEXT, (userContext) => {
+			this.#currentUser = userContext;
+			if (userContext) {
+				this.#loadCurrentUser();
+			}
+		});
 	}
 
 	override connectedCallback(): void {
@@ -166,6 +222,21 @@
 		);
 		this.#authContext.configureClient(umbHttpClient);
 
+		this.observe(
+			this.#authContext.isAuthorized,
+			async (isAuthorized) => {
+				if (isAuthorized === undefined) return;
+				if (isAuthorized) {
+					// TODO: Remove dependency on current user context from the app element in future [MR]
+					this.#loadCurrentUser();
+				} else {
+					// TODO: Unregistering all extensions from v.18 [NL]
+					//void this.#unregisterExtensions();
+				}
+			},
+			null,
+		);
+
 		this.#serverConnection = await new UmbServerConnection(this, this.serverUrl).connect();
 		new UmbServerContext(this, {
 			backofficePath: this.backofficePath,
@@ -178,8 +249,7 @@
 
 		// Register public extensions (login extensions)
 		await new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPublicExtensions();
-		const initializer = new UmbAppEntryPointExtensionInitializer(this, umbExtensionsRegistry);
-		await firstValueFrom(initializer.loaded);
+		new UmbAppEntryPointExtensionInitializer(this, umbExtensionsRegistry);
 
 		// Try to initialise the auth flow and get the runtime status
 		try {
@@ -238,6 +308,33 @@
 		await this.#authContext.setInitialState();
 	}
 
+	async #registerExtensions() {
+		if (this.#packageModules === undefined) {
+			this.#packageModules = Promise.all(CORE_PACKAGES);
+			this.#packageModules.then(() => {
+				this.#loadCurrentUser();
+			});
+		}
+
+		umbExtensionsRegistry.registerMany((await this.#packageModules).flatMap((modules) => modules.extensions));
+	}
+
+	// TODO (V18): Unregister extensions on sign-out. [NL]
+	/*
+		async #unregisterExtensions() {
+			if (!this.#packageModules) return;
+			(await this.#packageModules).forEach((packageModule) => {
+				const aliases = packageModule.extensions.map((extension) => extension.alias);
+				umbExtensionsRegistry.unregisterMany(aliases);
+			});
+		}
+	*/
+
+	#loadCurrentUser() {
+		if (!this.#currentUser || !this.#packageModules) return;
+		this.#currentUser.load();
+	}
+
 	#redirect() {
 		const pathname = pathWithoutBasePath({ start: true, end: false });
 
@@ -292,6 +389,26 @@
 		return () => this.#authController.isAuthorized() ?? false;
 	}
 
+	#loadedGuard(): Guard {
+		return async () => {
+			const results = await Promise.allSettled([
+				this.observe(this.#bundleInitializer?.loaded).asPromise(),
+				this.#registerExtensions(),
+				new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPrivateExtensions(),
+			]);
+
+			const result = results.reduce((acc, curr) => acc && curr.status === 'fulfilled', true);
+			if (result === false) {
+				this.#errorPage(
+					'Extensions failed loading, this might be due to a network issue or a server error. Check that extensions registered on the server are valid.',
+					undefined,
+					{ headline: 'Failed to load extensions' },
+				);
+			}
+			return result;
+		};
+	}
+
 	#errorPage(errorMsg: string, error?: unknown, options?: { headline?: string; hideBackButton?: boolean }) {
 		// Redirect to the error page
 		this._routes = [
@@ -312,7 +429,9 @@
 	}
 
 	override render() {
-		return html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
+		return html`<umb-router-slot id="router-slot" .routes=${this._routes}
+			><div id="loader"><uui-loader data-mark="app-router-loader"></uui-loader></div
+		></umb-router-slot>`;
 	}
 
 	static override styles = css`
@@ -327,6 +446,20 @@
 			width: 100%;
 			height: 100vh;
 		}
+
+		#loader {
+			display: flex;
+			height: 100%;
+			justify-content: center;
+			align-items: center;
+			opacity: 0;
+			animation: fadeIn 240ms forwards;
+		}
+		@keyframes fadeIn {
+			to {
+				opacity: 1;
+			}
+		}
 	`;
 }
 

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.context.ts

@@ -6,7 +6,6 @@ import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { UmbSysinfoRepository } from '@umbraco-cms/backoffice/sysinfo';
-import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
 import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
 import type { ManifestSection } from '@umbraco-cms/backoffice/section';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
@@ -26,13 +25,7 @@ export class UmbBackofficeContext extends UmbContextBase {
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_BACKOFFICE_CONTEXT);
 
-		// TODO: We need to ensure this request is called every time the user logs in, but this should be done somewhere across the app and not here [JOV]
-		this.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {
-			this.observe(authContext?.isAuthorized, (isAuthorized) => {
-				if (!isAuthorized) return;
-				this.#getVersion();
-			});
-		});
+		this.#getVersion();
 
 		this.consumeContext(UMB_CURRENT_USER_CONTEXT, (userContext) => {
 			this.observe(

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts

@@ -5,52 +5,10 @@ import {
 	UmbEntryPointExtensionInitializer,
 	umbExtensionsRegistry,
 } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbServerExtensionRegistrator } from '@umbraco-cms/backoffice/extension-api';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
 
 import './components/index.js';
 
-const CORE_PACKAGES = [
-	import('../../packages/block/umbraco-package.js'),
-	import('../../packages/clipboard/umbraco-package.js'),
-	import('../../packages/code-editor/umbraco-package.js'),
-	import('../../packages/content/umbraco-package.js'),
-	import('../../packages/data-type/umbraco-package.js'),
-	import('../../packages/dictionary/umbraco-package.js'),
-	import('../../packages/documents/umbraco-package.js'),
-	import('../../packages/embedded-media/umbraco-package.js'),
-	import('../../packages/extension-insights/umbraco-package.js'),
-	import('../../packages/health-check/umbraco-package.js'),
-	import('../../packages/help/umbraco-package.js'),
-	import('../../packages/language/umbraco-package.js'),
-	import('../../packages/log-viewer/umbraco-package.js'),
-	import('../../packages/management-api/umbraco-package.js'),
-	import('../../packages/markdown-editor/umbraco-package.js'),
-	import('../../packages/media/umbraco-package.js'),
-	import('../../packages/members/umbraco-package.js'),
-	import('../../packages/models-builder/umbraco-package.js'),
-	import('../../packages/multi-url-picker/umbraco-package.js'),
-	import('../../packages/packages/umbraco-package.js'),
-	import('../../packages/performance-profiling/umbraco-package.js'),
-	import('../../packages/property-editors/umbraco-package.js'),
-	import('../../packages/publish-cache/umbraco-package.js'),
-	import('../../packages/relations/umbraco-package.js'),
-	import('../../packages/rte/umbraco-package.js'),
-	import('../../packages/settings/umbraco-package.js'),
-	import('../../packages/static-file/umbraco-package.js'),
-	import('../../packages/sysinfo/umbraco-package.js'),
-	import('../../packages/tags/umbraco-package.js'),
-	import('../../packages/telemetry/umbraco-package.js'),
-	import('../../packages/templating/umbraco-package.js'),
-	import('../../packages/tiptap/umbraco-package.js'),
-	import('../../packages/translation/umbraco-package.js'),
-	import('../../packages/ufm/umbraco-package.js'),
-	import('../../packages/umbraco-news/umbraco-package.js'),
-	import('../../packages/user/umbraco-package.js'),
-	import('../../packages/webhook/umbraco-package.js'),
-];
-
 @customElement('umb-backoffice')
 export class UmbBackofficeElement extends UmbLitElement {
 	/**
@@ -61,33 +19,11 @@ export class UmbBackofficeElement extends UmbLitElement {
 
 	constructor() {
 		super();
-
 		new UmbBackofficeContext(this);
-
 		new UmbBackofficeEntryPointExtensionInitializer(this, umbExtensionsRegistry);
 		new UmbEntryPointExtensionInitializer(this, umbExtensionsRegistry);
 	}
 
-	override async firstUpdated() {
-		// TODO: Move this logic into the Context? [NL]
-		await this.#extensionsAfterAuth();
-
-		// So far local packages are this simple to register, so no need for a manager to do that:
-		CORE_PACKAGES.forEach(async (packageImport) => {
-			const packageModule = await packageImport;
-			umbExtensionsRegistry.registerMany(packageModule.extensions);
-		});
-	}
-
-	async #extensionsAfterAuth() {
-		const authContext = await this.getContext(UMB_AUTH_CONTEXT, { preventTimeout: true });
-		if (!authContext) {
-			throw new Error('UmbBackofficeElement requires the UMB_AUTH_CONTEXT to be set.');
-		}
-		await this.observe(authContext.isAuthorized).asPromise();
-		await new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPrivateExtensions();
-	}
-
 	override render() {
 		return html`
 			<umb-backoffice-header></umb-backoffice-header>

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts

@@ -10,7 +10,7 @@ import type { PageComponent, UmbRoute } from '@umbraco-cms/backoffice/router';
 @customElement('umb-backoffice-main')
 export class UmbBackofficeMainElement extends UmbLitElement {
 	@state()
-	private _routes: Array<UmbRoute> = [];
+	private _routes?: Array<UmbRoute>;
 
 	@state()
 	private _sections: Array<ManifestSection> = [];
@@ -82,7 +82,9 @@ export class UmbBackofficeMainElement extends UmbLitElement {
 	}
 
 	override render() {
-		if (!this._routes.length) return;
+		if (!this._routes || !this._routes.length) {
+			return html`<div id="loader"><uui-loader></uui-loader></div>`;
+		}
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
 
@@ -96,6 +98,19 @@ export class UmbBackofficeMainElement extends UmbLitElement {
 					100% - 60px
 				); /* 60 => top header height, TODO: Make sure this comes from somewhere so it is maintainable and eventually responsive. */
 			}
+
+			#loader {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				opacity: 0;
+				animation: fadeIn 240ms forwards;
+			}
+			@keyframes fadeIn {
+				to {
+					opacity: 1;
+				}
+			}
 		`,
 	];
 }