session-desktop icon indicating copy to clipboard operation
session-desktop copied to clipboard

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

Open VityaSchel opened this issue 1 year ago • 4 comments

First time contributor checklist:

Contributor checklist:

Description

Feature request: oxen-io/session-desktop-temp#795

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.

image

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 oxen-io/session-desktop-temp#795, 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

VityaSchel avatar Apr 30 '24 01:04 VityaSchel

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

KeeJef avatar Apr 30 '24 05:04 KeeJef

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

KeeJef avatar May 08 '24 07:05 KeeJef

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

VityaSchel avatar May 08 '24 16:05 VityaSchel

Tracking internally via SES-2060

KeeJef avatar Jun 03 '24 09:06 KeeJef