Implement Auto-Update UX for Composer Electron

[tonyanziano]

Work with @DesignPolice to implement in-app UX for automatic application updates.

[DesignPolice]

Sounds like fun, what are the requirements for this... Any ideas on the number of buttons or copy... or I can do some searching on others who have gone before us. @tonyanziano

[DesignPolice]

@sangwoohaan @tonyanziano @srinaath @cwhitten

Hey gentlemen, Marieke would like Sangwoo to take a pass at this before dropping it to me to verify the visuals we want to use -

Sang here are a couple of the screen grabs from Emulator that has a similar auto update, though there are some key differences.

[sangwoohaan]

My two cents :
In the first screen where you select an option, it would make more sense if there were just two options (download and update manually / install and restart), and have 'Automatically download and update' as a checkbox option for the future.

[srinaath]

I agree too @sangwoohaan especially until Composer becomes super stable and we get into a normal release cycle, we should not show the option for "Automatic Updates".

[tonyanziano]

Here are some of the auto update lifecycle events we can key off of (points at which we can show / update the UI):

• started checking for an update
• update is available
• update is not available
• download progress has updated
• update has been downloaded
• encountered an error

[DesignPolice]

Might be worth exploring using the (Bell) notification option in the header? then start the modals - We don't currently use any of the User Log in or settings up there, but could be a familiar way to surface needs if people aren't using the autoupdate option.

[sangwoohaan]

The first draft
https://www.figma.com/file/LlTlh5vXwq91zjGnFtrUUR6l/Composer-master-design-spec-UI-library?node-id=1212%3A11996

[tonyanziano]

@sangwoohaan do you happen to know the name of the icon in the app header? I can only find a similar icon with the direction of the arrow reversed on the Fabric / Fluent website:

If not, we could flip the icon horizontally.

[DesignPolice]

Hey Tony
I don't think it makes a big difference on the direction, but here is the icon.

[DesignPolice]

https://www.iconcloud.design/home/FULL%20MDL2%20Assets/Fabric%20MDL2%20Assets/e81c

[tonyanziano]

Sounds good! Thanks

[tonyanziano]

@DesignPolice @sangwoohaan

Functionally, I believe this feature to be complete. Here's what I have:

Update available

Update available - popup minimized

Update failed

Update progress - waiting for total

Update progress

Update succeeded - user chose install

Update succeeded - user chose download manually

Update unavailable

I added an extra "Update unavailable" state for the future, when we add a button that will allow users to explicitly check for updates through maybe the app menu or some other piece of UI.

I also changed the copy on the progress bar from reading out the total in GB to MB, because our updates should never surpass the size of 1GB. If we do ever get to that point, we can switch over to GB.

[cwhitten]

addressed via #2721