render editable name

Author: madsrasmussen

src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts

@@ -1,8 +1,11 @@
 import { UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
 import { UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT } from './data-type-folder.workspace.context-token.js';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
+import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
 
 const elementName = 'umb-data-type-folder-workspace-editor';
 @customElement(elementName)
@@ -30,12 +33,37 @@ export class UmbDataTypeFolderWorkspaceEditorElement extends UmbLitElement {
 		});
 	}
 
+	#handleInput(event: UUIInputEvent) {
+		if (event instanceof UUIInputEvent) {
+			const target = event.composedPath()[0] as UUIInputElement;
+
+			if (typeof target?.value === 'string') {
+				this.#workspaceContext?.setName(target.value);
+			}
+		}
+	}
+
 	override render() {
-		return html`<umb-workspace-editor headline=${this._name} alias=${UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS}>
+		return html`<umb-workspace-editor alias=${UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS}>
+			<uui-input
+				slot="header"
+				id="nameInput"
+				.value=${this._name ?? ''}
+				@input="${this.#handleInput}"
+				required
+				${umbBindToValidation(this, `$.name`, this._name)}
+				${umbFocus()}></uui-input>
 		</umb-workspace-editor>`;
 	}
 
-	static override styles = [UmbTextStyles, css``];
+	static override styles = [
+		UmbTextStyles,
+		css`
+			#nameInput {
+				flex: 1 1 auto;
+			}
+		`,
+	];
 }
 
 export { UmbDataTypeFolderWorkspaceEditorElement as element };

src/packages/data-type/tree/folder/workspace/manifests.ts

@@ -1,3 +1,4 @@
+import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DATA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
 import { UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
 
@@ -12,4 +13,22 @@ export const manifests: Array<UmbExtensionManifest> = [
 			entityType: UMB_DATA_TYPE_FOLDER_ENTITY_TYPE,
 		},
 	},
+	{
+		type: 'workspaceAction',
+		kind: 'default',
+		alias: 'Umb.WorkspaceAction.MediaType.Folder.Submit',
+		name: 'Save Media Type Folder Workspace Action',
+		api: UmbSubmitWorkspaceAction,
+		meta: {
+			label: '#buttons_save',
+			look: 'primary',
+			color: 'positive',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				match: UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS,
+			},
+		],
+	},
 ];

src/packages/media/media-types/tree/folder/workspace/manifests.ts

@@ -16,7 +16,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'workspaceAction',
 		kind: 'default',
-		alias: 'Umb.WorkspaceAction.MediaType.Folder.Save',
+		alias: 'Umb.WorkspaceAction.MediaType.Folder.Submit',
 		name: 'Save Media Type Folder Workspace Action',
 		api: UmbSubmitWorkspaceAction,
 		meta: {