Skip to content

refactor(ui): migrate DotFolderListView to @dotcms/ui - #36896

Open
nicobytes wants to merge 3 commits into
mainfrom
issue-36831-migrate-dotfolderlistview-to-dotcms-ui
Open

refactor(ui): migrate DotFolderListView to @dotcms/ui#36896
nicobytes wants to merge 3 commits into
mainfrom
issue-36831-migrate-dotfolderlistview-to-dotcms-ui

Conversation

@nicobytes

Copy link
Copy Markdown
Member

Summary

  • Move DotFolderListView (plus column models, HEADER_COLUMNS, DOT_DRAG_ITEM) from @dotcms/portlets/content-drive/ui into @dotcms/ui so Content Drive and AssetPicker can share the same list.
  • Add selectionMode input (single | multiple, default multiple) with radio vs checkbox UI; selectionChange always emits DotContentDriveItem[].
  • Point Content Drive shell at @dotcms/ui and keep thin re-exports from content-drive/ui for compatibility (e.g. dropzone).

Closes #36831
Related epic: #36702 (AssetPicker 1/7)

Test plan

  • pnpm exec nx test ui --testPathPatterns=dot-folder-list-view
  • pnpm exec nx test content-drive-ui
  • pnpm exec nx test portlets-content-drive --testPathPatterns=dot-content-drive-shell
  • pnpm exec nx test portlets-content-drive --testPathPatterns=dot-content-drive-dropzone
  • Manual: Content Drive list still multi-selects, paginates, sorts, and drags as before

Made with Cursor

- Extracted DotFolderListView component and related models/constants/mocks into the new `@dotcms/ui` library.
- Updated imports in the Content Drive shell to reference the new location.
- Introduced `selectionMode` input to support both single and multiple selection.
- Re-exported necessary symbols from `@dotcms/ui` in the Content Drive UI for compatibility.
- Added tests for the new component and selection mode functionality.

This migration aims to share the folder/asset list component between Content Drive and future AssetPicker implementations, enhancing code reuse and maintainability.
Copilot AI lite review requested due to automatic review settings August 5, 2026 16:43

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refactors the Content Drive folder list so it becomes a shared, reusable UI component under @dotcms/ui, enabling reuse by both Content Drive and the upcoming AssetPicker while preserving backward compatibility via thin re-exports from @dotcms/portlets/content-drive/ui.

Changes:

  • Migrates DotFolderListView and its supporting column models/constants into core-web/libs/ui and exports them from @dotcms/ui.
  • Adds selectionMode ('single' | 'multiple', default 'multiple') and normalizes selectionChange to always emit DotContentDriveItem[].
  • Updates Content Drive shell imports to consume the component/types from @dotcms/ui, while keeping @dotcms/portlets/content-drive/ui re-exports for compatibility.

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 model/types and selectionMode type for the migrated list view.
core-web/libs/ui/src/lib/components/dot-folder-list-view/mocks.ts Provides local test fixtures for the list view specs under @dotcms/ui.
core-web/libs/ui/src/lib/components/dot-folder-list-view/constants.ts Moves HEADER_COLUMNS and DOT_DRAG_ITEM into @dotcms/ui to support shared consumers.
core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.ts Adds selectionMode, normalizes selection emission to arrays, and adjusts selection handling for PrimeNG single vs multiple modes.
core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.html Switches table selection binding + renders checkbox vs radio UI based on selectionMode.
core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.scss Fixes SCSS import paths after moving the component into libs/ui.
core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.spec.ts Updates tests for new file locations and adds coverage for selectionMode behavior.
core-web/libs/ui/src/index.ts Exports the migrated list view component/models/constants from @dotcms/ui.
core-web/libs/portlets/dot-content-drive/ui/src/lib/shared/models.ts Removes list-view-specific models now hosted in @dotcms/ui.
core-web/libs/portlets/dot-content-drive/ui/src/lib/shared/constants.ts Removes list-view-specific constants now hosted in @dotcms/ui.
core-web/libs/portlets/dot-content-drive/ui/src/index.ts Re-exports list view symbols from @dotcms/ui to maintain compatibility for existing consumers.
core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.ts Updates imports to consume DotFolderListView* from @dotcms/ui.
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 new @dotcms/ui location for the list view component.

@nicobytes

Copy link
Copy Markdown
Member Author

@copilot resolve the merge conflicts in this pull request

…otfolderlistview-to-dotcms-ui

# Conflicts:
#	core-web/libs/portlets/dot-content-drive/ui/src/lib/shared/constants.ts

Co-authored-by: nicobytes <7611944+nicobytes@users.noreply.github.com>

Copilot AI commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

@copilot resolve the merge conflicts in this pull request

Resolved in 8bd3e7e.

@github-actions github-actions Bot added the Area : Frontend PR changes Angular/TypeScript frontend code label Aug 5, 2026
@claude

claude Bot commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Claude finished @nicobytes's task in 52s —— View job


SDK Compatibility Analysis

  • Read SDK breaking-change categories reference
  • Get full PR diff
  • Analyze diff against each category
  • Post findings or conclude no breaking changes

Result: No SDK breaking changes detected.

This PR (e95d1e5e...89cbfb49) only touches core-web/libs/ui/src/lib/components/dot-folder-list-view/**, core-web/libs/portlets/dot-content-drive/**, and their spec files — a pure Angular UI refactor moving DotFolderListView into @dotcms/ui and adding a selectionMode input. Confirmed via git diff ... -- '*.java' 'core-web/libs/sdk/**' that no backend Java code or @dotcms/* SDK packages (client, react, angular, uve) are touched.

None of the reviewed categories apply:

  • G-1/G-2/G-3 (GraphQL page/content API) — no changes to page-api.ts, GraphQL schema, or resolvers.
  • R-1 (REST response shape) — no changes to /api/v1/nav, /api/v1/content, or /api/v1/page/* response models.
  • U-1/U-2 (UVE postMessage protocol) — no changes to events.ts, DotCMSUVEAction, or __DOTCMS_UVE_EVENT__.
  • H-1 (compatibility headers) — no changes to SdkVersionWebInterceptor or sdk-compatibility.ts.

This is an admin-UI-only (dotcms-ui consumer, not SDK) internal component refactor — falls squarely under the "Non-Breaking Examples" calibration list. No comment or label added.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Area : Frontend PR changes Angular/TypeScript frontend code

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

AssetPicker 1/7: Migrate DotFolderListView to @dotcms/ui

3 participants