feat: min max chars for long text #15592

mhetreayush · 2024-06-27T07:27:19Z

/claim #15577

What does this PR do?

This PR adds an optional minimum and maximum character limit to long text question in booking form.

Loom Video: https://www.loom.com/share/735a6768a92847cabefd1fe2187c499d?sid=2d606562-c6e6-4bd3-92c0-b1fcdab14218

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
N/A I have added a Docs issue here 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?

Are there environment variables that should be set?
No
What are the minimal test data to have?
N.A.
What is expected (happy path) to have (input and output)?

Click on Event Types in the sidebar.
Click on an event.
Inside the event, click on the Advanced tab on the left sidebar.
Add / edit a question.
Set type to Long text
Set the min &/or max characters.
Save the question.
Save the form.
Click on the Preview button in the event header.
Select a date on the calendar.
While filling out the form, click save button with:
a. Min &/or max character limit unsatisfied -> should show red text with error.
b. All the conditions satisfied -> Should save successfully.

Checklist

vercel · 2024-06-27T07:27:24Z

@mhetreayush is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

graphite-app · 2024-06-27T07:30:13Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (06/27/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add community label" took an action on this PR • (06/27/24)

1 label was added to this PR based on Keith Williams's automation.

sean-brydon

Nice job!
This works pretty damn well - however you can break it pretty easy. Maybe we should add a check to ensure these logically work min < max

sean-brydon · 2024-06-27T07:58:16Z

apps/api/v2/src/ee/event-types/event-types_2024_04_15/inputs/update-event-type.input.ts

@calcom/platform this looks fine for me but would like your eyes before approvals/merging as i'm not 100% sure if you are dating these upon every change

mhetreayush · 2024-06-27T08:02:23Z

@sean-brydon thank you for a quick reply.
The min < max check you are talking about can only be applied when both min and max are filled, as both are optional, will add the check and request a review.

packages/features/form-builder/FormBuilder.tsx

packages/features/bookings/lib/getBookingResponsesSchema.ts

hariombalhara · 2024-06-27T08:43:23Z

packages/lib/event-types/transformers/api-request.ts

+  minLength: z.number().optional(),
+  maxLength: z.number().optional(),


@calcom/platform Is it possible to reuse packages/features/form-builder/schema.ts somehow here?

packages/features/form-builder/FormBuilder.tsx

packages/features/form-builder/FormBuilderField.tsx

hariombalhara

@mhetreayush Thanks for the PR 🙏

Left a few suggestions

mhetreayush · 2024-06-27T13:56:04Z

@sean-brydon @hariombalhara
Fixed the validation:
https://www.loom.com/share/b103eb32e0074a5e8a5397bf0312081b

Also took care of the reviews

apps/api/v2/src/ee/event-types/event-types_2024_04_15/inputs/update-event-type.input.ts

apps/api/v2/src/ee/event-types/event-types_2024_04_15/outputs/get-event-type-public.output.ts

packages/features/bookings/lib/getBookingResponsesSchema.ts

…n-max-chars

hariombalhara · 2024-06-28T08:55:33Z

packages/features/bookings/lib/constants.ts

@@ -0,0 +1 @@
+export const HARD_LIMIT_MAX_LENGTH = 4000;


This is a limit for textarea only. How about we keep it in form-builder/fieldTypes as textarea.hardLimitOnMaxLength.

In this way it is better organized.

I am taking care of it. I will play around and see what is best, as it's been a long time I worked on form builder

Fair enough, can do.

…chars' into features/long-text-min-max-chars

hariombalhara · 2024-06-28T11:07:32Z

packages/features/form-builder/fieldTypes.ts

+    supportsLengthCheck: {
+      maxLength: 4000,
+    },


@mhetreayush Added maxLength support here. It easily allows any field that wants to support length check feature to define maxLength. Infact it is mandatory to define maxLength if someone enables length check support.

This should also solve the problem of easily configuring it for text field type.

This is different from the maxLength that we have in baseFieldSchema as that can be changed by the user per field. This on the other hand is constant and defined by our code and applies to all fields of that type

hariombalhara · 2024-06-28T11:21:55Z

apps/web/playwright/test-min-max-characters.e2e.ts

@@ -0,0 +1,158 @@
+import { expect } from "@playwright/test";


@mhetreayush We have playwright/manage-booking-questions.e2e.ts for form builder related tests.
We should move this test there.

Also, could you see if we can test textarea field along with any existing test in there? If not that's also fine. The tests there follow the same flow, it is just about adding and verifying a new field.

I wanted to ensure that we don't introduce new e2es when when we can amend any existing e2e. As an e2e test is time consuming.

Will do that.

Also, maybe we could also add unit test for textarea schema in schema.ts.
And, supportsLengthCheck related component code can also be unit tested with react-testing-library. For that you would have to refactor supportsLengthCheck related code into a new component(which really makes sense anyway)

github-actions · 2024-06-28T11:22:18Z

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Forty-two Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/[user]/[type]`	`416.97 KB`	644.68 KB	184.19% (🟡 +0.24%)
`/[user]/[type]/embed`	`416.97 KB`	644.68 KB	184.20% (🟡 +0.23%)
`/apps/[slug]/[...pages]`	`593.64 KB`	821.36 KB	234.67% (🟡 +0.29%)
`/apps/installation/[[...step]]`	`168.18 KB`	395.9 KB	113.11% (🟡 +0.15%)
`/auth/saml-idp`	`12.22 KB`	239.94 KB	68.55% (🟢 -20.80%)
`/booking/[uid]`	`236.49 KB`	464.21 KB	132.63% (🟡 +0.15%)
`/booking/[uid]/embed`	`236.5 KB`	464.21 KB	132.63% (🟡 +0.15%)
`/bookings/[status]`	`330.73 KB`	558.44 KB	159.55% (🟡 +0.16%)
`/d/[link]/[slug]`	`416.77 KB`	644.48 KB	184.14% (🟡 +0.23%)
`/event-types`	`566.67 KB`	794.38 KB	226.97% (🟡 +0.37%)
`/event-types/[type]`	`442.33 KB`	670.04 KB	191.44% (🟡 +0.23%)
`/org/[orgSlug]`	`266.88 KB`	494.59 KB	141.31% (🟡 +0.15%)
`/org/[orgSlug]/[user]`	`272.99 KB`	500.71 KB	143.06% (🟡 +0.15%)
`/org/[orgSlug]/[user]/[type]`	`417.17 KB`	644.88 KB	184.25% (🟡 +0.23%)
`/org/[orgSlug]/[user]/[type]/embed`	`417.19 KB`	644.91 KB	184.26% (🟡 +0.23%)
`/org/[orgSlug]/[user]/embed`	`273.02 KB`	500.74 KB	143.07% (🟡 +0.14%)
`/org/[orgSlug]/embed`	`266.89 KB`	494.61 KB	141.32% (🟡 +0.14%)
`/org/[orgSlug]/instant-meeting/team/[slug]/[type]`	`416.79 KB`	644.5 KB	184.14% (🟡 +0.24%)
`/org/[orgSlug]/team/[slug]`	`266.88 KB`	494.6 KB	141.31% (🟡 +0.15%)
`/org/[orgSlug]/team/[slug]/[type]`	`416.98 KB`	644.7 KB	184.20% (🟡 +0.23%)
`/settings/admin/lockedSMS/UsersTable`	`79.98 KB`	307.69 KB	87.91% (🟢 -0.14%)
`/settings/admin/lockedSMS/lockedSMSView`	`119.46 KB`	347.18 KB	99.19% (🟢 -0.17%)
`/settings/admin/oAuth/oAuthView`	`95.5 KB`	323.21 KB	92.35% (🟢 -0.18%)
`/settings/admin/orgMigrations/moveTeamToOrg`	`305.66 KB`	533.38 KB	152.39% (🟡 +0.16%)
`/settings/admin/orgMigrations/moveUserToOrg`	`325.43 KB`	553.15 KB	158.04% (🟡 +0.17%)
`/settings/admin/orgMigrations/removeTeamFromOrg`	`305.42 KB`	533.14 KB	152.33% (🟡 +0.15%)
`/settings/admin/orgMigrations/removeUserFromOrg`	`305.43 KB`	533.15 KB	152.33% (🟡 +0.16%)
`/settings/admin/users/[id]/edit`	`398.79 KB`	626.5 KB	179.00% (🟡 +0.16%)
`/settings/admin/users/add`	`398.45 KB`	626.17 KB	178.91% (🟡 +0.16%)
`/settings/my-account/appearance`	`320.22 KB`	547.94 KB	156.55% (🟡 +0.16%)
`/settings/organizations/[id]/about`	`159.67 KB`	387.39 KB	110.68% (🟡 +0.48%)
`/settings/organizations/[id]/add-teams`	`159.66 KB`	387.38 KB	110.68% (🟡 +0.47%)
`/settings/organizations/new`	`159.67 KB`	387.39 KB	110.68% (🟡 +0.48%)
`/settings/platform/new`	`120.72 KB`	348.43 KB	99.55% (🟡 +0.52%)
`/settings/security/password`	`310.55 KB`	538.27 KB	153.79% (🟡 +0.16%)
`/signup`	`179.2 KB`	406.91 KB	116.26% (🟡 +0.15%)
`/team/[slug]`	`266.81 KB`	494.53 KB	141.29% (🟡 +0.15%)
`/team/[slug]/[type]`	`416.95 KB`	644.67 KB	184.19% (🟡 +0.23%)
`/team/[slug]/[type]/embed`	`416.98 KB`	644.7 KB	184.20% (🟡 +0.23%)
`/team/[slug]/embed`	`266.88 KB`	494.59 KB	141.31% (🟡 +0.15%)
`/video/[uid]`	`291.22 KB`	518.94 KB	148.27% (🟢 -0.17%)
`/workflows/[workflow]`	`420.26 KB`	647.98 KB	185.14% (🟡 +0.17%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

mhetreayush · 2024-06-28T11:23:44Z

packages/features/form-builder/fieldTypes.ts

@@ -105,7 +105,8 @@ const configMap: Record<FieldType, Omit<z.infer<typeof fieldTypeConfigSchema>, "
    value: "textarea",
    isTextType: true,
    supportsLengthCheck: {
-      maxLength: 4000,
+      // Keep it as small as possible. It is easier to change to a higher value but coming back to a lower value(due to any reason) would be problematic for users who have saved higher value.
+      maxLength: 1000,


@hariombalhara Can we use a shared constant here instead of a direct value? Bringing this up since you mentioned it is constant to our code base.

I think we can define a local HARD_MAX_LENGTH_TEXTAREA locally in this module.

It isn't a constant to be used throughout the app now.

I think we can define a local HARD_MAX_LENGTH_TEXTAREA locally in this module.

Yes this would be better I believe

I'll take care of that @hariombalhara

hariombalhara · 2024-06-28T13:25:25Z

The test seems to be failing, could you check

mhetreayush · 2024-07-04T14:50:54Z

@hariombalhara I am actually unavailable for some time, so will be inactive on the issue, could you or someone else take this ahead?

varshith257 · 2024-07-04T17:00:00Z

@mhetreayush I would like to collaborate with you and make progress on this issue. I will take on this issue :)

mhetreayush · 2024-07-06T17:30:53Z

Thanks @varshith257 , I will cancel my claim attempt then

rajeshj11 · 2024-07-08T14:06:07Z

@hariombalhara I am actually unavailable for some time, so will be inactive on the issue, could you or someone else take this ahead?

@mhetreayush
Hey, I have fixed the issue. please merge the below changes into your branch.
mhetreayush#1

hariombalhara · 2024-07-09T03:49:59Z

Closing it in favour of #15693 which improves over the changes in this PR.

algora-pbc bot mentioned this pull request Jun 27, 2024

[CAL-3973] booking questions for long text: add min and max characters (both optionally) #15577

Closed

graphite-app bot requested a review from a team June 27, 2024 07:27

graphite-app bot added the community Created by Linear-GitHub Sync label Jun 27, 2024

algora-pbc bot added the 🙋 Bounty claim label Jun 27, 2024

dosubot bot added this to the Community Only milestone Jun 27, 2024

mhetreayush force-pushed the features/long-text-min-max-chars branch from ae7b296 to 044a324 Compare June 27, 2024 07:31

sean-brydon requested changes Jun 27, 2024

View reviewed changes

sean-brydon reviewed Jun 27, 2024

View reviewed changes

hariombalhara reviewed Jun 27, 2024

View reviewed changes

packages/features/form-builder/FormBuilder.tsx Outdated Show resolved Hide resolved

hariombalhara reviewed Jun 27, 2024

View reviewed changes

packages/features/bookings/lib/getBookingResponsesSchema.ts Outdated Show resolved Hide resolved

hariombalhara reviewed Jun 27, 2024

View reviewed changes

packages/features/form-builder/FormBuilder.tsx Outdated Show resolved Hide resolved

hariombalhara reviewed Jun 27, 2024

View reviewed changes

packages/features/form-builder/FormBuilderField.tsx Outdated Show resolved Hide resolved

hariombalhara requested changes Jun 27, 2024

View reviewed changes

mhetreayush requested review from sean-brydon and hariombalhara June 27, 2024 13:56

ThyMinimalDev reviewed Jun 27, 2024

View reviewed changes

apps/api/v2/src/ee/event-types/event-types_2024_04_15/inputs/update-event-type.input.ts Show resolved Hide resolved

ThyMinimalDev reviewed Jun 27, 2024

View reviewed changes

apps/api/v2/src/ee/event-types/event-types_2024_04_15/outputs/get-event-type-public.output.ts Show resolved Hide resolved

mhetreayush requested a review from ThyMinimalDev June 27, 2024 14:26

mhetreayush force-pushed the features/long-text-min-max-chars branch from faf765d to e5c68ed Compare June 27, 2024 14:30

mhetreayush added 2 commits June 28, 2024 11:41

refactor: review changes

54e4427

test: Add test

444a44f

mhetreayush force-pushed the features/long-text-min-max-chars branch from 9fb138a to 444a44f Compare June 28, 2024 06:11

hariombalhara mentioned this pull request Jun 28, 2024

feat: Add max and min characters inputs for long text input for booking questions(Minor) #15596

Closed

3 tasks

hariombalhara reviewed Jun 28, 2024

View reviewed changes

packages/features/bookings/lib/getBookingResponsesSchema.ts Outdated Show resolved Hide resolved

hariombalhara added 2 commits June 28, 2024 14:21

Merge remote-tracking branch 'origin/main' into features/long-text-mi…

185298e

…n-max-chars

Merge branch 'main' into features/long-text-min-max-chars

5457fa9

hariombalhara added the ready-for-e2e label Jun 28, 2024

hariombalhara reviewed Jun 28, 2024

View reviewed changes

hariombalhara added 2 commits June 28, 2024 14:27

Merge remote-tracking branch 'mhetreayush/features/long-text-min-max-…

43402db

…chars' into features/long-text-min-max-chars

Make maxLength more configurable per field type

28eb750

hariombalhara reviewed Jun 28, 2024

View reviewed changes

Reduce maxLength to 1000

3dc3b39

vercel bot deployed to Preview – ai June 28, 2024 11:13 View deployment

vercel bot deployed to Preview – api June 28, 2024 11:17 View deployment

hariombalhara reviewed Jun 28, 2024

View reviewed changes

mhetreayush commented Jun 28, 2024

View reviewed changes

vercel bot deployed to Preview – dev June 28, 2024 11:25 View deployment

anikdhabal mentioned this pull request Jul 7, 2024

feat: Add min max chars for long text #15677

Closed

3 tasks

varshith257 mentioned this pull request Jul 8, 2024

feat: min max chars for long text #15691

Merged

3 tasks

hariombalhara closed this Jul 9, 2024

dosubot bot modified the milestone: Community Only Jul 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: min max chars for long text #15592

feat: min max chars for long text #15592

mhetreayush commented Jun 27, 2024 •

edited by anikdhabal

Loading

vercel bot commented Jun 27, 2024

graphite-app bot commented Jun 27, 2024

sean-brydon left a comment

sean-brydon Jun 27, 2024

mhetreayush commented Jun 27, 2024

hariombalhara Jun 27, 2024

hariombalhara left a comment

mhetreayush commented Jun 27, 2024

hariombalhara Jun 28, 2024

hariombalhara Jun 28, 2024

mhetreayush Jun 28, 2024

hariombalhara Jun 28, 2024

hariombalhara Jun 28, 2024

hariombalhara Jun 28, 2024

mhetreayush Jun 28, 2024

hariombalhara Jun 28, 2024 •

edited

Loading

github-actions bot commented Jun 28, 2024

mhetreayush Jun 28, 2024

hariombalhara Jun 28, 2024

mhetreayush Jun 28, 2024

mhetreayush Jun 28, 2024

hariombalhara commented Jun 28, 2024

mhetreayush commented Jul 4, 2024

varshith257 commented Jul 4, 2024

mhetreayush commented Jul 6, 2024

rajeshj11 commented Jul 8, 2024

hariombalhara commented Jul 9, 2024

		minLength: z.number().optional(),
		maxLength: z.number().optional(),

feat: min max chars for long text #15592

feat: min max chars for long text #15592

Conversation

mhetreayush commented Jun 27, 2024 • edited by anikdhabal Loading

What does this PR do?

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

Checklist

vercel bot commented Jun 27, 2024

graphite-app bot commented Jun 27, 2024

Graphite Automations

sean-brydon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mhetreayush commented Jun 27, 2024

Choose a reason for hiding this comment

hariombalhara left a comment

Choose a reason for hiding this comment

mhetreayush commented Jun 27, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hariombalhara Jun 28, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jun 28, 2024

📦 Next.js Bundle Analysis for @calcom/web

Forty-two Pages Changed Size

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hariombalhara commented Jun 28, 2024

mhetreayush commented Jul 4, 2024

varshith257 commented Jul 4, 2024

mhetreayush commented Jul 6, 2024

rajeshj11 commented Jul 8, 2024

hariombalhara commented Jul 9, 2024

mhetreayush commented Jun 27, 2024 •

edited by anikdhabal

Loading

hariombalhara Jun 28, 2024 •

edited

Loading