) : null;
+ const openVariant = opened ? 'open' : 'closed';
+
return (
{alertsLabel}
+
+ {menuContent}
+
this.setState({opened: true})}
+ className={classes('dash-debug-menu', openVariant)}
+ onClick={() => {
+ this.setState({opened: !opened});
+ }}
>
- {menuContent}
+
0}
+ errorsOpened={errorsOpened}
>
{this.props.children}
@@ -151,6 +161,7 @@ DebugMenu.propTypes = {
children: PropTypes.object,
error: PropTypes.object,
graphs: PropTypes.object,
+ hotReload: PropTypes.bool,
};
export {DebugMenu};
diff --git a/dash-renderer/src/reducers/error.js b/dash-renderer/src/reducers/error.js
index b796024e49..4188703054 100644
--- a/dash-renderer/src/reducers/error.js
+++ b/dash-renderer/src/reducers/error.js
@@ -3,11 +3,13 @@ import {mergeRight} from 'ramda';
const initialError = {
frontEnd: [],
backEnd: [],
+ backEndConnected: true,
};
export default function error(state = initialError, action) {
switch (action.type) {
case 'ON_ERROR': {
+ const {frontEnd, backEnd, backEndConnected} = state;
// log errors to the console for stack tracing and so they're
// available even with debugging off
/* eslint-disable-next-line no-console */
@@ -17,21 +19,26 @@ export default function error(state = initialError, action) {
return {
frontEnd: [
mergeRight(action.payload, {timestamp: new Date()}),
- ...state.frontEnd,
+ ...frontEnd,
],
- backEnd: state.backEnd,
+ backEnd,
+ backEndConnected,
};
} else if (action.payload.type === 'backEnd') {
return {
- frontEnd: state.frontEnd,
+ frontEnd,
backEnd: [
mergeRight(action.payload, {timestamp: new Date()}),
- ...state.backEnd,
+ ...backEnd,
],
+ backEndConnected,
};
}
return state;
}
+ case 'SET_CONNECTION_STATUS': {
+ return mergeRight(state, {backEndConnected: action.payload});
+ }
default: {
return state;
diff --git a/tests/integration/devtools/test_devtools_ui.py b/tests/integration/devtools/test_devtools_ui.py
index 7d6ce5abc3..878e6377b7 100644
--- a/tests/integration/devtools/test_devtools_ui.py
+++ b/tests/integration/devtools/test_devtools_ui.py
@@ -1,3 +1,5 @@
+from time import sleep
+
import dash_core_components as dcc
import dash_html_components as html
import dash
@@ -25,9 +27,9 @@ def test_dvui001_disable_props_check_config(dash_duo):
dash_duo.wait_for_text_to_equal("#tcid", "Hello Props Check")
assert dash_duo.find_elements("#broken svg.main-svg"), "graph should be rendered"
- assert dash_duo.find_elements(
- ".dash-debug-menu"
- ), "the debug menu icon should show up"
+ # open the debug menu so we see the "hot reload off" indicator
+ dash_duo.find_element(".dash-debug-menu").click()
+ sleep(1) # wait for debug menu opening animation
dash_duo.percy_snapshot("devtools - disable props check - Graph should render")
diff --git a/tests/integration/devtools/test_hot_reload.py b/tests/integration/devtools/test_hot_reload.py
index b57bba4de5..0b0a0fae28 100644
--- a/tests/integration/devtools/test_hot_reload.py
+++ b/tests/integration/devtools/test_hot_reload.py
@@ -3,6 +3,8 @@
import dash_html_components as html
import dash
+from dash.dependencies import Input, Output
+from dash.exceptions import PreventUpdate
RED_BG = """
@@ -14,15 +16,27 @@
def test_dvhr001_hot_reload(dash_duo):
app = dash.Dash(__name__, assets_folder="hr_assets")
- app.layout = html.Div([html.H3("Hot reload")], id="hot-reload-content")
+ app.layout = html.Div([
+ html.H3("Hot reload", id="text"),
+ html.Button("Click", id="btn")
+ ], id="hot-reload-content")
- dash_duo.start_server(
- app,
+ @app.callback(Output("text", "children"), [Input("btn", "n_clicks")])
+ def new_text(n):
+ if not n:
+ raise PreventUpdate
+ return n
+
+ hot_reload_settings = dict(
dev_tools_hot_reload=True,
+ dev_tools_ui=True,
+ dev_tools_serve_dev_bundles=True,
dev_tools_hot_reload_interval=0.1,
dev_tools_hot_reload_max_retry=100,
)
+ dash_duo.start_server(app, **hot_reload_settings)
+
# default overload color is blue
dash_duo.wait_for_style_to_equal(
"#hot-reload-content", "background-color", "rgba(0, 0, 255, 1)"
@@ -51,3 +65,34 @@ def test_dvhr001_hot_reload(dash_duo):
dash_duo.wait_for_style_to_equal(
"#hot-reload-content", "background-color", "rgba(0, 0, 255, 1)"
)
+
+ # Now check the server status indicator functionality
+
+ dash_duo.find_element(".dash-debug-menu").click()
+ dash_duo.find_element(".dash-debug-menu__button--available")
+ sleep(1) # wait for opening animation
+ dash_duo.percy_snapshot(name="hot-reload-available")
+
+ dash_duo.server.stop()
+ sleep(1) # make sure we would have requested the reload hash multiple times
+ dash_duo.find_element(".dash-debug-menu__button--unavailable")
+ dash_duo.wait_for_no_elements(".dash-fe-error__title")
+ dash_duo.percy_snapshot(name="hot-reload-unavailable")
+
+ dash_duo.find_element(".dash-debug-menu").click()
+ sleep(1) # wait for opening animation
+ dash_duo.find_element(".dash-debug-disconnected")
+ dash_duo.percy_snapshot(name="hot-reload-unavailable-small")
+
+ dash_duo.find_element("#btn").click()
+ dash_duo.wait_for_text_to_equal(
+ ".dash-fe-error__title", "Callback failed: the server did not respond."
+ )
+
+ # start up the server again
+ dash_duo.start_server(app, **hot_reload_settings)
+
+ # rerenders with debug menu closed after reload
+ # reopen and check that server is now available
+ dash_duo.find_element(".dash-debug-menu--closed").click()
+ dash_duo.find_element(".dash-debug-menu__button--available")