typings and renamings

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
-import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
-import { EditorTabBody } from './EditorTabBody';
+import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
+import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
 import 'app/features/alerting/AlertTabCtrl';
 import { PanelModel } from '../panel_model';
 
@@ -67,11 +67,12 @@ export class AlertTab extends PureComponent<Props> {
   render() {
     const { alert } = this.props.panel;
 
-    const stateHistory = {
+    const stateHistory: EditorToolbarView = {
       title: 'State history',
       render: () => {
         return <div>State history</div>;
       },
+      buttonType: ToolbarButtonType.View,
     };
 
     const deleteAlert = {
@@ -79,6 +80,7 @@ export class AlertTab extends PureComponent<Props> {
       render: () => {
         return <div>Hello</div>;
       },
+      buttonType: ToolbarButtonType.Action,
     };
 
     const toolbarItems = alert ? [deleteAlert, stateHistory] : [];

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

@@ -10,21 +10,28 @@ interface Props {
   children: JSX.Element;
   heading: string;
   renderToolbar?: () => JSX.Element;
-  toolbarItems?: EditorToolBarView[];
+  toolbarItems?: EditorToolbarView[];
 }
 
-export interface EditorToolBarView {
+export enum ToolbarButtonType {
+  Action = 'action',
+  View = 'view',
+}
+
+export interface EditorToolbarView {
   title?: string;
   heading?: string;
   imgSrc?: string;
   icon?: string;
   disabled?: boolean;
   onClick?: () => void;
-  render: (closeFunction?: any) => JSX.Element | JSX.Element[];
+  render?: (closeFunction?: any) => JSX.Element | JSX.Element[];
+  action?: () => void;
+  buttonType: ToolbarButtonType;
 }
 
 interface State {
-  openView?: EditorToolBarView;
+  openView?: EditorToolbarView;
   isOpen: boolean;
   fadeIn: boolean;
 }
@@ -48,7 +55,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     this.setState({ fadeIn: true });
   }
 
-  onToggleToolBarView = (item: EditorToolBarView) => {
+  onToggleToolBarView = (item: EditorToolbarView) => {
     this.setState({
       openView: item,
       isOpen: !this.state.isOpen,
@@ -74,12 +81,15 @@ export class EditorTabBody extends PureComponent<Props, State> {
     return state;
   }
 
-  renderButton(view: EditorToolBarView) {
+  renderButton(view: EditorToolbarView) {
     const onClick = () => {
       if (view.onClick) {
         view.onClick();
       }
-      this.onToggleToolBarView(view);
+
+      if (view.buttonType !== ToolbarButtonType.Action) {
+        this.onToggleToolBarView(view);
+      }
     };
 
     return (
@@ -91,7 +101,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     );
   }
 
-  renderOpenView(view: EditorToolBarView) {
+  renderOpenView(view: EditorToolbarView) {
     return (
       <PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}>
         {view.render()}

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

@@ -1,26 +1,23 @@
 // Libraries
-import React, { SFC, PureComponent } from 'react';
+import React, { PureComponent, SFC } from 'react';
 import _ from 'lodash';
-
 // Components
 import './../../panel/metrics_tab';
-import { EditorTabBody } from './EditorTabBody';
+import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
 import { PanelOptionSection } from './PanelOptionSection';
-
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
-import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
-import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import { BackendSrv, getBackendSrv } from 'app/core/services/backend_srv';
+import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 import config from 'app/core/config';
-
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { DataSourceSelectItem, DataQuery } from 'app/types';
+import { DataQuery, DataSourceSelectItem } from 'app/types';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 
 interface Props {
@@ -204,15 +201,17 @@ export class QueriesTab extends PureComponent<Props, State> {
     const { panel } = this.props;
     const { currentDS, isAddingMixed } = this.state;
 
-    const queryInspector = {
+    const queryInspector: EditorToolbarView = {
       title: 'Query Inspector',
       render: this.renderQueryInspector,
+      buttonType: ToolbarButtonType.View,
     };
 
-    const dsHelp = {
+    const dsHelp: EditorToolbarView = {
       heading: 'Help',
       icon: 'fa fa-question',
       render: this.renderHelp,
+      buttonType: ToolbarButtonType.View,
     };
 
     return (

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

@@ -1,16 +1,13 @@
 // Libraries
 import React, { PureComponent } from 'react';
-
 // Utils & Services
-import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
-
+import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 // Components
-import { EditorTabBody } from './EditorTabBody';
+import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 import { PanelOptionSection } from './PanelOptionSection';
-
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
@@ -206,10 +203,11 @@ export class VisualizationTab extends PureComponent<Props, State> {
     const { plugin } = this.props;
     const { isVizPickerOpen, searchQuery } = this.state;
 
-    const pluginHelp = {
+    const pluginHelp: EditorToolbarView = {
       heading: 'Help',
       icon: 'fa fa-question',
       render: this.renderHelp,
+      buttonType: ToolbarButtonType.View,
     };
 
     return (