feat: improve auto update ux by remove user attention seeking dialogs and flows

Author: abose

src/extensionsIntegrated/appUpdater/main.js

@@ -37,6 +37,7 @@ define(function (require, exports, module) {
         Strings     = require("strings"),
         marked = require('thirdparty/marked.min'),
         semver = require("thirdparty/semver.browser"),
+        NotificationUI = require("widgets/NotificationUI"),
         TaskManager = require("features/TaskManager"),
         StringUtils         = require("utils/StringUtils"),
         NativeApp           = require("utils/NativeApp"),
@@ -48,6 +49,7 @@ define(function (require, exports, module) {
         KEY_UPDATE_AVAILABLE = "PH_UPDATE_AVAILABLE";
 
     const PREFS_AUTO_UPDATE = "autoUpdate";
+    let isAutoUpdateFlow = true;
 
     function showOrHideUpdateIcon() {
         if(!updaterWindow){
@@ -56,17 +58,23 @@ define(function (require, exports, module) {
         if(updaterWindow && !updateTask) {
             updateTask = TaskManager.addNewTask(Strings.UPDATING_APP, Strings.UPDATING_APP_MESSAGE,
                 `<i class="fa-solid fa-cogs"></i>`, {
+                    noSpinnerNotification: isAutoUpdateFlow, // for auto updates, don't get user attention with spinner
                     onSelect: function () {
                         if(updatePendingRestart){
-                            Dialogs.showInfoDialog(Strings.UPDATE_READY_RESTART_TITLE, Strings.UPDATE_READY_RESTART_MESSAGE);
+                            Dialogs.showInfoDialog(Strings.UPDATE_READY_RESTART_TITLE,
+                                Strings.UPDATE_READY_RESTART_INSTALL_MESSAGE);
                         } else if(updateFailed){
                             Dialogs.showInfoDialog(Strings.UPDATE_FAILED_TITLE, Strings.UPDATE_FAILED_MESSAGE);
-                        }else {
+                        } else {
                             Dialogs.showInfoDialog(Strings.UPDATING_APP, Strings.UPDATING_APP_DIALOG_MESSAGE);
                         }
                     }
                 });
-            updateTask.show();
+            if(!isAutoUpdateFlow) {
+                updateTask.show();
+            } else {
+                updateTask.flashSpinnerForAttention();
+            }
         }
         let updateAvailable = PreferencesManager.getViewState(KEY_UPDATE_AVAILABLE);
         if(updateAvailable){
@@ -243,6 +251,7 @@ define(function (require, exports, module) {
     }
 
     async function checkForUpdates(isAutoUpdate) {
+        isAutoUpdateFlow = isAutoUpdate;
         showOrHideUpdateIcon();
         if(!navigator.onLine) {
             return;
@@ -261,7 +270,8 @@ define(function (require, exports, module) {
         }
         if(updatePendingRestart || updateDetails.updatePendingRestart){
             if(!isAutoUpdate){
-                Dialogs.showInfoDialog(Strings.UPDATE_READY_RESTART_TITLE, Strings.UPDATE_READY_RESTART_MESSAGE);
+                Dialogs.showInfoDialog(Strings.UPDATE_READY_RESTART_TITLE,
+                    Strings.UPDATE_READY_RESTART_INSTALL_MESSAGE);
                 // the dialog will only be shown in explicit check for updates, else its annoying that this comes
                 // up at every new window create from app.
             }
@@ -302,8 +312,7 @@ define(function (require, exports, module) {
         DOWNLOADING: "DOWNLOADING",
         INSTALLER_DOWNLOADED: "INSTALLER_DOWNLOADED",
         FAILED: "FAILED",
-        FAILED_UNKNOWN_OS: "FAILED_UNKNOWN_OS",
-        INSTALLED: "INSTALLED"
+        FAILED_UNKNOWN_OS: "FAILED_UNKNOWN_OS"
     };
 
     function _sendUpdateCommand(command, data) {
@@ -536,22 +545,18 @@ define(function (require, exports, module) {
                     updateTask.setFailed();
                     updateTask.setMessage(Strings.UPDATE_FAILED_TITLE);
                     Dialogs.showInfoDialog(Strings.UPDATE_FAILED_TITLE, Strings.UPDATE_FAILED_MESSAGE);
-                } else if(data === UPDATE_STATUS.INSTALLED && !updateInstalledDialogShown){
-                    updateInstalledDialogShown = true;
-                    Metrics.countEvent(Metrics.EVENT_TYPE.UPDATES, 'done', Phoenix.platform);
-                    updatePendingRestart = true;
-                    updateTask.setSucceded();
-                    updateTask.setTitle(Strings.UPDATE_DONE);
-                    updateTask.setMessage(Strings.UPDATE_RESTART);
-                    Dialogs.showInfoDialog(Strings.UPDATE_READY_RESTART_TITLE, Strings.UPDATE_READY_RESTART_MESSAGE);
                 } else if(data === UPDATE_STATUS.INSTALLER_DOWNLOADED){
                     Metrics.countEvent(Metrics.EVENT_TYPE.UPDATES, 'downloaded', Phoenix.platform);
                     updatePendingRestart = true;
                     updateTask.setSucceded();
                     updateTask.setTitle(Strings.UPDATE_DONE);
                     updateTask.setMessage(Strings.UPDATE_RESTART_INSTALL);
                     if(!updateInstalledDialogShown){
-                        Dialogs.showInfoDialog(Strings.UPDATE_READY_RESTART_TITLE, Strings.UPDATE_READY_RESTART_INSTALL_MESSAGE);
+                        NotificationUI.createToastFromTemplate(Strings.UPDATE_READY_RESTART_TITLE,
+                            `<div>${Strings.UPDATE_READY_RESTART_INSTALL_MESSAGE}</div>`, {
+                                toastStyle: NotificationUI.NOTIFICATION_STYLES_CSS_CLASS.SUCCESS,
+                                dismissOnClick: true
+                            });
                         updateInstalledDialogShown = true;
                     }
                     _sendUpdateCommand(UPDATE_COMMANDS.GET_INSTALLER_LOCATION);

src/features/TaskManager.js

@@ -93,7 +93,7 @@ define(function (require, exports, module) {
      * determines what the spinner icon to show(green-for success), red-fail, blue normal based on the active
      * tasks in list and renders. IF the active tasks has already  been notified, it wont notify again.
      */
-    function renderSpinnerIcon(newTaskAdded) {
+    function renderSpinnerIcon(showNormalSpinnerIfNone) {
         let unackSuccessTaskFound = false;
         if(currentSpinnerType && currentSpinnerType !== SPINNER_NORMAL) {
             // there is a success/fail spinner visible, clean it. For the normal spinner, it will be
@@ -116,7 +116,7 @@ define(function (require, exports, module) {
 
         // for normal spinner, we dont show anything as its only shown briefly till SPINNER_HIDE_TIME
         // which was already handled, except when newTaskAdded
-        if(newTaskAdded) {
+        if(showNormalSpinnerIfNone) {
             _showSpinnerIcon(SPINNER_NORMAL);
         }
     }
@@ -137,6 +137,7 @@ define(function (require, exports, module) {
             exports.taskSelect = taskSelect;
             exports.SPINNER_HIDE_TIME = SPINNER_HIDE_TIME;
         }
+        hideSpinnerIcon();
     }
     function _renderItem(item, index) {
         if(item === Strings.STATUSBAR_TASKS_UNKNOWN_EXTENSION_TASK){
@@ -326,6 +327,7 @@ define(function (require, exports, module) {
      * @property {function(): void} hidePauseIcon - Hides the pause icon.
      * @property {function(string): void} showRestartIcon - Shows the restart (retry) icon with an optional tooltip message.
      * @property {function(): void} hideRestartIcon - Hides the restart (retry) icon.
+     * @property {function(): void} flashSpinnerForAttention - briefly flashes the task spinner icon for attention.
      */
 
     /**
@@ -343,6 +345,8 @@ define(function (require, exports, module) {
      * @param {Function} [options.onRetryClick] - Callback function triggered when the retry button is clicked.
      * @param {Function} [options.onSelect] - Callback function triggered when the task is selected from the dropdown.
      * @param {number} [options.progressPercent] - Initial progress percentage of the task.
+     * @param {boolean} [options.noSpinnerNotification] - If set to true, will not show the task spinners for this task.
+     *         This can be used for silent background tasks where user attention is not needed.
      * @returns {TaskObject} Returns a task object with methods for updating the task's state and UI representation,
      * such as `setProgressPercent`, `setMessage`, `setSucceeded`, `setFailed`, and control visibility methods
      * like `showStopIcon`, `hideStopIcon`, etc.
@@ -378,7 +382,8 @@ define(function (require, exports, module) {
         onStopClick: null,
         onRetryClick: null,
         onSelect: null,
-        progressPercent: null
+        progressPercent: null,
+        noSpinnerNotification: false
     }) {
         if(!taskTitle){
             throw new Error("taskTitle is required to call addNewTask");
@@ -399,8 +404,10 @@ define(function (require, exports, module) {
             _percent: options && options.progressPercent,
             _completedStatus: STATUS_INCOMPLETE,
             _iconHTML: iconHTML,
-            _spinnerIconAck: false // This is set when the user has seen the spinner icon spinning and clicked to see
-            // weather the task succeeded or failed.
+            _noSpinnerNotification: options && options.noSpinnerNotification,
+            _spinnerIconAck: options ? !!options.noSpinnerNotification : false
+            // Spinner ack is set when the user has seen the spinner icon spinning and clicked to see
+            // weather the task succeeded or failed. Some tasks may want to be silent by setting noSpinnerNotification.
         };
         function close() {
             delete taskList[task._id];
@@ -451,7 +458,9 @@ define(function (require, exports, module) {
         function setFailed(){
             task._completedStatus = STATUS_FAIL;
             _renderProgressbar(task);
-            task._spinnerIconAck= false;
+            if(!task._noSpinnerNotification){
+                task._spinnerIconAck= false;
+            }
             renderSpinnerIcon();
         }
         function isFailed(){
@@ -460,7 +469,9 @@ define(function (require, exports, module) {
         function setSucceeded(){
             task._completedStatus = STATUS_SUCCESS;
             _renderProgressbar(task);
-            task._spinnerIconAck= false;
+            if(!task._noSpinnerNotification){
+                task._spinnerIconAck= false;
+            }
             renderSpinnerIcon();
         }
         function isSucceeded(){
@@ -499,6 +510,9 @@ define(function (require, exports, module) {
             task._showRestartIcon = null;
             _renderPlayIcons(task);
         }
+        function flashSpinnerForAttention() {
+            renderSpinnerIcon(true);
+        }
 
         task.show = show;
         task.close = close;
@@ -521,10 +535,15 @@ define(function (require, exports, module) {
         task.hidePauseIcon = hidePauseIcon;
         task.showRestartIcon = showRestartIcon;
         task.hideRestartIcon = hideRestartIcon;
+        task.flashSpinnerForAttention = flashSpinnerForAttention;
         taskList[task._id] = task;
         EventDispatcher.makeEventDispatcher(task);
         _showOrHideStatusBarIfNeeded();
-        renderSpinnerIcon(true);
+        if(!task._noSpinnerNotification){
+            renderSpinnerIcon(true);
+        } else {
+            renderSpinnerIcon();
+        }
         return task;
     }
 

src/nls/root/strings.js

@@ -612,9 +612,8 @@ define({
     "UPDATE_NOT_AVAILABLE_TITLE": "{APP_NAME} is up to date",
     "UPDATE_UP_TO_DATE": "Your version of {APP_NAME} is the latest!",
     "UPDATE_AVAILABLE_TITLE": "Update Available",
-    "UPDATE_READY_RESTART_TITLE": "Update Ready: Restart Required",
-    "UPDATE_READY_RESTART_MESSAGE": "Close all {APP_NAME} app windows and restart the app to launch the updated version.",
-    "UPDATE_READY_RESTART_INSTALL_MESSAGE": "Update Successfully Downloaded: Please close all {APP_NAME} app windows to apply the latest updates.",
+    "UPDATE_READY_RESTART_TITLE": "Restart App to Update",
+    "UPDATE_READY_RESTART_INSTALL_MESSAGE": "{APP_NAME} will be updated automatically when you close all open windows.",
     "UPDATE_FAILED_TITLE": "Update Failed",
     "UPDATE_INSTALLING": "Installing Update\u2026",
     "UPDATE_INSTALLING_MESSAGE": "Update Installation in Progress: {APP_NAME} is currently installing the latest updates. The application will automatically close once the installation is complete.",

src/tauri-updater.html

@@ -20,8 +20,7 @@
             DOWNLOADING: "DOWNLOADING",
             INSTALLER_DOWNLOADED: "INSTALLER_DOWNLOADED",
             FAILED: "FAILED",
-            FAILED_UNKNOWN_OS: "FAILED_UNKNOWN_OS",
-            INSTALLED: "INSTALLED"
+            FAILED_UNKNOWN_OS: "FAILED_UNKNOWN_OS"
         };
         let status = UPDATE_STATUS.STARTED;
         let progressPercent = 0, fileSize = 0, installerLocation;