inline create variant button

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts

@@ -1,11 +1,12 @@
 import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context-token.js';
 import './block-workspace-view-edit-tab.element.js';
-import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace';
+import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
 
 /**
  * @element umb-block-workspace-view-edit-content-no-router
@@ -25,11 +26,19 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 	@state()
 	private _activeTabId?: string | null | undefined;
 
+	//@state()
+	//private _activeTabName?: string | null | undefined;
+
 	@state()
-	private _activeTabName?: string | null | undefined;
+	private _ownerContentTypeName?: string;
+
+	@state()
+	private _variantName?: string;
+
+	@state()
+	private _exposed?: boolean;
 
 	#blockWorkspace?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
-
 	#tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
 
 	constructor() {
@@ -44,12 +53,45 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 
 		// _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
 
-		this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
-			this.#blockWorkspace = workspaceContext;
-			this.#tabsStructureHelper.setStructureManager(workspaceContext.content.structure);
+		this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
+			this.#blockWorkspace = context;
+			this.#tabsStructureHelper.setStructureManager(context.content.structure);
 
-			workspaceContext.content.setup(this);
+			context.content.setup(this);
 			this.#observeRootGroups();
+
+			this.observe(
+				context.content.structure.ownerContentTypeName,
+				(name) => {
+					this._ownerContentTypeName = name;
+				},
+				'observeContentTypeName',
+			);
+
+			this.observe(
+				context.variantId,
+				async (variantId) => {
+					if (variantId) {
+						// TODO: Support segment name?
+						const culture = variantId.culture;
+						if (culture) {
+							const languageRepository = new UmbLanguageItemRepository(this);
+							const { data } = await languageRepository.requestItems([culture]);
+							const name = data?.[0].name;
+							this._variantName = name ? this.localize.string(name) : undefined;
+						}
+					}
+				},
+				'observeVariant',
+			);
+
+			this.observe(
+				context.exposed,
+				(exposed) => {
+					this._exposed = exposed;
+				},
+				'observeExposed',
+			);
 		});
 	}
 
@@ -72,21 +114,33 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 		// Find the default tab to grab:
 		if (this._activeTabId === undefined) {
 			if (this._hasRootGroups) {
-				this._activeTabName = null;
+				//this._activeTabName = null;
 				this._activeTabId = null;
 			} else if (this._tabs.length > 0) {
-				this._activeTabName = this._tabs[0].name;
+				//this._activeTabName = this._tabs[0].name;
 				this._activeTabId = this._tabs[0].id;
 			}
 		}
 	}
 
 	#setTabName(tabName: string | undefined | null, tabId: string | null | undefined) {
-		this._activeTabName = tabName;
+		//this._activeTabName = tabName;
 		this._activeTabId = tabId;
 	}
 
+	#expose = () => {
+		this.#blockWorkspace?.expose();
+	};
+
 	override render() {
+		if (this._exposed === false) {
+			return html`<uui-button style="position:absolute; inset:0;" @click=${this.#expose}
+				><uui-icon name="icon-add"></uui-icon>
+				<umb-localize
+					key="blockEditor_createThisFor"
+					.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize
+			></uui-button>`;
+		}
 		if (!this._tabs) return;
 		return html`
 			${this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups)
@@ -100,7 +154,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 										>Content</uui-tab
 									>
 								`
-							: ''}
+							: nothing}
 						${repeat(
 							this._tabs,
 							(tab) => tab.name,
@@ -114,14 +168,14 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 							},
 						)}
 					</uui-tab-group>`
-				: ''}
+				: nothing}
 			${this._activeTabId !== undefined
 				? html`<umb-block-workspace-view-edit-tab
 						.managerName=${'content'}
 						.hideSingleGroup=${true}
 						.containerId=${this._activeTabId}>
 					</umb-block-workspace-view-edit-tab>`
-				: ''}
+				: nothing}
 		`;
 	}
 
@@ -129,6 +183,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 		UmbTextStyles,
 		css`
 			:host {
+				position: relative;
 				display: block;
 				height: 100%;
 				--uui-tab-background: var(--uui-color-surface);