[HOLD for payment 2024-10-14] [$250] mWeb - Attachment - Opened offline attachment directed to conversation page on online

[lanitochka17]

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.25
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/home
2. Open a chat
3. Go offline
4. Upload a image
5. Open the image
6. Go online
7. Note User directed to conversation page

Expected Result:

Upload and open attachment in offline, then going online user must stay in same attachment page

Actual Result:

Upload and open attachment in offline, then going online user directed to conversation page

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

Bug6584997_1724833122321.Screenrecorder-2024-08-27-17-12-45-779_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e366edd029d4e402
• Upwork Job ID: 1829648417535865218
• Last Price Increase: 2024-09-20
• Automatic offers:
• wildan-m | Contributor | 104146531

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @kevinksullivan (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.

[NJ-2020]

Proposal

Please restate the problem we are trying to solve with this issue.

mWeb - Attachment - Opened offline attachment directed to conversation page on online.

What is the root cause of this problem?

When we are offline, we upload an attachment and click on it to view the details by clicking the attachment. When we return online, we invoke submitAndClose function because an attachment has been sent. Inside this function, we close the modal with setIsModalOpen(false) after sending the attachment.

App/src/components/AttachmentModal.tsx

Lines 257 to 273 in 6697c26

	/**
	* Execute the onConfirm callback and close the modal.
	*/
	const submitAndClose = useCallback(() => {
	// If the modal has already been closed or the confirm button is disabled
	// do not submit.
	if (!isModalOpen || isConfirmButtonDisabled) {
	return;
	}
	if (onConfirm) {
	onConfirm(Object.assign(file ?? {}, {source: sourceState} as FileObject));
	}
	setIsModalOpen(false);
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isModalOpen, isConfirmButtonDisabled, onConfirm, file, sourceState]);

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

We can add a new parameter to the URL or a parameter inside the function to indicate how the AttachmentModal was opened. For example, we can use ?openType=openDetail when the user opens the attachment by clicking on it, and ?openType=submit when the user submits the attachment. We can then conditionally close the modal based on the value of openType.

What alternative solutions did you explore? (Optional)

We can check if there is existing Onyx data for the attachment. If there is, it means the attachment has been submitted but not yet added to the backend. In this case, we can avoid invoking setIsModalOpen(false) and keep the modal open.

[NJ-2020]

Proposal

Updated

[tsa321]

Edited by proposal-police: This proposal was edited at 2024-08-28 14:38:24 UTC.

Proposal

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

When opening a sent attachment while offline, after going online, the app navigates to a report.

What is the root cause of that problem?

When viewing an attachment image, the AttachmentCarousel is displayed. It uses logic to determine if the viewed image has been deleted then dismiss the modal. This is done by comparing the source (a URL parameter) with the available attachment properties in reportActions:

App/src/components/Attachments/AttachmentCarousel/index.tsx

Lines 91 to 94 in 6697c26

	// Dismiss the modal when deleting an attachment during its display in preview.
	if (initialPage === -1 && attachments.find(compareImage)) {
	Navigation.dismissModal();
	} else {

The lines detects if the viewed image is deleted by comparing the current source with the updated attachment properties retrieved from reportActions.

When the user is offline, the current source is a blob URL string. When the user goes online, this source is updated to a new path.

The current detection logic mistakenly identifies the image as deleted because the blob URL is no longer available, resulting in the dismissal of the modal.

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

We could add a check in the if clause to determine whether the current source is an image that will be uploaded, by verifying if the source starts with blob and if the new attachment has the same file name as the uploaded image.

The revised code could look like this, assuming a report action can have multiple images (i.e., an array):

if (initialPage === -1 && attachments.find(compareImage)) {
    let isUploadedImage = false;
   // maybe cheching for wheter the file is blob uri object is enough, but for more code completeness I am adding additional checks.
   // If we want to checks whether the blob uri object exist we can use `FileUtils.readFileAsync`
    if (source.startsWith('blob')) {
        const uploadedAttachment = attachments.find(compareImage);
        const possibleTargetUploads = targetAttachments.filter(attachment => {
            return attachment.reportActionID === uploadedAttachment.reportActionID;
        });

        isUploadedImage = possibleTargetUploads.some(attachment => {
            return attachment.file.name === uploadedAttachment.file.name;
        });
    }

    if (!isUploadedImage) {
        Navigation.dismissModal();
    }
}

Alternatively, we could check for pending actions such as deletion or addition, if this approach is more accurate, or simply verify whether the reportAction is a deleted message.

What alternative solutions did you explore? (1)

We can determine whether the report action has been deleted by checking the availability of currently viewed report attahcment's reportActionID in targetAttachment. Then set the search result to initialPage.

The code could be:

const currentAttachmentReportActionID = attachments.find(compareImage)?.reportActionID;
let initialPage;
if (currentAttachmentReportActionID) {
    initialPage = targetAttachments.findIndex(attachment => attachment.reportActionID === currentAttachmentReportActionID);
} else {
    initialPage = targetAttachments.findIndex(compareImage);
}

Or :

let initialPage = targetAttachments.findIndex(compareImage);
const currentAttachmentReportActionID = attachments.find(compareImage)?.reportActionID;
const isReportActionExist = currentAttachmentReportActionID ? targetAttachments.find(attachment => attachment.reportActionID === currentAttachmentReportActionID) : initialPage !== -1;

// Dismiss the modal when deleting an attachment during its display in preview.
if (initialPage === -1 && attachments.find(compareImage)) {
    if (!isReportActionExist) {
        Navigation.dismissModal();
    }
}

What alternative solutions did you explore? (2)

Expanding my first solution which I mention to use pendingAction data:
We could add pendingAction data to the attachment. If the report action for the currently viewed attachment is pendingAction add, we should not dismiss the modal.

In this line:

App/src/components/Attachments/AttachmentCarousel/extractAttachments.ts

Line 104 in fc849dd

const html = ReportActionsUtils.getReportActionHtml(action).replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);

We need to modify it to:
(Additionally, some modifications to the replace function are based on the bug I mentioned at the bottom of my proposal):

const html = ReportActionsUtils.getReportActionHtml(action).replace(/(<(?:(?=video )|(?=img )).+?)(\/*)>/gm, `$1 data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}" data-pending-action="${action?.pendingAction}"$2>`);

Then, in this line and this line, we should add:

pendingAction: attribs['data-pending-action']

In the AttachmentCarousel, we modify the lines near the dismiss modal to:

const currentlyViewedAttachment = attachments.find(compareImage);
if (initialPage === -1 && !!currentlyViewedAttachment) {
    if (currentlyViewedAttachment?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {
        Navigation.dismissModal();
    }
}

What alternative solutions did you explore? (3)

This is a simplified version of my initial solution to determine whether a file is stored temporarily by the browser or app. We can check if the source starts with "blob" or "file," or similar characters that indicate it is a file stored in user storage. The code could be:

if (initialPage === -1 && !!currentlyViewedAttachment) {
    if (source.startsWith('blob') || source.startsWith('file')) {
       return;    
    }
    Navigation.dismissModal();
}

---

Also there is a bug in when user send a text with image attachment, the reportActionID data will be undefined. This in because:

App/src/components/Attachments/AttachmentCarousel/extractAttachments.ts

Line 104 in 117b961

const html = ReportActionsUtils.getReportActionHtml(action).replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);

If user send a text comment and an image, there is <br /> tag and the end tag of br that will be replaced. the more correct code could be:

const html = ReportActionsUtils.getReportActionHtml(action).replace(/(<img .+?)\/>/gm, `$1 data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);

To also fix for video:

const html = ReportActionsUtils.getReportActionHtml(action).replace(/(<(?:(?=video )|(?=img )).+?)(\/*)>/gm, `$1 data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"$2>`);

[daledah]

Edited by proposal-police: This proposal was edited at 2024-08-29 02:10:22 UTC.

Proposal

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

Upload and open attachment in offline, then going online user directed to conversation page

What is the root cause of that problem?

• We have logic to close the attachment modal if User A is viewing an attachment and it gets deleted by User B:
  

  App/src/components/Attachments/AttachmentCarousel/index.tsx

  Lines 91 to 93 in 6697c26

  	// Dismiss the modal when deleting an attachment during its display in preview.
  	if (initialPage === -1 && attachments.find(compareImage)) {
  	Navigation.dismissModal();

• In this logic, we check if the currently open attachment (identified by the source prop) was present in the previous list of attachments (identified by the attachments state) but no longer appears in the updated list (identified by the targetAttachments variable). If this condition is met, we call Navigation.dismissModal() to close the modal.

• When we upload an image while offline and then reconnect online, the attachment source data switches from a blob value to the value returned by the backend, triggering the condition mentioned above to be true.

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

• Since the scenario "User A is viewing an attachment and then it gets deleted by User B" only occurs with attachments that are not local files, we only need to update the condition accordingly:
  

  App/src/components/Attachments/AttachmentCarousel/index.tsx

  Line 93 in 6697c26

  Navigation.dismissModal();

            if(isLocalFile(source)){
                return
            }
            Navigation.dismissModal();

• The same should be applied to native file.

• Beside of using isLocalFile, we can make use of attribs[CONST.ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE] by returning it in:
  

  App/src/components/Attachments/AttachmentCarousel/extractAttachments.ts

  Line 76 in fc849dd

  attachments.unshift({

  
  then we will use that data instead of the isLocalFile above to check if the attachment is local file or not. The similar logic is used in here:
  

  App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

  Line 572 in fc849dd

  const isUploading = html.includes(CONST.ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE);

What alternative solutions did you explore? (Optional)

[daledah]

Proposal updated

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01e366edd029d4e402