Skip to content

fix: Compare - degrade-routines on MariaDB 1558 + dark-mode dropdowns (#218, #219) - #231

Merged
EVWorth merged 1 commit into
mainfrom
fix/218-219-compare-bundle
Jul 20, 2026
Merged

fix: Compare - degrade-routines on MariaDB 1558 + dark-mode dropdowns (#218, #219)#231
EVWorth merged 1 commit into
mainfrom
fix/218-219-compare-bundle

Conversation

@EVWorth

@EVWorth EVWorth commented Jul 20, 2026

Copy link
Copy Markdown
Owner

What

Two related Compare-feature bugs landed together:

# Bug Fix
#218 Compare dropdowns render white in dark mode; Source/Target labels nearly invisible color-scheme on theme blocks; dark muted text contrast bump; disabled-state opacity rebalance
#219 Compare fails entirely against MariaDB with stale mysql.proc (error 1558), even though tables/views/triggers would have diffed fine Routines fetch split out into its own try/catch per side + structured warning + opt-out toggle

Why together

Both bugs surface in the Compare UI in the same place. Knocked out back-to-back while context was fresh.

#218 details

src/styles/globals.css:

  • Add color-scheme: dark to dark theme block. Add color-scheme: light to light theme block. Without these, Chromium uses the OS color scheme for native form controls (selects, scrollbars), so dropdown triggers + option popups + scrollbars render light even on a dark-themed page.
  • Bump --color-text-muted dark from #5a5a6e to #8b8ba0. Was failing WCAG AA against the dark panel background; "Source" / "Target" labels were effectively invisible.

src/components/compare/SchemaCompare.tsx EndpointSelector:

  • Label: text-[var(--color-text-muted)] -> text-[var(--color-text-secondary)]. Extra readability margin independent of the global token bump.
  • Database select: disabled:opacity-40 -> disabled:text-[var(--color-text-muted)] disabled:opacity-70. With pure opacity-40 on top of an already-low-contrast placeholder, "Select database..." was nearly invisible until a connection was picked.

#219 details

src/components/compare/SchemaCompare.tsx:

  • Split getRoutines out of the main Promise.all into its own try/catch. Per-side routine failures no longer cascade into a total failure. Schema diff (tables, views, triggers) now completes.

  • New RoutineIssue discriminated union ({ kind: 'routines-mariadb-upgrade' | 'routines-failed', side, raw }). classifyRoutinesError() matches the substring 1558 | mysql.proc | mariadb-upgrade and tags the issue for the structured UI.

  • New RoutineIssueBanner component renders the issue in a yellow alert with an action path. The MariaDB-upgrade case shows the exact mariadb-upgrade -u root -p command. The generic case shows the truncated raw error. Each banner has a dismiss X.

  • "Include routines" checkbox (default on) added to the setup row. Unchecking it skips the getRoutines call entirely. Useful as an opt-out when the server's mysql.proc is broken and the user only wants to diff tables/views/triggers.

  • handleCompare accumulates per-side routine errors onto a dedicated routineIssues state and renders them below the setup row. The existing "Comparison failed" red banner remains for non-routine failures (backward-compatible).

Tests added (compare 19 -> 24)

  • defaults Include routines to checked
  • completes comparison and shows MariaDB-upgrade warning when getRoutines throws 1558
  • red "Comparison failed" banner still renders for non-routine failures (backward compat)
  • routine warning dismisses via its X
  • Include routines unchecked skips getRoutines call entirely

Verification

Gate Result
npx vitest run src/components/compare/__tests__ 2 files / 24 tests pass (was 19)
npx vitest run (full) 77 files / 1458 tests pass (was 1453)
npm run type-check 0 errors
npx eslint (touched files) 0 errors
npx dprint check clean
Lefthook pre-commit (all 7 commands) all green

Notes

  • Storage of routine issue uses an array (routineIssues) rather than a single string | null. Two issues (source + target) can coexist. Dismiss is per-issue via array index filter.
  • The CSV/JSON/SQL backend-rust side of routines (src-tauri/crates/mas-core/src/schema/inspector.rs:get_routines) is unchanged - this is purely a frontend UX fix.
  • Out-of-scope follow-up (mentioned in fix: Compare fails entirely on MariaDB 1558 ("mysql.proc column count wrong") — routines fetch should degrade gracefully #219): enriching CoreError::Schema to carry structured sqlx error codes through IPC. Crosses the IPC contract; filing as a separate issue if pursued.

Resolves #218, #219.

…#218, #219)

Two related Compare-feature bugs, fixed together:

#218 (dark-mode contrast):

- src/styles/globals.css: add 'color-scheme: dark' / 'color-scheme: light'
  to the two theme blocks. Without this, Chromium uses the OS color
  scheme for native form controls (selects, scrollbars), so dropdown
  triggers and option popups render light even when the page is dark.

- Bump dark --color-text-muted from #5a5a6e to #8b8ba0. Was failing
  WCAG AA against the dark panel background; 'Source' / 'Target'
  labels were nearly invisible.

- SchemaCompare.tsx EndpointSelector: replace the label's
  text-[var(--color-text-muted)] with text-[var(--color-text-secondary)]
  - extra readability margin independent of the global token bump.

- SchemaCompare.tsx EndpointSelector: replace disabled:opacity-40 on
  the database selects with disabled:text-[var(--color-text-muted)]
  disabled:opacity-70. opacity-40 on top of an already-low-contrast
  placeholder made 'Select database...' nearly invisible until a
  connection was picked.

#219 (Compare fails on MariaDB stale mysql.proc):

- Split getRoutines out of the main fetchSnapshot Promise.all into
  its own try/catch. Per-side routine failures no longer cascade
  into a total comparison failure. The whole point of diffing
  schemas (tables, views, triggers) stays intact.

- New discriminated union RoutineIssue { kind:
  'routines-mariadb-upgrade' | 'routines-failed', side, raw }.
  classifyRoutinesError() detects 1558 / mysql.proc / mariadb-upgrade
  in the error string and tags it for the structured UI.

- New RoutineIssueBanner component renders the issue in a yellow alert
  with an action path - the MariaDB-upgrade case shows the exact
  'mariadb-upgrade -u root -p' command, the generic case shows the
  truncated raw error. Each banner has a dismiss X.

- 'Include routines' checkbox (default on) added to the setup row.
  Unchecking it skips the getRoutines call entirely. Off by default
  if your server's mysql.proc is broken and you just want to diff
  schemas; you can also uncheck and rely on the warning banner.

- handleCompare accumulates per-side routine errors, sets them on a
  dedicated routineIssues state, and renders them below the setup
  row alongside the existing 'Comparison failed' red banner (which
  remains for non-routine failures).

Tests added (compare.test.tsx 19 -> 24):
  - defaults 'Include routines' to checked
  - completes comparison and shows MariaDB-upgrade warning when
    getRoutines throws 1558
  - red 'Comparison failed' banner still renders for non-routine
    failures (backward compat)
  - routine warning dismisses via its X
  - 'Include routines' unchecked skips getRoutines call entirely

Resolves #218, #219.
@EVWorth
EVWorth merged commit 2b27484 into main Jul 20, 2026
19 of 20 checks passed
@EVWorth
EVWorth deleted the fix/218-219-compare-bundle branch July 20, 2026 02:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix: Compare feature has poor contrast in dark mode — dropdowns render light, labels invisible

1 participant