[HOLD for payment 2024-10-25] [$250] Chat - User is able to send message with max character limit

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.31-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4943661
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to any 1:1 conversation
2. Enter a text that is over 10k characters but less than 15K characters - You can use Lorem Ipsum generator for this
3. After the compose box displays an error that the maximum amount of characters is 10k, add attachment
4. Send the message with the attachment

Expected Result:

User should not be able to send messages over 10k characters

Actual Result:

User is able to send messages over 10k characters if there is added attachment.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6597905_1725908762232.Screen_Recording_20240909_214223_Chrome.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021838751947628833125
• Upwork Job ID: 1838751947628833125
• Last Price Increase: 2024-10-02
• Automatic offers:
• nyomanjyotisa | Contributor | 104327662

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@anmurali 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

[nyomanjyotisa]

Edited by proposal-police: This proposal was edited at 2024-09-10 13:03:27 UTC.

Proposal

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

Chat - User is able to send message with max character limit

What is the root cause of that problem?

We don't disable the Send button on Send Attachment modal if the message exceed the max char on the composer

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

Add new props here called shouldDisableSendButton default to false

and disabled the send button if it true here

isDisabled={isConfirmButtonDisabled || shouldDisableSendButton}

Then here pass the hasExceededMaxCommentLength as shouldDisableSendButton

<AttachmentModal
    headerTitle={translate('reportActionCompose.sendAttachment')}
    onConfirm={addAttachment}
    onModalShow={() => setIsAttachmentPreviewActive(true)}
    onModalHide={onAttachmentPreviewClose}
    shouldDisableSendButton={hasExceededMaxCommentLength}
>

Or we can assign the shouldDisableSendButton as default value here

const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(shouldDisableSendButton);

and don't change this

Result

What alternative solutions did you explore? (Optional)

We can disable the attachment item on the popovermenu if hasExceededMaxCommentLength

Add new props here shouldDisableAttachmentItem default to false

Add disabled using the shouldDisableAttachmentItem value here

{
    icon: Expensicons.Paperclip,
    text: translate('reportActionCompose.addAttachment'),
    onSelected: () => {
        if (Browser.isSafari()) {
            return;
        }
        triggerAttachmentPicker();
    },
    shouldCallAfterModalHide: true,
    disabled: shouldDisableAttachmentItem,
},

Then here pass the hasExceededMaxCommentLength as shouldDisableAttachmentItem

<AttachmentPickerWithMenuItems
    ...
    shouldDisableAttachmentItem={hasExceededMaxCommentLength}
/>

Result

[dominictb]

Proposal

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

• User is able to send messages over 10k characters if there is added attachment.

What is the root cause of that problem?

• In here, we don't have a logic to throw an error modal if the comment length is greater than 10K characters.

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

• We should pass down the hasExceededMaxCommentLength from here to here.

• Then, in AttachmentModal, use the hasExceededMaxCommentLength in here:

        if (hasExceededMaxCommentLength) {
            setIsModalOpen(false);
            setIsAttachmentInvalid(true);
            setAttachmentInvalidReasonTitle('attachmentPicker.maxLengthExceed');
            setAttachmentInvalidReason('attachmentPicker.maxLengthExceedSubtitle');
            return false;
        }

• With the above change, when the comment length is greater than 10K and we press on "Send" button in attachment modal, the error modal will be shown.

• Optional, we can display the danger modal instead of success modal by adding prop danger here if hasExceededMaxCommentLength is true.

What alternative solutions did you explore? (Optional)

Result

Screen.Recording.2024-09-11.at.19.09.51.mov

[melvin-bot]

@anmurali Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@anmurali 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@anmurali 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[melvin-bot]

@anmurali 12 days overdue. Walking. Toward. The. Light...

[melvin-bot]

@anmurali this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!