Implement workflow settings form using tanstack form #3771
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add NumberField and ToggleField components for TanStack Forms, integrate them into WorkflowSettings inspector with Y.Doc sync, and include comprehensive test coverage. Update TextField to handle null values properly. Components follow established patterns: - NumberField handles nullable integers with min/max validation - ToggleField provides accessible boolean toggle switches - Both integrate with TanStack Forms via useFieldContext WorkflowSettings now uses form-driven workflow updates with: - Bidirectional Y.Doc sync (form ↔ Yjs) - Zod validation matching backend constraints - Virtual fields (concurrency, enable_job_logs) for future use
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3771 +/- ##
==========================================
+ Coverage 88.59% 88.64% +0.05%
==========================================
Files 414 414
Lines 17943 17942 -1
==========================================
+ Hits 15896 15905 +9
+ Misses 2047 2037 -10 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Resolved conflicts: - CLAUDE.md: Adopted main's more specific icon usage guidelines - useWorkflow.ts: Merged both updateWorkflow action and edge actions
The production field was removed from the Credential schema in commit 7de64c6 as part of the credential environments feature, but two references remained causing a KeyError when the collaborative editor requested credentials. - Remove production field from workflow channel credential rendering - Remove production field from TypeScript CredentialSchema - Add test verifying correct credential structure to prevent regression
Replace text input with manual parseInt parsing with native type="number" input. This simplifies the code by leveraging browser validation and the valueAsNumber API, while properly handling nullable fields. Changes: - Use type="number" instead of type="text" with inputMode/pattern - Use e.target.valueAsNumber instead of parseInt parsing - Browser now handles invalid character prevention automatically - min/max attributes now work as intended with number input
Create a reusable FormField wrapper that handles label, help text, and error display. Extract common INPUT_CLASSES constant for consistent styling. Remove hardcoded margins (mb-4) to allow parent forms to control spacing. This reduces duplication across TextField, NumberField, and SelectField while maintaining consistent behavior.
stuartc
approved these changes
Oct 20, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR update the workflow settings form to use tanstack forms with zod validation
Closes #3643
Validation steps
Open the workflow settings panel and update the name
AI Usage
Please disclose how you've used AI in this work (it's cool, we just want to know!):
You can read more details in our Responsible AI Policy
Pre-submission checklist
:owner,:admin,:editor,:viewer)