add label to section manifest

src/Umbraco.Web.UI.Client/schemas/api/api.yml

@@ -481,12 +481,15 @@ components:
     MetaSection:
       type: object
       properties:
+        label:
+          type: string
         pathname:
           type: string
         weight:
           type: number
           format: float
       required:
+        - label
         - pathname
         - weight
     IManifestSection:

src/Umbraco.Web.UI.Client/schemas/generated-schema.ts

@@ -127,6 +127,7 @@ export interface components {
       database?: components["schemas"]["InstallSetupDatabaseConfiguration"];
     };
     MetaSection: {
+      label: string;
       pathname: string;
       /** Format: float */
       weight: number;

src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-sections.element.ts

@@ -120,7 +120,7 @@ export class UmbBackofficeHeaderSections extends UmbContextProviderMixin(UmbCont
 							@click="${this._handleTabClick}"
 							?active="${this._currentSectionAlias === section.alias}"
 							href="${`/section/${section.meta.pathname}`}"
-							label="${section.name}"
+							label="${section.meta.label || section.name}"
 							data-alias="${section.alias}"></uui-tab>
 					`
 				)}
@@ -144,7 +144,7 @@ export class UmbBackofficeHeaderSections extends UmbContextProviderMixin(UmbCont
 								(section) => html`
 									<uui-menu-item
 										?active="${this._currentSectionAlias === section.alias}"
-										label="${section.name}"
+										label="${section.meta.label || section.name}"
 										@click-label="${this._handleLabelClick}"></uui-menu-item>
 								`
 							)}

src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-sidebar.element.ts

@@ -28,7 +28,7 @@ export class UmbSectionSidebar extends UmbContextConsumerMixin(LitElement) {
 	];
 
 	@state()
-	private _sectionName = '';
+	private _sectionLabel = '';
 
 	@state()
 	private _sectionPathname = '';
@@ -49,7 +49,7 @@ export class UmbSectionSidebar extends UmbContextConsumerMixin(LitElement) {
 		this._sectionContextSubscription?.unsubscribe();
 
 		this._sectionContextSubscription = this._sectionContext?.data.subscribe((section) => {
-			this._sectionName = section.name;
+			this._sectionLabel = section.meta.label || section.name;
 			this._sectionPathname = section.meta.pathname;
 		});
 	}
@@ -64,7 +64,7 @@ export class UmbSectionSidebar extends UmbContextConsumerMixin(LitElement) {
 			<umb-tree-context-menu-service>
 				<uui-scroll-container>
 					<a href="${`/section/${this._sectionPathname}`}">
-						<h3>${this._sectionName}</h3>
+						<h3>${this._sectionLabel}</h3>
 					</a>
 
 					<slot></slot>

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

@@ -1,15 +1,15 @@
 import type { ManifestTypes } from './core/models';
 
 // TODO: consider moving weight from meta to the main part of the manifest. We need it for every extension.
-// TODO: consider adding a label property as part of the meta. It might make sense to have an "extension" name label where one is needed.
 export const internalManifests: Array<ManifestTypes & { loader: () => Promise<object | HTMLElement> }> = [
 	{
 		type: 'section',
 		alias: 'Umb.Section.Content',
-		name: 'Content',
+		name: 'Content Section',
 		elementName: 'umb-content-section',
 		loader: () => import('./backoffice/sections/content/content-section.element'),
 		meta: {
+			label: 'Content',
 			pathname: 'content', // TODO: how to we want to support pretty urls?
 			weight: 50,
 		},
@@ -17,10 +17,11 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'section',
 		alias: 'Umb.Section.Media',
-		name: 'Media',
+		name: 'Media Section',
 		elementName: 'umb-media-section',
 		loader: () => import('./backoffice/sections/media/media-section.element'),
 		meta: {
+			label: 'Media',
 			pathname: 'media', // TODO: how to we want to support pretty urls?
 			weight: 50,
 		},
@@ -28,10 +29,11 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'section',
 		alias: 'Umb.Section.Members',
-		name: 'Members',
+		name: 'Members Section',
 		elementName: 'umb-section-members',
 		loader: () => import('./backoffice/sections/members/section-members.element'),
 		meta: {
+			label: 'Members',
 			pathname: 'members',
 			weight: 30,
 		},
@@ -39,9 +41,10 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'section',
 		alias: 'Umb.Section.Settings',
-		name: 'Settings',
+		name: 'Settings Section',
 		loader: () => import('./backoffice/sections/settings/settings-section.element'),
 		meta: {
+			label: 'Settings',
 			pathname: 'settings', // TODO: how to we want to support pretty urls?
 			weight: 20,
 		},
@@ -49,10 +52,11 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'section',
 		alias: 'Umb.Section.Packages',
-		name: 'Packages',
+		name: 'Packages Section',
 		elementName: 'umb-packages-section',
 		loader: () => import('./backoffice/sections/packages/packages-section.element'),
 		meta: {
+			label: 'Packages',
 			pathname: 'packages',
 			weight: 20,
 		},
@@ -60,10 +64,11 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'dashboard',
 		alias: 'Umb.Dashboard.Welcome',
-		name: 'Welcome',
+		name: 'Welcome Dashboard',
 		elementName: 'umb-dashboard-welcome',
 		loader: () => import('./backoffice/dashboards/welcome/dashboard-welcome.element'),
 		meta: {
+			label: 'Welcome',
 			sections: ['Umb.Section.Content'],
 			pathname: 'welcome', // TODO: how to we want to support pretty urls?
 			weight: 20,
@@ -72,10 +77,11 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'dashboard',
 		alias: 'Umb.Dashboard.RedirectManagement',
-		name: 'Redirect Management',
+		name: 'Redirect Management Dashboard',
 		elementName: 'umb-dashboard-redirect-management',
 		loader: () => import('./backoffice/dashboards/redirect-management/dashboard-redirect-management.element'),
 		meta: {
+			label: 'Redirect Management',
 			sections: ['Umb.Section.Content'],
 			pathname: 'redirect-management', // TODO: how to we want to support pretty urls?
 			weight: 10,
@@ -84,7 +90,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'dashboard',
 		alias: 'Umb.Dashboard.SettingsAbout',
-		name: 'Settings About',
+		name: 'About Settings Dashboard',
 		elementName: 'umb-dashboard-settings-about',
 		loader: () => import('./backoffice/dashboards/settings-about/dashboard-settings-about.element'),
 		meta: {
@@ -97,10 +103,11 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'dashboard',
 		alias: 'Umb.Dashboard.ExamineManagement',
-		name: 'Examine Management',
+		name: 'Examine Management Dashboard',
 		elementName: 'umb-dashboard-examine-management',
 		loader: () => import('./backoffice/dashboards/examine-management/dashboard-examine-management.element'),
 		meta: {
+			label: 'Examine Management',
 			sections: ['Umb.Section.Settings'],
 			pathname: 'examine-management', // TODO: how to we want to support pretty urls?
 			weight: 10,
@@ -109,10 +116,11 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'dashboard',
 		alias: 'Umb.Dashboard.ModelsBuilder',
-		name: 'Models Builder',
+		name: 'Models Builder Dashboard',
 		elementName: 'umb-dashboard-models-builder',
 		loader: () => import('./backoffice/dashboards/models-builder/dashboard-models-builder.element'),
 		meta: {
+			label: 'Models Builder',
 			sections: ['Umb.Section.Settings'],
 			pathname: 'models-builder', // TODO: how to we want to support pretty urls?
 			weight: 10,
@@ -121,10 +129,11 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'dashboard',
 		alias: 'Umb.Dashboard.PublishedStatus',
-		name: 'Published Status',
+		name: 'Published Status Dashboard',
 		elementName: 'umb-dashboard-published-status',
 		loader: () => import('./backoffice/dashboards/published-status/dashboard-published-status.element'),
 		meta: {
+			label: 'Published Status',
 			sections: ['Umb.Section.Settings'],
 			pathname: 'published-status', // TODO: how to we want to support pretty urls?
 			weight: 9,
@@ -133,10 +142,11 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'dashboard',
 		alias: 'Umb.Dashboard.MediaManagement',
-		name: 'Media',
+		name: 'Media Dashboard',
 		elementName: 'umb-dashboard-media-management',
 		loader: () => import('./backoffice/dashboards/media-management/dashboard-media-management.element'),
 		meta: {
+			label: 'Media',
 			sections: ['Umb.Section.Media'],
 			pathname: 'media-management', // TODO: how to we want to support pretty urls?
 			weight: 10,
@@ -325,7 +335,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'propertyAction',
 		alias: 'Umb.PropertyAction.Copy',
-		name: 'Copy',
+		name: 'Copy Property Action',
 		elementName: 'umb-property-action-copy',
 		loader: () => import('./backoffice/property-actions/copy/property-action-copy.element'),
 		meta: {
@@ -335,7 +345,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'propertyAction',
 		alias: 'Umb.PropertyAction.Clear',
-		name: 'Clear',
+		name: 'Clear Property Action',
 		elementName: 'umb-property-action-clear',
 		loader: () => import('./backoffice/property-actions/clear/property-action-clear.element'),
 		meta: {

src/Umbraco.Web.UI.Client/temp-schema-generator/manifests.ts

@@ -80,6 +80,7 @@ export interface IManifest {
 }
 
 export interface MetaSection {
+	label: string;
 	pathname: string;
 	weight: number;
 }