fix: match matrix params when resolving views for activation or closing

fixes #120

projects/app/common/src/lib/params-enter/params-enter.component.html

@@ -9,7 +9,7 @@ <h2>{{title}}</h2>
   <!-- value -->
   <input [formControl]="paramGroup.get(PARAM_VALUE)" class="e2e-value">
   <!-- 'remove' button -->
-  <button *ngIf="removable" class="material-icons" type="button" (click)="onRemove(i)">remove</button>
+  <button *ngIf="removable" class="material-icons e2e-remove" type="button" (click)="onRemove(i)">remove</button>
 
   <ng-template #label_readonly>
     <label>{{paramGroup.get(PARAM_NAME).value}}</label>

projects/app/workbench/workbench-app/src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { Activity1a90c8d32Component } from './activity-1a90c8d3/activity-1a90c8d
 import { WelcomePageComponent } from './welcome-page/welcome-page.component';
 import { ViewComponent } from './view/view.component';
 import { View4a3a8932Component } from './view-4a3a8932/view-4a3a8932.component';
+import { ViewNavigationComponent } from './view-navigation/view-navigation.component';
 
 const routes: Routes = [
   {path: '', component: WelcomePageComponent},
@@ -13,6 +14,7 @@ const routes: Routes = [
   {path: 'activity-1a90c8d31-2', component: Activity1a90c8d32Component},
   {path: 'view', component: ViewComponent},
   {path: 'view-4a3a8932', component: View4a3a8932Component},
+  {path: 'view-navigation', component: ViewNavigationComponent},
 ];
 
 @NgModule({

projects/app/workbench/workbench-app/src/app/app.module.ts

@@ -10,6 +10,9 @@ import { Activity1a90c8d32Component } from './activity-1a90c8d3/activity-1a90c8d
 import { WelcomePageComponent } from './welcome-page/welcome-page.component';
 import { ViewComponent } from './view/view.component';
 import { View4a3a8932Component } from './view-4a3a8932/view-4a3a8932.component';
+import { ViewNavigationComponent } from './view-navigation/view-navigation.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SciParamsEnterModule, SciPropertyModule } from '@scion/app/common';
 
 @NgModule({
   declarations: [
@@ -19,12 +22,17 @@ import { View4a3a8932Component } from './view-4a3a8932/view-4a3a8932.component';
     WelcomePageComponent,
     ViewComponent,
     View4a3a8932Component,
+    ViewNavigationComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     WorkbenchModule.forRoot(),
     BrowserAnimationsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    SciParamsEnterModule,
+    SciPropertyModule,
   ],
   providers: [],
   bootstrap: [

projects/app/workbench/workbench-app/src/app/view-navigation/view-navigation.component.html

@@ -0,0 +1,19 @@
+<input placeholder="Path" [formControl]="form.get(PATH)" class="e2e-path">
+<sci-params-enter [title]="'Query parameters'" [paramsFormArray]="form.get(QUERY_PARAMS)" [addable]="true" [removable]="true" class="e2e-query-params-panel"></sci-params-enter>
+<sci-params-enter [title]="'Matrix parameters'" [paramsFormArray]="form.get(MATRIX_PARAMS)" [addable]="true" [removable]="true" class="e2e-matrix-params-panel"></sci-params-enter>
+
+<form autocomplete="off">
+  <label for="activateIfPresent">ActivateIfPresent</label>
+  <input id="activateIfPresent" type="checkbox" [formControl]="form.get(ACTIVATE_IF_PRESENT)">
+
+  <label for="closeIfPresent">CloseIfPresent</label>
+  <input id="closeIfPresent" type="checkbox" [formControl]="form.get(CLOSE_IF_PRESENT)">
+
+  <label for="target">Target</label>
+  <select id="target" [formControl]="form.get(TARGET)">
+    <option value="self">self</option>
+    <option value="blank">blank</option>
+  </select>
+</form>
+
+<button (click)="onNavigate()" class="e2e-navigate">Navigate</button>

projects/app/workbench/workbench-app/src/app/view-navigation/view-navigation.component.scss

@@ -0,0 +1,26 @@
+@import 'common';
+
+:host {
+  padding: app-padding();
+  display: grid;
+  grid-auto-rows: min-content;
+  grid-row-gap: .5em;
+  font-size: .9em;
+
+  > sci-params-enter {
+    background-color: #FFFFFF;
+  }
+
+  > form {
+    display: grid;
+    grid-template-columns: 100px minmax(75px, 300px);
+    grid-column-gap: 1em;
+    grid-row-gap: .5em;
+    @include grid-container-align-items(center);
+    background-color: #FFFFFF;
+
+    border: 1px solid accentColor(.25);
+    border-radius: 5px;
+    padding: 1em;
+  }
+}

projects/app/workbench/workbench-app/src/app/view-navigation/view-navigation.component.ts

@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2018 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+import { Component } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { SciParamsEnterComponent } from '@scion/app/common';
+import { WbNavigationExtras, WorkbenchRouter, WorkbenchView } from '@scion/workbench';
+import { Params } from '@angular/router';
+
+const PATH = 'path';
+const QUERY_PARAMS = 'queryParams';
+const MATRIX_PARAMS = 'matrixParams';
+const ACTIVATE_IF_PRESENT = 'activateIfPresent';
+const CLOSE_IF_PRESENT = 'closeIfPresent';
+const TARGET = 'target';
+
+@Component({
+  selector: 'app-view-navigation',
+  templateUrl: './view-navigation.component.html',
+  styleUrls: ['./view-navigation.component.scss'],
+})
+export class ViewNavigationComponent {
+
+  public readonly PATH = PATH;
+  public readonly MATRIX_PARAMS = MATRIX_PARAMS;
+  public readonly QUERY_PARAMS = QUERY_PARAMS;
+  public readonly ACTIVATE_IF_PRESENT = ACTIVATE_IF_PRESENT;
+  public readonly CLOSE_IF_PRESENT = CLOSE_IF_PRESENT;
+  public readonly TARGET = TARGET;
+
+  public form: FormGroup;
+
+  constructor(formBuilder: FormBuilder, private _router: WorkbenchRouter, private _view: WorkbenchView) {
+    this._view.title = 'View Navigation';
+    this._view.heading = 'Interact with Workbench Router';
+    this._view.cssClass = 'e2e-view-navigation';
+    this.form = formBuilder.group({
+      [PATH]: formBuilder.control(''),
+      [MATRIX_PARAMS]: formBuilder.array([]),
+      [QUERY_PARAMS]: formBuilder.array([]),
+      [ACTIVATE_IF_PRESENT]: formBuilder.control(true),
+      [CLOSE_IF_PRESENT]: formBuilder.control(false),
+      [TARGET]: formBuilder.control('blank'),
+    });
+  }
+
+  public onNavigate(): void {
+    const matrixParams: Params = SciParamsEnterComponent.toParams(this.form.get(MATRIX_PARAMS) as FormArray);
+    const extras: WbNavigationExtras = {
+      queryParams: SciParamsEnterComponent.toParams(this.form.get(QUERY_PARAMS) as FormArray),
+      activateIfPresent: this.form.get(ACTIVATE_IF_PRESENT).value,
+      closeIfPresent: this.form.get(CLOSE_IF_PRESENT).value,
+      target: this.form.get(TARGET).value,
+      selfViewRef: this._view.viewRef,
+    };
+
+    const commands: any[] = String(this.form.get(PATH).value).split('/');
+    if (matrixParams && Object.keys(matrixParams).length) {
+      commands.push(matrixParams);
+    }
+
+    this._router.navigate(commands, extras);
+  }
+}

projects/app/workbench/workbench-app/src/app/view/view.component.html

@@ -1 +1,9 @@
-<h2>{{view.title}}</h2>
+<section class="params">
+  <h2>URL Parameters</h2>
+  <sci-property class="params" [properties]="params$ | async"></sci-property>
+</section>
+
+<section class="query-params">
+  <h2>URL Query Parameters</h2>
+  <sci-property class="query-params" [properties]="queryParams$ | async"></sci-property>
+</section>

projects/app/workbench/workbench-app/src/app/view/view.component.scss

@@ -1,3 +1,23 @@
+@import 'common';
+
 :host {
-  margin: 1em;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: min-content;
+  grid-column-gap: 1em;
+  grid-row-gap: 1em;
+  padding: app-padding();
+
+  > section {
+    border: 1px solid accentColor(.25);
+    border-radius: 5px;
+    padding: 1em;
+    font-size: .9em;
+
+    > h2 {
+      font-size: 1em;
+      font-weight: bold;
+      margin-top: 0;
+    }
+  }
 }

projects/app/workbench/workbench-app/src/app/view/view.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
-import { Subject } from 'rxjs';
-import { ActivatedRoute } from '@angular/router';
+import { Observable, Subject } from 'rxjs';
+import { ActivatedRoute, Params } from '@angular/router';
 import { takeUntil } from 'rxjs/operators';
 import { WorkbenchView } from '@scion/workbench';
 
@@ -13,11 +13,18 @@ export class ViewComponent implements OnDestroy {
 
   private _destroy$ = new Subject<void>();
 
+  public params$: Observable<Params>;
+  public queryParams$: Observable<Params>;
+
   constructor(route: ActivatedRoute, public view: WorkbenchView) {
+    this.params$ = route.params;
+    this.queryParams$ = route.queryParams;
+
     route.paramMap
       .pipe(takeUntil(this._destroy$))
       .subscribe(params => {
         view.title = params.get('viewTitle');
+        view.heading = 'General testing view';
         view.cssClass = params.get('viewCssClass');
       });
   }

projects/app/workbench/workbench-app/src/app/welcome-page/welcome-page.component.html

@@ -7,4 +7,5 @@ <h1>Welcome to SCION Workbench</h1>
   <a [wbRouterLink]="['/view', { viewTitle: 'Tile view 3', viewCssClass: 'e2e-tile-view-3' }]" class="e2e-tile-view-3">Open view 3</a>
   <a [wbRouterLink]="['/view', { viewTitle: 'Tile view 4', viewCssClass: 'e2e-tile-view-4' }]" class="e2e-tile-view-4">Open view 4</a>
   <a [wbRouterLink]="['/view-4a3a8932']" class="e2e-tile-4a3a8932">Testcase '4a3a8932'</a>
+  <a [wbRouterLink]="['/view-navigation']" class="e2e-view-navigation">View Navigation<small>Use to interact with workbench router</small></a>
 </nav>

projects/app/workbench/workbench-app/src/app/welcome-page/welcome-page.component.scss

@@ -26,12 +26,18 @@ $dark-green: #3e7f62;
       margin: 1em;
       padding: 1em;
       display: flex;
+      flex-direction: column;
       justify-content: center;
       align-items: center;
       text-decoration: none;
       color: white;
       font-size: 24px;
       text-align: center;
+
+      > small {
+        margin-top: 1em;
+        font-size: 16px;
+      }
     }
   }
 }

projects/app/workbench/workbench-app/src/app/welcome-page/welcome-page.component.ts

@@ -10,6 +10,7 @@ export class WelcomePageComponent {
 
   constructor(@Optional() view: WorkbenchView) {
     if (view) {
+      view.title = 'Welcome';
       view.cssClass = 'e2e-welcome-page';
     }
   }

projects/e2e/workbench/src/page-object/sci-params-enter.po.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2018 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms from the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+import { ElementFinder } from 'protractor';
+
+export class SciParamsEnterPanelPO {
+
+  constructor(private _sciParamsEnterPanel: ElementFinder) {
+  }
+
+  /**
+   * Clears all params.
+   */
+  public async clear(): Promise<void> {
+    await this._sciParamsEnterPanel.$$('.e2e-remove').each(removeParamButton => removeParamButton.click());
+  }
+
+  /**
+   * Allows to enter parameters into '<sci-params-enter>' panel.
+   */
+  public async enterParams(params: Object): Promise<void> {
+    const addButton = this._sciParamsEnterPanel.$('button.e2e-add');
+    const lastKeyInput = this._sciParamsEnterPanel.$$('input.e2e-key').last();
+    const lastValueInput = this._sciParamsEnterPanel.$$('input.e2e-value').last();
+
+    for (const key of Object.keys(params)) {
+      await addButton.click();
+      await lastKeyInput.sendKeys(key);
+      await lastValueInput.sendKeys(`${params[key]}`);
+    }
+  }
+}

projects/e2e/workbench/src/page-object/sci-property.po.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2018 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms from the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+import { ElementFinder } from 'protractor';
+
+export class SciPropertyPanelPO {
+
+  /**
+   * Allows to read properties from '<sci-property>' panel.
+   */
+  public async readProperties(sciPropertyPanel: ElementFinder): Promise<{ [key: string]: string }> {
+    const keysFinder = sciPropertyPanel.$$('.e2e-key');
+    const valuesFinder = sciPropertyPanel.$$('.e2e-value');
+
+    const propertyCount = await keysFinder.count();
+    if (propertyCount === 0) {
+      return null;
+    }
+
+    const properties: { [key: string]: string } = {};
+    for (let i = 0; i < propertyCount; i++) {
+      const key = await keysFinder.get(i).getText();
+      const value = await valuesFinder.get(i).getText();
+      properties[key] = value;
+    }
+
+    return properties;
+  }
+}