Merge pull request #1128 from brave/ca-2577

show message about server error when sync is active

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