From 093febb8dbf68af6c474336a96cbbc4ab70097c6 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Mon, 16 Dec 2019 16:09:35 -0300
Subject: [PATCH] Modify Sync UI to allow only one device in chain Close
 https://github.com/brave/brave-browser/issues/6941

---
 .../commonDialogs/cancelDeviceSyncing.tsx     | 36 --------------
 .../ui/containers/disabledContent.tsx         | 19 +++++---
 .../ui/containers/modals/deviceType.tsx       |  9 ----
 .../ui/containers/modals/scanCode.tsx         | 47 ++-----------------
 .../ui/containers/modals/viewSyncCode.tsx     | 47 ++-----------------
 .../brave_sync/ui/stories/disabledContent.tsx |  8 +---
 6 files changed, 24 insertions(+), 142 deletions(-)
 delete mode 100644 components/brave_sync/ui/containers/commonDialogs/cancelDeviceSyncing.tsx

diff --git a/components/brave_sync/ui/containers/commonDialogs/cancelDeviceSyncing.tsx b/components/brave_sync/ui/containers/commonDialogs/cancelDeviceSyncing.tsx
deleted file mode 100644
index bc8fd9d13f4b..000000000000
--- a/components/brave_sync/ui/containers/commonDialogs/cancelDeviceSyncing.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import * as React from 'react'
-
-// Components
-import { AlertBox } from 'brave-ui'
-
-// Feature-specific components
-import { Title, Paragraph } from 'brave-ui/features/sync'
-
-// Utils
-import { getLocale } from '../../../../common/locale'
-
-interface Props {
-  onClickOk: () => void
-  onClickCancel: () => void
-}
-
-export default class AreYouSure extends React.PureComponent<Props, {}> {
-  render () {
-    const { onClickOk, onClickCancel } = this.props
-    return (
-      <AlertBox
-        okString={getLocale('cancelDeviceSyncingButton')}
-        onClickOk={onClickOk}
-        cancelString={getLocale('cancel')}
-        onClickCancel={onClickCancel}
-      >
-        <Title level={1}>{getLocale('areYouSure')}</Title>
-        <Paragraph>{getLocale('cancelDeviceSyncing')}</Paragraph>
-      </AlertBox>
-    )
-  }
-}
diff --git a/components/brave_sync/ui/containers/disabledContent.tsx b/components/brave_sync/ui/containers/disabledContent.tsx
index 1bd22eb60fb5..718a0a3e61f1 100644
--- a/components/brave_sync/ui/containers/disabledContent.tsx
+++ b/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'
diff --git a/components/brave_sync/ui/containers/modals/deviceType.tsx b/components/brave_sync/ui/containers/modals/deviceType.tsx
index 8f8dbbd44224..c56a0aba5a3e 100644
--- a/components/brave_sync/ui/containers/modals/deviceType.tsx
+++ b/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()
diff --git a/components/brave_sync/ui/containers/modals/scanCode.tsx b/components/brave_sync/ui/containers/modals/scanCode.tsx
index 3adcb477d7db..99fb83eade02 100644
--- a/components/brave_sync/ui/containers/modals/scanCode.tsx
+++ b/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,7 +34,6 @@ interface Props {
 }
 
 interface State {
-  willCancelScanCode: boolean
   newDeviceFound: boolean
 }
 
@@ -45,7 +41,6 @@ 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
diff --git a/components/brave_sync/ui/containers/modals/viewSyncCode.tsx b/components/brave_sync/ui/containers/modals/viewSyncCode.tsx
index 4f46a9b66e7d..53b4e096d49d 100644
--- a/components/brave_sync/ui/containers/modals/viewSyncCode.tsx
+++ b/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,7 +30,6 @@ interface Props {
 }
 
 interface State {
-  willCancelViewCode: boolean
   newDeviceFound: boolean
 }
 
@@ -41,7 +37,6 @@ 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
diff --git a/components/brave_sync/ui/stories/disabledContent.tsx b/components/brave_sync/ui/stories/disabledContent.tsx
index 733c013292cd..49e28249e634 100644
--- a/components/brave_sync/ui/stories/disabledContent.tsx
+++ b/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} />