keep refreshElapsed state in refresh widget (#10505)

frontend/src/metabase/dashboard/components/Dashboard.jsx

@@ -90,7 +90,7 @@ type Props = {
   editingParameter: ?Parameter,
 
   refreshPeriod: number,
-  refreshElapsed: number,
+  setRefreshElapsedHook: Function,
   isFullscreen: boolean,
   isNightMode: boolean,
   hideParameters: ?string,

frontend/src/metabase/dashboard/components/DashboardActions.jsx

@@ -13,7 +13,7 @@ export const getDashboardActions = ({
   onNightModeChange,
   onFullscreenChange,
   refreshPeriod,
-  refreshElapsed,
+  setRefreshElapsedHook,
   onRefreshPeriodChange,
 }) => {
   const buttons = [];
@@ -25,7 +25,7 @@ export const getDashboardActions = ({
         data-metabase-event="Dashboard;Refresh Menu Open"
         className="text-brand-hover"
         period={refreshPeriod}
-        elapsed={refreshElapsed}
+        setRefreshElapsedHook={setRefreshElapsedHook}
         onChangePeriod={onRefreshPeriodChange}
       />,
     );

frontend/src/metabase/dashboard/components/DashboardHeader.jsx

@@ -49,7 +49,7 @@ type Props = {
   isNightMode: boolean,
 
   refreshPeriod: ?number,
-  refreshElapsed: ?number,
+  setRefreshElapsedHook: Function,
 
   parametersWidget: React$Element<*>,
 
@@ -90,7 +90,7 @@ export default class DashboardHeader extends Component {
     isNightMode: PropTypes.bool.isRequired,
 
     refreshPeriod: PropTypes.number,
-    refreshElapsed: PropTypes.number,
+    setRefreshElapsedHook: PropTypes.func.isRequired,
 
     addCardToDashboard: PropTypes.func.isRequired,
     addTextDashCardToDashboard: PropTypes.func.isRequired,

frontend/src/metabase/dashboard/components/RefreshWidget.jsx

@@ -20,8 +20,28 @@ const OPTIONS = [
 ];
 
 export default class RefreshWidget extends Component {
+  state = { elapsed: null };
+
+  componentWillMount() {
+    const { setRefreshElapsedHook } = this.props;
+    if (setRefreshElapsedHook) {
+      setRefreshElapsedHook(elapsed => this.setState({ elapsed }));
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const { setRefreshElapsedHook } = this.props;
+    if (
+      setRefreshElapsedHook &&
+      prevProps.setRefreshElapsedHook !== setRefreshElapsedHook
+    ) {
+      setRefreshElapsedHook(elapsed => this.setState({ elapsed }));
+    }
+  }
+
   render() {
-    const { period, elapsed, onChangePeriod, className } = this.props;
+    const { period, onChangePeriod, className } = this.props;
+    const { elapsed } = this.state;
     const remaining = period - elapsed;
     return (
       <PopoverWithTrigger

frontend/src/metabase/dashboard/hoc/DashboardControls.jsx

@@ -25,11 +25,10 @@ type State = {
   isFullscreen: boolean,
   isNightMode: boolean,
   refreshPeriod: ?number,
-  refreshElapsed: ?number,
   hideParameters: ?string,
 };
 
-const TICK_PERIOD = 0.25; // seconds
+const TICK_PERIOD = 1; // seconds
 
 /* This contains some state for dashboard controls on both private and embedded dashboards.
  * It should probably be in Redux?
@@ -51,13 +50,15 @@ export default (ComposedComponent: ReactClass<any>) =>
         isNightMode: false,
 
         refreshPeriod: null,
-        refreshElapsed: null,
 
         hideParameters: null,
       };
 
       _interval: ?number;
 
+      _refreshElapsed: ?number;
+      _refreshElapsedHook: ?Function;
+
       componentWillMount() {
         if (screenfull.enabled) {
           document.addEventListener(
@@ -139,17 +140,16 @@ export default (ComposedComponent: ReactClass<any>) =>
             this._tickRefreshClock,
             TICK_PERIOD * 1000,
           );
-          this.setState({ refreshPeriod, refreshElapsed: 0 });
+          this.setState({ refreshPeriod });
+          this.setRefreshElapsed(0);
           MetabaseAnalytics.trackEvent(
             "Dashboard",
             "Set Refresh",
             refreshPeriod,
           );
         } else {
-          this.setState({
-            refreshPeriod: null,
-            refreshElapsed: null,
-          });
+          this.setState({ refreshPeriod: null });
+          this.setRefreshElapsed(null);
         }
       };
 
@@ -177,12 +177,10 @@ export default (ComposedComponent: ReactClass<any>) =>
       };
 
       _tickRefreshClock = async () => {
-        const refreshElapsed = (this.state.refreshElapsed || 0) + TICK_PERIOD;
-        if (
-          this.state.refreshPeriod &&
-          refreshElapsed >= this.state.refreshPeriod
-        ) {
-          this.setState({ refreshElapsed: 0 });
+        this._refreshElapsed = (this._refreshElapsed || 0) + TICK_PERIOD;
+        const { refreshPeriod } = this.state;
+        if (refreshPeriod && this._refreshElapsed >= refreshPeriod) {
+          this._refreshElapsed = 0;
           await this.props.fetchDashboard(
             this.props.dashboardId,
             this.props.location.query,
@@ -191,9 +189,8 @@ export default (ComposedComponent: ReactClass<any>) =>
             reload: true,
             clear: false,
           });
-        } else {
-          this.setState({ refreshElapsed });
         }
+        this.setRefreshElapsed(this._refreshElapsed);
       };
 
       _clearRefreshInterval() {
@@ -219,11 +216,22 @@ export default (ComposedComponent: ReactClass<any>) =>
         this.setState({ isFullscreen: !!screenfull.isFullscreen });
       };
 
+      setRefreshElapsedHook = hook => {
+        this._refreshElapsedHook = hook;
+      };
+
+      setRefreshElapsed = elapsed => {
+        if (this._refreshElapsedHook) {
+          this._refreshElapsedHook(elapsed);
+        }
+      };
+
       render() {
         return (
           <ComposedComponent
             {...this.props}
             {...this.state}
+            setRefreshElapsedHook={this.setRefreshElapsedHook}
             loadDashboardParams={this.loadDashboardParams}
             updateDashboardParams={this.updateDashboardParams}
             onNightModeChange={this.setNightMode}