mock document user permissions

src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts

@@ -1,4 +1,5 @@
 import { umbDocumentTypeData } from './document-type.data.js';
+import { umbUserPermissionData } from './user-permission.data.js';
 import { UmbEntityData } from './entity.data.js';
 import { createDocumentTreeItem } from './utils.js';
 import {
@@ -10,6 +11,7 @@ import {
 	PagedDocumentTypeResponseModel,
 	PagedRecycleBinItemResponseModel,
 } from '@umbraco-cms/backoffice/backend-api';
+import { DOCUMENT_ENTITY_TYPE } from '@umbraco-cms/backoffice/document';
 
 export const data: Array<DocumentResponseModel> = [
 	{
@@ -673,6 +675,16 @@ class UmbDocumentData extends UmbEntityData<DocumentResponseModel> {
 		const total = items.length;
 		return { items: treeItems, total };
 	}
+
+	// permissions
+
+	getUserPermissionsForDocument(id: string): Array<any> {
+		return umbUserPermissionData
+			.getAll()
+			.filter(
+				(permission) => permission.target.entityType === DOCUMENT_ENTITY_TYPE && permission.target.documentId === id,
+			);
+	}
 }
 
 export const umbDocumentData = new UmbDocumentData();

src/Umbraco.Web.UI.Client/src/mocks/data/entity.data.ts

@@ -8,6 +8,10 @@ export class UmbEntityData<T extends UmbEntityBase> extends UmbData<T> {
 		super(data);
 	}
 
+	getAll() {
+		return this.data;
+	}
+
 	getList(skip: number, take: number) {
 		return this.data.slice(skip, skip + take);
 	}

src/Umbraco.Web.UI.Client/src/mocks/data/user-permission.data.ts

@@ -0,0 +1,50 @@
+import { UmbEntityData } from './entity.data.js';
+import {
+	DOCUMENT_ENTITY_TYPE,
+	UMB_USER_PERMISSION_DOCUMENT_CREATE,
+	UMB_USER_PERMISSION_DOCUMENT_READ,
+} from '@umbraco-cms/backoffice/document';
+
+export type UserPermissionModel = {
+	id: string;
+	target: unknown;
+	permissions: Array<string>;
+};
+
+export const data: Array<UserPermissionModel> = [
+	{
+		id: '408074bb-f776-485e-b85e-c2473e45663b',
+		target: {
+			entityType: DOCUMENT_ENTITY_TYPE,
+			documentId: 'simple-document-id',
+			userGroupId: '9d24dc47-a4bf-427f-8a4a-b900f03b8a12',
+		},
+		permissions: [UMB_USER_PERMISSION_DOCUMENT_READ],
+	},
+	{
+		id: 'b70b1453-a912-4157-ba62-20c2f0ab6a88',
+		target: {
+			entityType: DOCUMENT_ENTITY_TYPE,
+			documentId: 'simple-document-id',
+			userGroupId: 'f4626511-b0d7-4ab1-aebc-a87871a5dcfa',
+		},
+		permissions: [UMB_USER_PERMISSION_DOCUMENT_READ, UMB_USER_PERMISSION_DOCUMENT_CREATE],
+	},
+	{
+		id: 'b70b1453-a912-4157-ba62-20c2f0ab6a88',
+		target: {
+			entityType: DOCUMENT_ENTITY_TYPE,
+			documentId: 'c05da24d-7740-447b-9cdc-bd8ce2172e38',
+			userGroupId: '9d24dc47-a4bf-427f-8a4a-b900f03b8a12',
+		},
+		permissions: [UMB_USER_PERMISSION_DOCUMENT_READ],
+	},
+];
+
+class UmbUserPermissionData extends UmbEntityData<UserPermissionModel> {
+	constructor() {
+		super(data);
+	}
+}
+
+export const umbUserPermissionData = new UmbUserPermissionData();

src/Umbraco.Web.UI.Client/src/mocks/handlers/document/index.ts

@@ -2,5 +2,12 @@ import { handlers as recycleBinHandlers } from './recycle-bin.handlers.js';
 import { handlers as treeHandlers } from './tree.handlers.js';
 import { handlers as documentHandlers } from './document.handlers.js';
 import { handlers as itemHandlers } from './item.handlers.js';
+import { handlers as permissionHandlers } from './permission.handlers.js';
 
-export const handlers = [...recycleBinHandlers, ...treeHandlers, ...itemHandlers, ...documentHandlers];
+export const handlers = [
+	...recycleBinHandlers,
+	...permissionHandlers,
+	...treeHandlers,
+	...itemHandlers,
+	...documentHandlers,
+];

src/Umbraco.Web.UI.Client/src/mocks/handlers/document/permission.handlers.ts

@@ -0,0 +1,14 @@
+const { rest } = window.MockServiceWorker;
+import { umbDocumentData } from '../../data/document.data.js';
+import { slug } from './slug.js';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+// TODO: temp handlers until we have a real API
+export const handlers = [
+	rest.get(umbracoPath(`${slug}/:id/permissions`), (req, res, ctx) => {
+		const id = req.params.id as string;
+		if (!id) return;
+		const response = umbDocumentData.getUserPermissionsForDocument(id);
+		return res(ctx.status(200), ctx.json(response));
+	}),
+];

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts

@@ -1,3 +1,4 @@
+import { UmbDocumentPermissionRepository } from '../../user-permissions/index.js';
 import { UmbUserGroupRepository } from '@umbraco-cms/backoffice/user-group';
 import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -12,23 +13,6 @@ import {
 } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbSelectedEvent } from '@umbraco-cms/backoffice/events';
-import { UmbId } from '@umbraco-cms/backoffice/id';
-import {
-	UMB_USER_PERMISSION_DOCUMENT_CREATE,
-	UMB_USER_PERMISSION_DOCUMENT_READ,
-} from '@umbraco-cms/backoffice/document';
-
-type UserPermissionModel<PermissionTargetType> = {
-	id: string;
-	target: PermissionTargetType;
-	permissions: Array<string>;
-};
-
-type DocumentGranularPermission = {
-	entityType: 'document';
-	documentId: string;
-	userGroupId: string;
-};
 
 type UmbUserGroupRefData = {
 	id: string;
@@ -49,28 +33,10 @@ export class UmbPermissionsModalElement extends UmbLitElement {
 	_userGroups: Array<UmbUserGroupRefData> = [];
 
 	@state()
-	_permissions: Array<UserPermissionModel<DocumentGranularPermission>> = [
-		{
-			id: new UmbId().toString(),
-			target: {
-				entityType: 'document',
-				documentId: '1234-1234-1234',
-				userGroupId: '9d24dc47-a4bf-427f-8a4a-b900f03b8a12',
-			},
-			permissions: [UMB_USER_PERMISSION_DOCUMENT_CREATE],
-		},
-		{
-			id: new UmbId().toString(),
-			target: {
-				entityType: 'document',
-				documentId: '1234-1234-1234',
-				userGroupId: 'f4626511-b0d7-4ab1-aebc-a87871a5dcfa',
-			},
-			permissions: [UMB_USER_PERMISSION_DOCUMENT_READ],
-		},
-	];
+	_userPermissions: Array<any> = [];
 
 	#userGroupRepository = new UmbUserGroupRepository(this);
+	#documentPermissionRepository = new UmbDocumentPermissionRepository(this);
 	#modalManagerContext?: UmbModalManagerContext;
 
 	#userGroupPickerModal?: UmbModalContext;
@@ -91,15 +57,23 @@ export class UmbPermissionsModalElement extends UmbLitElement {
 		});
 	}
 
+	protected async firstUpdated(): Promise<void> {
+		if (!this.data?.unique) throw new Error('Could not load permissions, no unique was provided');
+		const { data } = await this.#documentPermissionRepository.requestPermissions(this.data.unique);
+		if (data) {
+			this._userPermissions = data;
+		}
+	}
+
 	async connectedCallback(): Promise<void> {
 		super.connectedCallback();
 
-		const userGroupIds = [...new Set(this._permissions.map((permission) => permission.target.userGroupId))];
+		const userGroupIds = [...new Set(this._userPermissions.map((permission) => permission.target.userGroupId))];
 		const { data } = await this.#userGroupRepository.requestItems(userGroupIds);
 
 		const userGroups = data ?? [];
 
-		this._userGroups = this._permissions.map((entry) => {
+		this._userGroups = this._userPermissions.map((entry) => {
 			const userGroup = userGroups.find((userGroup) => userGroup.id == entry.target.userGroupId);
 			return {
 				id: entry.target.userGroupId,
@@ -148,7 +122,9 @@ export class UmbPermissionsModalElement extends UmbLitElement {
 								</umb-user-group-ref>`,
 						)}
 					</uui-ref-list>
-					<uui-button style="width: 100%;" @click=${this.#openUserGroupPickerModal} look="placeholder">Open</uui-button>
+					<uui-button style="width: 100%;" @click=${this.#openUserGroupPickerModal} look="placeholder"
+						>Select user group</uui-button
+					>
 				</uui-box>
 
 				<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._handleCancel}">Cancel</uui-button>
@@ -157,7 +133,7 @@ export class UmbPermissionsModalElement extends UmbLitElement {
 					id="confirm"
 					color="positive"
 					look="primary"
-					label="Confirm"
+					label="Save"
 					@click=${this._handleConfirm}></uui-button>
 			</umb-body-layout>
 		`;

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

@@ -1 +1,2 @@
 export * from './manifests.js';
+export * from './repository/index.js';

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

@@ -1,3 +1,4 @@
+import { manifests as repositoryManifests } from './repository/manifests.js';
 import type {
 	ManifestUserGranularPermission,
 	ManifestUserPermission,
@@ -202,4 +203,4 @@ export const granularPermissions: Array<ManifestUserGranularPermission> = [
 	},
 ];
 
-export const manifests = [...permissions, ...granularPermissions];
+export const manifests = [...repositoryManifests, ...permissions, ...granularPermissions];

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

@@ -0,0 +1,19 @@
+import { t } from 'msw/lib/glossary-de6278a9.js';
+import { UmbDocumentPermissionServerDataSource } from './document-permission.server.data.js';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbDocumentPermissionRepository {
+	#host: UmbControllerHostElement;
+
+	#permissionSource: UmbDocumentPermissionServerDataSource;
+
+	constructor(host: UmbControllerHostElement) {
+		this.#host = host;
+		this.#permissionSource = new UmbDocumentPermissionServerDataSource(this.#host);
+	}
+
+	async requestPermissions(id: string) {
+		if (!id) throw new Error(`id is required`);
+		return this.#permissionSource.requestPermissions(id);
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/repository/document-permission.server.data.ts

@@ -0,0 +1,32 @@
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+
+/**
+ * @export
+ * @class UmbUserGroupCollectionServerDataSource
+ * @implements {RepositoryDetailDataSource}
+ */
+export class UmbDocumentPermissionServerDataSource {
+	#host: UmbControllerHostElement;
+
+	/**
+	 * Creates an instance of UmbDocumentPermissionServerDataSource.
+	 * @param {UmbControllerHostElement} host
+	 * @memberof UmbDocumentPermissionServerDataSource
+	 */
+	constructor(host: UmbControllerHostElement) {
+		this.#host = host;
+	}
+
+	requestPermissions(id: string) {
+		return tryExecuteAndNotify(
+			this.#host,
+			fetch(`/umbraco/management/api/v1/document/${id}/permissions`, {
+				method: 'GET',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+			}).then((res) => res.json()),
+		);
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/repository/index.ts

@@ -0,0 +1 @@
+export * from './document-permission.repository.js';

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

@@ -0,0 +1,13 @@
+import { UmbDocumentPermissionRepository } from './document-permission.repository.js';
+import { ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_DOCUMENT_PERMISSION_REPOSITORY_ALIAS = 'Umb.Repository.Document.Permission';
+
+const repository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_DOCUMENT_PERMISSION_REPOSITORY_ALIAS,
+	name: 'Document Permission Repository',
+	class: UmbDocumentPermissionRepository,
+};
+
+export const manifests = [repository];

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

@@ -4,6 +4,7 @@ import { manifests as contentMenuManifest } from './menu.manifests.js';
 import { manifests as documentBlueprintManifests } from './document-blueprints/manifests.js';
 import { manifests as documentTypeManifests } from './document-types/manifests.js';
 import { manifests as documentManifests } from './documents/manifests.js';
+import { manifests as documentPermissionManifests } from './documents/user-permissions/index.js';
 
 export const manifests = [
 	...dashboardManifests,
@@ -12,4 +13,5 @@ export const manifests = [
 	...documentBlueprintManifests,
 	...documentTypeManifests,
 	...documentManifests,
+	...documentPermissionManifests,
 ];

src/Umbraco.Web.UI.Client/src/packages/users/user-permission/index.ts

@@ -1,2 +1,15 @@
 export * from './components/index.js';
 export * from './conditions/index.js';
+
+export type UserPermissionModel<PermissionTargetType> = {
+	id: string;
+	target: PermissionTargetType;
+	permissions: Array<string>;
+};
+
+// TODO: this should only be known by the document
+export type UmbDocumentGranularPermission = {
+	entityType: 'document';
+	documentId: string;
+	userGroupId: string;
+};