refactor: maintain view and viewpart registries in a single place and…

… apply the grid in grid-component This reduces the complexity of managing auxiliary routes and applying viewgrid changes. The following changes were made: - `WorkbenchUrlObserver` is the only place to listen for URL grid changes - changed viewpart grid to be immutable - maintain viewparts in `WorkbenchViewPartRegistry` in the same way as `WorkbenchViewRegistry` for views - moved detach/attach logic of the viewparts to `ViewPartGridComponent` because responsible for showing the grid
SchweizerischeBundesbahnen · Mar 15, 2019 · fdc9218 · fdc9218
1 parent cd674d5
commit fdc9218
Show file tree

Hide file tree

Showing 18 changed files with 424 additions and 428 deletions.
diff --git a/projects/e2e/workbench-application-platform/src/util/testing.util.ts b/projects/e2e/workbench-application-platform/src/util/testing.util.ts
@@ -1,4 +1,4 @@
-import { $, browser, ElementFinder } from 'protractor';
+import { $, browser, ElementFinder, protractor } from 'protractor';
 
 /**
  * Switches browser testing context to the main document.
@@ -115,10 +115,18 @@ export async function expectActivityToShow(expected: { symbolicAppName: string;
   const ctx = `app=${expected.symbolicAppName}, activityCssClass=${expected.activityCssClass}, component=${expected.componentSelector}`;
 
   await switchToMainContext();
-  await expect($(`wb-activity-part .e2e-activity-panel.${expected.activityCssClass}`).isDisplayed()).toBeTruthy(`Expected 'e2e-activity-panel' to show [${ctx}]`);
-  await expect($(`iframe.e2e-activity.e2e-${expected.symbolicAppName}.${expected.activityCssClass}`).isDisplayed()).toBeTruthy(`Expected <iframe> to be displayed [${ctx}]`);
+
+  // wait until activity panel animation completed
+  const panelFinder = $(`wb-activity-part .e2e-activity-panel.${expected.activityCssClass}`);
+  await browser.wait(protractor.ExpectedConditions.presenceOf(panelFinder), 5000);
+  const iframeFinder = $(`iframe.e2e-activity.e2e-${expected.symbolicAppName}.${expected.activityCssClass}`);
+  await browser.wait(protractor.ExpectedConditions.presenceOf(iframeFinder), 5000);
+
+  await expect(panelFinder.isDisplayed()).toBeTruthy(`Expected 'e2e-activity-panel' to show [${ctx}]`);
+  await expect(iframeFinder.isDisplayed()).toBeTruthy(`Expected <iframe> to be displayed [${ctx}]`);
 
   await switchToIFrameContext([`e2e-${expected.symbolicAppName}`, 'e2e-activity', expected.activityCssClass]);
+
   await expect($(expected.componentSelector).isDisplayed()).toBeTruthy(`Expected component <${expected.componentSelector}> to show [${ctx}]`);
 }
 

diff --git a/projects/scion/workbench/src/lib/portal/wb-component-portal.ts b/projects/scion/workbench/src/lib/portal/wb-component-portal.ts
@@ -62,7 +62,7 @@ export class WbComponentPortal<T> {
     }
 
     if (this.isDestroyed) {
-      throw Error('Invalid state: component is destroyed');
+      throw Error('[IllegalStateError] component is destroyed');
     }
 
     this.detachFromComponentTree();

diff --git a/projects/scion/workbench/src/lib/routing/view-registry-synchronizer.service.ts b/projects/scion/workbench/src/lib/routing/view-registry-synchronizer.service.ts
diff --git a/projects/scion/workbench/src/lib/routing/workbench-router.service.ts b/projects/scion/workbench/src/lib/routing/workbench-router.service.ts
@@ -12,10 +12,10 @@ import { Injectable } from '@angular/core';
 import { ACTIVITY_OUTLET_NAME, VIEW_GRID_QUERY_PARAM, VIEW_REF_PREFIX } from '../workbench.constants';
 import { ActivatedRoute, NavigationExtras, PRIMARY_OUTLET, Router, UrlSegment } from '@angular/router';
 import { InternalWorkbenchService } from '../workbench.service';
-import { ViewPartGridUrlObserver } from '../view-part-grid/view-part-grid-url-observer.service';
 import { WorkbenchViewRegistry } from '../workbench-view-registry.service';
 import { Defined } from '../defined.util';
 import { WorkbenchView } from '../workbench.model';
+import { WorkbenchViewPartRegistry } from '../view-part-grid/workbench-view-part-registry.service';
 
 /**
  * Provides workbench view navigation capabilities based on Angular Router.
@@ -61,7 +61,7 @@ export class InternalWorkbenchRouter implements WorkbenchRouter {
   constructor(private _router: Router,
               private _workbench: InternalWorkbenchService,
               private _viewRegistry: WorkbenchViewRegistry,
-              private _viewPartGridUrlObserver: ViewPartGridUrlObserver) {
+              private _viewPartRegistry: WorkbenchViewPartRegistry) {
   }
 
   public navigate(commandList: any[], extras: WbNavigationExtras = {}): Promise<boolean> {
@@ -93,10 +93,10 @@ export class InternalWorkbenchRouter implements WorkbenchRouter {
 
     switch (extras.target || 'blank') {
       case 'blank': {
+        const viewPartGrid = this._viewPartRegistry.grid;
         const newViewRef = this._viewRegistry.computeNextViewOutletIdentity();
-        const viewPartRef = extras.blankViewPartRef || (this._workbench.activeViewPartService && this._workbench.activeViewPartService.viewPartRef) || this._viewPartGridUrlObserver.snapshot.viewPartRefs()[0];
-        const grid = this._viewPartGridUrlObserver.snapshot.addView(viewPartRef, newViewRef).serialize();
-        return routeFn(newViewRef, grid);
+        const viewPartRef = extras.blankViewPartRef || (this._workbench.activeViewPartService && this._workbench.activeViewPartService.viewPartRef) || viewPartGrid.viewPartRefs()[0];
+        return routeFn(newViewRef, viewPartGrid.addView(viewPartRef, newViewRef).serialize());
       }
       case 'self': {
         if (!extras.selfViewRef) {
@@ -109,7 +109,7 @@ export class InternalWorkbenchRouter implements WorkbenchRouter {
           throw Error(`Invalid argument: '${extras.selfViewRef}' is not a valid view outlet.`);
         }
 
-        return routeFn(extras.selfViewRef, this._viewPartGridUrlObserver.snapshot.serialize());
+        return routeFn(extras.selfViewRef, this._viewPartRegistry.grid.serialize());
       }
       default: {
         throw Error('Not supported routing view target.');

diff --git a/projects/scion/workbench/src/lib/spec/view-part-grid.component.spec.ts b/projects/scion/workbench/src/lib/spec/view-part-grid.component.spec.ts
@@ -15,7 +15,7 @@ import { WorkbenchModule } from '../workbench.module';
 import { ViewPartGridComponent } from '../view-part-grid/view-part-grid.component';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { ViewPartGridService } from '../view-part-grid/view-part-grid.service';
+import { WorkbenchViewPartRegistry } from '../view-part-grid/workbench-view-part-registry.service';
 import { WorkbenchRouter } from '../routing/workbench-router.service';
 import { advance } from './util/util.spec';
 
@@ -37,7 +37,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -66,7 +66,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -95,7 +95,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -124,7 +124,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -153,7 +153,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -176,8 +176,8 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const gridService = fixture.componentRef.injector.get(ViewPartGridService);
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPartRegistry = fixture.componentRef.injector.get(WorkbenchViewPartRegistry);
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -195,7 +195,7 @@ describe('ViewPartGridComponent', () => {
     viewPart1Component.moveViewToNewViewPart('view.3', 'east').then();
     advance(fixture);
 
-    const viewPart2 = gridService.resolveViewPartElseThrow('viewpart.2');
+    const viewPart2 = viewPartRegistry.getElseThrow('viewpart.2');
     const viewPart2Component = viewPart2.portal.componentRef.instance;
 
     // Move View 2 to the new ViewPart
@@ -224,7 +224,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -263,7 +263,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -302,7 +302,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -341,7 +341,7 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -380,8 +380,8 @@ describe('ViewPartGridComponent', () => {
     advance(fixture);
 
     const gridComponent: ViewPartGridComponent = fixture.componentInstance;
-    const gridService = fixture.componentRef.injector.get(ViewPartGridService);
-    const viewPart1Component = gridComponent.rootAsViewPartPortal.componentRef.instance;
+    const viewPartRegistry = fixture.componentRef.injector.get(WorkbenchViewPartRegistry);
+    const viewPart1Component = gridComponent.viewPartPortal.componentRef.instance;
 
     // Add View 1
     wbRouter.navigate(['view-1'], {blankViewPartRef: 'viewpart.1'}).then();
@@ -409,7 +409,7 @@ describe('ViewPartGridComponent', () => {
     });
 
     // Move View 2 to a new ViewPart in the south of ViewPart 2
-    const viewPart2Component = gridService.resolveViewPartElseThrow('viewpart.2').portal.componentRef.instance;
+    const viewPart2Component = viewPartRegistry.getElseThrow('viewpart.2').portal.componentRef.instance;
     expect(viewPart2Component).toBeTruthy();
 
     viewPart2Component.moveViewToNewViewPart('view.2', 'south').then();

diff --git a/projects/scion/workbench/src/lib/spec/view-part-grid.spec.ts b/projects/scion/workbench/src/lib/spec/view-part-grid.spec.ts
@@ -24,14 +24,15 @@ describe('ViewPartGrid', () => {
 
   it('allows to set a root viewpart', inject([ViewPartGridSerializerService], (serializer: ViewPartGridSerializerService) => {
     const rootViewPart: ViewPartInfoArray = ['viewPart-root'];
-    const testee = new ViewPartGrid(rootViewPart, serializer);
+
+    const testee = new ViewPartGrid(serializer.serializeGrid(rootViewPart), serializer);
     expect(testee.root).toBe(rootViewPart);
   }));
 
   it('allows to add a sibling viewpart', inject([ViewPartGridSerializerService], (serializer: ViewPartGridSerializerService) => {
     const leftViewPart: ViewPartInfoArray = ['viewPart-left', 'view-2', 'view-1', 'view-2', 'view-3'];
 
-    const testee = new ViewPartGrid(leftViewPart, serializer);
+    const testee = new ViewPartGrid(serializer.serializeGrid(leftViewPart), serializer);
     testee.addSiblingViewPart('east', 'viewPart-left', 'viewPart-right');
 
     expect(testee.root).toEqual({
@@ -47,13 +48,13 @@ describe('ViewPartGrid', () => {
     const leftViewPart = ['viewPart-left', 'view-2', 'view-1', 'view-2', 'view-3'];
     const rightViewPart = ['viewPart-right', 'view-5', 'view-4', 'view-5', 'view-6'];
 
-    const testee = new ViewPartGrid({
+    const testee = new ViewPartGrid(serializer.serializeGrid({
       id: 1,
       sash1: leftViewPart,
       sash2: rightViewPart,
       splitter: .5,
       hsplit: false
-    }, serializer);
+    }), serializer);
 
     testee.removeViewPart('viewPart-left');
     expect(testee.root).toEqual(rightViewPart);
@@ -63,21 +64,21 @@ describe('ViewPartGrid', () => {
     const leftViewPart = ['viewPart-left', 'view-2', 'view-1', 'view-2', 'view-3'];
     const rightViewPart = ['viewPart-right', 'view-5', 'view-4', 'view-5', 'view-6'];
 
-    const testee = new ViewPartGrid({
+    const testee = new ViewPartGrid(serializer.serializeGrid({
       id: 1,
       sash1: leftViewPart,
       sash2: rightViewPart,
       splitter: .5,
       hsplit: false
-    }, serializer);
+    }), serializer);
 
     testee.removeViewPart('viewPart-right');
     expect(testee.root).toEqual(leftViewPart);
   }));
 
   it('allows to remove the root viewpart', inject([ViewPartGridSerializerService], (serializer: ViewPartGridSerializerService) => {
     const rootViewPart = ['viewPart-root', 'view-2', 'view-1', 'view-2', 'view-3'];
-    const testee = new ViewPartGrid(rootViewPart, serializer);
+    const testee = new ViewPartGrid(serializer.serializeGrid(rootViewPart), serializer);
 
     testee.removeViewPart('viewPart-root');
 
@@ -106,7 +107,7 @@ describe('ViewPartGrid', () => {
     const viewPart_6 = ['viewPart-6'];
 
     // Set ViewPart 1 as root viewpart
-    const testee = new ViewPartGrid(viewPart_1, serializer);
+    const testee = new ViewPartGrid(serializer.serializeGrid(viewPart_1), serializer);
     expect(testee.root).toEqual(viewPart_1, 'Add ViewPart 1');
 
     // Add ViewPart 2 to the east of ViewPart 2

diff --git a/projects/scion/workbench/src/lib/view-part-grid/view-part-grid-serializer.service.ts b/projects/scion/workbench/src/lib/view-part-grid/view-part-grid-serializer.service.ts
@@ -17,11 +17,11 @@ import { VIEW_PART_REF_PREFIX } from '../workbench.constants';
 @Injectable()
 export class ViewPartGridSerializerService {
 
-  public parseGrid(serializedGrid: string): ViewPartSashBox | ViewPartInfoArray {
+  public parseGrid(serializedGrid: string): ViewPartSashBox | ViewPartInfoArray | null {
     return serializedGrid && JSON.parse(atob(serializedGrid)) || null;
   }
 
-  public serializeGrid(grid: ViewPartSashBox | ViewPartInfoArray): string {
+  public serializeGrid(grid: ViewPartSashBox | ViewPartInfoArray): string | null {
     return grid && btoa(JSON.stringify(grid)) || null;
   }