add a way to test windows notifications

src/app/components/options/options.component.html

@@ -27,8 +27,12 @@ <h3>Notifications</h3>
     </div>
     <div class="options-item">
       <span>Browser</span>
-      <input type="checkbox" [(ngModel)]="settings.notifications.browser">
+      <input type="checkbox" (click)="onEnableBrowserNotifications($event)" [(ngModel)]="enableBrowserNotifications">
       <i>send push notifications</i>
+      <span *ngIf="enableBrowserNotifications" class="test-browser-notification"
+            title="test browser notification" (click)="onBrowserNotificationTest()">
+        test
+        <i class="icon icon-bubble"></i></span>
     </div>
     <div class="options-item">
       <span>Slack</span>

src/app/components/options/options.component.scss

@@ -59,3 +59,9 @@
   padding: 10px 0;
   border-top: 1px dashed $border-color;
 }
+
+.test-browser-notification {
+  margin-left: 10px;
+  text-decoration: underline;
+  cursor: pointer;
+}

src/app/components/options/options.component.ts

@@ -7,6 +7,7 @@ import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {SlackClient} from '../../services/slackClient';
 import {BackgroundService} from '../../services/background.service';
 import {DisposableComponent} from '../../../core/disposable-component';
+import {NotificationService} from '../../services/notification.service';
 
 class StatusMessage {
   message!: string;
@@ -24,6 +25,7 @@ export class OptionsComponent extends DisposableComponent implements OnInit {
   settings: ExtensionSettings;
   statusMessage?: StatusMessage;
 
+  enableBrowserNotifications: boolean;
   enableSlackNotifications: boolean;
   slackSettings: SlackSettings;
   bitbucketSettings: BitbucketSettings;
@@ -34,11 +36,13 @@ export class OptionsComponent extends DisposableComponent implements OnInit {
     private settingsService: DataService,
     private bitbucketService: BitbucketService,
     private backgroundService: BackgroundService,
+    private notificationService: NotificationService,
     private cd: ChangeDetectorRef) {
     super();
 
     this.settings = settingsService.getExtensionSettings();
 
+    this.enableBrowserNotifications = !!this.settings.notifications.browser;
     this.enableSlackNotifications = !!this.settings.notifications.slack;
     this.slackSettings = this.settings.notifications.slack || new SlackSettings();
     this.bitbucketSettings = this.settings.bitbucket || new BitbucketSettings();
@@ -139,5 +143,36 @@ export class OptionsComponent extends DisposableComponent implements OnInit {
 
     chrome.permissions.request({origins: origins}, (d) => callback(d));
   }
+
+  onEnableBrowserNotifications(event: MouseEvent) {
+    if (!this.enableBrowserNotifications) {
+      this.notificationService
+        .requestPermission()
+        .subscribe(permission => {
+          console.debug('permission:', permission);
+          if (permission === 'granted') {
+            this.settings.notifications.browser = true;
+          } else {
+            this.enableBrowserNotifications = false;
+            this.settings.notifications.browser = false;
+          }
+        });
+    } else {
+      this.settings.notifications.browser = false;
+    }
+  }
+
+  onBrowserNotificationTest() {
+    this.notificationService
+      .requestPermission()
+      .subscribe(permission => {
+        if (permission === 'granted') {
+          new Notification('test', {
+            icon: 'icon64.png',
+            body: 'hello'
+          });
+        }
+      });
+  }
 }
 

src/app/models/models.ts

@@ -1,19 +1,52 @@
-import {BitbucketCommentAction, PullRequestActivityAction, PullRequestRole, PullRequestState, PullRequestStatus} from './enums';
+import {
+  BitbucketCommentAction,
+  PullRequestActivityAction,
+  PullRequestRole,
+  PullRequestState,
+  PullRequestStatus
+} from './enums';
 
 export class ExtensionSettings {
-  bitbucket?: BitbucketSettings = new BitbucketSettings(undefined);
+  bitbucket?: BitbucketSettings = new BitbucketSettings();
   refreshIntervalInMinutes: number = 1;
-  notifications: { browser: boolean, slack?: SlackSettings } = {browser: true};
+  notifications: NotificationSettings = new NotificationSettings();
 
   constructor(data?: ExtensionSettings) {
     if (data) {
       Object.assign(this, data, {
-        bitbucket: new BitbucketSettings(data.bitbucket)
+        bitbucket: new BitbucketSettings(data.bitbucket),
+        notifications: new NotificationSettings(data.notifications)
       });
     }
   }
 }
 
+export class NotificationSettings {
+  browser = true;
+  slack?: SlackSettings;
+  events: NotificationEvents = new NotificationEvents();
+
+  constructor(data?: NotificationSettings) {
+    if (data) {
+      Object.assign(this, data, {
+        events: new NotificationEvents(data.events)
+      });
+    }
+  }
+}
+
+export class NotificationEvents {
+  pullRequestCreated = true;
+  pullRequestStateChanged = true;
+  commentAdded = true;
+
+  constructor(data?: NotificationEvents) {
+    if (data) {
+      Object.assign(this, data);
+    }
+  }
+}
+
 export class SlackSettings {
   token!: string;
   memberId!: string;

src/app/services/notification.service.ts

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {DataService} from './data.service';
 import {SlackClient, SlackMessageOptions} from './slackClient';
 import {catchError} from 'rxjs/operators';
-import {of, throwError} from 'rxjs';
+import {from, Observable, of, throwError} from 'rxjs';
 import {NotificationOptions, PullRequestIssue} from '../models/models';
 import {BitbucketService} from './bitbucket.service';
 import {PullRequestActivityAction} from '../models/enums';
@@ -14,12 +14,12 @@ export class NotificationService {
   constructor(private dataService: DataService, private bitbucketService: BitbucketService) {
   }
 
-  private requestPermission(): Promise<NotificationPermission> {
+  public requestPermission(): Observable<NotificationPermission> {
     if (Notification.permission !== 'denied') {
-      return Notification.requestPermission();
+      return from(Notification.requestPermission());
     }
 
-    return new Promise<NotificationPermission>(() => Notification.permission);
+    return of(Notification.permission);
   }
 
   sendNotification(options: NotificationOptions) {
@@ -34,7 +34,7 @@ export class NotificationService {
 
     if (extensionSettings.notifications.browser) {
       this.requestPermission()
-        .then(permission => {
+        .subscribe(permission => {
           if (permission === 'granted') {
             let body = GetWindowsNotificationBody(options.action);