Edit Content Screen — GTM

[melissarojas-dotcms]

Description

The redesigned Edit Content Screen modernizes the content editing experience across traditional and headless environments. This includes a full side panel redesign — changing its layout, look and feel, and how information is displayed across tabs. Before this screen ships to customers, a set of functional bugs, UX inconsistencies, and missing behaviors must be resolved across the editor's key areas: content locking, workflow actions, field validation, locale management, and field-specific components.

This epic tracks all outstanding issues that block or degrade the GTM quality bar, plus the structural improvements needed for the screen to scale correctly.

---

Desired Outcome

• All bugs and UX issues listed below are resolved before release.
• The Edit Content Screen behaves consistently with the Lara Theme from PrimeNG design system (using Content Drive as a reference for specific components like chip colors and status indicators).
• Users can edit, lock, unlock, translate, and publish content without hitting dead ends or misleading error states.
• All field default and error states are correctly implemented across the Edit Content Screen.
• Documentation and enablement materials are ready at launch.

---

Target Personas

• Content teams
• Developer teams
• DevOps teams
• System administrators (dotCMS)

---

Links

• Kickoff deck
• Edit Content Screen Design
• Image Editor Design
• Slack channel
• Epic folder in Google Drive
• Issue list in Notion Follow the GTM Issues, those are the ones that we need to finish before GTM, the design issues will be worked on later.

---

Acceptance Criteria

Side Panel Redesign

• The Info tab is replaced by the Actions tab, which is the home of lock/unlock, workflow actions, locales, workflow, and details.
• Each version card in the History tab displays its ID.
• When comparing a previous version, Restore and Cancel buttons are displayed in the side panel for proximity and discoverability.
• Push publish accordion in the History tab remains unchanged.
• Comments tab remains unchanged.
• Settings tab is removed; Permissions, Rules, and View References are moved to the ... menu, consistent with the rest of the platform.

Command Bar

• Remove the settings tab, move Permissions, References and View References to the ... menu.
• Change the position of buttons.

Viewport

• Max-width and min-width are defined; minimum support is iPad 11, maximum 1300px.

Side Panel — Actions

• Content lock/unlock redesign:

  • The lock/unlock behaviour is not going to change from the current one.
  • If content is locked by another user, a banner is displayed at the top of the viewport and shows who holds the lock.
  • If a user has permissions to unlock another user's lock, a Release Lock button will show instead of the Lock button.
  • If a lock is taken from an active editor, they receive a toast notification.
  • If a user lands on locked content and does not have permissions to release the lock, they will only be able to see the page but will not be able to perform any workflow action.
  • Lock is released on save, publish, or navigation away, with a timeout fallback.

• Tabs are hidden when there is only one tab.

• Command bar stays sticky to the top on scroll.

LockUnlock.-.Edit.Content.Screen.mp4

Workflow Actions

• Workflow actions are moved to the Actions tab in the Side Panel.
• When hitting an error when applying a workflow action, fields with validation errors are highlighted in red with helper text below them, so the error is easy to find in the page.
• Error banner is cleared and re-shown on every Workflow Action click, regardless of prior error state.
• Hovering over a tab shows its full name (Actions · History · Comments).
• "Copy ID" gives visual feedback on every click, not just the first.
• Status/locale chips are aligned with Content Drive design across Info and History tabs.

Locales

• Few locales (≤ 5)
  Inline card under the accordion
  Locales grouped under Translated (first) and Pending titles, each with a count.
  Single-line rows: Language en-XX, with Default chip at the right when applicable.
  Manage locales → link pinned in the card footer.
• Many locales (> 5)
  Inline card under the accordion
  Card has search + segmented filter (All / Translated / Pending) + the full list.
  Selecting a locale updates the selected option at the top of the locale list.
  Manage locales → link pinned at the bottom of the list.
• The manual translation should start empty, not pre-populated with the default language.
• "Populate from current" is deleting the content from the untranslated and the translated locale.
• Copy on the Untranslated Locale dialog is updated.

Locales.-.Edit.Content.Screen.mp4

Workflow / Details

WorkflowDetails.-.Edit.Content.Screen.mp4

Side Panel — History

• Ellipsis Menu:
  • Draft status: no options available.
  • Published status: all options except Delete.
  • Other statuses: all options available.
• Version cards have an active state.
• An Cancel button navigates back to the current state.
• The Restore button was moved to the side panel.

History.-.Edit.Content.Screen.mp4

Binary Field

• File import no longer returns a 400 Bad Request.
• Dialog includes a header, footer, and a close button.
• Disabled primary button shows a tooltip explaining why it is disabled.
• Required input field shows an error message when empty.
  See full issue here

Block Editor

• Copy button provides feedback on click (consistent with Info panel Copy ID behavior).
  See full issue here

Relationship Field

• Status chip colors match Content Drive.
• Status title is aligned to the chips.
  See all issues here

Date / Date & Time / Time Fields

• Calendar is not full width — uses a predetermined width (check PrimeNG).
• Calendar does not close when selecting a date in Date & Time mode; time selection completes the interaction.
• Date picker is not full width in Time field.
  See full issue here
  Date
  Date & Time
  Time

Radio

• Radio group with true/false options only allows one selection and supports deselect.
  See full issue here

Tags

• Search results appear from the first letter typed.
• Decide and implement whether users can create new tags from this screen.
  See full issue here

Text Fields

• Email field shows error helper text on invalid input.
• Number field rejects non-numeric input and shows an error message.
• Decimal and Whole Number fields reject letters.
• Number fields do not display a leading "0" that blocks user input.
  See full issue here

General

• Save errors highlight the affected field in red with helper text.
• Error messages reference the field's display title, not its internal name.
  See full issue here

Image Editor

• The functionality is still the same, with some tweaks, the overall layout and design changed.
  Design