Merge branch 'panel-edit-in-react' of https://github.com/grafana/grafana into panel-edit-in-react

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

@@ -81,7 +81,14 @@ export class VisualizationTab extends PureComponent<Props> {
 
     let template = '';
     for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
-      template += '<panel-editor-tab editor-tab="ctrl.editorTabs[' + i + ']" ctrl="ctrl"></panel-editor-tab>';
+      template += `
+      <div class="form-section" ng-cloak>
+        <div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>
+        <div class="form-section__body">
+          <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
+        </div>
+      </div>
+      `;
     }
 
     const loader = getAngularLoader();

public/app/features/dashboard/utils/getPanelMenu.ts

@@ -12,7 +12,7 @@ export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => {
       updateLocation({
         query: {
           panelId: panel.id,
-          edit: false,
+          edit: null,
           fullscreen: true,
         },
         partial: true,

public/app/plugins/panel/graph/module.ts

@@ -135,9 +135,9 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onInitEditMode() {
-    this.addEditorTab('Axes', axesEditorComponent, 2);
-    this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html', 3);
-    this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
+    this.addEditorTab('Display options', 'public/app/plugins/panel/graph/tab_display.html');
+    this.addEditorTab('Axes', axesEditorComponent);
+    this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html');
 
     // if (config.alertingEnabled) {
     //   this.addEditorTab('Alert', alertTab, 5);

public/sass/components/_panel_editor.scss

@@ -20,11 +20,10 @@
   flex-grow: 1;
   min-width: 0;
   display: flex;
-  padding: 0 5px;
 }
 
 .panel-editor__content {
-  padding: 40px 15px;
+  padding: 40px 20px;
 }
 
 .panel-in-fullscreen {
@@ -206,3 +205,19 @@
   font-size: $font-size-md;
   margin-bottom: 20px;
 }
+
+.form-section {
+  margin-bottom: 10px;
+}
+
+.form-section__header {
+  padding: 5px 10px;
+  font-size: $font-size-h5;
+  margin-bottom: 20px;
+  background: $input-label-bg;
+  border-radius: 3px;
+}
+
+.form-section__body {
+  padding: 0 10px;
+}