Merge pull request #91 from sartography/367-CallActivity-2

Make a separate area to show the workflow-specs that are marked as 'L…

package.json

@@ -55,7 +55,7 @@
     "ngx-markdown": "^9.1.1",
     "protractor": "^7.0.0",
     "rxjs": "~6.5.4",
-    "sartography-workflow-lib": "0.0.522",
+    "sartography-workflow-lib": "0.0.532",
     "tslib": "^1.13.0",
     "uuid": "^7.0.2",
     "zone.js": "^0.10.3"

src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.ts

@@ -101,6 +101,17 @@ export class WorkflowSpecDialogComponent {
             indeterminate: false,
           },
         },
+        {
+          key: 'library',
+          type: 'checkbox',
+          defaultValue: this.data.library,
+          templateOptions: {
+            label: 'Library',
+            description: 'Is this a library workflow?',
+            required: true,
+            indeterminate: false,
+          },
+        },
       ];
     });
   }

src/app/_interfaces/dialog-data.ts

@@ -26,6 +26,7 @@ export interface WorkflowSpecDialogData {
   category_id: number;
   display_order: number;
   standalone: boolean;
+  library: boolean;
 }
 
 export interface WorkflowSpecCategoryDialogData {

src/app/app.module.ts

@@ -54,6 +54,7 @@ import { ConfirmDialogComponent } from './_dialogs/confirm-dialog/confirm-dialog
 import {MatExpansionModule} from '@angular/material/expansion';
 import { SettingsComponent } from './settings/settings.component';
 import {MatSelect, MatSelectModule} from '@angular/material/select';
+import {LibraryListComponent} from './library-list/library-list.component';
 
 @Injectable()
 export class ThisEnvironment implements AppEnvironment {
@@ -92,6 +93,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     FileMetaDialogComponent,
     FooterComponent,
     GetIconCodePipe,
+    LibraryListComponent,
     ModelerComponent,
     NavbarComponent,
     NewFileDialogComponent,

src/app/library-list/library-list.component.html

@@ -0,0 +1,46 @@
+<div class="file-list">
+  <mat-list>
+    <mat-list-item
+      *ngFor="let fm of fileMetas"
+      [attr.data-file-meta-id]="fm.id"
+      [attr.data-workflow-spec-id]="workflowSpec.id"
+    >
+      <mat-icon (click)="editFile(fm)" mat-list-icon>{{fm.type | getIconCode}}</mat-icon>
+      <ng-container *ngIf="fm.type === fileType.BPMN">
+        <button (click)="makePrimary(fm)" *ngIf="!fm.primary" mat-flat-button class="make-primary">
+          <mat-icon>radio_button_unchecked</mat-icon>
+          Make primary process
+        </button>
+        <button *ngIf="fm.primary" mat-flat-button class="make-primary">
+          <mat-icon>radio_button_checked</mat-icon>
+          Primary process
+        </button>
+      </ng-container>
+      <h4 (click)="editFile(fm)" mat-line>{{fm.name}}</h4>
+      <p (click)="editFile(fm)" mat-line> Updated: {{fm.last_modified | date:'medium'}}</p>
+      <button (click)="downloadFile(fm)" class="mat-elevation-z0" color="primary" mat-icon-button>
+        <mat-icon>save_alt</mat-icon>
+      </button>
+      <button (click)="editFile(fm)" class="mat-elevation-z0" color="primary" mat-icon-button>
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button (click)="confirmDelete(fm)" class="mat-elevation-z0" color="warn" mat-icon-button>
+        <mat-icon>delete</mat-icon>
+      </button>
+    </mat-list-item>
+  </mat-list>
+</div>
+<div class="file-list-actions">
+  <button [queryParams]="{action: 'newFile'}" [routerLink]="['/modeler/' + workflowSpec.id]" mat-button>
+    <mat-icon>note_add</mat-icon>
+    Add new BPMN or DMN file
+  </button>
+  <button [queryParams]="{action: 'openFile'}" [routerLink]="['/modeler/' + workflowSpec.id]" mat-button>
+    <mat-icon>cloud_upload</mat-icon>
+    Upload BPMN or DMN file
+  </button>
+  <button (click)="editFile()" mat-button>
+    <mat-icon>cloud_upload</mat-icon>
+    Upload Template file
+  </button>
+</div>

src/app/library-list/library-list.component.scss

@@ -0,0 +1,16 @@
+@import "../../config";
+
+::ng-deep mat-list-item {
+  border-left: 4px solid $brand-gray-light;
+
+  &:hover {
+    border-left: 4px solid $brand-primary;
+    background-color: $brand-primary-tint-4;
+    cursor: pointer;
+  }
+}
+
+.make-primary {
+  padding-right: 4rem;
+  margin-right: 4rem;
+}

src/app/library-list/library-list.component.spec.ts

@@ -0,0 +1,241 @@
+import {APP_BASE_HREF} from '@angular/common';
+import {HttpHeaders} from '@angular/common/http';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
+import {MatIconModule} from '@angular/material/icon';
+import {MatListModule} from '@angular/material/list';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {RouterTestingModule} from '@angular/router/testing';
+import createClone from 'rfdc';
+import {of} from 'rxjs';
+import {
+  ApiService,
+  FileMeta,
+  FileType,
+  MockEnvironment, mockFile0,
+  mockFileMeta0,
+  mockFileMetas,
+  mockWorkflowSpec0
+} from 'sartography-workflow-lib';
+import {DeleteFileDialogComponent} from '../_dialogs/delete-file-dialog/delete-file-dialog.component';
+import {DeleteFileDialogData} from '../_interfaces/dialog-data';
+import {GetIconCodePipe} from '../_pipes/get-icon-code.pipe';
+import {FileListComponent} from '../file-list/file-list.component';
+
+
+describe('FileListComponent', () => {
+  let httpMock: HttpTestingController;
+  let component: FileListComponent;
+  let fixture: ComponentFixture<FileListComponent>;
+  const timeString = '2020-01-23T12:34:12.345Z';
+  const timeCode = new Date(timeString).getTime();
+
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule,
+        HttpClientTestingModule,
+        MatDialogModule,
+        MatIconModule,
+        MatListModule,
+        MatSnackBarModule,
+        RouterTestingModule,
+      ],
+      declarations: [
+        DeleteFileDialogComponent,
+        FileListComponent,
+        GetIconCodePipe,
+      ],
+      providers: [
+        ApiService,
+        {provide: 'APP_ENVIRONMENT', useClass: MockEnvironment},
+        {provide: APP_BASE_HREF, useValue: ''},
+        {
+          provide: MatDialogRef,
+          useValue: {
+            close: (dialogResult: any) => {
+            }
+          }
+        },
+        {provide: MAT_DIALOG_DATA, useValue: []},
+      ]
+    }).overrideModule(BrowserDynamicTestingModule, {
+      set: {
+        entryComponents: [
+          DeleteFileDialogComponent,
+        ]
+      }
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileListComponent);
+    component = fixture.componentInstance;
+    httpMock = TestBed.inject(HttpTestingController);
+    component.workflowSpec = mockWorkflowSpec0;
+    fixture.detectChanges();
+
+
+    const fmsReq = httpMock.expectOne(`apiRoot/file?workflow_spec_id=${mockWorkflowSpec0.id}`);
+    expect(fmsReq.request.method).toEqual('GET');
+    fmsReq.flush(mockFileMetas);
+    expect(component.fileMetas.length).toBeGreaterThan(0);
+
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+    fixture.destroy();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should sort files by name', () => {
+    let prevFileMeta;
+
+    for (const thisFileMeta of component.fileMetas) {
+      if (!prevFileMeta) {
+        prevFileMeta = thisFileMeta;
+      } else {
+        expect(thisFileMeta.name).toBeGreaterThan(prevFileMeta.name);
+        prevFileMeta = thisFileMeta;
+      }
+    }
+  });
+
+  it('should show a confirmation dialog before deleting a file', () => {
+    const mockConfirmDeleteData: DeleteFileDialogData = {
+      confirm: false,
+      fileMeta: mockFileMeta0,
+    };
+
+    const _deleteFileSpy = spyOn((component as any), '_deleteFile').and.stub();
+    const openDialogSpy = spyOn(component.dialog, 'open')
+      .and.returnValue({afterClosed: () => of(mockConfirmDeleteData)} as any);
+
+    component.confirmDelete(mockFileMeta0);
+    expect(openDialogSpy).toHaveBeenCalled();
+    expect(_deleteFileSpy).not.toHaveBeenCalled();
+
+    mockConfirmDeleteData.confirm = true;
+    component.confirmDelete(mockFileMeta0);
+    expect(openDialogSpy).toHaveBeenCalled();
+    expect(_deleteFileSpy).toHaveBeenCalled();
+  });
+
+  it('should delete a file', () => {
+    const loadFileMetasSpy = spyOn((component as any), '_loadFileMetas').and.stub();
+    (component as any)._deleteFile(mockFileMeta0);
+    const fmsReq = httpMock.expectOne(`apiRoot/file/${mockFileMeta0.id}`);
+    expect(fmsReq.request.method).toEqual('DELETE');
+    fmsReq.flush(null);
+
+    expect(loadFileMetasSpy).toHaveBeenCalled();
+  });
+
+  it('should navigate to modeler to edit a BPMN or DMN file', () => {
+    const routerNavigateSpy = spyOn((component as any).router, 'navigate');
+    component.workflowSpec = mockWorkflowSpec0;
+    component.editFile(mockFileMeta0);
+    expect(routerNavigateSpy).toHaveBeenCalledWith([`/modeler/${mockWorkflowSpec0.id}/${mockFileMeta0.id}`]);
+
+    routerNavigateSpy.calls.reset();
+    const mockDmnMeta = createClone()(mockFileMeta0);
+    mockDmnMeta.type = FileType.DMN;
+    component.editFile(mockDmnMeta);
+    expect(routerNavigateSpy).toHaveBeenCalledWith([`/modeler/${mockWorkflowSpec0.id}/${mockDmnMeta.id}`]);
+  });
+
+  it('should open file metadata dialog for non-BPMN files', () => {
+    const routerNavigateSpy = spyOn((component as any).router, 'navigate');
+    const editFileMetaSpy = spyOn(component, 'editFileMeta');
+    component.workflowSpec = mockWorkflowSpec0;
+    const mockDocMeta = createClone()(mockFileMeta0);
+    mockDocMeta.type = FileType.DOCX;
+    component.editFile(mockDocMeta);
+    expect(routerNavigateSpy).not.toHaveBeenCalled();
+    expect(editFileMetaSpy).toHaveBeenCalledWith(mockDocMeta);
+
+    routerNavigateSpy.calls.reset();
+    editFileMetaSpy.calls.reset();
+    component.editFile(null);
+    expect(routerNavigateSpy).not.toHaveBeenCalled();
+    expect(editFileMetaSpy).toHaveBeenCalledWith(null);
+  });
+
+  it('should open file metadata dialog', () => {
+    const _openFileDialogSpy = spyOn((component as any), '_openFileDialog').and.stub();
+    component.workflowSpec = mockWorkflowSpec0;
+    const mockDocMeta: FileMeta = createClone()(mockFileMeta0);
+    mockDocMeta.type = FileType.DOCX;
+    component.editFileMeta(mockDocMeta);
+
+    const expectedFile = new File([], mockDocMeta.name, {
+      type: mockDocMeta.content_type,
+      lastModified: timeCode
+    });
+    const fReq = httpMock.expectOne(`apiRoot/file/${mockDocMeta.id}/data`);
+
+    const mockHeaders = new HttpHeaders()
+      .append('last-modified', expectedFile.lastModified.toString())
+      .append('content-type', mockDocMeta.content_type);
+    expect(fReq.request.method).toEqual('GET');
+    fReq.flush(new ArrayBuffer(8), {headers: mockHeaders});
+    expect(fReq.request.method).toEqual('GET');
+    expect(_openFileDialogSpy).toHaveBeenCalledWith(mockDocMeta, expectedFile);
+
+    _openFileDialogSpy.calls.reset();
+
+    component.editFileMeta(null);
+    expect(_openFileDialogSpy).toHaveBeenCalledWith();
+  });
+
+  it('should upload new file from file dialog', () => {
+    const openDialogSpy = spyOn(component.dialog, 'open')
+      .and.returnValue({afterClosed: () => of({file: mockFile0})} as any);
+    const _loadFileMetasSpy = spyOn((component as any), '_loadFileMetas').and.stub();
+    component.workflowSpec = mockWorkflowSpec0;
+
+    (component as any)._openFileDialog();
+    const addReq = httpMock.expectOne(`apiRoot/file?workflow_spec_id=${mockWorkflowSpec0.id}`);
+    expect(addReq.request.method).toEqual('POST');
+    addReq.flush(mockFileMeta0);
+
+    expect(openDialogSpy).toHaveBeenCalled();
+    expect(_loadFileMetasSpy).toHaveBeenCalled();
+  });
+
+  it('should update existing file from file dialog', () => {
+    const openDialogSpy = spyOn(component.dialog, 'open')
+      .and.returnValue({afterClosed: () => of({fileMetaId: mockFileMeta0.id, file: mockFile0})} as any);
+    const _loadFileMetasSpy = spyOn((component as any), '_loadFileMetas').and.stub();
+    component.workflowSpec = mockWorkflowSpec0;
+
+    (component as any)._openFileDialog(mockFileMeta0, mockFile0);
+    const updateReq = httpMock.expectOne(`apiRoot/file/${mockFileMeta0.id}/data`);
+    expect(updateReq.request.method).toEqual('PUT');
+    updateReq.flush(mockFileMeta0);
+
+    expect(openDialogSpy).toHaveBeenCalled();
+    expect(_loadFileMetasSpy).toHaveBeenCalled();
+  });
+
+  it('should flag a file as primary', () => {
+    const updateFileMetaSpy = spyOn((component as any).api, 'updateFileMeta').and.returnValue(of(mockFileMeta0));
+    const _loadFileMetasSpy = spyOn((component as any), '_loadFileMetas').and.stub();
+    expect(component.fileMetas.length).toEqual(mockFileMetas.length);
+    component.makePrimary(mockFileMeta0);
+
+    expect(updateFileMetaSpy).toHaveBeenCalledTimes(mockFileMetas.length);
+    expect(component.fileMetas.length).toEqual(mockFileMetas.length);
+    expect(component.fileMetas.reduce((sum, fm) => fm.primary ? sum + 1 : sum, 0)).toEqual(1);
+    expect(_loadFileMetasSpy).toHaveBeenCalled();
+  });
+});

src/app/library-list/library-list.component.ts

@@ -0,0 +1,157 @@
+import {Component, Input, OnChanges, OnInit} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {ActivatedRoute, Router} from '@angular/router';
+import {
+  ApiService,
+  FileMeta,
+  FileParams,
+  FileType,
+  getFileType,
+  isNumberDefined, newFileFromResponse,
+  WorkflowSpec
+} from 'sartography-workflow-lib';
+import {DeleteFileDialogComponent} from '../_dialogs/delete-file-dialog/delete-file-dialog.component';
+import {OpenFileDialogComponent} from '../_dialogs/open-file-dialog/open-file-dialog.component';
+import {DeleteFileDialogData, OpenFileDialogData} from '../_interfaces/dialog-data';
+import * as fileSaver from 'file-saver';
+
+@Component({
+  selector: 'app-library-list',
+  templateUrl: './library-list.component.html',
+  styleUrls: ['./library-list.component.scss']
+})
+export class LibraryListComponent implements OnInit, OnChanges {
+  @Input() workflowSpec: WorkflowSpec;
+  fileMetas: FileMeta[];
+  fileType = FileType;
+
+  constructor(
+    private api: ApiService,
+    public dialog: MatDialog,
+    private route: ActivatedRoute,
+    private router: Router,
+    private snackBar: MatSnackBar,
+  ) {
+  }
+
+  ngOnInit() {
+    this._loadFileMetas();
+  }
+
+  ngOnChanges() {
+    this._loadFileMetas();
+  }
+
+  editFile(fileMeta?: FileMeta) {
+    if (fileMeta && ((fileMeta.type === FileType.BPMN) || (fileMeta.type === FileType.DMN))) {
+      this.router.navigate([`/modeler/${this.workflowSpec.id}/${fileMeta.id}`]);
+    } else {
+      // Show edit file meta dialog
+      this.editFileMeta(fileMeta);
+    }
+  }
+
+  editFileMeta(fm: FileMeta) {
+    if (fm && isNumberDefined(fm.id)) {
+      this.api.getFileData(fm.id).subscribe(response => {
+        const file = newFileFromResponse(fm, response);
+        this._openFileDialog(fm, file);
+      });
+    } else {
+      this._openFileDialog();
+    }
+  }
+
+  confirmDelete(fm: FileMeta) {
+    const dialogRef = this.dialog.open(DeleteFileDialogComponent, {
+      data: {
+        confirm: false,
+        fileMeta: fm,
+      }
+    });
+
+    dialogRef.afterClosed().subscribe((data: DeleteFileDialogData) => {
+      if (data && data.confirm && data.fileMeta) {
+        this._deleteFile(data.fileMeta);
+      }
+    });
+  }
+
+  makePrimary(fmPrimary: FileMeta) {
+    if (fmPrimary.type === FileType.BPMN) {
+      let numUpdated = 0;
+      // Fixme: This buisness rule does not belong here.
+      this.fileMetas.forEach(fm => {
+        fm.primary = (fmPrimary.id === fm.id);
+        this.api.updateFileMeta(fm).subscribe(() => {
+          numUpdated++;
+
+          // Reload all fileMetas when all have been updated.
+          if (numUpdated === this.fileMetas.length) {
+            this._loadFileMetas();
+          }
+        });
+      });
+    }
+  }
+
+  private _openFileDialog(fm?: FileMeta, file?: File) {
+    const dialogData: OpenFileDialogData = {
+      fileMetaId: fm ? fm.id : undefined,
+      file: file,
+      mode: 'local',
+      fileTypes: [FileType.DOC, FileType.DOCX, FileType.XLSX, FileType.XLS],
+    };
+    const dialogRef = this.dialog.open(OpenFileDialogComponent, {data: dialogData});
+
+    dialogRef.afterClosed().subscribe((data: OpenFileDialogData) => {
+      if (data && data.file) {
+        const newFileMeta: FileMeta = {
+          id: data.fileMetaId,
+          content_type: data.file.type,
+          name: data.file.name,
+          type: getFileType(data.file),
+          workflow_spec_id: this.workflowSpec.id,
+        };
+
+        if (isNumberDefined(data.fileMetaId)) {
+          // Update existing file
+          this.api.updateFileData(newFileMeta, data.file).subscribe(() => {
+            this._loadFileMetas();
+          });
+        } else {
+          // Add new file
+          const fileParams: FileParams = {
+            workflow_spec_id: this.workflowSpec.id,
+          };
+
+          this.api.addFile(fileParams, newFileMeta, data.file).subscribe(dbFm => {
+            this._loadFileMetas();
+          });
+        }
+      }
+    });
+
+  }
+
+  private _deleteFile(fileMeta: FileMeta) {
+    this.api.deleteFileMeta(fileMeta.id).subscribe(() => {
+      this._loadFileMetas();
+      this.snackBar.open(`Deleted file ${fileMeta.name}.`, 'Ok', {duration: 3000});
+    });
+  }
+
+  private _loadFileMetas() {
+    this.api.getFileMetas({workflow_spec_id: this.workflowSpec.id}).subscribe(fms => {
+      this.fileMetas = fms.sort((a, b) => (a.name > b.name) ? 1 : -1);
+    });
+  }
+
+  downloadFile(fm: FileMeta) {
+    this.api.getFileData(fm.id).subscribe(response => {
+      const blob = new Blob([response.body], {type: fm.content_type});
+      fileSaver.saveAs(blob, fm.name);
+    });
+  }
+}

src/app/workflow-spec-list/workflow-spec-list.component.html

@@ -26,7 +26,45 @@
         </div>
       </ng-container>
       <mat-divider></mat-divider>
+      <ng-container>
+        <div class="category">
+          <h4>Libraries</h4>
+          <mat-list>
+            <mat-list-item *ngFor="let wfs of workflowLibraries" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+              <a [ngClass]="{'spec_menu_item':true, 'spec-selected': selectedSpec && wfs.id == selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
+              <span class="spec-actions" fxLayout="row" fxLayoutGap="10px">
+                <button
+                  mat-icon-button
+                  title="Move up"
+                  color="primary"
+                >
+                  <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <button
 
+                  mat-icon-button
+                  title="Move down"
+                  color="primary"
+
+                >
+                  <mat-icon>arrow_downward</mat-icon>
+                </button>
+              </span>
+              <!--
+              <ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs, cat: cat}"></ng-container>
+              -->
+            </mat-list-item>
+          </mat-list>
+
+        </div>
+      </ng-container>
+      <mat-divider></mat-divider>
+
+      <ng-container>
+        <div class="category">
+          <h4>Categories</h4>
+        </div>
+        <mat-divider></mat-divider>
 
       <mat-accordion class="example-headers-align" multi="false">
       <ng-container *ngFor="let cat of workflowSpecsByCategory">
@@ -47,14 +85,14 @@
             </mat-expansion-panel-header>
             <mat-list>
               <mat-list-item *ngFor="let wfs of cat.workflow_specs" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
-                <a [ngClass]="{'spec_menu_item':true, 'spec-selected': wfs.id == selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
-                <span class="spec-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat.id !== null">
+                <a [ngClass]="{'spec_menu_item':true, 'spec-selected': selectedSpec && wfs.id == selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
+                <span class="spec-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat && cat.id !== null">
                 <button
                   *ngIf="cat && cat.workflow_specs.length > 0 && wfs.display_order !== 0"
                   mat-icon-button
                   title="Move up"
                   color="primary"
-                  (click)="editSpecDisplayOrder(wfs.id, -1, cat.workflow_specs)"
+                  (click)="editSpecDisplayOrder(wfs && wfs.id, -1, cat.workflow_specs)"
                 >
                   <mat-icon>arrow_upward</mat-icon>
                 </button>
@@ -108,6 +146,7 @@
         </div>
       </ng-container>
       </mat-accordion>
+      </ng-container>
     </mat-drawer>
 
     <div class="content">

src/app/workflow-spec-list/workflow-spec-list.component.spec.ts

@@ -51,6 +51,16 @@ export class MdDialogMock {
   }
 }
 
+const librarySpec0: WorkflowSpec = {
+  id: 'one_thing',
+  name: 'one_thing',
+  display_name: 'One thing',
+  description: 'Do just one thing',
+  category_id: 2,
+  library: true,
+  category: mockWorkflowSpecCategory2,
+  display_order: 2,
+};
 
 describe('WorkflowSpecListComponent', () => {
   let httpMock: HttpTestingController;
@@ -118,9 +128,16 @@ describe('WorkflowSpecListComponent', () => {
     catReq.flush(mockWorkflowSpecCategories);
     expect(component.categories.length).toBeGreaterThan(0);
 
+    const specReq2 =  httpMock.expectOne('apiRoot/workflow-specification?libraries=true');
+    expect(specReq2.request.method).toEqual('GET');
+    specReq2.flush([librarySpec0]);
+    fixture.detectChanges();
+    expect(component.workflowLibraries.length).toBeGreaterThan(0);
+
     const specReq =  httpMock.expectOne('apiRoot/workflow-specification');
     expect(specReq.request.method).toEqual('GET');
     specReq.flush(mockWorkflowSpecs);
+    fixture.detectChanges();
     expect(component.workflowSpecs.length).toBeGreaterThan(0);
   });
 
@@ -141,7 +158,8 @@ describe('WorkflowSpecListComponent', () => {
       description: '',
       category_id: 0,
       display_order: 0,
-      standalone: false
+      standalone: false,
+      library: false
     };
 
     const _upsertWorkflowSpecificationSpy = spyOn((component as any), '_upsertWorkflowSpecification')
@@ -199,6 +217,11 @@ describe('WorkflowSpecListComponent', () => {
     expect(wfsReq.request.method).toEqual('PUT');
     wfsReq.flush(mockWorkflowSpec0);
 
+    const wfsReq2 = httpMock.expectOne(`apiRoot/workflow-specification?libraries=true`);
+    expect(wfsReq2.request.method).toEqual('GET');
+    wfsReq2.flush([librarySpec0]);
+
+
     expect(_loadWorkflowSpecsSpy).toHaveBeenCalled();
     expect(_displayMessageSpy).toHaveBeenCalled();
   });

src/app/workflow-spec-list/workflow-spec-list.component.ts

@@ -44,6 +44,7 @@ export interface WorkflowSpecCategoryGroup {
 })
 export class WorkflowSpecListComponent implements OnInit {
   workflowSpecs: WorkflowSpec[] = [];
+  workflowLibraries: WorkflowSpec[] = [];
   selectedSpec: WorkflowSpec;
   masterStatusSpec: WorkflowSpec;
   selectedCat: WorkflowSpecCategory;
@@ -72,6 +73,7 @@ export class WorkflowSpecListComponent implements OnInit {
         this._loadWorkflowSpecCategories();
       }
     });
+   // this._loadWorkflowLibraries();
     this.searchField = new FormControl();
     this.searchField.valueChanges.subscribe(value => {
       this._loadWorkflowSpecs(null, value);
@@ -118,6 +120,7 @@ export class WorkflowSpecListComponent implements OnInit {
       category_id: selectedSpec ? selectedSpec.category_id : null,
       display_order: hasDisplayOrder ? selectedSpec.display_order : 0,
       standalone: selectedSpec ? selectedSpec.standalone : null,
+      library: selectedSpec ? selectedSpec.library : null,
     };
 
 
@@ -221,8 +224,17 @@ export class WorkflowSpecListComponent implements OnInit {
         this.workflowSpecsByCategory[i + 1].workflow_specs = [];
       });
       this._loadWorkflowSpecs(selectedSpecName);
+      this._loadWorkflowLibraries();
     });
   }
+  private _loadWorkflowLibraries() {
+
+    this.api.getWorkflowSpecificationLibraries().subscribe(wfs => {
+      this.workflowLibraries = wfs;
+    });
+  }
+
+
   private _loadWorkflowSpecs(selectedSpecName: String = null, searchSpecName: String = null) {
 
     this.api.getWorkflowSpecList().subscribe(wfs => {
@@ -269,7 +281,8 @@ export class WorkflowSpecListComponent implements OnInit {
         description: data.description,
         category_id: data.category_id,
         display_order: data.display_order,
-        standalone: data.standalone
+        standalone: data.standalone,
+        library: data.library
       };
 
       if (isNew) {
@@ -304,6 +317,7 @@ export class WorkflowSpecListComponent implements OnInit {
 
   private _updateWorkflowSpec(specId: string, newSpec: WorkflowSpec) {
     this.api.updateWorkflowSpecification(specId, newSpec).subscribe(_ => {
+      this._loadWorkflowLibraries();
       this._loadWorkflowSpecs();
       this._displayMessage('Saved changes to workflow spec.');
     });