npm - @umbraco-cms/backoffice - Versions diffs - 14.0.0--preview004-14ef63c3 → 14.0.0--preview004-b669f311 - Mend

@umbraco-cms/backoffice 14.0.0--preview004-14ef63c3 → 14.0.0--preview004-b669f311

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist-cms/mocks/handlers/dictionary.handlers.js CHANGED Viewed

@@ -1,5 +1,6 @@
 const { rest } = window.MockServiceWorker;
 import { umbDictionaryData } from '../data/dictionary.data.js';
+import { umbracoPath } from '../../shared/utils/index.js';
 const uploadResponse = {
     temporaryFileId: 'c:/path/to/tempfilename.udt',
     parentId: 'b7e7d0ab-53ba-485d-dddd-12537f9925aa',
@@ -38,14 +39,14 @@ const overviewData = [
 ];
 // TODO: add schema
 export const handlers = [
-    rest.get('/umbraco/management/api/v1/dictionary/:id', (req, res, ctx) => {
+    rest.get(umbracoPath('/dictionary/:id'), (req, res, ctx) => {
         const id = req.params.id;
         if (!id)
             return;
         const dictionary = umbDictionaryData.getById(id);
         return res(ctx.status(200), ctx.json(dictionary));
     }),
-    rest.get('/umbraco/management/api/v1/dictionary', (req, res, ctx) => {
+    rest.get(umbracoPath('/dictionary'), (req, res, ctx) => {
         const skip = req.url.searchParams.get('skip');
         const take = req.url.searchParams.get('take');
         if (!skip || !take)
@@ -60,31 +61,21 @@ export const handlers = [
         };
         return res(ctx.status(200), ctx.json(response));
     }),
-    rest.post('/umbraco/management/api/v1/dictionary', async (req, res, ctx) => {
+    rest.post(umbracoPath('/dictionary'), async (req, res, ctx) => {
         const data = await req.json();
         if (!data)
             return;
         data.icon = 'umb:book-alt';
         data.hasChildren = false;
         data.type = 'dictionary-item';
-        data.translations = [
-            {
-                isoCode: 'en-US',
-                translation: '',
-            },
-            {
-                isoCode: 'fr',
-                translation: '',
-            },
-        ];
-        const value = umbDictionaryData.save(data.id, data);
+        const value = umbDictionaryData.insert(data);
         const createdResult = {
             value,
             statusCode: 200,
         };
         return res(ctx.status(200), ctx.json(createdResult));
     }),
-    rest.patch('/umbraco/management/api/v1/dictionary/:id', async (req, res, ctx) => {
+    rest.patch(umbracoPath('/dictionary/:id'), async (req, res, ctx) => {
         const data = await req.json();
         if (!data)
             return;
@@ -95,7 +86,17 @@ export const handlers = [
         const saved = umbDictionaryData.save(dataToSave.id, dataToSave);
         return res(ctx.status(200), ctx.json(saved));
     }),
-    rest.get('/umbraco/management/api/v1/tree/dictionary/root', (req, res, ctx) => {
+    rest.put(umbracoPath('/dictionary/:id'), async (req, res, ctx) => {
+        const data = await req.json();
+        if (!data)
+            return;
+        const id = req.params.id;
+        if (!id)
+            return;
+        const saved = umbDictionaryData.save(id, data);
+        return res(ctx.status(200), ctx.json(saved));
+    }),
+    rest.get(umbracoPath('/tree/dictionary/root'), (req, res, ctx) => {
         const items = umbDictionaryData.getTreeRoot();
         const response = {
             total: items.length,
@@ -103,7 +104,7 @@ export const handlers = [
         };
         return res(ctx.status(200), ctx.json(response));
     }),
-    rest.get('/umbraco/management/api/v1/tree/dictionary/children', (req, res, ctx) => {
+    rest.get(umbracoPath('/tree/dictionary/children'), (req, res, ctx) => {
         const parentId = req.url.searchParams.get('parentId');
         if (!parentId)
             return;
@@ -114,14 +115,14 @@ export const handlers = [
         };
         return res(ctx.status(200), ctx.json(response));
     }),
-    rest.get('/umbraco/management/api/v1/tree/dictionary/item', (req, res, ctx) => {
+    rest.get(umbracoPath('/tree/dictionary/item'), (req, res, ctx) => {
         const ids = req.url.searchParams.getAll('id');
         if (!ids)
             return;
         const items = umbDictionaryData.getTreeItem(ids);
         return res(ctx.status(200), ctx.json(items));
     }),
-    rest.delete('/umbraco/management/api/v1/dictionary/:id', (req, res, ctx) => {
+    rest.delete(umbracoPath('/dictionary/:id'), (req, res, ctx) => {
         const id = req.params.id;
         if (!id)
             return;
@@ -129,7 +130,7 @@ export const handlers = [
         return res(ctx.status(200));
     }),
     // TODO => handle properly, querystring breaks handler
-    rest.get('/umbraco/management/api/v1/dictionary/:id/export', (req, res, ctx) => {
+    rest.get(umbracoPath('/dictionary/:id/export'), (req, res, ctx) => {
         const id = req.params.id;
         if (!id)
             return;
@@ -138,12 +139,12 @@ export const handlers = [
         alert(`Downloads file for dictionary "${item?.name}", ${includeChildren === 'true' ? 'with' : 'without'} children.`);
         return res(ctx.status(200));
     }),
-    rest.post('/umbraco/management/api/v1/dictionary/upload', async (req, res, ctx) => {
+    rest.post(umbracoPath('/dictionary/upload'), async (req, res, ctx) => {
         if (!req.arrayBuffer())
             return;
         return res(ctx.status(200), ctx.json(uploadResponse));
     }),
-    rest.post('/umbraco/management/api/v1/dictionary/import', async (req, res, ctx) => {
+    rest.post(umbracoPath('/dictionary/import'), async (req, res, ctx) => {
         const file = req.url.searchParams.get('file');
         if (!file || !importResponse.id)
             return;

package/dist-cms/packages/core/extension-registry/models/user-permission.model.d.ts CHANGED Viewed

@@ -4,8 +4,10 @@ export interface ManifestUserPermission extends ManifestBase {
     meta: MetaUserPermission;
 }
 export interface MetaUserPermission {
-    label: string;
     entityType: string;
+    label?: string;
+    labelKey?: string;
     description?: string;
+    descriptionKey?: string;
     group?: string;
 }

package/dist-cms/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.js CHANGED Viewed

@@ -5,15 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbDictionaryRepository } from '../../dictionary/repository/dictionary.repository.js';
-import { UmbTextStyles } from "../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { css, html, customElement, state, when } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
-import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_CREATE_DICTIONARY_MODAL, } from '../../../core/modal/index.js';
-import { UmbContextConsumerController } from '../../../../libs/context-api/index.js';
 export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
     #dictionaryItems;
     #repo;
-    #modalContext;
     #tableItems;
     #tableColumns;
     #languages;
@@ -27,9 +24,6 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
         this.#tableItems = [];
         this.#tableColumns = [];
         this.#languages = [];
-        new UmbContextConsumerController(this, UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
-            this.#modalContext = instance;
-        });
     }
     async connectedCallback() {
         super.connectedCallback();
@@ -53,7 +47,7 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
     #setTableColumns() {
         this.#tableColumns = [
             {
-                name: 'Name',
+                name: this.localize.term('general_name'),
                 alias: 'name',
             },
         ];
@@ -77,7 +71,7 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
                         columnAlias: 'name',
                         value: html `<a
 							style="font-weight:bold"
-							href="/section/dictionary/workspace/dictionary-item/edit/${dictionary.id}">
+							href="section/dictionary/workspace/dictionary-item/edit/${dictionary.id}">
 							${dictionary.name}</a
 						> `,
                     },
@@ -91,11 +85,11 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
                     value: dictionary.translatedIsoCodes?.includes(l.isoCode)
                         ? html `<uui-icon
 								name="check"
-								title="Translation exists for ${l.name}"
+								title="${this.localize.term('visuallyHiddenTexts_hasTranslation')} (${l.name})"
 								style="color:var(--uui-color-positive-standalone);display:inline-block"></uui-icon>`
                         : html `<uui-icon
 								name="alert"
-								title="Translation does not exist for ${l.name}"
+								title="${this.localize.term('visuallyHiddenTexts_noTranslation')} (${l.name})"
 								style="color:var(--uui-color-danger-standalone);display:inline-block"></uui-icon>`,
                 });
             });
@@ -104,38 +98,26 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
         this._tableItemsFiltered = this.#tableItems;
     }
     #filter(e) {
-        this._tableItemsFiltered = e.target.value
-            ? this.#tableItems.filter((t) => t.id.includes(e.target.value))
+        const searchValue = e.target.value.toLocaleLowerCase();
+        this._tableItemsFiltered = searchValue
+            ? this.#tableItems.filter((t) => t.id.toLocaleLowerCase().includes(searchValue))
             : this.#tableItems;
     }
-    async #create() {
-        // TODO: what to do if modal service is not available?
-        if (!this.#modalContext)
-            return;
-        if (!this.#repo)
-            return;
-        const modalContext = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL, { parentId: null });
-        const { name, parentId } = await modalContext.onSubmit();
-        if (!name || parentId === undefined)
-            return;
-        const { data: url } = await this.#repo.create({ name, parentId });
-        if (!url)
-            return;
-        //TODO: Why do we need to extract the id like this?
-        const id = url.substring(url.lastIndexOf('/') + 1);
-        history.pushState({}, '', `/section/dictionary/workspace/dictionary-item/edit/${id}`);
-    }
     render() {
         return html `
 			<umb-body-layout header-transparent>
 				<div id="header" slot="header">
-					<uui-button type="button" look="outline" label="Create dictionary item" @click=${this.#create}
-						>Create dictionary item</uui-button
-					>
+					<uui-button
+						type="button"
+						look="outline"
+						label=${this.localize.term('dictionary_createNew')}
+						href="section/dictionary/workspace/dictionary-item/create/null">
+						${this.localize.term('dictionary_createNew')}
+					</uui-button>
 					<uui-input
 						@keyup="${this.#filter}"
-						placeholder="Type to filter..."
-						label="Type to filter dictionary"
+						placeholder=${this.localize.term('placeholders_filter')}
+						label=${this.localize.term('placeholders_filter')}
 						id="searchbar">
 						<div slot="prepend">
 							<uui-icon name="search" id="searchbar_icon"></uui-icon>
@@ -143,9 +125,9 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
 					</uui-input>
 				</div>
 				${when(this._tableItemsFiltered.length, () => html ` <umb-table
-						.config=${this._tableConfig}
-						.columns=${this.#tableColumns}
-						.items=${this._tableItemsFiltered}></umb-table>`, () => html `<umb-empty-state>There were no dictionary items found.</umb-empty-state>`)}
+							.config=${this._tableConfig}
+							.columns=${this.#tableColumns}
+							.items=${this._tableItemsFiltered}></umb-table>`, () => html `<umb-empty-state>${this.localize.term('emptyStates_emptyDictionaryTree')}</umb-empty-state>`)}
 			</umb-body-layout>
 		`;
     }

package/dist-cms/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.js CHANGED Viewed

@@ -36,10 +36,13 @@ export let UmbDictionaryWorkspaceEditorElement = class UmbDictionaryWorkspaceEdi
         return html `
 			<umb-workspace-editor alias="Umb.Workspace.Dictionary">
 				<div id="header" slot="header">
-					<uui-button href="/section/dictionary/dashboard" label="Back to list" compact>
+					<uui-button href="section/dictionary/dashboard" label=${this.localize.term('general_backToOverview')} compact>
 						<uui-icon name="umb:arrow-left"></uui-icon>
 					</uui-button>
-					<uui-input .value=${this._name} @input="${this.#handleInput}" label="Dictionary name"></uui-input>
+					<uui-input
+						.value=${this._name ?? ''}
+						@input="${this.#handleInput}"
+						label="${this.localize.term('general_dictionary')} ${this.localize.term('general_name')}"></uui-input>
 				</div>
 			</umb-workspace-editor>
 		`;

package/dist-cms/packages/dictionary/dictionary/workspace/dictionary-workspace.context.js CHANGED Viewed

@@ -61,8 +61,16 @@ export class UmbDictionaryWorkspaceContext extends UmbWorkspaceContext {
             return;
         if (!this.#data.value.id)
             return;
-        await this.repository.save(this.#data.value.id, this.#data.value);
-        this.setIsNew(false);
+        if (this.getIsNew()) {
+            await this.repository.create(this.#data.value);
+            this.setIsNew(false);
+        }
+        else {
+            await this.repository.save(this.#data.value.id, this.#data.value);
+        }
+        const data = this.getData();
+        if (data)
+            this.saveComplete(data);
     }
     destroy() {
         this.#data.complete();

package/dist-cms/packages/dictionary/dictionary/workspace/dictionary-workspace.element.js CHANGED Viewed

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbDictionaryWorkspaceContext } from './dictionary-workspace.context.js';
 import { UmbDictionaryWorkspaceEditorElement } from './dictionary-workspace-editor.element.js';
-import { UmbTextStyles } from "../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { html, customElement, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export let UmbWorkspaceDictionaryElement = class UmbWorkspaceDictionaryElement extends UmbLitElement {
@@ -23,6 +23,14 @@ export let UmbWorkspaceDictionaryElement = class UmbWorkspaceDictionaryElement e
                     this.#workspaceContext.load(id);
                 },
             },
+            {
+                path: 'create/:parentId',
+                component: () => this.#element,
+                setup: (_component, info) => {
+                    const parentId = info.match.params.parentId === 'null' ? null : info.match.params.parentId;
+                    this.#workspaceContext.create(parentId);
+                },
+            },
         ];
     }
     #workspaceContext;

package/dist-cms/packages/dictionary/dictionary/workspace/views/editor/workspace-view-dictionary-editor.element.js CHANGED Viewed

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_DICTIONARY_WORKSPACE_CONTEXT } from '../../dictionary-workspace.context.js';
 import { UmbDictionaryRepository } from '../../../repository/dictionary.repository.js';
 import { UUITextareaEvent } from '../../../../../../external/uui/index.js';
-import { css, html, customElement, state, repeat, ifDefined } from '../../../../../../external/lit/index.js';
+import { css, html, customElement, state, repeat, ifDefined, unsafeHTML } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 export let UmbWorkspaceViewDictionaryEditorElement = class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement {
     constructor() {
@@ -54,8 +54,7 @@ export let UmbWorkspaceViewDictionaryEditorElement = class UmbWorkspaceViewDicti
     render() {
         return html `
 			<uui-box>
-				<p>Edit the different language versions for the dictionary item '<em>${this._dictionary?.name}</em>' below.</p>
+				${unsafeHTML(this.localize.term('dictionaryItem_description', this._dictionary?.name || 'unnamed'))}
 				${repeat(this._languages, (item) => item.isoCode, (item) => this.#renderTranslation(item))}
 			</uui-box>
 		`;

package/dist-cms/packages/documents/documents/user-permissions/manifests.js CHANGED Viewed

@@ -21,8 +21,8 @@ const permissions = [
         name: 'Read Document User Permission',
         meta: {
             entityType: 'document',
-            label: 'Read',
-            description: 'Allow access to browse documents',
+            labelKey: 'actions_browse',
+            descriptionKey: 'actionDescriptions_browse',
         },
     },
     {
@@ -31,8 +31,8 @@ const permissions = [
         name: 'Create Document Blueprint User Permission',
         meta: {
             entityType: 'document',
-            label: 'Create Content Template',
-            description: 'Allow access to create a Content Template',
+            labelKey: 'actions_createblueprint',
+            descriptionKey: 'actionDescriptions_createblueprint',
         },
     },
     {
@@ -41,8 +41,8 @@ const permissions = [
         name: 'Delete Document User Permission',
         meta: {
             entityType: 'document',
-            label: 'Delete',
-            description: 'Allow access to delete a document',
+            labelKey: 'actions_delete',
+            descriptionKey: 'actionDescriptions_delete',
         },
     },
     {
@@ -51,8 +51,8 @@ const permissions = [
         name: 'Create Document User Permission',
         meta: {
             entityType: 'document',
-            label: 'Create',
-            description: 'Allow access to create a document',
+            labelKey: 'actions_create',
+            descriptionKey: 'actionDescriptions_create',
         },
     },
     {
@@ -61,8 +61,8 @@ const permissions = [
         name: 'Document Notifications User Permission',
         meta: {
             entityType: 'document',
-            label: 'Notifications',
-            description: 'Allow access to setup notifications for documents',
+            labelKey: 'actions_notify',
+            descriptionKey: 'actionDescriptions_notify',
         },
     },
     {
@@ -71,8 +71,8 @@ const permissions = [
         name: 'Publish Document User Permission',
         meta: {
             entityType: 'document',
-            label: 'Publish',
-            description: 'Allow access to publish a document',
+            labelKey: 'actions_publish',
+            descriptionKey: 'actionDescriptions_publish',
         },
     },
     {
@@ -81,8 +81,8 @@ const permissions = [
         name: 'Document Permissions User Permission',
         meta: {
             entityType: 'document',
-            label: 'Permissions',
-            description: 'Allow access to change permissions for a document',
+            labelKey: 'actions_setPermissions',
+            descriptionKey: 'actionDescriptions_rights',
         },
     },
     {
@@ -91,8 +91,8 @@ const permissions = [
         name: 'Send Document For Approval User Permission',
         meta: {
             entityType: 'document',
-            label: 'Send For Approval',
-            description: 'Allow access to send a document for approval before publishing',
+            labelKey: 'actions_sendtopublish',
+            descriptionKey: 'actionDescriptions_sendtopublish',
         },
     },
     {
@@ -101,8 +101,8 @@ const permissions = [
         name: 'Unpublish Document User Permission',
         meta: {
             entityType: 'document',
-            label: 'Unpublish',
-            description: 'Allow access to unpublish a document',
+            labelKey: 'actions_unpublish',
+            descriptionKey: 'actionDescriptions_unpublish',
         },
     },
     {
@@ -111,8 +111,8 @@ const permissions = [
         name: 'Update Document User Permission',
         meta: {
             entityType: 'document',
-            label: 'Update',
-            description: 'Allow access to save a document',
+            labelKey: 'actions_update',
+            descriptionKey: 'actionDescriptions_update',
         },
     },
     {
@@ -121,8 +121,8 @@ const permissions = [
         name: 'Copy Document User Permission',
         meta: {
             entityType: 'document',
-            label: 'Copy',
-            description: 'Allow access to copy a document',
+            labelKey: 'actions_copy',
+            descriptionKey: 'actionDescriptions_copy',
             group: 'structure',
         },
     },
@@ -132,8 +132,8 @@ const permissions = [
         name: 'Move Document User Permission',
         meta: {
             entityType: 'document',
-            label: 'Move',
-            description: 'Allow access to move a document',
+            labelKey: 'actions_move',
+            descriptionKey: 'actionDescriptions_move',
             group: 'structure',
         },
     },
@@ -143,8 +143,8 @@ const permissions = [
         name: 'Sort Document User Permission',
         meta: {
             entityType: 'document',
-            label: 'Sort',
-            description: 'Allow access to sort documents',
+            labelKey: 'actions_sort',
+            descriptionKey: 'actionDescriptions_sort',
             group: 'structure',
         },
     },
@@ -154,8 +154,8 @@ const permissions = [
         name: 'Document Culture And Hostnames User Permission',
         meta: {
             entityType: 'document',
-            label: 'Culture And Hostnames',
-            description: 'Allow access to set culture and hostnames for documents',
+            labelKey: 'actions_assigndomain',
+            descriptionKey: 'actionDescriptions_assignDomain',
             group: 'administration',
         },
     },
@@ -165,8 +165,8 @@ const permissions = [
         name: 'Document Public Access User Permission',
         meta: {
             entityType: 'document',
-            label: 'Public Access',
-            description: 'Allow access to set and change access restrictions for a document',
+            labelKey: 'actions_protect',
+            descriptionKey: 'actionDescriptions_protect',
             group: 'administration',
         },
     },
@@ -176,8 +176,8 @@ const permissions = [
         name: 'Document Rollback User Permission',
         meta: {
             entityType: 'document',
-            label: 'Rollback',
-            description: 'Allow access to roll back a document to a previous state',
+            labelKey: 'actions_rollback',
+            descriptionKey: 'actionDescriptions_rollback',
             group: 'administration',
         },
     },

package/dist-cms/packages/users/user-groups/workspace/components/user-group-default-permission-list.element.js CHANGED Viewed

@@ -5,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from '../user-group-workspace.context.js';
-import { html, customElement, state, ifDefined } from '../../../../../external/lit/index.js';
+import { html, customElement, state, ifDefined, nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
+import { groupBy } from '../../../../../external/lodash/index.js';
 export let UmbUserGroupDefaultPermissionListElement = class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
     #userGroupWorkspaceContext;
     constructor() {
@@ -33,23 +34,35 @@ export let UmbUserGroupDefaultPermissionListElement = class UmbUserGroupDefaultP
             ? this.#userGroupWorkspaceContext?.addPermission(userPermissionManifest.alias)
             : this.#userGroupWorkspaceContext?.removePermission(userPermissionManifest.alias);
     }
-    #isAllowed(userPermissionManifest) {
-        return this._userGroup?.permissions?.includes(userPermissionManifest.alias);
+    #isAllowed(permissionAlias) {
+        return this._userGroup?.permissions?.includes(permissionAlias);
     }
     render() {
-        return html ` ${this._entityTypes.map((entityType) => this.#renderPermissionsForEntityType(entityType))} `;
+        return html ` ${this._entityTypes.map((entityType) => this.#renderPermissionsByEntityType(entityType))} `;
     }
-    #renderPermissionsForEntityType(entityType) {
-        return html ` <h4><umb-localize .key=${`user_permissionsEntityGroup_${entityType}`}>${entityType}</umb-localize></h4>
-			${this._manifests
-            .filter((manifest) => manifest.meta.entityType === entityType)
-            .map((manifest) => this.#renderPermission(manifest))}`;
+    #renderPermissionsByEntityType(entityType) {
+        const permissionsForEntityType = this._manifests.filter((manifest) => manifest.meta.entityType === entityType);
+        return html `
+			<h4><umb-localize .key=${`user_permissionsEntityGroup_${entityType}`}>${entityType}</umb-localize></h4>
+			${this.#renderGroupedPermissions(permissionsForEntityType)}
+		`;
+    }
+    #renderGroupedPermissions(permissions) {
+        const groupedPermissions = groupBy(permissions, (manifest) => manifest.meta.group);
+        return html `
+			${Object.entries(groupedPermissions).map(([group, manifests]) => html `
+					${group !== 'undefined'
+            ? html ` <h5><umb-localize .key=${`actionCategories_${group}`}>${group}</umb-localize></h5> `
+            : nothing}
+					${manifests.map((manifest) => html ` ${this.#renderPermission(manifest)} `)}
+				`)}
+		`;
     }
     #renderPermission(manifest) {
         return html ` <umb-user-permission-setting
-			label=${manifest.meta.label}
-			description=${ifDefined(manifest.meta.description)}
-			?allowed=${this.#isAllowed(manifest)}
+			label=${ifDefined(manifest.meta.labelKey ? this.localize.term(manifest.meta.labelKey) : manifest.meta.label)}
+			description=${ifDefined(manifest.meta.descriptionKey ? this.localize.term(manifest.meta.descriptionKey) : manifest.meta.description)}
+			?allowed=${this.#isAllowed(manifest.alias)}
 			@change=${(event) => this.#onChangeUserPermission(event, manifest)}></umb-user-permission-setting>`;
     }
     static { this.styles = [UmbTextStyles]; }