Dashboard: Fix Editing a panel with auto-refresh enabled auto-refresh in the edit screen (#34128)

* Dashboard: Fix editing panel with auto-refresh

- Add default hidden and disabled auto-refresh option on the editing panel
- Extend unit test for DashboardModel
- Add unit test DashNavTimeControls component

public/app/features/dashboard/components/DashNav/DashNavTimeControls.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DashNavTimeControls } from './DashNavTimeControls';
+import { DashboardModel } from '../../state/DashboardModel';
+import { getDashboardModel } from '../../../../../test/helpers/getDashboardModel';
+
+describe('DashNavTimeControls', () => {
+  let dashboardModel: DashboardModel;
+
+  beforeEach(() => {
+    const json = {
+      panels: [
+        {
+          datasource: null,
+          gridPos: {
+            h: 3,
+            w: 24,
+            x: 0,
+            y: 8,
+          },
+          id: 1,
+          type: 'welcome',
+        },
+      ],
+      refresh: '',
+      templating: {
+        list: [],
+      },
+    };
+    dashboardModel = getDashboardModel(json);
+  });
+
+  it('renders RefreshPicker with run button in panel view', () => {
+    const container = render(
+      <DashNavTimeControls dashboard={dashboardModel} onChangeTimeZone={jest.fn()} key="time-controls" />
+    );
+    expect(container.queryByLabelText(/RefreshPicker run button/i)).toBeInTheDocument();
+  });
+
+  it('renders RefreshPicker with interval button in panel view', () => {
+    const container = render(
+      <DashNavTimeControls dashboard={dashboardModel} onChangeTimeZone={jest.fn()} key="time-controls" />
+    );
+    expect(container.queryByLabelText(/RefreshPicker interval button/i)).toBeInTheDocument();
+  });
+
+  it('should not render RefreshPicker interval button in panel edit', () => {
+    const panel: any = { destroy: jest.fn(), isEditing: true };
+    dashboardModel.startRefresh = jest.fn();
+    dashboardModel.panelInEdit = panel;
+    const container = render(
+      <DashNavTimeControls dashboard={dashboardModel} onChangeTimeZone={jest.fn()} key="time-controls" />
+    );
+    expect(container.queryByLabelText(/RefreshPicker interval button/i)).not.toBeInTheDocument();
+  });
+
+  it('should render RefreshPicker run button in panel edit', () => {
+    const panel: any = { destroy: jest.fn(), isEditing: true };
+    dashboardModel.startRefresh = jest.fn();
+    dashboardModel.panelInEdit = panel;
+    const container = render(
+      <DashNavTimeControls dashboard={dashboardModel} onChangeTimeZone={jest.fn()} key="time-controls" />
+    );
+    expect(container.queryByLabelText(/RefreshPicker run button/i)).toBeInTheDocument();
+  });
+});

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -88,6 +88,7 @@ export class DashNavTimeControls extends Component<Props> {
     const timePickerValue = getTimeSrv().timeRange();
     const timeZone = dashboard.getTimezone();
     const styles = getStyles();
+    const hideIntervalPicker = dashboard.panelInEdit?.isEditing;
 
     return (
       <div className={styles.container}>
@@ -106,6 +107,7 @@ export class DashNavTimeControls extends Component<Props> {
           value={dashboard.refresh}
           intervals={intervals}
           tooltip="Refresh dashboard"
+          noIntervalPicker={hideIntervalPicker}
         />
       </div>
     );