Disable actions that require an internet connection

[AWolf81]

It's more a bug than a feature but I'm writing this as feature description. I've noticed this during my work on PR #335 because there I'm using fetch to get the starters from Github.

Describe the bug
With-out internet connection some features aren't working as expected:

• Create new project will hang and show a console.log (see first screenshot)
• Add dependency won't show Agolia results with-out an info what's wrong
• Gatsby starters (once merged) not visible in Typeahead list

To Reproduce

1. Disable Wifi or disconnect LAN cable
2. Trigger task that requires a connection:

• Create a new project & click Let's build
• Click Add New Dependency
• Note: Gatsby starter list (new feature in gatsby-starter branch) won't need a special handling as failing silently is OK.

3. Check console.

Expected behavior
Allow tasks that can be performed offline & disable actions that require an internet connection. Also display an infobar that Guppy requires an internet connection on the top of the app (right below the application menu).

• OnlineCheck Component: Use navigator.onLine to determine & check if this is working in Chrome. See mdn here. Added to App.js. Check can be done like in the following Codesandbox example - just Redux missing.
• Add isOnline boolean to app-status.reducer
• Check internet connection before tasks that require a connection (on failure show infobar & disable action - depends on how the online check is working, maybe automatically disabled & just a connection to app-status.reducer - isOnline flag required)
  • Create new project build
  • Before opening Add New Dependency

Screenshots
CRA build with-out internet

Add dependency fails silently

Discussion

• Do we need offline support? I think it would be good but until we have it, the easiest fix is to disable these action. Offline support for project creation would require a cache for project creation. Adding dependencies is probably not possible to cache - too much data. Note: This requires a new issue so we can discuss the details.
• UI: Is adding an infobar on top of the screen OK? Should it be dismissable?

[actuallyReallyAlex]

I would like to add that it seems if your network is heavily throttled, the search feature also doesn't work, as described above. Creating a new project shows the animation and takes a long time, but it does eventually work.

Hard for me to tell if this is a proxy issue, a firewall issue, or a slow connection issue.

[joshuaellis]

If no one is looking at this I'm happy to do so.

[AWolf81]

@joshuaellis sure, it's all yours.
If you're having questions or need support during work - please let me know.

I'm pretty busy with writing unit tests. That's why I'm not working on new features at the moment. But maybe I'm doing a break from the tests soon and have a look at the Codesandbox export feature.

[joshuaellis]

UI: Is adding an infobar on top of the screen OK? Should it be dismissable?

A couple of questions relating to the quote, firstly do we already have an infobar designed and built? Not to worry if not. Secondly, I don't think it should be dismissable considering we're going to be blocking core features of the product – building new projects and adding new dependencies.

What're your thoughts?

[AWolf81]

We don't have an infobar designed. That's a new part of the UI.
Yes, you're right. It's OK that it is not dismissable.

[joshuaellis]

I was wondering if we want to have the infobar UI as a separate component that we could use in other instances, is this something we would want or should the Online Checker render an infobar?

[AWolf81]

I think it's OK to render it in in the OnlineCheck component as this is a special info.

We have had some discussions about notifications (nothing decided) but I think this won't fit into a toastr notification system. We wanted to have some toasts for finishing tasks info or when we'd like to have the users attention on a task - I think there is no open issue for this but I'll check and open an issue so we can discuss this there.

[AWolf81]

OK, we can close this. Thanks @joshuaellis for adding this.

I like the idea of having a low bandwidth info as @alexlee-dev mentioned. Maybe we could add this as a new issue but I'm not sure if it's worth to add.
If you like to see this feature please create a new issue and we can discuss the implementation details there.