[fix] Allow dashboard viewer auto refresh dashboard (#8014)

superset/assets/spec/javascripts/dashboard/components/HeaderActionsDropdown_spec.jsx

@@ -71,9 +71,9 @@ describe('HeaderActionsDropdown', () => {
       expect(wrapper.find(MenuItem)).toHaveLength(1);
     });
 
-    it('should not render the RefreshIntervalModal', () => {
+    it('should render the RefreshIntervalModal', () => {
       const wrapper = setup(overrideProps);
-      expect(wrapper.find(RefreshIntervalModal)).toHaveLength(0);
+      expect(wrapper.find(RefreshIntervalModal)).toHaveLength(1);
     });
 
     it('should render the URLShortLinkModal', () => {
@@ -105,9 +105,9 @@ describe('HeaderActionsDropdown', () => {
       expect(wrapper.find(MenuItem)).toHaveLength(2);
     });
 
-    it('should not render the RefreshIntervalModal', () => {
+    it('should render the RefreshIntervalModal', () => {
       const wrapper = setup(overrideProps);
-      expect(wrapper.find(RefreshIntervalModal)).toHaveLength(0);
+      expect(wrapper.find(RefreshIntervalModal)).toHaveLength(1);
     });
 
     it('should render the URLShortLinkModal', () => {

superset/assets/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx

@@ -25,6 +25,8 @@ describe('RefreshIntervalModal', () => {
   const mockedProps = {
     triggerNode: <i className="fa fa-edit" />,
     refreshFrequency: 10,
+    onChange: jest.fn(),
+    editMode: true,
   };
   it('is valid', () => {
     expect(
@@ -39,4 +41,10 @@ describe('RefreshIntervalModal', () => {
     const wrapper = mount(<RefreshIntervalModal {...mockedProps} />);
     expect(wrapper.prop('refreshFrequency')).toEqual(10);
   });
+  it('should change refreshFrequency with edit mode', () => {
+    const wrapper = mount(<RefreshIntervalModal {...mockedProps} />);
+    wrapper.instance().handleFrequencyChange({ value: 30 });
+    expect(mockedProps.onChange).toHaveBeenCalled();
+    expect(mockedProps.onChange).toHaveBeenCalledWith(30, mockedProps.editMode);
+  });
 });

superset/assets/src/dashboard/actions/dashboardState.js

@@ -151,8 +151,8 @@ export function onSave() {
 }
 
 export const SET_REFRESH_FREQUENCY = 'SET_REFRESH_FREQUENCY';
-export function setRefreshFrequency(refreshFrequency) {
-  return { type: SET_REFRESH_FREQUENCY, refreshFrequency };
+export function setRefreshFrequency(refreshFrequency, isPersistent = false) {
+  return { type: SET_REFRESH_FREQUENCY, refreshFrequency, isPersistent };
 }
 
 export function saveDashboardRequestSuccess() {

superset/assets/src/dashboard/components/HeaderActionsDropdown.jsx

@@ -103,8 +103,8 @@ class HeaderActionsDropdown extends React.PureComponent {
     this.props.updateCss(css);
   }
 
-  changeRefreshInterval(refreshInterval) {
-    this.props.setRefreshFrequency(refreshInterval);
+  changeRefreshInterval(refreshInterval, isPersistent) {
+    this.props.setRefreshFrequency(refreshInterval, isPersistent);
     this.props.startPeriodicRender(refreshInterval * 1000);
   }
 
@@ -177,13 +177,20 @@ class HeaderActionsDropdown extends React.PureComponent {
         <MenuItem onClick={forceRefreshAllCharts} disabled={isLoading}>
           {t('Force refresh dashboard')}
         </MenuItem>
-        {editMode && (
-          <RefreshIntervalModal
-            refreshFrequency={refreshFrequency}
-            onChange={this.changeRefreshInterval}
-            triggerNode={<span>{t('Set auto-refresh interval')}</span>}
-          />
-        )}
+
+        <RefreshIntervalModal
+          refreshFrequency={refreshFrequency}
+          onChange={this.changeRefreshInterval}
+          editMode={editMode}
+          triggerNode={
+            <span>
+              {editMode
+                ? t('Set auto-refresh interval')
+                : t('Auto-refresh dashboard')}
+            </span>
+          }
+        />
+
         {editMode && (
           <MenuItem target="_blank" href={`/dashboard/edit/${dashboardId}`}>
             {t('Edit dashboard metadata')}

superset/assets/src/dashboard/components/RefreshIntervalModal.jsx

@@ -27,6 +27,7 @@ const propTypes = {
   triggerNode: PropTypes.node.isRequired,
   refreshFrequency: PropTypes.number.isRequired,
   onChange: PropTypes.func.isRequired,
+  editMode: PropTypes.bool.isRequired,
 };
 
 const options = [
@@ -48,7 +49,17 @@ class RefreshIntervalModal extends React.PureComponent {
     this.state = {
       refreshFrequency: props.refreshFrequency,
     };
+    this.handleFrequencyChange = this.handleFrequencyChange.bind(this);
   }
+
+  handleFrequencyChange(opt) {
+    const value = opt ? opt.value : options[0].value;
+    this.setState({
+      refreshFrequency: value,
+    });
+    this.props.onChange(value, this.props.editMode);
+  }
+
   render() {
     return (
       <ModalTrigger
@@ -61,13 +72,7 @@ class RefreshIntervalModal extends React.PureComponent {
             <Select
               options={options}
               value={this.state.refreshFrequency}
-              onChange={opt => {
-                const value = opt ? opt.value : options[0].value;
-                this.setState({
-                  refreshFrequency: value,
-                });
-                this.props.onChange(value);
-              }}
+              onChange={this.handleFrequencyChange}
             />
           </div>
         }

superset/assets/src/dashboard/reducers/dashboardState.js

@@ -169,7 +169,7 @@ export default function dashboardStateReducer(state = {}, action) {
       return {
         ...state,
         refreshFrequency: action.refreshFrequency,
-        hasUnsavedChanges: true,
+        hasUnsavedChanges: action.isPersistent,
       };
     },
   };