[HOLD for payment 2024-04-15] [$250] Task - No error of exceeding limit when changing title of existing task & system message posted

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.53-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Navigate to any report
3. Click on "+" > Assign task
4. Enter title and finish creating a task
5. Open the created task
6. Click on Title and change to anything > 100 characters
7. Click on "Save"

Expected Result:

The error is displayed in the title editor that the field is exceeding limit of 100 characters, and user can not save the long title

Actual Result:

The error is not displayed in in the title editor, the title gets updated briefly, user is returned to the task report, and the system message of updated title is posted. There is only one error message in the task report that the title is too long

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6416034_1710604494395.Recording__291.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0141fff112dde5aafe
• Upwork Job ID: 1770200502191382528
• Last Price Increase: 2024-03-25
• Automatic offers:
• Krishna2323 | Contributor | 0

Issue Owner

Current Issue Owner: @thesahindia

[lanitochka17]

We think that this bug might be related to #vip-vsp

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Task - No error of exceeding limit when changing title of existing task & system message posted

What is the root cause of that problem?

We don't have logic in validate function to check task title length and show error on task edit page.

App/src/pages/tasks/TaskTitlePage.tsx

Lines 31 to 39 in c915e7f

	const validate = useCallback(({title}: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM> => {
	const errors: FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM> = {};
	if (!title) {
	errors.title = 'newTaskPage.pleaseEnterTaskName';
	}
	return errors;
	}, []);

What changes do you think we should make in order to solve the problem?

Update the validate function to also check for length just like we do in NewTaskTitlePage.

App/src/pages/tasks/NewTaskTitlePage.tsx

Lines 38 to 49 in c915e7f

	const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.NEW_TASK_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.NEW_TASK_FORM> => {
	const errors = {};
	if (!values.taskTitle) {
	// We error if the user doesn't enter a task name
	ErrorUtils.addErrorMessage(errors, 'taskTitle', 'newTaskPage.pleaseEnterTaskName');
	} else if (values.taskTitle.length > CONST.TITLE_CHARACTER_LIMIT) {
	ErrorUtils.addErrorMessage(errors, 'taskTitle', ['common.error.characterLimitExceedCounter', {length: values.taskTitle.length, limit: CONST.TITLE_CHARACTER_LIMIT}]);
	}
	return errors;
	};

Pseudo-code:

    const validate = useCallback(({title}: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM> => {
        const errors: FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM> = {};

        if (!title) {
            ErrorUtils.addErrorMessage(errors, INPUT_IDS.TITLE, 'newTaskPage.pleaseEnterTaskName');
        } else if (title.length > CONST.TITLE_CHARACTER_LIMIT) {
            ErrorUtils.addErrorMessage(errors, INPUT_IDS.TITLE, ['common.error.characterLimitExceedCounter', {length: title.length, limit: CONST.TITLE_CHARACTER_LIMIT}]);
        }

        return errors;
    }, []);

Result

[allgandalf]

Proposal

Please re-state the problem that we are trying to solve in this issue.

No error of exceeding limit when changing title of existing task & system message posted

What is the root cause of that problem?

We have a check in the edit title page only when the title is empty but not when the character length is more than 100 characters:

App/src/pages/tasks/TaskTitlePage.tsx

Lines 31 to 39 in c915e7f

	const validate = useCallback(({title}: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM> => {
	const errors: FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM> = {};
	if (!title) {
	errors.title = 'newTaskPage.pleaseEnterTaskName';
	}
	return errors;
	}, []);

What changes do you think we should make in order to solve the problem?

Update the Validate function to check for character length as follows:

Note

We don't need to use ErrorUtils over here, this is a unnecessary function call and redundant, using local value title will be more efficient and fast. Also we have already defined the type of the errors FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM>, so no need to use ErrorUtils

    const validate = useCallback(({ title }: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM> => {
        const errors: FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM> = {};

        if (!title) {
            errors.title = 'newTaskPage.pleaseEnterTaskName';
        } else if (title?.length > CONST.TITLE_CHARACTER_LIMIT) {
            errors.title = ['common.error.characterLimitExceedCounter', { length: title.length, limit: CONST.TITLE_CHARACTER_LIMIT }];
        }

        return errors;
    }, []);

Result

simplescreenrecorder-2024-03-18_02.55.44.mp4

[allgandalf]

@lanitochka17 No one was assigned to this task, can you reapply the labels please :) thanks

[melvin-bot]

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@kevinksullivan FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[kevinksullivan]

I would put this in VIP-VSB, since it's tied to task management. I would put this as a LOW issue in terms of priority though, because this is only an issue AFTER the task is created, and the error works well when creating the task with > 100 characters

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0141fff112dde5aafe

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Task - No error of exceeding limit when changing title of existing task & system message posted

What is the root cause of that problem?

• We do not validate the task title length if its length is greater than 100.

What changes do you think we should make in order to solve the problem?

• The exceeding limit character is a common error, and is used in whole the app, but currently, we handle it manually. For example, with the task description, we need to handle it in the validate function as below:
  

  App/src/pages/tasks/TaskDescriptionPage.tsx

  Lines 38 to 46 in ddf9e7a

  	const validate = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_TASK_FORM> => {
  	const errors = {};
  	if (values?.description && values.description?.length > CONST.DESCRIPTION_LIMIT) {
  	ErrorUtils.addErrorMessage(errors, 'description', ['common.error.characterLimitExceedCounter', {length: values.description.length, limit: CONST.DESCRIPTION_LIMIT}]);
  	}
  	return errors;
  	}, []);

• And we need to do a similar thing with other forms we need to limit the character, leading to duplicate logic.
• So my solution is, we will let the FormProvider component handle it automatically. Below is the details:
• First, we need to create a new variable, named limit, to differentiate itself from the maxLength
• Then, add the below logic to this one:

            Object.entries(trimmedStringValues).forEach(([inputID, inputValue]) => {
                if (inputValue && inputPropsRef.current[inputID].limit && inputValue.length > inputPropsRef.current[inputID].limit ) {
                    ErrorUtils.addErrorMessage(validateErrors, inputID, ['common.error.characterLimitExceedCounter', {length: inputValue.length, limit: inputPropsRef.current[inputID].limit}]);
                }
                })

• In the above, inputPropsRef stores all the input props.
• Then, if we need to limit the character, for example, in this case is task title, just need to use:

                            <InputWrapper
                                limit={100}

What alternative solutions did you explore? (Optional)

• Also, we can just need to add maxLength={100} to this one to prevent user from typing more than 100 characters

[thesahindia]

@GandalfGwaihir's proposal looks good to me!

@Krishna2323's proposal looks good to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @blimpich, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[nkdengineer]

@thesahindia Do you have any feedback about my proposal (which will reduce redundant code in future)? cc @blimpich

[Krishna2323]

@thesahindia, I think the selected proposal is a dupe of mine, can you pls check again.

cc: @blimpich

[Krishna2323]

@blimpich @thesahindia, @GandalfGwaihir added the note below which I don't think makes sense and I think they are just confusing in the name of unnecessary function call and redundant. ErrorUtils. addErrorMessage is being used in multiple places. Pls let me know your views. The NewTaskTitlePage also uses ErrorUtils.addErrorMessage. They totally copied my proposal then tried to add a redundant.

We don't need to use ErrorUtils over here, this is a unnecessary function call and redundant, using local value title will be more efficient and fast.

[melvin-bot]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Krishna2323]

@thesahindia, PR ready for review.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.60-13 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Task - No error of exceeding limit when changing title of existing task & system message posted #39310

If no regressions arise, payment will be issued on 2024-04-15. 🎊

For reference, here are some details about the assignees on this issue:

• @thesahindia requires payment through NewDot Manual Requests
• @Krishna2323 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@thesahindia] The PR that introduced the bug has been identified. Link to the PR:
• [@thesahindia] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@thesahindia] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@thesahindia] Determine if we should create a regression test for this bug.
• [@thesahindia] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kevinksullivan] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[kevinksullivan]

Payment summary:

• @thesahindia - $250
• @Krishna2323 - $250 (completed in NewDot)

[kevinksullivan]

@thesahindia please complete the checklist above and we can close this out, thanks!

[melvin-bot]

@blimpich, @kevinksullivan, @thesahindia, @Krishna2323 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@blimpich, @kevinksullivan, @thesahindia, @Krishna2323 Huh... This is 4 days overdue. Who can take care of this?

[thesahindia]

The logic for validation was missing. I don't think we need a regression test case here.

[melvin-bot]

@blimpich, @kevinksullivan, @thesahindia, @Krishna2323 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[JmillsExpensify]

$250 approved for @thesahindia