strict types for kinds

src/Umbraco.Web.UI.Client/libs/extensions-registry/header-app.models.ts

@@ -2,7 +2,8 @@ import type { ManifestElement } from './models';
 
 export interface ManifestHeaderApp extends ManifestElement {
 	type: 'headerApp';
-	meta: MetaHeaderApp;
+	//meta: MetaHeaderApp;
+	meta?: unknown;
 }
 
 export interface MetaHeaderApp {

src/Umbraco.Web.UI.Client/libs/extensions-registry/models.ts

@@ -1,4 +1,5 @@
 import type { ManifestSectionSidebarAppMenuKind } from '../../src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.element';
+import { ManifestHeaderAppButtonKind } from '../../src/backoffice/shared/components/header-app/header-app-button.element';
 import type { ManifestCollectionView } from './collection-view.models';
 import type { ManifestDashboard } from './dashboard.models';
 import type { ManifestDashboardCollection } from './dashboard-collection.models';
@@ -64,6 +65,7 @@ export type ManifestTypes =
 	| ManifestEntrypoint
 	| ManifestExternalLoginProvider
 	| ManifestHeaderApp
+	| ManifestHeaderAppButtonKind
 	| ManifestHealthCheck
 	| ManifestPackageView
 	| ManifestPropertyAction
@@ -101,6 +103,7 @@ export type SpecificManifestTypeOrManifestBase<T extends keyof ManifestTypeMap |
 export interface ManifestBase {
 	type: string;
 	alias: string;
+	kind?: undefined;
 	name: string;
 	weight?: number;
 }
@@ -137,7 +140,7 @@ export interface ManifestElement extends ManifestWithLoader<object | HTMLElement
 	js?: string;
 	elementName?: string;
 	//loader?: () => Promise<object | HTMLElement>;
-	//meta?: unknown;
+	meta?: unknown;
 }
 
 export interface ManifestElementCustomKind extends ManifestElement {

src/Umbraco.Web.UI.Client/src/backoffice/documents/section.manifests.ts

@@ -1,5 +1,5 @@
-import type { ManifestTypes } from '@umbraco-cms/models';
 import { ManifestSectionSidebarAppMenuKind } from '../shared/components/section/section-sidebar-menu/section-sidebar-menu.element';
+import type { ManifestTypes } from '@umbraco-cms/models';
 
 const sectionAlias = 'Umb.Section.Content';
 
@@ -14,7 +14,7 @@ const section: ManifestTypes = {
 	},
 };
 
-const menuSectionSidebarApp: ManifestTypes = {
+const menuSectionSidebarApp: ManifestSectionSidebarAppMenuKind = {
 	type: 'sectionSidebarApp',
 	kind: 'umb-menu',
 	alias: 'Umb.SidebarMenu.Content',

src/Umbraco.Web.UI.Client/src/backoffice/search/manifests.ts

@@ -1,6 +1,6 @@
-import type { ManifestHeaderApp } from '@umbraco-cms/models';
+import type { ManifestTypes } from '@umbraco-cms/models';
 
-const headerApps: Array<ManifestHeaderApp> = [
+const headerApps: Array<ManifestTypes> = [
 	{
 		type: 'headerApp',
 		alias: 'Umb.HeaderApp.Search',
@@ -13,6 +13,19 @@ const headerApps: Array<ManifestHeaderApp> = [
 			pathname: 'search',
 		},
 	},
+
+	{
+		type: 'headerApp',
+		kind: 'Umb.Kind.Button',
+		alias: 'Umb.HeaderApp.HackDemo',
+		name: 'Header App Search',
+		weight: 10,
+		meta: {
+			label: 'Hack Demo',
+			icon: 'document',
+			href: '/section/content/workspace/document/edit/c05da24d-7740-447b-9cdc-bd8ce2172e38/en-us/view/content/tab/Local%20blog%20tab',
+		},
+	},
 ];
 
 export const manifests = [...headerApps];

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/extension-slot/extension-slot.element.ts

@@ -71,8 +71,10 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 
 						if (isManifestElementableType(extension)) {
 							component = await createExtensionElement(extension);
-						} else {
+						} else if (this.defaultElement) {
 							component = document.createElement(this.defaultElement);
+						} else {
+							// TODO: Lets make an console.error in this case?
 						}
 						if (component) {
 							(component as any).manifest = extension;

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app-button.element.ts

@@ -2,7 +2,32 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { ManifestHeaderApp } from '@umbraco-cms/extensions-registry';
+import { ManifestHeaderApp, ManifestKind } from '@umbraco-cms/extensions-registry';
+import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
+
+export interface ManifestHeaderAppButtonKind extends Omit<ManifestHeaderApp, 'kind'> {
+	type: 'headerApp';
+	kind: 'Umb.Kind.Button';
+	meta: MetaHeaderAppButtonKind;
+}
+
+export interface MetaHeaderAppButtonKind {
+	href: string;
+	label: string;
+	icon: string;
+}
+
+const manifest: ManifestKind = {
+	type: 'kind',
+	matchKind: 'Umb.Kind.Button',
+	matchType: 'headerApp',
+	manifest: {
+		type: 'headerApp',
+		kind: 'Umb.Kind.Button',
+		elementName: 'umb-header-app-button',
+	},
+};
+umbExtensionsRegistry.register(manifest);
 
 @customElement('umb-header-app-button')
 export class UmbHeaderAppButton extends LitElement {
@@ -16,11 +41,15 @@ export class UmbHeaderAppButton extends LitElement {
 		`,
 	];
 
-	public manifest?: ManifestHeaderApp;
+	public manifest?: ManifestHeaderAppButtonKind;
 
 	render() {
 		return html`
-			<uui-button look="primary" label="${ifDefined(this.manifest?.meta.label)}" compact>
+			<uui-button
+				look="primary"
+				label="${ifDefined(this.manifest?.meta.label)}"
+				href="${ifDefined(this.manifest?.meta.href)}"
+				compact>
 				<uui-icon name="${ifDefined(this.manifest?.meta.icon)}"></uui-icon>
 			</uui-button>
 		`;

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app.stories.ts

@@ -3,24 +3,25 @@ import './header-app-button.element';
 import type { UmbHeaderAppButton } from './header-app-button.element';
 
 const meta: Meta<UmbHeaderAppButton> = {
-    title: 'Components/Header App Button',
-    component: 'umb-header-app-button'
+	title: 'Components/Header App Button',
+	component: 'umb-header-app-button',
 };
-  
+
 export default meta;
 type Story = StoryObj<UmbHeaderAppButton>;
-  
+
 export const Overview: Story = {
-    args: {
-        manifest: {
-            name: 'Some Manifest',
-            alias: 'someManifestAlias',
-            type: 'headerApp',
-            meta: {
-                label: 'Some Header',
-                icon: 'umb:home',
-                pathname: '/some/path'
-            }
-        }
-    }
-};
+	args: {
+		manifest: {
+			name: 'Some Manifest',
+			alias: 'someManifestAlias',
+			type: 'headerApp',
+			kind: 'Umb.Kind.Button',
+			meta: {
+				label: 'Some Header',
+				icon: 'umb:home',
+				href: '/some/path',
+			},
+		},
+	},
+};

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts

@@ -37,6 +37,8 @@ import './tree/tree.element';
 import './variantable-property/variantable-property.element';
 import './workspace/workspace-action-menu/workspace-action-menu.element';
 
+import './header-app/header-app-button.element';
+
 import './history/history-list.element';
 import './history/history-item.element';
 

src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/manifests.ts

@@ -1,5 +1,5 @@
 import { manifests as modalManifests } from './modals/manifests';
-import type { ManifestHeaderApp, ManifestUserDashboard } from '@umbraco-cms/models';
+import type { ManifestHeaderApp, ManifestTypes, ManifestUserDashboard } from '@umbraco-cms/models';
 
 export const userDashboards: Array<ManifestUserDashboard> = [
 	{
@@ -15,7 +15,7 @@ export const userDashboards: Array<ManifestUserDashboard> = [
 	},
 ];
 
-export const headerApps: Array<ManifestHeaderApp> = [
+export const headerApps: Array<ManifestTypes> = [
 	{
 		type: 'headerApp',
 		alias: 'Umb.HeaderApp.CurrentUser',

src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts

@@ -495,7 +495,7 @@ export const treeData: Array<DocumentTreeItemResponseModel> = [
 		parentKey: null,
 		name: 'All property editors',
 		type: 'document',
-		icon: 'icon-item-arrangement',
+		icon: 'document',
 		hasChildren: true,
 	},
 	{
@@ -510,7 +510,7 @@ export const treeData: Array<DocumentTreeItemResponseModel> = [
 		parentKey: null,
 		name: 'Article in english',
 		type: 'document',
-		icon: 'icon-item-arrangement',
+		icon: 'document',
 		hasChildren: true,
 	},
 	{
@@ -525,7 +525,7 @@ export const treeData: Array<DocumentTreeItemResponseModel> = [
 		parentKey: 'c05da24d-7740-447b-9cdc-bd8ce2172e38',
 		name: 'Blog post B',
 		type: 'document',
-		icon: 'icon-item-arrangement',
+		icon: 'document',
 		hasChildren: false,
 	},
 	{