gchat notification (#260)

ludeknovy · Jul 28, 2022 · 815b17e · 815b17e
1 parent 2e9526c
commit 815b17e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 9 deletions.
diff --git a/...l-notification/add-new-external-notification/add-new-external-notification.component.html b/...l-notification/add-new-external-notification/add-new-external-notification.component.html
@@ -1,28 +1,41 @@
 <ng-template #content let-modal>
   <div class="modal-header">
     <h5 class="modal-title" id="modal-basic-title">MS Teams Webhook</h5>
-    <button type="button" style="outline: none;" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
+    <button type="button" style="outline: none;" class="close" aria-label="Close"
+            (click)="modal.dismiss('Cross click')">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
   <form [formGroup]="myform" (ngSubmit)="onSubmit()">
     <div class="modal-body">
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary" role="alert" *ngIf="helpUrl">
         <i class="fas fa-info-circle"> </i>
-        Follow the instructions on how to set up <a href="https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook#add-an-incoming-webhook-to-a-teams-channel">Incoming Webhook</a> for a channel.
+        Follow the instructions on how to set up <a target="_blank"
+        href="{{helpUrl}}">Incoming
+        Webhook</a> for a channel.
       </div>
       <p class="text-secondary"></p>
+
+      <select class="custom-select mb-3" (change)="changeNotification($event)"  formControlName="notificationType">
+        <option value="">Choose notification type</option>
+        <option *ngFor="let notification of notifications" [value]="notification">
+          {{ notification }}
+        </option>
+      </select>
+
       <div class="input-group mb-3">
         <div class="input-group-prepend">
           <span class="input-group-text" id="inputGroup-sizing-default">Webhook Url</span>
         </div>
-        <input type="input" class="form-control" formControlName="url" aria-label="Default" aria-describedby="inputGroup-sizing-default">
+        <input type="input" class="form-control" formControlName="url" aria-label="Default"
+               aria-describedby="inputGroup-sizing-default">
       </div>
       <div class="input-group mb-3">
         <div class="input-group-prepend">
           <span class="input-group-text" id="inputGroup-sizing-default">Name</span>
         </div>
-        <input type="input" class="form-control" formControlName="name" aria-label="Default" aria-describedby="inputGroup-sizing-default">
+        <input type="input" class="form-control" formControlName="name" aria-label="Default"
+               aria-describedby="inputGroup-sizing-default">
       </div>
       <div class="form-control-feedback" *ngIf="url.errors && (url.dirty || url.touched)">
         <p class="alert alert-danger" *ngIf="url.errors.required">Webhook Url required</p>
@@ -41,4 +54,5 @@ <h5 class="modal-title" id="modal-basic-title">MS Teams Webhook</h5>
 
 </ng-template>
 
-<button class="notification btn btn-sm jtl-btn-light jtl-no-glow" (click)="open(content)">Add MS Teams notification</button>
+<button class="notification btn btn-sm jtl-btn-light jtl-no-glow" (click)="open(content)">Add notification
+</button>
diff --git a/...nal-notification/add-new-external-notification/add-new-external-notification.component.ts b/...nal-notification/add-new-external-notification/add-new-external-notification.component.ts
@@ -13,11 +13,17 @@ import { ScenarioService } from "src/app/scenario.service";
   styleUrls: ["./add-new-external-notification.component.css"]
 })
 export class AddNewExternalNotificationComponent implements OnInit {
+  notificationConfig = new Map([
+    ["MS Teams", { key: "ms-teams", helpUrl: "https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook#add-an-incoming-webhook-to-a-teams-channel" }],
+    ["GChat", { key: "gchat", helpUrl: "https://developers.google.com/chat/how-tos/webhooks#create_a_webhook" }]])
 
   myform: FormGroup;
   url;
   name;
+  notificationType;
   modal: NgbActiveModal;
+  notifications: string[] = Array.from(this.notificationConfig.keys());
+  helpUrl: string;
   @Input() params;
 
   constructor(
@@ -45,21 +51,37 @@ export class AddNewExternalNotificationComponent implements OnInit {
       Validators.maxLength(100),
       Validators.required
     ]);
+    this.notificationType = new FormControl("", [Validators.required])
   }
 
   createForm() {
     this.myform = new FormGroup({
       url: this.url,
-      name: this.name
+      name: this.name,
+      notificationType: this.notificationType
     });
   }
 
+  changeNotification(e) {
+    this.notificationType?.setValue(e.target.value);
+    if (this.notificationConfig.has(e.target.value)) {
+      const notification = this.notificationConfig.get(e.target.value)
+      this.helpUrl = notification.helpUrl
+    } else {
+      this.helpUrl = null
+    }
+
+  }
+
   onSubmit() {
     if (this.myform.valid) {
       const { projectName, scenarioName } = this.params;
+      const { url, notificationType, name } = this.myform.value
+      const type = this.notificationConfig.get(notificationType).key
       const body = {
-        ...this.myform.value,
-        type: "ms-teams"
+        name,
+        url,
+        type
       };
 
       this.scenarioApiService.createNewScenarioNotification(projectName, scenarioName, body)