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

This PR fixes: #35034

[claude]

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

---

Code Review

• Read changed files
• Analyze component logic
• Review template and accessibility
• Review tests
• Post findings

---

Issues Found

1. flex-row-reverse breaks visual order when overflow is present — logic bug

dot-workflow-actions.component.ts:48

DOM order in the template is: [overflow-button, action[0], action[1], action[2]]. With flex-row-reverse, the visual order reverses to [action[2], action[1], action[0], overflow-button]. This means:

• Without overflow: primary action (action[0]) is rightmost ✓
• With overflow: the ··· overflow button becomes rightmost; primary action shifts one place left ✗

The JSDoc says "1st action (rightmost)" but this is only true in the no-overflow case. The PR description image suggests the overflow ··· button should appear to the left of the inline actions (i.e., further from the primary). The current DOM ordering puts it DOM-first, which with flex-row-reverse places it visually last (rightmost).

Fix: either put the overflow button DOM-last and keep flex-row-reverse, or switch to flex-row justify-end and place elements in the desired visual order.

Fix this →

2. flex-row-reverse causes tab-order/visual-order mismatch — accessibility

dot-workflow-actions.component.ts:48

Keyboard navigation (Tab key) follows DOM order, not visual order. With flex-row-reverse, a sighted keyboard user sees actions right-to-left visually but tabs through them left-to-right visually, creating a confusing disconnect. WCAG 2.1 SC 1.3.2 (Meaningful Sequence) and 2.4.3 (Focus Order) require that focus order matches reading/visual order. Already flagged by Copilot but worth emphasizing — same fix as #1 above resolves this.

3. getVariant() returns null instead of undefined — PrimeNG input binding

dot-workflow-actions.component.ts:149

// Current
protected getVariant(index: number): 'outlined' | null {
    if (index > 0) return 'outlined';
    return null;  // ← passed to PrimeNG Button.variant as null
}

The comment claims "Angular drops null bindings entirely" but this is only true for native HTML attribute bindings ([attr.foo]). For component input bindings ([variant]), Angular passes the value through — PrimeNG Button receives null and may behave unexpectedly. Return undefined instead and update the return type.

Fix this →

4. Overflow button has no accessible label — accessibility

dot-workflow-actions.component.html:11–18

<p-button
    icon="pi pi-ellipsis-v"
    ...
    />

This is an icon-only button with no text. Screen readers cannot identify its purpose. Add ariaLabel="More actions" (already suggested by Copilot).

Fix this →

5. E2E save() uses isVisible() without timeout — unreliable test

core-web/apps/dotcms-ui-e2e/src/pages/newEditContentForm.page.ts:77

const actionButton = (await saveButton.isVisible()) ? saveButton : publishButton;

Per the E2E CLAUDE.md: "isVisible() has no timeout and is unreliable". If the Save button hasn't rendered yet when this line executes, it returns false and falls back to Publish unnecessarily. Use waitFor or expect(…).toBeVisible() to properly wait.

Fix this →

---

Minor / Test Gaps

• Overflow button disabled state not tested: loading and disabled test suites use mockWorkflowsActions (3 actions) at the default wide-viewport cap (4), so the overflow button is never rendered. There's no test verifying it becomes disabled when loading=true or disabled=true.

• initialValue: MAX_INLINE_ACTIONS flash on mobile: #inlineCap initializes to 4 before BreakpointObserver fires. On XSmall viewports this briefly renders 4 inline buttons before collapsing to overflow — a flash of unstyled/incorrect content on first render.

• SEPARATOR_ACTION mock uses string literal 'SEPARATOR' instead of DotCMSActionSubtype.SEPARATOR. Will silently break if the enum value changes.

[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>.

[semgrep-code-dotcms-test]

Legal Risk

The following dependencies were released under a license that
has been flagged by your organization for consideration.

Recommendation

While merging is not directly blocked, it's best to pause and consider what it means to use this license before continuing. If you are unsure, reach out to your security team or Semgrep admin to address this issue.

GPL-2.0

• node-forge 1.3.3

MPL-2.0

• axe-core 4.11.1
• dompurify 3.3.2