Merge pull request #119 from leaphy-robotics/release-info

feat: add change log and version system

package.json

@@ -3,7 +3,7 @@
     "productName": "Leaphy Webbased",
     "author": "Leaphy Robotics",
     "description": "Build Leaphy Arduino programs",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "license": "GPLv3",
     "main": "src/main.ts",
     "scripts": {
@@ -52,6 +52,7 @@
         "papaparse": "^5.4.1",
         "prismjs": "^1.28.0",
         "rxjs": "~7.5.5",
+        "showdown": "^2.1.0",
         "stream-browserify": "^3.0.0",
         "tslib": "^2.4.0",
         "zone.js": "~0.11.5"

src/app/effects/app.effects.ts

@@ -7,6 +7,10 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { StatusMessageDialog } from '../modules/core/dialogs/status-message/status-message.dialog';
 import { Router } from '@angular/router';
 import { CodeEditorType } from '../domain/code-editor.type';
+import {LocalStorageService} from "../services/localstorage.service";
+import {MatDialog} from "@angular/material/dialog";
+import {ChangeLogDialog} from "../modules/core/dialogs/change-log/change-log.dialog";
+import showdown from "showdown";
 
 @Injectable({
     providedIn: 'root',
@@ -19,7 +23,10 @@ export class AppEffects {
         private translate: TranslateService,
         private backEndState: BackEndState,
         private snackBar: MatSnackBar,
-        private router: Router) {
+        private router: Router,
+        private localStorage: LocalStorageService,
+        private dialog: MatDialog
+    ) {
 
         // Use the current language to translate the angular strings
         this.appState.currentLanguage$
@@ -69,5 +76,63 @@ export class AppEffects {
                     data: message
                 })
             });
+
+        this.appState.releaseInfo$
+            .pipe(filter(releaseInfo => !!releaseInfo))
+            // make sure that the
+            .subscribe(releaseInfo => {
+            if (!releaseInfo) {
+                return;
+            }
+            try {
+                this.localStorage.fetch('releaseVersion');
+            } catch (e) {
+                this.localStorage.store('releaseVersion', '');
+            }
+            if (releaseInfo?.name != this.localStorage.fetch('releaseVersion')) {
+                let releaseNotes = releaseInfo?.body;
+                // convert all the urls to links
+                // first find the urls
+                let urls = releaseNotes.match(/(https?:\/\/[^\s]+)/g);
+                // then replace them with links
+                if (urls) {
+                    // to prevent infinite loops we want to know the index of the last url we replaced
+                    let lastUrlIndex = 0;
+                    urls.forEach(url => {
+                        const link = `<a href="${url}" target="_blank">${url}</a>`;
+                        releaseNotes = releaseNotes.substring(0, releaseNotes.indexOf(url, lastUrlIndex)) + link + releaseNotes.substring(releaseNotes.indexOf(url, lastUrlIndex) + url.length);
+                        lastUrlIndex = releaseNotes.indexOf(link, lastUrlIndex) + link.length;
+                    });
+                }
+                // turn the @mentions into links
+                // first find the @mentions
+                let mentions = releaseNotes.match(/@(\w+)/g);
+                // then replace them with links
+                if (mentions) {
+                    mentions.forEach(mention => {
+                        const username = mention.substring(1);
+                        releaseNotes = releaseNotes.replaceAll(mention, `<a href="https://github.com/${username}" target="_blank">${mention}</a>`);
+                    });
+                }
+
+
+                // convert markdown to html
+                const converter = new showdown.Converter();
+                releaseNotes = converter.makeHtml(releaseNotes);
+
+
+
+
+                this.dialog.open(ChangeLogDialog, {
+                    data: {
+                        title: releaseInfo?.name,
+                        message: releaseNotes,
+                        type: 'info'
+                    }
+                });
+
+            }
+            this.localStorage.store('releaseVersion', releaseInfo?.name);
+        })
     }
 }

src/app/effects/dialog.effects.ts

@@ -7,6 +7,7 @@ import { InfoDialog } from '../modules/core/dialogs/info/info.dialog';
 import { ConfirmEditorDialog } from '../modules/core/dialogs/confirm-editor/confirm-editor.dialog';
 import { LanguageSelectDialog } from '../modules/core/dialogs/language-select/language-select.dialog';
 import {SerialOutputComponent} from "../modules/shared/components/serial-output/serial-output.component";
+import {AppState} from "../state/app.state";
 import {LibraryManagerComponent} from "../modules/shared/components/library-manager/library-manager.component";
 
 @Injectable({
@@ -17,6 +18,7 @@ import {LibraryManagerComponent} from "../modules/shared/components/library-mana
 export class DialogEffects {
 
     constructor(
+        private appState: AppState,
         private dialogState: DialogState,
         private dialog: MatDialog,
     ) {
@@ -80,8 +82,16 @@ export class DialogEffects {
                 this.dialog.open(CreditsDialog, {
                     width: '800px',
                     disableClose: true,
+                }).afterClosed().subscribe(() => {
+                    (async () => {
+                        this.appState.releaseInfoSubject$.next(await fetch("https://api.github.com/repos/leaphy-robotics/leaphy-webbased/releases/latest").then(response => response.json()));
+                    })();
                 });
             });
+        } else {
+            (async () => {
+                this.appState.releaseInfoSubject$.next(await fetch("https://api.github.com/repos/leaphy-robotics/leaphy-webbased/releases/latest").then(response => response.json()));
+            })();
         }
     }
 }

src/app/modules/components/start/start.component.html

@@ -1,4 +1,5 @@
 <div id="start-container">
+    <div class="version-number">{{ (appState.releaseInfo$ | async)?.name }}</div>
     <div>
         <app-robot-selection></app-robot-selection>
     </div>

src/app/modules/components/start/start.component.scss

@@ -5,4 +5,11 @@
   align-items:center;
   justify-content:center;
   flex-direction: column;
-}
+}
+
+.version-number {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: lightgrey;
+  margin-top: 1rem;
+}

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

@@ -19,6 +19,7 @@ import {DragDropModule} from "@angular/cdk/drag-drop";
 import { SelectRobotTypeDialog } from './dialogs/robot-select/robot-select.dialog';
 import {ConnectPythonDialog} from "./dialogs/connect-python/connect-python.dialog";
 import {FileExplorerDialog} from "./dialogs/file-explorer/file-explorer.dialog";
+import {ChangeLogDialog} from "./dialogs/change-log/change-log.dialog";
 
 @NgModule({
     declarations: [
@@ -36,6 +37,7 @@ import {FileExplorerDialog} from "./dialogs/file-explorer/file-explorer.dialog";
         UploadDialog,
         ConnectPythonDialog,
         DebugInformationDialog,
+        ChangeLogDialog,
         InfoDialog
     ],
     imports: [

src/app/modules/core/dialogs/change-log/change-log.dialog.html

@@ -0,0 +1,6 @@
+<div class="container">
+    <h1 id="version-title" class="version-title"></h1>
+    <span size="10"></span>
+    <div id="release-notes">
+    </div>
+</div>

src/app/modules/core/dialogs/change-log/change-log.dialog.scss

@@ -0,0 +1,6 @@
+.version-title {
+    font-size: 3em;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 0.5em;
+}

src/app/modules/core/dialogs/change-log/change-log.dialog.spec.ts

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

src/app/modules/core/dialogs/change-log/change-log.dialog.ts

@@ -0,0 +1,24 @@
+import {AfterViewInit, Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-change-log',
+    templateUrl: './change-log.dialog.html',
+    styleUrls: ['./change-log.dialog.scss']
+})
+export class ChangeLogDialog implements AfterViewInit {
+
+    constructor(
+        @Inject(MAT_DIALOG_DATA) public data: any,
+        public dialogRef: MatDialogRef<ChangeLogDialog>
+    ) {}
+
+    public onConfirm() {
+        this.dialogRef.close();
+    }
+
+    ngAfterViewInit() {
+        document.getElementById("version-title").innerHTML = this.data?.title;
+        document.getElementById("release-notes").innerHTML = this.data?.message;
+    }
+}

src/app/modules/core/dialogs/info/info.dialog.html

@@ -1,7 +1,7 @@
 <div class="info">
   <img class="contributeLogo" src="./assets/contribute-foundation.png" />
   <p>
-    {{"INFO_INTRO"|translate}} 
+    {{"INFO_INTRO"|translate}}
     <a href="https://github.com/leaphy-robotics" target="_blank">{{"INFO_GITHUB"|translate}}</a><br />
   </p>
   <p>
@@ -22,7 +22,7 @@
 
   <div class="version">
     <p>
-      {{appState.packageJsonVersion$ | async}}
+      {{(appState.releaseInfo$ | async)["name"]}}
     </p>
   </div>
 </div>

src/app/modules/core/dialogs/robot-select/robot-select.dialog.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SelectRobotTypeDialog } from './robot-select.dialog';
 
-describe('LanguageSelectComponent', () => {
+describe('RobotSelectComponent', () => {
   let component: SelectRobotTypeDialog;
   let fixture: ComponentFixture<SelectRobotTypeDialog>;
 

src/app/modules/core/dialogs/robot-select/robot-select.dialog.ts

@@ -1,8 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { AppState } from 'src/app/state/app.state';
 import {MAT_DIALOG_DATA} from '@angular/material/dialog';
-import { Inject } from '@angular/core';
 
 @Component({
     selector: 'app-robot-select',

src/app/modules/shared/components/serial-output/serial-output.component.ts

@@ -14,7 +14,7 @@ import {DialogState} from 'src/app/state/dialog.state';
 import {RobotWiredState} from 'src/app/state/robot.wired.state';
 import {MatDialogRef} from "@angular/material/dialog";
 import {unparse} from 'papaparse';
-import { timeStamp } from 'console';
+
 
 @Component({
     selector: 'app-serial-output',

src/app/state/app.state.ts

@@ -5,7 +5,6 @@ import { map, filter } from 'rxjs/operators';
 import { Language } from '../domain/language';
 import { CodeEditorType } from '../domain/code-editor.type';
 import { LocalStorageService } from '../services/localstorage.service';
-import packageJson from '../../../package.json';
 import { MatDialog } from '@angular/material/dialog';
 import { SelectRobotTypeDialog } from '../modules/core/dialogs/robot-select/robot-select.dialog';
 
@@ -51,12 +50,18 @@ export class AppState {
         'l_nano': AppState.arduinoNanoRobotType,
         'l_micropython': AppState.microPythonRobotType
     }
+
+    public releaseInfoSubject$ = new BehaviorSubject<any>(null);
+    public releaseInfo$: Observable<any> = this.releaseInfoSubject$.asObservable();
+
+
     /* eslint-enable max-len */
 
     private defaultLanguage = new Language('nl', 'Nederlands')
     private availableLanguages = [new Language('en', 'English'), this.defaultLanguage]
 
     constructor(private localStorage: LocalStorageService, private dialog: MatDialog) {
+
         this.isDesktopSubject$ = new BehaviorSubject<boolean>(true);
         this.isDesktop$ = this.isDesktopSubject$.asObservable();
         this.availableRobotTypes$ = this.isDesktop$
@@ -72,10 +77,9 @@ export class AppState {
 
         this.canChangeCodeEditor$ = this.selectedRobotType$
             .pipe(filter(robotType => !!robotType))
-            .pipe(map(robotType => robotType !== AppState.genericRobotType))
+            .pipe(map(robotType => robotType !== AppState.genericRobotType));
+
 
-        this.packageJsonVersionSubject$ = new BehaviorSubject(packageJson.version);
-        this.packageJsonVersion$ = this.packageJsonVersionSubject$.asObservable();
     }
 
     private isDesktopSubject$: BehaviorSubject<boolean>;
@@ -106,9 +110,6 @@ export class AppState {
 
     public canChangeCodeEditor$: Observable<boolean>;
 
-    private packageJsonVersionSubject$: BehaviorSubject<string>;
-    public packageJsonVersion$: Observable<string>;
-
     public setSelectedRobotType(robotType: RobotType) {
         // Intercept flitz robots and ask what type of flitz robot: nano, or uno
         if (robotType === AppState.leaphyFlitzRobotType) {

yarn.lock

@@ -3357,6 +3357,11 @@ commander@^2.20.0:
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^9.0.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
@@ -7336,6 +7341,13 @@ shebang-regex@^3.0.0:
   resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+showdown@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/showdown/-/showdown-2.1.0.tgz#1251f5ed8f773f0c0c7bfc8e6fd23581f9e545c5"
+  integrity sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==
+  dependencies:
+    commander "^9.0.0"
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"