Displays tooltip with file and workflow spec metadata

src/app/app.component.html

@@ -12,7 +12,14 @@
         Open previously saved...
       </button>
       <mat-menu #dbMenu="matMenu">
-        <button mat-menu-item *ngFor="let bf of bpmnFiles" (click)="loadDbFile(bf)">
+        <button
+          mat-menu-item
+          *ngFor="let bf of bpmnFiles"
+          (click)="loadDbFile(bf)"
+          [matTooltip]="getFileMetaTooltipText(bf)"
+          matTooltipClass="tooltip-text"
+          matTooltipPosition="right"
+        >
           {{getFileMetaDisplayString(bf)}}
         </button>
       </mat-menu>
@@ -38,7 +45,7 @@
       <button mat-menu-item (click)="diagram.saveXML()"><mat-icon>code</mat-icon> Download XML File</button>
     </mat-menu>
 
-    <button mat-button *ngIf="diagramFileMeta" (click)="editFileMeta()">
+    <button mat-button *ngIf="diagramFileMeta && diagramFileMeta.workflow_spec_id" (click)="editFileMeta()">
       <mat-icon>edit</mat-icon>
       {{getFileMetaDisplayString(diagramFileMeta)}}
     </button>

src/app/app.component.scss

@@ -28,3 +28,8 @@ mat-toolbar {
 mat-toolbar.expanded {
   height: 128px;
 }
+
+::ng-deep .tooltip-text {
+  white-space: pre-line;
+  font-size: 1rem;
+}

src/app/app.component.ts

@@ -182,7 +182,6 @@ export class AppComponent implements AfterViewInit {
       if (data && data.fileName && data.workflowSpecId) {
         this._upsertSpecAndFileMeta(data);
       }
-      this._upsertSpecAndFileMeta(data);
     });
   }
 
@@ -237,9 +236,22 @@ export class AppComponent implements AfterViewInit {
     return this.workflowSpecs.find(wfs => workflow_spec_id === wfs.id);
   }
 
-  getFileMetaDisplayString(bf: FileMeta) {
+  getFileMetaDisplayString(fileMeta: FileMeta) {
-    const wfsName = this.getWorkflowSpec(bf.workflow_spec_id).display_name;
+    const wfsName = this.getWorkflowSpec(fileMeta.workflow_spec_id).display_name;
-    const lastUpdated = new DatePipe('en-us').transform(bf.last_updated);
+    const lastUpdated = new DatePipe('en-us').transform(fileMeta.last_updated);
-    return `${wfsName} (${bf.name}) - v${bf.version} (${lastUpdated})`;
+    return `${wfsName} (${fileMeta.name}) - v${fileMeta.version} (${lastUpdated})`;
+  }
+
+  getFileMetaTooltipText(fileMeta: FileMeta) {
+    const wfs = this.getWorkflowSpec(fileMeta.workflow_spec_id);
+    const lastUpdated = new DatePipe('en-us').transform(fileMeta.last_updated);
+    return `
+        Workflow spec ID: ${wfs.id}
+        Display name: ${wfs.display_name}
+        Description: ${wfs.description}
+        File name: ${fileMeta.name}
+        Last updated: ${lastUpdated}
+        Version: ${fileMeta.version}
+    `;
   }
 }

src/app/app.module.ts

@@ -11,6 +11,7 @@ import {MatMenuModule} from '@angular/material/menu';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {AppComponent} from './app.component';
@@ -39,6 +40,7 @@ import { NewFileDialogComponent } from './new-file-dialog/new-file-dialog.compon
         MatToolbarModule,
         ReactiveFormsModule,
         MatDividerModule,
+        MatTooltipModule,
     ],
   bootstrap: [AppComponent],
   entryComponents: [NewFileDialogComponent],