Modify Sync UI to allow only one device in chain

components/brave_sync/brave_profile_sync_service_impl.cc

@@ -332,11 +332,7 @@ void BraveProfileSyncServiceImpl::GetSettingsAndDevices(
 void BraveProfileSyncServiceImpl::GetSyncWords() {
   DCHECK_CURRENTLY_ON(content::BrowserThread::UI);
   Uint8Array seed = Uint8ArrayFromString(brave_sync_prefs_->GetSeed());
-  if (!seed.empty()) {
-    NotifyHaveSyncWords(crypto::PassphraseFromBytes32(seed));
-  } else {
-    NotifyHaveSyncWords("TEST DEBUG");
-  }
+  NotifyHaveSyncWords(crypto::PassphraseFromBytes32(seed));
 }
 
 std::string BraveProfileSyncServiceImpl::GetSeed() {

components/brave_sync/ui/containers/disabledContent.tsx

@@ -6,6 +6,7 @@ import * as React from 'react'
 
 // Components
 import { Button } from 'brave-ui'
+import { LoaderIcon } from 'brave-ui/components/icons'
 
 // Component-specific components
 import {
@@ -22,7 +23,6 @@ import {
 import { SyncStartIcon } from 'brave-ui/features/sync/images'
 
 // Modals
-import DeviceTypeModal from './modals/deviceType'
 import EnterSyncCodeModal from './modals/enterSyncCode'
 
 // Utils
@@ -49,6 +49,12 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
 
   onClickNewSyncChainButton = () => {
     this.setState({ newToSync: !this.state.newToSync })
+    // once the screen is rendered, create a sync chain.
+    // this allow us to request the qr code and sync words immediately
+    const { thisDeviceName } = this.props.syncData
+    if (thisDeviceName === '') {
+      this.props.actions.onSetupNewToSync('')
+    }
   }
 
   onClickEnterSyncChainCodeButton = () => {
@@ -66,11 +72,6 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
     return (
       <DisabledContent>
         <Main>
-          {
-            newToSync
-              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickNewSyncChainButton} />
-              : null
-          }
           {
             existingSyncCode
               ? <EnterSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickEnterSyncChainCodeButton} />
@@ -89,6 +90,12 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
                       type='accent'
                       onClick={this.onClickNewSyncChainButton}
                       text={getLocale('startSyncChain')}
+                      icon={{
+                        position: 'before',
+                        image: newToSync === true
+                          ? <LoaderIcon />
+                          : null
+                      }}
                     />
                     <Button
                       level='secondary'

components/brave_sync/ui/containers/enabledContent.tsx

@@ -70,6 +70,30 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     }
   }
 
+  componentDidMount () {
+    this.shouldShowAddDeviceModal()
+  }
+
+  componentDidUpdate (prevProps: Props) {
+    if (
+      prevProps.syncData.devices.length !==
+      this.props.syncData.devices.length
+    ) {
+      // if devices length changed, users either added
+      // or removed a device. again, check if they are less than 2
+      // so we can remind them again to add a new device
+      this.shouldShowAddDeviceModal()
+    }
+  }
+
+  shouldShowAddDeviceModal = () => {
+    const { syncData } = this.props
+    const hasLessThanTwoDevices: boolean = syncData.devices.length < 2
+    // if only one device is found, remind the user
+    // at every page refresh to add a new device
+    this.setState({ addDevice: hasLessThanTwoDevices })
+  }
+
   getDevicesRows = (devices?: any): Row[] | undefined => {
     if (!devices) {
       return

components/brave_sync/ui/containers/modals/deviceType.tsx

@@ -48,15 +48,6 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
     }
   }
 
-  componentDidMount () {
-    // once the screen is rendered, create a sync chain.
-    // this allow us to request the qr code and sync words immediately
-    const { thisDeviceName } = this.props.syncData
-    if (thisDeviceName === '') {
-      this.props.actions.onSetupNewToSync('')
-    }
-  }
-
   onUserNoticedError = () => {
     this.props.actions.clearSyncSetupError()
     this.props.onClose()

components/brave_sync/ui/containers/modals/scanCode.tsx

@@ -19,9 +19,6 @@ import {
   Link
 } from 'brave-ui/features/sync'
 
-// Dialogs
-import CancelDeviceSyncingDialog from '../commonDialogs/cancelDeviceSyncing'
-
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -37,15 +34,13 @@ interface Props {
 }
 
 interface State {
-  willCancelScanCode: boolean
   newDeviceFound: boolean
 }
 
 export default class ScanCodeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      willCancelScanCode: false,
       newDeviceFound: false
     }
   }
@@ -61,11 +56,11 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
     const { newDeviceFound } = this.state
     // when a device is found, self-close all modals
     if (newDeviceFound) {
-      this.dismissAllModals()
+      this.onDismissAllModals()
     }
   }
 
-  dismissAllModals = () => {
+  onDismissAllModals = () => {
     this.props.onClose()
     if (this.props.onCloseDeviceTypeModal) {
       this.props.onCloseDeviceTypeModal()
@@ -76,44 +71,12 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
     this.props.onClickViewSyncCodeInstead()
   }
 
-  onDismissModal = () => {
-    const { isSyncConfigured } = this.props.syncData
-    // if user is still trying to build a sync chain,
-    // open the confirmation modal. otherwise close it
-    isSyncConfigured
-      ? this.setState({ willCancelScanCode: true })
-      : this.dismissAllModals()
-  }
-
-  onDismissDialog = () => {
-    this.setState({ willCancelScanCode: false })
-  }
-
-  onConfirmDismissModal = () => {
-    const { isSyncConfigured } = this.props.syncData
-    // sync is enabled when at least 2 devices are in the chain.
-    // this modal works both with sync enabled and disabled states.
-    // in case user opens it in the enabled content screen,
-    // check there are 2 devices in chain before reset
-    if (isSyncConfigured) {
-      this.props.actions.onSyncReset()
-      this.dismissAllModals()
-    }
-    this.setState({ willCancelScanCode: false })
-    this.props.onClose()
-  }
-
   render () {
     const { syncData } = this.props
-    const { willCancelScanCode, newDeviceFound } = this.state
+    const { newDeviceFound } = this.state
 
     return (
       <Modal id='scanCodeModal' displayCloseButton={false} size='small'>
-        {
-          willCancelScanCode
-          ? <CancelDeviceSyncingDialog onClickCancel={this.onDismissDialog} onClickOk={this.onConfirmDismissModal} />
-          : null
-        }
         <ModalHeader>
           <div>
             <Title level={1}>{getLocale('scanThisCode')}</Title>
@@ -132,7 +95,7 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
         </ScanGrid>
         <ThreeColumnButtonGrid>
           <div>
-            <Link onClick={this.onDismissModal}>{getLocale('cancel')}</Link>
+            <Link onClick={this.onDismissAllModals}>{getLocale('cancel')}</Link>
           </div>
           <div>
             <Button
@@ -148,7 +111,7 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
               level='primary'
               type='accent'
               size='medium'
-              onClick={this.onDismissModal}
+              onClick={this.onDismissAllModals}
               disabled={newDeviceFound === false}
               text={
                 newDeviceFound === false

components/brave_sync/ui/containers/modals/viewSyncCode.tsx

@@ -18,9 +18,6 @@ import {
   Link
 } from 'brave-ui/features/sync'
 
-// Dialogs
-import CancelDeviceSyncingDialog from '../commonDialogs/cancelDeviceSyncing'
-
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -33,15 +30,13 @@ interface Props {
 }
 
 interface State {
-  willCancelViewCode: boolean
   newDeviceFound: boolean
 }
 
 export default class ViewSyncCodeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      willCancelViewCode: false,
       newDeviceFound: false
     }
   }
@@ -57,11 +52,11 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, State>
     const { newDeviceFound } = this.state
     // when a device is found, self-close this modal
     if (newDeviceFound) {
-      this.dismissAllModals()
+      this.onDismissAllModals()
     }
   }
 
-  dismissAllModals = () => {
+  onDismissAllModals = () => {
     this.props.onClose()
     if (this.props.onCloseDeviceTypeModal) {
       this.props.onCloseDeviceTypeModal()
@@ -72,44 +67,12 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, State>
     this.props.onClickScanCodeInstead()
   }
 
-  onDismissModal = () => {
-    const { isSyncConfigured } = this.props.syncData
-    // if user is still trying to build a sync chain,
-    // open the confirmation modal. otherwise close it
-    isSyncConfigured
-      ? this.setState({ willCancelViewCode: true })
-      : this.dismissAllModals()
-  }
-
-  onDismissDialog = () => {
-    this.setState({ willCancelViewCode: false })
-  }
-
-  onConfirmDismissModal = () => {
-    const { isSyncConfigured } = this.props.syncData
-    // sync is enabled when at least 2 devices are in the chain.
-    // this modal works both with sync enabled and disabled states.
-    // in case user opens it in the enabled content screen,
-    // check there are 2 devices in chain before reset
-    if (isSyncConfigured) {
-      this.props.actions.onSyncReset()
-      this.dismissAllModals()
-    }
-    this.setState({ willCancelViewCode: false })
-    this.props.onClose()
-  }
-
   render () {
     const { syncData } = this.props
-    const { willCancelViewCode, newDeviceFound } = this.state
+    const { newDeviceFound } = this.state
 
     return (
       <Modal id='viewSyncCodeModal' displayCloseButton={false} size='small'>
-        {
-          willCancelViewCode
-          ? <CancelDeviceSyncingDialog onClickCancel={this.onDismissDialog} onClickOk={this.onConfirmDismissModal} />
-          : null
-        }
         <ModalHeader>
           <div>
             <Title level={1}>{getLocale('chainCode')}</Title>
@@ -132,7 +95,7 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, State>
           }
         <ThreeColumnButtonGrid>
           <div>
-            <Link onClick={this.onDismissModal}>{getLocale('cancel')}</Link>
+            <Link onClick={this.onDismissAllModals}>{getLocale('cancel')}</Link>
           </div>
           <div>
             <Button
@@ -147,7 +110,7 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, State>
             level='primary'
             type='accent'
             size='medium'
-            onClick={this.onDismissModal}
+            onClick={this.onDismissAllModals}
             disabled={newDeviceFound === false}
             text={
               newDeviceFound === false

components/brave_sync/ui/stories/disabledContent.tsx

@@ -20,7 +20,6 @@ import {
 } from '../components'
 
 // Modals
-import DeviceType from './modals/deviceType'
 import EnterSyncCode from './modals/enterSyncCode'
 
 // Images
@@ -57,15 +56,10 @@ export default class SyncDisabledContent extends React.PureComponent<{}, State>
   }
 
   render () {
-    const { newToSync, existingSyncCode } = this.state
+    const { existingSyncCode } = this.state
     return (
       <DisabledContent>
         <Main>
-          {
-            newToSync
-              ? <DeviceType onClose={this.onClickNewSyncChainButton} />
-              : null
-          }
           {
             existingSyncCode
               ? <EnterSyncCode onClose={this.onClickEnterSyncChainCodeButton} />