Skip to content

Conversation

@blink-so
Copy link

@blink-so blink-so bot commented Jun 11, 2025

Problem

The parameters form was losing user input whenever the $owner changed or terraform code was modified. This happened because:

  1. The Form component used window.crypto.randomUUID() as React keys, causing all form elements to unmount/remount on every render
  2. When $owner or debouncedCode changed, the useEffect would trigger and call $setParameters, causing a re-render
  3. The random keys made React treat all form elements as completely new components, losing all form state

Solution

  • Stable keys: Replace random UUID keys with stable parameter name keys (key={p.name}) to prevent unnecessary component remounting
  • Smart form reset: Add hash-based detection to identify when parameters structure, owner, or code changes significantly enough to warrant a form reset
  • Preserve user input: Only reset the form when truly necessary, preserving user input during normal re-renders

Key Changes

  • Added createParametersHash() function to create deterministic signatures for parameters, owner, and code
  • Added useRef and useEffect to track hash changes and reset form only when needed
  • Changed Form component keys from window.crypto.randomUUID() to p.name
  • Fixed TypeScript error by using correct rbac_roles property

Testing

  • ✅ Build passes with TypeScript compilation
  • ✅ Form state is preserved when making minor code changes
  • ✅ Form resets appropriately when switching users or making significant parameter changes
- Replace random UUID keys with stable parameter name keys to prevent unnecessary component remounting - Add hash-based detection for when parameters structure, owner, or code changes significantly - Automatically reset form only when changes require it, preserving user input otherwise - Fix TypeScript error by using correct rbac_roles property Co-authored-by: Kira-Pilot <19142439+Kira-Pilot@users.noreply.github.com>
@vercel
Copy link

vercel bot commented Jun 11, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 11, 2025 11:06pm
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant