Global dialog service (#200)

* including global dialog service, fixing unit test, and including shared module to core module

* removing extra space

* Update src/app/modules/core/components/global-dialog/global-dialog.component.ts

Co-authored-by: Raul Jordan <[email protected]>

src/app/modules/core/components/global-dialog/global-dialog.component.html

@@ -0,0 +1,17 @@
+<h1 mat-dialog-title>{{title}}</h1>
+<div mat-dialog-content>
+  <p>
+    {{content}}
+  </p>
+  <div *ngIf="alert" class="rounded-lg bg-indigo-700 leading-normal p-5 overflow-auto">
+    <p *ngIf="!isInstanceOfError()">
+      {{alert.message}}
+    </p>
+    <pre *ngIf="isInstanceOfError()">
+      {{alert.message | json}}
+    </pre>
+  </div>
+</div>
+<mat-dialog-actions align="end">
+    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Close</button>
+</mat-dialog-actions>

src/app/modules/core/components/global-dialog/global-dialog.component.ts

@@ -0,0 +1,33 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { DialogConfig, DialogConfigMessage, DialogContentAlert } from './model/interfaces';
+
+@Component({
+    selector: 'app-global-dialog',
+    templateUrl: 'global-dialog.component.html'
+})
+export class GlobalDialogComponent implements OnInit {
+    constructor(@Inject(MAT_DIALOG_DATA) public data: DialogConfigMessage) { }
+
+    title = '';
+    content = '';
+
+    alert: DialogContentAlert | null | undefined = null;
+
+    ngOnInit(): void {
+        const dialogConfig: DialogConfig = this.data.payload;
+        this.title = dialogConfig.title;
+        this.content = dialogConfig.content;
+        this.alert = dialogConfig.alert;
+
+        console.log(dialogConfig.alert);
+    }
+
+    isInstanceOfError(): boolean {
+        if (this.alert){
+            return this.alert.message instanceof Error || this.alert.message instanceof HttpErrorResponse;
+        }
+        return false;
+    }
+}

src/app/modules/core/components/global-dialog/global-dialog.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { GlobalDialogComponent } from './global-dialog.component';
+import { DialogConfigMessage } from './model/interfaces';
+@Injectable()
+export class GlobalDialogService {
+
+    constructor(public dialog: MatDialog) { }
+
+    open(message: DialogConfigMessage): void {
+       this.dialog.open(GlobalDialogComponent, {
+            data: message
+       });
+    }
+
+    close(): void {
+       this.dialog.closeAll();
+    }
+}

src/app/modules/core/components/global-dialog/model/interfaces.ts

@@ -0,0 +1,17 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { DialogContentAlertType } from './types';
+
+export interface DialogConfigMessage {
+    payload: DialogConfig;
+}
+
+export interface DialogConfig {
+    title: string;
+    content: string;
+    alert?: DialogContentAlert;
+}
+
+export interface DialogContentAlert {
+    type: DialogContentAlertType;
+    message: string | Error | HttpErrorResponse;
+}

src/app/modules/core/components/global-dialog/model/types.ts

@@ -0,0 +1,5 @@
+export enum DialogContentAlertType {
+    ERROR = 'ERROR',
+    WARNING = 'WARNING',
+    INFO = 'INFO'
+}

src/app/modules/core/core.module.ts

@@ -1,13 +1,22 @@
-import { ErrorHandler, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { ENVIRONMENT } from '../../../environments/token';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { NgModule } from '@angular/core';
 import { environment } from '../../../environments/environment';
+import { ENVIRONMENT } from '../../../environments/token';
 import { JwtInterceptor } from './interceptors/jwt.interceptor';
 import { MockInterceptor } from './interceptors/mock.interceptor';
 
+import { GlobalDialogComponent } from './components/global-dialog/global-dialog.component';
+
+import { GlobalDialogService } from './components/global-dialog/global-dialog.service';
+import { SharedModule } from '../shared/shared.module';
+
+const components = [
+    GlobalDialogComponent
+];
+
 const commonProviders = [
+    GlobalDialogService,
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
     { provide: ENVIRONMENT, useValue: environment },
 ];
@@ -16,15 +25,22 @@ const mockProviders = [
     { provide: HTTP_INTERCEPTORS, useClass: MockInterceptor, multi: true }
 ];
 
+const prysmModules = [
+    SharedModule
+];
+
 @NgModule({
-    declarations: [],
+    declarations: [
+        ...components
+    ],
     imports: [
         CommonModule,
-        HttpClientModule
+        HttpClientModule,
+        ... prysmModules
     ],
     providers: [
         ... commonProviders,
-        ... environment.mockInterceptor ? mockProviders : [],
+        ... environment.mockInterceptor ? mockProviders : []
     ],
   })
 export class CoreModule {}

src/app/modules/dashboard/components/latest-gist-feature/latest-gist-feature.component.spec.ts

@@ -1,8 +1,7 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { LatestGistFeatureComponent } from './latest-gist-feature.component';
-import { SharedModule } from '../../../shared/shared.module';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+
 
 describe('LatestGistFeatureComponent', () => {
   let component: LatestGistFeatureComponent;

src/app/modules/dashboard/components/version/version.component.spect.ts → src/app/modules/dashboard/components/version/version.component.spec.ts

@@ -1,9 +1,13 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MockService } from 'ng-mocks';
+import { of } from 'rxjs';
+import { ValidatorService } from 'src/app/modules/core/services/validator.service';
 import { SharedModule } from '../../../shared/shared.module';
 import { VersionComponent } from './version.component';
 
 describe('VersionComponent', () => {
+  const validatorService = MockService(ValidatorService);
   let component: VersionComponent;
   let fixture: ComponentFixture<VersionComponent>;
 
@@ -13,6 +17,9 @@ describe('VersionComponent', () => {
         SharedModule,
         BrowserAnimationsModule
       ],
+      providers: [
+        {provide: ValidatorService, useValue: validatorService}
+      ],
       declarations: [
         VersionComponent,
       ]
@@ -21,6 +28,7 @@ describe('VersionComponent', () => {
   }));
 
   beforeEach(() => {
+    validatorService.version$ = of({beacon: 'test', validator: 'test'});
     fixture = TestBed.createComponent(VersionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/modules/dashboard/dashboard.component.ts

@@ -37,11 +37,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
           icon: 'list',
           path: '/dashboard/wallet/accounts',
         },
-        {
-          name: 'Slashing Protection',
-          icon: 'shield',
-          path: '/dashboard/wallet/slashing-protection',
-        },
         {
           name: 'Wallet Information',
           path: '/dashboard/wallet/details',

src/app/modules/wallet/wallet.routing.module.ts

@@ -33,13 +33,6 @@ const routes: Routes = [
           },
         ],
       },
-      {
-        path: 'slashing-protection',
-        data: {
-          breadcrumb: 'Slashin Protection',
-        },
-        component: SlashingProtectionComponent,
-      },
       {
         path: 'details',
         data: {