@umbraco-cms/backoffice 17.3.3 → 17.4.0-rc

package/dist-cms/packages/user/user/entity-actions/create/modal/create-user-modal.element.js

@@ -38,19 +38,15 @@ let UmbCreateUserModalElement = class UmbCreateUserModalElement extends UmbModal
         // TODO: figure out when to use email or username
         const { data } = await this.#userDetailRepository.create(userScaffold);
         if (data) {
-            if (data.kind === UmbUserKind.DEFAULT) {
-                this.#openSuccessModal(data.unique);
-            }
-            else {
-                this._submitModal();
-            }
+            this.#openSuccessModal(data.unique, data.kind);
         }
     }
-    async #openSuccessModal(userUnique) {
+    async #openSuccessModal(userUnique, userKind) {
         await umbOpenModal(this, UMB_CREATE_USER_SUCCESS_MODAL, {
             data: {
                 user: {
                     unique: userUnique,
+                    kind: userKind,
                 },
             },
         })

package/dist-cms/packages/user/user/entity-actions/create/modal/create-user-success-modal.element.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbUserItemRepository } from '../../../repository/item/index.js';
 import { UmbNewUserPasswordRepository } from '../../../repository/new-password/index.js';
+import { UmbUserKind } from '../../../utils/index.js';
 import { UMB_USER_WORKSPACE_PATH } from '../../../paths.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
 import { css, html, customElement, state } from '../../../../../../external/lit/index.js';
@@ -36,19 +37,30 @@ let UmbCreateUserSuccessModalElement = class UmbCreateUserSuccessModalElement ex
         super.connectedCallback();
         this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => (this.#notificationContext = instance));
     }
+    get #isDefaultUser() {
+        return this.data?.user.kind === UmbUserKind.DEFAULT;
+    }
     async firstUpdated() {
         const unique = this.data?.user.unique;
         if (!unique)
             throw new Error('No user unique is provided');
-        const [userItemResponse, newPasswordResponse] = await Promise.all([
-            this.#userItemRepository.requestItems([unique]),
-            this.#userNewPasswordRepository.requestNewPassword(unique),
-        ]);
-        if (userItemResponse.data) {
-            this._userItem = userItemResponse.data[0];
+        if (this.#isDefaultUser) {
+            const [userItemResponse, newPasswordResponse] = await Promise.all([
+                this.#userItemRepository.requestItems([unique]),
+                this.#userNewPasswordRepository.requestNewPassword(unique),
+            ]);
+            if (userItemResponse.data) {
+                this._userItem = userItemResponse.data[0];
+            }
+            if (newPasswordResponse.data?.resetPassword) {
+                this._initialPassword = newPasswordResponse.data.resetPassword;
+            }
         }
-        if (newPasswordResponse.data?.resetPassword) {
-            this._initialPassword = newPasswordResponse.data.resetPassword;
+        else {
+            const userItemResponse = await this.#userItemRepository.requestItems([unique]);
+            if (userItemResponse.data) {
+                this._userItem = userItemResponse.data[0];
+            }
         }
     }
     #copyPassword() {
@@ -56,34 +68,50 @@ let UmbCreateUserSuccessModalElement = class UmbCreateUserSuccessModalElement ex
         if (!passwordInput || typeof passwordInput.value !== 'string')
             return;
         navigator.clipboard.writeText(passwordInput.value);
-        const data = { message: 'Password copied' };
+        const data = { message: this.localize.term('user_passwordCopied') };
         this.#notificationContext?.peek('positive', { data });
     }
     #onCloseModal;
     #onCreateAnotherUser;
     #onGoToProfile;
     render() {
-        return html `<uui-dialog-layout headline="${this._userItem?.name} has been created">
-			<p>The new user has successfully been created. To log in to Umbraco use the password below</p>
-			<uui-form-layout-item>
-				<uui-label slot="label" for="password">Password</uui-label>
-				<div id="password-control">
-					<uui-input-password id="password" label="password" name="password" value="${this._initialPassword}" readonly>
-					</uui-input-password>
-					<uui-button compact label="Copy" @click=${this.#copyPassword} look="outline"></uui-button>
-				</div>
-			</uui-form-layout-item>
+        return html `<uui-dialog-layout
+			headline="${this._userItem?.name} ${this.localize.term('user_userCreated')}">
+			<p>${this.localize.term(this.#isDefaultUser ? 'user_userCreatedSuccessHelp' : 'user_userCreatedApiSuccessHelp')}</p>
+			${this.#isDefaultUser
+            ? html `<uui-form-layout-item>
+						<uui-label slot="label" for="password">${this.localize.term('general_password')}</uui-label>
+						<div id="password-control">
+							<uui-input-password
+								id="password"
+								label=${this.localize.term('general_password')}
+								name="password"
+								value="${this._initialPassword}"
+								readonly>
+							</uui-input-password>
+							<uui-button
+								compact
+								label=${this.localize.term('general_copy')}
+								@click=${this.#copyPassword}
+								look="outline"></uui-button>
+						</div>
+					</uui-form-layout-item>`
+            : ''}
 
-			<uui-button @click=${this.#onCloseModal} slot="actions" label="Close" look="secondary"></uui-button>
+			<uui-button
+				@click=${this.#onCloseModal}
+				slot="actions"
+				label=${this.localize.term('general_close')}
+				look="secondary"></uui-button>
 			<uui-button
 				@click=${this.#onCreateAnotherUser}
 				slot="actions"
-				label="Create another user"
+				label=${this.localize.term('user_createAnotherUser')}
 				look="secondary"></uui-button>
 			<uui-button
 				@click=${this.#onGoToProfile}
 				slot="actions"
-				label="Go to profile"
+				label=${this.localize.term('user_goToProfile')}
 				look="primary"
 				color="positive"
 				href=${UMB_USER_WORKSPACE_PATH + '/edit/' + this.data?.user.unique}></uui-button>

package/dist-cms/packages/user/user/entity-actions/create/modal/create-user-success-modal.token.d.ts

@@ -1,7 +1,9 @@
+import type { UmbUserKindType } from '../../../utils/index.js';
 import { UmbModalToken } from '../../../../../core/modal/index.js';
 export interface UmbCreateUserSuccessModalData {
     user: {
         unique: string;
+        kind: UmbUserKindType;
     };
 }
 export type UmbCreateUserSuccessModalValue = undefined;

package/dist-cms/packages/user/user/modals/user-mfa/user-mfa-modal.element.js

@@ -104,9 +104,9 @@ let UmbUserMfaModalElement = class UmbUserMfaModalElement extends UmbLitElement
      */
     async #onProviderDisable(item) {
         await umbConfirmModal(this, {
-            headline: this.localize.term('actions_disable'),
+            headline: '#actions_disable',
             content: this.localize.term('user_2faDisableForUser', item.displayName),
-            confirmLabel: this.localize.term('actions_disable'),
+            confirmLabel: '#actions_disable',
             color: 'danger',
         });
         await this.#userRepository.disableMfaProvider(this.#unique, item.providerName, item.displayName);

package/dist-cms/packages/user/user/repository/change-password/change-user-password.repository.js

@@ -17,6 +17,10 @@ export class UmbChangeUserPasswordRepository extends UmbUserRepositoryBase {
             const notification = { data: { message: `Password changed` } };
             this.notificationContext?.peek('positive', notification);
         }
+        else {
+            const notification = { data: { message: error.message ?? 'Unknown failure' } };
+            this.notificationContext?.peek('danger', notification);
+        }
         return { data, error };
     }
 }

package/dist-cms/packages/user/user/repository/change-password/change-user-password.server.data-source.js

@@ -29,6 +29,6 @@ export class UmbChangeUserPasswordServerDataSource {
             body: {
                 newPassword,
             },
-        }));
+        }), { disableNotifications: true });
     }
 }

package/dist-cms/packages/user/user/repository/config/user-config.store.js

@@ -2,7 +2,7 @@ import { UMB_USER_CONFIG_STORE_CONTEXT } from './user-config.store.token.js';
 import { UmbStoreObjectBase } from '../../../../core/store/index.js';
 export class UmbUserConfigStore extends UmbStoreObjectBase {
     constructor(host) {
-        super(host, UMB_USER_CONFIG_STORE_CONTEXT.toString());
+        super(host, UMB_USER_CONFIG_STORE_CONTEXT);
     }
 }
 export default UmbUserConfigStore;

package/dist-cms/packages/user/user/repository/detail/user-detail.store.js

@@ -12,7 +12,7 @@ export class UmbUserDetailStore extends UmbDetailStoreBase {
      * @memberof UmbUserDetailStore
      */
     constructor(host) {
-        super(host, UMB_USER_DETAIL_STORE_CONTEXT.toString());
+        super(host, UMB_USER_DETAIL_STORE_CONTEXT);
     }
 }
 export default UmbUserDetailStore;

package/dist-cms/packages/user/user/repository/item/user-item.store.js

@@ -13,7 +13,7 @@ export class UmbUserItemStore extends UmbItemStoreBase {
      * @memberof UmbUserItemStore
      */
     constructor(host) {
-        super(host, UMB_USER_ITEM_STORE_CONTEXT.toString());
+        super(host, UMB_USER_ITEM_STORE_CONTEXT);
     }
 }
 export default UmbUserItemStore;

package/dist-cms/packages/user/user-group/repository/detail/user-group-detail.store.js

@@ -12,7 +12,7 @@ export class UmbUserGroupDetailStore extends UmbDetailStoreBase {
      * @memberof UmbUserGroupDetailStore
      */
     constructor(host) {
-        super(host, UMB_USER_GROUP_DETAIL_STORE_CONTEXT.toString());
+        super(host, UMB_USER_GROUP_DETAIL_STORE_CONTEXT);
     }
 }
 export default UmbUserGroupDetailStore;

package/dist-cms/packages/user/user-group/repository/index.d.ts

@@ -1,2 +1,3 @@
 export * from './detail/index.js';
 export * from './item/index.js';
+export * from './users/index.js';

package/dist-cms/packages/user/user-group/repository/index.js

@@ -1,2 +1,3 @@
 export * from './detail/index.js';
 export * from './item/index.js';
+export * from './users/index.js';

package/dist-cms/packages/user/user-group/repository/item/user-group-item.store.js

@@ -12,7 +12,7 @@ export class UmbUserGroupItemStore extends UmbItemStoreBase {
      * @memberof UmbUserGroupItemStore
      */
     constructor(host) {
-        super(host, UMB_USER_GROUP_ITEM_STORE_CONTEXT.toString());
+        super(host, UMB_USER_GROUP_ITEM_STORE_CONTEXT);
     }
 }
 export default UmbUserGroupItemStore;

package/dist-cms/packages/user/user-group/repository/users/index.d.ts

@@ -0,0 +1,2 @@
+export * from './user-group-users.repository.js';
+export * from './user-group-users.server.data-source.js';

package/dist-cms/packages/user/user-group/repository/users/index.js

@@ -0,0 +1,2 @@
+export * from './user-group-users.repository.js';
+export * from './user-group-users.server.data-source.js';

package/dist-cms/packages/user/user-group/repository/users/user-group-users.repository.d.ts

@@ -0,0 +1,32 @@
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+import { UmbRepositoryBase } from '../../../../core/repository/index.js';
+export declare class UmbUserGroupUsersRepository extends UmbRepositoryBase {
+    #private;
+    constructor(host: UmbControllerHost);
+    requestUsersInGroup(groupId: string, take?: number): Promise<{
+        error: import("../../../../core/resources/index.js").UmbApiError | import("../../../../core/resources/index.js").UmbCancelError | undefined;
+        data?: undefined;
+    } | {
+        data: {
+            uniques: string[];
+            total: number;
+        };
+        error?: undefined;
+    }>;
+    addUsersToGroup(groupId: string, userIds: string[]): Promise<import("../../../../core/resources/index.js").UmbApiResponse<{
+        data: unknown;
+        request: Request;
+        response: Response;
+    }> | {
+        data: undefined;
+        error: undefined;
+    }>;
+    removeUsersFromGroup(groupId: string, userIds: string[]): Promise<import("../../../../core/resources/index.js").UmbApiResponse<{
+        data: unknown;
+        request: Request;
+        response: Response;
+    }> | {
+        data: undefined;
+        error: undefined;
+    }>;
+}

package/dist-cms/packages/user/user-group/repository/users/user-group-users.repository.js

@@ -0,0 +1,18 @@
+import { UmbUserGroupUsersServerDataSource } from './user-group-users.server.data-source.js';
+import { UmbRepositoryBase } from '../../../../core/repository/index.js';
+export class UmbUserGroupUsersRepository extends UmbRepositoryBase {
+    #source;
+    constructor(host) {
+        super(host);
+        this.#source = new UmbUserGroupUsersServerDataSource(host);
+    }
+    async requestUsersInGroup(groupId, take = 100) {
+        return this.#source.getUsersInGroup(groupId, take);
+    }
+    async addUsersToGroup(groupId, userIds) {
+        return this.#source.addUsersToGroup(groupId, userIds);
+    }
+    async removeUsersFromGroup(groupId, userIds) {
+        return this.#source.removeUsersFromGroup(groupId, userIds);
+    }
+}

package/dist-cms/packages/user/user-group/repository/users/user-group-users.server.data-source.d.ts

@@ -0,0 +1,31 @@
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+export declare class UmbUserGroupUsersServerDataSource {
+    #private;
+    constructor(host: UmbControllerHost);
+    getUsersInGroup(groupId: string, take: number): Promise<{
+        error: import("../../../../core/resources/index.js").UmbApiError | import("../../../../core/resources/index.js").UmbCancelError | undefined;
+        data?: undefined;
+    } | {
+        data: {
+            uniques: string[];
+            total: number;
+        };
+        error?: undefined;
+    }>;
+    addUsersToGroup(groupId: string, userIds: string[]): Promise<import("../../../../core/resources/index.js").UmbApiResponse<{
+        data: unknown;
+        request: Request;
+        response: Response;
+    }> | {
+        data: undefined;
+        error: undefined;
+    }>;
+    removeUsersFromGroup(groupId: string, userIds: string[]): Promise<import("../../../../core/resources/index.js").UmbApiResponse<{
+        data: unknown;
+        request: Request;
+        response: Response;
+    }> | {
+        data: undefined;
+        error: undefined;
+    }>;
+}

package/dist-cms/packages/user/user-group/repository/users/user-group-users.server.data-source.js

@@ -0,0 +1,41 @@
+import { UserGroupService, UserService } from '../../../../core/backend-api/index.js';
+import { tryExecute } from '../../../../core/resources/index.js';
+export class UmbUserGroupUsersServerDataSource {
+    #host;
+    constructor(host) {
+        this.#host = host;
+    }
+    async getUsersInGroup(groupId, take) {
+        if (!groupId)
+            throw new Error('Group id is missing');
+        const { data, error } = await tryExecute(this.#host, UserService.getFilterUser({ query: { userGroupIds: [groupId], take } }));
+        if (error || !data)
+            return { error };
+        return {
+            data: {
+                uniques: data.items.map((u) => u.id),
+                total: data.total,
+            },
+        };
+    }
+    async addUsersToGroup(groupId, userIds) {
+        if (!groupId)
+            throw new Error('Group id is missing');
+        if (!userIds.length)
+            return { data: undefined, error: undefined };
+        return tryExecute(this.#host, UserGroupService.postUserGroupByIdUsers({
+            path: { id: groupId },
+            body: userIds.map((id) => ({ id })),
+        }), { disableNotifications: true });
+    }
+    async removeUsersFromGroup(groupId, userIds) {
+        if (!groupId)
+            throw new Error('Group id is missing');
+        if (!userIds.length)
+            return { data: undefined, error: undefined };
+        return tryExecute(this.#host, UserGroupService.deleteUserGroupByIdUsers({
+            path: { id: groupId },
+            body: userIds.map((id) => ({ id })),
+        }), { disableNotifications: true });
+    }
+}

package/dist-cms/packages/user/user-group/workspace/user-group/components/user-group-workspace-users.element.d.ts

@@ -0,0 +1,16 @@
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import '../../../../user/components/user-input/user-input.element.js';
+export declare class UmbUserGroupWorkspaceUsersElement extends UmbLitElement {
+    #private;
+    private _userUniques;
+    private _usersRemainingCount;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbUserGroupWorkspaceUsersElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-user-group-workspace-users': UmbUserGroupWorkspaceUsersElement;
+    }
+}

package/dist-cms/packages/user/user-group/workspace/user-group/components/user-group-workspace-users.element.js

@@ -0,0 +1,149 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from '../user-group-workspace.context-token.js';
+import { UmbUserGroupUsersRepository } from '../../../repository/users/user-group-users.repository.js';
+import { css, html, customElement, state, nothing } from '../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbTextStyles } from '../../../../../core/style/index.js';
+import { UMB_NOTIFICATION_CONTEXT } from '../../../../../core/notification/index.js';
+import '../../../../user/components/user-input/user-input.element.js';
+let UmbUserGroupWorkspaceUsersElement = class UmbUserGroupWorkspaceUsersElement extends UmbLitElement {
+    #unique;
+    #isNew;
+    #persistedUserUniques;
+    #usersRepository;
+    #workspaceContext;
+    constructor() {
+        super();
+        this._userUniques = [];
+        this._usersRemainingCount = 0;
+        this.#isNew = false;
+        this.#persistedUserUniques = [];
+        this.#usersRepository = new UmbUserGroupUsersRepository(this);
+        this.consumeContext(UMB_USER_GROUP_WORKSPACE_CONTEXT, (instance) => {
+            this.#workspaceContext = instance;
+            this.#observe();
+        });
+    }
+    #observe() {
+        this.observe(this.#workspaceContext?.unique, (unique) => {
+            this.#unique = unique ?? undefined;
+            if (unique && !this.#isNew) {
+                this.#loadUsers(unique);
+            }
+        }, '_observeUnique');
+        this.observe(this.#workspaceContext?.isNew, (isNew) => {
+            const wasNew = this.#isNew;
+            this.#isNew = isNew ?? false;
+            // When the group transitions from newly created to persisted, save any pending user changes.
+            if (wasNew === true && isNew === false) {
+                this.#savePendingUserChanges();
+            }
+        }, '_observeIsNew');
+    }
+    async #loadUsers(unique) {
+        const { data } = await this.#usersRepository.requestUsersInGroup(unique);
+        this.#persistedUserUniques = [...(data?.uniques ?? [])];
+        this._userUniques = [...(data?.uniques ?? [])];
+        const total = data?.total ?? 0;
+        this._usersRemainingCount = Math.max(0, total - this._userUniques.length);
+    }
+    async #savePendingUserChanges() {
+        const unique = this.#unique;
+        if (!unique || this._userUniques.length === 0)
+            return;
+        await this.#persistUserChanges(unique, this._userUniques);
+    }
+    async #persistUserChanges(unique, newSelection) {
+        const toAdd = newSelection.filter((u) => !this.#persistedUserUniques.includes(u));
+        const toRemove = this.#persistedUserUniques.filter((u) => !newSelection.includes(u));
+        const [{ error: addError }, { error: removeError }] = await Promise.all([
+            this.#usersRepository.addUsersToGroup(unique, toAdd),
+            this.#usersRepository.removeUsersFromGroup(unique, toRemove),
+        ]);
+        const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+        if (addError) {
+            notificationContext?.peek('danger', {
+                data: {
+                    headline: this.localize.term('speechBubbles_operationFailedHeader'),
+                    message: this.localize.term('user_addUsersToGroupError'),
+                },
+            });
+        }
+        if (removeError) {
+            notificationContext?.peek('danger', {
+                data: {
+                    headline: this.localize.term('speechBubbles_operationFailedHeader'),
+                    message: this.localize.term('user_removeUsersFromGroupError'),
+                },
+            });
+        }
+        if (!addError && !removeError) {
+            this.#persistedUserUniques = [...newSelection];
+            return true;
+        }
+        return false;
+    }
+    async #onUsersChange(event) {
+        event.stopPropagation();
+        const target = event.target;
+        const newSelection = target.selection;
+        // For new (unsaved) groups, track locally — users will be persisted when the group is saved.
+        if (this.#isNew) {
+            this._userUniques = newSelection;
+            return;
+        }
+        const unique = this.#unique;
+        if (!unique)
+            return;
+        const previousSelection = [...this._userUniques];
+        this._userUniques = newSelection; // optimistic update
+        const success = await this.#persistUserChanges(unique, newSelection);
+        if (!success) {
+            this._userUniques = previousSelection; // revert on error
+        }
+    }
+    render() {
+        return html `
+			<uui-box>
+				<div slot="headline"><umb-localize key="general_users"></umb-localize></div>
+				<umb-user-input .selection=${this._userUniques} @change=${this.#onUsersChange}></umb-user-input>
+				${this.#renderRemainingCount()}
+			</uui-box>
+		`;
+    }
+    #renderRemainingCount() {
+        if (!this._usersRemainingCount)
+            return nothing;
+        return html `<div class="remaining-count">
+			${this.localize.term('user_andMore', this._usersRemainingCount)} -
+			<i>${this.localize.term('user_usersNotManagedFromGroup')}</i>
+		</div>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: block;
+			}
+			.remaining-count {
+				padding: 8px 0px 8px 0px;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbUserGroupWorkspaceUsersElement.prototype, "_userUniques", void 0);
+__decorate([
+    state()
+], UmbUserGroupWorkspaceUsersElement.prototype, "_usersRemainingCount", void 0);
+UmbUserGroupWorkspaceUsersElement = __decorate([
+    customElement('umb-user-group-workspace-users')
+], UmbUserGroupWorkspaceUsersElement);
+export { UmbUserGroupWorkspaceUsersElement };
+export { UmbUserGroupWorkspaceUsersElement as element };

package/dist-cms/packages/user/user-group/workspace/user-group/views/user-group-details-workspace-view.element.d.ts

@@ -2,6 +2,7 @@ import { nothing } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import type { UmbWorkspaceViewElement } from '../../../../../core/workspace/index.js';
 import '../components/user-group-entity-type-permission-groups.element.js';
+import '../components/user-group-workspace-users.element.js';
 export declare class UmbUserGroupDetailsWorkspaceViewElement extends UmbLitElement implements UmbWorkspaceViewElement {
     #private;
     private _unique?;

package/dist-cms/packages/user/user-group/workspace/user-group/views/user-group-details-workspace-view.element.js

@@ -9,6 +9,7 @@ import { css, html, nothing, customElement, state } from '../../../../../../exte
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
 import '../components/user-group-entity-type-permission-groups.element.js';
+import '../components/user-group-workspace-users.element.js';
 let UmbUserGroupDetailsWorkspaceViewElement = class UmbUserGroupDetailsWorkspaceViewElement extends UmbLitElement {
     #workspaceContext;
     constructor() {
@@ -106,6 +107,7 @@ let UmbUserGroupDetailsWorkspaceViewElement = class UmbUserGroupDetailsWorkspace
 
 					${this.#renderPermissionGroups()}
 				</umb-stack>
+				<umb-user-group-workspace-users></umb-user-group-workspace-users>
 			</div>
 		`;
     }
@@ -195,6 +197,9 @@ let UmbUserGroupDetailsWorkspaceViewElement = class UmbUserGroupDetailsWorkspace
 			}
 
 			#main {
+				display: grid;
+				grid-template-columns: 1fr 350px;
+				gap: var(--uui-size-layout-1);
 				padding: var(--uui-size-layout-1);
 			}
 

package/dist-cms/packages/user/user-permission/modals/settings/entity-user-permission-settings-modal.element.js

@@ -10,7 +10,7 @@ import { UmbModalBaseElement } from '../../../../core/modal/index.js';
 let UmbEntityUserPermissionSettingsModalElement = class UmbEntityUserPermissionSettingsModalElement extends UmbModalBaseElement {
     constructor() {
         super(...arguments);
-        this._headline = 'Set permissions';
+        this._headline = '#actions_setPermissions';
     }
     set data(data) {
         super.data = data;
@@ -30,7 +30,7 @@ let UmbEntityUserPermissionSettingsModalElement = class UmbEntityUserPermissionS
     }
     render() {
         return html `
-			<umb-body-layout headline=${this._headline}>
+			<umb-body-layout headline=${this.localize.string(this._headline)}>
 				<uui-box>
 					${this._entityType
             ? html ` <umb-input-entity-user-permission
@@ -40,13 +40,13 @@ let UmbEntityUserPermissionSettingsModalElement = class UmbEntityUserPermissionS
             : nothing}
 				</uui-box>
 
-				<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._rejectModal}">Cancel</uui-button>
+				<uui-button slot="actions" id="cancel" label=${this.localize.term('general_cancel')} @click="${this._rejectModal}"></uui-button>
 				<uui-button
 					slot="actions"
 					id="confirm"
 					color="positive"
 					look="primary"
-					label="Confirm"
+					label=${this.localize.term('general_confirm')}
 					@click=${this._submitModal}></uui-button>
 			</umb-body-layout>
 		`;

package/dist-cms/packages/webhook/webhook/repository/detail/webhook-detail.store.js

@@ -12,7 +12,7 @@ export class UmbWebhookDetailStore extends UmbDetailStoreBase {
      * @memberof UmbWebhookDetailStore
      */
     constructor(host) {
-        super(host, UMB_WEBHOOK_DETAIL_STORE_CONTEXT.toString());
+        super(host, UMB_WEBHOOK_DETAIL_STORE_CONTEXT);
     }
 }
 export default UmbWebhookDetailStore;

package/dist-cms/packages/webhook/webhook/repository/item/webhook-item.store.js

@@ -12,7 +12,7 @@ export class UmbWebhookItemStore extends UmbItemStoreBase {
      * @memberof UmbWebhookItemStore
      */
     constructor(host) {
-        super(host, UMB_WEBHOOK_ITEM_STORE_CONTEXT.toString());
+        super(host, UMB_WEBHOOK_ITEM_STORE_CONTEXT);
     }
 }
 export default UmbWebhookItemStore;

package/dist-cms/tsconfig.build.json

@@ -10,5 +10,5 @@
         "allowImportingTsExtensions": false
     },
     "include": ["./**/*.ts", "./**/*.json", "./**/*.js"],
-    "exclude": ["./**/*.test.ts", "./mocks/**", "./**/*.stories.ts", "tsconfig.json", "rollup.config.js"]
+    "exclude": ["./**/*.test.ts", "./**/*.stories.ts", "tsconfig.json", "rollup.config.js"]
 }