feat: Added Custom Update modal

package.json

@@ -1,6 +1,6 @@
 {
     "name": "commandos",
-    "version": "0.7.5",
+    "version": "0.7.6",
     "description": "Commandos is a multi git repo client",
     "scripts": {
         "preinstall": "npx only-allow yarn",
@@ -43,6 +43,7 @@
         "dayjs": "^1.10.4",
         "diff2html": "^3.4.0",
         "gitdiff-parser": "ecomfe/gitdiff-parser#7/head",
+        "marked": "^3.0.2",
         "ngx-autosize": "^1.8.4",
         "ngx-scrollbar": "^7.5.4",
         "ngx-tippy-wrapper": "^3.0.1",
@@ -61,6 +62,7 @@
         "@tauri-apps/cli": "^1.0.0-beta.9",
         "@types/hogan.js": "^3.0.0",
         "@types/jasmine": "~3.6.0",
+        "@types/marked": "^3.0.0",
         "@types/node": "^12.11.1",
         "codelyzer": "^6.0.0",
         "jasmine-core": "~3.6.0",

src-tauri/tauri.conf.json

@@ -1,7 +1,6 @@
 {
     "package": {
-        "productName": "Commandos",
-        "version": "0.7.5"
+        "productName": "Commandos"
     },
     "build": {
         "distDir": "../dist/commandos",
@@ -51,7 +50,7 @@
             "endpoints": [
                 "https://updater.commandos.dev/{{target}}/{{current_version}}"
             ],
-            "dialog": true,
+            "dialog": false,
             "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDY5QzE0QTk4NjlBODA5NjAKUldSZ0NhaHBtRXJCYWRRaGhUanovZGxkM296ZWQ1dmhCam8yVk5Lc2REMjdFd2F5TnpkL0V0TUgK"
         },
         "allowlist": {

src/app/app.component.html

@@ -22,3 +22,4 @@
     </footer> -->
 </div>
 <app-commander-modal *ngIf="commanderModalService.open"></app-commander-modal>
+<commandos-update-modal *ngIf="update && update.shouldUpdate" [update]="update"></commandos-update-modal>

src/app/app.component.ts

@@ -1,12 +1,11 @@
-import { CommanderModalService } from '@shared/services';
 import { DOCUMENT } from '@angular/common';
 import { Component, Inject, Renderer2 } from '@angular/core';
 import { Router } from '@angular/router';
-import { ErrorService, LoggerService, GitService, StoreService, SplashScreenResolver } from '@core/services';
-import { TranslateService } from '@ngx-translate/core';
-import { CommanderService, ICommand } from '@shared/services';
-import { listen } from "@tauri-apps/api/event";
+import { ErrorService, GitService, LoggerService, StoreService, TauriService } from '@core/services';
 import { environment } from '@env/environment';
+import { TranslateService } from '@ngx-translate/core';
+import { CommanderModalService, CommanderService, ICommand } from '@shared/services';
+import { UpdateResult } from '@tauri-apps/api/updater';
 
 @Component({
     selector: 'commander-root',
@@ -15,6 +14,7 @@ import { environment } from '@env/environment';
 })
 export class AppComponent {
     devEnv: boolean = !environment.production;
+    update: UpdateResult;
 
     constructor(
         private translate: TranslateService,
@@ -27,6 +27,7 @@ export class AppComponent {
         private renderer: Renderer2,
         public commanderModalService: CommanderModalService,
         private storeService: StoreService,
+        private tauriService: TauriService
 
     ) {
         this.load();
@@ -56,9 +57,8 @@ export class AppComponent {
         this.registerSettingsCommand();
         this.registerNewRepoCommand();
 
-        listen("tauri://update-available", function (res) {
-            console.log("New version available: ", res);
-        });
+        this.update = await this.tauriService.checkUpdate();
+        console.log(`TCL: ~ file: app.component.ts ~ line 61 ~ AppComponent ~ load ~ this.update`, this.update);
     }
 
 

src/app/core/services/tauri/tauri.service.ts

@@ -1,7 +1,8 @@
-import { BehaviorSubject } from 'rxjs';
 import { Injectable } from '@angular/core';
+import { getVersion } from '@tauri-apps/api/app';
+import { checkUpdate, UpdateResult } from "@tauri-apps/api/updater";
 import { appWindow, getCurrent } from '@tauri-apps/api/window';
-
+import { BehaviorSubject } from 'rxjs';
 
 type WindowState = 'maximized' | 'minimized' | 'windowed';
 
@@ -49,4 +50,17 @@ export class TauriService {
         this.isPinned = !this.isPinned;
         appWindow.setAlwaysOnTop(this.isPinned);
     }
+
+    async getVersion(): Promise<string> {
+        return getVersion();
+    }
+
+    async checkUpdate(): Promise<UpdateResult> {
+        try {
+            return checkUpdate();
+        } catch (error) {
+            console.log(error);
+            return null;
+        }
+    }
 }

src/app/routes/about/about.component.ts

@@ -1,4 +1,4 @@
-import { environment } from '@env/environment';
+import { TauriService } from '@core/services';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
@@ -8,10 +8,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AboutComponent implements OnInit {
     version = 'not set!';
-    constructor() { }
+    constructor(
+        public tauriService: TauriService
+    ) { }
 
     ngOnInit(): void {
-        this.version = environment.version;
+        this.loadVersion();
     }
 
+    async loadVersion() {
+        const version = await this.tauriService.getVersion();
+        this.version = `v${version}`;
+    }
+
+
 }

src/app/shared/components/header/header.component.ts

@@ -20,15 +20,21 @@ export class HeaderComponent implements OnInit {
         private cd: ChangeDetectorRef,
         private router: Router
     ) {
-        this.version = environment.version;
     }
 
+
     ngOnInit(): void {
         this.tauriService.windowState$
             .subscribe((state) => {
                 this.isMaximised = state === 'maximized';
                 this.cd.detectChanges();
             });
+        this.loadVersion();
+    }
+
+    async loadVersion() {
+        const version = await this.tauriService.getVersion();
+        this.version = `v${version}${environment.versionPostfix}`;
     }
 
     minimize(): void {

src/app/shared/components/update-modal/update-modal.component.html

@@ -0,0 +1,12 @@
+<cds-modal [closable]="false">
+    <cds-modal-header>
+        <h3 cds-text="title">Command update version v{{version}}</h3>
+    </cds-modal-header>
+    <cds-modal-content>
+        <div [innerHtml]="manifest"></div>
+    </cds-modal-content>
+    <cds-modal-actions>
+        <cds-button action="flat" (click)="cancel()">Cancel</cds-button>
+        <cds-button (click)="startUpdate()">Update Commandos</cds-button>
+    </cds-modal-actions>
+</cds-modal>

src/app/shared/components/update-modal/update-modal.component.spec.ts

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

src/app/shared/components/update-modal/update-modal.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, OnInit, SecurityContext } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { relaunch } from "@tauri-apps/api/process";
+import { installUpdate, UpdateResult } from '@tauri-apps/api/updater';
+import marked from 'marked';
+
+@Component({
+    selector: 'commandos-update-modal',
+    templateUrl: './update-modal.component.html',
+    styleUrls: ['./update-modal.component.scss']
+})
+export class UpdateModalComponent implements OnInit {
+
+
+    version: string;
+    manifest: string;
+
+
+    @Input()
+    public set update(value: UpdateResult) {
+        this.version = value.manifest.version;
+        const manifest = marked(value.manifest.body);
+        this.manifest = this.domSanitizer.sanitize(SecurityContext.HTML, manifest);
+    }
+
+
+    constructor(
+        private domSanitizer: DomSanitizer
+    ) { }
+
+    ngOnInit(): void {
+    }
+
+    async startUpdate() {
+        await installUpdate();
+        await relaunch();
+    }
+
+    cancel() {
+
+    }
+}

src/app/shared/shared.module.ts

@@ -1,4 +1,3 @@
-import { SelectHintComponent } from './components/select-hint/select-hint.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -25,10 +24,12 @@ import { DiffLineByLineComponent } from './components/diff/diff-line-by-line/dif
 import { DiffSideBySideComponent } from './components/diff/diff-side-by-side/diff-side-by-side.component';
 import { DiffComponent } from './components/diff/diff.component';
 import { HeaderComponent } from './components/header/header.component';
+import { SelectHintComponent } from './components/select-hint/select-hint.component';
 import { SplashComponent } from './components/splash/splash.component';
 import { SplitLayoutComponent } from './components/split-layout/split-layout.component';
 import { SubnavComponent } from './components/subnav/subnav.component';
 import { TreeViewComponent } from './components/tree-view/tree-view.component';
+import { UpdateModalComponent } from './components/update-modal/update-modal.component';
 import { DiffPipe } from './directives/diff.pipe';
 import { DateFormatePipe } from './pipe/date-formate.pipe';
 
@@ -44,6 +45,7 @@ const components = [
     SplitLayoutComponent,
     BranchAheadBehindComponent,
     SelectHintComponent,
+    UpdateModalComponent,
     // Diff
     DiffComponent,
     DiffLineByLineComponent,

src/environments/environment.prod.ts

@@ -1,6 +1,8 @@
+
+
 export const environment = {
     production: true,
     noGitLogging: true,
     splashDuration: 3000,
-    version: `v${require('../../package.json').version}`
+    versionPostfix: ``
 };

src/environments/environment.ts

@@ -2,11 +2,12 @@
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
+
 export const environment = {
     production: false,
     noGitLogging: false,
     splashDuration: 1000,
-    version: `v${require('../../package.json').version}-dev`
+    versionPostfix: `-dev`
 };
 
 /*

tsconfig.json

@@ -8,6 +8,7 @@
         "strict": true,
         "noImplicitReturns": true,
         "noFallthroughCasesInSwitch": true,
+        "allowSyntheticDefaultImports": true,
         "sourceMap": true,
         "declaration": false,
         "downlevelIteration": true,

yarn.lock

@@ -1626,6 +1626,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/marked@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-3.0.0.tgz#2deb8fcd1ec655336e498cb100e6cb346b731df9"
+  integrity sha512-vof90OIWT+Tzq3MBRXgV9fsH8PC3WZ4OQg9Qa04vOtP0TcyiNfl7BTonYCmTapHZ5lRZh6ihUYkAy7St1hmk/A==
+
 "@types/minimatch@*":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
@@ -6991,6 +6996,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-3.0.2.tgz#60ce97d6aec34dd882ab4bb4df82494666854e17"
+  integrity sha512-TMJQQ79Z0e3rJYazY0tIoMsFzteUGw9fB3FD+gzuIT3zLuG9L9ckIvUfF51apdJkcqc208jJN2KbtPbOvXtbjA==
+
 matcher@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca"