register references

src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts

@@ -8,6 +8,7 @@ import { manifests as menuManifests } from './menu/manifests.js';
 import { manifests as modalManifests } from './modals/manifests.js';
 import { manifests as propertyEditorsManifests } from './property-editors/manifests.js';
 import { manifests as recycleBinManifests } from './recycle-bin/manifests.js';
+import { manifests as referenceManifests } from './reference/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
 import { manifests as searchManifests } from './search/manifests.js';
 import { manifests as sectionViewManifests } from './dashboard/manifests.js';
@@ -26,6 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 	...modalManifests,
 	...propertyEditorsManifests,
 	...recycleBinManifests,
+	...referenceManifests,
 	...repositoryManifests,
 	...searchManifests,
 	...sectionViewManifests,

src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/manifests.ts

@@ -0,0 +1,21 @@
+import { UMB_MEDIA_WORKSPACE_ALIAS } from '../../workspace/constants.js';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'workspaceInfoApp',
+		name: 'Media References Workspace Info App',
+		alias: 'Umb.WorkspaceInfoApp.Media.References',
+		element: () => import('./media-references-workspace-info-app.element.js'),
+		weight: 80,
+		meta: {
+			label: '#references_labelUsedByItems',
+		},
+		conditions: [
+			{
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
+				match: UMB_MEDIA_WORKSPACE_ALIAS,
+			},
+		],
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/media-references-workspace-info-app.element.ts

@@ -1,5 +1,6 @@
-import { UmbMediaReferenceRepository } from '../../../reference/index.js';
-import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbMediaReferenceRepository } from '../repository/index.js';
+import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../workspace/constants.js';
+import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { isDefaultReference, isDocumentReference, isMediaReference } from '@umbraco-cms/backoffice/relations';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
@@ -8,18 +9,16 @@ import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
 import type { UmbReferenceModel } from '@umbraco-cms/backoffice/relations';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
 import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
+import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
 
-@customElement('umb-media-workspace-view-info-reference')
-export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement {
+@customElement('umb-media-references-workspace-info-app')
+export class UmbMediaReferencesWorkspaceInfoAppElement extends UmbLitElement {
 	#itemsPerPage = 10;
 
 	#referenceRepository;
 
 	#routeBuilder?: UmbModalRouteBuilder;
 
-	@property()
-	mediaUnique = '';
-
 	@state()
 	private _currentPage = 1;
 
@@ -32,6 +31,9 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement {
 	@state()
 	private _loading = true;
 
+	#workspaceContext?: typeof UMB_MEDIA_WORKSPACE_CONTEXT.TYPE;
+	#mediaUnique?: UmbEntityUnique;
+
 	constructor() {
 		super();
 		this.#referenceRepository = new UmbMediaReferenceRepository(this);
@@ -44,6 +46,32 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement {
 			.observeRouteBuilder((routeBuilder) => {
 				this.#routeBuilder = routeBuilder;
 			});
+
+		this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (context) => {
+			this.#workspaceContext = context;
+			this.#observeMediaUnique();
+		});
+	}
+
+	#observeMediaUnique() {
+		this.observe(
+			this.#workspaceContext?.unique,
+			(unique) => {
+				if (!unique) {
+					this.#mediaUnique = undefined;
+					this._items = [];
+					return;
+				}
+
+				if (this.#mediaUnique === unique) {
+					return;
+				}
+
+				this.#mediaUnique = unique;
+				this.#getReferences();
+			},
+			'umbReferencesDocumentUniqueObserver',
+		);
 	}
 
 	protected override firstUpdated(): void {
@@ -51,10 +79,14 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement {
 	}
 
 	async #getReferences() {
+		if (!this.#mediaUnique) {
+			throw new Error('Media unique is required');
+		}
+
 		this._loading = true;
 
 		const { data } = await this.#referenceRepository.requestReferencedBy(
-			this.mediaUnique,
+			this.#mediaUnique,
 			(this._currentPage - 1) * this.#itemsPerPage,
 			this.#itemsPerPage,
 		);
@@ -218,10 +250,10 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement {
 	];
 }
 
-export default UmbMediaWorkspaceViewInfoReferenceElement;
+export default UmbMediaReferencesWorkspaceInfoAppElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-media-workspace-view-info-reference': UmbMediaWorkspaceViewInfoReferenceElement;
+		'umb-media-references-workspace-info-app': UmbMediaReferencesWorkspaceInfoAppElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/media/media/reference/manifests.ts

@@ -1,3 +1,4 @@
 import { manifests as repositoryManifests } from './repository/manifests.js';
+import { manifests as infoAppManifests } from './info-app/manifests.js';
 
-export const manifests: Array<UmbExtensionManifest> = [...repositoryManifests];
+export const manifests: Array<UmbExtensionManifest> = [...repositoryManifests, ...infoAppManifests];

src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts

@@ -11,9 +11,6 @@ import type { MediaUrlInfoModel } from '@umbraco-cms/backoffice/external/backend
 import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry';
 import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '@umbraco-cms/backoffice/section';
 import { UMB_SETTINGS_SECTION_ALIAS } from '@umbraco-cms/backoffice/settings';
-
-// import of local components
-import './media-workspace-view-info-reference.element.js';
 import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api';
 
 @customElement('umb-media-workspace-view-info')