Merge pull request #8112 from brave/feature/sync-devices

Sync profile devices list

app/extensions/brave/locales/en-US/preferences.properties

@@ -33,7 +33,9 @@ syncBetaMessage=Note: Sync for iOS and Android is still being completed and will
 syncEnable=Sync this device
 syncData=Sync Data
 syncDataMessage=Sync the following data from this device:
+syncDevices=Devices
 syncDeviceName=Device name
+syncDeviceLastActive=Last active
 syncBookmarks=Bookmarks
 syncHistory=Browsing history
 syncSiteSettings=Saved site settings

app/renderer/components/preferences/syncTab.js

@@ -12,6 +12,7 @@ const niceware = require('niceware')
 const ModalOverlay = require('../../../../js/components/modalOverlay')
 const Button = require('../../../../js/components/button')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
+const SortableTable = require('../../../../js/components/sortableTable')
 
 const aboutActions = require('../../../../js/about/aboutActions')
 const getSetting = require('../../../../js/settings').getSetting
@@ -82,12 +83,45 @@ class SyncTab extends ImmutableComponent {
           </div>
         </div>
       </div>
+      {this.enabled ? this.devicesContent : null}
       <SettingItem>
-        <Button l10nId='syncNewDevice' className='whiteButton' onClick={this.props.showOverlay.bind(this, 'syncNewDevice')} />
+        <Button l10nId='syncNewDevice' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'syncNewDevice')} />
       </SettingItem>
     </SettingsList>
   }
 
+  get devicesTableRows () {
+    const devices = this.props.syncData.get('devices')
+    if (!devices) { return [] }
+    return devices.map((device, id) => [
+      {
+        html: id,
+        value: parseInt(id)
+      },
+      {
+        html: device.get('name'),
+        value: device.get('name')
+      },
+      {
+        html: new Date(device.get('lastRecordTimestamp')).toLocaleString(),
+        value: device.get('lastRecordTimestamp')
+      }
+    ])
+  }
+
+  get devicesContent () {
+    return <div className='devices'>
+      <div className='sectionTitle' data-l10n-id='syncDevices' data-test-id='syncDevices' />
+      <SortableTable
+        headings={['id', 'syncDeviceName', 'syncDeviceLastActive']}
+        defaultHeading='syncDeviceLastActive'
+        defaultHeadingSortOrder='desc'
+        rows={this.devicesTableRows}
+        tableClassNames='devicesList'
+      />
+    </div>
+  }
+
   get qrcodeContent () {
     if (!this.isSetup) {
       return null

app/sessionStore.js

@@ -595,6 +595,7 @@ module.exports.defaultAppState = () => {
   return {
     firstRunTimestamp: new Date().getTime(),
     sync: {
+      devices: {},
       lastFetchTimestamp: 0,
       objectsById: {}
     },

app/sync.js

@@ -236,6 +236,7 @@ module.exports.onSyncReady = (isFirstRun, e) => {
   }
 
   appActions.createSyncCache()
+  e.sender.send(messages.FETCH_SYNC_DEVICES)
 
   // Periodically poll for new records
   let startAt = appState.getIn(['sync', 'lastFetchTimestamp']) || 0
@@ -355,20 +356,25 @@ module.exports.init = function (appState) {
     }
     appActions.setSyncSetupError(error || locale.translation('unknownError'))
   })
-  ipcMain.on(messages.GET_EXISTING_OBJECTS, (event, categoryName, records) => {
+  ipcMain.on(messages.GET_EXISTING_OBJECTS, (event, categoryName, records, lastRecordTimestamp) => {
     if (!syncEnabled()) {
       return
     }
+    let devices = {}
     log(`getting existing objects for ${records.length} ${categoryName}`)
     if (!CATEGORY_NAMES.includes(categoryName) || !records || !records.length) {
       return
     }
     const recordsAndExistingObjects = records.map((record) => {
       const safeRecord = syncUtil.ipcSafeObject(record)
+      const deviceId = syncUtil.deviceIdString(safeRecord.deviceId)
+      devices[deviceId] = {lastRecordTimestamp: record.syncTimestamp}
       const existingObject = syncUtil.getExistingObject(categoryName, record)
       return [safeRecord, existingObject]
     })
     event.sender.send(messages.RESOLVE_SYNC_RECORDS, categoryName, recordsAndExistingObjects)
+    // For each device we saw, update its last record timestamp.
+    appActions.saveSyncDevices(devices)
   })
   ipcMain.on(messages.RESOLVED_SYNC_RECORDS, (event, categoryName, records) => {
     if (!records || !records.length) {

docs/appActions.md

@@ -778,6 +778,18 @@ Dispatches a message to set objectId for a syncable object.
 
 
 
+### saveSyncDevices(devices) 
+
+Dispatch to update sync devices cache.
+NOTE: deviceId is a string! Normally it's Array.<number> but that can't
+be an object key. Use syncUtil.deviceIdToString()
+
+**Parameters**
+
+**devices**: `Object`, {[deviceId]: {lastRecordTimestamp=, name=}}
+
+
+
 ### saveSyncInitData(seed, deviceId, lastFetchTimestamp, seedQr) 
 
 Dispatches a message when sync init data needs to be saved

docs/state.md

@@ -270,6 +270,12 @@ AppStore
   sync: {
     lastFetchTimestamp: integer // the last time new sync records were fetched in seconds
     deviceId: Array.<number>,
+    devices: {
+      [deviceId]: {
+        name: string,
+        lastRecordTimestamp: number // last seen Sync record from this device
+      }
+    },
     objectId: Array.<number>, // objectId for this sync device
     objectsById: {
       [string of objectId joined by pipes |]: Array.<string> // array key path within appState, so we can do appState.getIn({key path})

js/actions/appActions.js

@@ -952,6 +952,19 @@ const appActions = {
     })
   },
 
+  /**
+   * Dispatch to update sync devices cache.
+   * NOTE: deviceId is a string! Normally it's Array.<number> but that can't
+   * be an object key. Use syncUtil.deviceIdToString()
+   * @param {Object} devices {[deviceId]: {lastRecordTimestamp=, name=}}
+   */
+  saveSyncDevices: function (devices) {
+    AppDispatcher.dispatch({
+      actionType: appConstants.APP_SAVE_SYNC_DEVICES,
+      devices
+    })
+  },
+
   /**
    * Dispatches a message when sync init data needs to be saved
    * @param {Array.<number>|null} seed

js/constants/appConstants.js

@@ -99,6 +99,7 @@ const appConstants = {
   APP_TAB_CLONED: _,
   APP_SET_OBJECT_ID: _,
   APP_CREATE_SYNC_CACHE: _,
+  APP_SAVE_SYNC_DEVICES: _,
   APP_SAVE_SYNC_INIT_DATA: _,
   APP_RESET_SYNC_DATA: _,
   APP_SET_SYNC_SETUP_ERROR: _,

js/constants/sync/messages.js

@@ -51,7 +51,12 @@ const messages = {
    * with new records, do
    * GET_EXISTING_OBJECTS -> RESOLVE_SYNC_RECORDS -> RESOLVED_SYNC_RECORDS
    */
-  FETCH_SYNC_RECORDS: _, /* @param Array.<string> categoryNames, @param {number} startAt (in seconds) */
+  FETCH_SYNC_RECORDS: _, /* @param Array.<string> categoryNames, @param {number} startAt (in seconds or milliseconds), @param {boolean=} limitResponse true to limit response to 1000 records */
+  /**
+   * browser -> webview
+   * sent to fetch all sync devices. webview responds with RESOLVED_SYNC_RECORDS.
+   */
+  FETCH_SYNC_DEVICES: _,
   /**
    * webview -> browser
    * after sync gets records, it requests the browser's existing objects so sync

js/state/syncUtil.js

@@ -54,6 +54,16 @@ const pickFields = (object, fields) => {
   }, {})
 }
 
+/**
+ * Convert deviceId to a type better suited for object keys.
+ * @param {Array.<number>} deviceId
+ * @returns {string}
+ */
+const deviceIdString = (deviceId) => {
+  return deviceId.join('|')
+}
+module.exports.deviceIdString = deviceIdString
+
 // Cache of bookmark folder object IDs mapped to folder IDs
 let folderIdMap = new Immutable.Map()
 
@@ -191,7 +201,10 @@ const applySyncRecord = (record) => {
       applySiteSettingRecord(record)
       break
     case 'device':
-      // TODO
+      const device = Object.assign({}, record.device, {lastRecordTimestamp: record.syncTimestamp})
+      require('../actions/appActions').saveSyncDevices({
+        [deviceIdString(record.deviceId)]: device
+      })
       break
     default:
       throw new Error(`Invalid record objectData: ${record.objectData}`)

js/stores/appStore.js

@@ -855,6 +855,17 @@ const handleAppAction = (action) => {
           action.objectId)
       }
       break
+    case appConstants.APP_SAVE_SYNC_DEVICES:
+      for (let deviceId of Object.keys(action.devices)) {
+        const device = action.devices[deviceId]
+        if (device.lastRecordTimestamp) {
+          appState = appState.setIn(['sync', 'devices', deviceId, 'lastRecordTimestamp'], device.lastRecordTimestamp)
+        }
+        if (device.name) {
+          appState = appState.setIn(['sync', 'devices', deviceId, 'name'], device.name)
+        }
+      }
+      break
     case appConstants.APP_SAVE_SYNC_INIT_DATA:
       if (action.deviceId) {
         appState = appState.setIn(['sync', 'deviceId'], action.deviceId)
@@ -889,6 +900,7 @@ const handleAppAction = (action) => {
           appState = appState.setIn(['sites', key, 'originalSeed'], originalSeed)
         }
       })
+      appState.setIn(['sync', 'devices'], {})
       appState.setIn(['sync', 'objectsById'], {})
       break
     case appConstants.APP_SHOW_DOWNLOAD_DELETE_CONFIRMATION:

less/about/preferences.less

@@ -649,7 +649,7 @@ table.sortableTable {
     line-height: 1.8em;
     margin: 1em 0;
     padding: 0.5em 1em;
-    width: 500px;
+    width: 32em;
     & > div, .settingItem {
       display: table-cell;
       vertical-align: middle;
@@ -665,6 +665,19 @@ table.sortableTable {
       margin-bottom: 0.5em;
     }
   }
+  .devices {
+    margin: 1em 0;
+  }
+  .devicesList {
+    width: 34em;
+    margin-bottom: 1em;
+    td {
+      padding: 4px 8px;
+    }
+  }
+  .settingsListContainer {
+    margin-bottom: 1.5em;
+  }
 }
 
 #syncPassphrase {