feat(edit-content): open Edit Content in a slide-in side panel (#36631) by adrianjm-dotCMS · Pull Request #36732 · dotCMS/core

adrianjm-dotCMS · 2026-07-27T14:43:36Z

Proposed Changes

Opens the new Edit Contentlet in a right-to-left slide-in side panel (p-drawer, ~70% width) instead of a full-page navigation / dialog, behind the FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL feature flag.

This closes #36631.

Frontend

New DotEditContentSidePanelComponent (libs/edit-content) — hosts the editor in a p-drawer teleported to body (appendTo="body") so it escapes transform/overflow-clipping ancestors. Header with title, expand-to-full-screen and close (X) actions using Material Symbols icons. ESC closes the panel.
- Expanded/full-screen mode persists in localStorage, so the next content opens in the same mode.
New DotSidePanelNavController — collapses the main navigation (and the Content Drive tree) while a panel is open and restores it on close, only on narrower viewports (< 1800px). Ref-counted so stacked panels (relationship "New content") keep the nav collapsed until the last one closes; pre-panel state is kept in localStorage so it survives a refresh on a shared ?editContent= link.
Consumers gated by the flag:
- Content Drive — edits/creates in the side panel.
- Query Tool — opening a new-editor result opens the side panel instead of a new tab.
- UVE (edit-ema) — edit + palette-drop open in the side panel (header cropping fixed).
- Relationship field "New content" — opens a stacked side panel.

Backend

New feature flag FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL (FeatureFlagName.java), whitelisted and exposed via ConfigurationResource (/api/v1/configuration), with a default in dotmarketing-config.properties.

Checklist

Tests
Translations
Security implications
Backward compatibility

Note

Feature-flagged (FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL), on by default.

🤖 Generated with Claude Code

Restore point before adding shareable-via-query-param support. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

… identifier - Introduced a new `identifier` field in the `EditContentDialogData` interface to serve as a stable identifier for content, enabling the construction of shareable URLs. - Enhanced the `DotContentDriveShellComponent` to handle the `editContent` query parameter, allowing the edit panel to open directly to specific content based on its identifier. - Updated the `DotContentDriveNavigationService` to resolve identifiers to their corresponding content inode, facilitating the opening of the edit panel for shared content links. - Added unit tests to ensure the new functionality works as expected. This change improves the user experience by allowing users to share direct links to editable content.

…actions - Added a `confirmClose` method in `DotEditContentLayoutComponent` to enforce unsaved changes prompts consistently across different editor presentations. - Updated `DotEditContentSidePanelComponent` to route close requests through the new `confirmClose` method, ensuring users are prompted when there are unsaved changes. - Enhanced the side panel's close behavior to handle both the close button and the Escape key, improving user experience when closing the editor. This change ensures that users are consistently warned about unsaved changes, preventing accidental data loss.

- Added a new feature flag `FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL` to control the display of the Edit Content panel. - Updated `DotEditContentLayoutComponent` and `DotEditContentSidePanelComponent` to support the new side panel interface for editing content, enhancing user experience by allowing in-place editing. - Modified `DotContentDriveNavigationService` to conditionally open the editor in a side panel or full-screen based on the feature flag. - Updated related components and templates to integrate the side panel functionality, ensuring seamless transitions between editing modes. - Enhanced unit tests to cover the new side panel behavior and its interactions with existing features. This change improves the editing workflow by providing a more flexible and user-friendly interface for content management.

- Added `appendTo="body"` to the side panel component to ensure proper rendering outside the component's DOM subtree. - Updated button icons in the side panel to use Material Symbols for a more modern look. - Implemented document-level Escape key handling to close the side panel, improving user experience. - Adjusted unit tests to accommodate changes in the side panel's DOM structure and behavior, ensuring accurate querying for elements. - Enhanced tests to verify the side panel closes correctly through the Escape key and that the editor behaves as expected when opened in the side panel. These changes improve the usability and reliability of the Edit Content side panel, providing a smoother editing experience.

- Introduced `DotSidePanelNavController` to manage side panel navigation state. - Updated the side panel component to persist the expanded/collapsed state using localStorage, improving user experience. - Refactored the expand button's click handler to use a dedicated `toggleExpanded` method for better readability. - Enhanced unit tests to verify the persistence of the expanded state and the correct initialization based on stored preferences. These changes improve the usability of the Edit Content side panel by ensuring it retains user preferences across sessions.

claude · 2026-07-27T14:44:56Z

Reviewing the latest changes on this PR…

Read the diff against origin/main
Recheck prior review findings
Check for new issues
Post review

View job run

…l-page.component.ts - Removed unnecessary line breaks in import statements for better readability. - Consolidated imports from the same module into a single line, streamlining the code structure. These changes enhance the clarity and maintainability of the code in the dot-query-tool page component.

ESC was bound at the document level, so stacked relationship "New content" panels both reacted to a single ESC and closed the whole stack. Track an ordered panel stack in DotSidePanelNavController and only let the frontmost panel (isTop) respond, closing one panel at a time. Also route the panel's user-facing text through i18n: aria-labels (expand/collapse/close) via DotMessagePipe with new edit.content.side-panel.* keys, and the relationship "Create <type>" title via the existing contenttypes.content.create.contenttype key. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Refactored the `DotEditContentSidePanelComponent` to enhance styling and accessibility by replacing `data-testId` attributes with `data-testid`. - Improved the handling of the side panel's close functionality by adding a detailed comment for the `requestClose` method. - Updated unit tests in `DotRelationshipFieldComponent` and `DotQueryToolPageComponent` to accommodate changes in the side panel's structure and behavior, ensuring accurate testing of the new functionality. - Introduced a mock for the side panel in tests to streamline component interactions and improve test reliability. These changes enhance the maintainability and usability of the Edit Content side panel, ensuring a better user experience and more robust testing.

- Removed unnecessary line breaks in the `dot-edit-content-side-panel.component.html` file for improved readability. - Ensured consistent styling syntax in the component's inline styles. These changes enhance the maintainability of the side panel component's HTML structure.

- Updated the class binding in `dot-edit-content-side-panel.component.html` to ensure proper styling application by changing 'p-0' to 'p-0!'. - This change enhances the clarity of the component's styling and ensures consistent behavior in the side panel's appearance.

…t form - Added event listeners for `pointerdown` and `keydown` to detect genuine user interactions within the `DotEditContentFormComponent`. - Introduced a private flag `#userTouched` to differentiate between programmatic value changes and user edits, ensuring the form remains pristine until actual user input is detected. - Updated the form value change subscription to prevent unsaved changes prompts from firing during initial load-time noise. These changes improve the accuracy of user interaction tracking, enhancing the overall editing experience.

- Modified tests in `relationship-field-select.spec.ts` to reflect the transition from a centered create dialog to a side panel for creating new content. - Updated locators and expectations to ensure proper visibility and interaction with the side panel, including changes to the close button functionality. - Enhanced test descriptions for clarity regarding the side panel's behavior during content creation and dismissal. These changes improve the accuracy and reliability of the end-to-end tests for the relationship field component.

Keep both Edit Content side panel and Show In List extra columns specs. Co-authored-by: Cursor <cursoragent@cursor.com>

…ContentFormComponent - Introduced a new ElementRef to capture user interactions more accurately. - Removed redundant pointerdown and keydown event listeners from the host and replaced them with a capture-phase listener in the constructor to set the userTouched flag. - Updated comments for clarity regarding the interaction detection mechanism. These changes improve the reliability of user interaction tracking within the edit content form.

zJaaal · 2026-07-29T15:16:30Z

The red CI on this PR is not from these changes. MatcherTimeoutFactoryTest.test_regex_quarantine failed in PR Test / JVM Unit Tests (1 failure out of 3090, run 30392616146), and fail-fast then cancelled the rest of the matrix — Frontend Unit Tests, E2E Tests - Nx Playwright 2 of 3, and the MainSuite / Postman jobs all report step conclusion cancelled, not failure.

Net effect: there is currently no frontend or E2E signal for this branch at cd9c643. Worth a re-run before reading anything into the red, since the FE unit tests and the rewritten relationship-field E2E are the two suites that actually cover this PR.

Related note on that E2E: relationship-field-select.spec.ts now asserts .p-drawer and side-panel-close, so it only passes with FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL on. If the default ends up false — which the Javadoc and the properties entry currently disagree about — those three tests fail. Probably worth pinning the flag in the test rather than inheriting the install default.

_{Analysis by Claude Code, posted from @zJaaal's account.}

…tFormComponent and improve side panel behavior - Added tests to ensure proper handling of drag-and-drop interactions, marking the form as dirty when a file is dropped directly. - Updated the interaction event listener to include the `drop` event, ensuring accurate user interaction tracking. - Enhanced the close handling logic in the DotEditContentSidePanelComponent to prevent silent data loss during navigation. - Adjusted tests in DotContentDriveShellComponent to verify the correct behavior of the side panel during loading and saving states. These changes improve user experience by ensuring reliable interaction detection and consistent side panel behavior across components.

…hub.com/dotCMS/core into issue-36631-edit-content-slide-in-panel

…navigation - Added support for re-hydrating the DotContentDriveStore state when navigating using the browser's Back and Forward buttons. - Introduced a subscription to the Location service to capture URL changes and update the store accordingly. - Enhanced tests to verify that the store correctly re-hydrates filters, path, and tree-expanded preferences based on the URL parameters. - Ensured that the store does not reset when only non-relevant parameters change, improving user experience during navigation. These changes enhance the application's responsiveness to browser navigation, ensuring a seamless user experience.

…Store and navigation service - Added support for feature flags in the DotContentDriveStore, enabling dynamic control of the side panel behavior. - Updated DotContentDriveNavigationService to read the side-panel feature flag from the store, enhancing the decision-making process for editor display. - Enhanced tests to mock feature flag behavior, ensuring reliable functionality during navigation and content editing. - Refactored related components to utilize the new feature flag system, improving maintainability and responsiveness to feature toggles. These changes improve the application's flexibility and user experience by allowing for dynamic feature management.

…hub.com/dotCMS/core into issue-36631-edit-content-slide-in-panel

- Removed direct dependency on DotPropertiesService in DotRelationshipFieldComponent and DotQueryToolPageComponent, replacing it with a store-based approach for feature flags. - Updated tests to mock the new feature flag behavior, ensuring consistent functionality across components. - Enhanced the handling of side panel visibility based on feature flags, improving user experience by allowing dynamic control over the editor display. These changes streamline the integration of feature flags, enhancing maintainability and responsiveness in the edit content module.

- Moved the `NEW_CONTENT_MARKER` constant from the DotContentDriveShell component to the shared constants file for better organization and reusability. - Updated the import statements in the DotContentDriveShell component to reflect this change. This refactor enhances code maintainability by centralizing constant definitions.

…hub.com/dotCMS/core into issue-36631-edit-content-slide-in-panel

… editing - Integrated `toObservable` and `filter` to manage the side panel flag more effectively, ensuring that content searches are only executed when the flag is enabled. - Updated the `#resolveAndOpenByIdentifier` method to prevent unnecessary searches and handle deep links more reliably based on the side panel's state. - Improved code clarity and maintainability by utilizing `takeUntilDestroyed` for proper cleanup during component destruction. These changes streamline the content editing experience by dynamically controlling the visibility of the editor based on feature flags.

…1-edit-content-slide-in-panel

…ed flags model - Updated the `DotPropertiesService` mock in tests to use `getFeatureFlags` for improved feature flag management. - Removed the deprecated `flags` property from the `UVEState` interface and the associated `UVEFlags` model. - Adjusted the `withEditor` and `withWorkflow` features to access flags through the new `flags()` signal, ensuring type safety and consistency. - Enhanced documentation to clarify the relationship between feature flags and the store. These changes improve the maintainability and clarity of feature flag usage across the edit-ema portlet.

…iting - Updated `DotEmaShellComponent` to manage routing through the new editor's side panel when the content route is active, improving the editing experience. - Refactored the `openContentForEdit` method in `EditEmaEditorComponent` to be public, allowing it to be called from `DotEmaShellComponent`. - Added tests to ensure proper routing behavior between the new editor and legacy dialog based on active routes. - Enhanced handling of VTL file editing to fallback to legacy dialogs when necessary, maintaining user experience consistency. These changes improve the integration of the new editing features and streamline the content editing workflow.

adrianjm-dotCMS and others added 6 commits July 22, 2026 10:56

checkpoint(content-drive): edit content side panel POC + UI (working)

fb99410

Restore point before adding shareable-via-query-param support. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-project-automation Bot added this to dotCMS - Product Planning Jul 27, 2026

github-actions Bot mentioned this pull request Jul 27, 2026

Open new Edit Content in a right-to-left slide-in panel (~70%) with routing and full-screen #36631

Open

17 tasks

github-actions Bot added Area : Backend PR changes Java/Maven backend code Area : Frontend PR changes Angular/TypeScript frontend code labels Jul 27, 2026