fix Package with a view

src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts

@@ -1,8 +1,8 @@
 import { html, css, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement, property, state } from 'lit/decorators.js';
-import { firstValueFrom, map } from 'rxjs';
 import { UUIButtonState } from '@umbraco-ui/uui';
+import { map } from 'rxjs';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
@@ -14,10 +14,18 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco
 
 @customElement('umb-installed-packages-section-view-item')
 export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
-	
-
 	@property()
-	name?: string;
+	public get name(): string | undefined {
+		return this.#name;
+	}
+	public set name(value: string | undefined) {
+		const oldValue = this.#name;
+		if (oldValue === value) return;
+		this.#name = value;
+		this.#observePackageView();
+		this.requestUpdate('name', oldValue);
+	}
+	#name?: string | undefined;
 
 	@property()
 	version?: string | null;
@@ -48,29 +56,22 @@ export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
 		});
 	}
 
-	connectedCallback(): void {
-		super.connectedCallback();
-
-		if (this.name?.length) {
-			this.findPackageView(this.name);
-		}
-	}
-
-	private async findPackageView(alias: string) {
-		const observable = umbExtensionsRegistry
-			?.extensionsOfType('packageView')
-			.pipe(map((e) => e.filter((m) => m.meta.packageName === alias)));
-
-		if (!observable) {
-			return;
-		}
-
-		const views = await firstValueFrom(observable);
-		if (!views.length) {
-			return;
-		}
-
-		this._packageView = views[0];
+	#observePackageView() {
+		this.observe(
+			umbExtensionsRegistry.extensionsOfType('packageView').pipe(
+				map((extensions) => {
+					return extensions.filter((extension) => extension.meta.packageName === this.#name);
+				})
+			),
+			(manifests) => {
+				if (manifests.length === 0) {
+					this._packageView = undefined;
+					return;
+				}
+				this._packageView = manifests[0];
+			},
+			'_observePackageViewExtension'
+		);
 	}
 
 	async _onMigration() {
@@ -96,27 +97,29 @@ export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`
-			<uui-ref-node-package
-				name=${ifDefined(this.name)}
-				version="${ifDefined(this.version ?? undefined)}"
-				@open=${this._onConfigure}
-				?disabled="${!this._packageView}">
-				${this.customIcon ? html`<uui-icon slot="icon" name="${this.customIcon}"></uui-icon>` : nothing}
-				<div slot="tag">
-					${this.hasPendingMigrations
-						? html`<uui-button
-								@click="${this._onMigration}"
-								.state=${this._migrationButtonState}
-								color="warning"
-								look="primary"
-								label="Run pending package migrations">
-								Run pending migrations
-						  </uui-button>`
-						: nothing}
-				</div>
-			</uui-ref-node-package>
-		`;
+		return this.name
+			? html`
+					<uui-ref-node-package
+						name=${ifDefined(this.name)}
+						version="${ifDefined(this.version ?? undefined)}"
+						@open=${this._onConfigure}
+						?disabled="${!this._packageView}">
+						${this.customIcon ? html`<uui-icon slot="icon" name="${this.customIcon}"></uui-icon>` : nothing}
+						<div slot="tag">
+							${this.hasPendingMigrations
+								? html`<uui-button
+										@click="${this._onMigration}"
+										.state=${this._migrationButtonState}
+										color="warning"
+										look="primary"
+										label="Run pending package migrations">
+										Run pending migrations
+								  </uui-button>`
+								: nothing}
+						</div>
+					</uui-ref-node-package>
+			  `
+			: '';
 	}
 
 	private async _onConfigure() {
@@ -142,7 +145,7 @@ export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
 		});
 		*/
 	}
-	
+
 	static styles = css`
 		:host {
 			display: flex;

src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts

@@ -11,8 +11,6 @@ import './installed-packages-section-view-item.element';
 
 @customElement('umb-installed-packages-section-view')
 export class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
-	
-
 	@state()
 	private _installedPackages: UmbPackageWithMigrationStatus[] = [];
 
@@ -38,7 +36,7 @@ export class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
 
 		const [package$, migration$] = data;
 
-		combineLatest([package$, migration$]).subscribe(([packages, migrations]) => {
+		this.observe(combineLatest([package$, migration$]), ([packages, migrations]) => {
 			this._installedPackages = packages.map((p) => {
 				const migration = migrations.find((m) => m.packageName === p.name);
 				if (migration) {
@@ -109,7 +107,7 @@ export class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
 			</uui-ref-list>
 		</uui-box>`;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`

src/Umbraco.Web.UI.Client/src/core/mocks/domains/manifests.handlers.ts

@@ -58,7 +58,7 @@ export const manifestDevelopmentHandler = rest.get(umbracoPath('/package/manifes
 						name: 'My Custom Package View',
 						js: '/App_Plugins/package-view.js',
 						meta: {
-							packageName: 'my.package',
+							packageName: 'Package with a view',
 						},
 					},
 				],