diff --git a/src/components/TopBar/ActivityIndicator.js b/src/components/TopBar/ActivityIndicator.js index fb7b1e58..64de8714 100644 --- a/src/components/TopBar/ActivityIndicator.js +++ b/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 { } 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 = ( { ) + + if (error) { + return ( + ( + + + + )} + > + {content} + + ) + } + + return content } } @@ -132,13 +152,14 @@ const ActivityIndicator = ({ globalSyncState, t }: { globalSyncState: AsyncState {cvPolling => { const isPending = cvPolling.pending || globalSyncState.pending - const isError = cvPolling.error || globalSyncState.error + const isError = !isPending && (cvPolling.error || globalSyncState.error) return ( diff --git a/src/components/base/Tooltip/index.js b/src/components/base/Tooltip/index.js index 277224db..c4b9b9cd 100644 --- a/src/components/base/Tooltip/index.js +++ b/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, }) => (
, children: any, render: Function, + tooltipBg?: string, } class Tooltip extends PureComponent { @@ -59,7 +62,7 @@ class Tooltip extends PureComponent { } 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 { if (this._node && this._node._tippy) { this._node._tippy.popper.querySelector('.tippy-roundarrow').innerHTML = ` - + ` } } @@ -86,12 +91,14 @@ class Tooltip extends PureComponent { _template = undefined render() { - const { children, render, ...props } = this.props + const { children, render, tooltipBg, ...props } = this.props return ( (this._node = n)} {...props}> {children}