fix(content-drive): folder dialog overlays clipped and file extensions not persisting (#35578)

[ihoffmann-dot]

Fixes two front-end defects reported by QA on the Content Drive folder dialog (Create Folder / Folder Settings → Upload Behavior tab).

Proposed Changes

1. Default File Asset Type dropdown rendered inside the dialog

The p-select (and the p-autoComplete next to it) used PrimeNG's default appendTo="self", so their overlay panels were laid out inside the dialog's scrolling content: the panel was clipped at the dialog edge, and the wheel events over the options list scrolled the dialog instead of the list — which closed the panel.

• appendTo="body" on both p-select and p-autoComplete, matching what the rest of Content Drive already does for overlays (toolbar menus, field filters, context menus).

2. Allowed File Extensions kept coming back to the previously saved value

Adding an extension wrote the whole array back through the form control (control.setValue([...current, value])). PrimeNG's AutoComplete.writeControlValue() re-derives its displayed model from the currently filtered suggestions, so every already-selected extension outside the active filter was dropped from the chips while staying in the form value. With *.jpg saved and *.png typed, the chips showed *.png but the payload still carried *.jpg — so the old extension reappeared on the next load.

The value is now added through the AutoComplete's own model, which keeps the control and the chips in sync.

3. A saved extension the suggested list does not carry was invisible and unremovable

AutoComplete.writeControlValue() rebuilds the chips from the current suggestions on every write to the control, keeping only the values it can find there — and loading a folder is exactly such a write. With *.jpg,*.svg saved, the field rendered only *.jpg: *.svg stayed in the form value but had no chip, so the user could neither see it nor remove it, and it was sent straight back on save. Same class of desync as defect 2, reached through the load path rather than the add path.

• The suggestion list now starts empty rather than preloading SUGGESTED_ALLOWED_FILE_EXTENSIONS; onCompleteMethod fills it per keystroke. With nothing to match against, PrimeNG keeps the written value verbatim and the chips always mirror the control.
• Nothing is lost visually: the panel only opens once a keystroke has produced suggestions (handleSuggestionsChange is gated on loading), and onArrowDownKey returns early unless the panel is already open — so the preloaded list was never reachable before typing.

4. Removing all extensions could not be persisted

The dialog omitted fileMasks when the list was empty, and WebAssetHelper guards the write with UtilMethods.isSet(meta.fileMasks()) — whose Collection overload is false for an empty list too. Absent and empty were both ignored, so the saved extensions came back on the next load and an explicit "clear" was impossible.

• Editing a folder down to no extensions now sends a single blank mask, which String.join(",", …) turns into an empty string server-side. That is how a folder with no restrictions is already stored: FolderFactoryImpl.matchFilter treats a blank value as "allow everything", the upsert persists it verbatim, and the dialog reads it back as no extensions.
• On create the field stays omitted, since there is nothing to clear.

This is a workaround for the payload contract, not the contract itself. An empty array is what should mean "clear", which needs the backend guard to distinguish null (absent, leave untouched) from an explicit empty list. fileMasks is @Nullable, so Immutables keeps absent as null and the two are distinguishable whenever that change is made. Raised for team discussion rather than filed.

5. Folder-tree toggle now follows the UVE pattern

Not part of the QA failure — picked up in the same pass because the toggle was drawing a bespoke icon and behaving unlike every other panel toggle in the product.

There were two buttons pretending to be one: the toolbar's copy collapsed to zero width once the tree expanded, and a second copy inside the sidebar header took over the same screen position. Both drew a custom tree-folder.svg sprite that never changed with state.

• One button, always beside the search input, whether the tree is open or closed. $togglerStyles and the conditional grid gaps are gone, along with the orphaned $treeExpanded.
• The sidebar's duplicate is removed and a site icon takes its slot, carrying the toggle button's own classes rather than a hardcoded box so the footprint tracks the theme and the site name keeps the indent that lines it up with the folder rows.
• The glyphs are UVE's own left_panel_open / left_panel_close assets, not Material Symbols ligatures: that pair carries the primary blue, and the two files differ in how much of the panel is filled, which is the state cue a single font glyph cannot express.
• The icon renders from isTreeVisuallyExpanded, not isTreeExpanded — the Edit Content side panel can force the tree collapsed on a narrow viewport without touching the user's stored preference, and the glyph has to follow what is on screen. Clicking still toggles the preference.
• The unreferenced tree-folder.svg is deleted.

Checklist

• Tests
• Translations — not needed, no copy changes
• Security Implications Contemplated — none, presentation-only changes

Additional Info

Unit tests in dot-content-drive-dialog-folder.component.spec.ts now drive the real PrimeNG input (typing + keydown) instead of synthetic handler calls, and assert that the rendered chips match the form value.

Enter is now dispatched with code: 'Enter', not just key. PrimeNG's key handler switches on code while the (keydown.enter) binding matches on key, so the earlier events exercised only our handler and skipped the real interleaving, where PrimeNG handles the same press first on the inner input.

The regression test for defect 3 binds folder at creation time because that is how the shell opens this dialog, and the defect depends on that ordering: the effect that loads the folder runs before PrimeNG's initial control write, so a fix applied inside the effect gets clobbered.

Out of scope / follow-up:

• Committing the typed text on blur (click outside the field) is deliberately not part of this PR. It never worked before either — PrimeNG's addOnBlur only applies when typeahead is off, which is not the case here — so adding it would be new behavior rather than a fix for the reported defect. Extensions are added with Enter or by picking a suggestion, exactly as before; the bug being fixed is what happened after the extension was added.

main is merged in (through 4d49cfe).

Related to #35578

🤖 Generated with Claude Code

This PR fixes: #35578

This PR fixes: #35578

[claude]

Claude finished @zJaaal's task in 34s —— View job

---

SDK Compatibility Analysis

• Read SDK breaking-change categories reference
• Get full PR diff (origin/main range)
• Analyze diff against each category
• Post findings or conclude no breaking changes

Result: No SDK breaking change detected.

All 16 changed files are confined to:

• core-web/libs/portlets/dot-content-drive/** — the Content Drive admin portlet (Angular UI in dotcms-ui): folder dialog template/component/spec, sidebar component/spec, tree-toggler component/spec, toolbar component/spec, and a deleted unused SVG asset (tree-folder.svg).
• core-web/apps/dotcms-ui-e2e/src/pages/contentDrive.page.ts — e2e page-object test helper.
• dotCMS/src/main/webapp/WEB-INF/messages/Language.properties — two new admin-UI copy strings.

None of this touches any surface tracked by SDK_BREAKING_CHANGE_CATEGORIES.md:

• No GraphQL schema/query changes (graphql.page / graphql.content) — G-1/G-2/G-3 N/A.
• No /api/v1/nav, /api/v1/content, or /api/v1/page/* REST response shape changes — R-1 N/A.
• No UVE postMessage protocol changes (__DOTCMS_UVE_EVENT__ / DotCMSUVEAction) — U-1/U-2 N/A.
• No changes to SdkVersionWebInterceptor, X-DotCMS-Version/X-DotCMS-Min-SDK headers, or compareVersions()/sdk-compatibility.ts — H-1 N/A.

This matches the doc's "Non-Breaking Examples" bucket directly: admin-UI (dotcms-ui)-only changes plus test-only changes, not consumed by any @dotcms/* SDK. No comment or label added per instructions.

[zJaaal]

I just polished some accessibility issues and added a feedback of the icons open/close sidebar pattern.

Ivan made a great work! 🚀