UI: Add help popup in notification template

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html

@@ -114,8 +114,13 @@
                       notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.WEB.enabled').value"
               [stepControl]="webTemplateForm">
       <ng-template matStepLabel>{{ 'notification.delivery-method.web' | translate }}</ng-template>
-      <div class="tb-hint tb-hint-available-params">
+      <div class="tb-hint-available-params mat-body-2">
-        {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
+        {{ 'notification.input-fields-support-templatization' | translate}}
+        <div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).helpId }}"
+             tb-help-popup-placement="bottom"
+             trigger-style="letter-spacing:0.25px"
+             [tb-help-popup-style]="{maxWidth: '820px'}"
+             trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
       </div>
       <form [formGroup]="webTemplateForm">
         <mat-form-field class="mat-block">
@@ -207,8 +212,13 @@
               [stepControl]="emailTemplateForm">
       <ng-template matStepLabel>{{ 'notification.delivery-method.email' | translate }}</ng-template>
       <ng-template matStepContent>
-        <div class="tb-hint tb-hint-available-params">
+        <div class="tb-hint-available-params mat-body-2">
-          {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
+          {{ 'notification.input-fields-support-templatization' | translate}}
+          <div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).helpId }}"
+               tb-help-popup-placement="bottom"
+               trigger-style="letter-spacing:0.25px"
+               [tb-help-popup-style]="{maxWidth: '820px'}"
+               trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
         </div>
         <form [formGroup]="emailTemplateForm">
           <mat-form-field class="mat-block">
@@ -227,8 +237,13 @@
                       notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.SMS.enabled').value"
               [stepControl]="smsTemplateForm">
       <ng-template matStepLabel>{{ 'notification.delivery-method.sms' | translate }}</ng-template>
-      <div class="tb-hint tb-hint-available-params">
+      <div class="tb-hint-available-params mat-body-2">
-        {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
+        {{ 'notification.input-field-support-templatization' | translate}}
+        <div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).helpId }}"
+             tb-help-popup-placement="bottom"
+             trigger-style="letter-spacing:0.25px"
+             [tb-help-popup-style]="{maxWidth: '820px'}"
+             trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
       </div>
       <form [formGroup]="smsTemplateForm">
         <mat-form-field class="mat-block">
@@ -249,8 +264,13 @@
                      notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.SLACK.enabled').value"
               [stepControl]="slackTemplateForm">
       <ng-template matStepLabel>{{ 'notification.delivery-method.slack' | translate }}</ng-template>
-      <div class="tb-hint tb-hint-available-params">
+      <div class="tb-hint-available-params mat-body-2">
-        {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
+        {{ 'notification.input-field-support-templatization' | translate}}
+        <div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).helpId }}"
+             tb-help-popup-placement="bottom"
+             trigger-style="letter-spacing:0.25px"
+             [tb-help-popup-style]="{maxWidth: '820px'}"
+             trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
       </div>
       <form [formGroup]="slackTemplateForm" fxLayoutGap="8px">
         <mat-form-field class="mat-block">

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss

@@ -24,10 +24,6 @@
   display: flex;
   flex-direction: column;
 
-  .tb-form-fields {
-    margin-bottom: 18px;
-  }
-
   .tb-title {
     font-size: 16px;
     line-height: 24px;
@@ -40,11 +36,10 @@
   .tb-hint-available-params {
     border-radius: 6px;
     background-color: rgba(48, 86, 128, 0.04);
-    line-height: 16px;
-    letter-spacing: 0.25px;
     margin-bottom: 8px;
-    padding: 8px 12px;
+    padding: 8px 16px;
-    color: rgba(0, 0, 0, 0.54);
+    display: flex;
+    align-items: center;
   }
 
   .delivery-method-container {

ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html

@@ -73,8 +73,13 @@
     <mat-step *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.WEB.enabled').value"
       [stepControl]="webTemplateForm">
       <ng-template matStepLabel>{{ 'notification.delivery-method.web' | translate }}</ng-template>
-      <div class="tb-hint tb-hint-available-params">
+      <div class="tb-hint-available-params mat-body-2">
-        {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
+        {{ 'notification.input-fields-support-templatization' | translate}}
+        <div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}"
+             tb-help-popup-placement="bottom"
+             trigger-style="letter-spacing:0.25px"
+             [tb-help-popup-style]="{maxWidth: '800px'}"
+             trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
       </div>
       <form [formGroup]="webTemplateForm">
         <mat-form-field class="mat-block">
@@ -165,8 +170,13 @@
       [stepControl]="emailTemplateForm">
       <ng-template matStepLabel>{{ 'notification.delivery-method.email' | translate }}</ng-template>
       <ng-template matStepContent>
-        <div class="tb-hint tb-hint-available-params">
+        <div class="tb-hint-available-params mat-body-2">
-          {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
+          {{ 'notification.input-fields-support-templatization' | translate}}
+          <div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}"
+               tb-help-popup-placement="bottom"
+               trigger-style="letter-spacing:0.25px"
+               [tb-help-popup-style]="{maxWidth: '800px'}"
+               trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
         </div>
         <form [formGroup]="emailTemplateForm">
           <mat-form-field class="mat-block">
@@ -184,8 +194,13 @@
     <mat-step *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.SMS.enabled').value"
               [stepControl]="smsTemplateForm">
       <ng-template matStepLabel>{{ 'notification.delivery-method.sms' | translate }}</ng-template>
-      <div class="tb-hint tb-hint-available-params">
+      <div class="tb-hint-available-params mat-body-2">
-        {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
+        {{ 'notification.input-field-support-templatization' | translate}}
+        <div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}"
+             tb-help-popup-placement="bottom"
+             trigger-style="letter-spacing:0.25px"
+             [tb-help-popup-style]="{maxWidth: '800px'}"
+             trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
       </div>
       <form [formGroup]="smsTemplateForm">
         <mat-form-field class="mat-block">
@@ -205,8 +220,13 @@
     <mat-step *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.SLACK.enabled').value"
               [stepControl]="slackTemplateForm">
       <ng-template matStepLabel>{{ 'notification.delivery-method.slack' | translate }}</ng-template>
-      <div class="tb-hint tb-hint-available-params">
+      <div class="tb-hint-available-params mat-body-2">
-        {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
+        {{ 'notification.input-field-support-templatization' | translate}}
+        <div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}"
+             tb-help-popup-placement="bottom"
+             trigger-style="letter-spacing:0.25px"
+             [tb-help-popup-style]="{maxWidth: '800px'}"
+             trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
       </div>
       <form [formGroup]="slackTemplateForm" fxLayoutGap="8px">
         <mat-form-field class="mat-block">

ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss

@@ -24,10 +24,6 @@
   display: flex;
   flex-direction: column;
 
-  .tb-form-fields {
-    margin-bottom: 18px;
-  }
-
   .tb-title {
     font-size: 16px;
     line-height: 24px;
@@ -40,11 +36,10 @@
   .tb-hint-available-params {
     border-radius: 6px;
     background-color: rgba(48, 86, 128, 0.04);
-    line-height: 16px;
-    letter-spacing: 0.25px;
     margin-bottom: 8px;
-    padding: 8px 12px;
+    padding: 8px 16px;
-    color: rgba(0, 0, 0, 0.54);
+    display: flex;
+    align-items: center;
   }
 
   .delivery-method-container {

ui-ngx/src/app/shared/models/notification.models.ts

@@ -441,56 +441,56 @@ export const ActionButtonLinkTypeTranslateMap = new Map<ActionButtonLinkType, st
 
 interface NotificationTemplateTypeTranslate {
   name: string;
-  hint?: string;
+  helpId?: string;
 }
 
 export const NotificationTemplateTypeTranslateMap = new Map<NotificationType, NotificationTemplateTypeTranslate>([
   [NotificationType.GENERAL,
     {
       name: 'notification.template-type.general',
-      hint: 'notification.template-hint.general'
+      helpId: 'notification/general'
     }
   ],
   [NotificationType.ALARM,
     {
       name: 'notification.template-type.alarm',
-      hint: 'notification.template-hint.alarm'
+      helpId: 'notification/alarm'
     }
   ],
   [NotificationType.DEVICE_INACTIVITY,
     {
       name: 'notification.template-type.device-inactivity',
-      hint: 'notification.template-hint.device-inactivity'
+      helpId: 'notification/device_inactivity'
     }
   ],
   [NotificationType.ENTITY_ACTION,
     {
       name: 'notification.template-type.entity-action',
-      hint: 'notification.template-hint.entity-action'
+      helpId: 'notification/entity_action'
     }
   ],
   [NotificationType.ALARM_COMMENT,
     {
       name: 'notification.template-type.alarm-comment',
-      hint: 'notification.template-hint.alarm-comment'
+      helpId: 'notification/alarm_comment'
     }
   ],
   [NotificationType.ALARM_ASSIGNMENT,
     {
       name: 'notification.template-type.alarm-assignment',
-      hint: 'notification.template-hint.alarm-assignment'
+      helpId: 'notification/alarm_assignment'
     }
   ],
   [NotificationType.RULE_ENGINE_COMPONENT_LIFECYCLE_EVENT,
     {
       name: 'notification.template-type.rule-engine-lifecycle-event',
-      hint: 'notification.template-hint.rule-engine-lifecycle-event'
+      helpId: 'notification/rule_engine_lifecycle_event'
     }
   ],
   [NotificationType.ENTITIES_LIMIT,
     {
       name: 'notification.template-type.entities-limit',
-      hint: 'notification.template-hint.entities-limit'
+      helpId: 'notification/entities_limit'
     }]
 ]);
 

ui-ngx/src/assets/help/en_US/notification/alarm.md

@@ -0,0 +1 @@
+Available params: ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}

ui-ngx/src/assets/help/en_US/notification/alarm_assignment.md

@@ -0,0 +1 @@
+Available params: ${assigneeFirstName}, ${assigneeLastName}, ${assigneeEmail}, ${assigneeFirstName}, ${userName}, ${alarmId}, ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}

ui-ngx/src/assets/help/en_US/notification/alarm_comment.md

@@ -0,0 +1 @@
+Available params: ${comment}, ${alarmType}, ${alarmId}, ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}

ui-ngx/src/assets/help/en_US/notification/device_inactivity.md

@@ -0,0 +1 @@
+Available params: ${deviceName}, ${deviceLabel}, ${deviceType}, ${deviceId}

ui-ngx/src/assets/help/en_US/notification/entities_limit.md

@@ -0,0 +1 @@
+Available params: ${entityType}, ${currentCount}, ${limit}

ui-ngx/src/assets/help/en_US/notification/entity_action.md

@@ -0,0 +1 @@
+Available params: ${actionType}, ${entityType}, ${entityName}, ${entityId}, ${originatorUserName}, ${originatorUserId}

ui-ngx/src/assets/help/en_US/notification/general.md

@@ -0,0 +1 @@
+Available params: ${recipientEmail}, ${recipientFirstName}, ${recipientLastName}

ui-ngx/src/assets/help/en_US/notification/rule_engine_lifecycle_event.md

@@ -0,0 +1 @@
+Available params: ${ruleChainName}, ${componentName}, ${eventType}, ${error}, ${ruleChainId}, ${componentId}

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2801,6 +2801,8 @@
         "filter": "Filter",
         "first-recipient": "First recipient",
         "inbox": "Inbox",
+        "input-field-support-templatization": "Input field support templatization.",
+        "input-fields-support-templatization": "Input fields support templatization.",
         "link": "Link",
         "link-required": "Link is required",
         "link-type": {
@@ -2869,6 +2871,7 @@
         "search-rules": "Search rules",
         "search-targets": "Search recipients",
         "search-templates": "Search templates",
+        "see-documentation": "See documentation",
         "selected-notifications": "{ count, plural, =1 {1 notification} other {# notifications} } selected",
         "selected-requests": "{ count, plural, =1 {1 request} other {# requests} } selected",
         "send-notification": "Send notification",
@@ -2902,16 +2905,6 @@
         "targets": "Recipients",
         "targets-required": "Recipients is required",
         "template": "Template",
-        "template-hint": {
-            "alarm": "Available params: ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}",
-            "alarm-assignment": "Available params: ${assigneeFirstName}, ${assigneeLastName}, ${assigneeEmail}, ${assigneeFirstName}, ${userName}, ${alarmId}, ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}",
-            "alarm-comment": "Available params: ${comment}, ${alarmType}, ${alarmId}, ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}",
-            "device-inactivity": "Available params: ${deviceName}, ${deviceLabel}, ${deviceType}, ${deviceId}",
-            "entities-limit": "Available params: ${entityType}, ${currentCount}, ${limit}",
-            "entity-action": "Available params: ${actionType}, ${entityType}, ${entityName}, ${entityId}, ${originatorUserName}, ${originatorUserId}",
-            "general": "Available params: ${recipientEmail}, ${recipientFirstName}, ${recipientLastName}",
-            "rule-engine-lifecycle-event": "Available params: ${ruleChainName}, ${componentName}, ${eventType}, ${error}, ${ruleChainId}, ${componentId}"
-        },
         "template-name": "Template name",
         "template-required": "Template is required",
         "template-type": {