feat: add updates downloading status and progress in UI and replace popups

VityaSchel commented 2 months ago

First time contributor checklist:

[X] I have read the README and Contributor Guidelines

Contributor checklist:

[x] My commits are in nice logical chunks with good commit messages
[X] My changes are rebased on the latest clearnet branch
[X] A yarn ready run passes successfully (more about tests here)
[X] My changes are ready to be shipped to users

Description

Feature request: #1356

This PR introduces update indicator in left panel, which displays 3 states: 1) Update is available — when clicked on it, app will start downloading update with electron-updater 2) Update is being downloaded — when clicked on it, app will cancel downloading using CancellationToken 3) Update is downloaded and ready to be installed — when clicked on it, app will use quitAndInstall method from autoUpdater

https://github.com/oxen-io/session-desktop/assets/59040542/86f247c7-6675-4661-a142-a508ca47c9f2

While in downloading state, circular component shows how much of file has been downloaded. Its spinning tells the user that app is actively working on update in background.

Additionally there is a tooltip verbally telling user exactly what this button means and what's gonna happen if they press it.

Why I think it's better than popups

While popups are great for capturing user's attention (this is important, since Session updates are also security patches), I think most of the time they just obstruct view and prevent user from doing some important things. Moreover, there is no way to delay update — to trigger update downloading you have to restart app or search in menus. And even if you do agree to update, as mentioned in #1356, you won't notice anything happens. My approach allows user to finish their tasks in conversations and then click download update button whenever they are ready. After that, the same applies to restart. Under the hood, it uses the same implementation with minor changes:

I removed update prompt popup and install prompt popup, but I didn't remove update error popup. Errors are somewhat extraordinary, so I think we can keep this popup.

I used electron-updater's update-downloaded and download-progress events to track states and send them to renderer process.

I've added appUpdates redux store reducer to store current status of this indicator's UI. Renderer and main processes communicate using ipcRenderer and webContents.send methods.

I've added close icon to Icons.tsx which is an X symbol that represents close, stop, delete, cancel actions.

I've added 2 translation keys: updateDownloadProgress (with progress variable — '%' suffix is added automatically), updateDownloadedRestart

KeeJef commented 2 months ago

Great, will provide some more feedback on the UI of this shortly

KeeJef commented 1 month ago

Provided a Figma link directly to @VityaSchel , has some slight design tweaks and some string changes

VityaSchel commented 1 month ago

Provided a Figma link directly to @VityaSchel , has some slight design tweaks and some string changes

I updated 1 string, made prompt button with download arrow bigger, refactored structure (removed div and applied pointer events to buttons instead), fixed theming, added prompting tooltip that appears when update is available and hides after 5 seconds is user hasn't hovered over update button and added HTML button's pointer events props to SessionIconButton

KeeJef commented 4 weeks ago

Tracking internally via SES-2060

oxen-io / session-desktop