From 5423c7d532e7a300c319955ee31f936e6fba28a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 21:53:34 +0100 Subject: [PATCH 01/23] header app models --- .../extensions-api/registry/extension.registry.ts | 6 +++--- .../core/extensions-registry/header-app.models.ts | 12 ++++++++++++ .../src/core/extensions-registry/models.ts | 3 +++ 3 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/core/extensions-registry/header-app.models.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts index 8da2169429..9a344817ef 100644 --- a/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts @@ -1,4 +1,5 @@ import { BehaviorSubject, map, Observable } from 'rxjs'; +import { ManifestHeaderApp } from 'src/core/extensions-registry/header-app.models'; import type { ManifestTypes, ManifestDashboard, @@ -53,6 +54,7 @@ export class UmbExtensionRegistry { // TODO: implement unregister of extension // Typings concept, need to put all core types to get a good array return type for the provided type... + extensionsOfType(type: 'headerApp'): Observable>; extensionsOfType(type: 'section'): Observable>; extensionsOfType(type: 'sectionView'): Observable>; extensionsOfType(type: 'tree'): Observable>; @@ -73,9 +75,7 @@ export class UmbExtensionRegistry { map((exts) => exts .filter((ext) => ext.type === type) - .sort((a, b) => { - return (b.weight || 0) - (a.weight || 0); - }) + .sort((a, b) => (b.weight || 0) - (a.weight || 0)) ) ); } diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/header-app.models.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/header-app.models.ts new file mode 100644 index 0000000000..4a6f1d59d5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/header-app.models.ts @@ -0,0 +1,12 @@ +import type { ManifestElement } from './models'; + +export interface ManifestHeaderApp extends ManifestElement { + type: 'headerApp'; + meta: MetaHeaderApp; +} + +export interface MetaHeaderApp { + pathname: string; + label: string; + icon: string; +} diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts index f2193cc413..d28b45460e 100644 --- a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts @@ -9,6 +9,7 @@ import type { ManifestPropertyEditorUI, ManifestPropertyEditorModel } from './pr import type { ManifestDashboard } from './dashboard.models'; import type { ManifestPropertyAction } from './property-action.models'; import type { ManifestPackageView } from './package-view.models'; +import { ManifestHeaderApp } from './header-app.models'; export * from './section.models'; export * from './section-view.models'; @@ -23,6 +24,7 @@ export * from './property-action.models'; export * from './package-view.models'; export type ManifestTypes = + | ManifestHeaderApp | ManifestSection | ManifestSectionView | ManifestTree @@ -39,6 +41,7 @@ export type ManifestTypes = | ManifestCustom; export type ManifestStandardTypes = + | 'headerApp' | 'section' | 'sectionView' | 'tree' From 83bd35f20eff75713f378997510065344aca3646 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 21:53:56 +0100 Subject: [PATCH 02/23] notify developer for missing element or default export --- .../core/extensions-api/create-extension-element.function.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-api/create-extension-element.function.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-api/create-extension-element.function.ts index 45fa15593a..e731e60142 100644 --- a/src/Umbraco.Web.UI.Client/src/core/extensions-api/create-extension-element.function.ts +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-api/create-extension-element.function.ts @@ -19,6 +19,10 @@ export async function createExtensionElement(manifest: ManifestTypes): Promise Date: Tue, 13 Dec 2022 21:54:29 +0100 Subject: [PATCH 03/23] extension slot, improved version --- .../src/backoffice/backoffice.element.ts | 1 + .../extension-slot/extension-slot.element.ts | 89 +++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts index 81482506f9..bbbd3b3575 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts @@ -8,6 +8,7 @@ import './components/backoffice-notification-container.element'; import './components/node-property/node-property.element'; import './components/table/table.element'; import './components/shared/code-block.element'; +import './components/extension-slot/extension-slot.element'; import './sections/shared/section-main/section-main.element'; import './sections/shared/section-sidebar/section-sidebar.element'; import './sections/shared/section.element'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts new file mode 100644 index 0000000000..e4e3b716ec --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts @@ -0,0 +1,89 @@ +import { html, LitElement } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; +import { map } from 'rxjs'; +import { repeat } from 'lit/directives/repeat.js'; +import { ManifestTypes, umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; +import { UmbObserverMixin } from '@umbraco-cms/observable-api'; +import { createExtensionElement } from '@umbraco-cms/extensions-api'; + +/** + * @element umb-extension-slot + * @description + * @slot default - slot for inserting additional things into this slot. + * @export + * @class UmbExtensionSlot + * @extends {UmbObserverMixin(LitElement)} + */ +@customElement('umb-extension-slot') +export class UmbExtensionSlotElement extends UmbObserverMixin(LitElement) { + + @state() + private _extensions:{alias: string, weight: number, component: HTMLElement|null}[] = []; + + @property({ type: String }) + public type= ""; + + @property({ type: Object, attribute: false }) + public filter: (manifest:ManifestTypes) => boolean = () => true; + + constructor() { + super(); + + /* + this.extensionManager = new ExtensionManager(this, (x) => {x.meta.entityType === this.entityType}, (extensionManifests) => { + this._createElement(extensionManifests[0]); + }); + */ + } + + connectedCallback(): void { + super.connectedCallback(); + this._observeExtensions(); + } + + private _observeExtensions() { + this.observe( + umbExtensionsRegistry + ?.extensionsOfType(this.type) + .pipe(map((extensions) => extensions.filter(this.filter))), + async (extensions: ManifestTypes[]) => { + + // TODO: Lets remove extensions that is not valid anymore? + + extensions.forEach(async (extension: ManifestTypes) => { + + const hasExt = this._extensions.find(x => x.alias === extension.alias); + if(!hasExt) { + const extensionObject = {alias: extension.alias, weight: (extension as any).weight || 0, component: null}; + this._extensions.push(extensionObject); + const component = await createExtensionElement(extension); + if(component) { + // TODO: Consider if this is the best way to parse meta data to the component it self? + if((extension as any)?.meta) { + (component as any).extensionMeta = (extension as any).meta; + } + extensionObject.component = component; + + // sort: + // TODO: Make sure its right to have highest last? + this._extensions.sort((a, b) => a.weight - b.weight); + } + } + this.requestUpdate('_extensions'); + }); + + } + ); + } + + render() { + // TODO: check if we can use repeat directly. + return repeat(this._extensions, (ext) => ext.alias, (ext, index) => ext.component); + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-extension-slot': UmbExtensionSlotElement; + } +} \ No newline at end of file From 41ce20ac0a347e5ac2f2011c9b2054aa7032b4b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 21:55:00 +0100 Subject: [PATCH 04/23] move header-apps into folder --- .../src/backoffice/backoffice.element.ts | 2 +- .../components/{ => header}/backoffice-header.element.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/Umbraco.Web.UI.Client/src/backoffice/components/{ => header}/backoffice-header.element.ts (92%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts index bbbd3b3575..e35981a026 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts @@ -1,7 +1,7 @@ //TODO: we need to figure out what components should be available for extensions and load them upfront import './editors/shared/editor-entity-layout/editor-entity-layout.element'; import './components/ref-property-editor-ui/ref-property-editor-ui.element'; -import './components/backoffice-header.element'; +import './components/header/backoffice-header.element'; import './components/backoffice-main.element'; import './components/backoffice-modal-container.element'; import './components/backoffice-notification-container.element'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header.element.ts similarity index 92% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header.element.ts index 5b038fa184..f27e0a9d5d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header.element.ts @@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; import './backoffice-header-sections.element'; -import './backoffice-header-tools.element'; +import './backoffice-header-apps.element'; @customElement('umb-backoffice-header') export class UmbBackofficeHeader extends LitElement { @@ -47,7 +47,7 @@ export class UmbBackofficeHeader extends LitElement { - + `; } From e4df5dc05f39c206eff9e0857c59dc5b1eea6f47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 21:55:21 +0100 Subject: [PATCH 05/23] header apps --- .../backoffice-header-tools.element.ts | 43 ---------- .../backoffice-header-app-button.element.ts | 33 ++++++++ .../backoffice-header-app-user.element.ts | 33 ++++++++ .../header/backoffice-header-apps.element.ts | 82 +++++++++++++++++++ .../backoffice-header-sections.element.ts | 0 5 files changed, 148 insertions(+), 43 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-tools.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-button.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-user.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts rename src/Umbraco.Web.UI.Client/src/backoffice/components/{ => header}/backoffice-header-sections.element.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-tools.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-tools.element.ts deleted file mode 100644 index 0958b10c39..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-tools.element.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { css, CSSResultGroup, html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; - -@customElement('umb-backoffice-header-tools') -export class UmbBackofficeHeaderTools extends LitElement { - static styles: CSSResultGroup = [ - UUITextStyles, - css` - #tools { - display: flex; - align-items: center; - gap: var(--uui-size-space-2); - } - - .tool { - font-size: 18px; - } - `, - ]; - - render() { - return html` -
- - - - - - - - - -
- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-backoffice-header-tools': UmbBackofficeHeaderTools; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-button.element.ts new file mode 100644 index 0000000000..57e067e584 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-button.element.ts @@ -0,0 +1,33 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { css, CSSResultGroup, html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +@customElement('umb-backoffice-header-app-button') +export class UmbBackofficeHeaderAppButton extends LitElement { + static styles: CSSResultGroup = [ + UUITextStyles, + css` + uui-button { + font-size: 18px; + } + `, + ]; + + public extensionMeta: any = {}; + + render() { + return html` + + + + `; + } +} + +export default UmbBackofficeHeaderAppButton; + +declare global { + interface HTMLElementTagNameMap { + 'umb-backoffice-header-app-button': UmbBackofficeHeaderAppButton; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-user.element.ts new file mode 100644 index 0000000000..2e2a5766d4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-user.element.ts @@ -0,0 +1,33 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { css, CSSResultGroup, html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +@customElement('umb-backoffice-header-app-user') +export class UmbBackofficeHeaderAppUser extends LitElement { + static styles: CSSResultGroup = [ + UUITextStyles, + css` + uui-button { + font-size: 14px; + } + `, + ]; + + // TODO: Get current user information. + + render() { + return html` + + + + `; + } +} + +export default UmbBackofficeHeaderAppUser; + +declare global { + interface HTMLElementTagNameMap { + 'umb-backoffice-header-app-user': UmbBackofficeHeaderAppUser; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts new file mode 100644 index 0000000000..3264ec3bb7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts @@ -0,0 +1,82 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { css, CSSResultGroup, html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { ManifestWithLoader, umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; +import { ManifestHeaderApp } from 'src/core/extensions-registry/header-app.models'; + +@customElement('umb-backoffice-header-apps') +export class UmbBackofficeHeaderTools extends LitElement { + + static styles: CSSResultGroup = [ + UUITextStyles, + css` + #apps { + display: flex; + align-items: center; + gap: var(--uui-size-space-2); + } + `, + ]; + + constructor() { + super(); + this._registerEditorApps(); + } + + private _registerEditorApps() { + const headerApps: Array> = [ + { + type: 'headerApp', + alias: 'Umb.HeaderApp.Search', + name: 'Header App Search', + loader: () => import('./backoffice-header-app-button.element'), + weight: 99, + meta: { + label: 'Search', + icon: 'search', + pathname: 'search', + }, + }, + { + type: 'headerApp', + alias: 'Umb.HeaderApp.Favorites', + name: 'Header App Favorites', + loader: () => import('./backoffice-header-app-button.element'), + weight: 100, + meta: { + label: 'Favorites', + icon: 'favorite', + pathname: 'favorites', + }, + }, + { + type: 'headerApp', + alias: 'Umb.HeaderApp.CurrentUser', + name: 'Current User', + loader: () => import('./backoffice-header-app-user.element'), + weight: 1000, + meta: { + pathname: 'user', + }, + }, + ]; + + // TODO: Can we make this functionality reuseable... + headerApps.forEach((headerApp) => { + if (umbExtensionsRegistry.isRegistered(headerApp.alias)) return; + umbExtensionsRegistry.register(headerApp); + }); + } + + render() { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-backoffice-header-apps': UmbBackofficeHeaderTools; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-sections.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-sections.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-sections.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-sections.element.ts From 244b99b789ec62c7fa285d444f912fa3cf2696cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 22:10:51 +0100 Subject: [PATCH 06/23] unregistre extension method --- .../extensions-api/registry/extension.registry.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts index 9a344817ef..661b92914a 100644 --- a/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts @@ -40,6 +40,19 @@ export class UmbExtensionRegistry { } } + unregister(alias:string): void { + const oldExtensionsValues = this._extensions.getValue(); + const newExtensionsValues = oldExtensionsValues.filter((extension) => extension.alias !== alias); + + // TODO: Maybe its not needed to fire an console.error. as you might want to call this method without needing to check the existence first. + if (oldExtensionsValues.length === newExtensionsValues.length) { + console.error(`Unable to unregister extension with alias ${alias}`); + return; + } + + this._extensions.next(newExtensionsValues); + } + isRegistered(alias: string): boolean { const values = this._extensions.getValue(); return values.some((ext) => ext.alias === alias); From db51b8e819dfaf933a6082a24bdb45c694ec1739 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 22:11:43 +0100 Subject: [PATCH 07/23] ability to unload extension --- .../backoffice/editors/extensions/editor-extensions.element.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts index 3df16a8c15..969f3afb65 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts @@ -32,6 +32,7 @@ export class UmbEditorExtensionsElement extends UmbContextConsumerMixin(UmbObser Type Name Alias + Actions ${this._extensions.map( @@ -42,6 +43,7 @@ export class UmbEditorExtensionsElement extends UmbContextConsumerMixin(UmbObser ${isManifestElementType(extension) ? extension.name : 'Custom extension'} ${extension.alias} + umbExtensionsRegistry.unregister(extension.alias)}> ` )} From 101bf36ad634bb1b2eaace6d92bab4b387462a92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 22:11:52 +0100 Subject: [PATCH 08/23] changed weight --- .../components/header/backoffice-header-apps.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts index 3264ec3bb7..882a7413a0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts @@ -30,7 +30,7 @@ export class UmbBackofficeHeaderTools extends LitElement { alias: 'Umb.HeaderApp.Search', name: 'Header App Search', loader: () => import('./backoffice-header-app-button.element'), - weight: 99, + weight: 10, meta: { label: 'Search', icon: 'search', From e65de72eb774b29b662d6d297758fb33577df6c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 22:16:25 +0100 Subject: [PATCH 09/23] clean up in extension-slot --- .../extension-slot/extension-slot.element.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts index e4e3b716ec..c4ae35b814 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts @@ -48,7 +48,11 @@ export class UmbExtensionSlotElement extends UmbObserverMixin(LitElement) { .pipe(map((extensions) => extensions.filter(this.filter))), async (extensions: ManifestTypes[]) => { - // TODO: Lets remove extensions that is not valid anymore? + const oldLength = this._extensions.length; + this._extensions = this._extensions.filter(current => extensions.find(incoming => incoming.alias === current.alias)); + if(this._extensions.length !== oldLength) { + this.requestUpdate('_extensions'); + } extensions.forEach(async (extension: ManifestTypes) => { @@ -67,9 +71,13 @@ export class UmbExtensionSlotElement extends UmbObserverMixin(LitElement) { // sort: // TODO: Make sure its right to have highest last? this._extensions.sort((a, b) => a.weight - b.weight); + } else { + // Remove cause we could not get the component, so we will get rid of this. + //this._extensions.splice(this._extensions.indexOf(extensionObject), 1); + // Actually not, because if, then the same extension would come around again in next update. } + this.requestUpdate('_extensions'); } - this.requestUpdate('_extensions'); }); } From d3fd4b45150eb184feb1bc1c05eff70a3f6c6f28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 22:17:48 +0100 Subject: [PATCH 10/23] fallback to nothing, to ensure no rendering. --- .../components/extension-slot/extension-slot.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts index c4ae35b814..a29dab651f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts @@ -1,4 +1,4 @@ -import { html, LitElement } from 'lit'; +import { html, LitElement, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { map } from 'rxjs'; import { repeat } from 'lit/directives/repeat.js'; @@ -86,7 +86,7 @@ export class UmbExtensionSlotElement extends UmbObserverMixin(LitElement) { render() { // TODO: check if we can use repeat directly. - return repeat(this._extensions, (ext) => ext.alias, (ext, index) => ext.component); + return repeat(this._extensions, (ext) => ext.alias, (ext, index) => ext.component || nothing); } } From 79b6f5d43953fdede13efb12693dad6691395c62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 22:20:33 +0100 Subject: [PATCH 11/23] fix wrong path --- .../components/header/backoffice-header-sections.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-sections.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-sections.element.ts index 18ed08afdf..91b5786c88 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-sections.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-sections.element.ts @@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { when } from 'lit/directives/when.js'; -import { UmbSectionStore } from '../../core/stores/section.store'; +import { UmbSectionStore } from '../../../core/stores/section.store'; import { UmbObserverMixin } from '@umbraco-cms/observable-api'; import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api'; import type { ManifestSection } from '@umbraco-cms/models'; From 37d94ff54a5902fa85dec01b254d48eb49a14c7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 22:21:36 +0100 Subject: [PATCH 12/23] sort imports --- .../src/core/extensions-api/registry/extension.registry.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts index 661b92914a..6acb802f75 100644 --- a/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts @@ -1,5 +1,4 @@ import { BehaviorSubject, map, Observable } from 'rxjs'; -import { ManifestHeaderApp } from 'src/core/extensions-registry/header-app.models'; import type { ManifestTypes, ManifestDashboard, @@ -18,6 +17,7 @@ import type { ManifestPackageView, } from '../../models'; import { createExtensionElement } from '../create-extension-element.function'; +import { ManifestHeaderApp } from 'src/core/extensions-registry/header-app.models'; export class UmbExtensionRegistry { private _extensions = new BehaviorSubject>([]); From 8f72113d1789ccff09b815c83751393b0ee23349 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 08:38:00 +0100 Subject: [PATCH 13/23] InitializedExtensionItem type --- .../components/extension-slot/extension-slot.element.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts index a29dab651f..370b776476 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts @@ -6,6 +6,8 @@ import { ManifestTypes, umbExtensionsRegistry } from '@umbraco-cms/extensions-re import { UmbObserverMixin } from '@umbraco-cms/observable-api'; import { createExtensionElement } from '@umbraco-cms/extensions-api'; +type InitializedExtensionItem = {alias: string, weight: number, component: HTMLElement|null} + /** * @element umb-extension-slot * @description @@ -18,7 +20,7 @@ import { createExtensionElement } from '@umbraco-cms/extensions-api'; export class UmbExtensionSlotElement extends UmbObserverMixin(LitElement) { @state() - private _extensions:{alias: string, weight: number, component: HTMLElement|null}[] = []; + private _extensions:InitializedExtensionItem[] = []; @property({ type: String }) public type= ""; @@ -58,7 +60,7 @@ export class UmbExtensionSlotElement extends UmbObserverMixin(LitElement) { const hasExt = this._extensions.find(x => x.alias === extension.alias); if(!hasExt) { - const extensionObject = {alias: extension.alias, weight: (extension as any).weight || 0, component: null}; + const extensionObject:InitializedExtensionItem = {alias: extension.alias, weight: (extension as any).weight || 0, component: null}; this._extensions.push(extensionObject); const component = await createExtensionElement(extension); if(component) { From dd03c825423dacb02b5c9a1ff92d18b958e10c1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 08:38:10 +0100 Subject: [PATCH 14/23] use favorite icon --- .../components/header/backoffice-header-apps.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts index 882a7413a0..67e8dbbfe6 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts @@ -45,7 +45,7 @@ export class UmbBackofficeHeaderTools extends LitElement { weight: 100, meta: { label: 'Favorites', - icon: 'favorite', + icon: null, pathname: 'favorites', }, }, From 680521346d64ae2a5d05fb7372f12d8782d78ffd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 08:40:09 +0100 Subject: [PATCH 15/23] header apps data --- .../components/header/backoffice-header-apps.element.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts index 67e8dbbfe6..fa36209b9f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts @@ -45,7 +45,7 @@ export class UmbBackofficeHeaderTools extends LitElement { weight: 100, meta: { label: 'Favorites', - icon: null, + icon: 'favorite', pathname: 'favorites', }, }, @@ -56,6 +56,8 @@ export class UmbBackofficeHeaderTools extends LitElement { loader: () => import('./backoffice-header-app-user.element'), weight: 1000, meta: { + label: 'TODO: how should we enable this to not be set.', + icon: 'TODO: how should we enable this to not be set.', pathname: 'user', }, }, From ca8b6e5a532b0c8a6d00d60b1eed8f4711898642 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 09:50:42 +0100 Subject: [PATCH 16/23] extension slot sets manifest + move header aps to dedicated folder. --- .../src/backoffice/backoffice.element.ts | 8 ++--- .../backoffice-header-apps.element.ts | 10 +++--- .../backoffice-header-sections.element.ts | 0 .../backoffice-header.element.ts | 0 .../backoffice-main.element.ts | 4 +-- .../backoffice-modal-container.element.ts | 0 ...ckoffice-notification-container.element.ts | 0 .../extension-slot/extension-slot.element.ts | 6 ++-- .../backoffice-header-app-button.element.ts | 33 ----------------- .../header-apps/header-app-button.element.ts | 35 +++++++++++++++++++ .../header-app-current-user.element.ts} | 6 ++-- .../use-extension-data.mixin.ts | 13 +++++++ .../src/core/extensions-registry/models.ts | 3 +- 13 files changed, 66 insertions(+), 52 deletions(-) rename src/Umbraco.Web.UI.Client/src/backoffice/components/{header => backoffice-frame}/backoffice-header-apps.element.ts (84%) rename src/Umbraco.Web.UI.Client/src/backoffice/components/{header => backoffice-frame}/backoffice-header-sections.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/components/{header => backoffice-frame}/backoffice-header.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/components/{ => backoffice-frame}/backoffice-main.element.ts (95%) rename src/Umbraco.Web.UI.Client/src/backoffice/components/{ => backoffice-frame}/backoffice-modal-container.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/components/{ => backoffice-frame}/backoffice-notification-container.element.ts (100%) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-button.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts rename src/Umbraco.Web.UI.Client/src/backoffice/{components/header/backoffice-header-app-user.element.ts => header-apps/header-app-current-user.element.ts} (78%) create mode 100644 src/Umbraco.Web.UI.Client/src/core/extensions-api/use-extension-data.mixin.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts index e35981a026..e9d11875c6 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts @@ -1,10 +1,10 @@ //TODO: we need to figure out what components should be available for extensions and load them upfront import './editors/shared/editor-entity-layout/editor-entity-layout.element'; import './components/ref-property-editor-ui/ref-property-editor-ui.element'; -import './components/header/backoffice-header.element'; -import './components/backoffice-main.element'; -import './components/backoffice-modal-container.element'; -import './components/backoffice-notification-container.element'; +import './components/backoffice-frame/backoffice-header.element'; +import './components/backoffice-frame/backoffice-main.element'; +import './components/backoffice-frame/backoffice-modal-container.element'; +import './components/backoffice-frame/backoffice-notification-container.element'; import './components/node-property/node-property.element'; import './components/table/table.element'; import './components/shared/code-block.element'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-apps.element.ts similarity index 84% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-apps.element.ts index fa36209b9f..915175f22e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-apps.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-apps.element.ts @@ -5,7 +5,7 @@ import { ManifestWithLoader, umbExtensionsRegistry } from '@umbraco-cms/extensio import { ManifestHeaderApp } from 'src/core/extensions-registry/header-app.models'; @customElement('umb-backoffice-header-apps') -export class UmbBackofficeHeaderTools extends LitElement { +export class UmbBackofficeHeaderApps extends LitElement { static styles: CSSResultGroup = [ UUITextStyles, @@ -29,7 +29,7 @@ export class UmbBackofficeHeaderTools extends LitElement { type: 'headerApp', alias: 'Umb.HeaderApp.Search', name: 'Header App Search', - loader: () => import('./backoffice-header-app-button.element'), + loader: () => import('../../header-apps/header-app-button.element'), weight: 10, meta: { label: 'Search', @@ -41,7 +41,7 @@ export class UmbBackofficeHeaderTools extends LitElement { type: 'headerApp', alias: 'Umb.HeaderApp.Favorites', name: 'Header App Favorites', - loader: () => import('./backoffice-header-app-button.element'), + loader: () => import('../../header-apps/header-app-button.element'), weight: 100, meta: { label: 'Favorites', @@ -53,7 +53,7 @@ export class UmbBackofficeHeaderTools extends LitElement { type: 'headerApp', alias: 'Umb.HeaderApp.CurrentUser', name: 'Current User', - loader: () => import('./backoffice-header-app-user.element'), + loader: () => import('../../header-apps/header-app-current-user.element'), weight: 1000, meta: { label: 'TODO: how should we enable this to not be set.', @@ -79,6 +79,6 @@ export class UmbBackofficeHeaderTools extends LitElement { declare global { interface HTMLElementTagNameMap { - 'umb-backoffice-header-apps': UmbBackofficeHeaderTools; + 'umb-backoffice-header-apps': UmbBackofficeHeaderApps; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-sections.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-sections.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-sections.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-sections.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-main.element.ts similarity index 95% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-main.element.ts index cea506db07..5a32affee2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-main.element.ts @@ -3,8 +3,8 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement } from 'lit'; import { state } from 'lit/decorators.js'; import { IRoutingInfo } from 'router-slot'; -import { UmbSectionStore } from '../../core/stores/section.store'; -import { UmbSectionContext } from '../sections/section.context'; +import { UmbSectionStore } from '../../../core/stores/section.store'; +import { UmbSectionContext } from '../../sections/section.context'; import { UmbObserverMixin } from '@umbraco-cms/observable-api'; import { createExtensionElement } from '@umbraco-cms/extensions-api'; import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-modal-container.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-modal-container.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-modal-container.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-notification-container.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-notification-container.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts index 370b776476..6832cc4233 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts @@ -64,10 +64,8 @@ export class UmbExtensionSlotElement extends UmbObserverMixin(LitElement) { this._extensions.push(extensionObject); const component = await createExtensionElement(extension); if(component) { - // TODO: Consider if this is the best way to parse meta data to the component it self? - if((extension as any)?.meta) { - (component as any).extensionMeta = (extension as any).meta; - } + + (component as any).manifest = extension; extensionObject.component = component; // sort: diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-button.element.ts deleted file mode 100644 index 57e067e584..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-button.element.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { css, CSSResultGroup, html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; - -@customElement('umb-backoffice-header-app-button') -export class UmbBackofficeHeaderAppButton extends LitElement { - static styles: CSSResultGroup = [ - UUITextStyles, - css` - uui-button { - font-size: 18px; - } - `, - ]; - - public extensionMeta: any = {}; - - render() { - return html` - - - - `; - } -} - -export default UmbBackofficeHeaderAppButton; - -declare global { - interface HTMLElementTagNameMap { - 'umb-backoffice-header-app-button': UmbBackofficeHeaderAppButton; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts new file mode 100644 index 0000000000..96d0e8b555 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts @@ -0,0 +1,35 @@ +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'; + +@customElement('umb-backoffice-header-app-button') +export class UmbHeaderAppButton extends LitElement { + static styles: CSSResultGroup = [ + UUITextStyles, + css` + uui-button { + font-size: 18px; + } + `, + ]; + + public manifest?: ManifestHeaderApp; + + render() { + return html` + + + + `; + } +} + +export default UmbHeaderAppButton; + +declare global { + interface HTMLElementTagNameMap { + 'umb-backoffice-header-app-button': UmbHeaderAppButton; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-current-user.element.ts similarity index 78% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-user.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-current-user.element.ts index 2e2a5766d4..108751d310 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/header/backoffice-header-app-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-current-user.element.ts @@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; @customElement('umb-backoffice-header-app-user') -export class UmbBackofficeHeaderAppUser extends LitElement { +export class UmbHeaderAppCurrentUser extends LitElement { static styles: CSSResultGroup = [ UUITextStyles, css` @@ -24,10 +24,10 @@ export class UmbBackofficeHeaderAppUser extends LitElement { } } -export default UmbBackofficeHeaderAppUser; +export default UmbHeaderAppCurrentUser; declare global { interface HTMLElementTagNameMap { - 'umb-backoffice-header-app-user': UmbBackofficeHeaderAppUser; + 'umb-header-app-current-user': UmbHeaderAppCurrentUser; } } diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-api/use-extension-data.mixin.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-api/use-extension-data.mixin.ts new file mode 100644 index 0000000000..5a74c7f4c3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-api/use-extension-data.mixin.ts @@ -0,0 +1,13 @@ +import type { HTMLElementConstructor } from '../models'; + +export declare class UmbUseExtensionDataMixinInterface { + extensionMeta: object; +} + +export const UmbUseExtensionDataMixin = (superClass: T) => { + class UmbUseExtensionDataClass extends superClass { + extensionMeta: object = {}; + } + + return UmbUseExtensionDataClass as unknown as HTMLElementConstructor & T; +}; diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts index d28b45460e..1131b31ab3 100644 --- a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts @@ -9,8 +9,9 @@ import type { ManifestPropertyEditorUI, ManifestPropertyEditorModel } from './pr import type { ManifestDashboard } from './dashboard.models'; import type { ManifestPropertyAction } from './property-action.models'; import type { ManifestPackageView } from './package-view.models'; -import { ManifestHeaderApp } from './header-app.models'; +import type { ManifestHeaderApp } from './header-app.models'; +export * from './header-app.models'; export * from './section.models'; export * from './section-view.models'; export * from './tree.models'; From c11d80ece2c7d758a6d09d8a992f79d459479b15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 09:58:32 +0100 Subject: [PATCH 17/23] fix imports --- .../backoffice-frame/backoffice-modal-container.element.ts | 2 +- .../backoffice-notification-container.element.ts | 3 ++- .../src/core/services/notification/notification.stories.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-modal-container.element.ts index 0df2a7707b..f9a1141965 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-modal-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-modal-container.element.ts @@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; -import { UmbModalHandler, UmbModalService } from '../../core/services/modal'; +import { UmbModalHandler, UmbModalService } from '@umbraco-cms/services'; import { UmbObserverMixin } from '@umbraco-cms/observable-api'; import { UmbContextConsumerMixin } from '@umbraco-cms/context-api'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-notification-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-notification-container.element.ts index ee93f2a4c0..ad69413222 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-notification-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-notification-container.element.ts @@ -2,7 +2,8 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; -import type { UmbNotificationService, UmbNotificationHandler } from '../../core/services/notification'; +import type { UmbNotificationHandler } from '../../../core/services/notification'; +import type { UmbNotificationService } from '@umbraco-cms/services'; import { UmbObserverMixin } from '@umbraco-cms/observable-api'; import { UmbContextConsumerMixin } from '@umbraco-cms/context-api'; diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.ts index 4dd11ecacb..8160abdb04 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.ts @@ -1,4 +1,4 @@ -import '../../../backoffice/components/backoffice-notification-container.element'; +import '../../../backoffice/components/backoffice-frame/backoffice-notification-container.element'; import '../../context-api/provide/context-provider.element'; import './layouts/default'; From dc1e4f1d66e21d65755fee787cf63567dd3b8272 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 10:04:42 +0100 Subject: [PATCH 18/23] fix import --- .../property-editor-ui-content-picker.stories.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.stories.ts index 5321c23b9a..434783a64c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.stories.ts @@ -1,10 +1,10 @@ import { Meta, Story } from '@storybook/web-components'; import { html } from 'lit-html'; +import { UmbModalService } from '../../../core/services/modal'; import type { UmbPropertyEditorUIContentPickerElement } from './property-editor-ui-content-picker.element'; import './property-editor-ui-content-picker.element'; -import { UmbModalService } from '../../../core/services/modal'; -import '../../components/backoffice-modal-container.element'; +import '../../components/backoffice-frame/backoffice-modal-container.element'; export default { title: 'Property Editor UIs/Content Picker', From e793f82584b1147e4129f102550af0e4d5c3d998 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 10:56:51 +0100 Subject: [PATCH 19/23] remove unused use-extension-data.mixin.ts --- .../core/extensions-api/use-extension-data.mixin.ts | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/core/extensions-api/use-extension-data.mixin.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-api/use-extension-data.mixin.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-api/use-extension-data.mixin.ts deleted file mode 100644 index 5a74c7f4c3..0000000000 --- a/src/Umbraco.Web.UI.Client/src/core/extensions-api/use-extension-data.mixin.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { HTMLElementConstructor } from '../models'; - -export declare class UmbUseExtensionDataMixinInterface { - extensionMeta: object; -} - -export const UmbUseExtensionDataMixin = (superClass: T) => { - class UmbUseExtensionDataClass extends superClass { - extensionMeta: object = {}; - } - - return UmbUseExtensionDataClass as unknown as HTMLElementConstructor & T; -}; From 3e05c0d21850031fafccfde02dfdcb5a4c40ab95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 10:57:20 +0100 Subject: [PATCH 20/23] rename to _registerHeaderApps --- .../backoffice-frame/backoffice-header-apps.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-apps.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-apps.element.ts index 915175f22e..bfe07f73ca 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-apps.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-apps.element.ts @@ -20,10 +20,10 @@ export class UmbBackofficeHeaderApps extends LitElement { constructor() { super(); - this._registerEditorApps(); + this._registerHeaderApps(); } - private _registerEditorApps() { + private _registerHeaderApps() { const headerApps: Array> = [ { type: 'headerApp', From 660c9ac1afa10131c08ab067b793d66fada288dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 10:58:09 +0100 Subject: [PATCH 21/23] name elements --- .../src/backoffice/header-apps/header-app-button.element.ts | 4 ++-- .../backoffice/header-apps/header-app-current-user.element.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts index 96d0e8b555..27641947b2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts @@ -4,7 +4,7 @@ import { customElement } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { ManifestHeaderApp } from '@umbraco-cms/extensions-registry'; -@customElement('umb-backoffice-header-app-button') +@customElement('umb-header-app-button') export class UmbHeaderAppButton extends LitElement { static styles: CSSResultGroup = [ UUITextStyles, @@ -30,6 +30,6 @@ export default UmbHeaderAppButton; declare global { interface HTMLElementTagNameMap { - 'umb-backoffice-header-app-button': UmbHeaderAppButton; + 'umb-header-app-button': UmbHeaderAppButton; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-current-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-current-user.element.ts index 108751d310..88731d20cd 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-current-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-current-user.element.ts @@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; -@customElement('umb-backoffice-header-app-user') +@customElement('umb-header-app-current-user') export class UmbHeaderAppCurrentUser extends LitElement { static styles: CSSResultGroup = [ UUITextStyles, From aa86cd8987676114fc005bc2ac9f9ff83ea1ea07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 11:24:10 +0100 Subject: [PATCH 22/23] i want space --- .../src/backoffice/header-apps/header-app-button.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts index 27641947b2..be8e42c548 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts @@ -6,6 +6,7 @@ import { ManifestHeaderApp } from '@umbraco-cms/extensions-registry'; @customElement('umb-header-app-button') export class UmbHeaderAppButton extends LitElement { + static styles: CSSResultGroup = [ UUITextStyles, css` From 0786826b968eefcb9b89bb392c22149997adc6e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 14 Dec 2022 11:32:27 +0100 Subject: [PATCH 23/23] update import --- src/Umbraco.Web.UI.Client/.storybook/preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js index 1213c6ca8c..cdbdc0d8ab 100644 --- a/src/Umbraco.Web.UI.Client/.storybook/preview.js +++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js @@ -29,7 +29,7 @@ import { umbExtensionsRegistry } from '../src/core/extensions-registry'; import '../src/core/context-api/provide/context-provider.element'; import '../src/core/css/custom-properties.css'; -import '../src/backoffice/components/backoffice-modal-container.element'; +import '../src/backoffice/components/backoffice-frame/backoffice-modal-container.element'; import '../src/backoffice/components/shared/code-block.element'; class UmbStoryBookElement extends LitElement {