From 3e4d34c857559ed5150a08c5c845cb11604f5ce3 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Mon, 27 May 2024 23:02:25 +0200
Subject: [PATCH] feat: add descriptions to media types and show them in the
 media create options modal

---
 .../media-type-workspace-editor.element.ts    | 57 ++++++++++++++++---
 .../media-create-options-modal.element.ts     | 22 ++++---
 2 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts
index 75360342ce..a8eccc38b4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts
@@ -4,12 +4,16 @@ import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoff
 import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/components';
+import type { UUITextareaElement } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-media-type-workspace-editor')
 export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _name?: string;
 
+	@state()
+	private _description?: string;
+
 	@state()
 	private _alias?: string;
 
@@ -36,6 +40,11 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
 	#observeMediaType() {
 		if (!this.#workspaceContext) return;
 		this.observe(this.#workspaceContext.name, (name) => (this._name = name), '_observeName');
+		this.observe(
+			this.#workspaceContext.description,
+			(description) => (this._description = description),
+			'_observeDescription',
+		);
 		this.observe(this.#workspaceContext.alias, (alias) => (this._alias = alias), '_observeAlias');
 		this.observe(this.#workspaceContext.icon, (icon) => (this._icon = icon), '_observeIcon');
 		this.observe(this.#workspaceContext.isNew, (isNew) => (this._isNew = isNew), '_observeIsNew');
@@ -66,6 +75,10 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
 		this.#workspaceContext?.setAlias(event.target.alias ?? '');
 	}
 
+	#onDescriptionChange(event: InputEvent & { target: UUITextareaElement }) {
+		this.#workspaceContext?.setDescription(event.target.value.toString() ?? '');
+	}
+
 	render() {
 		return html`<umb-workspace-editor alias="Umb.Workspace.MediaType">
 			<div id="header" slot="header">
@@ -73,15 +86,24 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
 					<umb-icon name=${ifDefined(this._icon)}></umb-icon>
 				</uui-button>
 
-				<umb-input-with-alias
-					id="name"
-					label="name"
-					value=${this._name}
-					alias=${this._alias}
-					?auto-generate-alias=${this._isNew}
-					@change="${this.#onNameAndAliasChange}"
-					${umbFocus()}>
-				</umb-input-with-alias>
+				<div id="editors">
+					<umb-input-with-alias
+						id="name"
+						label="name"
+						value=${this._name}
+						alias=${this._alias}
+						?auto-generate-alias=${this._isNew}
+						@change="${this.#onNameAndAliasChange}"
+						${umbFocus()}>
+					</umb-input-with-alias>
+
+					<uui-input
+						id="description"
+						.label=${this.localize.term('placeholders_enterDescription')}
+						.value=${this._description}
+						.placeholder=${this.localize.term('placeholders_enterDescription')}
+						@input=${this.#onDescriptionChange}></uui-input>
+				</div>
 			</div>
 		</umb-workspace-editor>`;
 	}
@@ -99,10 +121,27 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
 				flex: 1 1 auto;
 			}
 
+			#editors {
+				display: flex;
+				flex: 1 1 auto;
+				flex-direction: column;
+				gap: var(--uui-size-space-1);
+			}
+
 			#name {
 				width: 100%;
 			}
 
+			#description {
+				width: 100%;
+				--uui-input-height: var(--uui-size-8);
+				--uui-input-border-color: transparent;
+			}
+
+			#description:hover {
+				--uui-input-border-color: var(--uui-color-border);
+			}
+
 			#icon {
 				font-size: calc(var(--uui-size-layout-3) / 2);
 				margin-right: var(--uui-size-space-2);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-actions/create/media-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-actions/create/media-create-options-modal.element.ts
index 0bedee161a..6e484f826a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-actions/create/media-create-options-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-actions/create/media-create-options-modal.element.ts
@@ -51,7 +51,11 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
 	}
 
 	// close the modal when navigating to data type
-	#onNavigate() {
+	#onNavigate(mediaType: UmbAllowedMediaTypeModel) {
+		const url = `section/media/workspace/media/create/parent/${this.data?.parent.entityType}/${
+			this.data?.parent.unique ?? 'null'
+		}/${mediaType.unique}`;
+		history.pushState({}, '', url);
 		this._submitModal();
 	}
 
@@ -64,15 +68,15 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
 						: nothing}
 					${this._allowedMediaTypes.map(
 						(mediaType) => html`
-							<uui-menu-item
+							<uui-ref-node-document-type
 								data-id=${ifDefined(mediaType.unique)}
-								href="${`section/media/workspace/media/create/parent/${this.data?.parent.entityType}/${
-									this.data?.parent.unique ?? 'null'
-								}/${mediaType.unique}`}"
-								label="${mediaType.name}"
-								@click=${this.#onNavigate}>
-								> ${mediaType.icon ? html`<umb-icon slot="icon" name=${mediaType.icon}></umb-icon>` : nothing}
-							</uui-menu-item>
+								.name=${mediaType.name}
+								.alias=${mediaType.description}
+								select-only
+								selectable
+								@selected=${() => this.#onNavigate(mediaType)}>
+								${mediaType.icon ? html`<umb-icon slot="icon" name=${mediaType.icon}></umb-icon>` : nothing}
+							</uui-ref-node-document-type>
 						`,
 					)}
 				</uui-box>