ux(ds edit): combine save and test connection buttons, closes #4658

public/app/features/plugins/ds_edit_ctrl.ts

@@ -16,6 +16,8 @@ var defaults = {
   jsonData: {}
 };
 
+var datasourceCreated = false;
+
 export class DataSourceEditCtrl {
   isNew: boolean;
   datasources: any[];
@@ -66,6 +68,11 @@ export class DataSourceEditCtrl {
       this.backendSrv.get('/api/datasources/' + id).then(ds => {
         this.isNew = false;
         this.current = ds;
+
+        if (datasourceCreated) {
+          datasourceCreated = false;
+          this.testDatasource();
+        }
         return this.typeChanged();
       });
     }
@@ -123,14 +130,14 @@ export class DataSourceEditCtrl {
       if (this.current.id) {
         return this.backendSrv.put('/api/datasources/' + this.current.id, this.current).then(() => {
           this.updateFrontendSettings().then(() => {
-            if (test) {
-              this.testDatasource();
-            }
+            this.testDatasource();
           });
         });
       } else {
         return this.backendSrv.post('/api/datasources', this.current).then(result => {
           this.updateFrontendSettings();
+
+          datasourceCreated = true;
           this.$location.path('datasources/edit/' + result.id);
         });
       }

public/app/features/plugins/partials/ds_edit.html

@@ -25,7 +25,7 @@
 
   <div ng-if="ctrl.tabIndex === 0" class="tab-content">
 
-    <form name="ctrl.editForm">
+    <form name="ctrl.editForm" ng-if="ctrl.current">
       <div class="gf-form-group">
         <div class="gf-form-inline">
 					<div class="gf-form">
@@ -55,7 +55,6 @@
 
 			<div ng-if="ctrl.testing" style="margin-top: 25px">
 				<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-				<h5 ng-show="ctrl.testing.done">Test results</h5>
 				<div class="alert-{{ctrl.testing.status}} alert">
 					<div class="alert-title">{{ctrl.testing.title}}</div>
 					<div ng-bind='ctrl.testing.message'></div>
@@ -64,10 +63,7 @@
 
 			<div class="gf-form-button-row">
 				<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
-				<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save</button>
-				<button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
-					Test Connection
-				</button>
+				<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save &amp; Test</button>
 				<button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
 					Delete
 				</button>

public/sass/_variables.dark.scss

@@ -27,7 +27,7 @@ $white:            #fff;
 // -------------------------
 $blue:                  #33B5E5;
 $blue-dark:             #005f81;
-$green:                 #669900;
+$green:                 #609000;
 $red:                   #CC3900;
 $yellow:                #ECBB13;
 $pink:                  #FF4444;