Set document to readonly when a user is not allowed to create / update (#18076)

* split manifest file

* use const

* use const

* use const

* require permission to create or update to render save action

* require permission to update to render "save and preview"

* require permission to update + publish to render "save and publish"

* keep button as it is extendable

* keep buttons as they are extendable

* set readonly state based on user permission

* render readonly tag for invariant documents

* remove double array

* return permitted state in callback

* disable save button if all variants are read only

* rename private method

* split check on create vs update

* clear state when resetting the state

* add null check

* remove unused

* Update document-user-permission.condition.ts

* change translation to browse

* remove create permission

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -14,7 +14,7 @@ export default {
 	actions: {
 		assigndomain: 'Culture and Hostnames',
 		auditTrail: 'Audit Trail',
-		browse: 'Browse Node',
+		browse: 'Browse',
 		changeDataType: 'Change Data Type',
 		changeDocType: 'Change Document Type',
 		chooseWhereToCopy: 'Choose where to copy',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -13,7 +13,7 @@ export default {
 	actions: {
 		assigndomain: 'Culture and Hostnames',
 		auditTrail: 'Audit Trail',
-		browse: 'Browse Node',
+		browse: 'Browse',
 		changeDataType: 'Change Data Type',
 		changeDocType: 'Change Document Type',
 		chooseWhereToCopy: 'Choose where to copy',

src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/content-detail-workspace-base.ts

@@ -719,6 +719,11 @@ export abstract class UmbContentDetailWorkspaceContextBase<
 		this._closeModal();
 	}
 
+	override resetState() {
+		super.resetState();
+		this.readOnlyState.clear();
+	}
+
 	abstract getContentTypeUnique(): string | undefined;
 
 	abstract createPropertyDatasetContext(

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts

@@ -48,7 +48,7 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 	private _variantSelectorOpen = false;
 
 	@state()
-	private _readOnlyCultures: string[] = [];
+	private _readOnlyCultures: Array<string | null> = [];
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	protected _variantSorter = (a: VariantOptionModelType, b: VariantOptionModelType) => {
@@ -181,8 +181,7 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 	#setReadOnlyCultures() {
 		this._readOnlyCultures = this._variantOptions
 			.filter((variant) => this._readOnlyStates.some((state) => state.variantId.compare(variant)))
-			.map((variant) => variant.culture)
-			.filter((item) => item !== null) as string[];
+			.map((variant) => variant.culture);
 	}
 
 	#onPopoverToggle(event: ToggleEvent) {
@@ -252,7 +251,7 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 									`
 								: ''}
 						`
-					: nothing}
+					: html`<span id="read-only-tag" slot="append"> ${this.#renderReadOnlyTag(null)} </span>`}
 			</uui-input>
 
 			${this.#hasVariants()
@@ -310,12 +309,11 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 	}
 
 	#isReadOnly(culture: string | null) {
-		if (!culture) return false;
 		return this._readOnlyCultures.includes(culture);
 	}
 
 	#renderReadOnlyTag(culture?: string | null) {
-		if (!culture) return nothing;
+		if (culture === undefined) return nothing;
 		return this.#isReadOnly(culture)
 			? html`<uui-tag look="secondary">${this.localize.term('general_readOnly')}</uui-tag>`
 			: nothing;
@@ -368,6 +366,13 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 				white-space: nowrap;
 			}
 
+			#read-only-tag {
+				white-space: nowrap;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
 			uui-scroll-container {
 				max-height: 50dvh;
 			}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/publishing/publish-with-descendants/workspace-action/manifests.ts

@@ -1,4 +1,5 @@
 import {
+	UMB_DOCUMENT_USER_PERMISSION_CONDITION_ALIAS,
 	UMB_USER_PERMISSION_DOCUMENT_PUBLISH,
 	UMB_USER_PERMISSION_DOCUMENT_UPDATE,
 } from '../../../user-permissions/constants.js';
@@ -20,7 +21,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.UserPermission.Document',
+				alias: UMB_DOCUMENT_USER_PERMISSION_CONDITION_ALIAS,
 				allOf: [UMB_USER_PERMISSION_DOCUMENT_UPDATE, UMB_USER_PERMISSION_DOCUMENT_PUBLISH],
 			},
 			{

src/Umbraco.Web.UI.Client/src/packages/documents/documents/publishing/schedule-publish/workspace-action/manifests.ts

@@ -1,4 +1,5 @@
 import {
+	UMB_DOCUMENT_USER_PERMISSION_CONDITION_ALIAS,
 	UMB_USER_PERMISSION_DOCUMENT_PUBLISH,
 	UMB_USER_PERMISSION_DOCUMENT_UPDATE,
 } from '../../../user-permissions/constants.js';
@@ -19,7 +20,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.UserPermission.Document',
+				alias: UMB_DOCUMENT_USER_PERMISSION_CONDITION_ALIAS,
 				allOf: [UMB_USER_PERMISSION_DOCUMENT_UPDATE, UMB_USER_PERMISSION_DOCUMENT_PUBLISH],
 			},
 			{

src/Umbraco.Web.UI.Client/src/packages/documents/documents/publishing/unpublish/workspace-action/manifests.ts

@@ -1,4 +1,7 @@
-import { UMB_USER_PERMISSION_DOCUMENT_UNPUBLISH } from '../../../user-permissions/constants.js';
+import {
+	UMB_DOCUMENT_USER_PERMISSION_CONDITION_ALIAS,
+	UMB_USER_PERMISSION_DOCUMENT_UNPUBLISH,
+} from '../../../user-permissions/constants.js';
 import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from '@umbraco-cms/backoffice/recycle-bin';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -16,7 +19,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.UserPermission.Document',
+				alias: UMB_DOCUMENT_USER_PERMISSION_CONDITION_ALIAS,
 				allOf: [UMB_USER_PERMISSION_DOCUMENT_UNPUBLISH],
 			},
 			{

src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/conditions/document-user-permission.condition.ts

@@ -3,25 +3,31 @@ import type { UmbDocumentUserPermissionConditionConfig } from './types.js';
 import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
 import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
 import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
-import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { DocumentPermissionPresentationModel } from '@umbraco-cms/backoffice/external/backend-api';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+
+// Do not export - for internal use only
+type UmbOnChangeCallbackType = (permitted: boolean) => void;
+
+export class UmbDocumentUserPermissionCondition extends UmbControllerBase implements UmbExtensionCondition {
+	config: UmbDocumentUserPermissionConditionConfig;
+	permitted = false;
 
-export class UmbDocumentUserPermissionCondition
-	extends UmbConditionBase<UmbDocumentUserPermissionConditionConfig>
-	implements UmbExtensionCondition
-{
 	#entityType: string | undefined;
 	#unique: string | null | undefined;
 	#documentPermissions: Array<DocumentPermissionPresentationModel> = [];
 	#fallbackPermissions: string[] = [];
+	#onChange: UmbOnChangeCallbackType;
 
 	constructor(
 		host: UmbControllerHost,
-		args: UmbConditionControllerArguments<UmbDocumentUserPermissionConditionConfig>,
+		args: UmbConditionControllerArguments<UmbDocumentUserPermissionConditionConfig, UmbOnChangeCallbackType>,
 	) {
-		super(host, args);
+		super(host);
+		this.config = args.config;
+		this.#onChange = args.onChange;
 
 		this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
 			this.observe(
@@ -102,7 +108,11 @@ export class UmbDocumentUserPermissionCondition
 			oneOfPermitted = false;
 		}
 
-		this.permitted = allOfPermitted && oneOfPermitted;
+		const permitted = allOfPermitted && oneOfPermitted;
+		if (permitted === this.permitted) return;
+
+		this.permitted = permitted;
+		this.#onChange(permitted);
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/actions/manifests.ts

@@ -0,0 +1,48 @@
+import { UMB_DOCUMENT_WORKSPACE_ALIAS } from '../constants.js';
+import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from '@umbraco-cms/backoffice/recycle-bin';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'workspaceAction',
+		kind: 'default',
+		alias: 'Umb.WorkspaceAction.Document.Save',
+		name: 'Save Document Workspace Action',
+		weight: 80,
+		api: () => import('./save.action.js'),
+		meta: {
+			label: '#buttons_save',
+			look: 'secondary',
+			color: 'positive',
+		},
+		conditions: [
+			{
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
+				match: UMB_DOCUMENT_WORKSPACE_ALIAS,
+			},
+			{
+				alias: UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS,
+			},
+		],
+	},
+	{
+		type: 'workspaceAction',
+		kind: 'default',
+		alias: 'Umb.WorkspaceAction.Document.SaveAndPreview',
+		name: 'Save And Preview Document Workspace Action',
+		weight: 90,
+		api: () => import('./save-and-preview.action.js'),
+		meta: {
+			label: '#buttons_saveAndPreview',
+		},
+		conditions: [
+			{
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
+				match: UMB_DOCUMENT_WORKSPACE_ALIAS,
+			},
+			{
+				alias: UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS,
+			},
+		],
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/actions/save.action.ts

@@ -1,37 +1,55 @@
-import {
-	UMB_USER_PERMISSION_DOCUMENT_CREATE,
-	UMB_USER_PERMISSION_DOCUMENT_UPDATE,
-} from '../../user-permissions/constants.js';
-import { UmbDocumentUserPermissionCondition } from '../../user-permissions/conditions/document-user-permission.condition.js';
+import type { UmbDocumentVariantModel } from '../../types.js';
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../document-workspace.context-token.js';
+import type UmbDocumentWorkspaceContext from '../document-workspace.context.js';
+import type { UmbVariantState } from '@umbraco-cms/backoffice/utils';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
 export class UmbDocumentSaveWorkspaceAction extends UmbSubmitWorkspaceAction {
+	#documentWorkspaceContext?: UmbDocumentWorkspaceContext;
+	#variants: Array<UmbDocumentVariantModel> = [];
+	#readOnlyStates: Array<UmbVariantState> = [];
+
 	constructor(host: UmbControllerHost, args: any) {
 		super(host, args);
 
-		/* The action is disabled by default because the onChange callback
-		 will first be triggered when the condition is changed to permitted */
-		this.disable();
-
-		// TODO: this check is not sufficient. It will show the save button if a use
-		// has only create options. The best solution would be to split the two buttons into two separate actions
-		// with a condition on isNew to show/hide them
-		// The server will throw a permission error if this scenario happens
-		const condition = new UmbDocumentUserPermissionCondition(host, {
-			host,
-			config: {
-				alias: 'Umb.Condition.UserPermission.Document',
-				oneOf: [UMB_USER_PERMISSION_DOCUMENT_CREATE, UMB_USER_PERMISSION_DOCUMENT_UPDATE],
+		this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
+			this.#documentWorkspaceContext = context;
+			this.#observeVariants();
+			this.#observeReadOnlyStates();
+		});
+	}
+
+	#observeVariants() {
+		this.observe(
+			this.#documentWorkspaceContext?.variants,
+			(variants) => {
+				this.#variants = variants ?? [];
+				this.#check();
 			},
-			onChange: () => {
-				if (condition.permitted) {
-					this.enable();
-				} else {
-					this.disable();
-				}
+			'saveWorkspaceActionVariantsObserver',
+		);
+	}
+
+	#observeReadOnlyStates() {
+		this.observe(
+			this.#documentWorkspaceContext?.readOnlyState.states,
+			(readOnlyStates) => {
+				this.#readOnlyStates = readOnlyStates ?? [];
+				this.#check();
 			},
+			'saveWorkspaceActionReadOnlyStatesObserver',
+		);
+	}
+
+	#check() {
+		const allVariantsAreReadOnly = this.#variants.every((variant) => {
+			const variantId = new UmbVariantId(variant.culture, variant.segment);
+			return this.#readOnlyStates.some((state) => state.variantId.equal(variantId));
 		});
+
+		return allVariantsAreReadOnly ? this.disable() : this.enable();
 	}
 }