Workflow Dashboard

A compound DataGrid with a contextual slide-over edit form demonstrating strict local-vs-global state isolation, mock API delays, and error handling.

Click a row, edit the form, and observe that changes only propagate to the grid on a successful save. Use the error checkbox to test failure paths.

Demo Code Tests

What's covered

State isolation: typing in the form does NOT update the underlying data grid until a successful save.
Cancel discards local draft changes completely — the parent grid is verified unchanged.
Loading state: the save button is disabled and shows a spinner during the mock API delay.
Optimistic update: after a successful mock API response, the grid reflects the new values and the slide-over closes.
Error handling: a simulated API failure displays the error in the form without modifying the parent grid.

Tests live in app/components/use-cases/workflow-dashboard/__tests__/WorkflowDashboardDemo.test.tsx, using Vitest + React Testing Library with jsdom and fake timers to exercise the full component lifecycle.

Run locally

npm run test

Sample output:

√ WorkflowDashboardDemo (6)
  √ renders the initial data grid correctly
  √ opens the slide-over form when a row is clicked
  √ isolates state: changes in form do not immediately update the grid
  √ closes the form and discards changes on cancel
  √ shows loading state, simulates api delay, and optimistically updates grid on success
  √ shows error state and does not update parent grid on API failure

Test Files  1 passed (1)
     Tests  6 passed (6)
   Duration  ~0.8s