From fbc8928ecd22c2b049bb9ad8c202ed5a7281ea84 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 17 Jan 2023 16:24:47 +0100 Subject: [PATCH] migrate UmbSectionContext to UmbContextAlias --- .../backoffice-main.element.ts | 4 ++-- .../section-dashboards.element.ts | 10 ++++----- .../section-dashboards.stories.ts | 6 +++-- .../section-sidebar-menu.element.ts | 4 ++-- .../section-sidebar.element.ts | 4 ++-- .../section-views/section-views.element.ts | 4 ++-- .../components/section/section.context.ts | 6 ++--- .../components/section/section.element.ts | 22 ++++++++----------- .../tree/action/tree-item-action.element.ts | 4 ++-- ...e-context-menu-page-action-list.element.ts | 4 ++-- .../components/tree/tree-item.element.ts | 4 ++-- 11 files changed, 35 insertions(+), 37 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts index 03082520d2..c262fd10bc 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts @@ -4,7 +4,7 @@ import { css, html } from 'lit'; import { state } from 'lit/decorators.js'; import { IRoutingInfo } from 'router-slot'; import { UmbSectionStore, UMB_SECTION_STORE_CONTEXT_ALIAS } from '../section/section.store'; -import { UmbSectionContext } from '../section/section.context'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section/section.context'; import { createExtensionElement } from '@umbraco-cms/extensions-api'; import type { ManifestSection } from '@umbraco-cms/models'; import { UmbSectionElement } from 'src/backoffice/shared/components/section/section.element'; @@ -93,7 +93,7 @@ export class UmbBackofficeMain extends UmbLitElement { private _provideSectionContext(section: ManifestSection) { if (!this._sectionContext) { this._sectionContext = new UmbSectionContext(section); - this.provideContext('umbSectionContext', this._sectionContext); + this.provideContext(UMB_SECTION_CONTEXT_ALIAS, this._sectionContext); } else { this._sectionContext.setManifest(section); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts index bc1bfa484f..2fae73b1f5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts @@ -3,7 +3,7 @@ import { css, html, nothing } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { IRoutingInfo } from 'router-slot'; import { first, map } from 'rxjs'; -import { UmbSectionContext } from '../section.context'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section.context'; import { createExtensionElement } from '@umbraco-cms/extensions-api'; import type { ManifestDashboard, @@ -63,7 +63,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbSectionContext', (context: UmbSectionContext) => { + this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (context) => { this._sectionContext = context; this._observeSectionContext(); }); @@ -73,7 +73,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement { if (!this._sectionContext) return; this.observe(this._sectionContext.manifest.pipe(first()), (section) => { - if(section) { + if (section) { this._currentSectionAlias = section.alias; this._currentSectionPathname = section.meta.pathname; this._observeDashboards(); @@ -86,7 +86,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement { this.observe( umbExtensionsRegistry - ?.extensionsOfTypes<(ManifestDashboard | ManifestDashboardCollection)>(['dashboard', 'dashboardCollection']) + ?.extensionsOfTypes(['dashboard', 'dashboardCollection']) .pipe( map((extensions) => extensions.filter((extension) => @@ -104,7 +104,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement { private _createRoutes() { this._routes = []; - if(this._dashboards) { + if (this._dashboards) { this._routes = this._dashboards.map((dashboard) => { return { path: `${dashboard.meta.pathname}`, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.stories.ts index c54f0dbf59..8d2b69df27 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.stories.ts @@ -1,7 +1,7 @@ import { Meta, Story } from '@storybook/web-components'; import { html } from 'lit-html'; import { manifests } from '../../../../documents/section.manifests'; -import { UmbSectionContext } from '../section.context'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section.context'; import type { UmbSectionDashboardsElement } from './section-dashboards.element'; import type { ManifestSection } from '@umbraco-cms/models'; import './section-dashboards.element'; @@ -14,7 +14,9 @@ export default { id: 'umb-section-dashboards', decorators: [ (story) => - html` + html` ${story()} `, ], diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.element.ts index 47977ede17..90140a5aa1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.element.ts @@ -1,7 +1,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { UmbSectionContext } from '../section.context'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section.context'; import { ManifestSidebarMenuItem } from '@umbraco-cms/extensions-registry'; import { UmbLitElement } from '@umbraco-cms/element'; @@ -19,7 +19,7 @@ export class UmbSectionSidebarMenuElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbSectionContext', (instance) => { + this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (instance) => { this._sectionContext = instance; this._observeCurrentSection(); }); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.element.ts index b339344abd..b2adba6084 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.element.ts @@ -1,7 +1,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { UmbSectionContext } from '../section.context'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section.context'; import type { ManifestSection } from '@umbraco-cms/models'; import '../../tree/context-menu/tree-context-menu.service'; @@ -39,7 +39,7 @@ export class UmbSectionSidebarElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => { + this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (sectionContext) => { this._sectionContext = sectionContext; this._observeSectionContext(); }); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts index 9773e7d1b7..06b7dd27de 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts @@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html, nothing } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { EMPTY, map, of, Subscription, switchMap } from 'rxjs'; -import { UmbSectionContext } from '../section.context'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section.context'; import type { ManifestSectionView } from '@umbraco-cms/models'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; import { UmbLitElement } from '@umbraco-cms/element'; @@ -44,7 +44,7 @@ export class UmbSectionViewsElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => { + this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (sectionContext) => { this._sectionContext = sectionContext; this._observeViews(); this._observeActiveView(); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts index 8ce461f91a..ab2a382154 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts @@ -1,10 +1,9 @@ import { BehaviorSubject } from 'rxjs'; import type { Entity, ManifestSection, ManifestSectionView, ManifestTree } from '@umbraco-cms/models'; import { UniqueBehaviorSubject } from '@umbraco-cms/observable-api'; +import { UmbContextAlias } from '@umbraco-cms/context-api'; export class UmbSectionContext { - - #manifest; public readonly manifest; @@ -25,7 +24,6 @@ export class UmbSectionContext { this.manifest = this.#manifest.asObservable(); } - public setManifest(data: ManifestSection) { this.#manifest.next({ ...data }); } @@ -46,3 +44,5 @@ export class UmbSectionContext { this._activeView.next(view); } } + +export const UMB_SECTION_CONTEXT_ALIAS = new UmbContextAlias(UmbSectionContext.name); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts index e975845712..012142be63 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts @@ -4,7 +4,7 @@ import { customElement, state } from 'lit/decorators.js'; import { map, switchMap, EMPTY, of } from 'rxjs'; import { IRoutingInfo } from 'router-slot'; import type { UmbWorkspaceEntityElement } from '../workspace/workspace-entity-element.interface'; -import { UmbSectionContext } from './section.context'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from './section.context'; import { createExtensionElement } from '@umbraco-cms/extensions-api'; import type { ManifestSectionView, ManifestWorkspace, ManifestSidebarMenuItem } from '@umbraco-cms/models'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; @@ -48,7 +48,7 @@ export class UmbSectionElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbSectionContext', (instance) => { + this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (instance) => { this._sectionContext = instance; // TODO: currently they don't corporate, as they overwrite each other... @@ -60,11 +60,9 @@ export class UmbSectionElement extends UmbLitElement { private _observeMenuItems() { if (!this._sectionContext) return; - this.observe(this._sectionContext?.manifest, - (section) => { - this._observeSidebarMenuItem(section?.alias); - } - ); + this.observe(this._sectionContext?.manifest, (section) => { + this._observeSidebarMenuItem(section?.alias); + }); this.observe(umbExtensionsRegistry.extensionsOfType('workspace'), (workspaceExtensions) => { this._workspaces = workspaceExtensions; @@ -72,14 +70,12 @@ export class UmbSectionElement extends UmbLitElement { }); } - private _observeSidebarMenuItem(sectionAlias?:string) { - if(sectionAlias) { + private _observeSidebarMenuItem(sectionAlias?: string) { + if (sectionAlias) { this.observe( umbExtensionsRegistry - ?.extensionsOfType('sidebarMenuItem') - .pipe( - map((manifests) => manifests.filter((manifest) => manifest.meta.sections.includes(sectionAlias))) - ), + ?.extensionsOfType('sidebarMenuItem') + .pipe(map((manifests) => manifests.filter((manifest) => manifest.meta.sections.includes(sectionAlias)))), (manifests) => { this._menuItems = manifests; this._createMenuRoutes(); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts index 773916db86..02c504c965 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts @@ -1,5 +1,5 @@ import { customElement, property, state } from 'lit/decorators.js'; -import { UmbSectionContext } from '../../section/section.context'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../../section/section.context'; import { UmbTreeContextMenuPageService } from '../context-menu/tree-context-menu-page.service'; import { UmbTreeContextMenuService } from '../context-menu/tree-context-menu.service'; import type { Entity, ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models'; @@ -28,7 +28,7 @@ export default class UmbTreeItemActionElement extends UmbLitElement { connectedCallback() { super.connectedCallback(); - this.consumeContext('umbSectionContext', (sectionContext) => { + this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (sectionContext) => { this._sectionContext = sectionContext; this._observeActiveTree(); this._observeActiveTreeItem(); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts index 59a5991fa4..4107927fec 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts @@ -2,7 +2,7 @@ import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, state } from 'lit/decorators.js'; import { map } from 'rxjs'; -import { UmbSectionContext } from '../../section/section.context'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../../section/section.context'; import type { Entity, ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; import { UmbLitElement } from '@umbraco-cms/element'; @@ -41,7 +41,7 @@ export class UmbTreeContextMenuPageActionListElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbSectionContext', (sectionContext) => { + this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (sectionContext) => { this._sectionContext = sectionContext; this._observeActiveTree(); this._observeActiveTreeItem(); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts index 8ec0dffd7e..828841b360 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts @@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit-html/directives/if-defined.js'; import { map, Observable } from 'rxjs'; import { repeat } from 'lit/directives/repeat.js'; -import { UmbSectionContext } from '../section/section.context'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section/section.context'; import type { UmbTreeContextBase } from './tree.context'; import { UmbTreeContextMenuService } from './context-menu/tree-context-menu.service'; import type { Entity } from '@umbraco-cms/models'; @@ -82,7 +82,7 @@ export class UmbTreeItem extends UmbLitElement { this._store = store; }); - this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => { + this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (sectionContext) => { this._sectionContext = sectionContext; this._observeSection(); this._observeActiveTreeItem();