Feature: Workspace name element

src/packages/core/workspace/components/index.ts

@@ -4,4 +4,5 @@ export * from './workspace-action/index.js';
 export * from './workspace-editor/index.js';
 export * from './workspace-entity-action-menu/index.js';
 export * from './workspace-footer/index.js';
+export * from './workspace-header-name-editable/index.js';
 export * from './workspace-split-view/index.js';

src/packages/core/workspace/components/workspace-header-name-editable/index.ts

@@ -0,0 +1 @@
+export * from './workspace-header-name-editable.element.js';

src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts

@@ -0,0 +1,76 @@
+import { UMB_NAMABLE_WORKSPACE_CONTEXT } from '../../namable/index.js';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { umbFocus, 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 { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
+
+@customElement('umb-workspace-header-name-editable')
+export class UmbWorkspaceHeaderNameEditableElement extends UmbLitElement {
+	@state()
+	private _name = '';
+
+	#workspaceContext?: typeof UMB_NAMABLE_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_NAMABLE_WORKSPACE_CONTEXT, (workspaceContext) => {
+			this.#workspaceContext = workspaceContext;
+			this.#observeName();
+		});
+	}
+
+	#observeName() {
+		if (!this.#workspaceContext) return;
+		this.observe(
+			this.#workspaceContext.name,
+			(name) => {
+				if (name !== this._name) {
+					this._name = name ?? '';
+				}
+			},
+			'observeWorkspaceName',
+		);
+	}
+
+	#onNameInput(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`<uui-input
+			id="nameInput"
+			.value=${this._name}
+			@input="${this.#onNameInput}"
+			required
+			${umbBindToValidation(this, `$.name`, this._name)}
+			${umbFocus()}></uui-input>`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: contents;
+			}
+
+			#nameInput {
+				flex: 1 1 auto;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-workspace-header-name-editable': UmbWorkspaceHeaderNameEditableElement;
+	}
+}

src/packages/core/workspace/namable/index.ts

@@ -0,0 +1,2 @@
+export * from './namable-workspace-context.interface.js';
+export * from './namable-workspace.context-token.js';

src/packages/core/workspace/namable/namable-workspace-context.interface.ts

@@ -0,0 +1,8 @@
+import type { UmbWorkspaceContext } from '../workspace-context.interface.js';
+import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
+
+export interface UmbNamableWorkspaceContext extends UmbWorkspaceContext {
+	name: Observable<string | undefined>;
+	getName(): string | undefined;
+	setName(name: string): void;
+}

src/packages/core/workspace/namable/namable-workspace.context-token.ts

@@ -0,0 +1,9 @@
+import type { UmbWorkspaceContext } from '../workspace-context.interface.js';
+import type { UmbNamableWorkspaceContext } from './namable-workspace-context.interface.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_NAMABLE_WORKSPACE_CONTEXT = new UmbContextToken<UmbWorkspaceContext, UmbNamableWorkspaceContext>(
+	'UmbWorkspaceContext',
+	undefined,
+	(context): context is UmbNamableWorkspaceContext => (context as any).getName !== undefined,
+);

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

@@ -1,69 +1,17 @@
-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 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 { html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { 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)
 export class UmbDataTypeFolderWorkspaceEditorElement extends UmbLitElement {
-	@state()
-	private _name = '';
-
-	#workspaceContext?: typeof UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT.TYPE;
-
-	constructor() {
-		super();
-
-		this.consumeContext(UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT, (workspaceContext) => {
-			this.#workspaceContext = workspaceContext;
-			this.#observeName();
-		});
-	}
-
-	#observeName() {
-		if (!this.#workspaceContext) return;
-		this.observe(this.#workspaceContext.name, (name) => {
-			if (name !== this._name) {
-				this._name = name ?? '';
-			}
-		});
-	}
-
-	#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 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>
+		return html`<umb-workspace-editor>
+			<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
 		</umb-workspace-editor>`;
 	}
 
-	static override styles = [
-		UmbTextStyles,
-		css`
-			#nameInput {
-				flex: 1 1 auto;
-			}
-		`,
-	];
+	static override styles = [UmbTextStyles];
 }
 
 export { UmbDataTypeFolderWorkspaceEditorElement as element };

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

@@ -37,13 +37,22 @@ export class UmbDataTypeFolderWorkspaceContext
 	}
 
 	/**
-	 * @description Set the name of the script
+	 * @description Set the name of the data type folder
 	 * @param {string} value
-	 * @memberof UmbScriptWorkspaceContext
+	 * @memberof UmbDataTypeFolderWorkspaceContext
 	 */
 	public setName(value: string) {
 		this._data.updateCurrent({ name: value });
 	}
+
+	/**
+	 * @description Get the name of the data type folder
+	 * @returns {string}
+	 * @memberof UmbDataTypeFolderWorkspaceContext
+	 */
+	public getName() {
+		return this._data.getCurrent()?.name;
+	}
 }
 
 export { UmbDataTypeFolderWorkspaceContext as api };

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

@@ -1,65 +1,15 @@
-import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from './data-type-workspace.context-token.js';
-import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
-import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
-import type { ManifestWorkspace } from '@umbraco-cms/backoffice/workspace';
-import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 /**
  * @element umb-data-type-workspace-editor
  * @description - Element for displaying the Data Type Workspace edit route.
  */
 @customElement('umb-data-type-workspace-editor')
 export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement {
-	@property({ attribute: false })
-	manifest?: ManifestWorkspace;
-
-	@state()
-	private _dataTypeName = '';
-
-	#workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE;
-
-	constructor() {
-		super();
-
-		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => {
-			this.#workspaceContext = workspaceContext;
-			this.#workspaceContext.createPropertyDatasetContext(this);
-			this.#observeName();
-		});
-	}
-
-	#observeName() {
-		if (!this.#workspaceContext) return;
-		this.observe(this.#workspaceContext.name, (dataTypeName) => {
-			if (dataTypeName !== this._dataTypeName) {
-				this._dataTypeName = dataTypeName ?? '';
-			}
-		});
-	}
-
-	// TODO. find a way where we don't have to do this for all Workspaces.
-	#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 alias="Umb.Workspace.DataType">
-				<uui-input
-					slot="header"
-					id="nameInput"
-					.value=${this._dataTypeName ?? ''}
-					@input="${this.#handleInput}"
-					required
-					${umbBindToValidation(this, `$.name`, this._dataTypeName)}
-					${umbFocus()}></uui-input>
+				<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
 			</umb-workspace-editor>
 		`;
 	}
@@ -71,10 +21,6 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement {
 				width: 100%;
 				height: 100%;
 			}
-
-			#nameInput {
-				flex: 1 1 auto;
-			}
 		`,
 	];
 }

src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts

@@ -1,68 +1,15 @@
-import { UMB_DICTIONARY_WORKSPACE_CONTEXT } from './dictionary-workspace.context-token.js';
-import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
-import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
+import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-dictionary-workspace-editor')
 export class UmbDictionaryWorkspaceEditorElement extends UmbLitElement {
-	@state()
-	private _name?: string | null = '';
-
-	#workspaceContext?: typeof UMB_DICTIONARY_WORKSPACE_CONTEXT.TYPE;
-
-	constructor() {
-		super();
-
-		this.consumeContext(UMB_DICTIONARY_WORKSPACE_CONTEXT, (instance) => {
-			this.#workspaceContext = instance;
-			this.#observeName();
-		});
-	}
-
-	#observeName() {
-		if (!this.#workspaceContext) return;
-		this.observe(this.#workspaceContext.name, (name) => (this._name = name));
-	}
-
-	// TODO. find a way where we don't have to do this for all workspaces.
-	#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 alias="Umb.Workspace.Dictionary" back-path="section/dictionary/dashboard">
-				<div id="header" slot="header">
-					<uui-input
-						placeholder=${this.localize.term('placeholders_entername')}
-						.value=${this._name ?? ''}
-						@input="${this.#handleInput}"
-						label="${this.localize.term('general_dictionary')} ${this.localize.term('general_name')}"
-						${umbFocus()}></uui-input>
-				</div>
+			<umb-workspace-editor back-path="section/dictionary/dashboard">
+				<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
 			</umb-workspace-editor>
 		`;
 	}
-
-	static override styles = [
-		css`
-			#header {
-				display: flex;
-				gap: var(--uui-size-space-4);
-				width: 100%;
-			}
-			uui-input {
-				width: 100%;
-			}
-		`,
-	];
 }
 
 export default UmbDictionaryWorkspaceEditorElement;

src/packages/dictionary/workspace/dictionary-workspace.context.ts

@@ -56,6 +56,10 @@ export class UmbDictionaryWorkspaceContext
 		this._data.updateCurrent({ name });
 	}
 
+	getName() {
+		return this._data.getCurrent()?.name;
+	}
+
 	setPropertyValue(isoCode: string, translation: string) {
 		const currentData = this._data.getCurrent();
 		if (!currentData) return;