Dev tools consistency: remove dark mode from velocity-playground and persist last query across query-tool, es-search, and velocity-playground
@AP2300 is already working on this.
Since Jul 22, 2026.
- Dominant language
- Java
- Stars
- 970
- Forks
- 486
- Avg merge
- 3d 33m
- Merged PRs (30d)
- 170
Description
Description
Two consistency gaps across the migrated dev-tool portlets — dot-query-tool, dot-es-search, and dot-velocity-playground — that should be addressed together so the three portlets behave uniformly.
1. Remove dark mode from dot-velocity-playground
Only dot-velocity-playground ships a dark theme toggle; the other two dev tools do not. This creates an inconsistent UX across otherwise-sibling portlets. Remove the dark mode from dot-velocity-playground so all three follow the platform's default theming.
2. Persist the last query per portlet — homogeneous across the three
Users lose their in-progress work when they leave and return to any of these portlets. Dev-tool queries (Lucene, ES JSON, VTL) are complex and time-consuming to recompose, so the last query should be restored when the user comes back to the portlet.
Deliver a single, shared implementation used by all three portlets, backed by localStorage. dot-velocity-playground already persists splitter ratio and history via localStorage (readJson / writeJson utilities in dot-velocity-playground.utils.ts) — extract that pattern into a shared location and reuse it across the three portlets.
Suggested approach
- Promote the persistence utilities (or wrap them as a
withPersistedQuery()SignalStore feature) intolibs/data-access/orlibs/ui/so all three portlets consume the same helper. - Key naming convention:
dotcms.devtools.{portlet}.lastQuery(e.g.dotcms.devtools.query-tool.lastQuery). - Debounce writes (~300 ms) while the user is typing.
- Load and restore the last query on portlet init.
- Provide an explicit "Clear" action per portlet that removes the stored value.
- Per-portlet payloads:
dot-query-tool: Lucene query string (+ minimal filters if any).dot-es-search: ES query JSON.dot-velocity-playground: VTL body — reconcile with existing history/splitter storage, do not duplicate.
Acceptance Criteria
- Dark mode / dark theme toggle is removed from
dot-velocity-playground(UI, config, and any related code paths). - All three portlets (
dot-query-tool,dot-es-search,dot-velocity-playground) render with the same default theming; no portlet-specific theme switch remains. - A shared persistence helper exists in a shared lib (
libs/data-access/orlibs/ui/) — not duplicated per portlet. - Each of the three portlets restores the last query on load from
localStorage. - Each portlet saves the current query to
localStorageon change (debounced ~300 ms). - Each portlet exposes a "Clear" action that removes the stored value.
- Storage keys follow the convention
dotcms.devtools.{portlet}.lastQuery. -
dot-velocity-playgroundexistinglocalStorageusage (history, splitter ratio) is reconciled with the new helper — no duplicated storage for the same data. - Unit tests cover: load-on-init, save-on-change (debounced), clear action, and corrupt / missing storage value handling.
- Manual QA: reload the browser after typing a query in each portlet and confirm the query is restored.
Priority
Medium — quality-of-life fix for power users of the dev tools; not blocking.
Additional Context
Existing persistence pattern to draw from: libs/portlets/dot-velocity-playground/src/lib/dot-velocity-playground.utils.ts (readJson, writeJson, HISTORY_STORAGE_KEY, SPLITTER_STORAGE_KEY).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.