Adding description to user groups

LanThuyNguyen · LanThuyNguyen · commit 29edc5885f42 · 2025-12-04T15:16:52.000+07:00
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/backend-api/types.gen.ts b/src/Umbraco.Web.UI.Client/src/packages/core/backend-api/types.gen.ts
@@ -419,6 +419,7 @@ export type CreateUserGroupRequestModel = {
     fallbackPermissions: Array<string>;
     permissions: Array<DocumentPermissionPresentationModel | DocumentPropertyValuePermissionPresentationModel | UnknownTypePermissionPresentationModel>;
     id?: string | null;
+    description?: string | null;
 };
 
 export type CreateUserRequestModel = {
@@ -2810,6 +2811,7 @@ export type UpdateUserDataRequestModel = {
 
 export type UpdateUserGroupRequestModel = {
     name: string;
+    description?: string | null;
     alias: string;
     icon?: string | null;
     sections: Array<string>;
@@ -2925,6 +2927,7 @@ export type UserGroupResponseModel = {
     id: string;
     isDeletable: boolean;
     aliasCanBeChanged: boolean;
+    description?: string | null;
 };
 
 export type UserInstallRequestModel = {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts
@@ -193,7 +193,6 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 		const query = (event.target.value as string) ?? '';
 		if (query.startsWith('#') || query.startsWith('?')) {
 			this.#partialUpdateLink({ queryString: query });
-			this.#validationContext.messages.removeMessageByKey('UmbLinkPickerValueValidator');
 			return;
 		}
 
@@ -204,7 +203,6 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 		} else {
 			this.#partialUpdateLink({ queryString: '' });
 		}
-		this.#validationContext.messages.removeMessageByKey('UmbLinkPickerValueValidator');
 	}
 
 	#onLinkTitleInput(event: UUIInputEvent) {
@@ -235,7 +233,6 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 			type: 'external',
 			url,
 		});
-		this.#validationContext.messages.removeMessageByKey('UmbLinkPickerValueValidator');
 	}
 
 	async #onPickerSelection(event: UmbInputPickerEvent, type: 'document' | 'media') {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/repository/user-group-collection.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/repository/user-group-collection.server.data-source.ts
@@ -45,6 +45,7 @@ export class UmbUserGroupCollectionServerDataSource implements UmbCollectionData
 					mediaRootAccess: item.mediaRootAccess,
 					mediaStartNode: item.mediaStartNode ? { unique: item.mediaStartNode.id } : null,
 					name: item.name,
+					description: item.description || null,
 					permissions: item.permissions,
 					sections: item.sections,
 					unique: item.id,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/user-group-ref/user-group-ref.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/user-group-ref/user-group-ref.element.ts
@@ -36,6 +36,9 @@ export class UmbUserGroupRefElement extends UmbElementMixin(UUIRefNodeElement) {
 		this.#observeMediaStartNode(value);
 	}
 
+	@property({ type: String })
+	description: string | null = null;
+
 	@property({ type: Array })
 	public get sections(): Array<string> {
 		return [];
@@ -151,17 +154,19 @@ export class UmbUserGroupRefElement extends UmbElementMixin(UUIRefNodeElement) {
 	}
 
 	#renderDetails() {
-		const hasSections = this._sectionLabels.length;
-		const hasDocument = !!this._documentLabel || this.documentRootAccess;
-		const hasMedia = !!this._mediaLabel || this.mediaRootAccess;
-		const hasUserPermissions = this._userPermissionLabels.length;
-
-		if (!hasSections && !hasDocument && !hasMedia && !hasUserPermissions) return;
-
 		return html`
 			<div id="details">
-				${this.#renderSections()} ${this.#renderDocumentStartNode()} ${this.#renderMediaStartNode()}
-				${this.#renderUserPermissions()}
+				${this.#renderDescription()} ${this.#renderSections()} ${this.#renderDocumentStartNode()}
+				${this.#renderMediaStartNode()} ${this.#renderUserPermissions()}
+			</div>
+		`;
+	}
+
+	#renderDescription() {
+		if (!this.description) return;
+		return html`
+			<div>
+				<small>${this.description}</small>
 			</div>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
@@ -114,6 +114,7 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<
 								?mediaRootAccess=${userGroup.mediaRootAccess}
 								.mediaStartNode=${!userGroup.mediaRootAccess ? userGroup.mediaStartNode?.unique : null}
 								.sections=${userGroup.sections}
+								.description=${userGroup.description}
 								@selected=${(event: UUIMenuItemEvent) => this.#onSelected(event, userGroup)}
 								@deselected=${(event: UUIMenuItemEvent) => this.#onDeselected(event, userGroup)}>
 								${when(userGroup.icon, () => html`<umb-icon name=${userGroup.icon!} slot="icon"></umb-icon>`)}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/repository/detail/user-group-detail.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/repository/detail/user-group-detail.server.data-source.ts
@@ -45,6 +45,7 @@ export class UmbUserGroupServerDataSource
 			permissions: [],
 			sections: [],
 			unique: UmbId.new(),
+			description: '',
 		};
 
 		return { data };
@@ -98,6 +99,7 @@ export class UmbUserGroupServerDataSource
 			permissions,
 			sections: data.sections,
 			unique: data.id,
+			description: data.description ?? null,
 		};
 
 		return { data: userGroup };
@@ -136,6 +138,7 @@ export class UmbUserGroupServerDataSource
 			name: model.name,
 			permissions,
 			sections: model.sections,
+			description: model.description,
 		};
 
 		const { data, error } = await tryExecute(
@@ -186,6 +189,7 @@ export class UmbUserGroupServerDataSource
 			name: model.name,
 			permissions,
 			sections: model.sections,
+			description: model.description,
 		};
 
 		const { error } = await tryExecute(
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/types.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/types.ts
@@ -19,4 +19,5 @@ export interface UmbUserGroupDetailModel {
 	permissions: Array<any>;
 	sections: Array<string>;
 	unique: string;
+	description: string | null;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/user-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/user-group-workspace-editor.element.ts
@@ -3,6 +3,7 @@ import type { UmbUserGroupDetailModel } from '../../types.js';
 import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from './user-group-workspace.context-token.js';
 import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/components';
 import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
 import { UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/icon';
 import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { umbOpenModal } from '@umbraco-cms/backoffice/modal';
@@ -25,6 +26,9 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _icon?: UmbUserGroupDetailModel['icon'];
 
+	@state()
+	private _description?: UmbUserGroupDetailModel['description'];
+
 	#workspaceContext?: typeof UMB_USER_GROUP_WORKSPACE_CONTEXT.TYPE;
 
 	constructor() {
@@ -36,6 +40,11 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 		});
 	}
 
+	#onDescriptionChange(event: InputEvent & { target: UUIInputElement }) {
+		const value = event.target.value.toString();
+		this.#workspaceContext?.setDescription(value);
+	}
+
 	#observeUserGroup() {
 		this.observe(this.#workspaceContext?.isNew, (value) => (this._isNew = value), '_observeIsNew');
 		this.observe(this.#workspaceContext?.name, (value) => (this._name = value), '_observeName');
@@ -46,6 +55,11 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 			'_observeAliasCanBeChanged',
 		);
 		this.observe(this.#workspaceContext?.icon, (value) => (this._icon = value), '_observeIcon');
+		this.observe(
+			this.#workspaceContext?.description,
+			(value) => (this._description = value || ''),
+			'_observeDescription',
+		);
 	}
 
 	#onNameAndAliasChange(event: InputEvent & { target: UmbInputWithAliasElement }) {
@@ -86,16 +100,25 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 					<umb-icon name=${this._icon || ''}></umb-icon>
 				</uui-button>
 
-				<umb-input-with-alias
-					id="name"
-					label=${this.localize.term('placeholders_entername')}
-					.value=${this._name}
-					alias=${ifDefined(this._alias)}
-					?auto-generate-alias=${this._isNew}
-					?alias-readonly=${this._aliasCanBeChanged === false}
-					@change=${this.#onNameAndAliasChange}
-					${umbFocus()}>
-				</umb-input-with-alias>
+				<div id="editors">
+					<umb-input-with-alias
+						id="name"
+						label=${this.localize.term('placeholders_entername')}
+						.value=${this._name}
+						alias=${ifDefined(this._alias)}
+						?auto-generate-alias=${this._isNew}
+						?alias-readonly=${this._aliasCanBeChanged === false}
+						@change=${this.#onNameAndAliasChange}
+						${umbFocus()}>
+					</umb-input-with-alias>
+
+					<uui-input
+						id="description"
+						.label=${this.localize.term('placeholders_enterDescription')}
+						.value=${this._description}
+						.placeholder=${this.localize.term('placeholders_enterDescription')}
+						@input=${this.#onDescriptionChange}></uui-input>
+				</div>
 			</div>
 		`;
 	}
@@ -127,6 +150,17 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 				flex: 1 1 auto;
 				align-items: center;
 			}
+
+			#editors {
+				width: 100%;
+			}
+
+			#description {
+				width: 100%;
+				margin-top: -1px;
+				--uui-input-height: var(--uui-size-8);
+				--uui-input-border-color: transparent;
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/user-group-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/user-group-workspace.context.ts
@@ -29,6 +29,7 @@ export class UmbUserGroupWorkspaceContext
 	readonly mediaRootAccess = this._data.createObservablePartOfCurrent((data) => data?.mediaRootAccess || false);
 	readonly fallbackPermissions = this._data.createObservablePartOfCurrent((data) => data?.fallbackPermissions || []);
 	readonly permissions = this._data.createObservablePartOfCurrent((data) => data?.permissions || []);
+	readonly description = this._data.createObservablePartOfCurrent((data) => data?.description || '');
 
 	constructor(host: UmbControllerHost) {
 		super(host, {
@@ -99,6 +100,15 @@ export class UmbUserGroupWorkspaceContext
 	setFallbackPermissions(fallbackPermissions: Array<string>) {
 		this._data.updateCurrent({ fallbackPermissions });
 	}
+
+	/**
+	 * Sets the description
+	 * @param {string} description - The description
+	 * @memberof UmbUserGroupWorkspaceContext
+	 */
+	setDescription(description: string) {
+		this._data.updateCurrent({ description });
+	}
 }
 
 export { UmbUserGroupWorkspaceContext as api };

Original file line number	Diff line number	Diff line change
`@@ -193,7 +193,6 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker`
`193`	`193`	`const query = (event.target.value as string) ?? '';`
`194`	`194`	`if (query.startsWith('#') \|\| query.startsWith('?')) {`
`195`	`195`	`this.#partialUpdateLink({ queryString: query });`
`196`		`- this.#validationContext.messages.removeMessageByKey('UmbLinkPickerValueValidator');`
`197`	`196`	`return;`
`198`	`197`	`}`
`199`	`198`
`@@ -204,7 +203,6 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker`
`204`	`203`	`} else {`
`205`	`204`	`this.#partialUpdateLink({ queryString: '' });`
`206`	`205`	`}`
`207`		`- this.#validationContext.messages.removeMessageByKey('UmbLinkPickerValueValidator');`
`208`	`206`	`}`
`209`	`207`
`210`	`208`	`#onLinkTitleInput(event: UUIInputEvent) {`
`@@ -235,7 +233,6 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker`
`235`	`233`	`type: 'external',`
`236`	`234`	`url,`
`237`	`235`	`});`
`238`		`- this.#validationContext.messages.removeMessageByKey('UmbLinkPickerValueValidator');`
`239`	`236`	`}`
`240`	`237`
`241`	`238`	`async #onPickerSelection(event: UmbInputPickerEvent, type: 'document' \| 'media') {`
Original file line number	Diff line number	Diff line change
`@@ -19,4 +19,5 @@ export interface UmbUserGroupDetailModel {`
`19`	`19`	`permissions: Array<any>;`
`20`	`20`	`sections: Array<string>;`
`21`	`21`	`unique: string;`
	`22`	`+ description: string \| null;`
`22`	`23`	`}`