From 211e0f2199f67184f7d010c4999f2e6fb6f671a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 11 Jul 2018 12:11:21 -0700
Subject: [PATCH] wip: another baby step, another million to go

---
 .../dashboard/dashgrid/DashboardPanel.tsx         |  2 +-
 .../features/dashboard/dashgrid/PanelEditor.tsx   | 15 ++++++++++++++-
 public/app/plugins/panel/text2/module.tsx         |  8 +++++++-
 public/app/types/plugins.ts                       |  1 +
 public/sass/components/_viz_editor.scss           |  2 +-
 5 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index bec0a6e6dbe..4b2e81b969c 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/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>
         )}
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index f2b71837822..70b5bf11815 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/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>
     );
diff --git a/public/app/plugins/panel/text2/module.tsx b/public/app/plugins/panel/text2/module.tsx
index 20b6be4ca72..703a9897c6f 100644
--- a/public/app/plugins/panel/text2/module.tsx
+++ b/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 };
diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts
index 9f0208463b9..53d7b2c51c9 100644
--- a/public/app/types/plugins.ts
+++ b/public/app/types/plugins.ts
@@ -5,6 +5,7 @@ export interface PluginExports {
   QueryCtrl?: any;
   ConfigCtrl?: any;
   AnnotationsQueryCtrl?: any;
+  PanelOptions?: any;
 }
 
 export interface PanelPlugin {
diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss
index 7d69813ebd5..3658c869d6d 100644
--- a/public/sass/components/_viz_editor.scss
+++ b/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;
 }