UI: Fixed minnor bug in notification system

ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts

@@ -92,7 +92,7 @@ export class NotificationBellComponent implements OnDestroy {
         },
         {maxHeight: '90vh', height: '100%', padding: '10px'},
         {width: '400px', minWidth: '100%', maxWidth: '100%'},
-        {height: '100%', flexDirection: 'column', boxSizing: 'border-box', display: 'flex'}, false);
+        {height: '100%', flexDirection: 'column', boxSizing: 'border-box', display: 'flex', margin: '0 -16px'}, false);
       showNotificationPopover.tbComponentRef.instance.popoverComponent = showNotificationPopover;
     }
   }

ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" fxLayoutAlign="space-between center" style="margin-bottom: 4px; min-height: 36px">
+<section fxLayout="row" fxLayoutAlign="space-between center" style="margin: 0 10px 4px; min-height: 36px">
   <div style="font-weight: 500; letter-spacing: .25px" translate>notification.notification</div>
   <button mat-button color="primary"
           *ngIf="(notifications$ | async).length"

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

@@ -16,6 +16,6 @@
 :host{
   display: block;
   max-width: 400px;
-  width: 350px;
+  min-width: 350px;
   padding: 2px;
 }

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

@@ -214,6 +214,7 @@
         <fieldset class="fields-group tb-margin" formGroupName="triggerConfig">
           <legend translate>notification.filter</legend>
           <tb-entity-type-list required
+                               ignoreAuthorityFilter
                                [allowedEntityTypes]="entityTypes"
                                formControlName="entityTypes">
           </tb-entity-type-list>

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts

@@ -136,6 +136,7 @@ export class SentNotificationDialogComponent extends
     if (data.request) {
       this.notificationRequestForm.reset({}, {emitEvent: false});
       this.notificationRequestForm.patchValue(this.data.request, {emitEvent: false});
+      this.notificationRequestForm.get('template.name').setValue(guid());
       let useTemplate = true;
       if (isDefinedAndNotNull(this.data.request.template)) {
         useTemplate = false;

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

@@ -36,13 +36,11 @@
     </button>
   </div>
   <div class="description" fxLayout="column" fxLayoutAlign="start end">
-    <div fxLayout="row" fxLayoutAlign="end center" class="mark-read">
+    <span class="time">{{ notification.createdTime ?? currentDate | dateAgo }}</span>
-      <span class="time">{{ notification.createdTime ?? currentDate | dateAgo }}</span>
+    <button mat-icon-button (click)="markRead($event)" *ngIf="!hideMarkAsReadButton"
-      <button mat-icon-button class="tb-mat-28" (click)="markRead($event)" *ngIf="!hideMarkAsReadButton"
+            matTooltip="{{ 'notification.mark-as-read' | translate }}" matTooltipPosition="above">
-        matTooltip="{{ 'notification.mark-as-read' | translate }}" matTooltipPosition="above">
+      <mat-icon>check_circle_outline</mat-icon>
-        <mat-icon>check_circle_outline</mat-icon>
+    </button>
-      </button>
-    </div>
     <div class="alarm-severity" *ngIf="notification.type === notificationType.ALARM"
          [ngStyle]="{backgroundColor: alarmColorSeverity(0.06)}">
       <span [ngStyle]="notificationIconColor()" class="severity">

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

@@ -16,7 +16,7 @@
 :host {
 
   .notification {
-    padding: 10px;
+    padding: 10px 0 10px 10px;
     display: block;
     border: 1px solid;
     border-radius: 4px;
@@ -51,14 +51,11 @@
     min-width: 70px;
     color: rgba(0, 0, 0, 0.54);
 
-    .mark-read {
-      margin-bottom: 6px;
-    }
-
     .time {
       font-size: 12px;
       letter-spacing: 0.25px;
-      margin: 0 4px;
+      margin-right: 12px;
+      margin-top: 4px;
     }
 
     .alarm-severity {

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

@@ -109,7 +109,7 @@ export class NotificationComponent implements OnInit {
           stateObject.id = this.notification.additionalConfig.actionButtonConfig.dashboardState;
           state = objToBase64URI([ stateObject ]);
         }
-        link = `/dashboards/${this.notification.additionalConfig.actionButtonConfig.dashboardId}`
+        link = `/dashboards/${this.notification.additionalConfig.actionButtonConfig.dashboardId}`;
         if (state) {
           link += `?state=${state}`;
         }

ui-ngx/src/app/shared/components/slack-conversation-autocomplete.component.ts

@@ -17,7 +17,7 @@
 import { Component, ElementRef, forwardRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Observable, of, ReplaySubject } from 'rxjs';
-import { debounceTime, map, share, switchMap, tap } from 'rxjs/operators';
+import { catchError, debounceTime, map, share, switchMap, tap } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
@@ -201,6 +201,7 @@ export class SlackConversationAutocompleteComponent implements ControlValueAcces
         fetchObservable = of([]);
       }
       this.slackConversetionFetchObservable$ = fetchObservable.pipe(
+        catchError(() => of([])),
         share({
           connector: () => new ReplaySubject(1),
           resetOnError: false,