fix(notifications): added form validation and restored Send Test button which was always hidden, #6159

public/app/features/alerting/notification_edit_ctrl.ts

@@ -7,6 +7,7 @@ import config from 'app/core/config';
 
 export class AlertNotificationEditCtrl {
   model: any;
+  theForm: any;
   testSeverity: string = "critical";
 
   /** @ngInject */
@@ -35,6 +36,10 @@ export class AlertNotificationEditCtrl {
   }
 
   save() {
+    if (!this.theForm.$valid) {
+      return;
+    }
+
     if (this.model.id) {
       this.backendSrv.put(`/api/alert-notifications/${this.model.id}`, this.model).then(res => {
         this.model = res;
@@ -53,6 +58,10 @@ export class AlertNotificationEditCtrl {
   }
 
   testNotification() {
+    if (!this.theForm.$valid) {
+      return;
+    }
+
     var payload = {
       name: this.model.name,
       type: this.model.type,

public/app/features/alerting/partials/notification_edit.html

@@ -6,78 +6,73 @@
 </navbar>
 
 <div class="page-container" >
-	<div class="page-header">
-		<h1>Alert notification</h1>
+  <div class="page-header">
+    <h1>Alert notification</h1>
   </div>
 
-	<div class="gf-form-group">
-		<div class="gf-form">
-			<span class="gf-form-label width-12">Name</span>
-			<input type="text" class="gf-form-input max-width-15" ng-model="ctrl.model.name" required></input>
-		</div>
-		<div class="gf-form">
-			<span class="gf-form-label width-12">Type</span>
-			<div class="gf-form-select-wrapper width-15">
-				<select class="gf-form-input"
-					ng-model="ctrl.model.type"
-					ng-options="t for t in ['webhook', 'email', 'slack']"
-					ng-change="ctrl.typeChanged(notification, $index)">
-				</select>
-			</div>
-		</div>
-		<div class="gf-form">
-			<gf-form-switch
-				class="gf-form"
-				label="Send on all alerts"
-				label-class="width-12"
-				checked="ctrl.model.isDefault"
-				tooltip="Use this notification for all alerts">
-			</gf-form-switch>
-		</div>
-	</div>
+  <form name="ctrl.theForm">
+    <div class="gf-form-group">
+      <div class="gf-form">
+        <span class="gf-form-label width-12">Name</span>
+        <input type="text" required class="gf-form-input max-width-15" ng-model="ctrl.model.name" required></input>
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label width-12">Type</span>
+        <div class="gf-form-select-wrapper width-15">
+          <select class="gf-form-input" ng-model="ctrl.model.type" ng-options="t for t in ['webhook', 'email', 'slack']" ng-change="ctrl.typeChanged(notification, $index)">
+          </select>
+        </div>
+      </div>
+      <div class="gf-form">
+        <gf-form-switch class="gf-form" label="Send on all alerts" label-class="width-12" checked="ctrl.model.isDefault" tooltip="Use this notification for all alerts">
+        </gf-form-switch>
+      </div>
+    </div>
 
-	<div class="gf-form-group" ng-show="ctrl.model.type === 'webhook'">
-    <h3 class="page-heading">Webhook settings</h3>
-		<div class="gf-form">
-			<span class="gf-form-label width-6">Url</span>
-			<input type="text" class="gf-form-input max-width-26" ng-model="ctrl.model.settings.url"></input>
-		</div>
-		<div class="gf-form-inline">
-			<div class="gf-form">
-				<span class="gf-form-label width-6">Username</span>
-				<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.username"></input>
-			</div>
-			<div class="gf-form">
-				<span class="gf-form-label width-6">Password</span>
-				<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.password"></input>
-			</div>
-		</div>
-	</div>
+    <div class="gf-form-group" ng-if="ctrl.model.type === 'webhook'">
+      <h3 class="page-heading">Webhook settings</h3>
+      <div class="gf-form">
+        <span class="gf-form-label width-6">Url</span>
+        <input type="text" required class="gf-form-input max-width-26" ng-model="ctrl.model.settings.url"></input>
+      </div>
+      <div class="gf-form-inline">
+        <div class="gf-form">
+          <span class="gf-form-label width-6">Username</span>
+          <input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.username"></input>
+        </div>
+        <div class="gf-form">
+          <span class="gf-form-label width-6">Password</span>
+          <input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.password"></input>
+        </div>
+      </div>
+    </div>
 
-  <div class="gf-form-group" ng-show="ctrl.model.type === 'slack'">
-    <h3 class="page-heading">Slack settings</h3>
-		<div class="gf-form">
-			<span class="gf-form-label width-6">Url</span>
-			<input type="text" class="gf-form-input max-width-30" ng-model="ctrl.model.settings.url" placeholder="Slack incoming webhook url"></input>
-		</div>
-	</div>
+    <div class="gf-form-group" ng-if="ctrl.model.type === 'slack'">
+      <h3 class="page-heading">Slack settings</h3>
+      <div class="gf-form">
+        <span class="gf-form-label width-6">Url</span>
+        <input type="text" required class="gf-form-input max-width-30" ng-model="ctrl.model.settings.url" placeholder="Slack incoming webhook url"></input>
+      </div>
+    </div>
 
-	<div class="gf-form-group section" ng-show="ctrl.model.type === 'email'">
-    <h3 class="page-heading">Email addresses</h3>
-		<div class="gf-form">
-      <textarea rows="7" class="gf-form-input width-25" ng-model="ctrl.model.settings.addresses"></textarea>
-		</div>
-	</div>
+    <div class="gf-form-group section" ng-if="ctrl.model.type === 'email'">
+      <h3 class="page-heading">Email addresses</h3>
+      <div class="gf-form">
+        <textarea rows="7" class="gf-form-input width-25" required ng-model="ctrl.model.settings.addresses"></textarea>
+      </div>
+    </div>
 
-  <div class="gf-form-group">
-		<div class="gf-form-inline">
-			<div class="gf-form width-6">
-				<button ng-click="ctrl.save()" class="btn btn-success">Save</button>
-			</div>
-			<div class="gf-form width-20">
-			<div class="gf-form" ng-show="ctrl.showTest">
-				<button ng-click="ctrl.testNotification()" class="btn btn-secondary">Send</button>
-			</div>
-		</div>
-	</div>
+    <div class="gf-form-group">
+      <div class="gf-form-inline">
+        <div class="gf-form width-6">
+          <button type="submit" ng-click="ctrl.save()" class="btn btn-success">Save</button>
+        </div>
+        <div class="gf-form width-20">
+          <div class="gf-form">
+            <button type="submit" ng-click="ctrl.testNotification()" class="btn btn-secondary">Send Test</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
 </div>

public/app/features/plugins/ds_edit_ctrl.ts

@@ -122,7 +122,7 @@ export class DataSourceEditCtrl {
       });
     }
 
-    saveChanges(test) {
+    saveChanges() {
       if (!this.editForm.$valid) {
         return;
       }