From 76c7924cc2b5720fd054cdf712a0efc3a8ef5164 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 18 Apr 2024 11:35:35 +0100
Subject: [PATCH] Media Entity Picker: Swaps `umb-input-entity` with
 `umb-input-media`

After discussions we agreed that `umb-input-media` should be
for picking media entities, not intended for richer usage
(e.g. crops, focal points).
---
 .../input-tree/input-tree.element.ts          |  1 -
 ...y-editor-ui-media-entity-picker.element.ts | 19 ++++++-------------
 .../workspace-package-builder.element.ts      | 12 +++---------
 3 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
index 83ddc09f3c..604920ae12 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
@@ -122,7 +122,6 @@ export class UmbInputTreeElement extends UUIFormControlMixin(UmbLitElement, '')
 	}
 
 	#renderMediaPicker() {
-		// TODO: [LK] Review the data structure of this input editor.
 		return html`<umb-input-media
 			.selection=${this.#selection}
 			.allowedContentTypeIds=${this._allowedContentTypeIds}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts
index f6647503a0..2653a68a76 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts
@@ -1,11 +1,9 @@
-import { UmbMediaPickerContext } from '../../components/input-media/input-media.context.js';
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
-import type { UmbInputEntityElement } from '@umbraco-cms/backoffice/components';
-import type { UmbMediaItemModel } from '@umbraco-cms/backoffice/media';
+import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 
@@ -28,30 +26,25 @@ export class UmbPropertyEditorUIMediaEntityPickerElement extends UmbLitElement i
 		if (!config) return;
 
 		const minMax = config?.getValueByAlias<NumberRangeValueType>('validationLimit');
-		if (!minMax) return;
-
-		this.#min = minMax.min ?? 0;
-		this.#max = minMax.max ?? Infinity;
+		this.#min = minMax?.min ?? 0;
+		this.#max = minMax?.max ?? Infinity;
 	}
 	public get config() {
 		return undefined;
 	}
 
-	#onChange(event: { target: UmbInputEntityElement }) {
+	#onChange(event: { target: UmbInputMediaElement }) {
 		this.value = event.target.selection?.join(',') ?? null;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {
 		return html`
-			<umb-input-entity
-				.getIcon=${(item: UmbMediaItemModel) => item.mediaType.icon ?? 'icon-picture'}
+			<umb-input-media
 				.min=${this.#min}
 				.max=${this.#max}
-				.pickerContext=${UmbMediaPickerContext}
 				.selection=${this.#selection}
-				@change=${this.#onChange}>
-			</umb-input-entity>
+				@change=${this.#onChange}></umb-input-media>
 		`;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
index 2abb1e6b0b..02ccdc6fe0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
@@ -1,5 +1,4 @@
 import { UmbDictionaryPickerContext } from '../../../dictionary/components/input-dictionary/input-dictionary.context.js';
-import { UmbMediaPickerContext } from '../../../media/media/components/input-media/input-media.context.js';
 import { UmbPackageRepository } from '../../package/repository/index.js';
 import { UmbPartialViewPickerContext } from '../../../templating/partial-views/components/input-partial-view/input-partial-view.context.js';
 import { UmbScriptPickerContext } from '../../../templating/scripts/components/input-script/input-script.context.js';
@@ -27,8 +26,8 @@ import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
 import type { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
 import type { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type';
 import type { UmbInputEntityElement } from '@umbraco-cms/backoffice/components';
+import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
 import type { UmbInputMediaTypeElement } from '@umbraco-cms/backoffice/media-type';
-import type { UmbMediaItemModel } from '@umbraco-cms/backoffice/media';
 import type { UmbNotificationContext } from '@umbraco-cms/backoffice/notification';
 import type {
 	UUIBooleanInputEvent,
@@ -225,7 +224,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 		`;
 	}
 
-	#onMediaChange(event: { target: UmbInputEntityElement }) {
+	#onMediaChange(event: { target: UmbInputMediaElement }) {
 		if (!this._package) return;
 
 		this._package.mediaIds = event.target.selection ?? [];
@@ -242,12 +241,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 		return html`
 			<umb-property-layout label="Media">
 				<div slot="editor">
-					<umb-input-entity
-						.getIcon=${(item: UmbMediaItemModel) => item.mediaType.icon ?? 'icon-picture'}
-						.pickerContext=${UmbMediaPickerContext}
-						.selection=${this._package.mediaIds ?? []}
-						@change=${this.#onMediaChange}>
-					</umb-input-entity>
+					<umb-input-media .selection=${this._package.mediaIds ?? []} @change=${this.#onMediaChange}></umb-input-media>
 					<uui-checkbox
 						label="Include child nodes"
 						.checked=${this._package.mediaLoadChildNodes ?? false}