[#877] Apply formatting and linting to NS and notifications module

ui/.eslintignore

@@ -31,5 +31,3 @@ src/app/editor
 src/app/files
 src/app/info
 src/app/login
-src/app/notifications
-src/app/NS

ui/.prettierignore

@@ -31,5 +31,3 @@ src/app/editor
 src/app/files
 src/app/info
 src/app/login
-src/app/notifications
-src/app/NS

ui/src/app/NS/XS.service.spec.ts

@@ -19,16 +19,16 @@
 import { XsService } from './xs.service';
 
 describe('XSService', () => {
-  const service: XsService = new XsService();
+    const service: XsService = new XsService();
 
-  it('should get string XS String', () => {
-    expect(service.XS_STRING).toBe('xs:string');
-  });
+    it('should get string XS String', () => {
+        expect(service.XS_STRING).toBe('xs:string');
+    });
 
-  it('should check for numbers', () => {
-    expect(service.isNumber(service.XS_DOUBLE)).toBeTrue();
-    expect(service.isNumber(service.XS_INTEGER)).toBeTrue();
-    expect(service.isNumber(service.XS_NUMBER)).toBeTrue();
-    expect(service.isNumber(service.XS_STRING)).toBeFalse();
-  });
+    it('should check for numbers', () => {
+        expect(service.isNumber(service.XS_DOUBLE)).toBeTrue();
+        expect(service.isNumber(service.XS_INTEGER)).toBeTrue();
+        expect(service.isNumber(service.XS_NUMBER)).toBeTrue();
+        expect(service.isNumber(service.XS_STRING)).toBeFalse();
+    });
 });

ui/src/app/NS/xs.service.ts

@@ -20,19 +20,19 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class XsService {
+    XS_STRING = 'xs:string';
+    XS_INTEGER = 'http://www.w3.org/2001/XMLSchema#integer';
+    XS_DOUBLE = 'http://www.w3.org/2001/XMLSchema#double';
+    XS_BOOLEAN = 'http://www.w3.org/2001/XMLSchema#boolean';
+    XS_NUMBER = 'http://www.w3.org/2001/XMLSchema#number';
+    XS_STRING1 = 'http://www.w3.org/2001/XMLSchema#string';
+    SO_URL = 'https://schema.org/URL';
 
-  XS_STRING = 'xs:string';
-  XS_INTEGER = 'http://www.w3.org/2001/XMLSchema#integer';
-  XS_DOUBLE = 'http://www.w3.org/2001/XMLSchema#double';
-  XS_BOOLEAN = 'http://www.w3.org/2001/XMLSchema#boolean';
-  XS_NUMBER = 'http://www.w3.org/2001/XMLSchema#number';
-  XS_STRING1 = 'http://www.w3.org/2001/XMLSchema#string';
-  SO_URL = 'https://schema.org/URL';
-
-  isNumber(datatype: string): boolean {
-    return datatype === this.XS_DOUBLE ||
-      datatype === this.XS_INTEGER ||
-      datatype === this.XS_NUMBER;
-  }
-
+    isNumber(datatype: string): boolean {
+        return (
+            datatype === this.XS_DOUBLE ||
+            datatype === this.XS_INTEGER ||
+            datatype === this.XS_NUMBER
+        );
+    }
 }

ui/src/app/notifications/components/notification-item.component.html

@@ -18,11 +18,12 @@
 <div class="notification-item">
     <div class="i">
         <div class="head">
-            <span class="time">{{notification.createdAt | date: 'yyyy-MM-dd HH:mm:ss'}}</span>
+            <span class="time">{{
+                notification.createdAt | date : 'yyyy-MM-dd HH:mm:ss'
+            }}</span>
         </div>
         <div class="notification-box sp-accent-bg">
             <div [innerHTML]="sanitizedMessage"></div>
         </div>
     </div>
-
 </div>

ui/src/app/notifications/components/notification-item.component.scss

@@ -52,4 +52,4 @@
 
 .notification-item {
     margin-top: 30px;
-}
+}

ui/src/app/notifications/components/notification-item.component.ts

@@ -20,20 +20,19 @@ import { NotificationItem } from '../model/notifications.model';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
-    selector: 'notification-item',
+    selector: 'sp-notification-item',
     templateUrl: './notification-item.component.html',
-    styleUrls: ['./notification-item.component.scss']
+    styleUrls: ['./notification-item.component.scss'],
 })
 export class NotificationItemComponent implements OnInit {
-
     @Input() notification: NotificationItem;
     sanitizedMessage;
 
-    constructor(private domSanitizer: DomSanitizer) {
-
-    }
+    constructor(private domSanitizer: DomSanitizer) {}
 
     ngOnInit(): void {
-        this.sanitizedMessage = this.domSanitizer.bypassSecurityTrustHtml(this.notification.message);
+        this.sanitizedMessage = this.domSanitizer.bypassSecurityTrustHtml(
+            this.notification.message,
+        );
     }
 }

ui/src/app/notifications/notifications.component.html

@@ -17,59 +17,116 @@
   -->
 
 <div fxLayout="column" class="page-container page-container-max-height">
-    <div fxLayout="row" style="padding:0px;" class="sp-tab-bg">
+    <div fxLayout="row" style="padding: 0px" class="sp-tab-bg">
         <div fxFlex="100" class="page-container-nav">
             <div fxFlex="100" fxLayout="row">
                 <div fxFlex fxLayoutAlign="start center">
                     <mat-tab-group color="accent">
                         <mat-tab label="My Notifications"></mat-tab>
                     </mat-tab-group>
                 </div>
-                <div fxFlex fxLayoutAlign="end center" class="mr-20">
-
-                </div>
+                <div fxFlex fxLayoutAlign="end center" class="mr-20"></div>
             </div>
         </div>
     </div>
-    <div class="container-fluid marketplace-container" *ngIf="notificationsLoading" fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
+    <div
+        class="container-fluid marketplace-container"
+        *ngIf="notificationsLoading"
+        fxFlex="100"
+        fxLayoutAlign="center center"
+        fxLayout="column"
+    >
         <mat-spinner [mode]="'indeterminate'" [diameter]="20"></mat-spinner>
         <h4>Loading notifications...</h4>
     </div>
-    <div class="fixed-height page-container-padding-inner" *ngIf="!notificationsLoading && !pipelinesWithNotificationsPresent" fxFlex="100" fxLayoutAlign="center center" fxLayout="row">
-        <h4>No notifications available. Create a new pipeline using the Notification Sink to create your first notification!</h4>
+    <div
+        class="fixed-height page-container-padding-inner"
+        *ngIf="!notificationsLoading && !pipelinesWithNotificationsPresent"
+        fxFlex="100"
+        fxLayoutAlign="center center"
+        fxLayout="row"
+    >
+        <h4>
+            No notifications available. Create a new pipeline using the
+            Notification Sink to create your first notification!
+        </h4>
     </div>
-    <div class="fixed-height page-container-padding-inner" fxLayout="row" fxFlex="100" *ngIf="!notificationsLoading && pipelinesWithNotificationsPresent">
+    <div
+        class="fixed-height page-container-padding-inner"
+        fxLayout="row"
+        fxFlex="100"
+        *ngIf="!notificationsLoading && pipelinesWithNotificationsPresent"
+    >
         <div fxFlex="30" class="notifications-overview scrolling-auto">
             <mat-list>
-                <mat-list-item *ngFor="let existingNotification of existingNotifications"
-                               (click)="selectNotification(existingNotification)" class="list-item"
-                               [ngClass]="{'selected-notification':
-                               existingNotification.notificationId === currentlySelectedNotificationId}">
-                    <div mat-list-avatar
-                         class="notification-avatar sp-accent-bg">{{elementIconText.getElementIconText(existingNotification.pipelineName)}}
+                <mat-list-item
+                    *ngFor="let existingNotification of existingNotifications"
+                    (click)="selectNotification(existingNotification)"
+                    class="list-item"
+                    [ngClass]="{
+                        'selected-notification':
+                            existingNotification.notificationId ===
+                            currentlySelectedNotificationId
+                    }"
+                >
+                    <div
+                        mat-list-avatar
+                        class="notification-avatar sp-accent-bg"
+                    >
+                        {{
+                            elementIconText.getElementIconText(
+                                existingNotification.pipelineName
+                            )
+                        }}
                     </div>
-                    <h4 mat-line>{{existingNotification.pipelineName}}</h4>
-                    <p mat-line>{{existingNotification.notificationTitle}} </p>
+                    <h4 mat-line>{{ existingNotification.pipelineName }}</h4>
+                    <p mat-line>{{ existingNotification.notificationTitle }}</p>
                     <div class="new-notification-info-panel">
-                        <div class="new-notification-info"
-                             *ngIf="currentlySelectedNotificationId != existingNotification.notificationId &&
-                             newNotificationInfo[existingNotification.notificationId]"></div>
+                        <div
+                            class="new-notification-info"
+                            *ngIf="
+                                currentlySelectedNotificationId !==
+                                    existingNotification.notificationId &&
+                                newNotificationInfo[
+                                    existingNotification.notificationId
+                                ]
+                            "
+                        ></div>
                     </div>
                 </mat-list-item>
             </mat-list>
         </div>
         <div fxFlex="70" class="notifications-details">
             <div class="notification-details-wrapper">
-                <div class="notification-header" fxLayout="column" fxLayoutAlign="center start">
-                    <div class="notification-header-pipeline-name">{{currentlySelectedNotification.pipelineName}}</div>
-                    <div class="notification-header-notification-name">{{currentlySelectedNotification.notificationTitle}}</div>
-                    <hr class="header-divider"/>
+                <div
+                    class="notification-header"
+                    fxLayout="column"
+                    fxLayoutAlign="center start"
+                >
+                    <div class="notification-header-pipeline-name">
+                        {{ currentlySelectedNotification.pipelineName }}
+                    </div>
+                    <div class="notification-header-notification-name">
+                        {{ currentlySelectedNotification.notificationTitle }}
+                    </div>
+                    <hr class="header-divider" />
                 </div>
-                <div #notificationPane class="notification-pane" (scroll)="onScroll()" *ngIf="currentlySelectedNotificationId">
-                    <notification-item [notification]="notification" *ngFor="let notification of allNotifications.get(currentlySelectedNotificationId)"></notification-item>
+                <div
+                    #notificationPane
+                    class="notification-pane"
+                    (scroll)="onScroll()"
+                    *ngIf="currentlySelectedNotificationId"
+                >
+                    <sp-notification-item
+                        [notification]="notification"
+                        *ngFor="
+                            let notification of allNotifications.get(
+                                currentlySelectedNotificationId
+                            )
+                        "
+                    ></sp-notification-item>
                 </div>
             </div>
-
         </div>
     </div>
 </div>

ui/src/app/notifications/notifications.component.scss

@@ -32,7 +32,7 @@
 }
 
 .mr-20 {
-    margin-right:20px;
+    margin-right: 20px;
 }
 
 .notifications-overview {
@@ -60,11 +60,11 @@
 }
 
 .header-divider {
-    display:flex;
+    display: flex;
     align-self: center;
     margin: 10px 20px;
     width: 100%;
-    border-top: 2px solid $sp-color-accent
+    border-top: 2px solid $sp-color-accent;
 }
 
 .notification-header-pipeline-name {
@@ -83,17 +83,17 @@
 }
 
 .list-item:hover {
-    background: #E0E0E0;
+    background: #e0e0e0;
     cursor: pointer;
 }
 
 .selected-notification {
-    background: #E0E0E0;
+    background: #e0e0e0;
     cursor: pointer;
 }
 
 .list-item {
-    border-bottom: 1px solid #BDBDBD;
+    border-bottom: 1px solid #bdbdbd;
 }
 
 .notification-pane {
@@ -111,7 +111,7 @@
 
 .scrolling-auto {
     overflow: auto;
-    width:100%;
+    width: 100%;
 }
 
 .new-notification-info {
@@ -120,4 +120,3 @@
     height: 10px;
     border-radius: 50%;
 }
-