From 3eb9eab34e1b16f215db5da2d918e872bc7f4977 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Sun, 1 Oct 2023 21:50:53 +0200
Subject: [PATCH] update user group picker to use collection repository

---
 .../user-group-picker-modal.element.ts        | 52 +++++--------------
 1 file changed, 12 insertions(+), 40 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts
index 18f2f5116d..4a24f3cfbe 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts
@@ -1,12 +1,9 @@
-import type { UmbUserGroupRepository } from '../../repository/user-group.repository.js';
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbUserGroupCollectionRepository } from '../../collection/repository/index.js';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbSelectionManagerBase } from '@umbraco-cms/backoffice/utils';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
-import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
-import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { createExtensionClass } from '@umbraco-cms/backoffice/extension-api';
 
 @customElement('umb-user-group-picker-modal')
 export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any> {
@@ -14,41 +11,16 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 	private _userGroups: Array<UserGroupResponseModel> = [];
 
 	#selectionManager = new UmbSelectionManagerBase();
-	#userGroupRepository?: UmbUserGroupRepository;
+	#userGroupCollectionRepository = new UmbUserGroupCollectionRepository(this);
 
-	connectedCallback(): void {
-		super.connectedCallback();
-
-		// TODO: in theory this config could change during the lifetime of the modal, so we could observe it
-		this.#selectionManager.setMultiple(this.data?.multiple ?? false);
-		this.#selectionManager.setSelection(this.data?.selection ?? []);
-
-		// TODO: this code is reused in multiple places, so it should be extracted to a function
-		new UmbObserverController(
-			this,
-			umbExtensionsRegistry.getByTypeAndAlias('repository', 'Umb.Repository.UserGroup'),
-			async (repositoryManifest) => {
-				if (!repositoryManifest) return;
-
-				try {
-					const result = await createExtensionClass<UmbUserGroupRepository>(repositoryManifest, [this]);
-					this.#userGroupRepository = result;
-					this.#observeUserGroups();
-				} catch (error) {
-					throw new Error('Could not create repository with alias: Umb.Repository.User');
-				}
-			}
-		);
+	protected firstUpdated(): void {
+		this.#observeUserGroups();
 	}
 
 	async #observeUserGroups() {
-		if (!this.#userGroupRepository) return;
-		// TODO is this the correct end point?
-		const { data } = await this.#userGroupRepository.requestCollection();
-
-		if (data) {
-			this._userGroups = data.items;
-		}
+		const { error, asObservable } = await this.#userGroupCollectionRepository.requestCollection();
+		if (error) return;
+		this.observe(asObservable(), (items) => (this._userGroups = items));
 	}
 
 	#submit() {
@@ -68,14 +40,14 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 					${this._userGroups.map(
 						(item) => html`
 							<uui-menu-item
-								label=${item.name}
+								label=${ifDefined(item.name)}
 								selectable
 								@selected=${() => this.#selectionManager.select(item.id!)}
 								@deselected=${() => this.#selectionManager.deselect(item.id!)}
 								?selected=${this.#selectionManager.isSelected(item.id!)}>
-								<uui-icon .name=${item.icon} slot="icon"></uui-icon>
+								<uui-icon .name=${item.icon || null} slot="icon"></uui-icon>
 							</uui-menu-item>
-						`
+						`,
 					)}
 				</uui-box>
 				<div slot="actions">