Issue 36702 asset picker

[nicobytes]

This pull request introduces a set of improvements and refactorings to the folder tree utilities and related data-access APIs, aimed at enhancing code reuse, maintainability, and consistency across the Content Drive and Host Folder Field features. The changes include moving folder tree logic into shared utilities, updating service providers, and aligning data models.

Core refactoring and utility extraction:

• Introduced new shared utilities folder-tree.utils.ts and folder-tree-load.utils.ts in @dotcms/data-access, centralizing the logic for building, loading, and paginating folder trees. This includes new functions such as generateAllParentPaths, createTreeNode, and buildTreeFolderNodes, as well as utilities for paginated loading and "Load more" node handling. [1] [2]

API and provider updates:

• Updated DotContentDriveService to use Angular's providedIn: 'root' for global availability, and removed it from route-level providers. This ensures the service can be used from dialogs and other contexts without explicit injection in every route. [1] [2]

Imports and dependency cleanup:

• Updated imports in various portlet files to use the new shared utilities from @dotcms/data-access instead of local utility definitions, and cleaned up duplicate or outdated imports for components such as DotFolderListViewComponent. [1] [2] [3] [4]

Data model alignment:

• Extended the TreeNodeContentData model to include additional metadata fields (inode, defaultBaseType, fromTable) for improved folder selection and upload behavior in the Content Drive and AssetPicker.

Constants and type re-exports:

• Refactored and re-exported shared folder tree page size constants from the new utilities, ensuring consistent pagination limits across features, and deprecated local type definitions in favor of those from @dotcms/data-access. [1] [2] [3] [4]

These changes improve code maintainability, reduce duplication, and ensure that folder tree behaviors remain consistent across all consuming features.

This PR fixes: #36702

AssetPicker series — all seven sub-issues are resolved in this PR:

Fixes #36831 — AssetPicker 1/7: Migrate DotFolderListView to @dotcms/ui
Fixes #36832 — AssetPicker 2/7: Lift folder-tree helpers and harden drive data-access
Fixes #36833 — AssetPicker 3/7: Decouple Content Drive toolbar chrome for AssetPicker reuse
Fixes #36834 — AssetPicker 4/7: Headless browse store (no URL) for AssetPicker
Fixes #36835 — AssetPicker 5/7: Build DotAssetPicker shell in @dotcms/ui
Fixes #36836 — AssetPicker 6/7: File/Image entry configs, silent mime, CT limits, global last path
Fixes #36837 — AssetPicker 7/7: Wire AssetPicker into Edit Content File/Image fields

[claude]

Claude finished @nicobytes's task in 2m 40s —— View job

---

Code Review — AssetPicker PR

I focused on the AssetPicker store/features, the lifted folder-tree utilities, and the File/Image field wiring, and rechecked the earlier Copilot findings against the current diff.

New Issues

• 🟡 Medium: core-web/libs/ui/src/lib/components/dot-asset-picker/dot-asset-picker.component.ts:176 — confirm() subscribes to getContentletByInodeWithContent(asset.inode) with a next-only handler and no error callback. If that hydration request fails (network error, deleted/permission-changed inode between listing and confirm), nothing happens: the dialog stays open, no toast fires, and writeLastAssetLocation/close() never run — the user clicks Confirm and sees no response. Every other subscribe in this component (#uploadByBaseType) handles the error branch; this one should too (show an error toast, keep the dialog open). Fix this →

Existing

• 🟡 Medium: core-web/libs/data-access/src/lib/dot-folder/folder-tree.utils.ts:96 — const isLeaf = (levelIndex) => folderHierarchyLevels.length >= levelIndex + 1; is true for every valid levelIndex (0 … length−1), so every node on the target path is marked leaf even when child levels are attached below it, hiding the PrimeNG expand toggle. It should only be true for the final level (levelIndex === folderHierarchyLevels.length - 1). Note: this is carried over verbatim from origin/main's tree-folder.utils.ts — not a regression introduced here — but this PR promotes it into a shared @dotcms/data-access util, so its blast radius now widens to every consumer. Worth fixing while it's being lifted. Fix this →

Resolved

• ✅ dot-asset-picker.store.ts:149 — setSearch now resets path: undefined and calls store.selectRootNode(), so the tree highlight and $targetFolder follow the site-wide scope instead of staying pinned to the old folder.
• ✅ ui/src/index.ts:11 (AssetPicker not wired) — dot-file-field.component.ts:830 showSelectExistingFileDialog() now opens DotAssetPickerComponent with buildAssetPickerConfig({ mode, site, title, languageId }); the legacy DotBrowserSelectorComponent path for File/Image is gone.
• ✅ dot-asset-picker-toolbar.component.ts:58 — $allowedBaseTypes now reads config.allowedBaseTypes (never baseTypes), and buildAssetPickerConfig sets allowedBaseTypes to both asset base types in both modes, so a File field restricts the selector to DOTASSET/FILEASSET while starting with no pre-selection.
• ✅ with-asset-browse.feature.ts:120 — a new request now clears selectedAsset: null in the LOADING tap, so Confirm can't return a stale asset that scrolled out of the list.
• ✅ with-asset-folder-tree.feature.ts:83/97 — success work is in tap before catchError, and the error path returns EMPTY and sets ERROR; a failed folder load is no longer masked as a successfully-loaded empty tree.
• ✅ dot-asset-picker.component.html:22 (double-click) — routed through onSelect([$event]) (select-only) intentionally, documented as "confirming stays an explicit action" because DotFolderListView.doubleClick also fires on single title/thumbnail clicks. Reasonable by design.

Nice work overall — the store composition ordering, cursor-invalidation on sort/page-size change, and the error-before-success ordering in the folder-tree feature are all handled carefully. The one blocking-ish item is the missing error branch on confirm(); the isLeaf predicate is worth fixing while the util is being moved but is pre-existing.

· branch issue-36702-asset-picker

[Copilot]

Pull request overview

This PR refactors the existing Folder List View used by Content Drive into a reusable presentational component in @dotcms/ui, adding a single-selection mode intended for the upcoming AssetPicker (while preserving current Content Drive behavior via the default multiple selection mode).

Changes:

• Moved Folder List View domain-agnostic types/constants into @dotcms/ui and re-exported them from the Content Drive UI package for compatibility.
• Added selectionMode: 'single' | 'multiple' support to the table (checkboxes in multiple mode, radios in single mode) and normalized emitted selections to an array.
• Updated Content Drive shell imports and updated/extended unit tests accordingly.

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
core-web/libs/ui/src/lib/components/dot-folder-list-view/models.ts	Introduces shared column typing and selectionMode model for the Folder List View.
core-web/libs/ui/src/lib/components/dot-folder-list-view/constants.ts	Defines header column config and drag MIME type local to the component folder.
core-web/libs/ui/src/lib/components/dot-folder-list-view/mocks.ts	Moves test mocks alongside the component.
core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.ts	Adds selectionMode input, normalizes selection output, and updates internal imports to local UI sources.
core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.html	Switches checkbox vs radio rendering based on selectionMode and updates selection binding.
core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.scss	Fixes relative SCSS imports to match the libs layout.
core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.spec.ts	Updates tests for the new selection model and adds coverage for single-selection behavior.
core-web/libs/ui/src/index.ts	Exposes Folder List View component + related models/constants from @dotcms/ui.
core-web/libs/portlets/dot-content-drive/ui/src/lib/shared/models.ts	Removes Folder List View column typing now owned by @dotcms/ui.
core-web/libs/portlets/dot-content-drive/ui/src/lib/shared/constants.ts	Removes list-view constants now owned by @dotcms/ui.
core-web/libs/portlets/dot-content-drive/ui/src/index.ts	Re-exports the Folder List View API surface from @dotcms/ui for Content Drive consumers.
core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.ts	Updates imports to use @dotcms/ui for the presentational list component/types.
core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.spec.ts	Aligns test imports with the updated component export location.

[Copilot]

Pull request overview

Copilot reviewed 76 out of 78 changed files in this pull request and generated no new comments.

Suppressed comments (1)

core-web/libs/ui/src/lib/components/dot-asset-picker/store/features/with-asset-folder-tree.feature.ts:97

• loadFolders sets foldersStatus to ERROR in catchError, but then the subscribe block unconditionally patches it back to LOADED (because catchError returns an empty array). This masks folder-tree failures and makes the UI indistinguishable from a successful empty tree.

[Copilot]

Pull request overview

Copilot reviewed 97 out of 101 changed files in this pull request and generated 2 comments.

Suppressed comments (5)

core-web/libs/ui/src/lib/components/dot-asset-picker/components/dot-asset-picker-toolbar/dot-asset-picker-toolbar.component.ts:58

• This returns null for File mode because that config intentionally has no preselected base types, but null makes the selector offer every base type, including Content and Widget. The acceptance criteria restrict the selector in both File and Image modes; selection and allowed options must be separate so File starts with no selection while still only offering DOTASSET/FILEASSET.
  core-web/libs/ui/src/lib/components/dot-asset-picker/dot-asset-picker.component.html:22
• Double-click only selects the row, whereas the AssetPicker acceptance criteria require it to select and confirm. Note that DotFolderListViewComponent.doubleClick is also emitted by single clicks on the title/thumbnail, so directly calling confirm() here would close on a single click; introduce a distinct actual-double-click confirmation path without restoring editor navigation.
  core-web/libs/data-access/src/lib/dot-folder/folder-tree.utils.ts:96
• This predicate is true for every valid level (length >= index + 1), so every node on the target path is marked as a leaf even when child levels are attached below it. PrimeNG then hides the expansion control, making expanded ancestors impossible to reopen after collapse. Only the final hierarchy level should be marked as a leaf.

    const isLeaf = (levelIndex: number) => folderHierarchyLevels.length >= levelIndex + 1;

core-web/libs/ui/src/lib/components/dot-asset-picker/store/features/with-asset-browse.feature.ts:120

• Starting a new request leaves selectedAsset untouched. Since the list clears its own PrimeNG selection silently when items changes, changing folder/filter/page/sort can leave Confirm enabled for an asset no longer visible and return that stale asset. Clear the picker selection whenever a new browse request starts (or when its result replaces items).
  core-web/libs/ui/src/lib/components/dot-asset-picker/store/features/with-asset-folder-tree.feature.ts:83
• The error status is immediately overwritten: catchError emits an empty hierarchy, so the subscription runs and patches foldersStatus to LOADED. A failed folder request therefore looks like a successfully loaded empty tree. Stop the success callback from running for the error fallback.