From e5260a5980df982c55fc58e4ccc03693019031ec Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Tue, 18 Dec 2018 12:42:54 -0200
Subject: [PATCH] show message about sync server error when sync is active fix
 https://github.com/brave/brave-browser/issues/2577

---
 .../ui/components/enabledContent.tsx          | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/components/brave_sync/ui/components/enabledContent.tsx b/components/brave_sync/ui/components/enabledContent.tsx
index d41fbcc927e0..fd9d5ddcf48a 100644
--- a/components/brave_sync/ui/components/enabledContent.tsx
+++ b/components/brave_sync/ui/components/enabledContent.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Components
-import { Button } from 'brave-ui'
+import { Button, AlertBox } from 'brave-ui'
 import Table, { Cell, Row } from 'brave-ui/components/dataTables/table'
 import { Toggle } from 'brave-ui/features/shields'
 
@@ -111,6 +111,10 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     })
   }
 
+  onUserNoticedError = () => {
+    this.props.actions.resetSyncSetupError()
+  }
+
   onClickViewSyncCodeButton = () => {
     this.setState({ viewSyncCode: !this.state.viewSyncCode })
   }
@@ -144,6 +148,22 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
 
     return (
       <Main>
+        {
+           syncData.error === 'ERR_SYNC_NO_INTERNET'
+           ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+               <Title>{getLocale('errorNoInternetTitle')}</Title>
+               <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
+             </AlertBox>
+           : null
+        }
+        {
+          syncData.error === 'ERR_SYNC_INIT_FAILED'
+          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+              <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
+              <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
+            </AlertBox>
+          : null
+        }
         {
           removeDevice
             ? <RemoveDeviceModal