feat: add visual feedback on API address change

[jack-michaud]

Saw that there was a help wanted tag on #1635, thought I could lend a hand!

Changes

• Add error text to API address settings form (ApiAddressForm.js)
• Populate error message for invalid addresses and connection errors (ApiAddressForm.js)
• Add outline to ApiAddressForm to indicate address validity (ApiAddressForm.js)
• Add apiAddress to "could not connect" message ("Could not connect to the IPFS API (/ip4/.../tcp/5001)") (ipfs-provider.js)
• Add "pending first API connection" handlers to ipfs-provider (ipfs-provider.js)
• Add full page loader when pending first connection (SettingsPage.js)

Demo

Tried to submit an invalid IPFS API address

Tried unsuccessfully to connect to an IPFS API

(Video) Filling out an API address

Video (filling-out-address.webm)

TODO

• Polish off successful state (right now it just shows no error message, but that's not nice enough)
• Remove new ApiAddressForm.css file in favor of tachyon utility classes (I don't do anything special in the CSS)

Closes #1635

[jessicaschilling]

Thanks, @jack-michaud! Assigning some folks to have a look. Please note this week is a little hectic but we'll act as speedily as we can!

[jack-michaud]

Thanks for the prompt triage @jessicaschilling !
Totally get that it's hectic, so no rush. I'll be chipping away at the remaining TODOs to polish it off in the meantime.

[jessicaschilling]

Hi @jack-michaud -- sounds like a plan. Drop a comment when you're ready for a final review. 😊

I didn't dig into the code, but the video and screenshots look excellent! The only nit is that we're using snackbars for error messages (example pasted below), so for consistency's sake, probably best to present the error messages that way. (For emphasis, leaving the red border around the entry box until it's cleared by something else - like entering another address - will be helpful.)

(FWIW, that error was invoked by entering /ip4/76.176.168.65/tcp/4001/p2p/QmbBHw1Xx9pUpAbrVZUKTPL5Rsph5Q9GQhRvcWVBPFgGtC in the "Add Connection" modal on the Peers screen.)

[rafaelramalho19]

Don't forget to use translations here

[jack-michaud]

Thanks for the feedback and review @jessicaschilling and @rafaelramalho19 --
I updated the PR to use the snackbar for errors:

Fail

Success

I also used the internationalization keys in to eventually give this a custom translation... the notify.json locale file has new keys ipfsConnectSuccess and ipfsConnectFail. Are there other steps to get this into Transifex?

[jessicaschilling]

That's it for Transifex!

For the fail state, could you please give the input box a red highlight border?

[jack-michaud]

For the fail state, could you please give the input box a red highlight border?

@jessicaschilling Absolutely!
Video demo

I pulled another feature from the peer "add connection" dialog behavior. For invalid multiaddrs, the submit button is disabled.
Also, like you suggested, when you submit a value and it fails to connect, the input box will remain red until new values are typed

Thank you for bearing with me in these iterations.

[jessicaschilling]

@jack-michaud This is awesome - thank you!
@lidel and @rafaelramalho19, do you mind a review when you're able?

[lidel]

@jack-michaud reviewed functionally and this looks and works great, thank you! ❤️

@rafaelramalho19 please review in spare time, and merge when you feel it's ready. (any accessibility concerns?)

[rafaelramalho19]

LGTM, after my change request we're good to merge 🎉

[jack-michaud]

Thanks for the review, @rafaelramalho19 - I fixed the equals signs, let me know if there's anything else you'd like to see!

Changes addressed!

[jessicaschilling]

Thanks, @jack-michaud — merged!

We very much appreciate your work! If you have the inclination, please feel free to pick up any other issues labeled help wanted in this repo ... or for a higher-level view across all 13 GUI-related repos, check the Quick Fixes column of this ZenHub board.