[ON HOLD #30561] [$500] Attachment - Hmm its not here page displayed on login with receipt attachment URL

[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!

---

Action Performed:

1. Open the app
2. Click on plus and raise manual request money request with any amount and any user
3. Open the request money page by clicking twice on IOU message
4. edit URL and add '/edit/receipt' in it
5. Upload any image and after upload, open it
6. Copy the URL
7. Logout and visit the copied URL
8. Login and observe that it displays 'Hmm its not here' page

Expected Result:

App should display receipt image on login with receipt attachment

Actual Result:

App displays 'Hmm its not here' on login with receipt attachment

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• Windows / Chrome

Version Number: 1.3.75-8

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

IOS.safari.hmm.its.not.here.login.attachment.URL.mov

windows.chrome.hmm.its.not.here.on.login.with.attachment.URL.mp4

android.chrome.hmm.its.not.here.on.login.with.attachment.URL.mp4

mac.chrome.hmm.its.not.here.on.login.with.attachment.URL.mov

Recording.121.mp4

Expensify/Expensify Issue URL:

Issue reported by: @dhanashree-sawant

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696066001795669

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019998a84689b09070
• Upwork Job ID: 1708585513587392512
• Last Price Increase: 2023-10-22

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[abzokhattab]

Proposal

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

An error shown while logging in with the attachment url, instead of showing the attached document

What is the root cause of that problem?

The report and the report action elements are empty in the beginning causing the error to show up

App/src/pages/home/report/ReportAttachments.js

Line 24 in 4ebeea0

const report = ReportUtils.getReport(reportID);

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

we should remove the previous line and use useOnyx to subscribe to date changes in the report and the reportActions in the ReportAttachments component and pass it to the AttachmentModal page .. since the ReportUtils.getReport(reportID) returns empty report in the beginning, thats why we need to subscribe to data changes.

const propTypes = {
    /** Navigation route context info provided by react navigation */
    route: PropTypes.shape({
        /** Route specific parameters used on this screen */
        params: PropTypes.shape({
            /** The report ID which the attachment is associated with */
            reportID: PropTypes.string.isRequired,
            /** The uri encoded source of the attachment */
            source: PropTypes.string.isRequired,
        }).isRequired,
    }).isRequired,
    report: reportPropTypes,
    reportActions: PropTypes.shape(reportActionPropTypes),
};

const defaultProps = {
    report: {},
    reportActions: {},
};

function ReportAttachments(props) {
    const reportID = _.get(props, ['route', 'params', 'reportID']);
    const source = decodeURI(_.get(props, ['route', 'params', 'source']));
    return (
        <AttachmentModal
            allowDownload
            defaultOpen
            report={props.report}
            reportActions={props.reportActions}
            source={source}
            onModalHide={() => Navigation.dismissModal(reportID)}
            onCarouselAttachmentChange={(attachment) => {
                const route = ROUTES.REPORT_ATTACHMENTS.getRoute(reportID, attachment.source);
                Navigation.navigate(route);
            }}
        />
    );
}

ReportAttachments.propTypes = propTypes;
ReportAttachments.defaultProps = defaultProps;
ReportAttachments.displayName = 'ReportAttachments';

export default withOnyx({
    report: {
        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
    },
    reportActions: {
        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
        canEvict: false,
    },
})(ReportAttachments);

where in the AttachementModel we should add the reportActions to the propTypes:

    reportActions: PropTypes.shape(reportActionPropTypes),

and also in the defaultProps:

    reportActions: {},

Now we need to update the AttachmentCarousel condition to show only if the report and the report actions are not empty in order to prevent the Hmm its not here error .

so we need to change this:

App/src/components/AttachmentModal.js

Lines 381 to 389 in fbd04cf

	{!_.isEmpty(props.report) ? (
	<AttachmentCarousel
	report={props.report}
	onNavigate={onNavigate}
	source={props.source}
	onClose={closeModal}
	onToggleKeyboard={updateConfirmButtonVisibility}
	setDownloadButtonVisibility={setDownloadButtonVisibility}
	/>

To:

       {!_.isEmpty(props.report) && !_.isEmpty(props.reportActions) ? (
                        <AttachmentCarousel
                            report={props.report}
                            onNavigate={onNavigate}
                            reportActions={props.reportActions}
                            source={props.source}
                            onClose={closeModal}
                            onToggleKeyboard={updateConfirmButtonVisibility}
                            setDownloadButtonVisibility={setDownloadButtonVisibility}
                        />

POC

Screen.Recording.2023-10-02.at.1.41.48.AM.mov

[dukenv0307]

Proposal

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

App displays 'Hmm its not here' on login with receipt attachment

What is the root cause of that problem?

When the page loads for the first time, the report and reportActions are not available yet. So the page here is -1, thus it shows the not found view.

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

• Since the ReportAttachments don't need the full report object (only the reportID is needed), we should modify it to pass through only the reportID to AttachmentModal rather than full report object. This will minimize component rerendering due to report/reportActions change
• In AttachmentModal, connect to report via Onyx (from the reportID passed as prop)
• In AttachmentCarousel, connect to report via Onyx (from the reportID passed as prop)
• In AttachmentCarousel, if the report and report actions are still loading (use the same condition as in here), we'll show loading indicator.

const isLoadingReport = isLoadingReportData && (_.isEmpty(report) || !report.reportID);
const isLoadingReportAction = _.isEmpty(reportActions) || reportMetadata.isLoadingReportActions;

if (isLoadingReport || isLoadingReportAction) {
    return <FullscreenLoadingIndicator />;
}

This will make sure it renders correctly if we go to offline mode right after logging in.

• (Optional) If we want to show something else instead of loading during offline mode, like You need to be online to load this report attachment (when the report and report actions are not loaded yet), we can add a condition to show that as well.

What alternative solutions did you explore? (Optional)

We can modify the withReportAndReportActionOrNotFound a bit and wrap it around AttachmentCarousel to achieve the same above, but this will require more changes that can impact other components.

[CortneyOfstad]

@sobitneupane thoughts on the proposals above?