Rearrange backup status to always have advanced

src/components/views/settings/SecureBackupPanel.js

@@ -165,24 +165,28 @@ export default class SecureBackupPanel extends React.PureComponent {
     render() {
         const Spinner = sdk.getComponent("elements.Spinner");
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-        const featureDescription = _t(
+
-            "Back up your encryption keys with your account data in case you " +
+        const {
-            "lose access to your sessions. Your keys will be secured with a " +
+            loading,
-            "unique Recovery Key.",
+            error,
-        );
+            backupInfo,
+            backupSigStatus,
+            backupKeyStored,
+            sessionsRemaining,
+        } = this.state;
 
         let statusDescription;
-        let details;
+        let extraDetails;
         let actions;
-        if (this.state.error) {
+        if (error) {
             statusDescription = (
                 <div className="error">
                     {_t("Unable to load key backup status")}
                 </div>
             );
-        } else if (this.state.loading) {
+        } else if (loading) {
             statusDescription = <Spinner />;
-        } else if (this.state.backupInfo) {
+        } else if (backupInfo) {
             let restoreButtonCaption = _t("Restore from Backup");
 
             if (MatrixClientPeg.get().getKeyBackupEnabled()) {
@@ -203,15 +207,7 @@ export default class SecureBackupPanel extends React.PureComponent {
                 restoreButtonCaption = _t("Connect this session to Key Backup");
             }
 
-            let keyStatus;
-            if (this.state.backupKeyStored === true) {
-                keyStatus = _t("in secret storage");
-            } else {
-                keyStatus = _t("not stored");
-            }
-
             let uploadStatus;
-            const { sessionsRemaining } = this.state;
             if (!MatrixClientPeg.get().getKeyBackupEnabled()) {
                 // No upload status to show when backup disabled.
                 uploadStatus = "";
@@ -225,7 +221,7 @@ export default class SecureBackupPanel extends React.PureComponent {
                 </div>;
             }
 
-            let backupSigStatuses = this.state.backupSigStatus.sigs.map((sig, i) => {
+            let backupSigStatuses = backupSigStatus.sigs.map((sig, i) => {
                 const deviceName = sig.device ? (sig.device.getDisplayName() || sig.device.deviceId) : null;
                 const validity = sub =>
                     <span className={sig.valid ? 'mx_SecureBackupPanel_sigValid' : 'mx_SecureBackupPanel_sigInvalid'}>
@@ -306,12 +302,12 @@ export default class SecureBackupPanel extends React.PureComponent {
                     {sigStatus}
                 </div>;
             });
-            if (this.state.backupSigStatus.sigs.length === 0) {
+            if (backupSigStatus.sigs.length === 0) {
                 backupSigStatuses = _t("Backup is not signed by any of your sessions");
             }
 
             let trustedLocally;
-            if (this.state.backupSigStatus.trusted_locally) {
+            if (backupSigStatus.trusted_locally) {
                 trustedLocally = _t("This backup is trusted because it has been restored on this session");
             }
 
@@ -322,17 +318,13 @@ export default class SecureBackupPanel extends React.PureComponent {
                 </AccessibleButton>;
             }
 
-            details = (
+            extraDetails = <>
-                <details>
+                <div>{_t("Backup version: ")}{backupInfo.version}</div>
-                    <summary>{_t("Advanced")}</summary>
+                <div>{_t("Algorithm: ")}{backupInfo.algorithm}</div>
-                    <div>{_t("Backup version: ")}{this.state.backupInfo.version}</div>
+                {uploadStatus}
-                    <div>{_t("Algorithm: ")}{this.state.backupInfo.algorithm}</div>
+                <div>{backupSigStatuses}</div>
-                    <div>{_t("Backup key stored: ")}{keyStatus}</div>
+                <div>{trustedLocally}</div>
-                    {uploadStatus}
+            </>;
-                    <div>{backupSigStatuses}</div>
-                    <div>{trustedLocally}</div>
-                </details>
-            );
 
             actions = (
                 <div className="mx_SecureBackupPanel_buttonRow">
@@ -361,9 +353,19 @@ export default class SecureBackupPanel extends React.PureComponent {
 
         return (
             <div>
-                <p>{featureDescription}</p>
+                <p>{_t(
+                    "Back up your encryption keys with your account data in case you " +
+                    "lose access to your sessions. Your keys will be secured with a " +
+                    "unique Recovery Key.",
+                )}</p>
                 {statusDescription}
-                {details}
+                <details>
+                    <summary>{_t("Advanced")}</summary>
+                    <div>{_t("Backup key stored: ")}{
+                        backupKeyStored === true ? _t("in secret storage") : _t("not stored")
+                    }</div>
+                    {extraDetails}
+                </details>
                 {actions}
             </div>
         );

src/i18n/strings/en_EN.json

@@ -730,14 +730,12 @@
     "Save": "Save",
     "Delete Backup": "Delete Backup",
     "Are you sure? You will lose your encrypted messages if your keys are not backed up properly.": "Are you sure? You will lose your encrypted messages if your keys are not backed up properly.",
-    "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Recovery Key.": "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Recovery Key.",
     "Unable to load key backup status": "Unable to load key backup status",
     "Restore from Backup": "Restore from Backup",
     "This session is backing up your keys. ": "This session is backing up your keys. ",
     "This session is <b>not backing up your keys</b>, but you do have an existing backup you can restore from and add to going forward.": "This session is <b>not backing up your keys</b>, but you do have an existing backup you can restore from and add to going forward.",
     "Connect this session to key backup before signing out to avoid losing any keys that may only be on this session.": "Connect this session to key backup before signing out to avoid losing any keys that may only be on this session.",
     "Connect this session to Key Backup": "Connect this session to Key Backup",
-    "not stored": "not stored",
     "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 user": "Backup has a <validity>valid</validity> signature from this user",
@@ -754,10 +752,12 @@
     "This backup is trusted because it has been restored on this session": "This backup is trusted because it has been restored on this session",
     "Backup version: ": "Backup version: ",
     "Algorithm: ": "Algorithm: ",
-    "Backup key stored: ": "Backup key stored: ",
     "Your keys are <b>not being backed up from this session</b>.": "Your keys are <b>not being backed up from this session</b>.",
     "Back up your keys before signing out to avoid losing them.": "Back up your keys before signing out to avoid losing them.",
     "Start using Key Backup": "Start using Key Backup",
+    "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Recovery Key.": "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Recovery Key.",
+    "Backup key stored: ": "Backup key stored: ",
+    "not stored": "not stored",
     "Identity Server URL must be HTTPS": "Identity Server URL must be HTTPS",
     "Not a valid Identity Server (status code %(code)s)": "Not a valid Identity Server (status code %(code)s)",
     "Could not connect to Identity Server": "Could not connect to Identity Server",