Minor refactoring of new react text panel

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

@@ -1,9 +1,11 @@
+// Libraries
 import React, { PureComponent } from 'react';
-
 import Remarkable from 'remarkable';
+import { debounce } from 'lodash';
+
+// Utils
 import { sanitize } from 'app/core/utils/text';
 import config from 'app/core/config';
-import { debounce } from 'lodash';
 
 // Types
 import { TextOptions } from './types';
@@ -42,13 +44,8 @@ export class TextPanel extends PureComponent<Props, State> {
     const { replaceVariables } = this.props;
 
     html = config.disableSanitizeHtml ? html : sanitize(html);
-    try {
-      return replaceVariables(html);
-    } catch (e) {
-      // TODO -- put the error in the header window
-      console.log('Text panel error: ', e);
-      return html;
-    }
+
+    return replaceVariables(html);
   }
 
   prepareText(content: string): string {

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

@@ -1,6 +1,10 @@
-import React, { PureComponent } from 'react';
+// Libraries
+import React, { PureComponent, ChangeEvent } from 'react';
+
+// Components
 import { PanelEditorProps, PanelOptionsGroup, Select, SelectOptionItem } from '@grafana/ui';
 
+// Types
 import { TextOptions } from './types';
 
 export class TextPanelEditor extends PureComponent<PanelEditorProps<TextOptions>> {
@@ -12,19 +16,21 @@ export class TextPanelEditor extends PureComponent<PanelEditorProps<TextOptions>
 
   onModeChange = (item: SelectOptionItem) => this.props.onOptionsChange({ ...this.props.options, mode: item.value });
 
-  onContentChange = evt => this.props.onOptionsChange({ ...this.props.options, content: (event.target as any).value });
+  onContentChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
+    this.props.onOptionsChange({ ...this.props.options, content: (event.target as any).value });
+  };
 
   render() {
     const { mode, content } = this.props.options;
 
     return (
       <PanelOptionsGroup title="Text">
-        <div className="gf-form">
-          <span className="gf-form-label">Mode</span>
-          <Select onChange={this.onModeChange} value={this.modes.find(e => mode === e.value)} options={this.modes} />
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <span className="gf-form-label">Mode</span>
+            <Select onChange={this.onModeChange} value={this.modes.find(e => mode === e.value)} options={this.modes} />
+          </div>
         </div>
-
-        {/* TODO: <code-editor */}
         <textarea value={content} onChange={this.onContentChange} className="gf-form-input" rows={10} />
       </PanelOptionsGroup>
     );