34420 unify component

[nicobytes]

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

[claude]

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

---

Rollback Safety Analysis

• Read rollback-unsafe categories reference
• Get full PR diff
• Analyze diff against unsafe categories
• Apply appropriate label

Result: ✅ Safe to Rollback

All 100 changed files are confined to the Angular/TypeScript frontend layer and test infrastructure. Specifically:

Category	Verdict
C-1 Structural Data Model Change	✅ Not present — no Java backend changes
C-2 Elasticsearch Mapping Change	✅ Not present — no ES mapping files touched
C-3 Content JSON Model Version Bump	✅ Not present — no ImmutableContentlet or CURRENT_MODEL_VERSION changes
C-4 DROP TABLE / DROP COLUMN	✅ Not present — no SQL or runonce tasks
H-1 One-Way Data Migration	✅ Not present
H-2 RENAME TABLE / COLUMN	✅ Not present
H-3 PK Restructuring	✅ Not present
H-4 New Field Type	✅ Not present — frontend-only component rename/unification
H-5 Binary Storage Provider Change	✅ Not present — UI layer only, no FileStorageAPIImpl changes
H-6 DROP PROCEDURE / FUNCTION	✅ Not present
H-7 NOT NULL Column Without Default	✅ Not present
H-8 VTL Viewtool Contract Change	✅ Not present — no viewtool classes modified
M-1 Column Type Change	✅ Not present
M-2 Push Publishing Bundle Format	✅ Not present
M-3 REST/GraphQL API Contract Change	✅ Not present — no Java REST endpoints modified
M-4 OSGi Plugin API Breakage	✅ Not present

Summary: Changes are limited to:

• Angular component refactoring (binary field unified under dot-edit-content-file-field)
• New/deleted TypeScript/SCSS files in core-web/
• Playwright E2E test helpers and specs
• Language.properties — 3 additive i18n keys only (safe, N-1 simply won't display them)
• justfile — tooling change (removes ./installs/node in build-no-cache)

No database schema changes, no Elasticsearch mapping changes, no Java backend changes, no runonce migration tasks. Rolling back to the previous release will cleanly restore the old binary field UI components with no data or operational side effects.

Label applied: AI: Safe To Rollback

[github-actions]

🤖 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}

[github-actions]

🤖 Bedrock Review — deepseek.v3.2

[🟠 High] core-web/libs/data-access/src/lib/dot-messages/dot-messages.service.ts:74 — init() now returns an Observable<void> but still calls subscribe() internally, causing potential double subscription and breaking the async initialization pattern. This could lead to race conditions where callers assume the observable is cold but it's already executing.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/pages/legacyEditContentForm.page.ts:23 — The regex pattern for LEGACY_EDIT_FRAME_URL_PATTERN changed from /edit_contentlet|portlet\/ext\/contentlet/ to /edit_contentlet/i. This may no longer match some legacy edit URLs (portlet/ext/contentlet), potentially breaking tests for older content edit flows.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/file-upload-fields/binary-field/helpers/binary-field.ts:80 — The expectAiButtonDisabledWithTooltipWhenApplicable() method silently returns if the AI button is enabled, which could mask test failures. The test expectation should be explicit about the expected state.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/file-upload-fields/binary-field/helpers/binary-field.ts:90 — Hovering the p-button host element (this.generateWithAiBtn.hover()) may not trigger the tooltip if the inner button is disabled; tooltip behavior could be inconsistent across browsers.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/relationship-field/helpers/relationship-field.ts:151 — New getHeaderTexts() method normalizes header texts to lowercase, which may cause case-sensitive assertions to fail unexpectedly if tests expect specific casing.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/relationship-field/helpers/relationship-field.ts:173 — dragRowToPosition() uses mouse move simulation with hardcoded steps; this could be flaky if the UI updates during drag or if drag handles have complex event listeners.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/relationship-field/helpers/select-existing-content-dialog.ts:206 — The expectRowConstrained() method checks for opacity-50 and pointer-events-none classes, which are implementation details; a change in CSS could break tests without a semantic update.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/utils/contentListingNavigation.ts:34 — The isOnAngularContentRoute() function uses regex on page.url() which may be fragile if the URL format changes; consider using a more robust URL parsing method.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/src/utils/contentListingNavigation.ts:60 — The clickAddNewContentFromList() uses expect().toPass() with a 20-second timeout for retrying the dropdown click; this could hide underlying issues (like missing element) and delay test failures.

[🟠 High] core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts — The Binary field case now renders dot-edit-content-file-field instead of dot-binary-field-wrapper, but the event handler is still named onBinaryFieldValueUpdated. This could cause confusion or missed updates if the handler signature differs.

[🟡 Medium] core-web/apps/dotcms-ui-e2e/.eslintrc.json:6 — Added strict Playwright linting rules (no-wait-for-timeout, no-force-option, etc.) which may cause existing code to fail linting; ensure all existing tests comply to avoid CI breaks.

---

_{Run: #27799702218 · tokens: in: 21276 · out: 869 · total: 22145}

[nicobytes]

@copilot resolve the merge conflicts in this pull request

[nicobytes]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Resolved in baa2b30.

[adrianjm-dotCMS]

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.