New Editor: refresh when time values change (#22049)

packages/grafana-ui/src/components/FieldConfigs/units.tsx

@@ -11,12 +11,12 @@ export const UnitValueEditor: React.FC<FieldConfigEditorProps<string, UnitFieldC
   value,
   onChange,
 }) => {
-  return <UnitPicker value={value} onChange={onChange} />;
+  return <UnitPicker value={value} onChange={onChange} useNewForms />;
 };
 
 export const UnitOverrideEditor: React.FC<FieldOverrideEditorProps<string, UnitFieldConfigSettings>> = ({
   value,
   onChange,
 }) => {
-  return <UnitPicker value={value} onChange={onChange} />;
+  return <UnitPicker value={value} onChange={onChange} useNewForms />;
 };

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -7,6 +7,7 @@ import {
   DefaultTimeRange,
   PanelEvents,
   SelectableValue,
+  TimeRange,
 } from '@grafana/data';
 import {
   stylesFactory,
@@ -33,6 +34,8 @@ import { Unsubscribable } from 'rxjs';
 import { PanelTitle } from './PanelTitle';
 import { DisplayMode, displayModes } from './types';
 import { PanelEditorTabs } from './PanelEditorTabs';
+import { DashNavTimeControls } from '../DashNav/DashNavTimeControls';
+import { LocationState, CoreEvents } from 'app/types';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const handleColor = selectThemeVariant(
@@ -111,6 +114,7 @@ interface Props {
   dashboard: DashboardModel;
   sourcePanel: PanelModel;
   updateLocation: typeof updateLocation;
+  location: LocationState;
 }
 
 interface State {
@@ -147,11 +151,16 @@ export class PanelEditor extends PureComponent<Props, State> {
     const { sourcePanel } = this.props;
     const { panel } = this.state;
     panel.events.on(PanelEvents.panelInitialized, () => {
+      const { panel } = this.state;
+      if (panel.angularPanel) {
+        console.log('Refresh angular panel in new editor');
+      }
       this.setState(state => ({
         pluginLoadedCounter: state.pluginLoadedCounter + 1,
       }));
     });
-    // Get data from any pending
+
+    // Get data from any pending queries
     sourcePanel
       .getQueryRunner()
       .getData()
@@ -167,6 +176,9 @@ export class PanelEditor extends PureComponent<Props, State> {
     this.querySubscription = queryRunner.getData().subscribe({
       next: (data: PanelData) => this.setState({ data }),
     });
+
+    // Listen to timepicker changes
+    this.props.dashboard.on(CoreEvents.timeRangeUpdated, this.onTimeRangeUpdated);
   }
 
   componentWillUnmount() {
@@ -174,8 +186,18 @@ export class PanelEditor extends PureComponent<Props, State> {
       this.querySubscription.unsubscribe();
     }
     //this.cleanUpAngularOptions();
+
+    // Remove the time listener
+    this.props.dashboard.off(CoreEvents.timeRangeUpdated, this.onTimeRangeUpdated);
   }
 
+  onTimeRangeUpdated = (timeRange: TimeRange) => {
+    const { panel } = this.state;
+    if (panel) {
+      panel.refresh();
+    }
+  };
+
   onPanelUpdate = () => {
     const { panel } = this.state;
     const { dashboard } = this.props;
@@ -320,6 +342,7 @@ export class PanelEditor extends PureComponent<Props, State> {
   }
 
   render() {
+    const { dashboard, location } = this.props;
     const { panel, mode, showPanelOptions } = this.state;
     const styles = getStyles(config.theme);
 
@@ -346,6 +369,10 @@ export class PanelEditor extends PureComponent<Props, State> {
             <Forms.Button variant="destructive" onClick={this.onDiscard}>
               Discard
             </Forms.Button>
+
+            <div>
+              <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
+            </div>
           </div>
         </div>
         <div className={styles.panes}>