Sync resolution menu

app/assets/javascripts/app/controllers/footer.js

@@ -116,6 +116,10 @@ angular.module('app')
         this.closeAllRooms();
       }
 
+      this.toggleSyncResolutionMenu = function() {
+        this.showSyncResolution = !this.showSyncResolution;
+      }.bind(this);
+
       this.closeAccountMenu = () => {
         this.showAccountMenu = false;
       }

app/assets/javascripts/app/directives/views/accountMenu.js

@@ -292,8 +292,8 @@ class AccountMenu {
     }
 
     $scope.importJSONData = function(data, password, callback) {
-      var onDataReady = (errorCount) => {
-        var items = modelManager.importItems(data.items);
+      var onDataReady = async (errorCount) => {
+        var items = await modelManager.importItems(data.items);
         for(var item of items) {
           // We don't want to activate any components during import process in case of exceptions
           // breaking up the import proccess

app/assets/javascripts/app/directives/views/syncResolutionMenu.js

@@ -0,0 +1,46 @@
+class SyncResolutionMenu {
+
+  constructor() {
+    this.restrict = "E";
+    this.templateUrl = "directives/sync-resolution-menu.html";
+    this.scope = {
+      "closeFunction" : "&"
+    };
+  }
+
+  controller($scope, modelManager, syncManager, archiveManager, $timeout) {
+    'ngInject';
+
+    $scope.status = {};
+
+    $scope.close = function() {
+      $timeout(() => {
+        $scope.closeFunction()();
+      })
+    }
+
+    $scope.downloadBackup = function(encrypted) {
+      archiveManager.downloadBackup(encrypted);
+      $scope.status.backupFinished = true;
+    }
+
+    $scope.skipBackup = function() {
+      $scope.status.backupFinished = true;
+    }
+
+    $scope.performSyncResolution = function() {
+      $scope.status.resolving = true;
+      syncManager.resolveOutOfSync().then(() => {
+        $scope.status.resolving = false;
+        $scope.status.attemptedResolution = true;
+        if(syncManager.isOutOfSync()) {
+          $scope.status.fail = true;
+        } else {
+          $scope.status.success = true;
+        }
+      })
+    }
+  }
+}
+
+angular.module('app').directive('syncResolutionMenu', () => new SyncResolutionMenu);

app/assets/stylesheets/app/_footer.scss

@@ -20,6 +20,11 @@
     min-width: 300px;
     z-index: $z-index-footer-bar-item-panel;
     margin-top: 15px;
+
+    &.sk-panel-right {
+      right: 0;
+      left: inherit;
+    }
   }
 
   &.dock-shortcut:hover .sk-app-bar-item-column {
@@ -37,7 +42,7 @@
   }
 }
 
-#account-panel {
+#account-panel, #sync-resolution-menu {
   width: 400px;
 }
 

app/assets/templates/directives/sync-resolution-menu.html.haml

@@ -0,0 +1,48 @@
+.sn-component
+  .sk-panel.sk-panel-right#sync-resolution-menu
+    .sk-panel-header
+      .sk-panel-header-title Out of Sync
+      %a.sk-a.info.close-button{"ng-click" => "close()"} Close
+    .sk-panel-content
+
+      .sk-panel-section
+        .sk-panel-row
+          .sk-p
+            We've detected that the data on the server may not match the data in the current application session.
+            We will attempt to reconcile changes by downloading all data from the server.
+            No existing data will be overwritten. If the local contents of an item differ from what the server has,
+            we'll create a conflicted copy of it.
+
+      .sk-panel-section{"ng-if" => "!status.backupFinished"}
+        .sk-panel-row
+          Please download a backup before we attempt to perform a full account sync resolution.
+        .sk-panel-row
+          .sk-button-group
+            .sk-button.info{"ng-click" => "downloadBackup(true)"}
+              .sk-label Encrypted
+            .sk-button.info{"ng-click" => "downloadBackup(false)"}
+              .sk-label Decrypted
+            .sk-button.danger{"ng-click" => "skipBackup()"}
+              .sk-label Skip
+
+      .sk-panel-section{"ng-if" => "status.backupFinished"}
+        .sk-panel-row{"ng-if" => "!status.resolving && !status.attemptedResolution"}
+          .sk-button.info{"ng-click" => "performSyncResolution()"}
+            .sk-label Perform Sync Resolution
+
+        .sk-panel-row.justify-left{"ng-if" => "status.resolving"}
+          .sk-horizontal-group
+            .sk-spinner.small.info
+            .sk-label Attempting sync resolution...
+
+        .sk-panel-column{"ng-if" => "status.fail"}
+          .sk-panel-row.sk-label.danger Sync Resolution Failed
+          .sk-p.sk-panel-row
+            We attempted to reconcile local content and server content, but were unable to do so.
+            At this point, we recommend signing out of your account and signing back in. You may
+            wish to download a data backup before doing so.
+
+        .sk-panel-column{"ng-if" => "status.success"}
+          .sk-panel-row.sk-label.success Sync Resolution Success
+          .sk-p.sk-panel-row
+            Your local data is now in sync with the server. You may close this window.

app/assets/templates/footer.html.haml

@@ -27,7 +27,6 @@
           %span.neutral.sk-label {{ctrl.arbitraryStatusMessage}}
 
     .right
-
       .sk-app-bar-item{"ng-show" => "ctrl.securityUpdateAvailable", "ng-click" => "ctrl.openSecurityUpdate()"}
         %span.success.sk-label Security update available.
 
@@ -38,8 +37,9 @@
         .sk-label.subtle
           Last refreshed {{ctrl.lastSyncDate | appDateTime}}
 
-      .sk-app-bar-item{"ng-if" => "ctrl.outOfSync && !ctrl.isRefreshing"}
-        .sk-label.warning Potentially Out of Sync
+      .sk-app-bar-item{"ng-if" => "(ctrl.outOfSync && !ctrl.isRefreshing) || ctrl.showSyncResolution", "ng-click" => "ctrl.toggleSyncResolutionMenu()"}
+        .sk-label.warning{"ng-if" => "ctrl.outOfSync"} Potentially Out of Sync
+        %sync-resolution-menu{"ng-if" => "ctrl.showSyncResolution", "ng-click" => "$event.stopPropagation();", "close-function" => "ctrl.toggleSyncResolutionMenu"}
 
       .sk-app-bar-item{"ng-if" => "ctrl.lastSyncDate && ctrl.isRefreshing"}
         .sk-spinner.small

package-lock.json

@@ -4830,9 +4830,9 @@
       "dev": true
     },
     "standard-file-js": {
-      "version": "0.3.43",
-      "resolved": "https://registry.npmjs.org/standard-file-js/-/standard-file-js-0.3.43.tgz",
-      "integrity": "sha512-Adwy9ims9YnX++mhX5fhY4+X0slCPgeUF54IFmH4MOZHcJkwSHKBLA426QxzKFWs3F3IKD2fsiKnYf2uXEuepw==",
+      "version": "0.3.44",
+      "resolved": "https://registry.npmjs.org/standard-file-js/-/standard-file-js-0.3.44.tgz",
+      "integrity": "sha512-9g/XQxL/j1ugOiX6eV5hTashi79JEOrA/IuifTcBPE09Lc0SEYtJM+33pVvoATQrYaa6NEHMTSPCpKl+2ZjTsA==",
       "dev": true
     },
     "statuses": {

package.json

@@ -38,7 +38,7 @@
     "serve-static": "^1.13.2",
     "sn-models": "0.1.13",
     "sn-stylekit": "2.0.13",
-    "standard-file-js": "0.3.43",
+    "standard-file-js": "0.3.44",
     "grunt-shell": "^2.1.0"
   }
 }