Add third-party permissions section to user group workspace

[nathanwoulfe]

As part of the backoffice rebuild for Engage, we've realised we need the ability to render additional permissions on a user group. This can already be done via the entityUserPermission manifest, but falls a little short of what we need as the elements are rendered to the Default permissions section. We're not adding default permissions, we're adding third-party permissions. Functionally, we need to set verbs, but UI/UX-wise, we need separation and a little more control.

To resolve this, I've introduced a new extensionPermissions extension type, and a new extensionUserPermission extension type.

extensionUserPermission is very similar to the existing entityUserPermission type, only with an additional property to declare the extension/package alias to which the permission belongs. extensionPermission manifest then expects an extensionAlias property, to establish the link between the two types. extensionPermission extensions can optionally bring their own element to render above the permissions.

To test, add the umbraco-package.json to /App_Plugins/ExtensionPermissions, and create element.js at the same location (content below). Visit a user group workspace, and marvel at the newly added Third-party permissions section (translations to come - wanted to open the PR for feedback first).

// element.js
const template = document.createElement("template");
template.innerHTML = `
  <p>I am an extension permission element. I will be rendered if defined in the manifest, but what I do is up to the implementation - eg I can bring UI for rendering custom permissions.</p>
  <p>Below me will be the permission toggles for the extension, these are mapped to the extension via the "extensionAlias" property on the parent, and the "forExtension" property on the permission manifest.</p>
  <p>Changing the toggles sets the verb in the fallback permissions for the group.</p>`;

export default class ExtensionPermissionElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define("extension-permission", ExtensionPermissionElement);

Result should look like this:

[Copilot]

Pull Request Overview

This PR introduces a new third-party permissions system for user groups in the Umbraco backoffice. It enables extensions to register their own permission sections separate from the default permissions.

• Adds new extensionPermissions and extensionUserPermission extension types
• Creates base classes to reduce code duplication in permission components
• Implements a new third-party permissions section in the user group workspace

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
user-extension-permission.extension.ts	Defines new manifest interfaces for extension permissions
types.ts	Exports the new extension permission types
input-user-permission-base.element.ts	Creates shared base class for permission input components
input-extension-user-permission/	Implements extension-specific permission input component
input-entity-user-permission/	Refactors to extend the new base class
components/index.ts	Exports new components and base class
user-group-workspace-editor.element.ts	Adds third-party permissions section to UI
user-group-permission-list-base.element.ts	Creates shared base class for permission list components
user-group-extension-permission-list.element.ts	Implements extension permission list component
user-group-entity-user-permission-list.element.ts	Refactors to extend the new base class
en.ts	Adds localization for third-party permissions