Add upgrade button to the app

[cgardens]

Tell us about the problem you're trying to solve

• People try to upgrade Airbyte without ever seeing the upgrading docs. We want to do a better job getting users the info they need to upgrade successfully.

Describe the solution you’d like

• Add an upgrade button above the help icon in the UI. When clicked this button will open in a new tab the upgrading airbyte docs page.

@johnlafleur does this sound okay for you? would you want to pick out the "upgrade" icon.

┆Issue is synchronized with this Asana task by Unito

[johnlafleur]

Isn't this redundant with #3003 ?
I don't think we should do both. So the question is which one is the best experience and offers the best conversion rate.
@cgardens

[cgardens]

@johnlafleur I don't think they are the same issue. This is specifically trying to improve the upgrade experience for the core platform, not for connectors.

Our main goal here is to improve the visibility of our upgrade instructions for the core platform

[johnlafleur]

Both are for the upgrading of the core platform...
Here's the design for #3003 https://www.figma.com/file/etaOkOsnXMoKwbfhCD71kw/Web-app?node-id=24505%3A0

[cgardens]

@jamakase can we add the following button in the app ("Update" -- see screenshot below. Let's go with "Update" instead of "Updates".)

Must Have:

• This button should open a new tab and link to https://docs.airbyte.io/upgrading-airbyte.
• It's not in the screenshot but we can leave the settings button (that'll get removed in another issue)
• Remove the Help button.

Nice to have:

This button only appears when there is a new version of Airbyte available. This would be determined by fetching this file from github https://github.com/airbytehq/airbyte/blob/master/.env and comparing the VERSION variable to whatever version the webapp is running on. If the version on github is greatr than the button should appear (with a a red dot, like we do for the admin page).

You can find the logic for how we do the version comparison in java here; it might be a useful reference as you will likely need something similar in javascript.

@jamakase lmk if the "nice to have" section feels reasonable to you.

[johnlafleur]

We'll use getbeamer.com to display those updates.

Regarding Beamer:

• Installation guide: https://www.getbeamer.com/blog/tutorial-how-to-use-beamer-in-your-website-or-app
• We would use our own icon in the left column (not theirs), so embedded widget
• You should have received an invitation to that tool
• Here's a design of how it should like: https://www.figma.com/file/etaOkOsnXMoKwbfhCD71kw/Web-app?node-id=26416%3A82098

[cgardens]

The first part of this is done. We have an upgrade button that links to docs. The second part of integration beamer still needs to be done. That's on me to understand what that entails first. Adjusting priority for now too since other cloud tasks are taking priority.

[timroes]

I'm going to close this, since the integration of beamer (which was the left work in this issue) hasn't been coming up recently. If we'll still consider this, we'll create a new issue targeted to that.