[Phase 2] Frontend: DataGrid + Editor + SchemaDiagram composite-PK support

[debba]

[Phase 2] Frontend: DataGrid + Editor + SchemaDiagram composite-PK support

Part of the SQL Server Phase 2 epic #150. Depends on #ISSUE_2 (backend CRUD) and #ISSUE_3 (FK aggregation).

The driver isn't on main. Code lives on feat/sql-server and isn't in any release. Check that branch out, branch off it, target your PR at it — not at main. The whole thing squashes into main when Phase 2 closes (#149).

Once the backend supports composite PKs and aggregated FKs, three React components need to carry the new identifier shape through the UI.

Task

1. src/components/ui/DataGrid.tsx (≈ lines 65–84, 400–418)

Add a new optional prop:

pkColumns?: string[];   // composite; overrides `pkColumn` when provided

When present and > 1 columns, the row-edit handlers (~ lines 400–418) must build pk_cols[] / pk_vals[] from the row instead of a single pkCol / pkVal, and pass them to the invoke calls. When pkColumns?.length === 1 or missing → legacy behaviour unchanged.

2. src/pages/Editor.tsx (≈ lines 1670–1717)

Detect composite PK from the column metadata: filter TableColumn[] on is_pk === true, sort by pk_ordinal (a new Option<u32> field you'll add to src-tauri/src/models.rs::TableColumn in the same PR — ship with #[serde(default)] so old JSON deserializes).

Pass pk_cols / pk_vals to invoke('update_record' | 'delete_record', ...) when composite is detected.

3. src/components/ui/SchemaDiagram.tsx (≈ lines 190–229)

Group FK rows by fk.name (constraint name). For each constraint draw one edge with a combined label:

const localCols = first.columns?.length ? first.columns : [first.column_name];
const refCols = first.ref_columns?.length ? first.ref_columns : [first.ref_column];
const label = localCols.length > 1 ? `${localCols.join(',')}→${refCols.join(',')}` : undefined;

When fk.columns is empty (MySQL / Postgres / SQLite drivers still emit the legacy shape), the fallback keeps the single-edge-per-FK behaviour visually identical to today.

Rules

• Zero visual regressions on MySQL / Postgres / SQLite — manual check each driver's ER diagram + editable grid
• Component tests for DataGrid with pkColumns prop (Vitest / testing-library) — single-key fallback + real composite
• npm run typecheck clean
• npm run lint clean

Reference

• Plan: docs/sql-server-implementation-plan.md § Phase 2 — 2.5
• Existing single-PK pattern: src/components/ui/DataGrid.tsx:183-186 (pkIndexMap)

[snakefood3232]

I've reviewed the instructions for supporting composite PKs in the DataGrid, Editor, and SchemaDiagram. I'd handle this by updating DataGrid.tsx to utilize pkColumns, modifying Editor.tsx to detect and adapt to composite PKs, and ensuring SchemaDiagram.tsx groups FKs appropriately. Additionally, I'll implement the required changes in the Rust model for TableColumn. I can have a PR ready in 3-4 days. I've built similar full-stack features integrating complex identifier support in TypeScript/React applications before.

[debba]

Hey @snakefood3232 !
Great, I will assign you for this.
Do you have experience with SQL Server?