fix(vscode): display errors and fix graph edge backgrounds

Signed-off-by: Thomas Bétrancourt <thomas@betrancourt.net>
ovh · Apr 25, 2023 · 865467f · 865467f
1 parent 8a417be
commit 865467f
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 53 deletions.
diff --git a/vscode/package-lock.json b/vscode/package-lock.json
diff --git a/vscode/package.json b/vscode/package.json
@@ -122,7 +122,7 @@
 		"ts-loader": "^9.2.8",
 		"typescript": "^4.5.5",
 		"vsce": "^2.9.2",
-		"webpack": "^5.70.0",
+		"webpack": "^5.76.0",
 		"webpack-cli": "^4.9.2"
 	}
 }
diff --git a/vscode/src/extension.ts b/vscode/src/extension.ts
@@ -23,7 +23,7 @@ export function activate(context: vscode.ExtensionContext) {
     }
     return Object.assign(result, {
       [path]: yamlSchemas[path]
-    })
+    });
   }, {}), {
     [functionSchema]: ["**/functions/*.yaml", "**/functions-*/*.yaml"],
     [templateSchema]: ["**/templates/*.yaml", "**/templates-*/*.yaml"]

diff --git a/vscode/web/package-lock.json b/vscode/web/package-lock.json
diff --git a/vscode/web/package.json b/vscode/web/package.json
@@ -23,6 +23,7 @@
     "d3-drag": "^3.0.0",
     "d3-scale": "^4.0.2",
     "d3-zoom": "^3.0.0",
+    "normalize.css": "^8.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

diff --git a/vscode/web/src/app/preview/preview.component.html b/vscode/web/src/app/preview/preview.component.html
@@ -1 +1,3 @@
-<lib-utask-steps-viewer></lib-utask-steps-viewer>
+<utask-loader *ngIf="!resolution && !invalid"></utask-loader>
+<lib-utask-error-message *ngIf="invalid" [data]="'Unable to display the template'"></lib-utask-error-message>
+<lib-utask-steps-viewer *ngIf="resolution && !invalid" [resolution]="resolution"></lib-utask-steps-viewer>
diff --git a/vscode/web/src/app/preview/preview.component.scss b/vscode/web/src/app/preview/preview.component.scss
@@ -4,3 +4,7 @@
     align-items: center !important;
     background: #333 !important;
 }
+
+::ng-deep .edge {
+  fill: transparent;
+}
diff --git a/vscode/web/src/app/preview/preview.component.ts b/vscode/web/src/app/preview/preview.component.ts
@@ -1,6 +1,6 @@
-import { AfterViewInit, Component, HostListener, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, HostListener, ViewChild } from '@angular/core';
 import { StepsViewerComponent } from '@ovhcloud/utask-lib';
-import Step from '@ovhcloud/utask-lib/lib/@models/step.model';
+import Resolution from '@ovhcloud/utask-lib/lib/@models/resolution.model';
 import { parse } from 'yaml';
 
 @Component({
@@ -12,23 +12,46 @@ export class PreviewComponent implements AfterViewInit {
   // @ts-ignore
   private _vscode = acquireVsCodeApi();
 
-  @ViewChild(StepsViewerComponent, { static: true }) viewer!: StepsViewerComponent;
+  resolution: Resolution | null = null;
+  invalid = false;
+
+  @ViewChild(StepsViewerComponent, { static: false }) viewer!: StepsViewerComponent;
+
+  constructor(private _changeDetectorRef: ChangeDetectorRef){}
 
   ngAfterViewInit(): void {
     this._vscode.postMessage({
       type: 'initialized',
       value: true,
-    })
+    });
+  }
+
+  private setResolution(resolution: Resolution | null): void {
+    this.resolution = resolution;
+    this._changeDetectorRef.detectChanges();
+  }
+
+  private clearResolution(): void {
+    this.setResolution(null);
+  }
+
+  private setInvalid(invalid: boolean): void {
+    this.invalid = invalid;
+    this._changeDetectorRef.detectChanges();
   }
 
   @HostListener('window:message', ['$event'])
   onRefresh(e: MessageEvent) {
     if (e.data.type === 'refresh') {
+      this.setInvalid(false);
+      this.clearResolution();
+
       try {
-        this.viewer.resolution = parse(e.data.value);
-        this.viewer.clear();
+        this.setResolution(parse(e.data.value) as Resolution);
+        this.viewer.fit();
         this.viewer.draw();
       } catch (e) {
+        this.setInvalid(true);
         console.error(e);
       }
     }

diff --git a/vscode/web/src/styles.scss b/vscode/web/src/styles.scss
@@ -1,3 +1,5 @@
+@import '~normalize.css';
+
 body {
     height: 100vh;
-}
+}