use name component on member group workspace

Author: madsrasmussen

src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts

@@ -1,20 +1,11 @@
 import { UMB_MEMBER_GROUP_ROOT_WORKSPACE_PATH } from '../../paths.js';
 import { UMB_MEMBER_GROUP_WORKSPACE_CONTEXT } from './member-group-workspace.context-token.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
-import type { ManifestWorkspace } from '@umbraco-cms/backoffice/workspace';
-import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
-import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-member-group-workspace-editor')
 export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement {
-	@property({ attribute: false })
-	manifest?: ManifestWorkspace;
-
-	@state()
-	private _name = '';
-
 	@state()
 	private _unique?: string;
 
@@ -26,22 +17,10 @@ export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement {
 		this.consumeContext(UMB_MEMBER_GROUP_WORKSPACE_CONTEXT, (workspaceContext) => {
 			this.#workspaceContext = workspaceContext;
 			if (!this.#workspaceContext) return;
-			this.observe(this.#workspaceContext.name, (name) => (this._name = name ?? ''));
 			this.observe(this.#workspaceContext.unique, (unique) => (this._unique = unique ?? undefined));
 		});
 	}
 
-	// TODO. find a way where we don't have to do this for all Workspaces.
-	#onInput(event: UUIInputEvent) {
-		if (event instanceof UUIInputEvent) {
-			const target = event.composedPath()[0] as UUIInputElement;
-
-			if (typeof target?.value === 'string') {
-				this.#workspaceContext?.setName(target.value);
-			}
-		}
-	}
-
 	#renderActions() {
 		// Actions only works if we have a valid unique.
 		if (!this._unique || this.#workspaceContext?.getIsNew()) return nothing;
@@ -52,10 +31,8 @@ export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement {
 	override render() {
 		return html`
 			<umb-workspace-editor alias="Umb.Workspace.MemberGroup" back-path=${UMB_MEMBER_GROUP_ROOT_WORKSPACE_PATH}>
+				<umb-workspace-name slot="header"></umb-workspace-name>
 				${this.#renderActions()}
-				<div id="header" slot="header">
-					<uui-input id="nameInput" .value=${this._name} @input="${this.#onInput}" ${umbFocus()}></uui-input>
-				</div>
 				<umb-workspace-entity-action-menu slot="action-menu"></umb-workspace-entity-action-menu>
 			</umb-workspace-editor>
 		`;
@@ -69,14 +46,6 @@ export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement {
 				width: 100%;
 				height: 100%;
 			}
-			#header {
-				display: flex;
-				align-items: center;
-				width: 100%;
-			}
-			uui-input {
-				width: 100%;
-			}
 		`,
 	];
 }