Fix readonly UI for create document user permission (#19554)

* Update document-workspace.context.ts

* Update src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts

Co-authored-by: Copilot <[email protected]>

* add check for undefined

---------

Co-authored-by: Copilot <[email protected]>

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts

@@ -73,8 +73,6 @@ export class UmbDocumentWorkspaceContext
 
 	#isTrashedContext = new UmbIsTrashedEntityContext(this);
 	#publishingContext?: typeof UMB_DOCUMENT_PUBLISHING_WORKSPACE_CONTEXT.TYPE;
-	#userCanCreate = false;
-	#userCanUpdate = false;
 
 	constructor(host: UmbControllerHost) {
 		super(host, {
@@ -126,52 +124,19 @@ export class UmbDocumentWorkspaceContext
 			this.#publishingContext = context;
 		});
 
-		createExtensionApiByAlias(this, UMB_DOCUMENT_USER_PERMISSION_CONDITION_ALIAS, [
-			{
-				config: {
-					allOf: [UMB_USER_PERMISSION_DOCUMENT_CREATE],
-				},
-				onChange: (permitted: boolean) => {
-					if (permitted === this.#userCanCreate) return;
-					this.#userCanCreate = permitted;
-					this.#setReadOnlyStateForUserPermission(
-						UMB_USER_PERMISSION_DOCUMENT_CREATE,
-						this.#userCanCreate,
-						'You do not have permission to create documents.',
-					);
-				},
-			},
-		]);
-
-		createExtensionApiByAlias(this, UMB_DOCUMENT_USER_PERMISSION_CONDITION_ALIAS, [
-			{
-				config: {
-					allOf: [UMB_USER_PERMISSION_DOCUMENT_UPDATE],
-				},
-				onChange: (permitted: boolean) => {
-					if (permitted === this.#userCanUpdate) return;
-					this.#userCanUpdate = permitted;
-					this.#setReadOnlyStateForUserPermission(
-						UMB_USER_PERMISSION_DOCUMENT_UPDATE,
-						this.#userCanUpdate,
-						'You do not have permission to update documents.',
-					);
-				},
-			},
-		]);
-
-		this.observe(this.variants, () => {
-			this.#setReadOnlyStateForUserPermission(
-				UMB_USER_PERMISSION_DOCUMENT_CREATE,
-				this.#userCanCreate,
-				'You do not have permission to create documents.',
-			);
-
-			this.#setReadOnlyStateForUserPermission(
-				UMB_USER_PERMISSION_DOCUMENT_UPDATE,
-				this.#userCanUpdate,
-				'You do not have permission to update documents.',
-			);
+		this.observe(this.isNew, (isNew) => {
+			if (isNew === undefined) return;
+			if (isNew) {
+				this.#enforceUserPermission(
+					UMB_USER_PERMISSION_DOCUMENT_CREATE,
+					'You do not have permission to create documents.',
+				);
+			} else {
+				this.#enforceUserPermission(
+					UMB_USER_PERMISSION_DOCUMENT_UPDATE,
+					'You do not have permission to update documents.',
+				);
+			}
 		});
 
 		this.routes.setRoutes([
@@ -225,6 +190,22 @@ export class UmbDocumentWorkspaceContext
 		]);
 	}
 
+	#enforceUserPermission(verb: string, message: string) {
+		// We set the initial permission state to false because the condition is false by default and only execute the callback if it changes.
+		this.#handleUserPermissionChange(verb, false, message);
+
+		createExtensionApiByAlias(this, UMB_DOCUMENT_USER_PERMISSION_CONDITION_ALIAS, [
+			{
+				config: {
+					allOf: [verb],
+				},
+				onChange: (permitted: boolean) => {
+					this.#handleUserPermissionChange(verb, permitted, message);
+				},
+			},
+		]);
+	}
+
 	override resetState(): void {
 		super.resetState();
 		this.#isTrashedContext.setIsTrashed(false);
@@ -425,7 +406,7 @@ export class UmbDocumentWorkspaceContext
 		return new UmbDocumentPropertyDatasetContext(host, this, variantId);
 	}
 
-	async #setReadOnlyStateForUserPermission(identifier: string, permitted: boolean, message: string) {
+	async #handleUserPermissionChange(identifier: string, permitted: boolean, message: string) {
 		if (permitted) {
 			this.readOnlyGuard?.removeRule(identifier);
 			return;
@@ -434,6 +415,9 @@ export class UmbDocumentWorkspaceContext
 		this.readOnlyGuard?.addRule({
 			unique: identifier,
 			message,
+			/* This guard is a bit backwards. The rule is permitted to be read-only. 
+			If the user does not have permission, we set it to true = permitted to be read-only. */
+			permitted: true,
 		});
 	}