add a loading state for removing and reseting sync

fix brave/brave-browser#2567
fix brave/brave-browser#2629

components/brave_sync/ui/components/commonDialogs/areYouSure.tsx

@@ -0,0 +1,35 @@
+/* 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 } 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('ok')}
+        onClickOk={onClickOk}
+        cancelString={getLocale('cancel')}
+        onClickCancel={onClickCancel}
+      >
+        <Title level={1}>{getLocale('areYouSure')}</Title>
+      </AlertBox>
+    )
+  }
+}

components/brave_sync/ui/components/enabledContent.tsx

@@ -129,6 +129,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
       deviceToRemoveId: target.dataset.id,
       removeDevice: !this.state.removeDevice
     })
+    this.props.actions.maybeOpenSyncModal('removeDevice', true)
   }
 
   onClickViewSyncCodeButton = () => {
@@ -162,8 +163,9 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
             syncData.modalsOpen.removeDevice
               ? (
                 <RemoveDeviceModal
+                  syncData={syncData}
                   deviceName={deviceToRemoveName}
-                  deviceId={Number(deviceToRemoveId)}
+                  deviceId={deviceToRemoveId}
                   actions={actions}
                 />
               )

components/brave_sync/ui/components/modals/removeDevice.tsx

@@ -17,28 +17,55 @@ import {
   OneColumnButtonGrid
 } from 'brave-ui/features/sync'
 
+// Icons
+import { LoaderIcon } from 'brave-ui/components/icons'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
 interface Props {
   actions: any
+  syncData: Sync.State
   deviceName: string | undefined
-  deviceId: number | undefined
+  deviceId: string | undefined
+}
+
+interface State {
+  willRemoveDevice: boolean
 }
 
-export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}> {
+export default class RemoveMainDeviceModal extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = { willRemoveDevice: false }
+  }
+
+  componentDidUpdate (prevProps: Props) {
+    // if devices lengh is different it means that sync
+    // computed the device removal. in this case, cancel
+    // the loading state and close the modal
+    if (
+      prevProps.syncData.devices.length !==
+      this.props.syncData.devices.length
+    ) {
+      this.setState({ willRemoveDevice: false })
+      this.props.actions.maybeOpenSyncModal('removeDevice', false)
+    }
+  }
+
   onClickConfirmRemoveDeviceButton = () => {
     const { deviceName, deviceId } = this.props
+    this.setState({ willRemoveDevice: true })
     this.props.actions.onRemoveDevice(Number(deviceId), deviceName)
-    this.props.actions.maybeOpenSyncModal('removeDevice', false)
   }
 
   onDismissModal = () => {
     this.props.actions.maybeOpenSyncModal('removeDevice', false)
   }
 
   render () {
-    const { deviceName, deviceId } = this.props
+    const { syncData, deviceName, deviceId } = this.props
+    const { willRemoveDevice } = this.state
 
     return (
       <Modal id='removeMainDeviceModal' displayCloseButton={false} size='small'>
@@ -47,8 +74,7 @@ export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}
         </ModalHeader>
         <ModalContent>
           {
-            // zero is always the this device
-            deviceId === 0
+            deviceId === syncData.thisDeviceId
             ? <div>
                 <Paragraph>{getLocale('thisDeviceRemovalDescription')}</Paragraph>
                 <Paragraph>{getLocale('joinSyncChain')}</Paragraph>
@@ -60,18 +86,24 @@ export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}
             <OneColumnButtonGrid>
               <Button
                 level='secondary'
-                type='accent'
+                type='subtle'
                 size='medium'
+                disabled={willRemoveDevice}
                 onClick={this.onDismissModal}
                 text={getLocale('cancel')}
               />
             </OneColumnButtonGrid>
             <Button
               level='primary'
-              type='accent'
+              type='warn'
               size='medium'
               onClick={this.onClickConfirmRemoveDeviceButton}
               text={getLocale('remove')}
+              disabled={willRemoveDevice}
+              icon={{
+                position: 'after',
+                image: willRemoveDevice && <LoaderIcon />
+              }}
             />
         </TwoColumnButtonGrid>
       </Modal>

components/brave_sync/ui/components/modals/resetSync.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Components
-import { AlertBox, Button, Modal } from 'brave-ui'
+import { Button, Modal } from 'brave-ui'
 
 // Feature-specific components
 import {
@@ -15,10 +15,15 @@ import {
   ModalContent,
   TwoColumnButtonGrid,
   OneColumnButtonGrid,
-  Title,
   Paragraph
 } from 'brave-ui/features/sync'
 
+// Dialogs
+import AreYouSure from '../commonDialogs/areYouSure'
+
+// Icons
+import { LoaderIcon } from 'brave-ui/components/icons'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -29,19 +34,38 @@ interface Props {
 
 interface State {
   showAlert: boolean
+  willResetSync: boolean
 }
 
 export default class ResetSyncModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
-    this.state = { showAlert: false }
+    this.state = {
+      showAlert: false,
+      willResetSync: false
+    }
+  }
+
+  componentDidUpdate (prevProps: Props) {
+    // wait until sync is not configured to proceed
+    if (
+      prevProps.syncData.isSyncConfigured !==
+      this.props.syncData.isSyncConfigured
+    ) {
+      this.setState({ willResetSync: false })
+      this.props.actions.maybeOpenSyncModal('resetSync', false)
+    }
   }
 
   onClickResetSync = () => {
     this.setState({ showAlert: !this.state.showAlert })
   }
 
   onConfirmResetSync = () => {
+    this.setState({
+      showAlert: false,
+      willResetSync: true
+    })
     this.props.actions.onSyncReset()
   }
 
@@ -51,7 +75,7 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
 
   render () {
     const { syncData } = this.props
-    const { showAlert } = this.state
+    const { showAlert, willResetSync } = this.state
 
     if (!syncData) {
       return null
@@ -60,18 +84,8 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
     return (
       <Modal id='resetSyncModal' displayCloseButton={false} size='small'>
         {
-          showAlert
-          ? (
-              <AlertBox
-                okString={getLocale('ok')}
-                onClickOk={this.onConfirmResetSync}
-                cancelString={getLocale('cancel')}
-                onClickCancel={this.onClickResetSync}
-              >
-                <Title level={1}>{getLocale('areYouSure')}</Title>
-              </AlertBox>
-            )
-          : null
+          showAlert &&
+          <AreYouSure onClickOk={this.onConfirmResetSync} onClickCancel={this.onClickResetSync} />
         }
         <ModalHeader>
           <div>
@@ -87,18 +101,24 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
             <OneColumnButtonGrid>
               <Button
                 level='secondary'
-                type='accent'
+                type='subtle'
                 size='medium'
                 onClick={this.onDismissModal}
                 text={getLocale('cancel')}
+                disabled={willResetSync}
               />
             </OneColumnButtonGrid>
             <Button
               level='primary'
-              type='accent'
+              type='warn'
               size='medium'
               onClick={this.onClickResetSync}
               text={getLocale('remove')}
+              disabled={willResetSync}
+              icon={{
+                position: 'after',
+                image: willResetSync && <LoaderIcon />
+              }}
             />
           </TwoColumnButtonGrid>
       </Modal>