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 28s —— View job

Rollback Safety Analysis

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

Result: ✅ Safe To Rollback

All 100 changed files are frontend-only (Angular/TypeScript components, E2E tests, i18n). No backend changes are present.

Categories checked against the diff:

Category	Signal	Present?
C-1 Structural Data Model Change	runonce tasks, core table changes	❌ No
C-2 Elasticsearch Mapping Change	ESMapping*, reindex tasks	❌ No
C-3 Content JSON Model Version Bump	`CURRENT_MODEL_VERSION`, `ImmutableContentlet`	❌ No
C-4 DROP TABLE / DROP COLUMN	`DROP TABLE`, `DROP COLUMN` SQL	❌ No
H-1 One-Way Data Migration	`UPDATE … SET … transform()`	❌ No
H-2 RENAME TABLE / RENAME COLUMN	`ALTER TABLE … RENAME`	❌ No
H-3 PK Restructuring	`DROP CONSTRAINT PRIMARY KEY`	❌ No
H-4 New Field Type	New `FieldType` registration	❌ No
H-5 Storage Provider Change	`StoragePersistenceProvider`, metadata version	❌ No
H-6 DROP PROCEDURE / FUNCTION	`DROP PROCEDURE`	❌ No
H-7 NOT NULL Column without Default	`ADD COLUMN NOT NULL`	❌ No
H-8 VTL Viewtool Contract Change	`ViewTool` interface changes	❌ No
M-1 Column Type Change	`ALTER COLUMN … TYPE`	❌ No
M-2 Push Publishing Bundle Format	`*Bundler.java` changes	❌ No
M-3 REST/GraphQL API Contract Change	REST endpoint / response shape changes	❌ No
M-4 OSGi Plugin API Breakage	`@Reference`, `@Provides` changes	❌ No

What changed:

dotCMS/src/main/webapp/WEB-INF/messages/Language.properties — 3 new i18n keys added (purely additive, backward-compatible)
justfile — minor build cleanup (rm -rf ./installs/node)
All other files: Angular components, E2E tests, TypeScript stores/services

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

Copilot · 2026-06-17T16:04:28Z

@copilot resolve the merge conflicts in this pull request

Resolved in baa2b30.

adrianjm-dotCMS · 2026-06-17T19:28:24Z

Bug 1: UI Layout Overflow & Missing Edit Option when is a txt file

Editor: Both

Content Type: QA Binary / QA Binary required

Description: There is a visual discrepancy between the demo and the current branch. When creating new content, the content overflows outside the field container boundaries. Additionally, the option to edit the binary field is missing ( I cannot click on it to edit it ) when we are uploading a txt file. Note: This mostly happens during creation

Steps to Reproduce:

Go to Content → New → Select Binary field.
Add a Txt file and try to edit it by clicking

Expected Result:
The container fits the field elements properly within its boundaries (no text/content overflow). The option to edit the binary field should be accessible if applicable.

**Bug 2: False Positive "Required" Validation on Binary Field **

Editor: Old Editor

Content Type: Binary required

Description:
The binary field triggers a false "This field is mandatory" validation error upon saving, even though a valid file has already been uploaded/added into the field.

Steps to Reproduce:

Go to Content → New → Select Binary field.
Try to add a file and save it

Expected Result:
The contentlet saves successfully since all required fields (Binary field) contain data.

Bug 3: Binary Field Content Not Saving / Dropping Hydration
Related TC: TC-BIN-001 / TC-BIN-006 — Edit existing content (hydration)

Editor: Old editors

Content Type: Binary
Description:
When adding a binary file to a binary field the file data fails to persist. Upon saving and reloading, the field reverts to an empty state. (Only when creating)

Screen.Recording.2026-06-17.at.3.25.16.PM.mov

Steps to Reproduce:

Open Content → New → Binary
Upload a file to the non-required binaryField.
Click Save.
Reopen the newly created contentlet.

Expected Result:
The contentlet reopens with the binary file fully hydrated (preview and filename visible, no data loss).

Bug 4: Image Editor Preview Synchronization Delay on Empty Fields

Editor: Both editors

Content Type: Binary

Description:
When interacting with the Image Editor on a brand-new/empty binary field, modifications made inside the PrimeNG dialog editor do not sync back to the main form preview in real-time.

Screen.Recording.2026-06-17.at.3.27.43.PM.mov

Steps to Reproduce:

Open Content → New → Binary
Upload a small image or import via URL to an empty binary field.
Click on Edit image to open the PrimeNG dialog editor.
Apply any modification/crop inside the editor and confirm changes.
Check the field preview on the main form before saving.

Expected Result:
The modified image steps should immediately reflect on the form's preview container prior to hitting the final save button.

Aditional UI issue: The field icons collide with the command bar.

…file field preview component

…nce file editor functionality - Changed the event emitted on value update from `valueUpdated` to `onInnerValueUpdated` to ensure proper synchronization with the FormControl. - Added a new method in the file field component to handle value updates directly, improving the reactive form integration. - Enhanced the file editor component to support additional properties for file uploads, including `uploadType` and `acceptedFiles`. - Updated the file preview component to emit an event for editing files when the preview is clicked. - Adjusted styles for better usability and responsiveness in the file preview and editor components.

…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>

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

Merge origin/main into 34420-unify-component

baa2b30

Copilot finished work on behalf of nicobytes June 17, 2026 16:05

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

Merge branch 'main' into 34420-unify-component

f152460

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

fix(dot-file-field-preview): adjust z-index for improved layering in …

ab52b9b

…file field preview component

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

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

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

Merge branch 'main' into 34420-unify-component

3a2f274

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

34420 unify component#36172

34420 unify component#36172
nicobytes wants to merge 40 commits into
mainfrom
34420-unify-component

nicobytes commented Jun 15, 2026 •

edited by github-actions Bot

Loading

Uh oh!

claude Bot commented Jun 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 16, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

nicobytes commented Jun 16, 2026

Uh oh!

Copilot AI commented Jun 17, 2026

Uh oh!

adrianjm-dotCMS commented Jun 17, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

nicobytes commented Jun 15, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude Bot commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rollback Safety Analysis

Result: ✅ Safe To Rollback

Uh oh!

github-actions Bot commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 Codex Review — openai.gpt-5.5

Uh oh!

github-actions Bot commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 Bedrock Review — deepseek.v3.2

Uh oh!

Uh oh!

Uh oh!

nicobytes commented Jun 16, 2026

Uh oh!

Copilot AI commented Jun 17, 2026

Uh oh!

adrianjm-dotCMS commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nicobytes commented Jun 15, 2026 •

edited by github-actions Bot

Loading

claude Bot commented Jun 15, 2026 •

edited

Loading

github-actions Bot commented Jun 15, 2026 •

edited

Loading

🤖 Codex Review — `openai.gpt-5.5`

github-actions Bot commented Jun 16, 2026 •

edited

Loading

🤖 Bedrock Review — `deepseek.v3.2`

adrianjm-dotCMS commented Jun 17, 2026 •

edited

Loading