Persistence improvements (#872)

* Persistence improvements

* Fix tests

Author: tcbegley

package-lock.json

@@ -55,7 +55,10 @@ const Alert = props => {
       className={class_name || className}
       transition={fade}
       style={!isBootstrapColor ? {backgroundColor: color, ...style} : style}
-      {...omit(['setProps'], otherProps)}
+      {...omit(
+        ['persistence', 'persisted_props', 'persistence_type', 'setProps'],
+        otherProps
+      )}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
@@ -68,7 +71,9 @@ const Alert = props => {
 Alert.defaultProps = {
   color: 'success',
   is_open: true,
-  duration: null
+  duration: null,
+  persisted_props: ['is_open'],
+  persistence_type: 'local'
 };
 
 Alert.propTypes = {
@@ -153,7 +158,36 @@ Alert.propTypes = {
      * Holds the name of the component that is loading
      */
     component_name: PropTypes.string
-  })
+  }),
+
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string,
+    PropTypes.number
+  ]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `value` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['is_open'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
 export default Alert;

src/components/alert/Alert.js

@@ -55,7 +55,10 @@ const Carousel = props => {
         activeIndex={active_index}
         onSelect={idx => setProps({active_index: idx})}
         interval={interval || null}
-        {...omit(['setProps'], otherProps)}
+        {...omit(
+          ['persistence', 'persisted_props', 'persistence_type', 'setProps'],
+          otherProps
+        )}
       >
         {slides}
       </RBCarousel>
@@ -66,7 +69,9 @@ const Carousel = props => {
 Carousel.defaultProps = {
   active_index: 0,
   controls: true,
-  indicators: true
+  indicators: true,
+  persisted_props: ['active_index'],
+  persistence_type: 'local'
 };
 
 Carousel.propTypes = {
@@ -202,6 +207,35 @@ Carousel.propTypes = {
     component_name: PropTypes.string
   }),
 
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string,
+    PropTypes.number
+  ]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `value` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['active_index'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
   /**
    * Dash-assigned callback that gets fired when the value changes.
    */

src/components/carousel/Carousel.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {omit} from 'ramda';
 
 import {PopoverTemplate} from '../../private/OverlayTemplates';
 import Overlay from '../../private/Overlay';
@@ -52,7 +53,10 @@ const Popover = props => {
       }
       defaultShow={is_open}
       popperConfig={popperConfig}
-      {...otherProps}
+      {...omit(
+        ['persistence', 'persisted_props', 'persistence_type'],
+        otherProps
+      )}
     >
       <PopoverTemplate
         // to ensure proper backwards compatibility, the toggle function is only
@@ -73,7 +77,9 @@ Popover.defaultProps = {
   delay: {show: 0, hide: 50},
   placement: 'right',
   flip: true,
-  autohide: false
+  autohide: false,
+  persisted_props: ['is_open'],
+  persistence_type: 'local'
 };
 
 Popover.propTypes = {
@@ -230,7 +236,36 @@ Popover.propTypes = {
      * Holds the name of the component that is loading
      */
     component_name: PropTypes.string
-  })
+  }),
+
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string,
+    PropTypes.number
+  ]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `value` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['is_open'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
 export default Popover;

src/components/popover/Popover.js

@@ -6,6 +6,8 @@ import React from 'react';
 import {render} from '@testing-library/react';
 import Popover from '../Popover';
 
+jest.useFakeTimers();
+
 // TODO - Add test for offset
 
 describe('Popover', () => {
@@ -38,6 +40,8 @@ describe('Popover', () => {
       container: document.body.appendChild(div)
     });
 
+    jest.runAllTimers();
+
     expect(document.body.querySelector('.popover.show')).not.toBe(null);
   });
 
@@ -46,6 +50,8 @@ describe('Popover', () => {
       container: document.body.appendChild(div)
     });
 
+    jest.runAllTimers();
+
     expect(document.body.querySelector('.popover.show')).toBe(null);
   });
 
@@ -54,6 +60,8 @@ describe('Popover', () => {
       container: document.body.appendChild(div)
     });
 
+    jest.runAllTimers();
+
     expect(document.body.querySelector('.popover.show')).not.toBe(null);
   });
 
@@ -65,6 +73,8 @@ describe('Popover', () => {
       {container: document.body.appendChild(div)}
     );
 
+    jest.runAllTimers();
+
     expect(document.body.querySelector('.popover')).toHaveTextContent(
       'Popover content'
     );
@@ -75,6 +85,8 @@ describe('Popover', () => {
       container: document.body.appendChild(div)
     });
 
+    jest.runAllTimers();
+
     expect(document.body.querySelector('.popover-arrow')).not.toBe(null);
   });
 
@@ -83,6 +95,8 @@ describe('Popover', () => {
       container: document.body.appendChild(div)
     });
 
+    jest.runAllTimers();
+
     expect(document.body.querySelector('.popover-arrow')).toBe(null);
   });
 
@@ -96,6 +110,8 @@ describe('Popover', () => {
       }
     );
 
+    jest.runAllTimers();
+
     expect(document.body.querySelector('.popover-body')).not.toBe(null);
   });
 
@@ -109,6 +125,8 @@ describe('Popover', () => {
       }
     );
 
+    jest.runAllTimers();
+
     expect(document.body.querySelector('.popover-body')).toBe(null);
   });
 });

src/components/popover/__tests__/Popover.test.js

@@ -241,7 +241,7 @@ Tabs.propTypes = {
 
   /**
    * Properties whose user interactions will persist after refreshing the
-   * component or the page. Since only `value` is allowed this prop can
+   * component or the page. Since only `active_tab` is allowed this prop can
    * normally be ignored.
    */
   persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['active_tab'])),

src/components/tabs/Tabs.js

@@ -64,7 +64,16 @@ const Toast = props => {
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
-      {...omit(['n_dismiss_timestamp'], otherProps)}
+      {...omit(
+        [
+          'n_dismiss_timestamp',
+          'persistence',
+          'persisted_props',
+          'persistence_type',
+          'setProps'
+        ],
+        otherProps
+      )}
     >
       <RBToast.Header
         style={header_style}
@@ -102,7 +111,9 @@ Toast.defaultProps = {
   is_open: true,
   n_dismiss: 0,
   n_dismiss_timestamp: -1,
-  dismissable: false
+  dismissable: false,
+  persisted_props: ['is_open'],
+  persistence_type: 'local'
 };
 
 Toast.propTypes = {
@@ -252,7 +263,36 @@ Toast.propTypes = {
      * Holds the name of the component that is loading
      */
     component_name: PropTypes.string
-  })
+  }),
+
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string,
+    PropTypes.number
+  ]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `value` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['is_open'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
 export default Toast;

src/components/toast/Toast.js

@@ -164,7 +164,7 @@ const Overlay = ({
 
   // Update the isOpen state, when defaultShow changes
   useEffect(() => {
-    setIsOpen(defaultShow);
+    setTimeout(() => setIsOpen(defaultShow), 50);
   }, [defaultShow]);
 
   // If legacy is a trigger, then need to set root close to true to allow