[UI Feature] Add diagnostic information to account menu

[G-Ambatte]

Commonly reported issues in the subreddit and here on GitHub revolve around users being unaware whether their account is connected to Google, or that their Google refresh token is expired.
I propose that we add an additional item to the new Account dropdown menu (added in PR #2015) to allow the user to display some of the information, decoded from the JWT cookie, in order to assist with diagnostics, self or otherwise.

Specifically, I suggest we show the following information:

• the account username (jwt.username)
• the token issue date (jwt.issued)
• if the account is linked to Google (jwt.googleId ? 'YES' : 'NO')
• if the account is linked to Google, time remaining until a log in refresh is required (jwt.googleId ? 'Time remaining to Google log in required: moment(jwt.issued).add(1,'y').toNow()' : '')
• possibly the shareId of the current brew, if one is loaded

This could currently be achieved through a simple alert() box, although we may also wish to create an information window that is more in line with the Homebrewery UI. It may be worth considering shifting the REPORT ISSUE button to the new Diagnostics window, and including the diagnostic information in the automatically generated Issue Report template.

I believe that such a feature would help reduce some of the current issue reports, and hopefully aid in the swift resolution of future issues.

[calculuschild]

Labeling it a "diagnostics" page is something I haven't really seen before and might be confusing to users. If we need a place to solve user issues, I think those diagnostics should instead be included in the error message somehow. Average users aren't going to think to check some "diagnostics" button when something goes wrong.

However, I see this turning into a simple my account page, separate from my brews, and in that case showing some of that info is fine, but more for user convenience rather than some technical infodump.

Also, we have technically been using "sign in with google" as the solution to a lot more than just "credentials expired". There are multiple different error codes that we get; at first we only showed the "sign in again" message for a 403 I think, but there are others, and eventually we just showed that message for all google-related issues because we kept getting complaints on the github. I'm pretty sure we've seen some cases where a user just barely signed in and was having some issue, and it turns out the Google Drive was full, or they were trying to access it from a different google account, etc.

With that in mind, I agree with most of the bullet points except:

• time until login refresh: I don't like countdown timers. (silly) people might get the impression that they will lose access to their account, that they are in a limited trial, etc. Or, if signed into multiple computers, see one number and then get confused when the other computer is expired. Instead, maybe we do a test and try to retrieve brews. If success, indicate somehow that we "have contact", and otherwise show "trouble connecting from this device" and hint that it's time to refresh credentials, or a more specific message depending on the actual error code.
• shareId of the current brew: I'm not sure the benefit of this.

Also, for the future, such an account page might be a good place to put a password-change interface? (separate PR)

[G-Ambatte]

• time until login refresh
• Google access check: YES/NO

Check if we can read the Homebrewery directory on the user's linked Google Drive account.
If this is a page rather than than a simple text box, we could also drop a link to the login and/or the instructions in #1580 here.

• shareId of the current brew

This was more for the users reporting problems but not actually sharing a brew link that demonstrates the issue (as in #1238). If this was a "My Account Information" page instead of a pop up/over message window, it would never be relevant.

---

The simplest solution would be to generate the text as a Brew, then push it through the SharePage for display (effectively using SharePage as a BasePage). It may be beneficial - mostly for DRY purposes - to first separate SharePage to a BasePage, say "ViewPage.jsx" that takes NavBarElements as a prop, rather than the current solution where SharePage alters it's behaviour based on the existence of this.props.brew.shareId. That, however, is probably fodder for a separate Issue/PR.

[G-Ambatte]

I quickly threw together some proof of concept work:

Account menu:

Account Info page:

[calculuschild]

Examples of errors that we typically send users to "refresh Google Credentials" but that is not necessarily the solution:

503

#2057

A 503 means our server was contacted but was (busy?) and couldn't process the request. Usually solved by just saving again after a couple seconds.

500

#2048

500 Means our server is broken. Usually we get this if the server crashes.

404

https://www.reddit.com/r/homebrewery/comments/t8me6a/issue_describe_your_issue_here/

Error updating permissions: The user does not have sufficient permissions for this file. Not sure the cause. The user is able to create a new brew, but does not have permissions to share that brew back to the Homebrewery (credentials partially expired?). Refreshing credentials might fix this but I haven't heard back from any users if it helps.

403

The real "credentials expired" or "not logged in with Google" error. Refreshing credentials is required.

[ericscheid]

Additionally, could the various diagnostic details be included in the Report Issue option?

Currently, this just spawns a reddit post form with just prompts for details .. and in practice those details are not always super well specified.

[Gazook89]

Examples of errors that we typically send users to "refresh Google Credentials" but that is not necessarily the solution:

(directory of error codes and reasons)

Should we actually just fix our error messaging to handle each of these errors differently?

Also, I'm going to copy/paste your 'definitions' from that comment and put it in the github Wiki just so I can reference it later.

[calculuschild]

Should we actually just fix our error messaging to handle each of these errors differently?

Ideally, yes. Right now, the only popup that actually says "refresh your credentials" is if the error comes from Google. That handles the 404 and 403 issues above.

homebrewery/client/homebrew/pages/editPage/editPage.jsx

Line 299 in edd5845

if(this.state.errors.response.req.url.match(/^\/api.*Google.*$/m)){

Everything else we just say "oops! Looks like there was a problem saving. Report your issue here: link to Github".

So we could potentially be more clear on those other ones. We still want them to report the issue on a 500 or 503 because that means something may be broken on our end, but we could be more clear:

503 "Looks like our servers are a more busy than usual! Wait a couple of seconds and then try saving again. If this keeps happening, report the issue here:"

500 "Aah! Our servers are having trouble saving your document. Make a backup of your brew, and report your issue here to let us know:"

[calculuschild]

Fixed by #2161