Skip to content

fix(daemon): correct dashboard modal button placement and spacing - #101

Merged
sudhirverma merged 4 commits into
mainfrom
fix/dashboard-modal-button-placement
Aug 5, 2026
Merged

fix(daemon): correct dashboard modal button placement and spacing#101
sudhirverma merged 4 commits into
mainfrom
fix/dashboard-modal-button-placement

Conversation

@sudhirverma

@sudhirverma sudhirverma commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Summary

Minor cosmetic/UX fixes to the native Abbenay dashboard's modals, per the UX review notes (AAP-80841 / ANSTRAT-2262). Team decision: no PF6/major redesign needed for this dashboard (intentionally RHDS + Alpine; primary config UI will eventually live in the Portal) — only button placement and modal fixes are in scope here.

  • Separate Cancel from the primary action in all 3 modals (margin-right: auto) so a mis-click can't fire Save/Apply.
  • Add an X close button to the Add/Edit Provider wizard modal (Policy and Config-location modals already had one).
  • Engine picker is single-select — clicking a tile now advances directly to step 2 instead of requiring a separate Next click.
  • Replace the dual-list's shared middle Add/Remove column with per-row Add / Remove / Configure buttons.
  • Remove the duplicate "Back to Models tab" button (dead-code path — always just closed the modal) and fix the mislabeled footer button ("Cancel" instead) when Configure Model is opened from the Models tab.
  • Change input focus color from brand red (#ee0000, same as the error/selected-tile red) to blue (#06c) so a focused field is never mistaken for a validation error.
  • Mark the one required field (Provider Name) with * + a "Required" legend; label Base URL "(optional)".

Out of scope (per team decision): PF6 migration, RH/Ansible masthead branding, tabs-on-grey styling, and the conceptual relationship between MCP Servers/Policies/Tools tabs — these are Portal-integration design questions, not cosmetic fixes.

Commits

  • fix(daemon): correct dashboard modal button placement and spacing — implements all of the above in the single static dashboard file

Test plan

  • npm run lint -w packages/daemon passes locally (0 errors)
  • npm test -w packages/daemon passes locally (804/804, with full permissions — the 3 e2e socket/network tests only fail under my sandboxed dev tool, not in a normal environment)
  • npm run ci:build — static HTML only, no build step touches this file
  • Manually verified end-to-end with a real local Ollama provider/model in dev mode

Fix: https://redhat.atlassian.net/browse/AAP-85338

Address UX review findings (design review doc, AAP-80841/ANSTRAT-2262):
- Separate Cancel from the primary action in all 3 modals so a mis-click
  can't fire Save/Apply.
- Add an X close button to the Add/Edit Provider wizard modal.
- Engine picker is single-select — clicking a tile now advances directly
  instead of requiring a redundant Next click.
- Replace the dual-list's shared middle Add/Remove column with per-row
  Add/Remove/Configure actions.
- Remove the duplicate 'Back to Models tab' button (dead code path) and
  fix the mislabeled footer button when Configure Model is opened from
  the Models tab.
- Change input focus color from brand red to blue so a focused field is
  never mistaken for a validation error.
- Mark the one required field (Provider Name) and label Base URL optional.

PF6 migration and branding are explicitly out of scope per team decision
(dashboard is intentionally RHDS + Alpine; native UI config will move to
the Portal).
@sudhirverma
sudhirverma marked this pull request as draft August 4, 2026 18:11
- Model config edits now happen on a scratch draft (wizardEditingDraft)
  and only commit to wizardEnabledModels on explicit Save — Cancel/Back
  now truly discards in-progress edits instead of mutating live state.
- Rename "Configure Model" flow to save-and-return-to-list with a brief
  confirmation flash, rather than silently applying on every keystroke.
- Wrap rh-tabs in a white card (border + radius) instead of sitting
  directly on the grey page background.
- Pill-shaped buttons (border-radius: 999px) instead of 3px.
- Mark optional fields (Virtual Name, Policy) explicitly as "(optional)".
- Add Provider button right-aligned above the providers list.
…sync

Dashboard MCP Servers tab only let you edit enabled state; adding/removing
a server required hand-editing config.yaml. Add a modal (mirrors the
Add Provider flow) for creating, editing, and deleting mcp_servers entries.

Also fixes McpClientPool.syncWithConfig: a server whose connect attempt
failed was tracked in `statuses` but never added to `clients`, so removing
it from config left a stale error row forever since sync only reconciled
against `clients`. Reconcile against the union of both instead.
Explain what tools are, where they come from, and give clearer next steps when none are registered.
@sudhirverma
sudhirverma marked this pull request as ready for review August 5, 2026 04:55

@sathyapramod sathyapramod 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.

LGTM

@sudhirverma
sudhirverma merged commit daa521f into main Aug 5, 2026
7 checks passed
@sudhirverma
sudhirverma deleted the fix/dashboard-modal-button-placement branch August 5, 2026 05:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants