feat(web): UpdateModule for letting the user to be notified about new app version

Author: myflowpl

apps/web/ngsw-config.json

@@ -1,5 +1,9 @@
 {
   "index": "/index.html",
+  "appData": {
+    "version": "",
+    "changelog": ""
+  },
   "assetGroups": [
     {
       "name": "app",

apps/web/src/app/app.component.html

@@ -1,5 +1,6 @@
 <div style="text-align:center">
   <h1>Welcome to {{title}}!</h1>
+  <h2>4</h2>
   <img
     width="300"
     src="https://slackmap.com/assets/logo.svg"

apps/web/src/app/app.module.ts

@@ -6,14 +6,16 @@ import { RouterModule } from '@angular/router';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { UpdateModule } from './update';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
     RouterModule.forRoot([], { initialNavigation: 'enabled' }),
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    UpdateModule
   ],
   providers: [],
   bootstrap: [AppComponent]

apps/web/src/app/update/index.ts

@@ -0,0 +1,2 @@
+export * from './update.module';
+export * from './update.service';

apps/web/src/app/update/update-dialog/update-dialog.component.html

@@ -0,0 +1,14 @@
+<h2 mat-dialog-title>New version available</h2>
+<mat-dialog-content class="mat-typography">
+  <h3>Update now ??</h3>
+  <p>
+    Your version <b>{{data.current?.appData?.version || 0}}</b> available <b>{{data.available?.appData?.version || 0}}</b>
+  </p>
+  <p *ngIf="data.current?.appData?.changelog">
+    Changes: {{data.current?.appData?.changelog}}
+  </p>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Not now, later</button>
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install & Reload</button>
+</mat-dialog-actions>

tools/schematics/.gitkeep …date-dialog/update-dialog.component.scsstools/schematics/.gitkeep renamed to apps/web/src/app/update/update-dialog/update-dialog.component.scss tools/schematics/.gitkeep renamed to apps/web/src/app/update/update-dialog/update-dialog.component.scss

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateDialogComponent } from './update-dialog.component';
+
+describe('UpdateDialogComponent', () => {
+  let component: UpdateDialogComponent;
+  let fixture: ComponentFixture<UpdateDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UpdateDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UpdateDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/web/src/app/update/update-dialog/update-dialog.component.spec.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
+
+export interface Version {
+  hash: string;
+  appData?: any;
+}
+export interface UpdateAvailableEvent {
+  type: 'UPDATE_AVAILABLE';
+  current: Version;
+  available: Version;
+}
+
+@Component({
+  selector: 'sm-update-dialog',
+  templateUrl: './update-dialog.component.html',
+  styleUrls: ['./update-dialog.component.scss']
+})
+export class UpdateDialogComponent implements OnInit {
+
+  constructor(
+    public dialogRef: MatDialogRef<UpdateDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: UpdateAvailableEvent) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+  ngOnInit() {
+  }
+
+}

apps/web/src/app/update/update-dialog/update-dialog.component.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdateService } from './update.service';
+import { UpdateDialogComponent } from './update-dialog/update-dialog.component';
+import { MatDialogModule } from '@angular/material';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatDialogModule
+  ],
+  declarations: [UpdateDialogComponent],
+  entryComponents: [UpdateDialogComponent]
+})
+export class UpdateModule {
+  constructor(service: UpdateService) {
+
+  }
+ }

apps/web/src/app/update/update.module.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UpdateService } from './update.service';
+
+describe('UpdateService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UpdateService = TestBed.get(UpdateService);
+    expect(service).toBeTruthy();
+  });
+});