diff --git a/src/packages/core/entity-action/entity-action.element.ts b/src/packages/core/entity-action/entity-action.element.ts index 14cab2580b..f08dd18cd3 100644 --- a/src/packages/core/entity-action/entity-action.element.ts +++ b/src/packages/core/entity-action/entity-action.element.ts @@ -7,58 +7,61 @@ import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api'; @customElement('umb-entity-action') export class UmbEntityActionElement extends UmbLitElement { - private _entityType?: string | null; + #entityType?: string | null; + @property({ type: String }) - public get entityType() { - return this._entityType; - } public set entityType(value: string | undefined | null) { - const oldValue = this._entityType; - this._entityType = value; - if (oldValue !== this._entityType) { + const oldValue = this.#entityType; + this.#entityType = value; + if (oldValue !== this.#entityType) { this.#createApi(); this.requestUpdate('entityType', oldValue); } } + public get entityType() { + return this.#entityType; + } + + #unique?: string | null; - private _unique?: string | null; @property({ type: String }) - public get unique() { - return this._unique; - } public set unique(value: string | undefined | null) { - const oldValue = this._unique; - this._unique = value; - if (oldValue !== this._unique) { + const oldValue = this.#unique; + this.#unique = value; + if (oldValue !== this.#unique) { this.#createApi(); this.requestUpdate('unique', oldValue); } } + public get unique() { + return this.#unique; + } + + #manifest?: ManifestEntityAction; - private _manifest?: ManifestEntityAction; @property({ type: Object, attribute: false }) - public get manifest() { - return this._manifest; - } public set manifest(value: ManifestEntityAction | undefined) { if (!value) return; - const oldValue = this._manifest; - this._manifest = value; - if (oldValue !== this._manifest) { + const oldValue = this.#manifest; + this.#manifest = value; + if (oldValue !== this.#manifest) { this.#createApi(); this.requestUpdate('manifest', oldValue); } } + public get manifest() { + return this.#manifest; + } async #createApi() { // only create the api if we have all the required properties - if (!this._manifest) return; - if (this._unique === undefined) return; - if (!this._entityType) return; + if (!this.#manifest) return; + if (this.#unique === undefined) return; + if (!this.#entityType) return; - this.#api = await createExtensionApi(this._manifest, [ + this.#api = await createExtensionApi(this.#manifest, [ this, - this._manifest.meta.repositoryAlias, + this.#manifest.meta.repositoryAlias, this.unique, this.entityType, ]); @@ -89,12 +92,12 @@ export class UmbEntityActionElement extends UmbLitElement { render() { return html` - ${this._manifest?.meta.icon - ? html`` + ${this.manifest?.meta.icon + ? html`` : nothing} `; diff --git a/src/packages/core/extension-registry/models/index.ts b/src/packages/core/extension-registry/models/index.ts index d8dcd66155..0a838b3cae 100644 --- a/src/packages/core/extension-registry/models/index.ts +++ b/src/packages/core/extension-registry/models/index.ts @@ -29,6 +29,7 @@ import type { ManifestTreeItem } from './tree-item.model.js'; import type { ManifestUserProfileApp } from './user-profile-app.model.js'; import type { ManifestWorkspace } from './workspace.model.js'; import type { ManifestWorkspaceAction } from './workspace-action.model.js'; +import type { ManifestWorkspaceActionMenuItem } from './workspace-action-menu-item.model.js'; import type { ManifestWorkspaceContext } from './workspace-context.model.js'; import type { ManifestWorkspaceFooterApp } from './workspace-footer-app.model.js'; import type { ManifestWorkspaceView } from './workspace-view.model.js'; @@ -75,6 +76,7 @@ export type * from './user-granular-permission.model.js'; export type * from './entity-user-permission.model.js'; export type * from './user-profile-app.model.js'; export type * from './workspace-action.model.js'; +export type * from './workspace-action-menu-item.model.js'; export type * from './workspace-context.model.js'; export type * from './workspace-footer-app.model.js'; export type * from './workspace-view.model.js'; @@ -123,6 +125,7 @@ export type ManifestTypes = | ManifestUserProfileApp | ManifestWorkspace | ManifestWorkspaceAction + | ManifestWorkspaceActionMenuItem | ManifestWorkspaceContext | ManifestWorkspaceFooterApp | ManifestWorkspaceView diff --git a/src/packages/core/extension-registry/models/workspace-action-menu-item.model.ts b/src/packages/core/extension-registry/models/workspace-action-menu-item.model.ts new file mode 100644 index 0000000000..4aa049ba94 --- /dev/null +++ b/src/packages/core/extension-registry/models/workspace-action-menu-item.model.ts @@ -0,0 +1,23 @@ +import type { ConditionTypes } from '../conditions/types.js'; +import type { MetaEntityAction } from './entity-action.model.js'; +import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api'; +import type { UmbWorkspaceAction } from '@umbraco-cms/backoffice/workspace'; + +export interface ManifestWorkspaceActionMenuItem + extends ManifestElementAndApi, + ManifestWithDynamicConditions { + type: 'workspaceActionMenuItem'; + meta: MetaWorkspaceActionMenuItem; +} + +export interface MetaWorkspaceActionMenuItem extends MetaEntityAction { + /** + * Define which workspace actions this menu item should be shown for. + * @examples [ + * ['Umb.WorkspaceAction.Document.Save', 'Umb.WorkspaceAction.Document.SaveAndPublish'], + * "Umb.WorkspaceAction.Document.Save" + * ] + * @required + */ + workspaceActions: string | string[]; +} diff --git a/src/packages/core/property-action/shared/property-action-menu/property-action-menu.element.ts b/src/packages/core/property-action/shared/property-action-menu/property-action-menu.element.ts index b8af412389..7aeeafff2b 100644 --- a/src/packages/core/property-action/shared/property-action-menu/property-action-menu.element.ts +++ b/src/packages/core/property-action/shared/property-action-menu/property-action-menu.element.ts @@ -10,22 +10,20 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-property-action-menu') export class UmbPropertyActionMenuElement extends UmbLitElement { #actionsInitializer?: UmbExtensionsElementInitializer; + #value: unknown; + #propertyEditorUiAlias = ''; @property({ attribute: false }) public set value(value: unknown) { - this._value = value; + this.#value = value; if (this.#actionsInitializer) { this.#actionsInitializer.properties = { value }; } } public get value(): unknown { - return this._value; + return this.#value; } - private _value?: unknown; - - #propertyEditorUiAlias = ''; - @property() set propertyEditorUiAlias(alias: string) { this.#propertyEditorUiAlias = alias; @@ -47,7 +45,7 @@ export class UmbPropertyActionMenuElement extends UmbLitElement { } @state() - private _actions: Array> = []; + private _actions: Array> = []; render() { return this._actions.length > 0 diff --git a/src/packages/core/workspace/components/workspace-action/common/index.ts b/src/packages/core/workspace/components/workspace-action/common/index.ts index b21a44dbd5..54f738af58 100644 --- a/src/packages/core/workspace/components/workspace-action/common/index.ts +++ b/src/packages/core/workspace/components/workspace-action/common/index.ts @@ -1 +1,2 @@ export * from './save/index.js'; +export * from './workspace-action-base.js'; diff --git a/src/packages/core/workspace/components/workspace-action/common/save/save.action.ts b/src/packages/core/workspace/components/workspace-action/common/save/save.action.ts index 92c9403325..297fde6f7d 100644 --- a/src/packages/core/workspace/components/workspace-action/common/save/save.action.ts +++ b/src/packages/core/workspace/components/workspace-action/common/save/save.action.ts @@ -1,5 +1,5 @@ import type { UmbSaveableWorkspaceContextInterface } from '../../../../workspace-context/saveable-workspace-context.interface.js'; -import { UmbWorkspaceActionBase } from '../../workspace-action-base.js'; +import { UmbWorkspaceActionBase } from '../workspace-action-base.js'; import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; // TODO: add interface for repo/partial repo/save-repo diff --git a/src/packages/core/workspace/components/workspace-action/workspace-action-base.ts b/src/packages/core/workspace/components/workspace-action/common/workspace-action-base.ts similarity index 86% rename from src/packages/core/workspace/components/workspace-action/workspace-action-base.ts rename to src/packages/core/workspace/components/workspace-action/common/workspace-action-base.ts index e127a95512..5963d28f27 100644 --- a/src/packages/core/workspace/components/workspace-action/workspace-action-base.ts +++ b/src/packages/core/workspace/components/workspace-action/common/workspace-action-base.ts @@ -1,5 +1,5 @@ -import type { UmbWorkspaceContextInterface } from '../../workspace-context/index.js'; -import { UMB_WORKSPACE_CONTEXT } from '../../workspace-context/index.js'; +import type { UmbWorkspaceContextInterface } from '../../../workspace-context/index.js'; +import { UMB_WORKSPACE_CONTEXT } from '../../../workspace-context/index.js'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbApi } from '@umbraco-cms/backoffice/extension-api'; diff --git a/src/packages/core/workspace/components/workspace-action/index.ts b/src/packages/core/workspace/components/workspace-action/index.ts index 54ce45d8a0..591ece3cc3 100644 --- a/src/packages/core/workspace/components/workspace-action/index.ts +++ b/src/packages/core/workspace/components/workspace-action/index.ts @@ -1,3 +1,2 @@ -export * from './workspace-action-base.js'; -export * from './workspace-action.element.js'; +export * from './shared/index.js'; export * from './common/index.js'; diff --git a/src/packages/core/workspace/components/workspace-action/shared/index.ts b/src/packages/core/workspace/components/workspace-action/shared/index.ts new file mode 100644 index 0000000000..e4c8c546f4 --- /dev/null +++ b/src/packages/core/workspace/components/workspace-action/shared/index.ts @@ -0,0 +1,2 @@ +export * from './workspace-action/index.js'; +export * from './workspace-action-menu/index.js'; diff --git a/src/packages/core/workspace/components/workspace-action/shared/workspace-action-menu/index.ts b/src/packages/core/workspace/components/workspace-action/shared/workspace-action-menu/index.ts new file mode 100644 index 0000000000..02d1af5c38 --- /dev/null +++ b/src/packages/core/workspace/components/workspace-action/shared/workspace-action-menu/index.ts @@ -0,0 +1 @@ +export * from './workspace-action-menu.element.js'; diff --git a/src/packages/core/workspace/components/workspace-action/shared/workspace-action-menu/workspace-action-menu.element.ts b/src/packages/core/workspace/components/workspace-action/shared/workspace-action-menu/workspace-action-menu.element.ts new file mode 100644 index 0000000000..f8da450e24 --- /dev/null +++ b/src/packages/core/workspace/components/workspace-action/shared/workspace-action-menu/workspace-action-menu.element.ts @@ -0,0 +1,144 @@ +import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import type { ManifestTypes, ManifestWorkspaceActionMenuItem } from '@umbraco-cms/backoffice/extension-registry'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api'; +import { UmbExtensionsElementInitializer } from '@umbraco-cms/backoffice/extension-api'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; +import type { UUIInterfaceColor, UUIInterfaceLook } from '@umbraco-cms/backoffice/external/uui'; + +@customElement('umb-workspace-action-menu') +export class UmbWorkspaceActionMenuElement extends UmbLitElement { + #workspaceContext?: typeof UMB_WORKSPACE_CONTEXT.TYPE; + #actionsInitializer?: UmbExtensionsElementInitializer; + + /** + * The workspace actions to filter the available actions by. + * @example ['Umb.WorkspaceAction.Document.Save', 'Umb.WorkspaceAction.Document.SaveAndPublishNew'] + */ + @property({ type: Array }) + workspaceActions: Array = []; + + @property() + look: UUIInterfaceLook = 'secondary'; + + @property() + color: UUIInterfaceColor = 'default'; + + @state() + private _actions: Array> = []; + + @state() + _popoverOpen = false; + + constructor() { + super(); + + this.consumeContext(UMB_WORKSPACE_CONTEXT, (context) => { + this.#workspaceContext = context; + this.#initialise(); + }); + } + + #initialise() { + if (!this.#workspaceContext) throw new Error('No workspace context'); + + // If there are no workspace action aliases, then there is no need to initialize the actions. + if (!this.workspaceActions.length) return; + + const unique = this.#workspaceContext.getUnique(); + const entityType = this.#workspaceContext.getEntityType(); + + this.#actionsInitializer = new UmbExtensionsElementInitializer( + this, + umbExtensionsRegistry, + 'workspaceActionMenuItem', // TODO: Stop using string for 'workspaceActionMenuItem', we need to start using Const. + (action) => { + const containsAlias = Array.isArray(action.meta.workspaceActions) + ? action.meta.workspaceActions + : [action.meta.workspaceActions].some((alias) => this.workspaceActions.includes(alias)); + const isValidEntityType = !action.meta.entityTypes.length || action.meta.entityTypes.includes(entityType); + return containsAlias && isValidEntityType; + }, + (ctrls) => { + this._actions = ctrls; + }, + 'workspaceActionExtensionsInitializer', + 'umb-entity-action', + ); + + this.#actionsInitializer.properties = { unique, entityType }; + } + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + #onPopoverToggle(event: ToggleEvent) { + this._popoverOpen = event.newState === 'open'; + } + + render() { + return this._actions.length > 0 + ? html` + + + + + + + ${repeat( + this._actions, + (action) => action.alias, + (action) => action.component, + )} + + + + ` + : nothing; + } + + static styles: CSSResultGroup = [ + UmbTextStyles, + css` + :host { + --uui-menu-item-flat-structure: 1; + } + + #expand-symbol { + transform: rotate(-90deg); + } + + #expand-symbol[open] { + transform: rotate(0deg); + } + + #workspace-action-popover { + min-width: 200px; + } + + #popover-trigger { + --uui-button-padding-top-factor: 0.5; + --uui-button-padding-bottom-factor: 0.1; + --uui-button-border-radius: 0; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-workspace-action-menu': UmbWorkspaceActionMenuElement; + } +} diff --git a/src/packages/core/workspace/components/workspace-action/shared/workspace-action/index.ts b/src/packages/core/workspace/components/workspace-action/shared/workspace-action/index.ts new file mode 100644 index 0000000000..24b7e3dc14 --- /dev/null +++ b/src/packages/core/workspace/components/workspace-action/shared/workspace-action/index.ts @@ -0,0 +1 @@ +export * from './workspace-action.element.js'; diff --git a/src/packages/core/workspace/components/workspace-action/shared/workspace-action/workspace-action.element.ts b/src/packages/core/workspace/components/workspace-action/shared/workspace-action/workspace-action.element.ts new file mode 100644 index 0000000000..d21e502781 --- /dev/null +++ b/src/packages/core/workspace/components/workspace-action/shared/workspace-action/workspace-action.element.ts @@ -0,0 +1,102 @@ +import type { UmbWorkspaceAction } from '../../../../index.js'; +import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event'; +import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { ManifestWorkspaceAction } from '@umbraco-cms/backoffice/extension-registry'; +import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api'; + +import '../workspace-action-menu/index.js'; + +@customElement('umb-workspace-action') +export class UmbWorkspaceActionElement extends UmbLitElement { + #manifest?: ManifestWorkspaceAction; + + @state() + private _buttonState?: UUIButtonState; + + @state() + private _aliases: Array = []; + + @property({ type: Object, attribute: false }) + public get manifest() { + return this.#manifest; + } + public set manifest(value: ManifestWorkspaceAction | undefined) { + if (!value) return; + const oldValue = this.#manifest; + this.#manifest = value; + if (oldValue !== this.#manifest) { + this.#createApi(); + this.#createAliases(); + this.requestUpdate('manifest', oldValue); + } + } + + async #createApi() { + if (!this.manifest) return; + this.#api = await createExtensionApi(this.manifest, [this]); + } + + /** + * Create a list of original and overwritten aliases of workspace actions for the action. + */ + async #createAliases() { + if (!this.manifest) return; + const aliases = new Set(); + if (this.manifest) { + aliases.add(this.manifest.alias); + + // TODO: This works on one level for now, which will be enough for the current use case. However, you can overwrite the overwrites, so we need to make this recursive. Perhaps we could move this to the extensions initializer. + // Add overwrites so that we can show any previously registered actions on the original workspace action + if (this.manifest.overwrites) { + for (const alias of this.manifest.overwrites) { + aliases.add(alias); + } + } + } + this._aliases = Array.from(aliases); + } + + #api?: UmbWorkspaceAction; + + private async _onClick() { + this._buttonState = 'waiting'; + + try { + if (!this.#api) throw new Error('No api defined'); + await this.#api.execute(); + this._buttonState = 'success'; + } catch (error) { + this._buttonState = 'failed'; + } + + this.dispatchEvent(new UmbActionExecutedEvent()); + } + + render() { + return html` + + + + + `; + } +} + +export default UmbWorkspaceActionElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-workspace-action': UmbWorkspaceActionElement; + } +} diff --git a/src/packages/core/workspace/components/workspace-action/workspace-action.element.ts b/src/packages/core/workspace/components/workspace-action/workspace-action.element.ts deleted file mode 100644 index cc3719ddf4..0000000000 --- a/src/packages/core/workspace/components/workspace-action/workspace-action.element.ts +++ /dev/null @@ -1,69 +0,0 @@ -import type { UmbWorkspaceAction } from './index.js'; -import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event'; -import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { ManifestWorkspaceAction } from '@umbraco-cms/backoffice/extension-registry'; -import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api'; - -@customElement('umb-workspace-action') -export class UmbWorkspaceActionElement extends UmbLitElement { - @state() - private _buttonState?: UUIButtonState; - - private _manifest?: ManifestWorkspaceAction; - @property({ type: Object, attribute: false }) - public get manifest() { - return this._manifest; - } - public set manifest(value: ManifestWorkspaceAction | undefined) { - if (!value) return; - const oldValue = this._manifest; - this._manifest = value; - if (oldValue !== this._manifest) { - this.#createApi(); - this.requestUpdate('manifest', oldValue); - } - } - - async #createApi() { - if (!this._manifest) return; - this.#api = await createExtensionApi(this._manifest, [this]); - } - - #api?: UmbWorkspaceAction; - - private async _onClick() { - this._buttonState = 'waiting'; - - try { - if (!this.#api) throw new Error('No api defined'); - await this.#api.execute(); - this._buttonState = 'success'; - } catch (error) { - this._buttonState = 'failed'; - } - - this.dispatchEvent(new UmbActionExecutedEvent()); - } - - render() { - return html` - - `; - } -} - -export default UmbWorkspaceActionElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-workspace-action': UmbWorkspaceActionElement; - } -} diff --git a/src/packages/documents/documents/workspace/manifests.ts b/src/packages/documents/documents/workspace/manifests.ts index 12cce5ec44..09113b68a7 100644 --- a/src/packages/documents/documents/workspace/manifests.ts +++ b/src/packages/documents/documents/workspace/manifests.ts @@ -1,5 +1,6 @@ import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js'; import { UMB_DOCUMENT_WORKSPACE_HAS_COLLECTION_CONDITION } from '../conditions/document-workspace-has-collection.condition.js'; +import { UmbUnpublishDocumentEntityAction } from '../entity-actions/unpublish.action.js'; import { UmbDocumentSaveAndPublishWorkspaceAction } from './actions/save-and-publish.action.js'; //import { UmbDocumentSaveAndPreviewWorkspaceAction } from './actions/save-and-preview.action.js'; //import { UmbSaveAndScheduleDocumentWorkspaceAction } from './actions/save-and-schedule.action.js'; @@ -7,8 +8,10 @@ import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace'; import type { ManifestWorkspace, ManifestWorkspaceAction, + ManifestWorkspaceActionMenuItem, ManifestWorkspaceView, } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbPublishDocumentEntityAction } from '../entity-actions/publish.action.js'; export const UMB_DOCUMENT_WORKSPACE_ALIAS = 'Umb.Workspace.Document'; @@ -152,4 +155,49 @@ const workspaceActions: Array = [ */ ]; -export const manifests = [workspace, ...workspaceViews, ...workspaceActions]; +const workspaceActionMenuItems: Array = [ + { + type: 'workspaceActionMenuItem', + alias: 'Umb.Document.WorkspaceActionMenuItem.Unpublish', + name: 'Unpublish', + weight: 10, + api: UmbUnpublishDocumentEntityAction, + meta: { + workspaceActions: 'Umb.WorkspaceAction.Document.SaveAndPublish', + label: 'Unpublish', + icon: 'icon-globe', + repositoryAlias: 'Umb.Repository.Document.Detail', + entityTypes: [UMB_DOCUMENT_ENTITY_TYPE], + }, + }, + { + type: 'workspaceActionMenuItem', + alias: 'Umb.Document.WorkspaceActionMenuItem.PublishWithDescendants', + name: 'Publish with descendants', + weight: 20, + api: UmbPublishDocumentEntityAction, + meta: { + workspaceActions: 'Umb.WorkspaceAction.Document.SaveAndPublish', + label: 'Publish with descendants (TBD)', + icon: 'icon-globe', + repositoryAlias: 'Umb.Repository.Document.Detail', + entityTypes: [UMB_DOCUMENT_ENTITY_TYPE], + }, + }, + { + type: 'workspaceActionMenuItem', + alias: 'Umb.Document.WorkspaceActionMenuItem.SchedulePublishing', + name: 'Schedule publishing', + weight: 20, + api: UmbPublishDocumentEntityAction, + meta: { + workspaceActions: 'Umb.WorkspaceAction.Document.SaveAndPublish', + label: 'Schedule publishing (TBD)', + icon: 'icon-globe', + repositoryAlias: 'Umb.Repository.Document.Detail', + entityTypes: [UMB_DOCUMENT_ENTITY_TYPE], + }, + }, +]; + +export const manifests = [workspace, ...workspaceViews, ...workspaceActions, ...workspaceActionMenuItems];