add migration tests

packages/grafana-ui/src/themes/_variables.scss.tmpl.ts

@@ -120,7 +120,7 @@ $headings-line-height: ${theme.typography.lineHeight.sm} !default;
 $border-width: ${theme.border.width.sm} !default;
 
 $border-radius: ${theme.border.radius.md} !default;
-$border-radius-lg: ${theme.border.radius.lg}!default;
+$border-radius-lg: ${theme.border.radius.lg} !default;
 $border-radius-sm: ${theme.border.radius.sm} !default;
 
 // Page
@@ -191,7 +191,6 @@ $btn-padding-y-lg: 11px !default;
 $btn-padding-x-xl: 21px !default;
 $btn-padding-y-xl: 11px !default;
 
-
 $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 
 // sidemenu

packages/grafana-ui/src/types/panel.ts

@@ -26,13 +26,21 @@ export interface PanelEditorProps<T = any> {
   onOptionsChange: (options: T) => void;
 }
 
-export type PreservePanelOptionsHandler<TOptions = any> = (pluginId: string, prevOptions: any) => Partial<TOptions>;
+/**
+ * Called before a panel is initalized
+ */
+export type PanelTypeChangedHook<TOptions = any> = (
+  options: Partial<TOptions>,
+  prevPluginId?: string,
+  prevOptions?: any
+) => Partial<TOptions>;
 
 export class ReactPanelPlugin<TOptions = any> {
   panel: ComponentClass<PanelProps<TOptions>>;
   editor?: ComponentClass<PanelEditorProps<TOptions>>;
   defaults?: TOptions;
-  preserveOptions?: PreservePanelOptionsHandler<TOptions>;
+
+  panelTypeChangedHook?: PanelTypeChangedHook<TOptions>;
 
   constructor(panel: ComponentClass<PanelProps<TOptions>>) {
     this.panel = panel;
@@ -46,8 +54,12 @@ export class ReactPanelPlugin<TOptions = any> {
     this.defaults = defaults;
   }
 
-  setPreserveOptionsHandler(handler: PreservePanelOptionsHandler<TOptions>) {
-    this.preserveOptions = handler;
+  /**
+   * Called when the visualization changes.
+   * Lets you keep whatever settings made sense in the previous panel
+   */
+  setPanelTypeChangedHook(v: PanelTypeChangedHook<TOptions>) {
+    this.panelTypeChangedHook = v;
   }
 }