Skip to content

fix(routing-forms): use event-type FormBuilder for booking questions#28145

Draft
sahitya-chandra wants to merge 16 commits intomainfrom
feat/routing-forms-formbuilder-sync
Draft

fix(routing-forms): use event-type FormBuilder for booking questions#28145
sahitya-chandra wants to merge 16 commits intomainfrom
feat/routing-forms-formbuilder-sync

Conversation

@sahitya-chandra
Copy link
Copy Markdown
Member

@sahitya-chandra sahitya-chandra commented Feb 23, 2026

What does this PR do?

Reuse the event-type booking-questions UI in routing forms. Replaces the custom field editor on the form-edit page with the shared FormBuilder used for event-type booking questions, so routing forms get the same field types and editing flow. Adds adapters to map between routing form fields and FormBuilder, with stable IDs, type locking when the form has responses, and preservation of router fields. Fixes duplication and sync issues when editing or reordering questions

Updates since last revision

Fixed failing E2E tests (yarn e2e:app-store) caused by the FormBuilder migration:

Route builder support for new field types:

  • Added RAQB widget/type definitions for address, boolean, checkbox, multiemail, radio, radioInput, and url field types so they appear in route builder dropdowns
  • Added RADIO = "radio" enum to FieldTypes.ts (FormBuilder uses "radio" for "Radio Group", distinct from "radioInput")
  • getQueryBuilderConfigForFormFields now skips unsupported field types gracefully instead of throwing a 500

E2E test selector fixes:

  • FormBuilder renders fields with data-testid="field-${field.name}" not data-testid="field" — updated all selectors
  • Field editing now uses a dialog (edit-field-dialog) with [name="label"] / [name="name"] inputs
  • Type selection uses [data-testid="test-field-type"] and [data-testid^="select-option-"]
  • Checkbox (boolean) field uses [contenteditable="true"] for label input
  • All fields including index 0 now get explicit type selection (previously only index > 0)
  • Field identifiers use consistent lowercase-hyphenated format matching the actual UI dropdown order

Suggested review focus

  • The new RAQB widget types in config.ts / uiConfig.tsx use simple text/select factories — verify they render and behave correctly in the route builder UI
  • getQueryBuilderConfigForFormFields silently skips unsupported types with a console.warn — confirm this is acceptable vs throwing
  • E2E test field creation order depends on the FormBuilder dropdown order (returned by verifySelectOptions), not alphabetical order

Link to Devin run | Requested by @sahitya-chandra

Visual Demo (For contributors especially)

A visual demonstration is strongly recommended, for both the original and new change (video / image - any one).

Video Demo (if applicable):

Before:

Screencast.from.2026-02-23.23-12-10.webm

After:

Screencast.from.2026-02-23.22-56-09.webm
Screencast.from.2026-02-23.23-05-01.webm
  • Show screen recordings of the issue or feature.
  • Demonstrate how to reproduce the issue, the behavior before and after the change.

Image Demo (if applicable):

  • Add side-by-side screenshots of the original and updated change.
  • Highlight any significant change(s).

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

  1. Route builder with new field types:

    • Create a routing form with Address, Checkbox, Checkbox Group, Multiple Emails, Radio Group, and URL fields
    • Add a route and verify all field types appear in the "Field" dropdown
    • Create rules using these fields and verify they render correctly
  2. E2E tests:

    • Run PLAYWRIGHT_HEADLESS=1 yarn e2e:app-store --workers=4 to verify all routing-forms tests pass
    • Specifically check basic.e2e.ts tests for field creation, editing, and prefill
  3. Field editing:

    • Create/edit routing forms and verify the FormBuilder dialog works for all field types
    • Verify Checkbox (boolean) field label editing works correctly
    • Verify field identifiers are generated correctly (lowercase-hyphenated)

Checklist

  • I haven't read the contributing guide
  • My code doesn't follow the style guidelines of this project
  • I haven't commented my code, particularly in hard-to-understand areas
  • I haven't checked if my changes generate no new warnings
  • My PR is too large (>500 lines or >10 files) and should be split into smaller PRs

Open with Devin

- Replace custom field editor with shared FormBuilder (event-type booking questions)
- Add formBuilderAdapters: transformToBuilder/transformToRouting with stable ID map, type lock, router preservation
- Seed fieldIdMapRef and originalTypeRegistryRef from parent; handle empty parent sync
- Preserve router fields when syncing local→parent via previousParentFields merge
- Add unit tests for adapters (id stability, options, router, type lock)
- FormBuilderFieldInput type for form state compatibility
…d sync logic

- Introduced deduplication of parent fields by ID in FormEdit to prevent duplicates.
- Added logic to track last form field IDs and compare changes to optimize syncing.
- Updated sync behavior to avoid overwriting user changes when parent fields match.
- Enhanced unit tests for formBuilderAdapters to ensure correct deduplication behavior.
- Removed outdated UI text in the FormBuilder component for clarity.
@linear
Copy link
Copy Markdown

linear bot commented Feb 23, 2026

@github-actions github-actions bot added $50 event-types area: event types, event-types routing-forms area: routing forms, routing, forms ✨ feature New feature or request 💎 Bounty A bounty on Algora.io 🧹 Improvements Improvements to existing features. Mostly UX/UI labels Feb 23, 2026
@sahitya-chandra sahitya-chandra marked this pull request as ready for review February 23, 2026 18:12
@sahitya-chandra sahitya-chandra requested review from a team as code owners February 23, 2026 18:12
@graphite-app graphite-app bot added the community Created by Linear-GitHub Sync label Feb 23, 2026
@graphite-app
Copy link
Copy Markdown

graphite-app bot commented Feb 23, 2026

Graphite Automations

"Send notification to Community team when bounty PR opened" took an action on this PR • (02/23/26)

2 teammates were notified to this PR based on Keith Williams's automation.

cubic-dev-ai[bot]

This comment was marked as resolved.

@github-actions
Copy link
Copy Markdown
Contributor

Devin AI is addressing Cubic AI's review feedback

A Devin session has been created to address the issues identified by Cubic AI.

View Devin Session

@devin-ai-integration
Copy link
Copy Markdown
Contributor

I reviewed both Cubic AI findings and checked their confidence scores:

  • Violation 1 (formBuilderAdapters.ts:146 — fieldIdMap not updated after duplicate ID regeneration): Confidence 8/10 — below the 9/10 threshold for automated fixes.
  • Violation 2 (FormEdit.tsx:104 — shouldDirty: true on programmatic reset): Confidence 7/10 — below the 9/10 threshold for automated fixes.

Since neither issue meets the 9/10 confidence threshold, no changes were made. The PR author may want to evaluate these manually if they consider the feedback valid.

@sahitya-chandra sahitya-chandra added ready-for-e2e run-ci Approve CI to run for external contributors labels Feb 23, 2026
@sahitya-chandra sahitya-chandra added ready-for-e2e and removed run-ci Approve CI to run for external contributors ready-for-e2e labels Feb 23, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 23, 2026

E2E results are ready!

…form editing tests

- Updated field addition logic to utilize a consistent dialog for editing fields.
- Enhanced field validation by using locators for better readability and maintainability.
- Replaced hardcoded selectors with constants for improved code clarity.
- Simplified the process of filling field details and saving forms in tests.
- Improved the verification of select options in the form editing process.
…ests

- Replaced outdated field type names with updated terminology in test cases.
- Enhanced the validation logic for multi-select and select fields in query strings.
- Improved the consistency of field type options across different test functions.
- Streamlined the addition of field types in the form editing process for better maintainability.
gent33112-wq added a commit to gent33112-wq/cal.com that referenced this pull request Feb 28, 2026
Add compatibility layer between routing forms and FormBuilder:
- routingFieldToFormBuilder: convert routing field to FormBuilder
- formBuilderFieldToRouting: convert FormBuilder to routing field
- isFieldCompatible: check if field can be converted
- Type mapping between systems

/claim calcom#28145
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 5, 2026

Devin AI is resolving merge conflicts

This PR has merge conflicts with the main branch. A Devin session has been created to automatically resolve them.

View Devin Session

Devin will:

  1. Merge the latest main into this branch
  2. Resolve any conflicts intelligently
  3. Run lint/type checks to ensure validity
  4. Push the resolved changes

If you prefer to resolve conflicts manually, you can close the Devin session and handle it yourself.

… import from main

Co-Authored-By: bot_apk <apk@cognition.ai>
Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

Open in Devin Review

Copy link
Copy Markdown
Member

@CarinaWolli CarinaWolli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will have to talk to @ciaranha about the designs for this. It goes against our current Figma designs

@github-actions github-actions bot marked this pull request as draft March 23, 2026 10:47
@github-actions
Copy link
Copy Markdown
Contributor

This PR has been marked as stale due to inactivity. If you're still working on it or need any help, please let us know or update the PR to keep it active.

@github-actions github-actions bot added the Stale label Mar 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🙋 Bounty claim 💎 Bounty A bounty on Algora.io community Created by Linear-GitHub Sync event-types area: event types, event-types ✨ feature New feature or request 🧹 Improvements Improvements to existing features. Mostly UX/UI ready-for-e2e routing-forms area: routing forms, routing, forms size/XXL Stale $50

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[CAL-5097] add the same "booking questions" to routing forms

4 participants