[Task] ES Search: UX/UI design (parity + improvements)

[hmoreras]

Goal

Produce Figma (or equivalent) mockups for the Angular ES-Search portlet that cover parity with Dojo + UI/UX improvements. Improvements emerge from this task — this is the design's creative mandate.

Inputs

• Output of the current-state audit sub-task (feature parity matrix with ⬆️ Enhance candidates)
• Existing dotCMS admin design language (PrimeNG + Tailwind tokens, see other migrated portlets: dot-categories, dot-tags, dot-plugins)
• Brand/theme: match existing admin portlets

Required mockups

• Main layout: query editor + Run button + toolbar (live toggle, impersonation input, examples link)
• Results tabs: Hits / Aggregations / Raw Response / Suggestions
• Help/Examples modal with sample queries (port content from es-search-help.jsp)
• Empty state (no query run yet)
• Loading state (query in flight)
• Error state (invalid JSON, 4xx/5xx from API)
• Not-licensed state
• Admin-only impersonation control (visible vs hidden)
• Responsive breakpoints (desktop primary; tablet must not break)

Improvements (design's mandate to propose)

Pick at least 3 from the parity matrix ⬆️ Enhance column and mock them up. Examples already on the table:

• Query history sidebar (local/server-persisted)
• Save/share query via URL
• Export results to JSON/CSV
• Keyboard shortcuts (Cmd+Enter to run)
• Dark mode native support
• Split-pane editor/results
• Inline aggregation charts

Deliverable

• Figma link (or exported PNGs) attached to this issue
• Component inventory: list of PrimeNG components used per screen (informs FE spec)
• i18n copy deck: all user-facing strings in English (feeds Language.properties)

Acceptance Criteria

• All required mockups above produced
• At least 3 improvements mocked up and justified
• Design reviewed with FE lead and signed off
• Component inventory delivered
• i18n copy deck delivered (~25-35 keys expected, following esSearch.* prefix)

Out of scope

• Do NOT write Angular code
• Do NOT modify backend

Parent

#34733

[hmoreras]

Design Deliverable

Interactive mockup: https://claude.ai/design/p/a78872af-b740-46ec-a589-35e743413035?file=index.html

Add screenshots below by dragging images into the comment (Raw tab, Help popover, Export dropdown). Two screenshots are attached above (empty state + results table).

---

Screens

1 — Default / Empty State

• Query editor loaded with a sample DSL query (syntax-highlighted JSON)
• Right pane: "Press ⌘↵ to run" hint
• Parameters panel visible at bottom: Wrap Code (off), Live content only (on), User ID or Email (empty)

2 — Results Tab (after Run)

• Stats bar above tabs: Ready · 20 results · 142 ms
• Columns: Name · Status (pill chip, no dot) · Type (plain text) · Identifier · Last Edited
• Status chip colours: Published (green) · Draft (amber) · Review (indigo) · Archived (grey)

3 — Raw Tab

• Full raw Elasticsearch JSON response in scrollable view
• Same stats bar above tabs

4 — Help Popover

• Opens directly below the Help button (tertiary text button with icon)
• Contains sample queries with Copy buttons; dismisses on outside click

5 — Export Dropdown

• Triggered from the Export button in the topbar
• Options: Export JSON / Export CSV

---

Component Inventory

Component	Usage
p-splitter	Horizontal split: editor (left) / results (right)
p-splitter (nested)	Vertical split: editor pane / parameters panel
p-tabs + p-tab	Results / Raw tabs
p-button (primary)	Run — with play icon
p-button (secondary)	Export — dropdown trigger
p-button (text/tertiary)	Help — with help-circle icon
p-toggleswitch	Wrap Code, Live content only
p-chip	Status values (Published / Draft / Review / Archived)
p-datatable + p-column	Results table
p-overlaypanel	Help popover
p-menu	Export dropdown
p-inputtext	User ID or Email

---

i18n Copy Deck (esSearch.* — 32 keys)

esSearch.title=ES Search
esSearch.beta=BETA
esSearch.query.label=Query
esSearch.query.subtitle=Elasticsearch DSL
esSearch.action.help=Help
esSearch.action.export=Export
esSearch.action.run=Run
esSearch.editor.format=Format
esSearch.editor.copy=Copy
esSearch.results.tab=Results
esSearch.results.raw=Raw
esSearch.results.empty=Press \u2318\u21B5 to run
esSearch.results.ready=Ready
esSearch.results.count={0} results
esSearch.results.timing={0} ms
esSearch.table.name=Name
esSearch.table.status=Status
esSearch.table.type=Type
esSearch.table.identifier=Identifier
esSearch.table.lastEdited=Last Edited
esSearch.status.published=Published
esSearch.status.draft=Draft
esSearch.status.archived=Archived
esSearch.status.review=Review
esSearch.parameters.title=Parameters
esSearch.parameters.subtitle=Legacy options applied on top of the query body
esSearch.param.wrapCode=Wrap Code
esSearch.param.wrapCode.tooltip=Wraps the query in a bool/must envelope
esSearch.param.liveOnly=Live content only
esSearch.param.liveOnly.tooltip=Filters results to live/published content
esSearch.param.userId=User ID or Email
esSearch.param.userId.placeholder=user-id or name@example.com
esSearch.export.json=Export JSON
esSearch.export.csv=Export CSV
esSearch.help.title=Help & Examples

---

Improvements Mocked (≥3 required)

1. Split-pane editor/results — resizable p-splitter (horizontal + vertical), each pane independently scrollable
2. Export to JSON/CSV — Export dropdown in topbar (replaces legacy page-level export)
3. Keyboard shortcut ⌘↵ to run — shown as hint in the empty results pane
4. Status-aware result display — colour-coded p-chip pills replace raw status strings in the table

---

Acceptance Criteria Status

• All required mockups produced
• At least 3 improvements mocked up and justified (4 implemented)
• Design reviewed with FE lead and signed off
• Component inventory delivered (12 PrimeNG components)
• i18n copy deck delivered (32 keys, esSearch.* prefix)