Minor refactoring of EditorTabBody

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

@@ -1,12 +1,19 @@
+// Libraries
 import React, { PureComponent } from 'react';
+
+// Services & Utils
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
-import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
+import appEvents from 'app/core/app_events';
+
+// Components
+import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
-import appEvents from 'app/core/app_events';
-import { PanelModel } from '../panel_model';
 import 'app/features/alerting/AlertTabCtrl';
+
+// Types
 import { DashboardModel } from '../dashboard_model';
+import { PanelModel } from '../panel_model';
 
 interface Props {
   angularPanel?: AngularComponent;
@@ -77,7 +84,6 @@ export class AlertTab extends PureComponent<Props> {
           />
         );
       },
-      buttonType: ToolbarButtonType.View,
     };
   };
 
@@ -85,7 +91,7 @@ export class AlertTab extends PureComponent<Props> {
     const { panel } = this.props;
     return {
       title: 'Delete',
-      icon: 'fa fa-trash',
+      btnType: 'danger',
       onClick: () => {
         appEvents.emit('confirm-modal', {
           title: 'Delete Alert',
@@ -102,7 +108,6 @@ export class AlertTab extends PureComponent<Props> {
           },
         });
       },
-      buttonType: ToolbarButtonType.Action,
     };
   };
 

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

@@ -13,21 +13,15 @@ interface Props {
   toolbarItems?: EditorToolbarView[];
 }
 
-export enum ToolbarButtonType {
-  Action = 'action',
-  View = 'view',
-}
-
 export interface EditorToolbarView {
   title?: string;
   heading?: string;
-  imgSrc?: string;
   icon?: string;
   disabled?: boolean;
   onClick?: () => void;
   render?: () => JSX.Element;
   action?: () => void;
-  buttonType: ToolbarButtonType;
+  btnType?: 'danger';
 }
 
 interface State {
@@ -87,7 +81,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
         view.onClick();
       }
 
-      if (view.buttonType !== ToolbarButtonType.Action) {
+      if (view.render) {
         this.onToggleToolBarView(view);
       }
     };

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

@@ -1,19 +1,22 @@
 // Libraries
 import React, { PureComponent, SFC } from 'react';
 import _ from 'lodash';
+
 // Components
-import './../../panel/metrics_tab';
-import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
+import 'app/features/panel/metrics_tab';
+import { EditorTabBody, EditorToolbarView} 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 { 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';
@@ -204,14 +207,12 @@ export class QueriesTab extends PureComponent<Props, State> {
     const queryInspector: EditorToolbarView = {
       title: 'Query Inspector',
       render: this.renderQueryInspector,
-      buttonType: ToolbarButtonType.View,
     };
 
     const dsHelp: EditorToolbarView = {
       heading: 'Help',
       icon: 'fa fa-question',
       render: this.renderHelp,
-      buttonType: ToolbarButtonType.View,
     };
 
     return (

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

@@ -1,13 +1,16 @@
 // Libraries
 import React, { PureComponent } from 'react';
+
 // Utils & Services
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
+
 // Components
-import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
+import { EditorTabBody, EditorToolbarView } 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';
@@ -207,7 +210,6 @@ export class VisualizationTab extends PureComponent<Props, State> {
       heading: 'Help',
       icon: 'fa fa-question',
       render: this.renderHelp,
-      buttonType: ToolbarButtonType.View,
     };
 
     return (