Skip to content

Commit 109cf92

Browse files
iOvergaardiOvergaard
committed
fix: show the action button inside a button-group only if there are extensions registered
by moving the calculation of the extension controllers from the action-menu element into the action element itself, we can save a few states, simplify the calculation, and conditionally render the action-menu element ensuring, that the UUI styling is correctly applied
1 parent b6da548 commit 109cf92

File tree

2 files changed

+87
-101
lines changed

2 files changed

+87
-101
lines changed

‎src/packages/core/workspace/components/workspace-action-menu/workspace-action-menu.element.ts

Lines changed: 11 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,24 @@
1-
import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
21
import { css, html, customElement, property, state, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
32
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
4-
import {
5-
umbExtensionsRegistry,
6-
type ManifestWorkspaceActionMenuItem,
7-
} from '@umbraco-cms/backoffice/extension-registry';
3+
import type { ManifestWorkspaceActionMenuItem } from '@umbraco-cms/backoffice/extension-registry';
84
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
95
import type { UUIInterfaceColor, UUIInterfaceLook } from '@umbraco-cms/backoffice/external/uui';
10-
import {
11-
type UmbExtensionElementAndApiInitializer,
12-
UmbExtensionsElementAndApiInitializer,
13-
} from '@umbraco-cms/backoffice/extension-api';
6+
import type { UmbExtensionElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
147

15-
function ExtensionApiArgsMethod(manifest: ManifestWorkspaceActionMenuItem) {
16-
return [{ meta: manifest.meta }];
17-
}
188
@customElement('umb-workspace-action-menu')
199
export class UmbWorkspaceActionMenuElement extends UmbLitElement {
20-
#extensionsController?: UmbExtensionsElementAndApiInitializer<
21-
ManifestWorkspaceActionMenuItem,
22-
'workspaceActionMenuItem',
23-
ManifestWorkspaceActionMenuItem
24-
>;
25-
26-
/**
27-
* The workspace actions to filter the available actions by.
28-
* @example ['Umb.WorkspaceAction.Document.Save', 'Umb.WorkspaceAction.Document.SaveAndPublishNew']
29-
*/
30-
@property({ attribute: false })
31-
public set forWorkspaceActions(value: Array<string>) {
32-
if (value === this._forWorkspaceActions) return;
33-
this._forWorkspaceActions = value;
34-
this._filter = (action) => {
35-
return Array.isArray(action.forWorkspaceActions)
36-
? action.forWorkspaceActions.some((alias) => this.forWorkspaceActions.includes(alias))
37-
: this.forWorkspaceActions.includes(action.forWorkspaceActions);
38-
};
39-
this.#observeExtensions();
40-
}
41-
public get forWorkspaceActions(): Array<string> {
42-
return this._forWorkspaceActions;
43-
}
44-
private _forWorkspaceActions: Array<string> = [];
45-
46-
@state()
47-
_filter?: (action: ManifestWorkspaceActionMenuItem) => boolean;
48-
4910
@property()
5011
look: UUIInterfaceLook = 'secondary';
5112

5213
@property()
5314
color: UUIInterfaceColor = 'default';
5415

55-
@state()
56-
_items: Array<UmbExtensionElementAndApiInitializer<ManifestWorkspaceActionMenuItem>> = [];
16+
@property({ type: Array, attribute: false })
17+
items: Array<UmbExtensionElementAndApiInitializer<ManifestWorkspaceActionMenuItem>> = [];
5718

5819
@state()
5920
_popoverOpen = false;
6021

61-
#observeExtensions(): void {
62-
this.#extensionsController?.destroy();
63-
if (this._filter) {
64-
this.#extensionsController = new UmbExtensionsElementAndApiInitializer<
65-
ManifestWorkspaceActionMenuItem,
66-
'workspaceActionMenuItem',
67-
ManifestWorkspaceActionMenuItem
68-
>(
69-
this,
70-
umbExtensionsRegistry,
71-
'workspaceActionMenuItem',
72-
ExtensionApiArgsMethod,
73-
this._filter,
74-
(extensionControllers) => {
75-
this._items = extensionControllers;
76-
},
77-
undefined, // We can leave the alias to undefined, as we destroy this our selfs.
78-
);
79-
//this.#extensionsController.elementProperties = this.#elProps;
80-
}
81-
}
82-
8322
#onPopoverToggle(event: ToggleEvent) {
8423
// TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
8524
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -88,7 +27,7 @@ export class UmbWorkspaceActionMenuElement extends UmbLitElement {
8827
}
8928

9029
override render() {
91-
return this._items && this._items.length > 0
30+
return this.items?.length
9231
? html`
9332
<uui-button
9433
id="popover-trigger"
@@ -106,21 +45,19 @@ export class UmbWorkspaceActionMenuElement extends UmbLitElement {
10645
@toggle=${this.#onPopoverToggle}>
10746
<umb-popover-layout>
10847
<uui-scroll-container>
109-
${this._items.length > 0
110-
? repeat(
111-
this._items,
112-
(ext) => ext.alias,
113-
(ext) => ext.component,
114-
)
115-
: ''}
48+
${repeat(
49+
this.items,
50+
(ext) => ext.alias,
51+
(ext) => ext.component,
52+
)}
11653
</uui-scroll-container>
11754
</umb-popover-layout>
11855
</uui-popover-container>
11956
`
12057
: nothing;
12158
}
12259

123-
static override styles: CSSResultGroup = [
60+
static override styles = [
12461
UmbTextStyles,
12562
css`
12663
:host {
@@ -143,7 +80,6 @@ export class UmbWorkspaceActionMenuElement extends UmbLitElement {
14380
#popover-trigger {
14481
--uui-button-padding-top-factor: 0.5;
14582
--uui-button-padding-bottom-factor: 0.1;
146-
--uui-button-border-radius: 0;
14783
}
14884
`,
14985
];

‎src/packages/core/workspace/components/workspace-action/default/workspace-action.element.ts

Lines changed: 76 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import type { UmbWorkspaceAction } from '../workspace-action.interface.js';
22
import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
3-
import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
3+
import { html, customElement, property, state, ifDefined, when } from '@umbraco-cms/backoffice/external/lit';
44
import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
55
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
6-
import type {
7-
ManifestWorkspaceAction,
8-
MetaWorkspaceActionDefaultKind,
6+
import {
7+
umbExtensionsRegistry,
8+
type ManifestWorkspaceAction,
9+
type ManifestWorkspaceActionMenuItem,
10+
type MetaWorkspaceActionDefaultKind,
911
} from '@umbraco-cms/backoffice/extension-registry';
12+
import {
13+
type UmbExtensionElementAndApiInitializer,
14+
UmbExtensionsElementAndApiInitializer,
15+
} from '@umbraco-cms/backoffice/extension-api';
1016

1117
import '../../workspace-action-menu/index.js';
1218

@@ -17,13 +23,15 @@ export class UmbWorkspaceActionElement<
1723
> extends UmbLitElement {
1824
#manifest?: ManifestWorkspaceAction<MetaType>;
1925
#api?: ApiType;
26+
#extensionsController?: UmbExtensionsElementAndApiInitializer<
27+
ManifestWorkspaceActionMenuItem,
28+
'workspaceActionMenuItem',
29+
ManifestWorkspaceActionMenuItem
30+
>;
2031

2132
@state()
2233
private _buttonState?: UUIButtonState;
2334

24-
@state()
25-
private _aliases: Array<string> = [];
26-
2735
@state()
2836
_href?: string;
2937

@@ -60,6 +68,9 @@ export class UmbWorkspaceActionElement<
6068
return this.#api;
6169
}
6270

71+
@state()
72+
private _items: Array<UmbExtensionElementAndApiInitializer<ManifestWorkspaceActionMenuItem>> = [];
73+
6374
/**
6475
* Create a list of original and overwritten aliases of workspace actions for the action.
6576
*/
@@ -77,7 +88,8 @@ export class UmbWorkspaceActionElement<
7788
}
7889
}
7990
}
80-
this._aliases = Array.from(aliases);
91+
92+
this.#observeExtensions(Array.from(aliases));
8193
}
8294

8395
private async _onClick(event: MouseEvent) {
@@ -108,27 +120,61 @@ export class UmbWorkspaceActionElement<
108120
);
109121
}
110122

111-
override render() {
123+
#observeExtensions(aliases: string[]): void {
124+
this.#extensionsController?.destroy();
125+
this.#extensionsController = new UmbExtensionsElementAndApiInitializer<
126+
ManifestWorkspaceActionMenuItem,
127+
'workspaceActionMenuItem',
128+
ManifestWorkspaceActionMenuItem
129+
>(
130+
this,
131+
umbExtensionsRegistry,
132+
'workspaceActionMenuItem',
133+
ExtensionApiArgsMethod,
134+
(action) => {
135+
return Array.isArray(action.forWorkspaceActions)
136+
? action.forWorkspaceActions.some((alias) => aliases.includes(alias))
137+
: aliases.includes(action.forWorkspaceActions);
138+
},
139+
(extensionControllers) => {
140+
this._items = extensionControllers;
141+
},
142+
undefined, // We can leave the alias to undefined, as we destroy this our selfs.
143+
);
144+
}
145+
146+
#renderButton() {
112147
return html`
113-
<uui-button-group>
114-
<uui-button
115-
id="action-button"
116-
.href=${this._href}
117-
@click=${this._onClick}
118-
look=${this.#manifest?.meta.look || 'default'}
119-
color=${this.#manifest?.meta.color || 'default'}
120-
label=${ifDefined(
121-
this.#manifest?.meta.label ? this.localize.string(this.#manifest.meta.label) : this.#manifest?.name,
122-
)}
123-
.disabled=${this._isDisabled}
124-
.state=${this._buttonState}></uui-button>
125-
<umb-workspace-action-menu
126-
.forWorkspaceActions=${this._aliases}
127-
color="${this.#manifest?.meta.color || 'default'}"
128-
look="${this.#manifest?.meta.look || 'default'}"></umb-workspace-action-menu>
129-
</uui-button-group>
148+
<uui-button
149+
id="action-button"
150+
.href=${this._href}
151+
@click=${this._onClick}
152+
look=${this.#manifest?.meta.look || 'default'}
153+
color=${this.#manifest?.meta.color || 'default'}
154+
label=${ifDefined(
155+
this.#manifest?.meta.label ? this.localize.string(this.#manifest.meta.label) : this.#manifest?.name,
156+
)}
157+
.disabled=${this._isDisabled}
158+
.state=${this._buttonState}></uui-button>
130159
`;
131160
}
161+
162+
#renderActionMenu() {
163+
return html`
164+
<umb-workspace-action-menu
165+
.items=${this._items}
166+
color="${this.#manifest?.meta.color || 'default'}"
167+
look="${this.#manifest?.meta.look || 'default'}"></umb-workspace-action-menu>
168+
`;
169+
}
170+
171+
override render() {
172+
return when(
173+
this._items.length,
174+
() => html` <uui-button-group> ${this.#renderButton()} ${this.#renderActionMenu()} </uui-button-group> `,
175+
() => this.#renderButton(),
176+
);
177+
}
132178
}
133179

134180
export default UmbWorkspaceActionElement;
@@ -138,3 +184,7 @@ declare global {
138184
'umb-workspace-action': UmbWorkspaceActionElement;
139185
}
140186
}
187+
188+
function ExtensionApiArgsMethod(manifest: ManifestWorkspaceActionMenuItem) {
189+
return [{ meta: manifest.meta }];
190+
}

0 commit comments

Comments
 (0)