enhancement
major
minor
defect
critical
major
minor
minor
#29961
React applications include modules from the classic interface (self-service, WYSIWYG editor, code editor, search, monitoring, AI administration)
Context
An application with a React-only user interface (tl-layout-view, Starter tl-starter-react, Archetype tl-archetype-app with ui=react, #29704) should not contain any modules intended solely for the classic user interface (classic layouts, controls, CKEditor, Ace Editor, JFreeChart/Chart.js charts).
Issue
Several modules required by React applications contained the classic UI in addition to their UI-independent components, thereby pulling classic modules into every React application:
- tl-layout-view-selfservice → tl-security-selfservice → tl-layout-formeditor, tl-layout-wysiwyg.
- tl-starter-react, tl-layout-react-wysiwyg, tl-service-openapi-common, tl-presentation → tl-model-wysiwyg / tl-layout-wysiwyg (CKEditor, ext-com-ckeditor).
- tl-bpe (without a user interface since #30065, used by tl-bpe-view ) → tl-model-wysiwyg (CKEditor) and via tl-xio → tl-layout-codeedit (Ace, ext-io-c9-ace).
- tl-addons-loginmessages-view → tl-addons-loginmessages → tl-model-wysiwyg (CKEditor).
- tl-model-search (TL-Script) → tl-layout-codeedit (Ace) and tl-reporting-flex (JFreeChart).
- tl-layout-view → tl-monitoring (classic monitoring interface, tl-reporting-flex).
- tl-ai-core → tl-chart-chartjs (classic AI administration).
- tl-parent-app provided each application with the test JAR tl-layout-scripting-template (scripted tests for the classic interface).
The archetype also rejected `useBPE=true` for ` ui=react ` (“BPE has no React UI”) and added only the classic `tl-bpe-app` for the process engine, even though #30065 introduced a React interface for the BPE with tl-bpe-view.
Solution
The UI-independent parts are separate modules; the classic UI is contained in its own modules, which are provided only to classic applications. Package names, resource paths, and migration module names remain unchanged; stored data does not require migration.
| = New Module = | = Content = | = Classic Part = |
| tl-security-selfservice-core | Invitation model, InvitationModule (password reset, email templates), schema, migrations, developer articles on authentication/self-service | tl-security-selfservice (dialogs, login hook, sendInvitation, admin layouts) |
| tl-layout-wysiwyg-core | HTML value type StructuredText / I18NStructuredText, bindings, label/PDF/Excel renderers, TL script functions | tl-layout-wysiwyg (CKEditor, StructuredTextConfigService, Controls) |
| tl-model-wysiwyg-core | Attribute types tl.model.wysiwyg:Html / tl.model.i18n:I18NHtml, storage, migrations, attribute settings without a user interface | tl-model-wysiwyg (Field/Tag Providers, Report Controls) |
| tl-monitoring-core | Log parser for the React UI’s log view, migrations | tl-monitoring |
| tl-addons-loginmessages-core | Model and TL script functions for login messages | tl-addons-loginmessages (Login hook LoginMessagesHook, layouts, theme) |
| tl-model-search-classic | – (classic part) | Model-based search, script console, Ace TL script editor; includes tl-layout-codeedit and tl-reporting-flex |
| tl-ai-classic | – (classic part) | Agent Editor, Activity Monitor, Policy Editor of the classic interface; includes tl-chart-chartjs |
| tl-xio-classic | – (classic part) | XMLImportCommand (XML import with Ace editor); includes tl-layout-codeedit |
Additional changes:
- The persistent type tl.reporting:FlexReport (saved searches) is located in tl-reporting-common so that existing React application databases continue to contain it.
- tl-starter-react includes tl-model-wysiwyg-core; tl-starter-classic additionally includes tl-model-wysiwyg and tl-model-search-classic; tl-layout-formeditor includes tl-model-search-classic, and tl-chat-classic includes tl-ai-classic.
- tl-bpe depends on tl-model-wysiwyg-core; tl-bpe-classic includes the HTML editor for classic forms.
- For the process engine (useBPE, now enabled by default for every interface), the archetype adds tl-bpe-view if the application has a React interface, and tl-bpe-app if it has a classic interface.
- Only applications with classic scripted tests declare the test JAR tl-layout-scripting-template; the archetype includes it for ui=classic and ui=both.
- The React interface’s configuration editor (tl-layout-configedit) evaluates annotations for a configuration property based on the annotation customizations configured in the application (similar to the classic EditorFactory). For example, the “features” property of the WYSIWYG configuration gets its selection from the configuration of the classic module.
- The archetype’s integration test checks the resolved dependencies: the React sample application (all options, including `useBPE`) does not contain any of the classic modules, whereas the classic sample applications do.
Test
- `mvn dependency:list ` for an application generated with the archetype (ui=react, all options) does not include any of the modules `tl-layout-formeditor`, `tl-security-selfservice`, `tl-layout-wysiwyg`, tl-model-wysiwyg, ext-com-ckeditor, tl-layout-codeedit, ext-io-c9-ace, tl-reporting-flex, tl-monitoring, tl-chart-chartjs, tl-model-search-classic, tl-ai-classic, tl-xio-classic, tl-addons-loginmessages, tl-bpe-classic, tl-bpe-app, tl-bpe-modeler, tl-layout-scripting-template; The dependency tree for tl-demo-react does not contain tl-model-wysiwyg, tl-layout-wysiwyg, or ext-com-ckeditor.
- React application: Forgot password, edit HTML attribute (TipTap), TL Script code editor, log view, and login messages all work.
- Classic application (tl-demo): Model-based search with Ace Editor, script console, CKEditor, monitoring charts, invitations, password reset, and XML import are working.
Migration
Applications that use tl-starter-classic, tl-layout-formeditor, or tl-chat-classic do not need to make any changes.
Applications with a classic interface that declare their modules individually and do not use any of these modules should add the following, depending on the features used:
- tl-model-search-classic: Model-based search, script console, Ace Editor for TL-Script, code, and JSON attributes, as well as @Code configuration properties. If the module is missing, these attributes will be edited without a code editor and without an error message.
- tl-model-wysiwyg: CKEditor for HTML attributes (previously available via tl-starter-react, tl-service-openapi-common, or tl-bpe, as applicable).
- tl-ai-classic: Classic AI administration (previously part of tl-ai-core).
- tl-monitoring: Classic monitoring interface (previously available via tl-layout-view ).
- tl-xio-classic: the command `com.top_logic.xio.command.XMLImportCommand ` (previously part of tl-xio); the class name and configuration remain unchanged.
Applications that use tl-addons-loginmessages do not need to make any changes; the module includes tl-addons-loginmessages-core.
Custom code that uses classes from the classic components (e.g., SearchSelectorComponent, TLScriptCodeEditorControl, StructuredTextControl, StructuredTextConfigService) requires the respective classic module as a dependency; package and class names remain unchanged.
Removed transitive dependencies: tl-model-search no longer includes tl-reporting-flex (JFreeChart reports, classes under com.top_logic.reporting.flex) or tl-layout-codeedit; tl-ai-core no longer includes tl-chart-chartjs (Chart.js charts for the classic interface). An application that previously obtained these modules only through this means must now declare them itself or include tl-model-search-classic or tl-ai-classic.
Applications with classic Scripted Tests (*.script.xml) that were not generated by the archetype must declare the test JAR themselves: {{{#!xml <dependency> <groupId>com.top-logic</groupId> <artifactId>tl-layout-scripting-template</artifactId> <type>test-jar</type> <scope>test</scope> </dependency> }}}