diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js index dbc166a597..5b0150c957 100644 --- a/src/Umbraco.Web.UI.Client/.storybook/preview.js +++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js @@ -11,21 +11,15 @@ import { html } from 'lit-html'; import { initialize, mswDecorator } from 'msw-storybook-addon'; import { setCustomElements } from '@storybook/web-components'; -import { - UMB_DATA_TYPE_STORE_CONTEXT_TOKEN, - UmbDataTypeStore, -} from '../src/backoffice/settings/data-types/repository/data-type.store.ts'; -import { - UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN, - UmbDocumentTypeStore, -} from '../src/backoffice/documents/document-types/repository/document-type.store.ts'; +import { UmbDataTypeStore } from '../src/backoffice/settings/data-types/repository/data-type.store.ts'; +import { UmbDocumentTypeStore } from '../src/backoffice/documents/document-types/repository/document-type.store.ts'; import customElementManifests from '../custom-elements.json'; import { UmbIconStore } from '../libs/store/icon/icon.store'; import { onUnhandledRequest } from '../src/core/mocks/browser'; import { handlers } from '../src/core/mocks/browser-handlers'; import { LitElement } from 'lit'; -import { UmbModalService } from '../src/core/modal'; +import { UMB_MODAL_SERVICE_CONTEXT_TOKEN, UmbModalService } from '../src/core/modal'; // TODO: Fix storybook manifest registrations. @@ -71,7 +65,10 @@ const documentTypeStoreProvider = (story) => html` `; const modalServiceProvider = (story) => html` - + ${story()} @@ -94,7 +91,7 @@ export const parameters = { storySort: { method: 'alphabetical', includeNames: true, - order: ['Guides', ['Getting started'], '*'] + order: ['Guides', ['Getting started'], '*'], }, }, actions: { argTypesRegex: '^on.*' }, diff --git a/src/Umbraco.Web.UI.Client/src/core/events/change.event.ts b/src/Umbraco.Web.UI.Client/libs/events/change.event.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/events/change.event.ts rename to src/Umbraco.Web.UI.Client/libs/events/change.event.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/events/delete.event.ts b/src/Umbraco.Web.UI.Client/libs/events/delete.event.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/events/delete.event.ts rename to src/Umbraco.Web.UI.Client/libs/events/delete.event.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/events/executed.event.ts b/src/Umbraco.Web.UI.Client/libs/events/executed.event.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/events/executed.event.ts rename to src/Umbraco.Web.UI.Client/libs/events/executed.event.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/events/index.ts b/src/Umbraco.Web.UI.Client/libs/events/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/events/index.ts rename to src/Umbraco.Web.UI.Client/libs/events/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/events/input.event.ts b/src/Umbraco.Web.UI.Client/libs/events/input.event.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/events/input.event.ts rename to src/Umbraco.Web.UI.Client/libs/events/input.event.ts diff --git a/src/Umbraco.Web.UI.Client/libs/events/rollup.config.js b/src/Umbraco.Web.UI.Client/libs/events/rollup.config.js new file mode 100644 index 0000000000..945c0afe88 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/libs/events/rollup.config.js @@ -0,0 +1,4 @@ +import config from '../../utils/rollup.config.js'; +export default { + ...config, +}; diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/models.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/models.ts index 765e468a6d..4d4eff91e7 100644 --- a/src/Umbraco.Web.UI.Client/libs/extensions-registry/models.ts +++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/models.ts @@ -11,6 +11,7 @@ import type { ManifestPropertyAction } from './property-action.models'; import type { ManifestPropertyEditorUI, ManifestPropertyEditorModel } from './property-editor.models'; import type { ManifestSection } from './section.models'; import type { ManifestSectionView } from './section-view.models'; +import type { ManifestSidebarMenu } from './sidebar-menu.models'; import type { ManifestSidebarMenuItem } from './sidebar-menu-item.models'; import type { ManifestTheme } from './theme.models'; import type { ManifestTree } from './tree.models'; @@ -36,6 +37,7 @@ export * from './property-action.models'; export * from './property-editor.models'; export * from './section-view.models'; export * from './section.models'; +export * from './sidebar-menu.models'; export * from './sidebar-menu-item.models'; export * from './theme.models'; export * from './tree-item-action.models'; @@ -65,6 +67,7 @@ export type ManifestTypes = | ManifestRepository | ManifestSection | ManifestSectionView + | ManifestSidebarMenu | ManifestSidebarMenuItem | ManifestTheme | ManifestTree diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/sidebar-menu-item.models.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/sidebar-menu-item.models.ts index da406a9022..044d2090e5 100644 --- a/src/Umbraco.Web.UI.Client/libs/extensions-registry/sidebar-menu-item.models.ts +++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/sidebar-menu-item.models.ts @@ -8,6 +8,6 @@ export interface ManifestSidebarMenuItem extends ManifestElement { export interface MetaSidebarMenuItem { label: string; icon: string; - sections: Array; + sidebarMenus: Array; entityType?: string; } diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/sidebar-menu.models.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/sidebar-menu.models.ts new file mode 100644 index 0000000000..4c48bb3be0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/sidebar-menu.models.ts @@ -0,0 +1,11 @@ +import type { ManifestElement } from './models'; + +export interface ManifestSidebarMenu extends ManifestElement { + type: 'sidebarMenu'; + meta: MetaSidebarMenu; +} + +export interface MetaSidebarMenu { + label: string; + sections: Array; +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/sidebar-menu-item/manifests.ts index 3705f991fb..e85282727e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/sidebar-menu-item/manifests.ts @@ -8,7 +8,7 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Document Blueprints', icon: 'umb:blueprint', - sections: ['Umb.Section.Settings'], + sidebarMenus: ['Umb.SidebarMenu.Settings'], entityType: 'document-blueprint-root', }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/sidebar-menu-item/manifests.ts index eb4bb99c23..1d6e662307 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/sidebar-menu-item/manifests.ts @@ -9,7 +9,7 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Document Types', icon: 'umb:folder', - sections: ['Umb.Section.Settings'], + sidebarMenus: ['Umb.SidebarMenu.Settings'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts index a2bd997906..cd8b0fcd0a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts @@ -2,7 +2,7 @@ import { css, html, LitElement, nothing } from 'lit'; import { ifDefined } from 'lit-html/directives/if-defined.js'; import { customElement, property, state } from 'lit/decorators.js'; import type { UmbTableColumn, UmbTableItem } from '../../../../../../shared/components/table'; -import { UmbExecutedEvent } from 'src/core/events'; +import { UmbExecutedEvent } from '@umbraco-cms/events'; // TODO: this could be done more generic, but for now we just need it for the document table @customElement('umb-document-table-actions-column-layout') diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/sidebar-menu-item/manifests.ts index d329bc31ec..2273b73a4a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/sidebar-menu-item/manifests.ts @@ -9,7 +9,7 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Documents', icon: 'umb:folder', - sections: ['Umb.Section.Content'], + sidebarMenus: ['Umb.SidebarMenu.Content'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/section.manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/section.manifests.ts index 790571c8f5..4787f76123 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/section.manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/section.manifests.ts @@ -1,4 +1,4 @@ -import type { ManifestSection } from '@umbraco-cms/models'; +import type { ManifestSection, ManifestSidebarMenu } from '@umbraco-cms/models'; const sectionAlias = 'Umb.Section.Content'; @@ -13,4 +13,15 @@ const section: ManifestSection = { }, }; -export const manifests = [section]; +const sidebarMenu: ManifestSidebarMenu = { + type: 'sidebarMenu', + alias: 'Umb.SidebarMenu.Content', + name: 'Content Sidebar Menu', + weight: 100, + meta: { + label: 'Content', + sections: [sectionAlias], + }, +}; + +export const manifests = [section, sidebarMenu]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/sidebar-menu-item/manifests.ts index 43c7f4d04d..2ecc9391f3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/sidebar-menu-item/manifests.ts @@ -9,7 +9,7 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Media Types', icon: 'umb:folder', - sections: ['Umb.Section.Settings'], + sidebarMenus: ['Umb.SidebarMenu.Settings'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/sidebar-menu-item/manifests.ts index c0e5187c6e..f14f90cc8c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/sidebar-menu-item/manifests.ts @@ -9,7 +9,7 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Media', icon: 'umb:folder', - sections: ['Umb.Section.Media'], + sidebarMenus: ['Umb.SidebarMenu.Media'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/section.manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/section.manifests.ts index 5f7b6e8d29..05557e3e1a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/media/section.manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/section.manifests.ts @@ -1,4 +1,4 @@ -import type { ManifestDashboardCollection, ManifestSection } from '@umbraco-cms/models'; +import type { ManifestDashboardCollection, ManifestSection, ManifestSidebarMenu } from '@umbraco-cms/models'; const sectionAlias = 'Umb.Section.Media'; @@ -29,4 +29,15 @@ const dashboards: Array = [ }, ]; -export const manifests = [section, ...dashboards]; +const sidebarMenu: ManifestSidebarMenu = { + type: 'sidebarMenu', + alias: 'Umb.SidebarMenu.Media', + name: 'Media Sidebar Menu', + weight: 100, + meta: { + label: 'Media', + sections: [sectionAlias], + }, +}; + +export const manifests = [section, sidebarMenu, ...dashboards]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/sidebar-menu-item/manifests.ts index 596ae323b1..d3caac84de 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/sidebar-menu-item/manifests.ts @@ -9,7 +9,7 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Member Groups', icon: 'umb:folder', - sections: ['Umb.Section.Members'], + sidebarMenus: ['Umb.SidebarMenu.Members'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/sidebar-menu-item/manifests.ts index da52d7247e..e62397b44b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/sidebar-menu-item/manifests.ts @@ -9,7 +9,7 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Member Types', icon: 'umb:folder', - sections: ['Umb.Section.Settings'], + sidebarMenus: ['Umb.SidebarMenu.Settings'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/sidebar-menu-item/manifests.ts index e1afd744ff..c8935378c2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/sidebar-menu-item/manifests.ts @@ -9,8 +9,8 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Members', icon: 'umb:folder', - sections: ['Umb.Section.Members'], entityType: 'member', + sidebarMenus: ['Umb.SidebarMenu.Members'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/section.manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/section.manifests.ts index 78379024df..aa94eb7b7a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/members/section.manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/section.manifests.ts @@ -1,4 +1,4 @@ -import type { ManifestDashboard, ManifestSection } from '@umbraco-cms/models'; +import type { ManifestDashboard, ManifestSection, ManifestSidebarMenu } from '@umbraco-cms/models'; const sectionAlias = 'Umb.Section.Members'; @@ -28,4 +28,15 @@ const dashboards: Array = [ }, ]; -export const manifests = [section, ...dashboards]; +const sidebarMenu: ManifestSidebarMenu = { + type: 'sidebarMenu', + alias: 'Umb.SidebarMenu.Members', + name: 'Members Sidebar Menu', + weight: 100, + meta: { + label: 'Members', + sections: [sectionAlias], + }, +}; + +export const manifests = [section, sidebarMenu, ...dashboards]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/sidebar-menu-item/manifests.ts index a478315824..5d8ce90554 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/sidebar-menu-item/manifests.ts @@ -9,8 +9,8 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Data Types', icon: 'umb:folder', - sections: ['Umb.Section.Settings'], entityType: 'data-type', + sidebarMenus: ['Umb.SidebarMenu.Settings'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/sidebar-menu-item/manifests.ts index 17d40bba06..12b25aaf7f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/sidebar-menu-item/manifests.ts @@ -8,8 +8,8 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Extensions', icon: 'umb:wand', - sections: ['Umb.Section.Settings'], entityType: 'extension-root', + sidebarMenus: ['Umb.SidebarMenu.Settings'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/sidebar-menu-item/manifests.ts index a6e4b14ef1..c9f1fa57d3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/sidebar-menu-item/manifests.ts @@ -8,8 +8,8 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Languages', icon: 'umb:globe', - sections: ['Umb.Section.Settings'], entityType: 'language-root', + sidebarMenus: ['Umb.SidebarMenu.Settings'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/sidebar-menu-item/manifests.ts index 718f324bfb..95c4bc26f5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/sidebar-menu-item/manifests.ts @@ -8,8 +8,8 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Log Viewer', icon: 'umb:box-alt', - sections: ['Umb.Section.Settings'], entityType: 'logviewer-root', + sidebarMenus: ['Umb.SidebarMenu.Settings'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/section.manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/section.manifests.ts index d95812dbf5..fa9ce27835 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/section.manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/section.manifests.ts @@ -1,4 +1,4 @@ -import type { ManifestSection } from '@umbraco-cms/models'; +import type { ManifestSection, ManifestSidebarMenu } from '@umbraco-cms/models'; const sectionAlias = 'Umb.Section.Settings'; @@ -13,4 +13,15 @@ const section: ManifestSection = { }, }; -export const manifests = [section]; +const sidebarMenu: ManifestSidebarMenu = { + type: 'sidebarMenu', + alias: 'Umb.SidebarMenu.Settings', + name: 'Settings Sidebar Menu', + weight: 100, + meta: { + label: 'Settings', + sections: [sectionAlias], + }, +}; + +export const manifests = [section, sidebarMenu]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts index 05d19442e8..dd7d75eba1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts @@ -2,11 +2,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { map } from 'rxjs'; -import { UmbExecutedEvent } from '../../../core/events'; import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from './collection.context'; import type { ManifestEntityBulkAction, MediaDetails } from '@umbraco-cms/models'; import { UmbLitElement } from '@umbraco-cms/element'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api'; +import { UmbExecutedEvent } from '@umbraco-cms/events'; import '../entity-bulk-actions/entity-bulk-action.element'; 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 85d0d581a3..f355df2597 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,43 +1,32 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { html } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section.context'; -import { ManifestSidebarMenuItem } from '@umbraco-cms/extensions-registry'; +import { css, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { ManifestSidebarMenu, ManifestSidebarMenuItem } from '@umbraco-cms/extensions-registry'; import { UmbLitElement } from '@umbraco-cms/element'; import './sidebar-menu-item.element.ts'; @customElement('umb-section-sidebar-menu') export class UmbSectionSidebarMenuElement extends UmbLitElement { - static styles = [UUITextStyles]; + static styles = [ + UUITextStyles, + css` + h3 { + padding: var(--uui-size-4) var(--uui-size-8); + } + `, + ]; - @state() - private _currentSectionAlias?: string; - - private _sectionContext?: UmbSectionContext; - - constructor() { - super(); - - this.consumeContext(UMB_SECTION_CONTEXT_TOKEN, (instance) => { - this._sectionContext = instance; - this._observeCurrentSection(); - }); - } - - private _observeCurrentSection() { - if (!this._sectionContext) return; - - this.observe(this._sectionContext.alias, (alias) => { - this._currentSectionAlias = alias; - }); - } + @property() + manifest?: ManifestSidebarMenu; render() { - return html` items.meta.sections.includes(this._currentSectionAlias || '')} - default-element="umb-sidebar-menu-item">`; + // TODO: link to dashboards when clicking on the menu item header + return html`

${this.manifest?.meta.label}

+ items.meta.sidebarMenus.includes(this.manifest!.alias)} + default-element="umb-sidebar-menu-item">`; } } 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 ca2411549a..3925b34a71 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 @@ -21,11 +21,7 @@ export class UmbSectionSidebarElement extends UmbLitElement { font-weight: 500; display: flex; flex-direction: column; - z-index:10; - } - - h3 { - padding: var(--uui-size-4) var(--uui-size-8); + z-index: 10; } `, ]; @@ -65,10 +61,6 @@ export class UmbSectionSidebarElement extends UmbLitElement { return html` - -

${this._sectionLabel}

- - 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 6c63ea29ae..ebfd711528 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 @@ -5,13 +5,13 @@ import { map } from 'rxjs'; import { IRoutingInfo } from 'router-slot'; import type { UmbWorkspaceEntityElement } from '../workspace/workspace-entity-element.interface'; import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from './section.context'; -import type { ManifestSectionView, ManifestWorkspace, ManifestSidebarMenuItem } from '@umbraco-cms/models'; +import type { ManifestSectionView, ManifestWorkspace, ManifestSidebarMenu } from '@umbraco-cms/models'; import { umbExtensionsRegistry, createExtensionElement } from '@umbraco-cms/extensions-api'; import { UmbLitElement } from '@umbraco-cms/element'; +import { UmbRouterSlotChangeEvent } from '@umbraco-cms/router'; import './section-sidebar-menu/section-sidebar-menu.element.ts'; import './section-views/section-views.element.ts'; -import { UmbRouterSlotChangeEvent } from '@umbraco-cms/router'; @customElement('umb-section') export class UmbSectionElement extends UmbLitElement { @@ -31,12 +31,11 @@ export class UmbSectionElement extends UmbLitElement { `, ]; - // TODO: make this code reusable across sections @state() private _routes: Array = []; @state() - private _menuItems?: Array; + private _menus?: Array; private _workspaces?: Array; @@ -62,7 +61,7 @@ export class UmbSectionElement extends UmbLitElement { if (!this._sectionContext) return; this.observe(this._sectionContext?.alias, (alias) => { - this._observeSidebarMenuItem(alias); + this._observeSidebarMenus(alias); }); this.observe(umbExtensionsRegistry.extensionsOfType('workspace'), (workspaceExtensions) => { @@ -71,25 +70,24 @@ export class UmbSectionElement extends UmbLitElement { }); } - private _observeSidebarMenuItem(sectionAlias?: string) { + private _observeSidebarMenus(sectionAlias?: string) { if (sectionAlias) { this.observe( umbExtensionsRegistry - ?.extensionsOfType('sidebarMenuItem') + ?.extensionsOfType('sidebarMenu') .pipe(map((manifests) => manifests.filter((manifest) => manifest.meta.sections.includes(sectionAlias)))), (manifests) => { - this._menuItems = manifests; + this._menus = manifests; this._createMenuRoutes(); } ); } else { - this._menuItems = undefined; + this._menus = undefined; this._createMenuRoutes(); } } private _createMenuRoutes() { - // TODO: find a way to make this reuseable across: const workspaceRoutes = this._workspaces?.map((workspace: ManifestWorkspace) => { return [ @@ -140,35 +138,30 @@ export class UmbSectionElement extends UmbLitElement { ]; } - - private _observeSection() { if (!this._sectionContext) return; - this.observe( - this._sectionContext.alias, (alias) => { - this._sectionAlias = alias; - this._observeViews(); - } - ); + this.observe(this._sectionContext.alias, (alias) => { + this._sectionAlias = alias; + this._observeViews(); + }); } private _observeViews() { - this.observe(umbExtensionsRegistry?.extensionsOfType('sectionView'), (views) => { - const sectionViews = views.filter((view) => { - return this._sectionAlias ? view.meta.sections.includes(this._sectionAlias) : false - }).sort((a, b) => b.meta.weight - a.meta.weight); - if(sectionViews.length > 0) { - this._views = sectionViews; - this._createViewRoutes(); - } + const sectionViews = views + .filter((view) => { + return this._sectionAlias ? view.meta.sections.includes(this._sectionAlias) : false; + }) + .sort((a, b) => b.meta.weight - a.meta.weight); + if (sectionViews.length > 0) { + this._views = sectionViews; + this._createViewRoutes(); } - ); + }); } private _createViewRoutes() { - this._routes = this._views?.map((view) => { return { @@ -190,21 +183,27 @@ export class UmbSectionElement extends UmbLitElement { const view = this._views?.find((view) => 'view/' + view.meta.pathname === currentPath); if (!view) return; this._sectionContext?.setActiveView(view); - } + }; render() { return html` - ${this._menuItems && this._menuItems.length > 0 + ${this._menus && this._menus.length > 0 ? html` - + items.meta.sections.includes(this._sectionAlias || '')} + default-element="umb-section-sidebar-menu"> ` : nothing} ${this._views && this._views.length > 0 ? html`` : nothing} ${this._routes && this._routes.length > 0 - ? html`` + ? html`` : nothing} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action-menu/workspace-action-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action-menu/workspace-action-menu.element.ts index 55db30a939..17675b5864 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action-menu/workspace-action-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action-menu/workspace-action-menu.element.ts @@ -3,7 +3,7 @@ import { css, html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit-html/directives/if-defined.js'; import { UmbLitElement } from '@umbraco-cms/element'; -import { UmbExecutedEvent } from 'src/core/events'; +import { UmbExecutedEvent } from '@umbraco-cms/events'; @customElement('umb-workspace-action-menu') export class UmbWorkspaceActionMenuElement extends UmbLitElement { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action/workspace-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action/workspace-action.element.ts index 5ab860b314..88e0fcac15 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action/workspace-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action/workspace-action.element.ts @@ -2,7 +2,7 @@ import { css, html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import type { UUIButtonState } from '@umbraco-ui/uui'; -import { UmbExecutedEvent } from '../../../../../core/events'; +import { UmbExecutedEvent } from '@umbraco-cms/events'; import { UmbLitElement } from '@umbraco-cms/element'; import type { ManifestWorkspaceAction } from '@umbraco-cms/models'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-actions/entity-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-actions/entity-action.element.ts index 1e05d3eb86..1c2fe73009 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-actions/entity-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-actions/entity-action.element.ts @@ -2,7 +2,7 @@ import { html, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { UUIMenuItemEvent } from '@umbraco-ui/uui'; -import { UmbExecutedEvent } from '../../../core/events'; +import { UmbExecutedEvent } from '@umbraco-cms/events'; import { UmbLitElement } from '@umbraco-cms/element'; import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-bulk-actions/entity-bulk-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-bulk-actions/entity-bulk-action.element.ts index a351882411..530ec2ab46 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-bulk-actions/entity-bulk-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-bulk-actions/entity-bulk-action.element.ts @@ -1,7 +1,7 @@ import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { ifDefined } from 'lit-html/directives/if-defined.js'; -import { UmbExecutedEvent } from '../../../core/events'; +import { UmbExecutedEvent } from '@umbraco-cms/events'; import { UmbLitElement } from '@umbraco-cms/element'; import { ManifestEntityBulkAction } from '@umbraco-cms/extensions-registry'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts index 06d1587508..d4906b2a54 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts @@ -4,7 +4,7 @@ import { customElement, property, query } from 'lit/decorators.js'; import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; import { UUIInputEvent } from '@umbraco-ui/uui-input'; import { UUIInputElement } from '@umbraco-ui/uui'; -import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '../../../../../../core/events'; +import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/events'; import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../../core/modal'; import { UmbLitElement } from '@umbraco-cms/element'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts index ff51c6f394..510eeb2bec 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts @@ -4,10 +4,9 @@ import { customElement, property, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; import UmbInputMultipleTextStringItemElement from '../input-multiple-text-string-item/input-multiple-text-string-item.element'; -import { UmbInputEvent, UmbChangeEvent, UmbDeleteEvent } from '../../../../../../core/events'; +import { UmbInputEvent, UmbChangeEvent, UmbDeleteEvent } from '@umbraco-cms/events'; import { UmbLitElement } from '@umbraco-cms/element'; - export type MultipleTextStringValue = Array; export interface MultipleTextStringValueItem { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts index 2b9cf0e509..6399eed8c1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts @@ -1,14 +1,13 @@ import { html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit-html/directives/if-defined.js'; +import { UmbChangeEvent } from '@umbraco-cms/events'; import { UmbPropertyValueChangeEvent } from '../..'; import UmbInputMultipleTextStringElement, { MultipleTextStringValue, } from './input-multiple-text-string/input-multiple-text-string.element'; -import { UmbChangeEvent } from 'src/core/events/change.event'; import { UmbLitElement } from '@umbraco-cms/element'; - export type MultipleTextStringConfigData = Array<{ alias: 'minNumber' | 'maxNumber'; value: number; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts index 5fa6ac29c3..2666a82bfc 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts @@ -1,3 +1,4 @@ +import { manifests as menuManifests } from './manifests'; import { manifests as templateManifests } from './templates/manifests'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api'; import { ManifestTypes } from '@umbraco-cms/extensions-registry'; @@ -9,4 +10,4 @@ const registerExtensions = (manifests: Array) => { }); }; -registerExtensions([...templateManifests]); +registerExtensions([...menuManifests, ...templateManifests]); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/manifests.ts new file mode 100644 index 0000000000..5b76467241 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestSidebarMenu } from '@umbraco-cms/models'; + +const sidebarMenu: ManifestSidebarMenu = { + type: 'sidebarMenu', + alias: 'Umb.SidebarMenu.Templating', + name: 'Settings Sidebar Menu', + weight: 100, + meta: { + label: 'Templating', + sections: ['Umb.Section.Settings'], + }, +}; + +export const manifests = [sidebarMenu]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/manifests.ts index 8785234af7..202143e1b5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/manifests.ts @@ -9,8 +9,8 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Templates', icon: 'umb:folder', - sections: ['Umb.Section.Settings'], entityType: 'template', + sidebarMenus: ['Umb.SidebarMenu.Templating'], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/sidebar-menu-item/manifests.ts index 214391bf88..68a080417a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/sidebar-menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/sidebar-menu-item/manifests.ts @@ -9,8 +9,8 @@ const sidebarMenuItem: ManifestSidebarMenuItem = { meta: { label: 'Dictionary', icon: 'umb:book-alt', - sections: ['Umb.Section.Translation'], - entityType: 'dictionary-item' + entityType: 'dictionary-item', + sidebarMenus: ['Umb.SidebarMenu.Translation'], }, }; diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json index 66c0ca3399..0d7a68995c 100644 --- a/src/Umbraco.Web.UI.Client/tsconfig.json +++ b/src/Umbraco.Web.UI.Client/tsconfig.json @@ -31,6 +31,7 @@ "@umbraco-cms/extensions-registry": ["libs/extensions-registry"], "@umbraco-cms/notification": ["libs/notification"], "@umbraco-cms/observable-api": ["libs/observable-api"], + "@umbraco-cms/events": ["libs/events"], "@umbraco-cms/utils": ["libs/utils"], "@umbraco-cms/router": ["libs/router"], "@umbraco-cms/test-utils": ["libs/test-utils"], diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs index 99d35b045e..e053faf97a 100644 --- a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs +++ b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs @@ -11,7 +11,7 @@ export default { nodeResolve: true, files: ['src/**/*.test.ts', 'libs/**/*.test.ts'], mimeTypes: { - './public/**/*': 'js' + './public/**/*': 'js', }, plugins: [ { @@ -28,7 +28,7 @@ export default { if (context.path.startsWith('/umbraco/management/api')) { return ''; } - } + }, }, // Serve images from the public folder as JS modules url({ include: ['public/**/*'] }), @@ -48,21 +48,19 @@ export default { '@umbraco-cms/extensions-registry': './libs/extensions-registry/index.ts', '@umbraco-cms/notification': './libs/notification/index.ts', '@umbraco-cms/observable-api': './libs/observable-api/index.ts', + '@umbraco-cms/events': './libs/events/index.ts', '@umbraco-cms/store': './libs/store/index.ts', '@umbraco-cms/utils': './libs/utils/index.ts', '@umbraco-cms/test-utils': './libs/test-utils/index.ts', '@umbraco-cms/resources': './libs/resources/index.ts', - "@umbraco-cms/repository": './libs/repository', - '@umbraco-cms/router': './libs/router/index.ts' + '@umbraco-cms/repository': './libs/repository', + '@umbraco-cms/router': './libs/router/index.ts', }, }, }, }), ], - browsers: [ - playwrightLauncher({ product: 'firefox' }), - playwrightLauncher({ product: 'webkit' }), - ], + browsers: [playwrightLauncher({ product: 'firefox' }), playwrightLauncher({ product: 'webkit' })], coverageConfig: { reporters: ['lcovonly', 'text-summary'], },