Hide undo redo

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [UNRELEASED]
+### Changed
+- Undo/redo toolbar is removed by default, unless `config.show_undo_redo=true` is provided. The CSS hack `._dash-undo-redo:{display:none;}` is no longer needed [#175](https://github.com/plotly/dash-renderer/pull/175)
+
 ## [0.24.0] - 2019-05-15
 ### Fixed
 - Fix regression on handling PreventUpdate (204 NO CONTENT) [#170](https://github.com/plotly/dash-renderer/pull/170)

src/AppContainer.react.js

@@ -30,9 +30,10 @@ class UnconnectedAppContainer extends React.Component {
  if (type(config) === 'Null') {
  return <div className="_dash-loading">Loading...</div>;
  }
+ const {show_undo_redo} = config;
  return (
  <React.Fragment>
- <Toolbar />
+{show_undo_redo ? <Toolbar /> : null}
  <APIController />
  <DocumentTitle />
  <Loading />

src/actions/index.js

@@ -131,34 +131,20 @@ export function redo() {
  };
 }
 
+const UNDO = createAction('UNDO')();
 export function undo() {
- return function(dispatch, getState) {
- const history = getState().history;
- dispatch(createAction('UNDO')());
- const previous = history.past[history.past.length - 1];
-
- // Update props
- dispatch(
- createAction('UNDO_PROP_CHANGE')({
- itempath: getState().paths[previous.id],
- props: previous.props,
- })
- );
-
- // Notify observers
- dispatch(
- notifyObservers({
- id: previous.id,
- props: previous.props,
- })
- );
- };
+ return undo_revert(UNDO);
 }
 
+const REVERT = createAction('REVERT')();
 export function revert() {
+ return undo_revert(REVERT);
+}
+
+function undo_revert(undo_or_revert) {
  return function(dispatch, getState) {
  const history = getState().history;
- dispatch(createAction('REVERT')());
+ dispatch(undo_or_revert);
  const previous = history.past[history.past.length - 1];
 
  // Update props

tests/test_assets/initial_state_dash_app_content.html

@@ -1 +1 @@
-<div id="react-entry-point"><div class="_dash-undo-redo" data-radium="true" style="position: fixed; bottom: 30px; left: 30px; font-size: 20px; text-align: center; z-index: 9999; background-color: rgba(255, 255, 255, 0.9);"><div data-radium="true" style="position: relative;"></div></div><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>
+<div id="react-entry-point"><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>

tests/test_render.py

@@ -1,3 +1,4 @@
+# -*- coding: UTF-8 -*-
 import os
 import textwrap
 
@@ -109,7 +110,6 @@ def request_queue_assertions(
  if expected_length is not None:
  self.assertEqual(len(request_queue), expected_length)
 
-
  def test_initial_state(self):
  app = Dash(__name__)
  my_class_attrs = {
@@ -154,11 +154,12 @@ def test_initial_state(self):
  self.startServer(app)
  el = self.wait_for_element_by_css_selector('#react-entry-point')
 
+ # Note: this .html file shows there's no undo/redo button by default
  _dash_app_content_html = os.path.join(
  os.path.dirname(__file__),
  'test_assets', 'initial_state_dash_app_content.html')
  with open(_dash_app_content_html) as fp:
- rendered_dom = BeautifulSoup(fp.read(), 'lxml')
+ rendered_dom = BeautifulSoup(fp.read().strip(), 'lxml')
  fetched_dom = BeautifulSoup(el.get_attribute('outerHTML'), 'lxml')
 
  self.assertEqual(
@@ -211,6 +212,79 @@ def test_initial_state(self):
 
  self.assertTrue(self.is_console_clean())
 
+ def click_undo(self):
+ undo_selector = '._dash-undo-redo span:first-child div:last-child'
+ undo = self.wait_for_element_by_css_selector(undo_selector)
+ self.wait_for_text_to_equal(undo_selector, 'undo')
+ undo.click()
+
+ def click_redo(self):
+ redo_selector = '._dash-undo-redo span:last-child div:last-child'
+ self.wait_for_text_to_equal(redo_selector, 'redo')
+ redo = self.wait_for_element_by_css_selector(redo_selector)
+ redo.click()
+
+ def check_undo_redo_exist(self, has_undo, has_redo):
+ selector = '._dash-undo-redo span div:last-child'
+ els = self.driver.find_elements_by_css_selector(selector)
+ texts = (['undo'] if has_undo else []) + (['redo'] if has_redo else [])
+
+ self.assertEqual(len(els), len(texts))
+ for el, text in zip(els, texts):
+ self.assertEqual(el.text, text)
+
+ def test_undo_redo(self):
+ app = Dash(__name__, show_undo_redo=True)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ self.check_undo_redo_exist(True, False)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'x')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_redo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.percy_snapshot(name='undo-redo')
+
+ self.click_undo()
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', '')
+ self.check_undo_redo_exist(False, True)
+
+ def test_no_undo_redo(self):
+ app = Dash(__name__)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ toolbar = self.driver.find_elements_by_css_selector('._dash-undo-redo')
+ self.assertEqual(len(toolbar), 0)
+
  def test_array_of_falsy_child(self):
  app = Dash(__name__)
  app.layout = html.Div(id='nully-wrapper', children=[0])
@@ -328,10 +402,9 @@ def update_input(value):
  '#react-entry-point').get_attribute('innerHTML'),
  'lxml').select_one('#output > div').contents
 
- self.assertTrue(
- pad_input.attrs == {'type': 'text', 'id': 'sub-input-1', 'value': 'sub input initial value'}
- and pad_input.name == 'input',
- "pad input is correctly rendered")
+ self.assertEqual(pad_input.attrs['value'], 'sub input initial value')
+ self.assertEqual(pad_input.attrs['id'], 'sub-input-1')
+ self.assertEqual(pad_input.name, 'input')
 
  self.assertTrue(
  pad_div.text == pad_input.attrs['value']

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [UNRELEASED]
+### Changed
+- Undo/redo toolbar is removed by default, unless `config.show_undo_redo=true` is provided. The CSS hack `._dash-undo-redo:{display:none;}` is no longer needed [#175](https://github.com/plotly/dash-renderer/pull/175)
+
 ## [0.24.0] - 2019-05-15
 ### Fixed
 - Fix regression on handling PreventUpdate (204 NO CONTENT) [#170](https://github.com/plotly/dash-renderer/pull/170)

src/AppContainer.react.js

@@ -30,9 +30,10 @@ class UnconnectedAppContainer extends React.Component {
  if (type(config) === 'Null') {
  return <div className="_dash-loading">Loading...</div>;
  }
+ const {show_undo_redo} = config;
  return (
  <React.Fragment>
- <Toolbar />
+{show_undo_redo ? <Toolbar /> : null}
  <APIController />
  <DocumentTitle />
  <Loading />

src/actions/index.js

@@ -131,34 +131,20 @@ export function redo() {
  };
 }
 
+const UNDO = createAction('UNDO')();
 export function undo() {
- return function(dispatch, getState) {
- const history = getState().history;
- dispatch(createAction('UNDO')());
- const previous = history.past[history.past.length - 1];
-
- // Update props
- dispatch(
- createAction('UNDO_PROP_CHANGE')({
- itempath: getState().paths[previous.id],
- props: previous.props,
- })
- );
-
- // Notify observers
- dispatch(
- notifyObservers({
- id: previous.id,
- props: previous.props,
- })
- );
- };
+ return undo_revert(UNDO);
 }
 
+const REVERT = createAction('REVERT')();
 export function revert() {
+ return undo_revert(REVERT);
+}
+
+function undo_revert(undo_or_revert) {
  return function(dispatch, getState) {
  const history = getState().history;
- dispatch(createAction('REVERT')());
+ dispatch(undo_or_revert);
  const previous = history.past[history.past.length - 1];
 
  // Update props

tests/test_assets/initial_state_dash_app_content.html

@@ -1 +1 @@
-<div id="react-entry-point"><div class="_dash-undo-redo" data-radium="true" style="position: fixed; bottom: 30px; left: 30px; font-size: 20px; text-align: center; z-index: 9999; background-color: rgba(255, 255, 255, 0.9);"><div data-radium="true" style="position: relative;"></div></div><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>
+<div id="react-entry-point"><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>

tests/test_render.py

@@ -1,3 +1,4 @@
+# -*- coding: UTF-8 -*-
 import os
 import textwrap
 
@@ -109,7 +110,6 @@ def request_queue_assertions(
  if expected_length is not None:
  self.assertEqual(len(request_queue), expected_length)
 
-
  def test_initial_state(self):
  app = Dash(__name__)
  my_class_attrs = {
@@ -154,11 +154,12 @@ def test_initial_state(self):
  self.startServer(app)
  el = self.wait_for_element_by_css_selector('#react-entry-point')
 
+ # Note: this .html file shows there's no undo/redo button by default
  _dash_app_content_html = os.path.join(
  os.path.dirname(__file__),
  'test_assets', 'initial_state_dash_app_content.html')
  with open(_dash_app_content_html) as fp:
- rendered_dom = BeautifulSoup(fp.read(), 'lxml')
+ rendered_dom = BeautifulSoup(fp.read().strip(), 'lxml')
  fetched_dom = BeautifulSoup(el.get_attribute('outerHTML'), 'lxml')
 
  self.assertEqual(
@@ -211,6 +212,79 @@ def test_initial_state(self):
 
  self.assertTrue(self.is_console_clean())
 
+ def click_undo(self):
+ undo_selector = '._dash-undo-redo span:first-child div:last-child'
+ undo = self.wait_for_element_by_css_selector(undo_selector)
+ self.wait_for_text_to_equal(undo_selector, 'undo')
+ undo.click()
+
+ def click_redo(self):
+ redo_selector = '._dash-undo-redo span:last-child div:last-child'
+ self.wait_for_text_to_equal(redo_selector, 'redo')
+ redo = self.wait_for_element_by_css_selector(redo_selector)
+ redo.click()
+
+ def check_undo_redo_exist(self, has_undo, has_redo):
+ selector = '._dash-undo-redo span div:last-child'
+ els = self.driver.find_elements_by_css_selector(selector)
+ texts = (['undo'] if has_undo else []) + (['redo'] if has_redo else [])
+
+ self.assertEqual(len(els), len(texts))
+ for el, text in zip(els, texts):
+ self.assertEqual(el.text, text)
+
+ def test_undo_redo(self):
+ app = Dash(__name__, show_undo_redo=True)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ self.check_undo_redo_exist(True, False)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'x')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_redo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.percy_snapshot(name='undo-redo')
+
+ self.click_undo()
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', '')
+ self.check_undo_redo_exist(False, True)
+
+ def test_no_undo_redo(self):
+ app = Dash(__name__)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ toolbar = self.driver.find_elements_by_css_selector('._dash-undo-redo')
+ self.assertEqual(len(toolbar), 0)
+
  def test_array_of_falsy_child(self):
  app = Dash(__name__)
  app.layout = html.Div(id='nully-wrapper', children=[0])
@@ -328,10 +402,9 @@ def update_input(value):
  '#react-entry-point').get_attribute('innerHTML'),
  'lxml').select_one('#output > div').contents
 
- self.assertTrue(
- pad_input.attrs == {'type': 'text', 'id': 'sub-input-1', 'value': 'sub input initial value'}
- and pad_input.name == 'input',
- "pad input is correctly rendered")
+ self.assertEqual(pad_input.attrs['value'], 'sub input initial value')
+ self.assertEqual(pad_input.attrs['id'], 'sub-input-1')
+ self.assertEqual(pad_input.name, 'input')
 
  self.assertTrue(
  pad_div.text == pad_input.attrs['value']

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [UNRELEASED]
+### Changed
+- Undo/redo toolbar is removed by default, unless `config.show_undo_redo=true` is provided. The CSS hack `._dash-undo-redo:{display:none;}` is no longer needed [#175](https://github.com/plotly/dash-renderer/pull/175)
+
 ## [0.24.0] - 2019-05-15
 ### Fixed
 - Fix regression on handling PreventUpdate (204 NO CONTENT) [#170](https://github.com/plotly/dash-renderer/pull/170)

src/AppContainer.react.js

@@ -30,9 +30,10 @@ class UnconnectedAppContainer extends React.Component {
  if (type(config) === 'Null') {
  return <div className="_dash-loading">Loading...</div>;
  }
+ const {show_undo_redo} = config;
  return (
  <React.Fragment>
- <Toolbar />
+{show_undo_redo ? <Toolbar /> : null}
  <APIController />
  <DocumentTitle />
  <Loading />

src/actions/index.js

@@ -131,34 +131,20 @@ export function redo() {
  };
 }
 
+const UNDO = createAction('UNDO')();
 export function undo() {
- return function(dispatch, getState) {
- const history = getState().history;
- dispatch(createAction('UNDO')());
- const previous = history.past[history.past.length - 1];
-
- // Update props
- dispatch(
- createAction('UNDO_PROP_CHANGE')({
- itempath: getState().paths[previous.id],
- props: previous.props,
- })
- );
-
- // Notify observers
- dispatch(
- notifyObservers({
- id: previous.id,
- props: previous.props,
- })
- );
- };
+ return undo_revert(UNDO);
 }
 
+const REVERT = createAction('REVERT')();
 export function revert() {
+ return undo_revert(REVERT);
+}
+
+function undo_revert(undo_or_revert) {
  return function(dispatch, getState) {
  const history = getState().history;
- dispatch(createAction('REVERT')());
+ dispatch(undo_or_revert);
  const previous = history.past[history.past.length - 1];
 
  // Update props

tests/test_assets/initial_state_dash_app_content.html

@@ -1 +1 @@
-<div id="react-entry-point"><div class="_dash-undo-redo" data-radium="true" style="position: fixed; bottom: 30px; left: 30px; font-size: 20px; text-align: center; z-index: 9999; background-color: rgba(255, 255, 255, 0.9);"><div data-radium="true" style="position: relative;"></div></div><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>
+<div id="react-entry-point"><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>

tests/test_render.py

@@ -1,3 +1,4 @@
+# -*- coding: UTF-8 -*-
 import os
 import textwrap
 
@@ -109,7 +110,6 @@ def request_queue_assertions(
  if expected_length is not None:
  self.assertEqual(len(request_queue), expected_length)
 
-
  def test_initial_state(self):
  app = Dash(__name__)
  my_class_attrs = {
@@ -154,11 +154,12 @@ def test_initial_state(self):
  self.startServer(app)
  el = self.wait_for_element_by_css_selector('#react-entry-point')
 
+ # Note: this .html file shows there's no undo/redo button by default
  _dash_app_content_html = os.path.join(
  os.path.dirname(__file__),
  'test_assets', 'initial_state_dash_app_content.html')
  with open(_dash_app_content_html) as fp:
- rendered_dom = BeautifulSoup(fp.read(), 'lxml')
+ rendered_dom = BeautifulSoup(fp.read().strip(), 'lxml')
  fetched_dom = BeautifulSoup(el.get_attribute('outerHTML'), 'lxml')
 
  self.assertEqual(
@@ -211,6 +212,79 @@ def test_initial_state(self):
 
  self.assertTrue(self.is_console_clean())
 
+ def click_undo(self):
+ undo_selector = '._dash-undo-redo span:first-child div:last-child'
+ undo = self.wait_for_element_by_css_selector(undo_selector)
+ self.wait_for_text_to_equal(undo_selector, 'undo')
+ undo.click()
+
+ def click_redo(self):
+ redo_selector = '._dash-undo-redo span:last-child div:last-child'
+ self.wait_for_text_to_equal(redo_selector, 'redo')
+ redo = self.wait_for_element_by_css_selector(redo_selector)
+ redo.click()
+
+ def check_undo_redo_exist(self, has_undo, has_redo):
+ selector = '._dash-undo-redo span div:last-child'
+ els = self.driver.find_elements_by_css_selector(selector)
+ texts = (['undo'] if has_undo else []) + (['redo'] if has_redo else [])
+
+ self.assertEqual(len(els), len(texts))
+ for el, text in zip(els, texts):
+ self.assertEqual(el.text, text)
+
+ def test_undo_redo(self):
+ app = Dash(__name__, show_undo_redo=True)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ self.check_undo_redo_exist(True, False)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'x')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_redo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.percy_snapshot(name='undo-redo')
+
+ self.click_undo()
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', '')
+ self.check_undo_redo_exist(False, True)
+
+ def test_no_undo_redo(self):
+ app = Dash(__name__)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ toolbar = self.driver.find_elements_by_css_selector('._dash-undo-redo')
+ self.assertEqual(len(toolbar), 0)
+
  def test_array_of_falsy_child(self):
  app = Dash(__name__)
  app.layout = html.Div(id='nully-wrapper', children=[0])
@@ -328,10 +402,9 @@ def update_input(value):
  '#react-entry-point').get_attribute('innerHTML'),
  'lxml').select_one('#output > div').contents
 
- self.assertTrue(
- pad_input.attrs == {'type': 'text', 'id': 'sub-input-1', 'value': 'sub input initial value'}
- and pad_input.name == 'input',
- "pad input is correctly rendered")
+ self.assertEqual(pad_input.attrs['value'], 'sub input initial value')
+ self.assertEqual(pad_input.attrs['id'], 'sub-input-1')
+ self.assertEqual(pad_input.name, 'input')
 
  self.assertTrue(
  pad_div.text == pad_input.attrs['value']

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [UNRELEASED]
+### Changed
+- Undo/redo toolbar is removed by default, unless `config.show_undo_redo=true` is provided. The CSS hack `._dash-undo-redo:{display:none;}` is no longer needed [#175](https://github.com/plotly/dash-renderer/pull/175)
+
 ## [0.24.0] - 2019-05-15
 ### Fixed
 - Fix regression on handling PreventUpdate (204 NO CONTENT) [#170](https://github.com/plotly/dash-renderer/pull/170)

src/AppContainer.react.js

@@ -30,9 +30,10 @@ class UnconnectedAppContainer extends React.Component {
  if (type(config) === 'Null') {
  return <div className="_dash-loading">Loading...</div>;
  }
+ const {show_undo_redo} = config;
  return (
  <React.Fragment>
- <Toolbar />
+{show_undo_redo ? <Toolbar /> : null}
  <APIController />
  <DocumentTitle />
  <Loading />

src/actions/index.js

@@ -131,34 +131,20 @@ export function redo() {
  };
 }
 
+const UNDO = createAction('UNDO')();
 export function undo() {
- return function(dispatch, getState) {
- const history = getState().history;
- dispatch(createAction('UNDO')());
- const previous = history.past[history.past.length - 1];
-
- // Update props
- dispatch(
- createAction('UNDO_PROP_CHANGE')({
- itempath: getState().paths[previous.id],
- props: previous.props,
- })
- );
-
- // Notify observers
- dispatch(
- notifyObservers({
- id: previous.id,
- props: previous.props,
- })
- );
- };
+ return undo_revert(UNDO);
 }
 
+const REVERT = createAction('REVERT')();
 export function revert() {
+ return undo_revert(REVERT);
+}
+
+function undo_revert(undo_or_revert) {
  return function(dispatch, getState) {
  const history = getState().history;
- dispatch(createAction('REVERT')());
+ dispatch(undo_or_revert);
  const previous = history.past[history.past.length - 1];
 
  // Update props

tests/test_assets/initial_state_dash_app_content.html

@@ -1 +1 @@
-<div id="react-entry-point"><div class="_dash-undo-redo" data-radium="true" style="position: fixed; bottom: 30px; left: 30px; font-size: 20px; text-align: center; z-index: 9999; background-color: rgba(255, 255, 255, 0.9);"><div data-radium="true" style="position: relative;"></div></div><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>
+<div id="react-entry-point"><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>

tests/test_render.py

@@ -1,3 +1,4 @@
+# -*- coding: UTF-8 -*-
 import os
 import textwrap
 
@@ -109,7 +110,6 @@ def request_queue_assertions(
  if expected_length is not None:
  self.assertEqual(len(request_queue), expected_length)
 
-
  def test_initial_state(self):
  app = Dash(__name__)
  my_class_attrs = {
@@ -154,11 +154,12 @@ def test_initial_state(self):
  self.startServer(app)
  el = self.wait_for_element_by_css_selector('#react-entry-point')
 
+ # Note: this .html file shows there's no undo/redo button by default
  _dash_app_content_html = os.path.join(
  os.path.dirname(__file__),
  'test_assets', 'initial_state_dash_app_content.html')
  with open(_dash_app_content_html) as fp:
- rendered_dom = BeautifulSoup(fp.read(), 'lxml')
+ rendered_dom = BeautifulSoup(fp.read().strip(), 'lxml')
  fetched_dom = BeautifulSoup(el.get_attribute('outerHTML'), 'lxml')
 
  self.assertEqual(
@@ -211,6 +212,79 @@ def test_initial_state(self):
 
  self.assertTrue(self.is_console_clean())
 
+ def click_undo(self):
+ undo_selector = '._dash-undo-redo span:first-child div:last-child'
+ undo = self.wait_for_element_by_css_selector(undo_selector)
+ self.wait_for_text_to_equal(undo_selector, 'undo')
+ undo.click()
+
+ def click_redo(self):
+ redo_selector = '._dash-undo-redo span:last-child div:last-child'
+ self.wait_for_text_to_equal(redo_selector, 'redo')
+ redo = self.wait_for_element_by_css_selector(redo_selector)
+ redo.click()
+
+ def check_undo_redo_exist(self, has_undo, has_redo):
+ selector = '._dash-undo-redo span div:last-child'
+ els = self.driver.find_elements_by_css_selector(selector)
+ texts = (['undo'] if has_undo else []) + (['redo'] if has_redo else [])
+
+ self.assertEqual(len(els), len(texts))
+ for el, text in zip(els, texts):
+ self.assertEqual(el.text, text)
+
+ def test_undo_redo(self):
+ app = Dash(__name__, show_undo_redo=True)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ self.check_undo_redo_exist(True, False)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'x')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_redo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.percy_snapshot(name='undo-redo')
+
+ self.click_undo()
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', '')
+ self.check_undo_redo_exist(False, True)
+
+ def test_no_undo_redo(self):
+ app = Dash(__name__)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ toolbar = self.driver.find_elements_by_css_selector('._dash-undo-redo')
+ self.assertEqual(len(toolbar), 0)
+
  def test_array_of_falsy_child(self):
  app = Dash(__name__)
  app.layout = html.Div(id='nully-wrapper', children=[0])
@@ -328,10 +402,9 @@ def update_input(value):
  '#react-entry-point').get_attribute('innerHTML'),
  'lxml').select_one('#output > div').contents
 
- self.assertTrue(
- pad_input.attrs == {'type': 'text', 'id': 'sub-input-1', 'value': 'sub input initial value'}
- and pad_input.name == 'input',
- "pad input is correctly rendered")
+ self.assertEqual(pad_input.attrs['value'], 'sub input initial value')
+ self.assertEqual(pad_input.attrs['id'], 'sub-input-1')
+ self.assertEqual(pad_input.name, 'input')
 
  self.assertTrue(
  pad_div.text == pad_input.attrs['value']

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [UNRELEASED]
+### Changed
+- Undo/redo toolbar is removed by default, unless `config.show_undo_redo=true` is provided. The CSS hack `._dash-undo-redo:{display:none;}` is no longer needed [#175](https://github.com/plotly/dash-renderer/pull/175)
+
 ## [0.24.0] - 2019-05-15
 ### Fixed
 - Fix regression on handling PreventUpdate (204 NO CONTENT) [#170](https://github.com/plotly/dash-renderer/pull/170)

src/AppContainer.react.js

@@ -30,9 +30,10 @@ class UnconnectedAppContainer extends React.Component {
  if (type(config) === 'Null') {
  return <div className="_dash-loading">Loading...</div>;
  }
+ const {show_undo_redo} = config;
  return (
  <React.Fragment>
- <Toolbar />
+{show_undo_redo ? <Toolbar /> : null}
  <APIController />
  <DocumentTitle />
  <Loading />

src/actions/index.js

@@ -131,34 +131,20 @@ export function redo() {
  };
 }
 
+const UNDO = createAction('UNDO')();
 export function undo() {
- return function(dispatch, getState) {
- const history = getState().history;
- dispatch(createAction('UNDO')());
- const previous = history.past[history.past.length - 1];
-
- // Update props
- dispatch(
- createAction('UNDO_PROP_CHANGE')({
- itempath: getState().paths[previous.id],
- props: previous.props,
- })
- );
-
- // Notify observers
- dispatch(
- notifyObservers({
- id: previous.id,
- props: previous.props,
- })
- );
- };
+ return undo_revert(UNDO);
 }
 
+const REVERT = createAction('REVERT')();
 export function revert() {
+ return undo_revert(REVERT);
+}
+
+function undo_revert(undo_or_revert) {
  return function(dispatch, getState) {
  const history = getState().history;
- dispatch(createAction('REVERT')());
+ dispatch(undo_or_revert);
  const previous = history.past[history.past.length - 1];
 
  // Update props

tests/test_assets/initial_state_dash_app_content.html

@@ -1 +1 @@
-<div id="react-entry-point"><div class="_dash-undo-redo" data-radium="true" style="position: fixed; bottom: 30px; left: 30px; font-size: 20px; text-align: center; z-index: 9999; background-color: rgba(255, 255, 255, 0.9);"><div data-radium="true" style="position: relative;"></div></div><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>
+<div id="react-entry-point"><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>

tests/test_render.py

@@ -1,3 +1,4 @@
+# -*- coding: UTF-8 -*-
 import os
 import textwrap
 
@@ -109,7 +110,6 @@ def request_queue_assertions(
  if expected_length is not None:
  self.assertEqual(len(request_queue), expected_length)
 
-
  def test_initial_state(self):
  app = Dash(__name__)
  my_class_attrs = {
@@ -154,11 +154,12 @@ def test_initial_state(self):
  self.startServer(app)
  el = self.wait_for_element_by_css_selector('#react-entry-point')
 
+ # Note: this .html file shows there's no undo/redo button by default
  _dash_app_content_html = os.path.join(
  os.path.dirname(__file__),
  'test_assets', 'initial_state_dash_app_content.html')
  with open(_dash_app_content_html) as fp:
- rendered_dom = BeautifulSoup(fp.read(), 'lxml')
+ rendered_dom = BeautifulSoup(fp.read().strip(), 'lxml')
  fetched_dom = BeautifulSoup(el.get_attribute('outerHTML'), 'lxml')
 
  self.assertEqual(
@@ -211,6 +212,79 @@ def test_initial_state(self):
 
  self.assertTrue(self.is_console_clean())
 
+ def click_undo(self):
+ undo_selector = '._dash-undo-redo span:first-child div:last-child'
+ undo = self.wait_for_element_by_css_selector(undo_selector)
+ self.wait_for_text_to_equal(undo_selector, 'undo')
+ undo.click()
+
+ def click_redo(self):
+ redo_selector = '._dash-undo-redo span:last-child div:last-child'
+ self.wait_for_text_to_equal(redo_selector, 'redo')
+ redo = self.wait_for_element_by_css_selector(redo_selector)
+ redo.click()
+
+ def check_undo_redo_exist(self, has_undo, has_redo):
+ selector = '._dash-undo-redo span div:last-child'
+ els = self.driver.find_elements_by_css_selector(selector)
+ texts = (['undo'] if has_undo else []) + (['redo'] if has_redo else [])
+
+ self.assertEqual(len(els), len(texts))
+ for el, text in zip(els, texts):
+ self.assertEqual(el.text, text)
+
+ def test_undo_redo(self):
+ app = Dash(__name__, show_undo_redo=True)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ self.check_undo_redo_exist(True, False)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'x')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_redo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.percy_snapshot(name='undo-redo')
+
+ self.click_undo()
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', '')
+ self.check_undo_redo_exist(False, True)
+
+ def test_no_undo_redo(self):
+ app = Dash(__name__)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ toolbar = self.driver.find_elements_by_css_selector('._dash-undo-redo')
+ self.assertEqual(len(toolbar), 0)
+
  def test_array_of_falsy_child(self):
  app = Dash(__name__)
  app.layout = html.Div(id='nully-wrapper', children=[0])
@@ -328,10 +402,9 @@ def update_input(value):
  '#react-entry-point').get_attribute('innerHTML'),
  'lxml').select_one('#output > div').contents
 
- self.assertTrue(
- pad_input.attrs == {'type': 'text', 'id': 'sub-input-1', 'value': 'sub input initial value'}
- and pad_input.name == 'input',
- "pad input is correctly rendered")
+ self.assertEqual(pad_input.attrs['value'], 'sub input initial value')
+ self.assertEqual(pad_input.attrs['id'], 'sub-input-1')
+ self.assertEqual(pad_input.name, 'input')
 
  self.assertTrue(
  pad_div.text == pad_input.attrs['value']

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [UNRELEASED]
+### Changed
+- Undo/redo toolbar is removed by default, unless `config.show_undo_redo=true` is provided. The CSS hack `._dash-undo-redo:{display:none;}` is no longer needed [#175](https://github.com/plotly/dash-renderer/pull/175)
+
 ## [0.24.0] - 2019-05-15
 ### Fixed
 - Fix regression on handling PreventUpdate (204 NO CONTENT) [#170](https://github.com/plotly/dash-renderer/pull/170)

src/AppContainer.react.js

@@ -30,9 +30,10 @@ class UnconnectedAppContainer extends React.Component {
  if (type(config) === 'Null') {
  return <div className="_dash-loading">Loading...</div>;
  }
+ const {show_undo_redo} = config;
  return (
  <React.Fragment>
- <Toolbar />
+{show_undo_redo ? <Toolbar /> : null}
  <APIController />
  <DocumentTitle />
  <Loading />

src/actions/index.js

@@ -131,34 +131,20 @@ export function redo() {
  };
 }
 
+const UNDO = createAction('UNDO')();
 export function undo() {
- return function(dispatch, getState) {
- const history = getState().history;
- dispatch(createAction('UNDO')());
- const previous = history.past[history.past.length - 1];
-
- // Update props
- dispatch(
- createAction('UNDO_PROP_CHANGE')({
- itempath: getState().paths[previous.id],
- props: previous.props,
- })
- );
-
- // Notify observers
- dispatch(
- notifyObservers({
- id: previous.id,
- props: previous.props,
- })
- );
- };
+ return undo_revert(UNDO);
 }
 
+const REVERT = createAction('REVERT')();
 export function revert() {
+ return undo_revert(REVERT);
+}
+
+function undo_revert(undo_or_revert) {
  return function(dispatch, getState) {
  const history = getState().history;
- dispatch(createAction('REVERT')());
+ dispatch(undo_or_revert);
  const previous = history.past[history.past.length - 1];
 
  // Update props

tests/test_assets/initial_state_dash_app_content.html

@@ -1 +1 @@
-<div id="react-entry-point"><div class="_dash-undo-redo" data-radium="true" style="position: fixed; bottom: 30px; left: 30px; font-size: 20px; text-align: center; z-index: 9999; background-color: rgba(255, 255, 255, 0.9);"><div data-radium="true" style="position: relative;"></div></div><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>
+<div id="react-entry-point"><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>

tests/test_render.py

@@ -1,3 +1,4 @@
+# -*- coding: UTF-8 -*-
 import os
 import textwrap
 
@@ -109,7 +110,6 @@ def request_queue_assertions(
  if expected_length is not None:
  self.assertEqual(len(request_queue), expected_length)
 
-
  def test_initial_state(self):
  app = Dash(__name__)
  my_class_attrs = {
@@ -154,11 +154,12 @@ def test_initial_state(self):
  self.startServer(app)
  el = self.wait_for_element_by_css_selector('#react-entry-point')
 
+ # Note: this .html file shows there's no undo/redo button by default
  _dash_app_content_html = os.path.join(
  os.path.dirname(__file__),
  'test_assets', 'initial_state_dash_app_content.html')
  with open(_dash_app_content_html) as fp:
- rendered_dom = BeautifulSoup(fp.read(), 'lxml')
+ rendered_dom = BeautifulSoup(fp.read().strip(), 'lxml')
  fetched_dom = BeautifulSoup(el.get_attribute('outerHTML'), 'lxml')
 
  self.assertEqual(
@@ -211,6 +212,79 @@ def test_initial_state(self):
 
  self.assertTrue(self.is_console_clean())
 
+ def click_undo(self):
+ undo_selector = '._dash-undo-redo span:first-child div:last-child'
+ undo = self.wait_for_element_by_css_selector(undo_selector)
+ self.wait_for_text_to_equal(undo_selector, 'undo')
+ undo.click()
+
+ def click_redo(self):
+ redo_selector = '._dash-undo-redo span:last-child div:last-child'
+ self.wait_for_text_to_equal(redo_selector, 'redo')
+ redo = self.wait_for_element_by_css_selector(redo_selector)
+ redo.click()
+
+ def check_undo_redo_exist(self, has_undo, has_redo):
+ selector = '._dash-undo-redo span div:last-child'
+ els = self.driver.find_elements_by_css_selector(selector)
+ texts = (['undo'] if has_undo else []) + (['redo'] if has_redo else [])
+
+ self.assertEqual(len(els), len(texts))
+ for el, text in zip(els, texts):
+ self.assertEqual(el.text, text)
+
+ def test_undo_redo(self):
+ app = Dash(__name__, show_undo_redo=True)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ self.check_undo_redo_exist(True, False)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'x')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_redo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.percy_snapshot(name='undo-redo')
+
+ self.click_undo()
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', '')
+ self.check_undo_redo_exist(False, True)
+
+ def test_no_undo_redo(self):
+ app = Dash(__name__)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ toolbar = self.driver.find_elements_by_css_selector('._dash-undo-redo')
+ self.assertEqual(len(toolbar), 0)
+
  def test_array_of_falsy_child(self):
  app = Dash(__name__)
  app.layout = html.Div(id='nully-wrapper', children=[0])
@@ -328,10 +402,9 @@ def update_input(value):
  '#react-entry-point').get_attribute('innerHTML'),
  'lxml').select_one('#output > div').contents
 
- self.assertTrue(
- pad_input.attrs == {'type': 'text', 'id': 'sub-input-1', 'value': 'sub input initial value'}
- and pad_input.name == 'input',
- "pad input is correctly rendered")
+ self.assertEqual(pad_input.attrs['value'], 'sub input initial value')
+ self.assertEqual(pad_input.attrs['id'], 'sub-input-1')
+ self.assertEqual(pad_input.name, 'input')
 
  self.assertTrue(
  pad_div.text == pad_input.attrs['value']

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [UNRELEASED]
+### Changed
+- Undo/redo toolbar is removed by default, unless `config.show_undo_redo=true` is provided. The CSS hack `._dash-undo-redo:{display:none;}` is no longer needed [#175](https://github.com/plotly/dash-renderer/pull/175)
+
 ## [0.24.0] - 2019-05-15
 ### Fixed
 - Fix regression on handling PreventUpdate (204 NO CONTENT) [#170](https://github.com/plotly/dash-renderer/pull/170)

src/AppContainer.react.js

@@ -30,9 +30,10 @@ class UnconnectedAppContainer extends React.Component {
  if (type(config) === 'Null') {
  return <div className="_dash-loading">Loading...</div>;
  }
+ const {show_undo_redo} = config;
  return (
  <React.Fragment>
- <Toolbar />
+{show_undo_redo ? <Toolbar /> : null}
  <APIController />
  <DocumentTitle />
  <Loading />

src/actions/index.js

@@ -131,34 +131,20 @@ export function redo() {
  };
 }
 
+const UNDO = createAction('UNDO')();
 export function undo() {
- return function(dispatch, getState) {
- const history = getState().history;
- dispatch(createAction('UNDO')());
- const previous = history.past[history.past.length - 1];
-
- // Update props
- dispatch(
- createAction('UNDO_PROP_CHANGE')({
- itempath: getState().paths[previous.id],
- props: previous.props,
- })
- );
-
- // Notify observers
- dispatch(
- notifyObservers({
- id: previous.id,
- props: previous.props,
- })
- );
- };
+ return undo_revert(UNDO);
 }
 
+const REVERT = createAction('REVERT')();
 export function revert() {
+ return undo_revert(REVERT);
+}
+
+function undo_revert(undo_or_revert) {
  return function(dispatch, getState) {
  const history = getState().history;
- dispatch(createAction('REVERT')());
+ dispatch(undo_or_revert);
  const previous = history.past[history.past.length - 1];
 
  // Update props

tests/test_assets/initial_state_dash_app_content.html

@@ -1 +1 @@
-<div id="react-entry-point"><div class="_dash-undo-redo" data-radium="true" style="position: fixed; bottom: 30px; left: 30px; font-size: 20px; text-align: center; z-index: 9999; background-color: rgba(255, 255, 255, 0.9);"><div data-radium="true" style="position: relative;"></div></div><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>
+<div id="react-entry-point"><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>

tests/test_render.py

@@ -1,3 +1,4 @@
+# -*- coding: UTF-8 -*-
 import os
 import textwrap
 
@@ -109,7 +110,6 @@ def request_queue_assertions(
  if expected_length is not None:
  self.assertEqual(len(request_queue), expected_length)
 
-
  def test_initial_state(self):
  app = Dash(__name__)
  my_class_attrs = {
@@ -154,11 +154,12 @@ def test_initial_state(self):
  self.startServer(app)
  el = self.wait_for_element_by_css_selector('#react-entry-point')
 
+ # Note: this .html file shows there's no undo/redo button by default
  _dash_app_content_html = os.path.join(
  os.path.dirname(__file__),
  'test_assets', 'initial_state_dash_app_content.html')
  with open(_dash_app_content_html) as fp:
- rendered_dom = BeautifulSoup(fp.read(), 'lxml')
+ rendered_dom = BeautifulSoup(fp.read().strip(), 'lxml')
  fetched_dom = BeautifulSoup(el.get_attribute('outerHTML'), 'lxml')
 
  self.assertEqual(
@@ -211,6 +212,79 @@ def test_initial_state(self):
 
  self.assertTrue(self.is_console_clean())
 
+ def click_undo(self):
+ undo_selector = '._dash-undo-redo span:first-child div:last-child'
+ undo = self.wait_for_element_by_css_selector(undo_selector)
+ self.wait_for_text_to_equal(undo_selector, 'undo')
+ undo.click()
+
+ def click_redo(self):
+ redo_selector = '._dash-undo-redo span:last-child div:last-child'
+ self.wait_for_text_to_equal(redo_selector, 'redo')
+ redo = self.wait_for_element_by_css_selector(redo_selector)
+ redo.click()
+
+ def check_undo_redo_exist(self, has_undo, has_redo):
+ selector = '._dash-undo-redo span div:last-child'
+ els = self.driver.find_elements_by_css_selector(selector)
+ texts = (['undo'] if has_undo else []) + (['redo'] if has_redo else [])
+
+ self.assertEqual(len(els), len(texts))
+ for el, text in zip(els, texts):
+ self.assertEqual(el.text, text)
+
+ def test_undo_redo(self):
+ app = Dash(__name__, show_undo_redo=True)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ self.check_undo_redo_exist(True, False)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'x')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_redo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.percy_snapshot(name='undo-redo')
+
+ self.click_undo()
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', '')
+ self.check_undo_redo_exist(False, True)
+
+ def test_no_undo_redo(self):
+ app = Dash(__name__)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ toolbar = self.driver.find_elements_by_css_selector('._dash-undo-redo')
+ self.assertEqual(len(toolbar), 0)
+
  def test_array_of_falsy_child(self):
  app = Dash(__name__)
  app.layout = html.Div(id='nully-wrapper', children=[0])
@@ -328,10 +402,9 @@ def update_input(value):
  '#react-entry-point').get_attribute('innerHTML'),
  'lxml').select_one('#output > div').contents
 
- self.assertTrue(
- pad_input.attrs == {'type': 'text', 'id': 'sub-input-1', 'value': 'sub input initial value'}
- and pad_input.name == 'input',
- "pad input is correctly rendered")
+ self.assertEqual(pad_input.attrs['value'], 'sub input initial value')
+ self.assertEqual(pad_input.attrs['id'], 'sub-input-1')
+ self.assertEqual(pad_input.name, 'input')
 
  self.assertTrue(
  pad_div.text == pad_input.attrs['value']

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [UNRELEASED]
+### Changed
+- Undo/redo toolbar is removed by default, unless `config.show_undo_redo=true` is provided. The CSS hack `._dash-undo-redo:{display:none;}` is no longer needed [#175](https://github.com/plotly/dash-renderer/pull/175)
+
 ## [0.24.0] - 2019-05-15
 ### Fixed
 - Fix regression on handling PreventUpdate (204 NO CONTENT) [#170](https://github.com/plotly/dash-renderer/pull/170)

src/AppContainer.react.js

@@ -30,9 +30,10 @@ class UnconnectedAppContainer extends React.Component {
  if (type(config) === 'Null') {
  return <div className="_dash-loading">Loading...</div>;
  }
+ const {show_undo_redo} = config;
  return (
  <React.Fragment>
- <Toolbar />
+{show_undo_redo ? <Toolbar /> : null}
  <APIController />
  <DocumentTitle />
  <Loading />

src/actions/index.js

@@ -131,34 +131,20 @@ export function redo() {
  };
 }
 
+const UNDO = createAction('UNDO')();
 export function undo() {
- return function(dispatch, getState) {
- const history = getState().history;
- dispatch(createAction('UNDO')());
- const previous = history.past[history.past.length - 1];
-
- // Update props
- dispatch(
- createAction('UNDO_PROP_CHANGE')({
- itempath: getState().paths[previous.id],
- props: previous.props,
- })
- );
-
- // Notify observers
- dispatch(
- notifyObservers({
- id: previous.id,
- props: previous.props,
- })
- );
- };
+ return undo_revert(UNDO);
 }
 
+const REVERT = createAction('REVERT')();
 export function revert() {
+ return undo_revert(REVERT);
+}
+
+function undo_revert(undo_or_revert) {
  return function(dispatch, getState) {
  const history = getState().history;
- dispatch(createAction('REVERT')());
+ dispatch(undo_or_revert);
  const previous = history.past[history.past.length - 1];
 
  // Update props

tests/test_assets/initial_state_dash_app_content.html

@@ -1 +1 @@
-<div id="react-entry-point"><div class="_dash-undo-redo" data-radium="true" style="position: fixed; bottom: 30px; left: 30px; font-size: 20px; text-align: center; z-index: 9999; background-color: rgba(255, 255, 255, 0.9);"><div data-radium="true" style="position: relative;"></div></div><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>
+<div id="react-entry-point"><div>Basic string3.14<div id="p.c.4" class="my-class" title="tooltip" style="color: red; font-size: 30px;">Child div with basic string</div><div id="p.c.5"></div><div id="p.c.6"><div id="p.c.6.p.c.0">Grandchild div</div><div id="p.c.6.p.c.1"><div id="p.c.6.p.c.1.p.c.0">Great grandchild</div>3.14159another basic string</div><div id="p.c.6.p.c.2"><div id="p.c.6.p.c.2.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0"><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.0"></div><div id="p.c.6.p.c.2.p.c.0.p.c.p.c.0.p.c.2"></div></div></div></div></div></div></div></div>

tests/test_render.py

@@ -1,3 +1,4 @@
+# -*- coding: UTF-8 -*-
 import os
 import textwrap
 
@@ -109,7 +110,6 @@ def request_queue_assertions(
  if expected_length is not None:
  self.assertEqual(len(request_queue), expected_length)
 
-
  def test_initial_state(self):
  app = Dash(__name__)
  my_class_attrs = {
@@ -154,11 +154,12 @@ def test_initial_state(self):
  self.startServer(app)
  el = self.wait_for_element_by_css_selector('#react-entry-point')
 
+ # Note: this .html file shows there's no undo/redo button by default
  _dash_app_content_html = os.path.join(
  os.path.dirname(__file__),
  'test_assets', 'initial_state_dash_app_content.html')
  with open(_dash_app_content_html) as fp:
- rendered_dom = BeautifulSoup(fp.read(), 'lxml')
+ rendered_dom = BeautifulSoup(fp.read().strip(), 'lxml')
  fetched_dom = BeautifulSoup(el.get_attribute('outerHTML'), 'lxml')
 
  self.assertEqual(
@@ -211,6 +212,79 @@ def test_initial_state(self):
 
  self.assertTrue(self.is_console_clean())
 
+ def click_undo(self):
+ undo_selector = '._dash-undo-redo span:first-child div:last-child'
+ undo = self.wait_for_element_by_css_selector(undo_selector)
+ self.wait_for_text_to_equal(undo_selector, 'undo')
+ undo.click()
+
+ def click_redo(self):
+ redo_selector = '._dash-undo-redo span:last-child div:last-child'
+ self.wait_for_text_to_equal(redo_selector, 'redo')
+ redo = self.wait_for_element_by_css_selector(redo_selector)
+ redo.click()
+
+ def check_undo_redo_exist(self, has_undo, has_redo):
+ selector = '._dash-undo-redo span div:last-child'
+ els = self.driver.find_elements_by_css_selector(selector)
+ texts = (['undo'] if has_undo else []) + (['redo'] if has_redo else [])
+
+ self.assertEqual(len(els), len(texts))
+ for el, text in zip(els, texts):
+ self.assertEqual(el.text, text)
+
+ def test_undo_redo(self):
+ app = Dash(__name__, show_undo_redo=True)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ self.check_undo_redo_exist(True, False)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', 'x')
+ self.check_undo_redo_exist(True, True)
+
+ self.click_redo()
+ self.wait_for_text_to_equal('#b', 'xy')
+ self.check_undo_redo_exist(True, True)
+
+ self.percy_snapshot(name='undo-redo')
+
+ self.click_undo()
+ self.click_undo()
+ self.wait_for_text_to_equal('#b', '')
+ self.check_undo_redo_exist(False, True)
+
+ def test_no_undo_redo(self):
+ app = Dash(__name__)
+ app.layout = html.Div([dcc.Input(id='a'), html.Div(id='b')])
+
+ @app.callback(Output('b', 'children'), [Input('a', 'value')])
+ def set_b(a):
+ return a
+
+ self.startServer(app)
+
+ a = self.wait_for_element_by_css_selector('#a')
+ a.send_keys('xyz')
+
+ self.wait_for_text_to_equal('#b', 'xyz')
+ toolbar = self.driver.find_elements_by_css_selector('._dash-undo-redo')
+ self.assertEqual(len(toolbar), 0)
+
  def test_array_of_falsy_child(self):
  app = Dash(__name__)
  app.layout = html.Div(id='nully-wrapper', children=[0])
@@ -328,10 +402,9 @@ def update_input(value):
  '#react-entry-point').get_attribute('innerHTML'),
  'lxml').select_one('#output > div').contents
 
- self.assertTrue(
- pad_input.attrs == {'type': 'text', 'id': 'sub-input-1', 'value': 'sub input initial value'}
- and pad_input.name == 'input',
- "pad input is correctly rendered")
+ self.assertEqual(pad_input.attrs['value'], 'sub input initial value')
+ self.assertEqual(pad_input.attrs['id'], 'sub-input-1')
+ self.assertEqual(pad_input.name, 'input')
 
  self.assertTrue(
  pad_div.text == pad_input.attrs['value']