wip: adding general tab for react panel edit mode

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

+import React, { PureComponent } from 'react';
+
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import { EditorTabBody } from './EditorTabBody';
+
+import { PanelModel } from '../panel_model';
+import { DashboardModel } from '../dashboard_model';
+
+interface Props {
+  panel: PanelModel;
+  dashboard: DashboardModel;
+}
+
+export class GeneralTab extends PureComponent<Props> {
+  element: any;
+  component: AngularComponent;
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    if (!this.element) {
+      return;
+    }
+
+    const { panel, dashboard } = this.props;
+
+    const loader = getAngularLoader();
+    const template = '<panel-general-tab />';
+    const scopeProps = {
+      ctrl: {
+        panel: panel,
+        dashboard: dashboard,
+      },
+    };
+
+    this.component = loader.load(this.element, scopeProps, template);
+  }
+
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  render() {
+    const currentDataSource = {
+      title: 'ProductionDB',
+      imgSrc: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg',
+      render: () => <h2>hello</h2>,
+    };
+
+    return (
+      <EditorTabBody main={currentDataSource} toolbarItems={[]}>
+        <div ref={element => (this.element = element)} style={{ width: '100%' }} />
+      </EditorTabBody>
+    );
+  }
+}

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

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { QueriesTab } from './QueriesTab';
 import { VisualizationTab } from './VisualizationTab';
+import { GeneralTab } from './GeneralTab';
 
 import { store } from 'app/store/store';
 import { updateLocation } from 'app/core/actions';
@@ -31,9 +32,9 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
     super(props);
 
     this.tabs = [
+      { id: 'general', text: 'General', icon: 'gicon gicon-preferences' },
       { id: 'queries', text: 'Queries', icon: 'fa fa-database' },
       { id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' },
-      { id: 'alert', text: 'Alert', icon: 'gicon gicon-alert' },
     ];
   }
 
@@ -81,6 +82,7 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
           </button>
         </div>
 
+        {activeTab === 'general' && <GeneralTab panel={panel} dashboard={dashboard} />}
         {activeTab === 'queries' && <QueriesTab panel={panel} dashboard={dashboard} />}
         {activeTab === 'visualization' && (
           <VisualizationTab panel={panel} dashboard={dashboard} plugin={plugin} onTypeChanged={onTypeChanged} />

public/app/features/panel/GeneralTabCtrl.ts

+import coreModule from 'app/core/core_module';
+import { DashboardModel } from '../dashboard/dashboard_model';
+
+export class GeneralTabCtrl {
+  panelCtrl: any;
+
+  /** @ngInject */
+  constructor($scope) {
+    this.panelCtrl = $scope.ctrl;
+  }
+}
+
+/** @ngInject */
+export function generalTab() {
+  'use strict';
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/panel/partials/general_tab.html',
+    controller: GeneralTabCtrl,
+  };
+}
+
+coreModule.directive('panelGeneralTab', generalTab);

public/app/features/panel/panel_ctrl.ts

@@ -12,6 +12,8 @@ import {
   sharePanel as sharePanelUtil,
 } from 'app/features/dashboard/utils/panel';
 
+import { generalTab } from './GeneralTabCtrl';
+
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
 
 export class PanelCtrl {
@@ -91,7 +93,7 @@ export class PanelCtrl {
 
   initEditMode() {
     this.editorTabs = [];
-    this.addEditorTab('General', 'public/app/partials/panelgeneral.html');
+    this.addEditorTab('General', generalTab);
 
     this.editModeInitiated = true;
     this.events.emit('init-edit-mode', null);