Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2023-10-09] [$500] A new tab opens when downloading offline #26258

Closed
1 of 6 tasks
kavimuru opened this issue Aug 29, 2023 · 43 comments
Closed
1 of 6 tasks
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 Engineering External Added to denote the issue can be worked on by a contributor

Comments

@kavimuru
Copy link

kavimuru commented Aug 29, 2023

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!


Action Performed:

  1. From user A, Send an attachment to user B.
  2. Be offline for user B before opening the attachment
  3. Click on the attachment sent from User A
  4. Click on the download button at the top

Expected Result:

the inactive download button is shown.

Actual Result:

A new tab is opened

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

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

Version Number: 1.3.58-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

T117-1.mp4
Recording.1530.mp4

Expensify/Expensify Issue URL:
Issue reported by: @daveSeife
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692409444867919

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~0159b5b921ce8fa955
  • Upwork Job ID: 1699136998481727488
  • Last Price Increase: 2023-09-19
  • Automatic offers:
    • fedirjh | Reviewer | 26848952
    • daveSeife | Reporter | 26848953
@kavimuru kavimuru added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Aug 29, 2023
@melvin-bot
Copy link

melvin-bot bot commented Aug 29, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Aug 29, 2023

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

@jjmilad
Copy link

jjmilad commented Aug 29, 2023

Hello, my idea is to make the download button inactive when the user is offline. We could make an event listener when the pop-up is injected in the code to get the network status of the user.

@melvin-bot
Copy link

melvin-bot bot commented Aug 29, 2023

📣 @jjmilad! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

  1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
  2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
  3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
    Screen Shot 2022-11-16 at 4 42 54 PM
    Format:
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

@Krishna2323
Copy link
Contributor

Krishna2323 commented Aug 30, 2023

Proposal

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

A new tab opens when downloading offline

What is the root cause of that problem?

Download button is not hidden & we open external link of the attachment when download fails.

.catch(() => {
// file could not be downloaded, open sourceURL in new tab
Link.openExternalLink(url);
return resolve();
});

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

We can hide or disable the download button when user is offline, using isOffline state.
const {isOffline} = useNetwork();

shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton}

And update this line to:
shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton && !isOffline}

Result:

Monosnap.screencast.2023-08-30.17-55-58.mp4

@paultsimura
Copy link
Contributor

Proposal

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

When a user is offline, the "Download Attachment" button should be disabled instead of opening a new tab.

What is the root cause of that problem?

We do not handle the user's network status.

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

  1. For HeaderWithBackButton, along with shouldShowDownloadButton, add a boolean property shouldDisableDownloadButton

    shouldShowDownloadButton: PropTypes.bool,

  2. In HeaderWithBackButton, while rendering the PressableWithoutFeedback, pass the disabled property:

    <PressableWithoutFeedback

<PressableWithoutFeedback
    ...
    disabled={shouldDisableDownloadButton}
>
  1. Compose the AttachmentModal using withNetwork() and render <HeaderWithBackButton> with shouldDisableDownloadButton={props.network.isOffline}
download-button-disabled.mov

What alternative solutions did you explore? (Optional)

@yh-0218
Copy link
Contributor

yh-0218 commented Aug 30, 2023

Proposal

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

When a user is offline, the "Download Attachment" button should be disabled instead of opening a new tab.

What is the root cause of that problem?

We do not handle the user's network status.
But this is not correct problem.
We have to allow user to download images that he received before.

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

  1. add a boolean property shouldDisableDownloadButton under shouldShowDownloadButton on HeaderWithBackButton

    shouldShowDownloadButton: PropTypes.bool,

  2. On HeaderWithBackButton, we need to add PressableWithoutFeedback as disable

    <PressableWithoutFeedback

<PressableWithoutFeedback
    ...
    disabled={shouldDisableDownloadButton}
>
  1. We don't need to check network status (because we have allow user to download old images without network).
shouldDisableDownloadButton = {_.isEmpty(props.source)}

Need to add this code to under components

<HeaderWithBackButton

What alternative solutions did you explore? (Optional)

@melvin-bot melvin-bot bot added the Overdue label Sep 1, 2023
@melvin-bot
Copy link

melvin-bot bot commented Sep 4, 2023

@tjferriss Eep! 4 days overdue now. Issues have feelings too...

@tjferriss
Copy link
Contributor

I'm able to reproduce. If we're able to download the attachment then we should. If not, then we'd want to somehow tell the user they need to go online to access the attachment.

@melvin-bot melvin-bot bot removed the Overdue label Sep 5, 2023
@tjferriss tjferriss added the External Added to denote the issue can be worked on by a contributor label Sep 5, 2023
@melvin-bot melvin-bot bot changed the title A new tab opens when downloading offline [$500] A new tab opens when downloading offline Sep 5, 2023
@melvin-bot
Copy link

melvin-bot bot commented Sep 5, 2023

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

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 5, 2023
@melvin-bot
Copy link

melvin-bot bot commented Sep 5, 2023

Current assignee @tjferriss is eligible for the External assigner, not assigning anyone new.

@melvin-bot
Copy link

melvin-bot bot commented Sep 5, 2023

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

@fedirjh
Copy link
Contributor

fedirjh commented Sep 7, 2023

Thanks everyone for the proposal.

@Krishna2323, @paultsimura the root cause part needs further investigation.


@yh-0218 your explanation for the root cause is logical but it needs further investigation. I would like to note that the source of the attachment in fullscreen differs from that in the report, hence your solution is not valid.

@StevenKKC
Copy link
Contributor

StevenKKC commented Sep 7, 2023

Proposal

Please state again the problem we are trying to solve in this issue.

A new tab opens when downloading an attachment offline.

What is the cause of this issue?

When we click download button on context menu or attachment modal, fileDownload is called.

export default function fileDownload(url, fileName) {

In fileDownload function, if file could not be downloaded, then open url in new tab.
.catch(() => {
// file could not be downloaded, open sourceURL in new tab
Link.openExternalLink(url);
return resolve();
});

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

We should disable download button on context menu and attachment modal if offline.
In ContextMenuActions.js, we can import NetworkStore and modify this line as below.

    return isAttachment && message.html !== CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML && reportAction.reportActionID && !ReportActionsUtils.isMessageDeleted(reportAction) && !NetworkStore.isOffline();

In AttachmentModal.js, we can import NetworkStore and modify this line as below.

    shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton && !NetworkStore.isOffline()}

Or in AttachmentModal.js, we can import useNetwork hook and add isOffline, and then modify this line as below.

    shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton && !isOffline}
    const {isOffline} = useNetwork();

What alternative solutions have you investigated? (Optional)

None.

@neonbhai
Copy link
Contributor

neonbhai commented Sep 7, 2023

Proposal

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

A new tab opens when downloading offline

What is the root cause of that problem?

On pressing download button function downloadAttachment function executes:

onDownloadButtonPress={() => downloadAttachment(source)}

Which calls the fileDownload function:

const downloadAttachment = useCallback(() => {
let sourceURL = source;
if (isAuthTokenRequired) {
sourceURL = addEncryptedAuthTokenToURL(sourceURL);
}
fileDownload(sourceURL, file.name);

Which on web, when download fails opens the download in new tab:

.catch(() => {
// file could not be downloaded, open sourceURL in new tab
Link.openExternalLink(url);
return resolve();
});

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

The .catch will always be triggered when the user is offline. That means the download will fail again in a new white blank page

We can check network conditions before starting the download flow.

Solution 1:

  • Disable the download button, when the user is offline. Show "Download Unavailable. You are offline" on the tooltip for the disabled Download button.
    • To disable download button, we will pass disabled prop to the PressableWithFeedback rendering the component here:
      <Tooltip text={translate('common.download')}>
      <PressableWithoutFeedback
    • disabled can either:
      • get its state from the parent component. We will define a new prop shouldDisableDownloadButton here
      • We can check for network state in this component only, and have a local state variable isDownloadButtonDisabled that we can pass to disabled proppressableWithFeedback.
      • Since we already throttle the download button:
        const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
        we can add a useEffect that changes the value of isDownloadButtonActive based on if the user is offline.
    • Tootip text can we changed accordingly by checking the disabled state

Solution 2:

  • Hide the download button when the user is offline. This is also how Slack behaves. It hides the download button if the user is offline.
    • We will pass boolean here conditionally if the user is offline or not:
      shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton}
    • To achieve this, we will use the useNetwork() hook:
     const {isOffline} = useNetwork();
    • and also check for !isOffline here:
      shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton}
    • Note: Since isOffline is not a State variable it might not trigger a rerender of the Download button here, then we will need to define a new State for shouldShowDownloadButton and a useEffect that updates it based on the value of isOffline.

What alternative solutions did you explore? (Optional)

xx

@Nodebrute
Copy link
Contributor

Nodebrute commented Sep 7, 2023

Proposal

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

A new tab opens when downloading offline.

What is the root cause of that problem?

This line causes the link to open in a new tab.

Link.openExternalLink(url);

Prior to this PR (#24547), we used to display a growl notification when redirecting the user to an external link. However, with this PR, it was decided that we no longer want to prevent users from navigating to external links when we are in offline mode.

Growl.show(Localize.translateLocal('session.offlineMessageRetry'), CONST.GROWL.WARNING);

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

I'm able to reproduce. If we're able to download the attachment then we should. If not, then we'd want to somehow tell the user they need to go online to access the attachment.

In my opinion (IMO), I believe we should not hide the download button. Instead, we should display a growl notification if a user is offline and clicks on the download button. One approach could be to introduce an additional parameter in the openExternalLink function to handle cases where we want to show a growl notification in offline mode. Alternatively, we could make changes only within the .catch block to trigger the growl notification when in offline mode.

What alternative solutions did you explore? (Optional)

@melvin-bot melvin-bot bot added the Overdue label Sep 9, 2023
@melvin-bot
Copy link

melvin-bot bot commented Sep 11, 2023

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

1 similar comment
@melvin-bot
Copy link

melvin-bot bot commented Sep 11, 2023

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

@fedirjh
Copy link
Contributor

fedirjh commented Sep 11, 2023

If not, then we'd want to somehow tell the user they need to go online to access the attachment.

@tjferriss In reference to your statement, how should we convey this information to the user? We have a proposal that suggests the re-implementation of the growl notification which I think is being deprecated. Other proposals suggest that we hide the download button in offline mode.

So far we have :

  1. Hide the download button in offline mode.
  2. Display a growl notification when the download fails.

@melvin-bot melvin-bot bot removed the Overdue label Sep 11, 2023
@melvin-bot
Copy link

melvin-bot bot commented Sep 25, 2023

📣 @fedirjh 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

@melvin-bot
Copy link

melvin-bot bot commented Sep 25, 2023

❌ There was an error making the offer to @StevenKKC for the Contributor role. The BZ member will need to manually hire the contributor. cc @thienlnam

@melvin-bot
Copy link

melvin-bot bot commented Sep 25, 2023

📣 @daveSeife 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

@tjferriss
Copy link
Contributor

@StevenKKC can you please manually apply to the job posting here: https://www.upwork.com/ab/applicants/1699136998481727488/job-details

@melvin-bot melvin-bot bot removed the Overdue label Sep 25, 2023
@melvin-bot melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Sep 25, 2023
@StevenKKC
Copy link
Contributor

@fedirjh PR #28114 is ready for review.

@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Oct 2, 2023
@melvin-bot melvin-bot bot changed the title [$500] A new tab opens when downloading offline [HOLD for payment 2023-10-09] [$500] A new tab opens when downloading offline Oct 2, 2023
@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Oct 2, 2023
@melvin-bot
Copy link

melvin-bot bot commented Oct 2, 2023

Reviewing label has been removed, please complete the "BugZero Checklist".

@melvin-bot
Copy link

melvin-bot bot commented Oct 2, 2023

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.75-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

If no regressions arise, payment will be issued on 2023-10-09. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

  • External issue reporter
  • Contributor that fixed the issue
  • Contributor+ that helped on the issue and/or PR

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

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

  • Merged PR within 3 business days of assignment - 50% bonus
  • Merged PR more than 9 business days after assignment - 50% penalty

@melvin-bot
Copy link

melvin-bot bot commented Oct 2, 2023

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

  • [@fedirjh] The PR that introduced the bug has been identified. Link to the PR:
  • [@fedirjh] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
  • [@fedirjh] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
  • [@fedirjh] Determine if we should create a regression test for this bug.
  • [@fedirjh] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
  • [@tjferriss] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@tjferriss
Copy link
Contributor

Payment summary:

Eligible for 50% speed bonus

@StevenKKC
Copy link
Contributor

@tjferriss I am afraid to let you know that My Upwork account is suspended so I couldn't get paid with my account. May I send proposal with my friend's account?

@tjferriss
Copy link
Contributor

@StevenKKC that's fine. They can apply for the posting here: https://www.upwork.com/jobs/~0159b5b921ce8fa955.

Please comment here with their name once they've applied.

@StevenKKC
Copy link
Contributor

Thank you @tjferriss I submit proposal with my friend's account.
This is profile link: https://www.upwork.com/freelancers/~0188155b8a5d85a491

@tjferriss
Copy link
Contributor

@StevenKKC I just sent an offer to your friend.

@fedirjh
Copy link
Contributor

fedirjh commented Oct 9, 2023

BugZero Checklist:

  • Link to the PR: This doesn’t seem to be a recent regression, The code for opening the new tab was present for over 2 years.
  • Link to discussion: N/A, There is Nothing we can add to the checklist, we should require a regression test for this bug.
  • Determine if we should create a regression test for this bug:

Regression Test Proposal

  1. From user A, Send an attachment to user B.
  2. Be offline for user B before opening the attachment
  3. Hover over the attachment and open the context menu
  4. Verify that there is no download option in the context menu
  5. Click on the attachment to open it
  6. Verify that there is no download button at the attachment header
  7. Go online
  8. Verify that you can download the attachment from the context menu and from the attachment header
  • Do we agree 👍 or 👎

@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 Daily KSv2 labels Oct 9, 2023
@tjferriss
Copy link
Contributor

All payments have been sent via Upworks and the regression test has been proposed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 Engineering External Added to denote the issue can be worked on by a contributor
Projects
None yet
Development

No branches or pull requests