Peer RichelsenandGitHub
3490272815
## What does this PR do? - Fixes #25116 - Fixes [CAL-6741](https://linear.app/calcom/issue/CAL-6741/make-routing-edit-question-form-less-intrusive-on-how-it-handles-the) https://github.com/user-attachments/assets/d78c4c62-2af5-44d8-b25c-e938cc8ddf6f Improves the routing form field identifier auto-fill behavior to generate URL-safe identifiers from labels. Previously, the identifier field simply duplicated the label text. Now it normalizes the input to be URL-friendly. **Changes:** - Converts labels to lowercase with hyphens (e.g., "What is your name?" → "what-is-your-name") - Limits identifiers to the first 5 words (e.g., "What do you work on and how can we help?" → "what-do-you-work-on") - Updates the Identifier label to clarify it's a URL parameter with an example - Preserves manual identifier edits when the label changes **Link to Devin run:** https://app.devin.ai/sessions/f569297990fe4436bab1fec89d8b71ac **Requested by:** @PeerRich ([email protected]) ## Key Implementation Details The `normalizeIdentifier` function: - Strips special characters and replaces them with spaces - Converts to lowercase - Splits on whitespace and takes first 5 words - Joins with hyphens The auto-fill logic only updates the identifier if: 1. The identifier field is empty, OR 2. The identifier matches the normalized version of the previous label This preserves manual edits while still providing helpful auto-fill for new fields. ## Mandatory Tasks (DO NOT REMOVE) - [x] I have self-reviewed the code (A decent size PR without self-review might be rejected). - [x] I have updated the developer docs in /docs if this PR makes changes that would require a [documentation change](https://cal.com/docs). If N/A, write N/A here and check the checkbox. **N/A** - This is a UI behavior change that doesn't require documentation updates. - [ ] I confirm automated tests are in place that prove my fix is effective or that my feature works. **Note:** No automated tests were added for this change. Manual testing is recommended. ## How should this be tested? **Test Cases:** 1. **Basic normalization:** - Create a new routing form field - Enter label: "What is your name?" - Verify identifier auto-fills to: "what-is-your-name" 2. **5-word limit:** - Enter label: "What do you work on and how can we help?" - Verify identifier becomes: "what-do-you-work-on" 3. **Special characters:** - Enter label: "Email (required)!" - Verify identifier becomes: "email-required" 4. **Manual edit preservation:** - Enter label: "Test Field" - Manually change identifier to: "custom-id" - Change label to: "New Test Field" - Verify identifier stays: "custom-id" (not auto-updated) 5. **Updated label text:** - Verify the Identifier field label shows: "Identifier (URL Parameter, i.e.: &what-is-your-name=john-doe)" **Environment:** - No special environment variables needed - Test in the routing forms builder at `/apps/routing-forms/[formId]` ## Important Review Points ⚠️ **No automated tests**: The normalization function and auto-fill behavior lack test coverage. Consider adding unit tests for edge cases. 🔍 **Auto-fill logic**: The identifier only auto-updates if it's empty or matches the previous normalized label. This preserves manual edits but may be surprising to users in some scenarios. 🌍 **Unicode handling**: Non-ASCII characters are replaced with spaces. This may not be ideal for international users with non-English labels. ## Checklist - [x] I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md) - [x] My code follows the style guidelines of this project - [x] I have commented my code, particularly in hard-to-understand areas - [x] I have checked if my changes generate no new warnings
58 lines
2.9 KiB
TypeScript
58 lines
2.9 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
|
|
import { getValidRhfFieldName } from "./getValidRhfFieldName";
|
|
|
|
describe("getValidRhfFieldName", () => {
|
|
it("should not convert to lowercase", () => {
|
|
expect(getValidRhfFieldName("Hello")).toEqual("Hello");
|
|
expect(getValidRhfFieldName("HELLO")).toEqual("HELLO");
|
|
});
|
|
|
|
it("should convert spaces and any other special character to -", () => {
|
|
expect(getValidRhfFieldName("hello there")).toEqual("hello-there");
|
|
expect(getValidRhfFieldName("hello$there")).toEqual("hello-there");
|
|
expect(getValidRhfFieldName("$hello$there")).toEqual("-hello-there");
|
|
expect(getValidRhfFieldName("$hello.there")).toEqual("-hello-there");
|
|
});
|
|
|
|
// So that user can freely add spaces and any other character iteratively and it gets converted to - and he can add more characters.
|
|
// Trailing dashes are removed to ensure valid field names
|
|
it("should remove trailing dashes but keep leading dashes.", () => {
|
|
expect(getValidRhfFieldName("hello-there-")).toEqual("hello-there");
|
|
expect(getValidRhfFieldName("-hello-there")).toEqual("-hello-there");
|
|
expect(getValidRhfFieldName("$hello-there-")).toEqual("-hello-there");
|
|
});
|
|
|
|
it("should not remove underscore from start and end.", () => {
|
|
expect(getValidRhfFieldName("hello-there_")).toEqual("hello-there_");
|
|
expect(getValidRhfFieldName("_hello-there_")).toEqual("_hello-there_");
|
|
expect(getValidRhfFieldName("$hello-there_")).toEqual("-hello-there_");
|
|
});
|
|
|
|
it("should remove unicode and emoji characters", () => {
|
|
expect(getValidRhfFieldName("Hello 📚🕯️®️ There")).toEqual("Hello---------There");
|
|
// When all characters are emojis/special chars, they become dashes which are then removed
|
|
expect(getValidRhfFieldName("📚🕯️®️")).toEqual("");
|
|
});
|
|
|
|
it("should keep numbers as is", () => {
|
|
expect(getValidRhfFieldName("hellothere123")).toEqual("hellothere123");
|
|
expect(getValidRhfFieldName("321hello there123")).toEqual("321hello-there123");
|
|
expect(getValidRhfFieldName("hello$there")).toEqual("hello-there");
|
|
});
|
|
|
|
it("should not modify system field names", () => {
|
|
// System fields should remain unchanged as they don't contain invalid characters or trailing dashes
|
|
expect(getValidRhfFieldName("name")).toEqual("name");
|
|
expect(getValidRhfFieldName("email")).toEqual("email");
|
|
expect(getValidRhfFieldName("location")).toEqual("location");
|
|
expect(getValidRhfFieldName("title")).toEqual("title");
|
|
expect(getValidRhfFieldName("notes")).toEqual("notes");
|
|
expect(getValidRhfFieldName("guests")).toEqual("guests");
|
|
expect(getValidRhfFieldName("rescheduleReason")).toEqual("rescheduleReason");
|
|
expect(getValidRhfFieldName("smsReminderNumber")).toEqual("smsReminderNumber");
|
|
expect(getValidRhfFieldName("attendeePhoneNumber")).toEqual("attendeePhoneNumber");
|
|
expect(getValidRhfFieldName("aiAgentCallPhoneNumber")).toEqual("aiAgentCallPhoneNumber");
|
|
});
|
|
});
|