Plant a Vine

The Plant a Vine form is the primary way to define infrastructure. It has 11 configurable sections, a Provider Ribbon for switching between AWS/GCP/Azure, a Cloud Identity selector, and a real-time cost sidebar.

Form Structure

The form is built with react-hook-form + Zod validation, using useFieldArray for multi-instance components (databases, caches, etc.). Each section is an independent component that reads and writes to the shared form context.

Provider Ribbon

The Provider Ribbon sits at the top of the form and controls three things:

1. Cloud Identity Selector — dropdown showing connected cloud accounts. Each account displays its provider icon, name, and account identifier (AWS Account ID, GCP Project ID, Azure Subscription).

2. Region Selector — populated with the selected provider's available regions, grouped by geography (US, Europe, Asia Pacific, etc.).

3. Resource Refresh — a button to trigger a FETCH_RESOURCES job that discovers existing cloud resources (VPCs, subnets, hosted zones, IAM users). Results are cached in the cloud_identities.credentials JSONB field.

When the Cloud Identity changes (e.g., switching from an AWS account to a GCP project), the entire form adapts. See Cloud Provider Abstraction for how this works.

Sections

Review & Submit

After filling in sections, the Review Tab shows a read-only summary of the entire configuration organized by category. On submit:

1. A vines row is created with status DRAFT
2. Component rows are created in the relevant tables (vine_network, vine_cluster, vine_databases, etc.)
3. The vine appears in the vineyard's vine listing
4. The user can now run Plan → Apply from the vine detail page

Form Validation

Each section has its own Zod schema. Key validations:

• Project name: lowercase, alphanumeric + hyphens, max 25 characters
• CIDR blocks: regex validation + numeric range check
• Node sizing: min ≤ desired ≤ max
• Instance types: max 5 selected
• Database names: unique per vine, lowercase
• Secret names: alphanumeric + hyphens only

On submit failure, the form auto-scrolls to the first error field.