User group: permissions grouping (#20584)

* clean up

* localizations

* group user permission by entity type

* adjustments

* fix lint errors

* Support granular permissions without entity type

Updated granular permission handling to allow permissions that are not tied to a specific entity type. Adjusted rendering logic and manifest interface to support undefined or empty forEntityTypes, and added UI for displaying ungrouped granular permissions.

* revert for now

---------

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

Author: 3 people

src/Umbraco.Web.UI.Client/examples/user-permission/localization/en.ts

@@ -1,6 +1,6 @@
 export default {
 	user: {
 		// eslint-disable-next-line @typescript-eslint/naming-convention
-		permissionsEntityGroup_dictionary: 'Dictionary',
+		permissionsEntityGroup_dictionary: 'Dictionary permissions',
 	},
 };

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

@@ -80,6 +80,7 @@ export default {
 		content: 'Indhold',
 		administration: 'Administration',
 		structure: 'Struktur',
+		general: 'Generelt',
 		other: 'Andet',
 	},
 	actionDescriptions: {
@@ -2082,10 +2083,10 @@ export default {
 		permissionsGranularHelp: 'Sæt rettigheder for specifikke noder',
 		granularRightsLabel: 'Dokumenter',
 		granularRightsDescription: 'Tillad adgang til specifikke dokumenter',
-		permissionsEntityGroup_document: 'Indhold',
-		permissionsEntityGroup_media: 'Medie',
-		permissionsEntityGroup_member: 'Medlemmer',
-		'permissionsEntityGroup_document-property-value': 'Dokumentegenskabsværdi',
+		permissionsEntityGroup_document: 'Indholdsrettigheder',
+		permissionsEntityGroup_media: 'Medierettigheder',
+		permissionsEntityGroup_member: 'Medlemsrettigheder',
+		'permissionsEntityGroup_document-property-value': 'Feltrettigheder',
 		permissionNoVerbs: 'Ingen tilladte rettigheder',
 		profile: 'Profil',
 		searchAllChildren: "Søg alle 'børn'",

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

@@ -80,6 +80,7 @@ export default {
 		content: 'Content',
 		administration: 'Administration',
 		structure: 'Structure',
+		general: 'General',
 		other: 'Other',
 	},
 	actionDescriptions: {
@@ -2104,10 +2105,10 @@ export default {
 		permissionsGranularHelp: 'Set permissions for specific nodes',
 		granularRightsLabel: 'Documents',
 		granularRightsDescription: 'Assign permissions to specific documents',
-		permissionsEntityGroup_document: 'Document',
-		permissionsEntityGroup_media: 'Media',
-		permissionsEntityGroup_member: 'Member',
-		'permissionsEntityGroup_document-property-value': 'Document Property Value',
+		permissionsEntityGroup_document: 'Document permissions',
+		permissionsEntityGroup_media: 'Media permissions',
+		permissionsEntityGroup_member: 'Member permissions',
+		'permissionsEntityGroup_document-property-value': 'Document Property Value permissions',
 		permissionNoVerbs: 'No allowed permissions',
 		profile: 'Profile',
 		searchAllChildren: 'Search all children',

src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document-property-value/manifests.ts

@@ -39,13 +39,14 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 		alias: 'Umb.UserGranularPermission.Document.PropertyValue',
 		name: 'Document Property Values Granular User Permission',
 		weight: 950,
+		forEntityTypes: [UMB_DOCUMENT_PROPERTY_VALUE_ENTITY_TYPE],
 		element: () =>
 			import(
 				'./input-document-property-value-user-permission/input-document-property-value-user-permission.element.js'
 			),
 		meta: {
 			schemaType: 'DocumentPropertyValuePermissionPresentationModel',
-			label: 'Document Property Values',
+			label: '#user_permissionsGranular',
 			description: 'Assign permissions to Document property values',
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document/input-document-granular-user-permission/input-document-granular-user-permission.element.ts

@@ -28,7 +28,7 @@ export class UmbInputDocumentGranularUserPermissionElement extends UUIFormContro
 	}
 
 	@property({ type: Array, attribute: false })
-	fallbackPermissions: Array<string> = [];
+	public fallbackPermissions: Array<string> = [];
 
 	@state()
 	private _items?: Array<UmbDocumentItemModel>;
@@ -50,7 +50,13 @@ export class UmbInputDocumentGranularUserPermissionElement extends UUIFormContro
 
 	async #observePickedDocuments(uniques: Array<string>) {
 		const { asObservable } = await this.#documentItemRepository.requestItems(uniques);
-		this.observe(asObservable?.(), (items) => (this._items = items), 'observeItems');
+		this.observe(
+			asObservable?.(),
+			(items) => {
+				this._items = items;
+			},
+			'observeItems',
+		);
 	}
 
 	async #editGranularPermission(item: UmbDocumentItemModel) {

src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document/manifests.ts

@@ -6,7 +6,6 @@ import {
 	UMB_USER_PERMISSION_DOCUMENT_CREATE,
 	UMB_USER_PERMISSION_DOCUMENT_NOTIFICATIONS,
 	UMB_USER_PERMISSION_DOCUMENT_PUBLISH,
-	UMB_USER_PERMISSION_DOCUMENT_PERMISSIONS,
 	UMB_USER_PERMISSION_DOCUMENT_UNPUBLISH,
 	UMB_USER_PERMISSION_DOCUMENT_UPDATE,
 	UMB_USER_PERMISSION_DOCUMENT_DUPLICATE,
@@ -91,7 +90,7 @@ const permissions: Array<ManifestEntityUserPermission> = [
 			description: '#actionDescriptions_publish',
 		},
 	},
-	{
+	/*{
 		type: 'entityUserPermission',
 		alias: UMB_USER_PERMISSION_DOCUMENT_PERMISSIONS,
 		name: 'Document Permissions User Permission',
@@ -101,7 +100,7 @@ const permissions: Array<ManifestEntityUserPermission> = [
 			label: '#actions_setPermissions',
 			description: '#actionDescriptions_rights',
 		},
-	},
+	},*/
 	{
 		type: 'entityUserPermission',
 		alias: UMB_USER_PERMISSION_DOCUMENT_UNPUBLISH,
@@ -204,11 +203,12 @@ export const granularPermissions: Array<ManifestGranularUserPermission> = [
 		alias: 'Umb.UserGranularPermission.Document',
 		name: 'Document Granular User Permission',
 		weight: 1000,
+		forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
 		element: () =>
 			import('./input-document-granular-user-permission/input-document-granular-user-permission.element.js'),
 		meta: {
 			schemaType: 'DocumentPermissionPresentationModel',
-			label: '#user_granularRightsLabel',
+			label: '#user_permissionsGranular',
 			description: '{#user_granularRightsDescription}',
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-granular-permission-list.element.ts renamed to src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-granular-permissions.element.ts

@@ -2,12 +2,15 @@ import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from '../user-group-workspace.contex
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api';
 import type { ManifestGranularUserPermission } from '@umbraco-cms/backoffice/user-permission';
-import { html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, state, nothing, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { filterFrozenArray } from '@umbraco-cms/backoffice/observable-api';
 
-@customElement('umb-user-group-granular-permission-list')
+@customElement('umb-user-group-entity-type-granular-permissions')
 export class UmbUserGroupGranularPermissionListElement extends UmbLitElement {
+	@property()
+	public entityType?: string;
+
 	@state()
 	private _userGroupPermissions?: Array<any>;
 
@@ -57,9 +60,21 @@ export class UmbUserGroupGranularPermissionListElement extends UmbLitElement {
 
 	override render() {
 		if (!this._userGroupPermissions) return;
+
+		if (!this.entityType) {
+			return html`
+				<umb-extension-slot
+					type="userGranularPermission"
+					.filter=${(manifest: ManifestGranularUserPermission) =>
+						manifest.forEntityTypes === undefined || manifest.forEntityTypes?.length === 0}
+					.renderMethod=${this.#renderProperty}></umb-extension-slot>
+			`;
+		}
+
 		return html`<umb-extension-slot
 			type="userGranularPermission"
-			.props=${{ fallbackPermissions: this._userGroupFallbackPermissions }}
+			.filter=${(manifest: ManifestGranularUserPermission) =>
+				manifest.forEntityTypes?.includes(this.entityType!) || manifest.forEntityTypes?.length === 0}
 			.renderMethod=${this.#renderProperty}></umb-extension-slot>`;
 	}
 
@@ -95,6 +110,6 @@ export default UmbUserGroupGranularPermissionListElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-user-group-granular-permission-list': UmbUserGroupGranularPermissionListElement;
+		'umb-user-group-entity-type-granular-permissions': UmbUserGroupGranularPermissionListElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-permission-groups.element.ts

@@ -0,0 +1,92 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, state, repeat, css, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+
+import './user-group-entity-type-permissions.element.js';
+import './user-group-entity-type-granular-permissions.element.js';
+
+@customElement('umb-user-group-entity-type-permission-groups')
+export class UmbUserGroupEntityTypePermissionGroupsElement extends UmbLitElement {
+	@state()
+	private _groups: Array<{ entityType: string; headline: string }> = [];
+
+	@state()
+	private _hasGranularPermissionsWithNoEntityType = false;
+
+	constructor() {
+		super();
+
+		this.observe(
+			umbExtensionsRegistry.byType('entityUserPermission'),
+			(manifests) => {
+				const entityTypes = [...new Set(manifests.flatMap((manifest) => manifest.forEntityTypes))];
+				this._groups = entityTypes
+					.map((entityType) => {
+						return {
+							entityType,
+							headline: this.localize.term(`user_permissionsEntityGroup_${entityType}`),
+						};
+					})
+					.sort((a, b) => a.headline.localeCompare(b.headline));
+			},
+			'umbUserPermissionsObserver',
+		);
+
+		this.#observeGranularPermissionsWithNoEntityType();
+	}
+
+	#observeGranularPermissionsWithNoEntityType() {
+		this.observe(
+			umbExtensionsRegistry.byTypeAndFilter(
+				'userGranularPermission',
+				(manifest) => manifest.forEntityTypes === undefined || manifest.forEntityTypes.length === 0,
+			),
+			(manifests) => {
+				this._hasGranularPermissionsWithNoEntityType = manifests.length > 0;
+			},
+		);
+	}
+
+	override render() {
+		return html`${repeat(
+			this._groups,
+			(group) => group.entityType,
+			(group) =>
+				html`<uui-box>
+					<div slot="headline">${group.headline}</div>
+
+					<umb-user-group-entity-type-permissions
+						.entityType=${group.entityType}></umb-user-group-entity-type-permissions>
+
+					<umb-user-group-entity-type-granular-permissions
+						.entityType=${group.entityType}></umb-user-group-entity-type-granular-permissions>
+				</uui-box>`,
+		)}
+		${this.#renderUngroupedGranularPermissions()}`;
+	}
+
+	#renderUngroupedGranularPermissions() {
+		if (!this._hasGranularPermissionsWithNoEntityType) return nothing;
+		return html`<uui-box headline=${this.localize.term('general_rights')}>
+			<umb-user-group-entity-type-granular-permissions></umb-user-group-entity-type-granular-permissions
+		></uui-box>`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			uui-box {
+				margin-top: var(--uui-size-space-6);
+			}
+		`,
+	];
+}
+
+export default UmbUserGroupEntityTypePermissionGroupsElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-user-group-entity-type-permission-groups': UmbUserGroupEntityTypePermissionGroupsElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-permissions.element.ts

@@ -0,0 +1,60 @@
+import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from '../user-group-workspace.context-token.js';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, state, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
+
+@customElement('umb-user-group-entity-type-permissions')
+export class UmbUserGroupEntityTypePermissionsElement extends UmbLitElement {
+	@property()
+	public entityType?: string;
+
+	@state()
+	private _fallBackPermissions?: Array<string>;
+
+	#userGroupWorkspaceContext?: typeof UMB_USER_GROUP_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_USER_GROUP_WORKSPACE_CONTEXT, (instance) => {
+			this.#userGroupWorkspaceContext = instance;
+			this.observe(
+				this.#userGroupWorkspaceContext?.fallbackPermissions,
+				(fallbackPermissions) => {
+					this._fallBackPermissions = fallbackPermissions;
+				},
+				'umbUserGroupEntityUserPermissionsObserver',
+			);
+		});
+	}
+
+	#onPermissionChange(event: UmbSelectionChangeEvent) {
+		event.stopPropagation();
+		const target = event.target as any;
+		const verbs = target.allowedVerbs;
+		if (verbs === undefined || verbs === null) throw new Error('The verbs are not defined');
+		this.#userGroupWorkspaceContext?.setFallbackPermissions(verbs);
+	}
+
+	override render() {
+		return this.entityType
+			? html`
+					<umb-input-entity-user-permission
+						.entityType=${this.entityType}
+						.allowedVerbs=${this._fallBackPermissions || []}
+						@change=${this.#onPermissionChange}></umb-input-entity-user-permission>
+				`
+			: nothing;
+	}
+
+	static override styles = [UmbTextStyles];
+}
+
+export default UmbUserGroupEntityTypePermissionsElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-user-group-entity-type-permissions': UmbUserGroupEntityTypePermissionsElement;
+	}
+}