UI: Improvement notification componets styles

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

@@ -46,7 +46,7 @@
         }
 
         .action-buttons {
-          color: rgba(0,0,0,.54);
+          color: rgba(0, 0, 0, .54);
         }
       }
 
@@ -55,52 +55,9 @@
         flex-direction: column;
         flex: 1 1 100%;
       }
-
-      //.mat-toolbar-tools{
-      //  min-height: auto;
-      //}
-      //
-      //.title-container{
-      //  overflow: hidden;
-      //}
-      //
-      //.tb-entity-table-title {
-      //  padding-right: 20px;
-      //  white-space: nowrap;
-      //  overflow: hidden;
-      //  text-overflow: ellipsis;
-      //}
-      //
-      //.table-container {
-      //  overflow: auto;
-      //}
-      //
-      //.tb-entity-table-info{
-      //  white-space: nowrap;
-      //  overflow: hidden;
-      //  text-overflow: ellipsis;
-      //}
-      //
-      //.button-widget-action{
-      //  margin-left: auto;
-      //  overflow: hidden;
-      //  text-overflow: ellipsis;
-      //}
     }
   }
 
-  //@media #{$mat-xs} {
-  //  .mat-toolbar {
-  //    height: auto;
-  //    min-height: 100px;
-  //
-  //    .tb-entity-table-title{
-  //      padding-bottom: 5px;
-  //      width: 100%;
-  //    }
-  //  }
-  //}
-
   @media #{$mat-xs} {
     .tb-notification-center {
       .tb-notification-center-content {
@@ -158,32 +115,18 @@
       }
     }
   }
-}
 
-//:host ::ng-deep {
-//  .mat-sort-header-sorted .mat-sort-header-arrow {
-//    opacity: 1 !important;
-//  }
-//  tb-branch-autocomplete {
-//    mat-form-field {
-//      font-size: 16px;
-//      width: 250px;
-//
-//      .mat-form-field-wrapper {
-//        padding-bottom: 0;
-//      }
-//
-//      .mat-form-field-underline {
-//        bottom: 0;
-//      }
-//
-//      @media #{$mat-xs} {
-//        width: 100%;
-//
-//        .mat-form-field-infix {
-//          width: auto !important;
-//        }
-//      }
-//    }
-//  }
-//}
+  @media #{$mat-xs} {
+    .tabs-container {
+      .mat-tab-group {
+        > .mat-tab-header {
+          .mat-tab-label {
+            &.mat-tab-disabled {
+              width: auto;
+            }
+          }
+        }
+      }
+    }
+  }
+}

ui-ngx/src/app/modules/home/pages/notification-center/notification-center.module.ts

@@ -51,6 +51,7 @@ import { EscalationFormComponent } from '@home/pages/notification-center/rule-ta
 import {
   AlarmSeveritiesListComponent
 } from '@home/pages/notification-center/rule-table/alarm-severities-list.component';
+import { TemplateConfiguration } from '@home/pages/notification-center/template-table/template-configuration';
 
 @NgModule({
   declarations: [

ui-ngx/src/app/modules/home/pages/notification-center/notification-table/rule-table-config.ts

@@ -39,6 +39,8 @@ export class RuleTableConfig extends EntityTableConfig<NotificationRule> {
               private dialog: MatDialog) {
     super();
     this.loadDataOnInit = false;
+    this.rowPointer = true;
+
     this.entityTranslations = {
       noEntities: 'notification.no-rules-notification',
       search: 'notification.search-rules'
@@ -57,6 +59,11 @@ export class RuleTableConfig extends EntityTableConfig<NotificationRule> {
 
     this.defaultSortOrder = {property: 'name', direction: Direction.ASC};
 
+    this.handleRowClick = ($event, rule) => {
+      this.editRule($event, rule)
+      return true;
+    }
+
     this.columns.push(
       new EntityTableColumn<NotificationRule>('name', 'notification.rule-name', '30%'),
       new EntityTableColumn<NotificationRule>('templateName', 'notification.template', '20%'),
@@ -75,11 +82,6 @@ export class RuleTableConfig extends EntityTableConfig<NotificationRule> {
       icon: 'content_copy',
       isEnabled: () => true,
       onAction: ($event, entity) => this.editRule($event, entity, false, true)
-    }, {
-      name: this.translate.instant('notification.edit-rule'),
-      icon: 'edit',
-      isEnabled: () => true,
-      onAction: ($event, entity) => this.editRule($event, entity)
     }];
   }
 

ui-ngx/src/app/modules/home/pages/notification-center/notification-table/targets-table-config.ts

@@ -41,6 +41,8 @@ export class TargetsTableConfig extends EntityTableConfig<NotificationTarget> {
               private dialog: MatDialog) {
     super();
     this.loadDataOnInit = false;
+    this.rowPointer = true;
+
     this.entityTranslations = {
       noEntities: 'notification.no-targets-notification',
       search: 'notification.search-targets'
@@ -60,6 +62,11 @@ export class TargetsTableConfig extends EntityTableConfig<NotificationTarget> {
 
     this.defaultSortOrder = {property: 'name', direction: Direction.ASC};
 
+    this.handleRowClick = ($event, target) => {
+      this.editTarget($event, target);
+      return true;
+    }
+
     this.columns.push(
       new EntityTableColumn<NotificationTarget>('name', 'notification.notification-target', '20%'),
       new EntityTableColumn<NotificationTarget>('configuration.type', 'notification.type', '40%',
@@ -72,12 +79,7 @@ export class TargetsTableConfig extends EntityTableConfig<NotificationTarget> {
   }
 
   private configureCellActions(): Array<CellActionDescriptor<NotificationTarget>> {
-    return [{
-      name: this.translate.instant('device.make-public'),
-      icon: 'edit',
-      isEnabled: () => true,
-      onAction: ($event, entity) => this.editTarget($event, entity)
-    }];
+    return [];
   }
 
   private editTarget($event: Event, target: NotificationTarget, isAdd = false) {

ui-ngx/src/app/modules/home/pages/notification-center/notification-table/template-table-config.ts

@@ -41,6 +41,8 @@ export class TemplateTableConfig extends EntityTableConfig<NotificationTemplate>
               private dialog: MatDialog) {
     super();
     this.loadDataOnInit = false;
+    this.rowPointer = true;
+
     this.entityTranslations = {
       noEntities: 'notification.no-notification-templates',
       search: 'notification.search-templates'
@@ -60,6 +62,11 @@ export class TemplateTableConfig extends EntityTableConfig<NotificationTemplate>
 
     this.defaultSortOrder = {property: 'notificationType', direction: Direction.ASC};
 
+    this.handleRowClick = ($event, template) => {
+      this.editTemplate($event, template)
+      return true;
+    }
+
     this.columns.push(
       new EntityTableColumn<NotificationTemplate>('notificationType', 'notification.type', '15%',
         (template) => this.translate.instant(NotificationTemplateTypeTranslateMap.get(template.notificationType).name)),
@@ -78,11 +85,6 @@ export class TemplateTableConfig extends EntityTableConfig<NotificationTemplate>
         icon: 'content_copy',
         isEnabled: () => true,
         onAction: ($event, entity) => this.editTemplate($event, entity, false, true)
-      }, {
-        name: this.translate.instant('notification.edit-template'),
-        icon: 'edit',
-        isEnabled: () => true,
-        onAction: ($event, entity) => this.editTemplate($event, entity)
       }
     ];
   }

ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html

@@ -55,19 +55,21 @@
         <ng-template #scratchTemplate>
           <section formGroupName="template">
             <section formGroupName="configuration">
-              <mat-form-field class="mat-block">
+              <mat-form-field class="mat-block tb-form-fields">
                 <mat-label translate>notification.subject</mat-label>
                 <input matInput formControlName="notificationSubject" required>
                 <mat-error *ngIf="notificationRequestForm.get('template.configuration.notificationSubject').hasError('required')">
                   {{ 'notification.subject-required' | translate }}
                 </mat-error>
+                <mat-hint>{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}</mat-hint>
               </mat-form-field>
-              <mat-form-field class="mat-block">
+              <mat-form-field class="mat-block tb-form-fields">
                 <mat-label translate>notification.message</mat-label>
                 <input matInput formControlName="defaultTextTemplate" required>
                 <mat-error *ngIf="notificationRequestForm.get('template.configuration.defaultTextTemplate').hasError('required')">
                   {{ 'notification.message-required' | translate }}
                 </mat-error>
+                <mat-hint>{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}</mat-hint>
               </mat-form-field>
               <label class="tb-title tb-required"
                      [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}">
@@ -104,6 +106,9 @@
                               notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.PUSH.enabled').value"
               [stepControl]="pushTemplateForm">
       <ng-template matStepLabel>{{ 'notification.web-settings' | translate }}</ng-template>
+      <div class="tb-hint tb-hint-available-params">
+        {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
+      </div>
       <form [formGroup]="pushTemplateForm">
         <mat-form-field class="mat-block" floatLabel="always">
           <mat-label translate>notification.subject</mat-label>
@@ -164,6 +169,9 @@
               [stepControl]="emailTemplateForm">
       <ng-template matStepLabel>{{ 'notification.email-settings' | translate }}</ng-template>
       <ng-template matStepContent>
+        <div class="tb-hint tb-hint-available-params">
+          {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
+        </div>
         <form [formGroup]="emailTemplateForm">
           <mat-form-field class="mat-block" floatLabel="always">
             <mat-label translate>notification.subject</mat-label>
@@ -178,6 +186,9 @@
                               notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.SMS.enabled').value"
               [stepControl]="smsTemplateForm">
       <ng-template matStepLabel>{{ 'notification.sms-settings' | translate }}</ng-template>
+      <div class="tb-hint tb-hint-available-params">
+        {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
+      </div>
       <form [formGroup]="smsTemplateForm">
         <mat-form-field class="mat-block" floatLabel="always">
           <mat-label translate>notification.message</mat-label>
@@ -195,6 +206,9 @@
                               notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.SLACK.enabled').value"
               [stepControl]="slackTemplateForm">
       <ng-template matStepLabel>{{ 'notification.slack-settings' | translate }}</ng-template>
+      <div class="tb-hint tb-hint-available-params">
+        {{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
+      </div>
       <form [formGroup]="slackTemplateForm" fxLayoutGap="8px">
         <mat-form-field class="mat-block" floatLabel="always">
           <mat-label translate>notification.message</mat-label>

ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss

@@ -18,6 +18,21 @@
 
 :host-context(.tb-fullscreen-dialog .mat-dialog-container) {
   width: 640px;
+  max-height: 100vh;
+
+  .tb-form-fields {
+    margin-bottom: 8px;
+  }
+
+  .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);
+  }
 
   .delivery-method-container {
     padding-bottom: 8px;
@@ -117,9 +132,13 @@
 
     .mat-stepper-horizontal {
       display: flex;
-      flex-direction: column;
       height: 100%;
       overflow: hidden;
+
+      .mat-horizontal-stepper-wrapper {
+        flex: 1 1 100%;
+      }
+
       @media #{$mat-lt-sm} {
         .mat-step-label {
           white-space: normal;
@@ -130,7 +149,7 @@
         }
       }
       .mat-horizontal-content-container {
-        height: 400px;
+        height: 540px;
         max-height: 100%;
         width: 100%;;
         overflow-y: auto;
@@ -150,6 +169,7 @@
     &.mat-button-toggle-group-appearance-standard {
       border: none;
       border-radius: 18px;
+      margin-bottom: 8px;
 
       .mat-button-toggle + .mat-button-toggle {
         border-left: none;
@@ -198,4 +218,26 @@
       opacity: .01;
     }
   }
+
+  .mat-form-field {
+    .mat-form-field-wrapper {
+      padding-bottom: 0px;
+
+      .mat-form-field-underline {
+        position: initial !important;
+        display: block;
+        margin-top: -1px;
+      }
+
+      .mat-form-field-subscript-wrapper,
+      .mat-form-field-ripple {
+        position: initial !important;
+        display: table;
+      }
+
+      .mat-form-field-subscript-wrapper {
+        min-height: calc(1em + 1px);
+      }
+    }
+  }
 }

ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts

@@ -146,8 +146,12 @@ export class RequestNotificationDialogComponent extends
   }
 
   nextStepLabel(): string {
-    if (this.selectedIndex >= this.maxStepperIndex) {
-      return 'action.send';
+    if (this.selectedIndex !== 0) {
+      if (this.selectedIndex >= this.maxStepperIndex) {
+        return 'action.send';
+      } else if (this.createNotification.selected.stepControl.pristine) {
+        return 'action.skip';
+      }
     }
     return 'action.next';
   }

ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalation-form.component.html

@@ -17,14 +17,12 @@
 -->
 <form [formGroup]="escalationFormGroup" fxLayout="column">
   <div class="escalation" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
-    <div fxFlex fxLayout="row" ngStyle.xs="padding-top: 10px">
-      <div fxFlex *ngIf="systemEscalation; else selectTime" class="escalation-padding" translate>notification.first-recipient</div>
+<!--    <div fxFlex fxLayout="row" ngStyle.xs="padding-top: 10px">-->
+      <div fxFlex *ngIf="systemEscalation; else selectTime" translate>notification.first-recipient</div>
       <ng-template #selectTime>
         <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">
-          <span class="escalation-padding">After</span>
+          <span translate>notification.after</span>
           <tb-timeinterval
-            style="min-width: 100px;"
-            ngStyle.xs="padding: 0 10px;"
             formControlName="delayInSec"
             min="{{ 0 }}"
             max="{{ 604800000 }}"
@@ -32,19 +30,18 @@
           <span fxFlex class="escalation-notify" translate>notification.notify</span>
         </div>
       </ng-template>
-    </div>
-    <div fxFlex="60" class="escalation-padding">
-      <tb-entity-list
-        required
-        formControlName="targets"
-        [entityType]="entityType.NOTIFICATION_TARGET"
-        placeholderText="{{ 'notification.add-target' | translate }}">
-        <button #createTargetButton
-                mat-button [fxHide]="disabled" matSuffix
-                (click)="createTarget($event, createTargetButton)">
-          {{ 'notification.create-new' | translate }}
-        </button>
-      </tb-entity-list>
-    </div>
+<!--    </div>-->
+    <tb-entity-list
+      required
+      fxFlex="60"
+      formControlName="targets"
+      [entityType]="entityType.NOTIFICATION_TARGET"
+      placeholderText="{{ 'notification.add-target' | translate }}">
+      <button #createTargetButton
+              mat-button [fxHide]="disabled" matSuffix
+              (click)="createTarget($event, createTargetButton)">
+        {{ 'notification.create-new' | translate }}
+      </button>
+    </tb-entity-list>
   </div>
 </form>

ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalation-form.component.scss

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import "../../../../../../scss/constants";
+
 :host {
   .escalation {
     height: 100%;
@@ -20,24 +22,45 @@
     max-height: 100%;
     border-radius: 8px;
     background: rgba(0,0,0,0.04);
-  }
-
-  .escalation-padding {
     padding: 0 10px;
+
+    > div:first-child {
+      padding-right: 10px;
+    }
   }
 
   .escalation-notify {
-    text-align: end;
+    text-align: center;
+  }
+
+  tb-timeinterval {
+    min-width: 100px;
     padding: 0 10px;
   }
+
+  @media #{$mat-xs} {
+    .escalation {
+      > div:first-child {
+        padding: 10px 0 0;
+      }
+    }
+
+    tb-timeinterval {
+      padding: 0;
+    }
+  }
 }
 
 :host ::ng-deep {
-  tb-timeinterval {
+  .mat-form-field {
     min-width: 100px;
 
     .mat-form-field-infix {
       width: 100%;
     }
+
+    .mat-select {
+      min-width: 110px !important;
+    }
   }
 }

ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.html

@@ -35,7 +35,7 @@
     </ng-template>
     <mat-step [stepControl]="ruleNotificationForm">
       <ng-template matStepLabel>{{ 'notification.basic-settings' | translate }}</ng-template>
-      <form [formGroup]="ruleNotificationForm" style="padding-bottom: 16px;">
+      <form [formGroup]="ruleNotificationForm">
         <mat-form-field class="mat-block">
           <mat-label translate>notification.rule-name</mat-label>
           <input matInput formControlName="name" required>
@@ -75,7 +75,7 @@
           </tb-entity-list>
         </section>
         <ng-template #alarmTargesConfig>
-          <fieldset class="fields-group" formGroupName="recipientsConfig">
+          <fieldset class="fields-group tb-hierarchy" formGroupName="recipientsConfig">
             <legend translate>notification.hierarchy-of-receiving</legend>
             <tb-escalations-component formControlName="escalationTable"></tb-escalations-component>
           </fieldset>
@@ -87,7 +87,7 @@
       <ng-template matStepLabel>{{ 'notification.alarm-trigger-settings' | translate }}</ng-template>
       <form [formGroup]="alarmTemplateForm">
         <section formGroupName="triggerConfig">
-          <fieldset class="fields-group">
+          <fieldset class="fields-group tb-margin">
             <legend translate>notification.filter</legend>
             <tb-string-items-list
               label="{{ 'alarm.alarm-type-list' | translate }}"
@@ -102,7 +102,7 @@
             </tb-alarm-severities-list>
           </fieldset>
 
-          <fieldset class="fields-group" formGroupName="clearRule">
+          <fieldset class="fields-group tb-margin" formGroupName="clearRule">
             <legend translate>notification.clear-rule</legend>
             <mat-form-field fxFlex class="mat-block" floatLabel="always">
               <mat-label translate>alarm.alarm-status-list</mat-label>
@@ -132,7 +132,6 @@
       <ng-template matStepLabel>{{ 'notification.device-inactivity-trigger-settings' | translate }}</ng-template>
       <form [formGroup]="deviceInactivityTemplateForm">
         <section formGroupName="triggerConfig">
-          <span translate>notification.filter-by</span>
           <div fxFlex fxLayoutAlign="center center">
             <mat-button-toggle-group class="tb-notification-unread-toggle-group"
                                      style="width: 250px;"
@@ -175,7 +174,7 @@
               [stepControl]="entityActionTemplateForm">
       <ng-template matStepLabel>{{ 'notification.entity-action-trigger-settings' | translate }}</ng-template>
       <form [formGroup]="entityActionTemplateForm">
-        <fieldset class="fields-group" formGroupName="triggerConfig">
+        <fieldset class="fields-group tb-margin" formGroupName="triggerConfig">
           <legend translate>notification.filter</legend>
           <tb-entity-type-select required
                                  showLabel

ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.scss

@@ -16,7 +16,8 @@
 @import "../../../../../../theme";
 
 :host {
-  width: 800px;
+  width: 700px;
+  max-height: 100vh;
 
   @media #{$mat-gt-xs} {
     .mat-dialog-content {
@@ -31,10 +32,17 @@
 
   .fields-group {
     padding: 0 16px 8px;
-    margin-bottom: 10px;
     border: 1px groove rgba(0, 0, 0, .25);
     border-radius: 4px;
 
+    &.tb-margin {
+      margin-bottom: 10px;
+    }
+
+    &.tb-hierarchy {
+      padding: 0 0 8px 16px;
+    }
+
     legend {
       margin-bottom: 8px;
       color: rgba(0, 0, 0, .7);
@@ -52,9 +60,13 @@
 
       .mat-stepper-horizontal {
         display: flex;
-        flex-direction: column;
         height: 100%;
         overflow: hidden;
+
+        .mat-horizontal-stepper-wrapper {
+          flex: 1 1 100%;
+        }
+
         @media #{$mat-lt-sm} {
           .mat-step-label {
             white-space: normal;
@@ -67,7 +79,7 @@
         }
 
         .mat-horizontal-content-container {
-          height: 600px;
+          height: 550px;
           max-height: 100%;
           width: 100%;;
           overflow-y: auto;
@@ -87,7 +99,8 @@
     .mat-button-toggle-group.tb-notification-unread-toggle-group {
       &.mat-button-toggle-group-appearance-standard {
         border: none;
-        border-radius: 14px;
+        border-radius: 18px;
+        margin-bottom: 8px;
 
         .mat-button-toggle + .mat-button-toggle {
           border-left: none;
@@ -96,7 +109,7 @@
 
       .mat-button-toggle {
         background: rgba(0, 0, 0, 0.06);
-        height: 28px;
+        height: 36px;
         align-items: center;
         display: flex;
 
@@ -105,7 +118,7 @@
           left: 2px;
           right: 2px;
           bottom: 2px;
-          border-radius: 12px;
+          border-radius: 18px;
         }
       }
 
@@ -114,20 +127,20 @@
       }
 
       .mat-button-toggle-focus-overlay {
-        border-radius: 14px;
+        border-radius: 18px;
         margin: 2px;
       }
 
       .mat-button-toggle-checked .mat-button-toggle-button {
         background-color: $tb-primary-color;
         color: #fff;
-        border-radius: 14px;
+        border-radius: 18px;
         margin-left: 2px;
         margin-right: 2px;
       }
 
       .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-        line-height: 24px;
+        line-height: 34px;
         font-size: 16px;
         font-weight: 500;
       }

ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="targetNotificationForm" style="min-width: 560px">
+<form [formGroup]="targetNotificationForm" class="tb-dialog-container">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'notification.add-notification-target' : 'notification.edit-notification-target') | translate }}</h2>
     <span fxFlex></span>
@@ -77,9 +77,7 @@
         <label class="tb-title">{{ 'notification.recipient-type' | translate }}</label>
         <mat-radio-group formControlName="conversationType">
           <mat-radio-button *ngFor="let slackChanelType of slackChanelTypes" [value]="slackChanelType">
-            <div fxLayout="column">
-              <div>{{ slackChanelTypesTranslateMap.get(slackChanelType) | translate }}</div>
-            </div>
+             {{ slackChanelTypesTranslateMap.get(slackChanelType) | translate }}
           </mat-radio-button>
         </mat-radio-group>
         <tb-slack-conversation-autocomplete

ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss

@@ -13,9 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import "../../../../../../scss/constants";
 @import "../../../../../../theme";
 
 :host {
+  form.tb-dialog-container {
+    min-width: 580px;
+    max-height: 100vh;
+  }
+
+  .mat-dialog-content {
+    height: 85%;
+  }
+
   .tb-title {
     display: block;
     padding-bottom: 6px;
@@ -27,6 +37,7 @@
     display: flex;
     flex-direction: row;
     margin-bottom: 14px;
+    gap: 8px;
 
     .mat-radio-button {
       flex: 1 1 100%;
@@ -34,13 +45,15 @@
       border: 1px solid rgba(0, 0, 0, 0.12);
       border-radius: 6px;
 
-      &:not(:last-child){
-        margin-right: 8px;
-      }
-
       &.mat-radio-checked {
         border-color: map_get($tb-accent, 500);
       }
     }
   }
+
+  @media #{$mat-xs} {
+    .mat-radio-group {
+      flex-direction: column;
+    }
+  }
 }

ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.ts

@@ -85,7 +85,7 @@ export class TargetNotificationDialogComponent extends
           usersIds: [{value: null, disabled: true}, Validators.required],
           customerId: [{value: null, disabled: true}, Validators.required]
         }),
-        conversationType: [{value: SlackChanelType.DIRECT, disabled: true}],
+        conversationType: [{value: SlackChanelType.PUBLIC_CHANNEL, disabled: true}],
         conversation: [{value: '', disabled: true}, Validators.required],
         description: [null]
       })

ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-configuration.ts

@@ -19,6 +19,7 @@ import {
   NotificationDeliveryMethod,
   NotificationDeliveryMethodTranslateMap,
   NotificationTemplate,
+  NotificationTemplateTypeTranslateMap,
   NotificationType
 } from '@shared/models/notification.models';
 import { takeUntil } from 'rxjs/operators';
@@ -42,6 +43,7 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
 
   notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[];
   notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
+  notificationTemplateTypeTranslateMap = NotificationTemplateTypeTranslateMap;
 
   tinyMceOptions: Record<string, any> = {
     base_url: '/assets/tinymce',

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

@@ -50,22 +50,23 @@
               {{ notificationTemplateTypeTranslateMap.get(notificationType).name | translate }}
             </mat-option>
           </mat-select>
-          <mat-hint>{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}</mat-hint>
         </mat-form-field>
         <section formGroupName="configuration">
-          <mat-form-field class="mat-block">
+          <mat-form-field class="mat-block tb-form-fields">
             <mat-label translate>notification.subject</mat-label>
             <input matInput formControlName="notificationSubject" required>
             <mat-error *ngIf="templateNotificationForm.get('configuration.notificationSubject').hasError('required')">
               {{ 'notification.subject-required' | translate }}
             </mat-error>
+            <mat-hint>{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}</mat-hint>
           </mat-form-field>
-          <mat-form-field class="mat-block">
+          <mat-form-field class="mat-block tb-form-fields">
             <mat-label translate>notification.message</mat-label>
             <input matInput formControlName="defaultTextTemplate" required>
             <mat-error *ngIf="templateNotificationForm.get('configuration.defaultTextTemplate').hasError('required')">
               {{ 'notification.message-required' | translate }}
             </mat-error>
+            <mat-hint>{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}</mat-hint>
           </mat-form-field>
           <label class="tb-title tb-required"
                  [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}">
@@ -86,6 +87,9 @@
     <mat-step optional *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.PUSH.enabled').value"
       [stepControl]="pushTemplateForm">
       <ng-template matStepLabel>{{ 'notification.web-settings' | translate }}</ng-template>
+      <div class="tb-hint tb-hint-available-params">
+        {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
+      </div>
       <form [formGroup]="pushTemplateForm">
         <mat-form-field class="mat-block" floatLabel="always">
           <mat-label translate>notification.subject</mat-label>
@@ -145,6 +149,9 @@
       [stepControl]="emailTemplateForm">
       <ng-template matStepLabel>{{ 'notification.email-settings' | translate }}</ng-template>
       <ng-template matStepContent>
+        <div class="tb-hint tb-hint-available-params">
+          {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
+        </div>
         <form [formGroup]="emailTemplateForm">
           <mat-form-field class="mat-block" floatLabel="always">
             <mat-label translate>notification.subject</mat-label>
@@ -158,6 +165,9 @@
     <mat-step optional *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.SMS.enabled').value"
               [stepControl]="smsTemplateForm">
       <ng-template matStepLabel>{{ 'notification.sms-settings' | translate }}</ng-template>
+      <div class="tb-hint tb-hint-available-params">
+        {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
+      </div>
       <form [formGroup]="smsTemplateForm">
         <mat-form-field class="mat-block" floatLabel="always">
           <mat-label translate>notification.message</mat-label>
@@ -174,6 +184,9 @@
     <mat-step optional *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.SLACK.enabled').value"
               [stepControl]="slackTemplateForm">
       <ng-template matStepLabel>{{ 'notification.slack-settings' | translate }}</ng-template>
+      <div class="tb-hint tb-hint-available-params">
+        {{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
+      </div>
       <form [formGroup]="slackTemplateForm" fxLayoutGap="8px">
         <mat-form-field class="mat-block" floatLabel="always">
           <mat-label translate>notification.message</mat-label>

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

@@ -18,11 +18,26 @@
 
 :host-context(.tb-fullscreen-dialog .mat-dialog-container) {
   width: 720px;
+  max-height: 100vh;
+
+  .tb-form-fields {
+    margin-bottom: 8px;
+  }
 
   .tb-hint {
     padding: 0;
   }
 
+  .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);
+  }
+
   .delivery-method-container {
     padding-bottom: 8px;
 
@@ -68,9 +83,13 @@
 
     .mat-stepper-horizontal {
       display: flex;
-      flex-direction: column;
       height: 100%;
       overflow: hidden;
+
+      .mat-horizontal-stepper-wrapper {
+        flex: 1 1 100%;
+      }
+
       @media #{$mat-lt-sm} {
         .mat-step-label {
           white-space: normal;
@@ -81,7 +100,7 @@
         }
       }
       .mat-horizontal-content-container {
-        height: 600px;
+        height: 550px;
         max-height: 100%;
         width: 100%;;
         overflow-y: auto;
@@ -122,4 +141,26 @@
       }
     }
   }
+
+  .mat-form-field {
+    .mat-form-field-wrapper {
+      padding-bottom: 0px;
+
+      .mat-form-field-underline {
+        position: initial !important;
+        display: block;
+        margin-top: -1px;
+      }
+
+      .mat-form-field-subscript-wrapper,
+      .mat-form-field-ripple {
+        position: initial !important;
+        display: table;
+      }
+
+      .mat-form-field-subscript-wrapper {
+        min-height: calc(1em + 1px);
+      }
+    }
+  }
 }

ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.ts

@@ -18,7 +18,6 @@ import {
   NotificationDeliveryMethod,
   NotificationDeliveryMethodTranslateMap,
   NotificationTemplate,
-  NotificationTemplateTypeTranslateMap,
   NotificationType
 } from '@shared/models/notification.models';
 import { Component, Inject, OnDestroy, ViewChild } from '@angular/core';
@@ -66,7 +65,6 @@ export class TemplateNotificationDialogComponent
 
   notificationTypes = Object.keys(NotificationType) as NotificationType[];
   notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[];
-  notificationTemplateTypeTranslateMap = NotificationTemplateTypeTranslateMap;
   notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
 
   selectedIndex = 0;

ui-ngx/src/app/shared/components/entity/entity-type-select.component.scss

@@ -24,7 +24,6 @@
      width: 100%;
   }
   .mat-select-value {
-    max-width: 200px;
     min-width: 100px;
   }
 }

ui-ngx/src/app/shared/components/notification/notification.component.html

@@ -28,8 +28,8 @@
     </mat-icon>
   </ng-template>
   <div class="content" fxFlex>
-    <div class="title">{{ notification.subject }}</div>
-    <div class="message">{{ notification.text }}</div>
+    <div class="title" [innerHTML]="(notification.subject | safe: 'html' )"></div>
+    <div class="message" [innerHTML]="(notification.text  | safe: 'html' )"></div>
     <button *ngIf="showButton" mat-stroked-button class="button"
             [ngStyle]="{color: notification.additionalConfig.actionButtonConfig.color}"
             (click)="navigate($event)">

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

@@ -250,9 +250,9 @@ export const NotificationRequestStatusTranslateMap = new Map<NotificationRequest
 ]);
 
 export enum SlackChanelType {
-  DIRECT= 'DIRECT',
   PUBLIC_CHANNEL = 'PUBLIC_CHANNEL',
-  PRIVATE_CHANNEL = 'PRIVATE_CHANNEL'
+  PRIVATE_CHANNEL = 'PRIVATE_CHANNEL',
+  DIRECT= 'DIRECT'
 }
 
 export const SlackChanelTypesTranslateMap = new Map<SlackChanelType, string>([

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

@@ -2695,6 +2695,7 @@
         "add-rule": "Add rule",
         "add-target": "Add recipient",
         "add-template": "Add template",
+        "after": "After",
         "alarm-comment-trigger-settings": "Alarm comment trigger settings",
         "alarm-trigger-settings": "Alarm trigger settings",
         "all": "All",
@@ -2746,7 +2747,6 @@
         "entity-action-trigger-settings": "Entity action trigger settings",
         "entity-type": "Entity type",
         "filter": "Filter",
-        "filter-by": "Filter by",
         "first-recipient": "First recipient",
         "hierarchy-of-receiving": "Hierarchy of receiving notifications",
         "inbox": "Inbox",