Display key backup upload progress in Settings

This adds a summary of the keys currently waiting for backup, which may be
useful for following a large upload as it progresses.

src/components/views/settings/KeyBackupPanel.js

@@ -28,6 +28,8 @@ export default class KeyBackupPanel extends React.PureComponent {
         this._startNewBackup = this._startNewBackup.bind(this);
         this._deleteBackup = this._deleteBackup.bind(this);
         this._verifyDevice = this._verifyDevice.bind(this);
+        this._onKeyBackupSessionsRemaining =
+            this._onKeyBackupSessionsRemaining.bind(this);
         this._onKeyBackupStatus = this._onKeyBackupStatus.bind(this);
         this._restoreBackup = this._restoreBackup.bind(this);
 
@@ -36,6 +38,7 @@ export default class KeyBackupPanel extends React.PureComponent {
             loading: true,
             error: null,
             backupInfo: null,
+            sessionsRemaining: 0,
         };
     }
 
@@ -43,6 +46,10 @@ export default class KeyBackupPanel extends React.PureComponent {
         this._loadBackupStatus();
 
         MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatus);
+        MatrixClientPeg.get().on(
+            'crypto.keyBackupSessionsRemaining',
+            this._onKeyBackupSessionsRemaining,
+        );
     }
 
     componentWillUnmount() {
@@ -50,9 +57,19 @@ export default class KeyBackupPanel extends React.PureComponent {
 
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener('crypto.keyBackupStatus', this._onKeyBackupStatus);
+            MatrixClientPeg.get().removeListener(
+                'crypto.keyBackupSessionsRemaining',
+                this._onKeyBackupSessionsRemaining,
+            );
         }
     }
 
+    _onKeyBackupSessionsRemaining(sessionsRemaining) {
+        this.setState({
+            sessionsRemaining,
+        });
+    }
+
     _onKeyBackupStatus() {
         this._loadBackupStatus();
     }
@@ -153,6 +170,16 @@ export default class KeyBackupPanel extends React.PureComponent {
                 );
             }
 
+            let uploadStatus;
+            const { sessionsRemaining } = this.state;
+            if (sessionsRemaining > 0) {
+                uploadStatus = _t("Backing up %(sessionsRemaining)s keys...", {
+                    sessionsRemaining,
+                });
+            } else {
+                uploadStatus = _t("All keys backed up");
+            }
+
             let backupSigStatuses = this.state.backupSigStatus.sigs.map((sig, i) => {
                 const deviceName = sig.device.getDisplayName() || sig.device.deviceId;
                 const validity = sub =>
@@ -217,6 +244,7 @@ export default class KeyBackupPanel extends React.PureComponent {
                 {_t("Backup version: ")}{this.state.backupInfo.version}<br />
                 {_t("Algorithm: ")}{this.state.backupInfo.algorithm}<br />
                 {clientBackupStatus}<br />
+                {uploadStatus}<br />
                 <div>{backupSigStatuses}</div><br />
                 <br />
                 <AccessibleButton className="mx_UserSettings_button"

src/i18n/strings/en_EN.json

@@ -354,6 +354,8 @@
     "Unable to load key backup status": "Unable to load key backup status",
     "This device is uploading keys to this backup": "This device is uploading keys to this backup",
     "This device is <b>not</b> uploading keys to this backup": "This device is <b>not</b> uploading keys to this backup",
+    "Backing up %(sessionsRemaining)s keys...": "Backing up %(sessionsRemaining)s keys...",
+    "All keys backed up": "All keys backed up",
     "Backup has a <validity>valid</validity> signature from this device": "Backup has a <validity>valid</validity> signature from this device",
     "Backup has a <validity>valid</validity> signature from <verify>verified</verify> device <device></device>": "Backup has a <validity>valid</validity> signature from <verify>verified</verify> device <device></device>",
     "Backup has a <validity>valid</validity> signature from <verify>unverified</verify> device <device></device>": "Backup has a <validity>valid</validity> signature from <verify>unverified</verify> device <device></device>",