From 57390a9055f1e11eda100ef4e77b68b6717c9341 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 23 Mar 2023 13:25:54 +0200 Subject: [PATCH] UI: Add help popup in notification template --- .../sent-notification-dialog.component.html | 36 ++++++++++++++----- .../sent-notification-dialog.component.scss | 11 ++---- ...emplate-notification-dialog.component.html | 36 ++++++++++++++----- ...emplate-notification-dialog.component.scss | 11 ++---- .../app/shared/models/notification.models.ts | 18 +++++----- .../assets/help/en_US/notification/alarm.md | 1 + .../en_US/notification/alarm_assignment.md | 1 + .../help/en_US/notification/alarm_comment.md | 1 + .../en_US/notification/device_inactivity.md | 1 + .../help/en_US/notification/entities_limit.md | 1 + .../help/en_US/notification/entity_action.md | 1 + .../assets/help/en_US/notification/general.md | 1 + .../rule_engine_lifecycle_event.md | 1 + .../assets/locale/locale.constant-en_US.json | 13 ++----- 14 files changed, 82 insertions(+), 51 deletions(-) create mode 100644 ui-ngx/src/assets/help/en_US/notification/alarm.md create mode 100644 ui-ngx/src/assets/help/en_US/notification/alarm_assignment.md create mode 100644 ui-ngx/src/assets/help/en_US/notification/alarm_comment.md create mode 100644 ui-ngx/src/assets/help/en_US/notification/device_inactivity.md create mode 100644 ui-ngx/src/assets/help/en_US/notification/entities_limit.md create mode 100644 ui-ngx/src/assets/help/en_US/notification/entity_action.md create mode 100644 ui-ngx/src/assets/help/en_US/notification/general.md create mode 100644 ui-ngx/src/assets/help/en_US/notification/rule_engine_lifecycle_event.md diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html index 7aa2c726e4..990a8f3f64 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html +++ b/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"> {{ 'notification.delivery-method.web' | translate }} -
- {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }} +
+ {{ 'notification.input-fields-support-templatization' | translate}} +
@@ -207,8 +212,13 @@ [stepControl]="emailTemplateForm"> {{ 'notification.delivery-method.email' | translate }} -
- {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }} +
+ {{ 'notification.input-fields-support-templatization' | translate}} +
@@ -227,8 +237,13 @@ notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.SMS.enabled').value" [stepControl]="smsTemplateForm"> {{ 'notification.delivery-method.sms' | translate }} -
- {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }} +
+ {{ 'notification.input-field-support-templatization' | translate}} +
@@ -249,8 +264,13 @@ notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.SLACK.enabled').value" [stepControl]="slackTemplateForm"> {{ 'notification.delivery-method.slack' | translate }} -
- {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }} +
+ {{ 'notification.input-field-support-templatization' | translate}} +
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss index b18c434360..c7e6916f4d 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss +++ b/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; - color: rgba(0, 0, 0, 0.54); + padding: 8px 16px; + display: flex; + align-items: center; } .delivery-method-container { diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html index dde6e57168..0e10d6ba80 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html @@ -73,8 +73,13 @@ {{ 'notification.delivery-method.web' | translate }} -
- {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }} +
+ {{ 'notification.input-fields-support-templatization' | translate}} +
@@ -165,8 +170,13 @@ [stepControl]="emailTemplateForm"> {{ 'notification.delivery-method.email' | translate }} -
- {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }} +
+ {{ 'notification.input-fields-support-templatization' | translate}} +
@@ -184,8 +194,13 @@ {{ 'notification.delivery-method.sms' | translate }} -
- {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }} +
+ {{ 'notification.input-field-support-templatization' | translate}} +
@@ -205,8 +220,13 @@ {{ 'notification.delivery-method.slack' | translate }} -
- {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }} +
+ {{ 'notification.input-field-support-templatization' | translate}} +
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss index 9e5c8133b7..884804c5ab 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss +++ b/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; - color: rgba(0, 0, 0, 0.54); + padding: 8px 16px; + display: flex; + align-items: center; } .delivery-method-container { diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts index 92401189e8..fc5f983709 100644 --- a/ui-ngx/src/app/shared/models/notification.models.ts +++ b/ui-ngx/src/app/shared/models/notification.models.ts @@ -441,56 +441,56 @@ export const ActionButtonLinkTypeTranslateMap = new Map([ [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' }] ]); diff --git a/ui-ngx/src/assets/help/en_US/notification/alarm.md b/ui-ngx/src/assets/help/en_US/notification/alarm.md new file mode 100644 index 0000000000..3699ed4f77 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/notification/alarm.md @@ -0,0 +1 @@ +Available params: ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction} diff --git a/ui-ngx/src/assets/help/en_US/notification/alarm_assignment.md b/ui-ngx/src/assets/help/en_US/notification/alarm_assignment.md new file mode 100644 index 0000000000..e012ab5cfb --- /dev/null +++ b/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} diff --git a/ui-ngx/src/assets/help/en_US/notification/alarm_comment.md b/ui-ngx/src/assets/help/en_US/notification/alarm_comment.md new file mode 100644 index 0000000000..0140f407f6 --- /dev/null +++ b/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} diff --git a/ui-ngx/src/assets/help/en_US/notification/device_inactivity.md b/ui-ngx/src/assets/help/en_US/notification/device_inactivity.md new file mode 100644 index 0000000000..6b7ea7a077 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/notification/device_inactivity.md @@ -0,0 +1 @@ +Available params: ${deviceName}, ${deviceLabel}, ${deviceType}, ${deviceId} diff --git a/ui-ngx/src/assets/help/en_US/notification/entities_limit.md b/ui-ngx/src/assets/help/en_US/notification/entities_limit.md new file mode 100644 index 0000000000..7614ef8cc7 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/notification/entities_limit.md @@ -0,0 +1 @@ +Available params: ${entityType}, ${currentCount}, ${limit} diff --git a/ui-ngx/src/assets/help/en_US/notification/entity_action.md b/ui-ngx/src/assets/help/en_US/notification/entity_action.md new file mode 100644 index 0000000000..c3a9f390e4 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/notification/entity_action.md @@ -0,0 +1 @@ +Available params: ${actionType}, ${entityType}, ${entityName}, ${entityId}, ${originatorUserName}, ${originatorUserId} diff --git a/ui-ngx/src/assets/help/en_US/notification/general.md b/ui-ngx/src/assets/help/en_US/notification/general.md new file mode 100644 index 0000000000..4de4b1597f --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/notification/general.md @@ -0,0 +1 @@ +Available params: ${recipientEmail}, ${recipientFirstName}, ${recipientLastName} diff --git a/ui-ngx/src/assets/help/en_US/notification/rule_engine_lifecycle_event.md b/ui-ngx/src/assets/help/en_US/notification/rule_engine_lifecycle_event.md new file mode 100644 index 0000000000..9c18926e41 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/notification/rule_engine_lifecycle_event.md @@ -0,0 +1 @@ +Available params: ${ruleChainName}, ${componentName}, ${eventType}, ${error}, ${ruleChainId}, ${componentId} diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index d9b64bc703..55aa3802d1 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/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": {