remove alias from content picker and add media picker

src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-move.element.ts

@@ -2,14 +2,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { map } from 'rxjs';
-import { repeat } from 'lit-html/directives/repeat.js';
 import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from '../collection.context';
 import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal';
 import { UmbMediaTreeStore, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN } from '../../../media/media/media.tree.store';
 import { UmbLitElement } from '@umbraco-cms/element';
-import type { ManifestCollectionBulkAction, MediaDetails } from '@umbraco-cms/models';
-import { UmbMediaDetailStore } from 'src/backoffice/media/media/media.detail.store';
+import type { ManifestCollectionBulkAction } from '@umbraco-cms/models';
 
 @customElement('umb-collection-bulk-action-media-move')
 export class UmbCollectionBulkActionMoveElement extends UmbLitElement {
@@ -39,12 +36,11 @@ export class UmbCollectionBulkActionMoveElement extends UmbLitElement {
 		});
 	}
 
-	#handleClick(event: Event) {
+	#handleClick() {
 		const selectionSubscription = this.#collectionContext?.selection.subscribe((selection) => {
-			const modalHandler = this.#modalService?.contentPicker({
+			const modalHandler = this.#modalService?.mediaPicker({
 				selection: [],
 				multiple: false,
-				alias: 'Umb.Tree.Media',
 			});
 			modalHandler?.onClose().then((data) => {
 				if (selection.length > 0) {

src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.element.ts

@@ -6,7 +6,6 @@ import { UmbModalLayoutElement } from '../modal-layout.element';
 export interface UmbModalContentPickerData {
 	multiple?: boolean;
 	selection: Array<string>;
-	alias?: string;
 }
 
 import { UmbTreeElement } from '../../../../backoffice/shared/components/tree/tree.element';
@@ -52,16 +51,12 @@ export class UmbModalLayoutContentPickerElement extends UmbModalLayoutElement<Um
 	@state()
 	_selection: Array<string> = [];
 
-	@state()
-	_alias = '';
-
 	@state()
 	_multiple = true;
 
 	connectedCallback() {
 		super.connectedCallback();
 		this._selection = this.data?.selection ?? [];
-		this._alias = this.data?.alias ?? 'Umb.Tree.Documents';
 		this._multiple = this.data?.multiple ?? true;
 	}
 
@@ -87,7 +82,7 @@ export class UmbModalLayoutContentPickerElement extends UmbModalLayoutElement<Um
 					<uui-input></uui-input>
 					<hr />
 					<umb-tree
-						alias=${this._alias}
+						alias="Umb.Tree.Documents"
 						@selected=${this._handleSelectionChange}
 						.selection=${this._selection}
 						selectable></umb-tree>

src/Umbraco.Web.UI.Client/src/core/modal/layouts/media-picker/modal-layout-media-picker.element.ts

@@ -0,0 +1,102 @@
+import { css, html } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, state } from 'lit/decorators.js';
+import { UmbModalLayoutElement } from '../modal-layout.element';
+
+export interface UmbModalMediaPickerData {
+	multiple?: boolean;
+	selection: Array<string>;
+}
+
+import { UmbTreeElement } from '../../../../backoffice/shared/components/tree/tree.element';
+
+@customElement('umb-modal-layout-media-picker')
+export class UmbModalLayoutMediaPickerElement extends UmbModalLayoutElement<UmbModalMediaPickerData> {
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				margin-left: 16px;
+				margin-right: 16px;
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin: 16px 0;
+			}
+
+			#content-list {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
+
+			.content-item {
+				cursor: pointer;
+			}
+
+			.content-item.selected {
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+			}
+		`,
+	];
+
+	@state()
+	_selection: Array<string> = [];
+
+	@state()
+	_multiple = true;
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._selection = this.data?.selection ?? [];
+		this._multiple = this.data?.multiple ?? true;
+	}
+
+	private _handleSelectionChange(e: CustomEvent) {
+		e.stopPropagation();
+		const element = e.target as UmbTreeElement;
+		//TODO: Should multiple property be implemented here or be passed down into umb-tree?
+		this._selection = this._multiple ? element.selection : [element.selection[element.selection.length - 1]];
+	}
+
+	private _submit() {
+		this.modalHandler?.close({ selection: this._selection });
+	}
+
+	private _close() {
+		this.modalHandler?.close({ selection: this._selection });
+	}
+
+	render() {
+		return html`
+			<umb-workspace-layout headline="Select Content">
+				<uui-box>
+					<uui-input></uui-input>
+					<hr />
+					<umb-tree
+						alias="Umb.Tree.Media"
+						@selected=${this._handleSelectionChange}
+						.selection=${this._selection}
+						selectable></umb-tree>
+				</uui-box>
+				<div slot="actions">
+					<uui-button label="Close" @click=${this._close}></uui-button>
+					<uui-button label="Submit" look="primary" color="positive" @click=${this._submit}></uui-button>
+				</div>
+			</umb-workspace-layout>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-modal-layout-media-picker': UmbModalLayoutMediaPickerElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts

@@ -13,6 +13,7 @@ import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm
 import type { UmbModalContentPickerData } from './layouts/content-picker/modal-layout-content-picker.element';
 import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
 import { UmbModalHandler } from './modal-handler';
+import { UmbModalMediaPickerData } from './layouts/media-picker/modal-layout-media-picker.element';
 import { UmbContextToken } from '@umbraco-cms/context-api';
 
 export type UmbModalType = 'dialog' | 'sidebar';
@@ -51,6 +52,17 @@ export class UmbModalService {
 		return this.open('umb-modal-layout-content-picker', { data, type: 'sidebar', size: 'small' });
 	}
 
+	/**
+	 * Opens a Media Picker sidebar modal
+	 * @public
+	 * @param {UmbModalMediaPickerData} [data]
+	 * @return {*}  {UmbModalHandler}
+	 * @memberof UmbModalService
+	 */
+	public mediaPicker(data?: UmbModalMediaPickerData): UmbModalHandler {
+		return this.open('umb-modal-layout-media-picker', { data, type: 'sidebar', size: 'small' });
+	}
+
 	/**
 	 * Opens a Property Editor UI sidebar modal
 	 * @public