wip: another baby step, another million to go

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -107,7 +107,6 @@ export class DashboardPanel extends React.Component<Props, State> {
 
     // this might look strange with these classes that change when edit, but
     // I want to try to keep markup (parents) for panel the same in edit mode to avoide unmount / new mount of panel
-    // plugin component
     return (
       <div className={containerClass}>
         <div className={panelWrapperClass}>
@@ -124,6 +123,7 @@ export class DashboardPanel extends React.Component<Props, State> {
               panelType={this.props.panel.type}
               dashboard={this.props.dashboard}
               onTypeChanged={this.onPluginTypeChanged}
+              pluginExports={pluginExports}
             />
           </div>
         )}

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

@@ -5,13 +5,14 @@ import { DashboardModel } from '../dashboard_model';
 import { store } from 'app/stores/store';
 import { observer } from 'mobx-react';
 import { QueriesTab } from './QueriesTab';
-import { PanelPlugin } from 'app/types/plugins';
+import { PanelPlugin, PluginExports } from 'app/types/plugins';
 import { VizTypePicker } from './VizTypePicker';
 
 interface PanelEditorProps {
   panel: PanelModel;
   dashboard: DashboardModel;
   panelType: string;
+  pluginExports: PluginExports;
   onTypeChanged: (newType: PanelPlugin) => void;
 }
 
@@ -38,6 +39,17 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     return <QueriesTab panel={this.props.panel} dashboard={this.props.dashboard} />;
   }
 
+  renderPanelOptions() {
+    const { pluginExports } = this.props;
+
+    if (pluginExports.PanelOptions) {
+      const PanelOptions = pluginExports.PanelOptions;
+      return <PanelOptions />;
+    } else {
+      return <p>Visualization has no options</p>;
+    }
+  }
+
   renderVizTab() {
     return (
       <div className="viz-editor">
@@ -46,6 +58,7 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
         </div>
         <div className="viz-editor-col2">
           <h5 className="page-heading">Options</h5>
+          {this.renderPanelOptions()}
         </div>
       </div>
     );

public/app/plugins/panel/text2/module.tsx

@@ -18,4 +18,10 @@ export class ReactTestPanel extends PureComponent<PanelProps> {
   }
 }
 
-export { ReactTestPanel as PanelComponent };
+export class TextOptions extends PureComponent<any> {
+  render() {
+    return <p>Text2 Options component</p>;
+  }
+}
+
+export { ReactTestPanel as PanelComponent, TextOptions as PanelOptions };

public/app/types/plugins.ts

@@ -5,6 +5,7 @@ export interface PluginExports {
   QueryCtrl?: any;
   ConfigCtrl?: any;
   AnnotationsQueryCtrl?: any;
+  PanelOptions?: any;
 }
 
 export interface PanelPlugin {

public/sass/components/_viz_editor.scss

@@ -23,7 +23,7 @@
   padding-top: $spacer;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: auto;
   flex-grow: 1;
 }