34420 unify component by nicobytes · Pull Request #36172 · dotCMS/core

nicobytes · 2026-06-15T17:50:21Z

This pull request introduces significant updates to the handling and testing of binary fields (file/image uploads) in the content editing experience. The main focus is on unifying the binary field implementation under the new dot-edit-content-file-field component, updating related imports and tests, and improving Playwright E2E test coverage for both the new and legacy editors. The changes also include new and refactored E2E test helpers for binary fields, and adjustments to test data and selectors.

Component and Module Refactoring:

The binary field implementation is unified under the dot-edit-content-file-field component, replacing the previous dot-edit-content-binary-field and its wrapper throughout the app and tests. This includes updating Angular module imports, dependency injection, and testbed configuration to use the new component and its bridge (DotBinaryFieldCeBridgeComponent). [1] [2] [3] [4] [5] [6] [7] [8]

E2E Test Enhancements:

Adds comprehensive Playwright E2E tests for the binary field image editor in both the new and legacy editors, including creation of content types, file import, and image editing workflows.
Introduces new E2E page objects for the legacy content editor and binary field, improving test structure and maintainability. [1] [2] [3]

Test Helper Improvements:

Refactors and extends the binary field test helper to support new selectors, actions (like image upload and editor opening), and improved assertions for button visibility and file handling. [1] [2] [3] [4] [5]

Test Data and Selector Updates:

Updates the default import-from-URL image to a stable 800x800 PNG for more robust image editor testing.
Aligns data-testid and DOM selectors in helpers with the new unified binary field implementation.

These changes collectively modernize the binary field experience, improve test coverage and reliability, and streamline the codebase for future enhancements.

This PR fixes: #34420

…rapper - Added a new `DotLegacyImageEditorLauncherService` to manage the image editor dialog lifecycle. - Introduced `DotLegacyImageEditorDialogComponent` for rendering the image editor iframe. - Updated `DotBinaryFieldWrapperComponent` to utilize the image editor service and handle value updates. - Enhanced the binary field HTML template to include an image editor toggle. - Added unit tests for the new image editor dialog and launcher service. This implementation allows users to edit images directly within the binary field, improving the content editing experience.

…te-to-angular

…message event handling - Added `dispatchSpy.restore()` calls to ensure proper cleanup after each test case. - Updated the origin check in the message event test to use a variable for invalid origins, improving test reliability. - Enhanced assertions to ensure that only valid events trigger the expected behavior. These changes improve the robustness of the unit tests for the `DotLegacyImageEditorLauncherService`.

- Introduced a new specification for the binary field image editor, verifying the visibility of the Edit button and the opening of the legacy Dojo Image Editor in both new and legacy content editors. - Created helper classes for managing interactions with the binary field and legacy binary field within the tests. - Updated the binary field helper to include methods for image upload and editor interaction. - Enhanced the legacy binary field helper to support image editing in the legacy editor. These changes improve the testing coverage for the binary field image editor functionality, ensuring a seamless user experience across different content editor versions.

…te-to-angular

…dling

…ar' of github.com:dotCMS/core into 34420-epic-image-editor-feature-parity-migrate-to-angular

…ame security handling - Changed the default image URL for import-from-URL tests to a stable 800x800 PNG from `placehold.co`. - Updated the `DotLegacyImageEditorDialogComponent` to use the SafeUrlPipe for iframe URL sanitization, improving security. - Adjusted related documentation to reflect the new image URL and its dimensions. These changes enhance the reliability and security of the binary field image editor functionality.

…file - Deleted the `binary-field-image-editor.md` specification file as it is no longer needed. - This cleanup helps streamline the project documentation and maintain focus on current testing strategies. No functional changes were made to the codebase.

- Replaced the `DotEditContentBinaryFieldComponent` with `DotEditContentFileFieldComponent` to unify the handling of binary and file fields. - Updated related tests and helper classes to reflect the new component structure. - Removed outdated binary field HTML, SCSS, and spec files to streamline the codebase. These changes enhance the maintainability and consistency of the binary field functionality within the content editing framework.

- Introduced `LegacyDialogImageEditorLauncher` to replace the previous Dojo-based image editor integration, allowing the legacy image editor to be opened in a PrimeNG dialog. - Updated the `DotFileFieldComponent` to conditionally expose the image editor action only for binary fields. - Modified related tests and components to accommodate the new image editor launcher and ensure proper functionality. - Enhanced the styling of the file field component for better layout consistency. These changes improve the user experience by modernizing the image editing workflow within the content editing framework.

claude · 2026-06-15T17:55:06Z

Claude finished @adrianjm-dotCMS's task in 1m 8s —— View job

Rollback Safety Analysis

Read rollback-unsafe categories reference
Get the full PR diff
Analyze diff against all unsafe categories
Post results and apply label

Result: ✅ Safe to Roll Back

All 100 changed files in this PR are pure frontend changes:

Angular/TypeScript component files (.ts, .html, .scss)
Playwright E2E test files
Language.properties (3 new i18n key additions only — additive, no renames or removals)

No unsafe categories matched:

Category	Check	Result
C-1 Structural Data Model Change	No `runonce` tasks, no DB table/column changes	✅ N/A
C-2 Elasticsearch Mapping Change	No ES mapping code (`ESMappingAPIImpl`, etc.)	✅ N/A
C-3 Content JSON Model Version Bump	No `CURRENT_MODEL_VERSION` change	✅ N/A
C-4 DROP TABLE / DROP COLUMN	No SQL DDL	✅ N/A
H-1 One-Way Data Migration	No data transformation tasks	✅ N/A
H-2 RENAME TABLE / RENAME COLUMN	No SQL DDL	✅ N/A
H-3 PK Restructuring	No schema changes	✅ N/A
H-4 New Content Type Field Type	No new `FieldType` registration	✅ N/A
H-5 Binary Storage Provider Change	No `FileStorageAPIImpl` / `getBinaryMetadataVersion()` changes	✅ N/A
H-6 DROP PROCEDURE / FUNCTION	No SQL DDL	✅ N/A
H-7 NOT NULL Column Without Default	No schema changes	✅ N/A
H-8 VTL Viewtool Contract Change	No Velocity viewtool modifications	✅ N/A
M-1 Non-Broadening Column Type Change	No SQL DDL	✅ N/A
M-2 Push Publishing Bundle Format	No `*Bundler.java` changes	✅ N/A
M-3 REST/GraphQL API Contract Change	No Java REST endpoint changes	✅ N/A
M-4 OSGi Interface Change	No Java interface changes	✅ N/A

The label AI: Safe To Rollback has been applied.

github-actions · 2026-06-15T17:55:56Z

🤖 Codex Review — `openai.gpt-5.5`

**[> [🟡 Medium] core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/binary-field/binary-field.spec.ts:184 — The test now always expects the dotAI button to be disabled, but the removed isAiButtonEnabled()/test.skip(...) guard handled environments where the dotAI plugin is installed. This makes the suite fail in plugin-enabled environments even though the behavior is valid there.

_{Run: #27565980035 · tokens: in: 19850 · out: 3914 (reasoning: 3814) · total: 23764}

- Updated the binary field image editor tests to reflect the new legacy image editor dialog behavior. - Added tests to verify that the "Edit image" button is hidden for non-image file uploads and that the confirmation popup appears when removing a file. - Improved the existing test for editing binary content to ensure it displays the preview without server errors. These changes enhance the test coverage and reliability of the binary field image handling functionality within the content editing framework.

…nd image fields - Refactored the required field tests for binary, file, and image fields to use a consistent structure with `beforeEach` and `afterEach` hooks for setup and teardown. - Improved test readability and maintainability by encapsulating the creation and deletion of content types within dedicated hooks. - Ensured that error handling for required fields is properly tested across all relevant field types. These changes enhance the clarity and organization of the end-to-end tests for required fields in the content editing framework.

github-actions · 2026-06-16T09:32:41Z

🤖 Bedrock Review — `deepseek.v3.2`

[🟡 Medium] core-web/apps/dotcms-binary-field-builder/src/app/app.module.ts:1-57 — DotWorkflowActionsFireService added as provider but not used in the module. This adds unnecessary dependency overhead.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/pages/legacyEditContentForm.page.ts:14-26 — matchingFrames.at(-1) assumes the last matching frame is the correct one; could be fragile if multiple frames match the pattern. Should include a more specific selector or validation.

[🟠 High] core-web/apps/dotcms-ui-e2e/src/tests/content-search/portlet-integrity.spec.ts:70-84 — Intercepting POST to **/api/content/_search with a mock response could mask actual API failures in the test. Should at least verify the request was made with correct parameters.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/file-upload-fields/binary-field/helpers/binary-field.ts:77-90 — expectAiButtonDisabledWithTooltipWhenApplicable() silently returns if button is enabled; test could pass incorrectly if AI is enabled but tooltip behavior is broken. Should log or assert the expected state.

[🟡 Medium] core-web/libs/data-access/src/lib/dot-messages/dot-messages.service.ts:67-92 — getAll() returns Observable<void> but also calls subscribe() internally for backward compatibility. This dual behavior could cause confusion or double subscriptions. Consider deprecating the side effect.

[🟡 Medium] core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts:103-176 — Binary, File, and Image fields all emit onBinaryFieldValueUpdated($event). Ensure the event payload is consistent across field types; otherwise, type safety could be broken.

[🟠 High] core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts:183-201 — Binary field test configuration now uses DotEditContentFileFieldComponent but provides a mock DotFileFieldUploadService with an empty object {}. This may not satisfy the service's dependencies, potentially causing test failures.

[🔴 Critical] core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.html — File deleted without apparent migration path. If this component was used elsewhere, it could break functionality. Verify no other references exist.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/relationship-field/helpers/relationship-field.ts:151-195 — dragRowToPosition() uses hardcoded steps: 10 in mouse movement; may not be reliable across different environments or CI speeds. Consider making it configurable or using Playwright's drag-and-drop utilities.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/utils/contentListingNavigation.ts:56-63 — clickAddNewContentFromList() uses expect(...).toPass() with a 20-second timeout for the entire retry loop, but each attempt has its own 2-second timeouts. Could lead to flaky tests if the menu is slow; consider increasing the inner timeouts or using a single robust wait.

_{Run: #28004093436 · tokens: in: 21306 · out: 771 · total: 22077}

nicobytes · 2026-06-16T15:21:13Z

@copilot resolve the merge conflicts in this pull request

…into 34420-unify-component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Increase 'Show Query' dropdown wait from 5 s to 15 s — Dojo popup transitions take longer under CI load - Wait for #queryResults in openQueryModal so callers get a fully-loaded modal rather than a just-opened one - Replace page.waitForEvent('popup') with page.context().waitForEvent('page') to reliably capture window.open() calls that originate inside the Dojo iframe via an async AJAX callback - Use .dot-api-link CSS selector (stable class) instead of getByText('API') Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Updated `openQueryModal` method to wait for `#queryResults` to ensure the modal is fully rendered, increasing timeout to 15 seconds for better reliability in CI. - Refactored API link handling in the query modal to intercept the API call, allowing for reliable popup handling in Playwright. - Changed `clickQueryModalApiLink` to a getter for better encapsulation and clarity in the test helper class.

- Increase 'Show Query' dropdown wait from 5 s to 15 s — Dojo popup transitions take longer under CI load - Wait for #queryResults in openQueryModal so callers get a fully-loaded modal rather than a just-opened one - Intercept POST /api/content/_search so window.open() fires instantly (browsers suppress it when called inside an async XHR callback) - Use page.context().waitForEvent('page') to capture the new window from inside the Dojo iframe reliably - Use .dot-api-link CSS selector instead of getByText('API') Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…ponent - Updated value comparison to treat null and empty string as equivalent for original value, enhancing the handling of file uploads and removals. - Ensured that changes to the last emitted value are properly propagated to maintain form control and touched state consistency.

github-actions · 2026-06-23T21:03:32Z

🤖 Bedrock Review — `us.deepseek.r1-v1:0`

New Issues

🔴 Critical: core-web/apps/dotcms-binary-field-builder/src/app/app.module.ts:49 — provideAppInitializer uses inject() outside valid injection context, causing runtime error. Angular's inject() cannot be used in provider factories before application injector is available.
🔴 Critical: core-web/libs/data-access/src/lib/dot-messages/dot-messages.service.ts:74 — init() returns Observable but callers (like app initializer) assume synchronous completion. Risk of race condition where messages aren't loaded before components render.

Existing

🟡 Medium: core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/relationship-field/helpers/relationship-field.ts:156 — Custom drag simulation via mouse events may flake in CI. Consider Playwright's locator.dragTo() for reliability (pre-existing test fragility).

Resolved

✅ core-web/apps/dotcms-ui-e2e/src/tests/login/translations.spec.ts:31 — Fixed assertion using Playwright's expect instead of Node assert.

_{Run: #28056846465 · tokens: in: 21960 · out: 1579 · total: 23539}

…ency - Replaced hardcoded color values with CSS variables in dot-file-field component styles for better theming and maintainability. - Enhanced error handling in the file field component by adding a subscription error callback. - Improved file editor initialization logic to use nullish coalescing for default values. - Refactored dot-file-field-preview styles to ensure proper image display within third-party components. - Removed standalone flag from legacy image editor dialog component for consistency with current standards.

github-actions · 2026-06-23T21:30:42Z

🤖 Bedrock Review — `us.deepseek.r1-v1:0`

New Issues

🔴 Critical: core-web/apps/dotcms-binary-field-builder/src/app/app.module.ts:49 — Invalid use of inject() in provideAppInitializer. Angular initializer functions execute before the injector is fully configured, causing runtime errors when using inject() directly.

Existing

🔴 Critical: core-web/apps/dotcms-binary-field-builder/src/app/app.module.ts:49 — Invalid use of inject() in provideAppInitializer causes runtime error (unchanged)

Resolved

✅ core-web/libs/data-access/src/lib/dot-messages/dot-messages.service.ts:74 — init() now returns completing Observable with take(1), allowing firstValueFrom to work
✅ core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/relationship-field/helpers/relationship-field.ts:156 — Replaced custom drag simulation with Playwright's built-in mouse API

_{Run: #28058374061 · tokens: in: 22106 · out: 975 · total: 23081}

nicobytes added 11 commits June 15, 2026 10:54

Merge branch 'main' into 34420-epic-image-editor-feature-parity-migra…

b77ccdd

…te-to-angular

Merge branch 'main' into 34420-epic-image-editor-feature-parity-migra…

abd47c7

…te-to-angular

refactor(dot-legacy-image-editor): enhance unit tests and message han…

9ceade3

…dling

Merge branch '34420-epic-image-editor-feature-parity-migrate-to-angul…

e7f221d

…ar' of github.com:dotCMS/core into 34420-epic-image-editor-feature-parity-migrate-to-angular

github-project-automation Bot added this to dotCMS - Product Planning Jun 15, 2026

github-actions Bot mentioned this pull request Jun 15, 2026

[EPIC] Image Editor Feature Parity Migrate to Angular #34420

Open

4 tasks

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

claude Bot added the AI: Safe To Rollback label Jun 15, 2026

github-actions Bot removed the AI: Safe To Rollback label Jun 15, 2026

claude Bot added the AI: Safe To Rollback label Jun 15, 2026

Merge branch 'main' into 34420-unify-component

e0fa611

github-actions Bot removed the AI: Safe To Rollback label Jun 16, 2026

claude Bot added the AI: Safe To Rollback label Jun 16, 2026

adrianjm-dotCMS reviewed Jun 16, 2026

View reviewed changes

Comment thread ...ent-file-field/components/dot-binary-field-ce-bridge/dot-binary-field-ce-bridge.component.ts

Comment thread ...lib/fields/dot-edit-content-file-field/components/dot-file-field/dot-file-field.component.ts Outdated

Copilot started work on behalf of nicobytes June 16, 2026 15:21 View session

Merge origin/main into 34420-unify-component

bc5deab

adrianjm-dotCMS added 2 commits June 22, 2026 16:57

merge main

1a4d762

Merge branch '34420-unify-component' of https://github.com/dotCMS/core …

5808e0e

…into 34420-unify-component

github-actions Bot removed the AI: Safe To Rollback label Jun 22, 2026

claude Bot added the AI: Safe To Rollback label Jun 22, 2026

style(dot-file-field-preview): fix prettier formatting on template

cc3433e

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions Bot removed the AI: Safe To Rollback label Jun 22, 2026

claude Bot added the AI: Safe To Rollback label Jun 22, 2026

github-actions Bot removed the AI: Safe To Rollback label Jun 23, 2026

claude Bot added the AI: Safe To Rollback label Jun 23, 2026

adrianjm-dotCMS and others added 2 commits June 23, 2026 01:15

github-actions Bot removed the AI: Safe To Rollback label Jun 23, 2026

claude Bot added the AI: Safe To Rollback label Jun 23, 2026