[HOLD for payment 2024-01-18] [$500] Add markdown syntax for creating a new task

[thienlnam]

We want to create some syntax that will create a task when the following message is added to the composer

[] @jack This is the task name

Should create a task in the current room that:

• Is assigned to jack
• Has the title 'This is the task name'
• The share destination would be the current report where this comment is posted

The assignee can be optional, in which case the command would look something like this

[] This is the task name

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013d0a874d62f021b7
• Upwork Job ID: 1734321392740421632
• Last Price Increase: 2023-12-18
• Automatic offers:
• Ollyws | Reviewer | 28066406
• suneox | Contributor | 28066407

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~013d0a874d62f021b7

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

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

[suneox]

Proposal

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

Add markdown syntax for creating a new task

What is the root cause of that problem?

New feature

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

At function onSubmitComment on ReportScreen we will check if content match with task regex we will create a new task otherwise keep current behavior

    const allPersonalDetails = usePersonalDetails();
    const onSubmitComment = useCallback(
        (text) => {
            const taskRegex = /^\[\](?:\s+@([^\s@]+@[\w.-]+))?\s+(.+)/;
            const match = text.match(taskRegex);
            if (match) {
                const email = match[1] ? match[1].trim() : undefined; // Email might be undefined if not captured
                const title = match[2];
                let assignee = {};
                if (email) {
                    assignee = _.find(_.values(allPersonalDetails), (p) => p.login === email) || {};
                }
                Task.createTaskAndNavigate(getReportID(route), title, '', assignee.login, assignee.accountID, assignee.assigneeChatReport, report.policyID);
            } else {
                Report.addComment(getReportID(route), text);
            }



            // We need to scroll to the bottom of the list after the comment is added
            const refID = setTimeout(() => {
                flatListRef.current.scrollToOffset({animated: false, offset: 0});
            }, 10);

            return () => clearTimeout(refID);
        },
        [route],
    );

POC

32864_POC.mp4

What alternative solutions did you explore? (Optional)

[AmjedNazzal]

Proposal

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

Add markdown syntax for creating a new task

What is the root cause of that problem?

This is a new feature

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

To start, we would modify ReportActionCompose submitForm function to the following:

const submitForm = useCallback(
        (e) => {
            if (e) {
                e.preventDefault();
            }

            const newComment = composerRef.current.prepareCommentAndResetComposer();
            if (!newComment) {
                return;
            }

            const Taskregex = /^\[\]\s*(.+)/;
            const match = newComment.match(Taskregex);
           
            if (match && match[1]) {
                const TaskDetails = match[1];
                return onTriggerTaskCreation(TaskDetails);
            }

            onSubmit(newComment);
        },
        [onSubmit],
    );

What we are doing is we first use a regex that will look for [] at the start of the newComment text and if there is, it will be saved in match variable.
After that we check if that match in index[1] is not empty, and if it's not we assign it's value to TaskDetails constant and pass it to a new function onTriggerTaskCreation which will contain the following logic:

const onTriggerTaskCreation = useCallback((taskDetails) => {
    const assigneeRegex = /@([\S]+)/; 
    const assigneeMatch = taskDetails.match(assigneeRegex);
    const assignee = assigneeMatch ? assigneeMatch[1] : '';
    let assigneeAccountID = 0;
    let assigneeChatReport = null;
    if (assignee) {
        const assigneeDetails = Object.values(personalDetails).find(entry => entry.login === assignee) || {};
        assigneeAccountID = assigneeDetails.accountID ?? 0;
        assigneeChatReport = assigneeDetails.assigneeChatReport ?? Task.setAssigneeValue(assignee, assigneeAccountID);
    }
    const title = assignee
        ? taskDetails.replace(`@${assignee}`, '').trim() || "Untitled Task"
        : taskDetails.trim();

    Task.createTaskAndNavigate(
        reportID,
        title,
        '',
        assignee,
        assigneeAccountID,
        assigneeChatReport,
        report.policyID,
    );
}, []);

The logic of the function works as follows:

const onTriggerTaskCreation = useCallback((taskDetails) => {
    const assigneeRegex = /@([\S]+)/; 
    const assigneeMatch = taskDetails.match(assigneeRegex);
    const assignee = assigneeMatch ? assigneeMatch[1] : '';
    let assigneeAccountID = 0;
    let assigneeChatReport = null;
    if (assignee) {
        const assigneeDetails = Object.values(personalDetails).find(entry => entry.login === assignee) || {};
        assigneeAccountID = assigneeDetails.accountID ?? 0;
        assigneeChatReport = assigneeDetails.assigneeChatReport ?? Task.setAssigneeValue(assignee, assigneeAccountID);
    }
}, []);

In this part we are grabbing the first @ item and assign it to assignee, otherwise it will be empty since it's not required
If there is an assignee we need to access and retrieve it's assigneeAccountID and assigneeChatReport but if there is an assigneeAccountID but no assigneeChatReport then we need to create an optimistic report for it using Task.setAssigneeValue

    const title = assignee
        ? taskDetails.replace(`@${assignee}`, '').trim() || "Untitled Task"
        : taskDetails.trim();

    Task.createTaskAndNavigate(
        reportID,
        title,
        '',
        assignee,
        assigneeAccountID,
        assigneeChatReport,
        report.policyID,
    );
}, []);

In this section we are assigning a title, the logic is that if there is an assignee, we will filter it out and assign the rest of the text as a title
If there is no assignee, we will just assign the whole text to the title
If there is an assignee but no text after it, we will take the assignee and then give the title "Untitled Task" as a placeholder

After that's taken care of we can call Task.createTaskAndNavigate and create the task.

[Ollyws]

Can I clarify: Should the task be created when the text is typed into the composer, or when the message is submitted?

[suneox]

I think we should handle create task at ReportScreen after composer submit a message to separate logic due to the business logic shouldn't handle inside composer

[AmjedNazzal]

@Ollyws I think it should be on submit because otherwise the task could be created before the user is ready to create it

[thienlnam]

@Ollyws

It should only be created once the message is submitted

[Ollyws]

Thanks for clarifying.
@suneox's proposal LGTM.
🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[Ollyws]

Yeah, apologies for the delay will review this one now.

[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.24-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• 32864 md syntax create task #33428

If no regressions arise, payment will be issued on 2024-01-18. 🎊

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

• @Ollyws requires payment automatic offer (Reviewer)
• @suneox requires payment automatic offer (Contributor)

[melvin-bot]

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

• [@Ollyws] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @anmurali you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[Ollyws]

Regression Test Proposal

1. Open any chat
2. Send a message in the format `[] @exampleemail@address.com exampletitle` replacing the email with a user email.
3. Verify a task is created and assigned to the entered user, with the entered task title.

Do we agree 👍 or 👎

[iwiznia]

Looks good to me

[anmurali]

@Ollyws - the previously issued offer expired. So I had to reissue an offer to pay you. It is here
@suneox is paid

[iwiznia]

@anmurali can we close this then?

[Ollyws]

Still awaiting payment on this one.

[iwiznia]

@anmurali can you pay then?

[anmurali]

Paid @Ollyws now.