add data type info view + update all editor view manifests to include label

src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/info/editor-view-data-type-info.element.ts

@@ -0,0 +1,56 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Subscription, distinctUntilChanged } from 'rxjs';
+
+import { UmbContextConsumerMixin } from '../../../../../core/context';
+import { UmbDataTypeContext } from '../../data-type.context';
+
+import type { DataTypeEntity } from '../../../../../mocks/data/data-type.data';
+
+@customElement('umb-editor-view-data-type-info')
+export class UmbEditorViewDataTypeInfoElement extends UmbContextConsumerMixin(LitElement) {
+	static styles = [UUITextStyles, css``];
+
+	@state()
+	_dataType?: DataTypeEntity;
+
+	private _dataTypeContext?: UmbDataTypeContext;
+	private _dataTypeSubscription?: Subscription;
+
+	constructor() {
+		super();
+
+		this.consumeContext('umbDataTypeContext', (dataTypeContext) => {
+			this._dataTypeContext = dataTypeContext;
+			this._useDataType();
+		});
+	}
+
+	private _useDataType() {
+		this._dataTypeSubscription?.unsubscribe();
+
+		this._dataTypeSubscription = this._dataTypeContext?.data
+			.pipe(distinctUntilChanged())
+			.subscribe((dataType: DataTypeEntity) => {
+				this._dataType = dataType;
+			});
+	}
+
+	disconnectedCallback(): void {
+		super.disconnectedCallback();
+		this._dataTypeSubscription?.unsubscribe();
+	}
+
+	render() {
+		return html`<div>Data type info</div> `;
+	}
+}
+
+export default UmbEditorViewDataTypeInfoElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-editor-view-data-type-info': UmbEditorViewDataTypeInfoElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/info/editor-view-data-type-info.stories.ts

@@ -0,0 +1,25 @@
+import './editor-view-data-type-info.element';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import { data } from '../../../../../mocks/data/data-type.data';
+import { UmbDataTypeContext } from '../../data-type.context';
+
+import type { UmbEditorViewDataTypeInfoElement } from './editor-view-data-type-info.element';
+
+export default {
+	title: 'Editors/Data Type/Views/Info',
+	component: 'umb-editor-view-data-type-info',
+	id: 'umb-editor-view-data-type-info',
+	decorators: [
+		(story) =>
+			html` <umb-context-provider key="umbDataTypeContext" .value=${new UmbDataTypeContext(data[0])}>
+				${story()}
+			</umb-context-provider>`,
+	],
+} as Meta;
+
+export const AAAOverview: Story<UmbEditorViewDataTypeInfoElement> = () =>
+	html` <umb-editor-view-data-type-info></umb-editor-view-data-type-info>`;
+AAAOverview.storyName = 'Overview';

src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts

@@ -155,11 +155,11 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(LitElement) {
 							${this._editorViews.map(
 								(view: ManifestEditorView) => html`
 									<uui-tab
-										.label="${view.name}"
+										.label="${view.meta.label || view.name}"
 										href="${this._routerFolder}/view/${view.meta.pathname}"
 										?active="${this._currentView.includes(view.meta.pathname)}">
 										<uui-icon slot="icon" name="${view.meta.icon}"></uui-icon>
-										${view.name}
+										${view.meta.label || view.name}
 									</uui-tab>
 								`
 							)}

src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts

@@ -163,14 +163,15 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	},
 	{
 		type: 'editorView',
-		alias: 'Umb.EditorView.ContentEdit',
-		name: 'Content',
+		alias: 'Umb.EditorView.Content.Edit',
+		name: 'Content Editor Edit View',
 		elementName: 'umb-editor-view-node-edit',
 		loader: () => import('./backoffice/editors/shared/node/views/edit/editor-view-node-edit.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution
 			editors: ['Umb.Editor.Document', 'Umb.Editor.Media'],
+			label: 'Info',
 			pathname: 'content',
 			weight: 100,
 			icon: 'document',
@@ -178,14 +179,15 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	},
 	{
 		type: 'editorView',
-		alias: 'Umb.EditorView.ContentInfo',
-		name: 'Info',
+		alias: 'Umb.EditorView.Content.Info',
+		name: 'Content Editor Info View',
 		elementName: 'umb-editor-view-node-info',
 		loader: () => import('./backoffice/editors/shared/node/views/info/editor-view-node-info.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution
 			editors: ['Umb.Editor.Document', 'Umb.Editor.Media'],
+			label: 'Info',
 			pathname: 'info',
 			weight: 90,
 			icon: 'info',
@@ -193,14 +195,15 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	},
 	{
 		type: 'editorView',
-		alias: 'Umb.EditorView.DataTypeEdit',
-		name: 'Edit',
+		alias: 'Umb.EditorView.DataType.Edit',
+		name: 'Data Type Editor Edit View',
 		elementName: 'umb-editor-view-data-type-edit',
 		loader: () => import('./backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution
 			editors: ['Umb.Editor.DataType'],
+			label: 'Edit',
 			pathname: 'edit',
 			weight: 90,
 			icon: 'edit',
@@ -208,14 +211,31 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	},
 	{
 		type: 'editorView',
-		alias: 'Umb.EditorView.DocumentTypeDesign',
-		name: 'Design',
+		alias: 'Umb.EditorView.DataType.Info',
+		name: 'Data Type Editor Info View',
+		elementName: 'umb-editor-view-data-type-info',
+		loader: () => import('./backoffice/editors/data-type/views/info/editor-view-data-type-info.element'),
+		meta: {
+			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
+			// this is a temp solution
+			editors: ['Umb.Editor.DataType'],
+			label: 'Info',
+			pathname: 'info',
+			weight: 90,
+			icon: 'info',
+		},
+	},
+	{
+		type: 'editorView',
+		alias: 'Umb.EditorView.DocumentType.Design',
+		name: 'Document Type Editor Design View',
 		elementName: 'umb-editor-view-document-type-design',
 		loader: () => import('./backoffice/editors/document-type/views/editor-view-document-type-design.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution
 			editors: ['Umb.Editor.DocumentType'],
+			label: 'Design',
 			pathname: 'design',
 			weight: 90,
 			icon: 'edit',
@@ -224,11 +244,12 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'editorView',
 		alias: 'Umb.Editor.Packages.Overview',
-		name: 'Packages',
+		name: 'Packages Editor Overview View',
 		elementName: 'umb-packages-overview',
 		loader: () => import('./backoffice/sections/packages/packages-overview.element'),
 		meta: {
 			icon: 'document',
+			label: 'Packages',
 			pathname: 'repo',
 			editors: ['Umb.Editor.Packages'],
 			weight: 10,
@@ -237,11 +258,12 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'editorView',
 		alias: 'Umb.Editor.Packages.Installed',
-		name: 'Installed',
+		name: 'Packages Editor Installed View',
 		elementName: 'umb-packages-installed',
 		loader: () => import('./backoffice/sections/packages/packages-installed.element'),
 		meta: {
 			icon: 'document',
+			label: 'Installed',
 			pathname: 'installed',
 			editors: ['Umb.Editor.Packages'],
 			weight: 0,