Corrected rendering of member type icons on create button and picker (#18203)

* Corrected rendering of member type icons on create button and picker.

* Removed debug code.

* Member Picker: sets icon

---------

Co-authored-by: leekelleher <[email protected]>

Author: AndyButland

src/Umbraco.Web.UI.Client/src/packages/members/member/collection/action/create-member-collection-action.element.ts

@@ -50,11 +50,14 @@ export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
 				(option) => option.unique,
 				(option) =>
 					html`<uui-button
+						class="create-member-type"
 						compact
 						label=${option.label}
 						href="section/member-management/workspace/member/create/${option.unique}">
-						<uui-icon name=${option.icon}></uui-icon>
-						<span style="margin-left: var(--uui-size-space-2)">${option.label}</span>
+						<div>
+							<umb-icon name=${option.icon}></umb-icon>
+							<span>${option.label}</span>
+						</div>
 					</uui-button>`,
 			)}
 		`;
@@ -84,6 +87,12 @@ export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
 				flex-direction: column;
 				--uui-button-content-align: left;
 			}
+
+			uui-button.create-member-type > div {
+				display: flex;
+				align-items: center;
+				gap: 5px;
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/members/member/collection/repository/member-collection.server.data-source.ts

@@ -59,7 +59,7 @@ export class UmbMemberCollectionServerDataSource implements UmbCollectionDataSou
 				isLockedOut: item.isLockedOut,
 				groups: item.groups,
 				isTwoFactorEnabled: item.isTwoFactorEnabled,
-				memberType: { unique: item.memberType.id },
+				memberType: { unique: item.memberType.id, icon: item.memberType.icon },
 				username: item.username,
 				values: item.values as UmbMemberValueModel[],
 			};

src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts

@@ -1,18 +1,16 @@
 import type { UmbMemberItemModel } from '../../repository/index.js';
 import { UmbMemberPickerInputContext } from './input-member.context.js';
-import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
-import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import { UMB_MEMBER_TYPE_ENTITY_TYPE } from '@umbraco-cms/backoffice/member-type';
+import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
 
-const elementName = 'umb-input-member';
-
-@customElement(elementName)
+@customElement('umb-input-member')
 export class UmbInputMemberElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
 	UmbLitElement,
 ) {
@@ -215,6 +213,7 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
 		if (!item.unique) return nothing;
 		return html`
 			<uui-ref-node-member name=${item.name} id=${item.unique} ?readonly=${this.readonly}>
+				${when(item.memberType.icon, (icon) => html`<umb-icon slot="icon" name=${icon}></umb-icon>`)}
 				<uui-action-bar slot="actions">
 					${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)}
 				</uui-action-bar>
@@ -228,7 +227,7 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
 			<uui-button
 				href="${this._editMemberPath}edit/${item.unique}"
 				label="${this.localize.term('general_open')} ${item.name}">
-				${this.localize.term('general_open')}
+				<umb-localize key="general_open"></umb-localize>
 			</uui-button>
 		`;
 	}
@@ -257,6 +256,6 @@ export { UmbInputMemberElement as element };
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbInputMemberElement;
+		'umb-input-member': UmbInputMemberElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts

@@ -127,7 +127,7 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement<
 				@selected=${() => this.#pickerContext.selection.select(item.unique)}
 				@deselected=${() => this.#pickerContext.selection.deselect(item.unique)}
 				?selected=${this.#pickerContext.selection.isSelected(item.unique)}>
-				<uui-icon slot="icon" name="icon-user"></uui-icon>
+				<umb-icon slot="icon" name=${item.memberType.icon}></umb-icon>
 			</uui-menu-item>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/members/member/repository/detail/member-detail.server.data-source.ts

@@ -39,6 +39,7 @@ export class UmbMemberServerDataSource implements UmbDetailDataSource<UmbMemberD
 			username: '',
 			memberType: {
 				unique: '',
+				icon: '',
 			},
 			isApproved: false,
 			isLockedOut: false,
@@ -88,6 +89,7 @@ export class UmbMemberServerDataSource implements UmbDetailDataSource<UmbMemberD
 			username: data.username,
 			memberType: {
 				unique: data.memberType.id,
+				icon: data.memberType.icon,
 			},
 			isApproved: data.isApproved,
 			isLockedOut: data.isLockedOut,

src/Umbraco.Web.UI.Client/src/packages/members/member/types.ts

@@ -17,7 +17,10 @@ export interface UmbMemberDetailModel extends UmbContentDetailModel {
 	lastLockoutDate: string | null;
 	lastLoginDate: string | null;
 	lastPasswordChangeDate: string | null;
-	memberType: { unique: string };
+	memberType: {
+		unique: string;
+		 icon: string;
+	};
 	newPassword?: string;
 	oldPassword?: string;
 	unique: string;

src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace.context.ts

@@ -78,6 +78,7 @@ export class UmbMemberWorkspaceContext
 			preset: {
 				memberType: {
 					unique: memberTypeUnique,
+					icon: "icon-user"
 				},
 			},
 		});