Merge pull request #2000 from umbraco/bugfix/v14/user-startnode-and-user-groups-links

Bugfix: user startnode and user group links

src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts

@@ -1,8 +1,11 @@
+import { UMB_USER_GROUP_ENTITY_TYPE } from '../../entity.js';
 import type { UmbUserGroupItemModel } from '../../repository/index.js';
 import { UmbUserGroupPickerContext } from './user-group-input.context.js';
 import { css, html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
+import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-user-group-input')
@@ -74,6 +77,9 @@ export class UmbUserGroupInputElement extends UUIFormControlMixin(UmbLitElement,
 
 	#pickerContext = new UmbUserGroupPickerContext(this);
 
+	@state()
+	private _editUserGroupPath = '';
+
 	constructor() {
 		super();
 
@@ -91,6 +97,15 @@ export class UmbUserGroupInputElement extends UUIFormControlMixin(UmbLitElement,
 
 		this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
 		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observerItems');
+
+		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+			.addAdditionalPath(UMB_USER_GROUP_ENTITY_TYPE)
+			.onSetup(async () => {
+				return { data: { entityType: UMB_USER_GROUP_ENTITY_TYPE, preset: {} } };
+			})
+			.observeRouteBuilder((routeBuilder) => {
+				this._editUserGroupPath = routeBuilder({});
+			});
 	}
 
 	protected getFormElement() {
@@ -110,8 +125,9 @@ export class UmbUserGroupInputElement extends UUIFormControlMixin(UmbLitElement,
 
 	private _renderItem(item: UmbUserGroupItemModel) {
 		if (!item.unique) return;
+		const href = `${this._editUserGroupPath}edit/${item.unique}`;
 		return html`
-			<umb-user-group-ref name="${ifDefined(item.name)}">
+			<umb-user-group-ref name="${ifDefined(item.name)}" href=${href}>
 				${item.icon ? html`<umb-icon slot="icon" name=${item.icon}></umb-icon>` : nothing}
 				<uui-action-bar slot="actions">
 					<uui-button

src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-document-start-node/user-document-start-node.element.ts

@@ -8,6 +8,9 @@ export class UmbUserDocumentStartNodeElement extends UmbLitElement {
 	@property({ type: Array, attribute: false })
 	uniques: Array<string> = [];
 
+	@property({ type: Boolean })
+	readonly = false;
+
 	@state()
 	_displayValue: Array<UmbDocumentItemModel> = [];
 
@@ -22,7 +25,10 @@ export class UmbUserDocumentStartNodeElement extends UmbLitElement {
 	render() {
 		if (this.uniques.length < 1) {
 			return html`
-				<uui-ref-node name="Content Root">
+				<uui-ref-node
+					name="Content Root"
+					?disabled=${this.readonly}
+					style="--uui-color-disabled-contrast: var(--uui-color-text)">
 					<uui-icon slot="icon" name="folder"></uui-icon>
 				</uui-ref-node>
 			`;
@@ -34,7 +40,10 @@ export class UmbUserDocumentStartNodeElement extends UmbLitElement {
 			(item) => {
 				return html`
 					<!-- TODO: get correct variant name -->
-					<uui-ref-node name=${item.variants[0]?.name}>
+					<uui-ref-node
+						name=${item.variants[0]?.name}
+						?disabled=${this.readonly}
+						style="--uui-color-disabled-contrast: var(--uui-color-text)">
 						<uui-icon slot="icon" name="folder"></uui-icon>
 					</uui-ref-node>
 				`;

src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-media-start-node/user-media-start-node.element.ts

@@ -8,6 +8,9 @@ export class UmbUserMediaStartNodeElement extends UmbLitElement {
 	@property({ type: Array, attribute: false })
 	uniques: Array<string> = [];
 
+	@property({ type: Boolean })
+	readonly = false;
+
 	@state()
 	_displayValue: Array<UmbMediaItemModel> = [];
 
@@ -22,7 +25,10 @@ export class UmbUserMediaStartNodeElement extends UmbLitElement {
 	render() {
 		if (this.uniques.length < 1) {
 			return html`
-				<uui-ref-node name="Media Root">
+				<uui-ref-node
+					name="Media Root"
+					?disabled=${this.readonly}
+					style="--uui-color-disabled-contrast: var(--uui-color-text)">
 					<uui-icon slot="icon" name="folder"></uui-icon>
 				</uui-ref-node>
 			`;
@@ -34,7 +40,10 @@ export class UmbUserMediaStartNodeElement extends UmbLitElement {
 			(item) => {
 				return html`
 					<!-- TODO: get correct variant name -->
-					<uui-ref-node name=${ifDefined(item.variants[0]?.name)}>
+					<uui-ref-node
+						name=${ifDefined(item.variants[0]?.name)}
+						?disabled=${this.readonly}
+						style="--uui-color-disabled-contrast: var(--uui-color-text)">
 						<uui-icon slot="icon" name="folder"></uui-icon>
 					</uui-ref-node>
 				`;

src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access/user-workspace-access.element.ts

@@ -40,6 +40,7 @@ export class UmbUserWorkspaceAccessElement extends UmbLitElement {
 	#renderDocumentStartNodes() {
 		return html` <b><umb-localize key="sections_content">Content</umb-localize></b>
 			<umb-user-document-start-node
+				readonly
 				.uniques=${this._user?.documentStartNodeUniques.map((reference) => reference.unique) ||
 				[]}></umb-user-document-start-node>`;
 	}
@@ -47,6 +48,7 @@ export class UmbUserWorkspaceAccessElement extends UmbLitElement {
 	#renderMediaStartNodes() {
 		return html` <b><umb-localize key="sections_media">Media</umb-localize></b>
 			<umb-user-media-start-node
+				readonly
 				.uniques=${this._user?.mediaStartNodeUniques.map((reference) => reference.unique) ||
 				[]}></umb-user-media-start-node>`;
 	}