From 00e1a6a36a7f855f158dbeb2c314fdd778bc7d99 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Wed, 13 Sep 2017 13:33:40 -0700
Subject: [PATCH] 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  |  8 ++++++--
 background.html            |  3 +++
 js/views/migration_view.js | 11 ++++++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 7bc78dfd0635..8eced1604f32 100644
--- a/_locales/en/messages.json
+++ b/_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"
diff --git a/background.html b/background.html
index 589a5d928a45..8f89a8511174 100644
--- a/background.html
+++ b/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 }}
diff --git a/js/views/migration_view.js b/js/views/migration_view.js
index af885a5e3eaa..fd9a13c6db10 100644
--- a/js/views/migration_view.js
+++ b/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();
     },