Fix layout issues and improve handling new bpmn files.

src/app/app.component.html

@@ -1,4 +1,6 @@
-<nav class="navbar">
-  <span>BPMN Gitlab diff</span>
-</nav>
-<router-outlet></router-outlet>
+<div class="app-container">
+  <nav class="navbar">
+    <span>BPMN Gitlab diff</span>
+  </nav>
+  <router-outlet class="router"></router-outlet>
+</div>

src/app/app.component.scss

@@ -1,11 +1,20 @@
+.app-container {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  grid-template-columns: auto;
+  grid-template-rows: 55px 0px auto;
+  grid-template-areas:
+    "navbar"
+    "router"
+    "app-differ";
+}
+
 .navbar {
-  grid-area: header;
+  grid-area: navbar;
   border-bottom: 1px #ccc solid;
-  display: flex;
   background-color: #eee;
-  justify-content: flex-start;
   align-items: center;
   padding: 20px;
-  z-index: 2;
   box-shadow: 1px 1px 5px #ccc;
-}
+}

src/app/components/bpmn/bpmn-diff.service.ts

@@ -20,12 +20,16 @@ type Diff = {
 export class BPMNDiffService {
   bpmnToCompare?: any[] = [null, null];
   diffResult$: BehaviorSubject<Diff[]> = new BehaviorSubject([]);
+  private defaultBpmn = `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_16msd5n" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.12.1" modeler:executionPlatform="Camunda Platform" modeler:executionPlatformVersion="7.19.0">
+</bpmn:definitions>
+`;
 
   async setBpmns(bpmns: BPMNDiff): Promise<void> {
     if (Object.values(bpmns).every(Boolean)) {
       forkJoin(
         [
-          from(this.parseBpmn(bpmns.oldVersion)),
+          from(this.parseBpmn(bpmns.oldVersion ?? this.defaultBpmn)),
           from(this.parseBpmn(bpmns.newVersion))
         ]
       ).subscribe((parsedBpmns) => {

src/app/components/bpmn/bpmn-viewer/bpmn-viewer.component.ts

@@ -35,7 +35,11 @@ export class BpmnViewerComponent implements AfterViewInit {
     if (this.viewer == null) {
       return;
     }
-    await this.viewer.importXML(bpmn);
+    try {
+      await this.viewer.importXML(bpmn);
+    } catch (e) {
+      this.viewer.clear();
+    }
     this.viewer.get('canvas').zoom('fit-viewport');
   }
 

src/app/components/gitlab/gitlab.service.ts

@@ -2,7 +2,7 @@
 
 import { Injectable } from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
-import { map, switchMap, tap } from 'rxjs/operators';
+import { map, switchMap, tap, catchError } from 'rxjs/operators';
 import { BehaviorSubject, forkJoin, Observable, of } from 'rxjs';
 import { environment } from '../../../environments/environment';
 
@@ -37,6 +37,7 @@ export class GitlabService {
   private token: string;
   private baseURL: string;
   private options: {};
+
   public isLoading$ = new BehaviorSubject<boolean>(false);
 
   constructor(private http: HttpClient) {
@@ -109,10 +110,13 @@ export class GitlabService {
   }
 
   private fileContent$(projectId: string, filePath: string, branchName: string): Observable<string> {
-   return this.http.get<File>(
-     `${this.baseURL + environment.gitProvider.restPath}/projects/${projectId}/repository/files/${encodeURIComponent(filePath)}?ref=${branchName}`,
-     this.options
-   ).pipe(map(result => atob(result.content)));
+    return this.http.get<File>(
+      `${this.baseURL + environment.gitProvider.restPath}/projects/${projectId}/repository/files/${encodeURIComponent(filePath)}?ref=${branchName}`,
+      this.options
+    ).pipe(
+	    map(result => atob(result.content)),
+      catchError((err) => of(null))
+    );
   }
 
   private diffIsBPMN = (diff: Diff) => /(.*)\.bpmn/.test(diff.old_path) && /(.*)\.bpmn/.test(diff.new_path);

src/app/pages/differ/differ.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="differ-container">
   <div class="sidebar">
     <ng-container *ngIf="pageReady | async; else loader">
       <div *ngFor="let filePath of availableBpmnFilePaths">

src/app/pages/differ/differ.component.scss

@@ -2,7 +2,6 @@
   grid-area: sidebar;
   overflow: scroll;
   border-right: 1px #ccc solid;
-  z-index: 1;
   padding: 20px;
   background-color: #eee;
   box-shadow: 1px 1px 5px #ccc;
@@ -24,14 +23,14 @@
   border-top: 1px #ccc solid;
 }
 
-.container {
+.differ-container {
   display: grid;
   width: 100%;
   height: 100%;
   grid-template-columns: 250px auto;
-  grid-template-rows: auto auto 200px;
+  grid-template-rows: auto auto 20%;
   grid-template-areas:
     "sidebar content-old"
     "sidebar content-new"
     "sidebar footer";
-}
+}

src/app/pages/differ/differ.component.ts

@@ -43,14 +43,14 @@ export class DifferComponent {
 
   setBpmnDiffs = (bpmnDiffs: BPMNDiffs): void => {
     this.bpmnDiffs = bpmnDiffs;
-  };
+  }
 
   changeSelectedFilePath = (filePath: string): void => {
     this.selectedFilePath = filePath;
     this.bpmnDiffService.setBpmns(this.bpmnDiffs[filePath]);
-  };
+  }
 
   setGitToken = (gitToken: string) => {
     localStorage.gitToken = gitToken;
-  };
+  }
 }