[HOLD for payment 2024-10-24] [$250] Search - Attachment from qa.guide loads infinitely when opened in Search

[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.42-0
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
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to DM
3. Send the following message. (The message is from qa.guide@team.expensify.com
   in #admins)
   
4. Go to Search > Chat
5. Click on the message sent in Step 3

Expected Result:

The attachment will load without issue

Actual Result:

The attachment loads infinitely
This issue only happens to this specific attachment

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

Bug6621041_1727782649186.20241001_192422.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021841561644716083523
• Upwork Job ID: 1841561644716083523
• Last Price Increase: 2024-10-02
• Automatic offers:
• suneox | Reviewer | 104307339
• shahinyan11 | Contributor | 104307340

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

[lanitochka17]

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

[lanitochka17]

We think that this bug might be related to #wave-control

[melvin-bot]

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

[melvin-bot]

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

[huult]

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

Proposal

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

Attachment from qa.guide loads infinitely when opened in Search

What is the root cause of that problem?

The reason for this ticket is that we are attempting to authenticate an attachment that is not an Expensify source, which prevents the attachment from loading and results in an infinite loading state.

In the case of this ticket, this GIF will use AttachmentView, and the isAuthTokenRequired prop will be set to true to render this GIF. AttachmentView is used because when the attachment modal is opened, the URL contains reportID set to -1, which prevents load the report. According to condition check #L542, AttachmentView should be rendered for this case. Additionally, this GIF is opened from Search, where isAuthTokenRequired is true, as indicated by condition #L49.
So, this GIF is not an Expensify source and will require authentication, as isAuthTokenRequired is set to true, as I mentioned. Therefore, this GIF can't load.

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

I suggest two options to fix this issue:

Option 1: We should update isAuthTokenRequired in cases where the source is not Expensify when opening the attachment modal from Search

// .src/components/SelectionList/ChatListItem.tsx#L43
-    const attachmentContextValue = {type: CONST.ATTACHMENT_TYPE.SEARCH};
+    const attachmentContextValue = {reportID: item.reportID, type: CONST.ATTACHMENT_TYPE.SEARCH};

// .src/components/AttachmentModal.tsx#L543
+  const [isImageAuthTokenRequired, setImageAuthTokenRequired] = useState(isAuthTokenRequired);

-                  {!shouldShowNotFoundPage &&
-                            (!isEmptyObject(report) && !isReceiptAttachment ? (
+                 {!shouldShowNotFoundPage &&
+                            (!isEmptyObject(report) && !isReceiptAttachment && type !== CONST.ATTACHMENT_TYPE.SEARCH ? (
                                <AttachmentCarousel
                                ....

// .src/components/Attachments/AttachmentView/index.tsx#L238
+    const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);
+    useEffect(() => {
+        if (type !== CONST.ATTACHMENT_TYPE.SEARCH) return;
+        const prReportAction = report?.parentReportActionID && parentReportActions ? parentReportActions[report?.parentReportActionID] : undefined;
+       const newAttachments: Attachment[] = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction: prReportAction, reportActions: reportActions ?? undefined});

+       const newIndex = newAttachments.findIndex(compareImage);
+       const attachment = newAttachments.at(newIndex);

+      if (attachment?.isAuthTokenRequired !== undefined) {
+          setImageAuthTokenRequired(attachment?.isAuthTokenRequired);
+      }
+  }, [compareImage, parentReportActions, report?.parentReportActionID, reportActions, type]);

// .src/components/AttachmentModal.tsx#L291
<AttachmentViewImage
    ....
+    isAuthTokenRequired={type === CONST.ATTACHMENT_TYPE.SEARCH ? isImageAuthTokenRequired : isAuthTokenRequired}

Test branch for this option

Option 2: We use AttachmentCarousel when opening the attachment modal from Search to fix this issue because AttachmentCarousel checks isAuthTokenRequired for attachments inside. To use AttachmentCarousel, we need to update the code as shown below:

// .src/components/SelectionList/ChatListItem.tsx#L43
-    const attachmentContextValue = {type: CONST.ATTACHMENT_TYPE.SEARCH};
+    const attachmentContextValue = {reportID: item.reportID, type: CONST.ATTACHMENT_TYPE.SEARCH};

Details

POC

Screen.Recording.2024-10-06.at.23.08.21.mov

[suneox]

We’re still awaiting a proposal on this issue. The RCA and solution provided by @huult proposal are not correct.