feat(edit-content): update command bar to show all workflow actions

[adrianjm-dotCMS]

Summary

Closes #35034 and #31321

• Replaces the split-button pattern in dot-workflow-actions with individual inline buttons, making all workflow actions discoverable
• First action (rightmost): default solid button — second: outlined — third: text; actions beyond 3 collapse into an overflow popup menu (p-menu with appendTo="body")
• SEPARATOR actions are filtered out automatically
• Removed groupActions and SplitButton — component is now purely computed-signal driven

IMAGES

BEFORE

NOW

Test plan

• Verify workflow actions render as individual buttons (not hidden in a split button)
• Verify first action is primary, second outlined, third text
• Verify overflow menu appears when there are more than 3 actions
• Verify clicking overflow menu items fires the correct action
• Verify SEPARATOR actions are not rendered
• Verify loading spinner appears only on the primary button
• Verify disabled state disables all buttons

In this PR we are also closing the bug with long workflows names

[claude]

Claude finished @adrianjm-dotCMS's task in 2m 27s —— View job

---

PR Review

• Read changed files
• Analyze component logic
• Analyze template
• Analyze tests
• Post review

---

4 issues worth fixing, 1 advisory.

---

1. getVariant() returns null — comment and type are both wrong

dot-workflow-actions.component.ts:151

protected getVariant(index: number): 'outlined' | null {
    if (index > 0) return 'outlined';
    return null;
}

The JSDoc says "Angular drops null bindings entirely". This is only true for host element attribute bindings ([attr.foo]). [variant]="getVariant(idx)" is a component property binding — Angular passes null through to PrimeNG's Button input directly. Whether PrimeNG treats null identically to "no variant" is an implementation detail you're relying on without testing. Return undefined and update the return type:

protected getVariant(index: number): 'outlined' | undefined {
    return index > 0 ? 'outlined' : undefined;
}

Fix this →

---

2. Breakpoints.Large is not observed — dead code with silent breakage risk

dot-workflow-actions.component.ts:65-73

this.#breakpointObserver
    .observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium])
    .pipe(
        map(() => {
            if (this.#breakpointObserver.isMatched(Breakpoints.XSmall)) return 0;
            if (this.#breakpointObserver.isMatched(Breakpoints.Small))  return 1;
            if (this.#breakpointObserver.isMatched(Breakpoints.Medium)) return 2;
            if (this.#breakpointObserver.isMatched(Breakpoints.Large))  return 3; // ← never triggers a re-emission
            return MAX_INLINE_ACTIONS; // ← also 3
        })
    )

Large is never in the observe() call, so a change from Medium → Large does fire an observable emission (Medium deactivates), but the isMatched(Large) branch on line 71 is always shadowed by the fallback. The Large branch is dead code today because MAX_INLINE_ACTIONS === 3. But if MAX_INLINE_ACTIONS is ever bumped (e.g., to 4 for wider screens), the Large cap would silently misbehave. Either add Breakpoints.Large to observe(), or remove the isMatched(Large) check and document the fallback is intentional.

Fix this →

---

3. No loading feedback when #inlineCap === 0 (XSmall viewport)

dot-workflow-actions.component.html:9-19

On XSmall screens, $visibleActions() is empty — all actions go to overflow. The overflow button is disabled when loading() is true, so the user can't click anything, but there is no spinner. The loading state is invisible. This is a real UX gap for mobile users.

The empty-state button (rendered when there are no actions at all) does show a spinner. The same treatment should apply when #inlineCap === 0 and actions exist.

Fix this →

---

4. flex-row-reverse breaks keyboard tab order (accessibility)

dot-workflow-actions.component.ts:49 (already flagged by Copilot — endorsing it)

flex-row-reverse reverses the visual layout without changing the DOM order. Tab navigation follows DOM order, so keyboard users will tab from the leftmost visible element to the rightmost, while the visual order goes right-to-left. This is a WCAG focus order failure (SC 2.4.3). Copilot's suggested fix (flex-row justify-end) is correct: render elements in the template in primary→secondary→overflow left-to-right order and use justify-end to right-align the group.

---

5. getButtonSize() called per button per change detection cycle (advisory)

dot-workflow-actions.component.ts:137

With up to 4 buttons, getButtonSize() is a plain method called 4 times per cycle. It reads the size signal each time. Promote it to a protected readonly $buttonSize = computed(...) and bind [size]="$buttonSize()" in the template. Not a correctness issue, but inconsistent with the rest of the component's computed-signal approach.

---

The test coverage is solid. The e2e save() rewrite correctly handles strict-mode ambiguity from multiple visible buttons. No functional bugs in the overflow routing or SEPARATOR filtering.

[Copilot]

Pull request overview

Updates the edit-content command bar workflow actions UI to make actions more discoverable by replacing the split-button approach with inline buttons plus an overflow menu, aligning with issue #35034’s UX goals.

Changes:

• Replaced SplitButton grouping with up to 3 inline workflow action buttons and a p-menu overflow for additional actions.
• Filtered out SEPARATOR workflow actions prior to rendering.
• Updated unit tests to cover inline rendering, overflow behavior, loading/disabled states, and sizing.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
core-web/libs/ui/src/lib/components/dot-workflow-actions/dot-workflow-actions.component.ts	Reworks component logic to computed-signal driven inline/overflow rendering; removes split-button/grouping logic.
core-web/libs/ui/src/lib/components/dot-workflow-actions/dot-workflow-actions.component.html	Implements empty state + inline buttons + overflow menu toggle UI.
core-web/libs/ui/src/lib/components/dot-workflow-actions/dot-workflow-actions.component.spec.ts	Replaces split-button tests with coverage for inline/overflow/variants/loading/disabled/size.
core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html	Removes the now-deleted groupActions input usage when rendering <dot-workflow-actions>.

[nicobytes]

🎉