Export: Improve usability - timing expectations, install button (#1474)

Because export might take a couple minutes, we now set expectations
that it might take 'several minutes' instead of just 'please wait.'

We also promote 'Install new Signal Desktop' from a text link in the
instructions to a button. This is important on the 'Completed' screen
because it is bigger and to the left of the 'Export Again' button, which
previously drew primary focus on that screen.

Lastly, we also remove the title-specific element of the support link,
so we're resilient to title changes in the future.

FREEBIE

_locales/en/messages.json

@@ -36,11 +36,11 @@
       "description": "Displayed while we wait for pending incoming messages to process"
     },
     "exporting": {
-      "message": "Please wait while we export your data. You can still use Signal on your phone and other devices during this time. You can also <a target='_blank' href='https://support.whispersystems.org/hc/en-us/articles/214507138-How-do-I-install-Signal-Desktop-'>install the new Signal Desktop</a>.",
+      "message": "Please wait while we export your data. It may take several minutes. You can still use Signal on your phone and other devices during this time.",
       "description": "Message shown on the migration screen while we export data"
     },
     "exportComplete": {
-      "message": "Your data has been exported to: <p><b>$location$</b></p> To complete the migration, <a target='_blank' href='https://support.whispersystems.org/hc/en-us/articles/214507138-How-do-I-install-Signal-Desktop-'>install the new Signal Desktop</a> and import this data.",
+      "message": "Your data has been exported to: <p><b>$location$</b></p> You'll be able to import this data as you set up <a target='_blank' href='https://support.whispersystems.org/hc/en-us/articles/214507138'>the new Signal Desktop</a>.",
       "description": "Message shown on the migration screen when we are done exporting data",
       "placeholders": {
         "location": {
@@ -49,6 +49,10 @@
         }
       }
     },
+    "installNewSignal": {
+      "message": "Install new Signal Desktop",
+      "description": "When export is complete, a button shows which sends user to Signal Desktop install instructions"
+    },
     "selectedLocation": {
       "message": "your selected location",
       "description": "Message shown as the export location if we didn't capture the target directory"

background.html

@@ -14,6 +14,9 @@
       {{ /hideProgress }}
       <div class='message'>{{& message }}</div>
       <div>
+        {{ #installButton }}
+          <button class='install grey'>{{ installButton }}</button>
+        {{ /installButton }}
         {{ #exportButton }}
           <button class='export grey'>{{ exportButton }}</button>
         {{ /exportButton }}

js/views/migration_view.js

@@ -45,8 +45,9 @@
     templateName: 'app-migration-screen',
     className: 'app-loading-screen',
     events: {
+      'click .install': 'onClickInstall',
       'click .export': 'onClickExport',
-      'click .debug-log': 'onClickDebugLog'
+      'click .debug-log': 'onClickDebugLog',
     },
     initialize: function() {
       if (!Whisper.Migration.inProgress()) {
@@ -69,6 +70,7 @@
       var exportButton;
       var hideProgress = Whisper.Migration.isComplete();
       var debugLogButton = i18n('submitDebugLog');
+      var installButton = i18n('installNewSignal');
 
       if (this.error) {
         return {
@@ -91,12 +93,14 @@
           break;
         case State.DISCONNECTING:
           message = i18n('migrationDisconnecting');
+          installButton = null;
           break;
         default:
           hideProgress = true;
           message = i18n('exportInstructions');
           exportButton = i18n('export');
           debugLogButton = null;
+          installButton = null;
       }
 
       return {
@@ -104,8 +108,13 @@
         message: message,
         exportButton: exportButton,
         debugLogButton: debugLogButton,
+        installButton: installButton,
       };
     },
+    onClickInstall: function() {
+      var url = 'https://support.whispersystems.org/hc/en-us/articles/214507138';
+      window.open(url, '_blank');
+    },
     onClickDebugLog: function() {
       this.openDebugLog();
     },