FOGL-10239: Message field in the notification instance creation form

src/app/components/common/node-editor/custom-notification-node/custom-notification-node.component.html

@@ -56,7 +56,7 @@
         </span>
       </div>
       <div class="is-custom-center">
-        <span class="help-text">{{notification.notificationType | titlecase}}</span>
+        <span class="help-text">{{notification.notificationType}}</span>
       </div>
       <div class="is-pulled-right">
         <div id="nodeDropdown-{{nodeId}}" class="dropdown is-hoverable"
@@ -93,4 +93,4 @@
       </span>
     </div>
   </ng-template>
-</div>
+</div>

src/app/components/core/notifications/add-notification-wizard/add-notification-wizard.component.html

@@ -83,6 +83,7 @@
               <div class="column is-vertical-center">
                 <div class="select is-multiple">
                   <select multiple name="type" #selectedPlugin formControlName="rule" id="rule"
+                    title="Select rule plugin"
                     (change)="isPluginSelected(selectedPlugin.value, notificationRulePlugins[0].type)">
                     <option *ngFor="let p of notificationRulePlugins" [value]="p.name"> {{ p.name }}</option>
                   </select>
@@ -143,6 +144,7 @@
               <div class="column is-vertical-center">
                 <div class="select is-multiple">
                   <select multiple name="type" #deliveryPlugin formControlName="delivery" id="notify"
+                    title="Select delivery plugin"
                     (change)="isPluginSelected(deliveryPlugin.value, notificationDeliveryPlugins[0].type)">
                     <option *ngFor="let d of notificationDeliveryPlugins" [value]="d.name"> {{ d.name }}</option>
                   </select>
@@ -200,18 +202,20 @@
                   <div id="notify-type-dropdown" class="dropdown notification-type">
                     <div class="dropdown-trigger">
                       <button class="button is-fullwidth is-small" aria-haspopup="true" aria-controls="dropdown-menu"
-                        (click)="toggleDropDown('notify-type-dropdown')">
-                        <span>{{notificationType}}</span>
+                        type="button" (click)="toggleDropDown('notify-type-dropdown')">
+                        <span>{{ notificationType }}</span>
                         <span class="icon is-small">
                           <i class="fa fa-sm fa-angle-down" aria-hidden="true"></i>
                         </span>
                       </button>
                     </div>
                     <div class="dropdown-menu" id="dropdown-menu" role="menu">
                       <div class="dropdown-content">
-                        <a class="dropdown-item" *ngFor="let type of notificationTypeList"
-                          (click)="toggleDropDown('notify-type-dropdown');setNotificationType(type)">
-                          {{type}}
+                        <a class="dropdown-item" role="menuitem"
+                          *ngFor="let type of notificationTypeList; trackBy: trackByNotificationTypeValue"
+                          (click)="toggleDropDown('notify-type-dropdown');setNotificationType(type)"
+                          [attr.data-value]="type">
+                          {{ type }}
                         </a>
                       </div>
                     </div>
@@ -241,6 +245,20 @@
                   </div>
                 </div>
               </div>
+              <div class="field is-horizontal">
+                <div class="field-label">
+                  <label class="label has-text-left tooltip has-tooltip-right has-tooltip-arrow has-tooltip-multiline"
+                    data-tooltip="Text message to send for this notification">Message</label>
+                </div>
+                <div class="field-body last-step-field">
+                  <div class="field">
+                    <div class="control column is-6 p-0">
+                      <textarea class="textarea is-small" id="message" placeholder="Message" rows="2"
+                        formControlName="text" title="Message"></textarea>
+                    </div>
+                  </div>
+                </div>
+              </div>
               <div class="field is-horizontal">
                 <div class="field-label">
                   <label class="label has-text-left tooltip has-tooltip-right has-tooltip-arrow has-tooltip-multiline"
@@ -249,7 +267,8 @@
                 <div class="field-body last-step-field">
                   <div class="field">
                     <div class="control">
-                      <input class="checkbox" type="checkbox" checked (click)="onCheckboxClicked($event)">
+                      <input class="checkbox" type="checkbox" title="Enabled" checked
+                        (click)="onCheckboxClicked($event)">
                     </div>
                   </div>
                 </div>
@@ -272,4 +291,4 @@
     </div>
   </div>
   <app-view-logs></app-view-logs>
-</div>
+</div>

src/app/components/core/notifications/add-notification-wizard/add-notification-wizard.component.ts

@@ -55,7 +55,8 @@ export class AddNotificationWizardComponent implements OnInit, OnDestroy {
     description: new UntypedFormControl(),
     rule: new UntypedFormControl(),
     delivery: new UntypedFormControl(),
-    retriggerTime: new UntypedFormControl()
+    retriggerTime: new UntypedFormControl(),
+    text: new UntypedFormControl()
   });
 
   @ViewChild(ViewLogsComponent, { static: true }) viewLogsComponent: ViewLogsComponent;
@@ -99,7 +100,8 @@ export class AddNotificationWizardComponent implements OnInit, OnDestroy {
       description: ['', Validators.required],
       rule: ['', Validators.required],
       delivery: ['', Validators.required],
-      retriggerTime: ['60', Validators.required]
+      retriggerTime: ['60', Validators.required],
+      text: ['']
     });
     this.subscription = this.sharedService.showLogs.subscribe(showPackageLogs => {
       if (showPackageLogs.isSubscribed) {
@@ -324,6 +326,7 @@ export class AddNotificationWizardComponent implements OnInit, OnDestroy {
         if (this.payload.retrigger_time < 0) {
           return;
         }
+        this.payload.text = (this.notificationForm.get('text')?.value ?? '').trim();
         this.addNotificationInstance(this.payload);
         break;
       default:
@@ -427,6 +430,10 @@ export class AddNotificationWizardComponent implements OnInit, OnDestroy {
     this.notificationType = type;
   }
 
+  public trackByNotificationTypeValue(index: number, type: string): string {
+    return type;
+  }
+
   /**
  * Get edited configuration from view config child page
  * @param changedConfig changed configuration of a selected plugin