Merge pull request #656 from meriadec/activity-indicator-error

Display error tooltip in ActivityIndicator

src/components/TopBar/ActivityIndicator.js

@@ -14,6 +14,8 @@ import { BridgeSyncConsumer } from 'bridge/BridgeSyncContext'
 import CounterValues from 'helpers/countervalues'
 
 import { Rotating } from 'components/base/Spinner'
+import Tooltip from 'components/base/Tooltip'
+import TranslatedError from 'components/TranslatedError'
 import Box from 'components/base/Box'
 import IconRefresh from 'icons/Refresh'
 import IconExclamationCircle from 'icons/ExclamationCircle'
@@ -28,6 +30,7 @@ type Props = {
   // FIXME: eslint should see that it is used in static method
   isGlobalSyncStatePending: boolean, // eslint-disable-line react/no-unused-prop-types
 
+  error: ?Error,
   isPending: boolean,
   isError: boolean,
   t: T,
@@ -75,12 +78,12 @@ class ActivityIndicatorInner extends PureComponent<Props, State> {
   }
 
   render() {
-    const { isPending, isError, t } = this.props
+    const { isPending, isError, error, t } = this.props
     const { hasClicked, isFirstSync } = this.state
     const isDisabled = isError || (isPending && (isFirstSync || hasClicked))
     const isRotating = isPending && (hasClicked || isFirstSync)
 
-    return (
+    const content = (
       <ItemContainer disabled={isDisabled} onClick={isDisabled ? undefined : this.handleRefresh}>
         <Rotating
           size={16}
@@ -123,6 +126,23 @@ class ActivityIndicatorInner extends PureComponent<Props, State> {
         </Box>
       </ItemContainer>
     )
+
+    if (error) {
+      return (
+        <Tooltip
+          tooltipBg="alertRed"
+          render={() => (
+            <Box fontSize={4} p={2} style={{ maxWidth: 250 }}>
+              <TranslatedError error={error} />
+            </Box>
+          )}
+        >
+          {content}
+        </Tooltip>
+      )
+    }
+
+    return content
   }
 }
 
@@ -132,13 +152,14 @@ const ActivityIndicator = ({ globalSyncState, t }: { globalSyncState: AsyncState
       <CounterValues.PollingConsumer>
         {cvPolling => {
           const isPending = cvPolling.pending || globalSyncState.pending
-          const isError = cvPolling.error || globalSyncState.error
+          const isError = !isPending && (cvPolling.error || globalSyncState.error)
           return (
             <ActivityIndicatorInner
               t={t}
               isPending={isPending}
               isGlobalSyncStatePending={globalSyncState.pending}
-              isError={!!isError && !isPending}
+              isError={!!isError}
+              error={isError ? globalSyncState.error : null}
               cvPoll={cvPolling.poll}
               setSyncBehavior={setSyncBehavior}
             />

src/components/base/Tooltip/index.js

@@ -20,15 +20,17 @@ export const TooltipContainer = ({
   children,
   innerRef,
   style,
+  tooltipBg,
 }: {
   children: any,
   innerRef?: Function,
   style?: Object,
+  tooltipBg?: string,
 }) => (
   <div
     ref={innerRef}
     style={{
-      background: colors.dark,
+      background: colors[tooltipBg || 'dark'],
       borderRadius: 4,
       color: 'white',
       fontFamily: 'Open Sans',
@@ -51,6 +53,7 @@ type Props = {
   offset?: Array<number>,
   children: any,
   render: Function,
+  tooltipBg?: string,
 }
 
 class Tooltip extends PureComponent<Props> {
@@ -59,7 +62,7 @@ class Tooltip extends PureComponent<Props> {
   }
 
   componentDidMount() {
-    const { offset } = this.props
+    const { offset, tooltipBg } = this.props
 
     if (this._node && this._template) {
       tippy(this._node, {
@@ -76,7 +79,9 @@ class Tooltip extends PureComponent<Props> {
       if (this._node && this._node._tippy) {
         this._node._tippy.popper.querySelector('.tippy-roundarrow').innerHTML = `
           <svg viewBox="0 0 24 8">
-            <path d="M5 8l5.5-5.6c.8-.8 2-.8 2.8 0L19 8" />
+            <path${
+              tooltipBg ? ` fill="${colors[tooltipBg]}"` : ''
+            } d="M5 8l5.5-5.6c.8-.8 2-.8 2.8 0L19 8" />
           </svg>`
       }
     }
@@ -86,12 +91,14 @@ class Tooltip extends PureComponent<Props> {
   _template = undefined
 
   render() {
-    const { children, render, ...props } = this.props
+    const { children, render, tooltipBg, ...props } = this.props
 
     return (
       <Container innerRef={n => (this._node = n)} {...props}>
         <Template>
-          <TooltipContainer innerRef={n => (this._template = n)}>{render()}</TooltipContainer>
+          <TooltipContainer tooltipBg={tooltipBg} innerRef={n => (this._template = n)}>
+            {render()}
+          </TooltipContainer>
         </Template>
         {children}
       </Container>