Link to content type and/or template from content/media/member info workspace view only if current user has access to settings (#17965)

* Link to content type and/or template from content/media/member info workspace view only if current user has access to sections.

* Fixed HTML

* add const for condition alias

* export const

* return permitted value in onChange callback

* use condition to check for access

* implement across content

* replace strings with consts

* replace strings with const

* remove attr with the ifDefined directive

* allow to pass in callback type

* Pass callback type

* Update index.ts

* add tests for UmbSectionUserPermissionCondition

---------

Co-authored-by: Mads Rasmussen <[email protected]>

Author: AndyButland

src/Umbraco.Web.UI.Client/src/libs/extension-api/condition/condition-controller-arguments.type.ts

@@ -3,4 +3,9 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export type UmbConditionControllerArguments<
 	ConditionConfigType extends UmbConditionConfigBase = UmbConditionConfigBase,
-> = { host: UmbControllerHost; config: ConditionConfigType; onChange: () => void };
+	ConditionOnChangeCallbackType = () => void,
+> = {
+	host: UmbControllerHost;
+	config: ConditionConfigType;
+	onChange: ConditionOnChangeCallbackType;
+};

src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/constants.ts

@@ -0,0 +1 @@
+export const UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS = 'Umb.Condition.SectionUserPermission';

src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/manifests.ts

@@ -1,11 +1,12 @@
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from './constants.js';
 import { UmbSectionAliasCondition } from './section-alias.condition.js';
 import { UmbSectionUserPermissionCondition } from './section-user-permission.condition.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'condition',
 		name: 'Section User Permission Condition',
-		alias: 'Umb.Condition.SectionUserPermission',
+		alias: UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS,
 		api: UmbSectionUserPermissionCondition,
 	},
 	{

src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/section-user-permission.condition.test.ts

@@ -0,0 +1,65 @@
+import { expect } from '@open-wc/testing';
+import { UmbNotificationContext } from '@umbraco-cms/backoffice/notification';
+import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbCurrentUserContext, UmbCurrentUserStore } from '@umbraco-cms/backoffice/current-user';
+import { UmbSectionUserPermissionCondition } from './section-user-permission.condition';
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from './constants.js';
+
+@customElement('test-controller-host')
+class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {
+	currentUserContext = new UmbCurrentUserContext(this);
+
+	constructor() {
+		super();
+		new UmbCurrentUserStore(this);
+		new UmbNotificationContext(this);
+	}
+
+	async init() {
+		await this.currentUserContext.load();
+	}
+}
+
+describe('UmbSectionUserPermissionCondition', () => {
+	let hostElement: UmbTestControllerHostElement;
+	let condition: UmbSectionUserPermissionCondition;
+
+	beforeEach(async () => {
+		hostElement = new UmbTestControllerHostElement();
+		document.body.appendChild(hostElement);
+		await hostElement.init();
+	});
+
+	afterEach(() => {
+		document.body.innerHTML = '';
+	});
+
+	it('should return true if the user have access to the section', (done) => {
+		condition = new UmbSectionUserPermissionCondition(hostElement, {
+			host: hostElement,
+			config: {
+				alias: UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS,
+				match: 'Umb.Section.Content',
+			},
+			onChange: (permitted) => {
+				expect(permitted).to.be.true;
+				done();
+			},
+		});
+	});
+
+	it('should return false if the user does not have access to the section', (done) => {
+		condition = new UmbSectionUserPermissionCondition(hostElement, {
+			host: hostElement,
+			config: {
+				alias: UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS,
+				match: 'DOES_NOT_EXIST',
+			},
+			onChange: (permitted) => {
+				expect(permitted).to.be.false;
+				done();
+			},
+		});
+	});
+});

src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/section-user-permission.condition.ts

@@ -4,12 +4,18 @@ import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
+// Do not export - for internal use only
+type UmbOnChangeCallbackType = (permitted: boolean) => void;
+
 export class UmbSectionUserPermissionCondition extends UmbControllerBase implements UmbExtensionCondition {
 	config: UmbSectionUserPermissionConditionConfig;
 	permitted = false;
-	#onChange: () => void;
+	#onChange: UmbOnChangeCallbackType;
 
-	constructor(host: UmbControllerHost, args: UmbConditionControllerArguments<UmbSectionUserPermissionConditionConfig>) {
+	constructor(
+		host: UmbControllerHost,
+		args: UmbConditionControllerArguments<UmbSectionUserPermissionConditionConfig, UmbOnChangeCallbackType>,
+	) {
 		super(host);
 		this.config = args.config;
 		this.#onChange = args.onChange;
@@ -20,7 +26,7 @@ export class UmbSectionUserPermissionCondition extends UmbControllerBase impleme
 				(currentUser) => {
 					const allowedSections = currentUser?.allowedSections || [];
 					this.permitted = allowedSections.includes(this.config.match);
-					this.#onChange();
+					this.#onChange(this.permitted);
 				},
 				'umbSectionUserPermissionConditionObserver',
 			);

src/Umbraco.Web.UI.Client/src/packages/core/section/conditions/types.ts

@@ -1,6 +1,9 @@
+import type { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from './constants.js';
 import type { UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
 
-export type UmbSectionUserPermissionConditionConfig = UmbConditionConfigBase<'Umb.Condition.SectionUserPermission'> & {
+export type UmbSectionUserPermissionConditionConfig = UmbConditionConfigBase<
+	typeof UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS
+> & {
 	/**
 	 *
 	 *

src/Umbraco.Web.UI.Client/src/packages/core/section/constants.ts

@@ -1,2 +1,3 @@
+export * from './conditions/constants.js';
 export * from './paths.js';
 export * from './repository/constants.js';

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/public-access/manifests.ts

@@ -1,5 +1,6 @@
 import { UMB_DOCUMENT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_USER_PERMISSION_DOCUMENT_PUBLIC_ACCESS } from '../../user-permissions/index.js';
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '@umbraco-cms/backoffice/section';
 import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from '@umbraco-cms/backoffice/recycle-bin';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -25,7 +26,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 				alias: UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS,
 			},
 			{
-				alias: 'Umb.Condition.SectionUserPermission',
+				alias: UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS,
 				match: 'Umb.Section.Members',
 			},
 		],

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts

@@ -11,6 +11,9 @@ import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
 import { UMB_TEMPLATE_PICKER_MODAL, UmbTemplateItemRepository } from '@umbraco-cms/backoffice/template';
 import type { UmbDocumentTypeDetailModel } from '@umbraco-cms/backoffice/document-type';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
+import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '@umbraco-cms/backoffice/section';
+import { UMB_SETTINGS_SECTION_ALIAS } from '@umbraco-cms/backoffice/settings';
 
 // import of local components
 import './document-workspace-view-info-links.element.js';
@@ -48,6 +51,9 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	@state()
 	private _variantsWithPendingChanges: Array<any> = [];
 
+	@state()
+	private _hasSettingsAccess: boolean = false;
+
 	#workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
 	#templateRepository = new UmbTemplateItemRepository(this);
 	#documentPublishingWorkspaceContext?: typeof UMB_DOCUMENT_PUBLISHING_WORKSPACE_CONTEXT.TYPE;
@@ -83,6 +89,17 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			this.#documentPublishingWorkspaceContext = instance;
 			this.#observePendingChanges();
 		});
+
+		createExtensionApiByAlias(this, UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS, [
+			{
+				config: {
+					match: UMB_SETTINGS_SECTION_ALIAS,
+				},
+				onChange: (permitted: boolean) => {
+					this._hasSettingsAccess = permitted;
+				},
+			},
+		]);
 	}
 
 	#observeContent() {
@@ -189,7 +206,10 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 				<strong><umb-localize key="content_documentType">Document Type</umb-localize></strong>
 				<uui-ref-node-document-type
 					standalone
-					href=${editDocumentTypePath + 'edit/' + this._documentTypeUnique}
+					href=${ifDefined(
+						this._hasSettingsAccess ? editDocumentTypePath + 'edit/' + this._documentTypeUnique : undefined,
+					)}
+					?readonly=${!this._hasSettingsAccess}
 					name=${ifDefined(this.localize.string(this._documentTypeName ?? ''))}>
 					<umb-icon slot="icon" name=${ifDefined(this._documentTypeIcon)}></umb-icon>
 				</uui-ref-node-document-type>
@@ -215,7 +235,10 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 							<uui-ref-node
 								standalone
 								name=${ifDefined(this._templateName)}
-								href=${editTemplatePath + 'edit/' + this._templateUnique}>
+								href=${ifDefined(
+									this._hasSettingsAccess ? editTemplatePath + 'edit/' + this._templateUnique : undefined,
+								)}
+								?readonly=${!this._hasSettingsAccess}>
 								<uui-icon slot="icon" name="icon-document-html"></uui-icon>
 								<uui-action-bar slot="actions">
 									<uui-button
@@ -311,6 +334,11 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			.variant-state > span {
 				color: var(--uui-color-divider-emphasis);
 			}
+
+			uui-ref-node-document-type[readonly] {
+				padding-top: 7px;
+				padding-bottom: 7px;
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/documents/section/manifests.ts

@@ -1,5 +1,6 @@
 import { UMB_CONTENT_SECTION_ALIAS } from '@umbraco-cms/backoffice/content';
 import { UMB_DOCUMENT_ROOT_ENTITY_TYPE, UMB_CONTENT_MENU_ALIAS } from '@umbraco-cms/backoffice/document';
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '@umbraco-cms/backoffice/section';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
@@ -13,7 +14,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.SectionUserPermission',
+				alias: UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS,
 				match: UMB_CONTENT_SECTION_ALIAS,
 			},
 		],