feat(folder-search): new site/folder selector by nicobytes · Pull Request #36449 · dotCMS/core

nicobytes · 2026-07-07T14:50:41Z

This pull request introduces a new, paginated folder search feature for the host/folder selection field and refactors the UI to use a custom overlay with improved usability. The changes add a new service method and model types for folder searching, update the component template for a modern UX, and provide thorough unit tests for the new functionality.

Folder Search API Integration:

Added a new searchFolders method to DotFolderService that calls the unified, paginated /api/v1/folder/search endpoint, supporting filtering, sorting, and pagination.
Defined new model interfaces FolderSearchView (API response item) and FolderSearchParams (query params) in dot-folder.model.ts for strong typing and documentation.

Component UI Refactor:

Replaced the old p-treeselect dropdown with a custom button-triggered overlay (p-popover) in host-folder-field.component.html, providing a two-pane layout for sites and folders, search input, improved accessibility, and a copy-to-clipboard button.

Testing Enhancements:

Added a comprehensive unit test suite for DotHostFolderFieldComponent, covering overlay behavior, folder/site selection, search, copy-to-clipboard, and integration with the new store and service methods.
Extended the DotFolderService spec to test the new searchFolders method, including query parameter handling and response mapping.

Supporting Changes:

Updated imports and test utilities to support the new models and service methods. [1] [2]

This PR fixes: #36151

…ce and add corresponding tests - Added the `searchFolders` method to `DotFolderService` to enable searching for folders with pagination and various filter options. - Introduced `FolderSearchView` and `FolderSearchParams` interfaces in `dot-folder.model.ts` to define the structure of search results and parameters. - Updated unit tests in `dot-folder.service.spec.ts` to cover the new search functionality, ensuring correct API calls and response handling. - Enhanced the `DotEditContentHostFolderFieldComponent` to integrate the new search functionality, including UI updates for folder selection. This change improves the folder management capabilities by allowing users to search for folders based on specific criteria, enhancing the overall user experience.

…nt-edit-contentlet

claude · 2026-07-07T14:52:16Z

Claude finished @nicobytes's task in 12m 5s —— View job

PR Review — new site/folder selector

I reviewed the diff against origin/main, focusing on the store (host-folder-field.store.ts), the component, DotFolderService.searchFolders, DotBrowsingService, and the backend FolderResource changes. I also rechecked all eight prior review comments against the current code.

New Issues

🟡 Medium: core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/utils/mocks.ts:24 — The test message mock still reads 'dot.file.field.host.folder.action.load.more': 'Load {0} more', while the shipped Language.properties:1251 was corrected to Load more (the AC2 fix). The template calls ... | dm with no argument, so production renders "Load more" correctly — but the test mock diverges from the real bundle. Any test that asserts the rendered load‑more label would validate against the stale Load {0} more string, so the drift can mask a regression. Align the mock to 'Load more'. Fix this →

Resolved

✅ .../host-folder-field.component.html:265 — Load‑more label now uses Load more in Language.properties with no ['40'] argument (AC2).
✅ .../store/host-folder-field.store.ts:1198 — The buildTreeByPaths(...) branch now has a catchError that calls dotHttpErrorManagerService.handle(error) and falls through to the !site → sitesStatus: ERROR path, so the effect no longer terminates silently.
✅ .../store/host-folder-field.store.ts:735,813,1343 — Search mode now tracks pagination (searchPagination), appends via searchMore, and exposes loadMoreSearchResults with a load-more:search sentinel (AC9/AC10).
✅ .../host-folder-field.component.html:249-255 — Search rows now render folder name and full path via formatSearchNodePath(node) gated on store.isSearching() (AC11); isSearching computed is now used.
✅ .../host-folder-field.component.ts:167-170 — #destroyRef, #injector, #clipboard, #copyResetTimer now use ECMAScript private fields.
✅ host-folder-field-default.spec.ts:71 — "site selection survives a save and reload" restores the save+reload persistence round‑trip.
✅ host-folder-field-prefill.spec.ts:70,85 — "override the pre-filled folder value" and "empty folderPath query param falls back to default" regression tests re‑added in popover form.
✅ AC12 display/copy formatting — flagged as a question by the reviewer and subsequently approved; treating as intentional.

Notes (non-blocking)

The store carries substantial new complexity (tree cloning via structuredClone, per‑level pagination, epoch guards). Coverage looks strong — ~1975 lines of new store spec plus a 899‑line component spec — including error paths and load‑more sentinels.
Backend change (min name length 3 → 2) is consistently applied across the @Operation/@ApiResponse/@Parameter annotations, the guard in searchFolders, and the frontend FolderSearchParams doc. Verify openapi.yaml was regenerated (it's in the diff, +2/-2 — looks consistent).

Overall this is in good shape — the only actionable item is the test‑mock string drift, which is Medium and non‑blocking.

• 36151-implement-new-sitefolder-field-component-edit-contentlet

…perience

…st-folder-field.store.spec.ts

…lder selection experience - Added the `onOverlayShow` method to the `DotHostFolderFieldComponent`, which opens the overlay and scrolls the selected folder into view once the tree has finished rendering. - Introduced a new private method `scrollSelectedFolderIntoView` to handle the scrolling logic, ensuring it retries until the folders are fully loaded. - Updated the component's template to reference the new method for overlay display. This change improves the user experience by ensuring that the selected folder is visible when the overlay is opened, enhancing usability in folder management.

…y functionality - Added the Angular CDK Clipboard service to the `DotHostFolderFieldComponent` to enhance the copyPath method. - Updated unit tests to mock the Clipboard service and verify that the correct path is copied to the clipboard. - Refactored the copyPath method to utilize the Clipboard service instead of the deprecated navigator.clipboard API. This change improves the reliability of the copy functionality within the host folder field component, ensuring a smoother user experience.

…tionality - Updated the `DotHostFolderFieldComponent` to include a "Load more" button for both root-level and child folders, improving pagination and user experience. - Refactored the `onLoadMoreNode` method to handle loading more folders based on the clicked sentinel node's parent. - Modified the component's template to display the new "Load more" button and adjusted styles for better layout. - Enhanced unit tests to cover the new loading behavior and ensure correct functionality of the "Load more" feature. This change significantly improves the usability of the folder selection interface by allowing users to load additional folders seamlessly.

- Refactored the `host-folder-field.component.spec.ts` to enhance readability by adjusting the formatting of the `callScroll` function. - Simplified the `host-folder-field.store.ts` by consolidating array operations for better clarity and maintainability. These changes contribute to cleaner code and improved maintainability of the host folder field component.

…r better service management - Changed the `@Injectable` decorator in `DotEditContentTypeCacheService` to remove the `providedIn: 'root'` option, allowing for more flexible service instantiation. - Removed the `spec.json` file from the `agentic-tools` library, cleaning up unused generated files and reducing clutter in the codebase. These changes enhance service management and maintainability within the application.

- Updated the `host-folder-field-load-more.spec.ts` to improve the test for the "Load more" functionality by ensuring the parent folder name is prefixed correctly and verifying the visibility of the target folder after loading more items. - Modified the `host-folder-field.ts` helper to wait for the folder search response and ensure the button click is handled correctly, enhancing the reliability of the tests. These changes improve the accuracy and reliability of the tests related to folder loading and selection in the host folder field component.

…nt-edit-contentlet

…tname - Modified the test for the folder context pre-fill to retrieve the current site hostname using `apiHelpers.getCurrentSite()`. - Updated the expectation to check that the field label contains the current site's hostname instead of matching a pattern. - Ensured the test verifies the form's functionality with the updated logic.

mergify · 2026-07-14T00:51:07Z

Queued — the merge queue status continues in this comment ↓.

…nt-edit-contentlet

mergify · 2026-07-14T21:25:52Z

…nt-edit-contentlet

…nctionality in DotEditContentHostFolderFieldComponent

…for site resolution - Updated test cases in host-folder-field.store.spec.ts to replace direct calls to service.resolveSiteByHostname with a mock function. - Ensured that the tests handle scenarios where the resolved site cannot be found, improving error handling and test reliability.

…nt-edit-contentlet

- Removed duplicate imports of `patchState` and `unprotected` from `@ngrx/signals` in the host-folder-field component test file. - Cleaned up the test file for better readability and maintainability.

…tentlet' of github.com:dotCMS/core into 36151-implement-new-sitefolder-field-component-edit-contentlet

Use queryEpoch and overlay-open gating so folder/site search refetches after dismissing and reopening the picker with the same term. Co-authored-by: Cursor <cursoragent@cursor.com>

…nt-edit-contentlet

…cated method - Changed the test suite description for clarity by removing the issue number. - Added a call to `searchFolders` in the test to enhance folder selection functionality. - Removed the deprecated `filterTree` method in `HostFolderField` class, promoting the use of `searchFolders` instead.

…tentlet' of github.com:dotCMS/core into 36151-implement-new-sitefolder-field-component-edit-contentlet

…Changes calls - Added `detectChanges` calls in multiple test cases to ensure the component updates correctly after state changes. - Improved the reliability of tests by ensuring the UI reflects the latest state during assertions.

…nt-edit-contentlet

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

nicobytes linked an issue Jul 7, 2026 that may be closed by this pull request

Implement new site/folder field component (Edit Contentlet) #36151

Closed

16 tasks

Merge branch 'main' into 36151-implement-new-sitefolder-field-compone…

300267b

…nt-edit-contentlet

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

Implement new site/folder field component (Edit Contentlet) #36151

Closed

16 tasks

github-actions Bot added the Area : Frontend PR changes Angular/TypeScript frontend code label Jul 7, 2026