Migrate 'Rules' portlet UI to PrimeNG (Angular 21)

[hmoreras]

Goal

Migrate the existing Rules portlet UI so it looks and behaves correctly using PrimeNG and Angular 21, aligned with the rest of the modernized DotCMS UI.

http://localhost:8080/dotAdmin/#/rules or http://localhost:8080/dotAdmin/#/fromCore/rules

Background / Context

We are updating legacy portlets to the new UI stack. The Rules portlet currently has visual/layout inconsistencies and does not match PrimeNG styling/UX expectations. The portlet uses a module-based architecture (RuleEngineModule) and needs PrimeNG migration.

Scope

• Update the Rules portlet components/templates/styles to use PrimeNG components and patterns.
• Ensure layout, spacing, typography, and interactions match the modern UI.
• Keep the existing functional behavior intact unless otherwise noted.

Components to Migrate

Main Screens:

• Rules Engine (AppRulesComponent) - /rules or /fromCore/rules
• Rule Engine Container (RuleEngineContainer) - Container component
• Rule Engine (RuleEngineComponent) - Main rule engine component

Sub-components:

• RuleComponent - Individual rule component
• RuleActionComponent - Rule action component
• ConditionComponent - Condition component
• ConditionGroupComponent - Condition group component
• ServersideCondition - Server-side condition
• VisitorsLocationComponent - Visitors location component
• VisitorsLocationContainer - Visitors location container
• ModalDialogComponent - Modal dialog
• AreaPickerDialogComponent - Area picker dialog
• AddToBundleDialogComponent - Add to bundle dialog
• AddToBundleDialogContainer - Add to bundle dialog container
• Dropdown - Custom dropdown
• InputDate - Date input
• RestDropdown - REST dropdown

Current PrimeNG Dependencies:

• AutoCompleteModule
• ButtonModule
• DatePickerModule
• DialogModule
• SelectModule
• ToggleSwitchModule
• InputTextModule
• MenuModule
• MessageModule
• MultiSelectModule
• TooltipModule

Location: libs/dot-rules/src/lib/

Requirements

• Use PrimeNG components where applicable (tables, dialogs, buttons, inputs, dropdowns, toast/messages, etc.).
• Replace legacy PrimeNG module imports with Angular 21 standalone component patterns where applicable.
• Consider migrating from module-based architecture to standalone components if feasible.
• Accessibility basics: keyboard navigation, focus states, proper labels/aria where needed.
• No regressions in functionality (rule creation, editing, conditions, actions, filtering, etc.).

Acceptance Criteria

• Rules portlet UI matches PrimeNG look & feel and is consistent with the rest of the app.
• No console errors in dev.
• All components use modern PrimeNG patterns (Angular 21 compatible).
• Add/update tests where the project already has coverage and ensure they pass.

[github-actions]

PRs linked to this issue

• WIP: Migrate Rules Portlet UI to PrimeNG 21 and Angular 21 by @zJaaal

PRs linked to this issue

• Issue 34251: Migrate Rules Portlet UI to PrimeNG/Angular 21 by @zJaaal
• WIP: Migrate Rules Portlet UI to PrimeNG 21 and Angular 21 by @zJaaal