From ae6a7ee8243663d14f7a1f834adb0ba98f0c7ce2 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Wed, 2 Jan 2019 06:36:11 -0200
Subject: [PATCH] add extra dialog to prevent user from aborting a new sync
 chain fix https://github.com/brave/brave-browser/issues/2564

---
 browser/ui/webui/brave_webui_source.cc        |  2 +
 components/brave_sync/ui/BUILD.gn             |  1 +
 .../commonDialogs/cancelDeviceSyncing.tsx     | 36 ++++++++++++++++
 .../ui/components/modals/deviceType.tsx       |  2 +-
 .../ui/components/modals/scanCode.tsx         | 42 ++++++++++++++++---
 .../ui/components/modals/viewSyncCode.tsx     | 41 +++++++++++++++---
 .../resources/brave_components_strings.grd    |  2 +
 7 files changed, 115 insertions(+), 11 deletions(-)
 create mode 100644 components/brave_sync/ui/components/commonDialogs/cancelDeviceSyncing.tsx

diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index de1d8e46f90c..109745969a7a 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -445,6 +445,8 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "wordCount",  IDS_BRAVE_SYNC_SHARED_WORD_COUNT_TEXT },
         { "ok", IDS_BRAVE_SYNC_SHARED_OK_BUTTON },
         { "cancel", IDS_BRAVE_SYNC_SHARED_CANCEL_BUTTON },
+        { "cancelDeviceSyncing", IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING_TITLE },
+        { "cancelDeviceSyncingButton", IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING_BUTTON },
         { "thisSyncChain", IDS_BRAVE_SYNC_SHARED_FROM_THIS_CHAIN_PARTIAL },
         { "lookingForDevice", IDS_BRAVE_SYNC_SCAN_CODE_LOOKING_FOR_DEVICE_BUTTON },
         { "viewSyncCode", IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON },
diff --git a/components/brave_sync/ui/BUILD.gn b/components/brave_sync/ui/BUILD.gn
index d1efc97c0fad..96df9f047c63 100644
--- a/components/brave_sync/ui/BUILD.gn
+++ b/components/brave_sync/ui/BUILD.gn
@@ -4,6 +4,7 @@ transpile_web_ui("ui") {
   inputs = [
     "actions/sync_actions.ts",
     "components/commonDialogs/areYouSure.tsx",
+    "components/commonDialogs/cancelDeviceSyncing.tsx",
     "components/modals/deviceType.tsx",
     "components/modals/enterSyncCode.tsx",
     "components/modals/removeDevice.tsx",
diff --git a/components/brave_sync/ui/components/commonDialogs/cancelDeviceSyncing.tsx b/components/brave_sync/ui/components/commonDialogs/cancelDeviceSyncing.tsx
new file mode 100644
index 000000000000..bc8fd9d13f4b
--- /dev/null
+++ b/components/brave_sync/ui/components/commonDialogs/cancelDeviceSyncing.tsx
@@ -0,0 +1,36 @@
+/* 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/components/modals/deviceType.tsx b/components/brave_sync/ui/components/modals/deviceType.tsx
index d86dedfcbbb6..75a6c97a4210 100644
--- a/components/brave_sync/ui/components/modals/deviceType.tsx
+++ b/components/brave_sync/ui/components/modals/deviceType.tsx
@@ -48,7 +48,7 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
     }
   }
 
-  componentWillMount () {
+  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
diff --git a/components/brave_sync/ui/components/modals/scanCode.tsx b/components/brave_sync/ui/components/modals/scanCode.tsx
index cc5fd22460bc..2350fd48da0d 100644
--- a/components/brave_sync/ui/components/modals/scanCode.tsx
+++ b/components/brave_sync/ui/components/modals/scanCode.tsx
@@ -22,6 +22,9 @@ import {
 // Modals
 import ViewSyncCode from './viewSyncCode'
 
+// Dialogs
+import CancelDeviceSyncingDialog from '../commonDialogs/cancelDeviceSyncing'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -33,15 +36,18 @@ interface Props {
   actions: any
   onClose: () => void
 }
+
 interface State {
   viewSyncCode: boolean
+  willCancelScanCode: boolean
 }
 
 export default class ScanCodeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      viewSyncCode: false
+      viewSyncCode: false,
+      willCancelScanCode: false
     }
   }
 
@@ -49,14 +55,35 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
     this.setState({ viewSyncCode: !this.state.viewSyncCode })
   }
 
-  onCancel = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault()
+  onDismissModal = () => {
+    const { devices, isSyncConfigured } = this.props.syncData
+    // if user is still trying to build a sync chain,
+    // open the confirmation modal. otherwise close it
+    isSyncConfigured && devices.length < 2
+      ? this.setState({ willCancelScanCode: true })
+      : this.props.onClose()
+  }
+
+  onDismissDialog = () => {
+    this.setState({ willCancelScanCode: false })
+  }
+
+  onConfirmDismissModal = () => {
+    const { devices, 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 && devices.length < 2) {
+      this.props.actions.onSyncReset()
+    }
+    this.setState({ willCancelScanCode: false })
     this.props.onClose()
   }
 
   render () {
     const { onClose, syncData, actions } = this.props
-    const { viewSyncCode } = this.state
+    const { viewSyncCode, willCancelScanCode } = this.state
 
     return (
       <Modal id='scanCodeModal' displayCloseButton={false} size='small'>
@@ -65,6 +92,11 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
             ? <ViewSyncCode syncData={syncData} actions={actions} onClose={this.onClickEnterCodeWordsInstead} />
             : null
         }
+        {
+          willCancelScanCode
+          ? <CancelDeviceSyncingDialog onClickCancel={this.onDismissDialog} onClickOk={this.onConfirmDismissModal} />
+          : null
+        }
         <ModalHeader>
           <div>
             <Title level={1}>{getLocale('scanThisCode')}</Title>
@@ -83,7 +115,7 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
         </ScanGrid>
         <ThreeColumnButtonGrid>
         <div>
-            <Link onClick={this.onCancel}>{getLocale('cancel')}</Link>
+            <Link onClick={this.onDismissModal}>{getLocale('cancel')}</Link>
           </div>
           <div>
             <Button
diff --git a/components/brave_sync/ui/components/modals/viewSyncCode.tsx b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
index 1db60173bac9..cda855987dc0 100644
--- a/components/brave_sync/ui/components/modals/viewSyncCode.tsx
+++ b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
@@ -21,6 +21,9 @@ import {
 // Modals
 import ScanCode from './scanCode'
 
+// Dialogs
+import CancelDeviceSyncingDialog from '../commonDialogs/cancelDeviceSyncing'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -32,13 +35,15 @@ interface Props {
 
 interface State {
   useCameraInstead: boolean
+  willCancelViewCode: boolean
 }
 
 export default class ViewSyncCodeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      useCameraInstead: false
+      useCameraInstead: false,
+      willCancelViewCode: false
     }
   }
 
@@ -46,14 +51,35 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, State>
     this.setState({ useCameraInstead: !this.state.useCameraInstead })
   }
 
-  onCancel = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault()
+  onDismissModal = () => {
+    const { devices, isSyncConfigured } = this.props.syncData
+    // if user is still trying to build a sync chain,
+    // open the confirmation modal. otherwise close it
+    isSyncConfigured && devices.length < 2
+      ? this.setState({ willCancelViewCode: true })
+      : this.props.onClose()
+  }
+
+  onDismissDialog = () => {
+    this.setState({ willCancelViewCode: false })
+  }
+
+  onConfirmDismissModal = () => {
+    const { devices, 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 && devices.length < 2) {
+      this.props.actions.onSyncReset()
+    }
+    this.setState({ willCancelViewCode: false })
     this.props.onClose()
   }
 
   render () {
     const { onClose, actions, syncData } = this.props
-    const { useCameraInstead } = this.state
+    const { useCameraInstead, willCancelViewCode } = this.state
 
     return (
       <Modal id='viewSyncCodeModal' displayCloseButton={false} size='small'>
@@ -62,6 +88,11 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, State>
             ? <ScanCode syncData={syncData} actions={actions} onClose={this.onClickUseCameraInsteadButton} />
             : null
         }
+        {
+          willCancelViewCode
+          ? <CancelDeviceSyncingDialog onClickCancel={this.onDismissDialog} onClickOk={this.onConfirmDismissModal} />
+          : null
+        }
         <ModalHeader>
           <div>
             <Title level={1}>{getLocale('chainCode')}</Title>
@@ -84,7 +115,7 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, State>
           }
         <ThreeColumnButtonGrid>
           <div>
-            <Link onClick={this.onCancel}>{getLocale('cancel')}</Link>
+            <Link onClick={this.onDismissModal}>{getLocale('cancel')}</Link>
           </div>
           <div>
             <Button
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index c447e3257aca..5d5f9c50ab9a 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -454,6 +454,8 @@
       <message name="IDS_BRAVE_SYNC_SHARED_WORD_COUNT_TEXT" desc="The Sync `word count` phrase that shows how many words are in a textarea field">Word Count:</message>
       <message name="IDS_BRAVE_SYNC_SHARED_OK_BUTTON" desc="The Sync `ok` button that indicates user is aware of what is being written">Ok</message>
       <message name="IDS_BRAVE_SYNC_SHARED_CANCEL_BUTTON" desc="The Sync `cancel` button that closes the current modal">Cancel</message>
+      <message name="IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING_TITLE" desc="The Sync phrase for when the user is about to reset sync by closing the `view code` or `scan code` modal">Exiting this modal early will delete the current chain and the devices looking for this code will not be able to sync. This modal will exit automatically when a successful sync connection is made.</message>
+      <message name="IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING_BUTTON" desc="The Sync button label for when the user is about to reset sync by closing the `view code` or `scan code` modal">Exit Modal</message>
       <message name="IDS_BRAVE_SYNC_SHARED_FROM_THIS_CHAIN_PARTIAL" desc="The Sync partial phrase included in `remove X from this sync chain` where X is the user's device name">from this sync chain</message>
       <message name="IDS_BRAVE_SYNC_SHARED_VIEW_CODE_BUTTON" desc="The Sync button to enter code words instead of scanning the current code">View Code Words</message>
       <message name="IDS_BRAVE_SYNC_SCAN_CODE_LOOKING_FOR_DEVICE_BUTTON" desc="The Sync temporary button that holds while a device is not found yet">Looking for device</message>