fix: support mac command key when opening view in new view tab

fixes: #155

projects/app/workbench-application-platform/testing-app/src/app/testing/testing-routing.module.ts

@@ -45,6 +45,7 @@ import { Activity6d806beaComponent } from './activity-6d806bea/activity-6d806bea
 import { Activity5782ab19Component } from './activity-5782ab19/activity-5782ab19.component';
 import { ViewC91805e8Component } from './view-c91805e8/view-c91805e8.component';
 import { ViewCba33eafComponent } from './view-cba33eaf/view-cba33eaf.component';
+import { ViewB8bbbb11Component } from './view-b8bbbb11/view-b8bbbb11.component';
 
 const routes: Routes = [
   {path: 'view', component: TestingViewComponent},
@@ -69,6 +70,7 @@ const routes: Routes = [
   {path: 'view-be587bd6', component: ViewBe587bd6Component},
   {path: 'view-c91805e8', component: ViewC91805e8Component},
   {path: 'view-cba33eaf', component: ViewCba33eafComponent},
+  {path: 'view-b8bbbb11', component: ViewB8bbbb11Component},
   {path: 'popup-1a90c8d2', component: Popup1a90c8d2Component},
   {path: 'popup-7330f506', component: Popup7330f506Component},
   {path: 'popup-9c5319f7', component: Popup9c5319f7Component},

projects/app/workbench-application-platform/testing-app/src/app/testing/testing.module.ts

@@ -61,6 +61,7 @@ import { ViewC91805e8Component } from './view-c91805e8/view-c91805e8.component';
 import { PingIntentPanelComponent } from './ping-intent/ping-intent-panel.component';
 import { ViewCba33eafComponent } from './view-cba33eaf/view-cba33eaf.component';
 import { ViewC985a55bComponent } from './view-c985a55b/view-c985a55b.component';
+import { ViewB8bbbb11Component } from './view-b8bbbb11/view-b8bbbb11.component';
 
 @NgModule({
   declarations: [
@@ -98,6 +99,7 @@ import { ViewC985a55bComponent } from './view-c985a55b/view-c985a55b.component';
     ViewC91805e8Component,
     ViewCba33eafComponent,
     ViewC985a55bComponent,
+    ViewB8bbbb11Component,
     Popup1a90c8d2Component,
     Popup7330f506Component,
     Popup9c5319f7Component,

projects/app/workbench-application-platform/testing-app/src/app/testing/view-b8bbbb11/view-b8bbbb11.component.html

@@ -0,0 +1 @@
+<a [wbRouterLink]="{'entity': 'testing'}" class="e2e-testing-view-link">Testing View</a>

projects/app/workbench-application-platform/testing-app/src/app/testing/view-b8bbbb11/view-b8bbbb11.component.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2018-2019 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 { provideWorkbenchView } from '@scion/workbench-application.angular';
+
+@Component({
+  selector: 'app-view-b8bbbb11',
+  templateUrl: 'view-b8bbbb11.component.html',
+  providers: [
+    provideWorkbenchView(ViewB8bbbb11Component),
+  ],
+})
+export class ViewB8bbbb11Component {
+}

projects/app/workbench-application-platform/testing-app/src/assets/manifest.json

@@ -421,6 +421,20 @@
         "cssClass": "e2e-view-cba33eaf"
       }
     },
+    {
+      "type": "view",
+      "qualifier": {
+        "entity": "testing",
+        "testcase": "b8bbbb11-view"
+      },
+      "description": "Provides a view for testcase 'b8bbbb11'",
+      "properties": {
+        "path": "testing/view-b8bbbb11",
+        "title": "e2e-view-b8bbbb11",
+        "heading": "b8bbbb11",
+        "cssClass": "e2e-view-b8bbbb11"
+      }
+    },
     {
       "type": "popup",
       "qualifier": {

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

@@ -6,6 +6,7 @@ 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 { ViewBb9700a6Component } from './view-bb9700a6/view-bb9700a6.component';
 
 const routes: Routes = [
   {path: '', component: WelcomePageComponent},
@@ -14,6 +15,7 @@ const routes: Routes = [
   {path: 'activity-1a90c8d31-2', component: Activity1a90c8d32Component},
   {path: 'view', component: ViewComponent},
   {path: 'view-4a3a8932', component: View4a3a8932Component},
+  {path: 'view-bb9700a6', component: ViewBb9700a6Component},
   {path: 'view-navigation', component: ViewNavigationComponent},
 ];
 

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

@@ -13,6 +13,7 @@ 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';
+import { ViewBb9700a6Component } from './view-bb9700a6/view-bb9700a6.component';
 
 @NgModule({
   declarations: [
@@ -22,6 +23,7 @@ import { SciParamsEnterModule, SciPropertyModule } from '@scion/app/common';
     WelcomePageComponent,
     ViewComponent,
     View4a3a8932Component,
+    ViewBb9700a6Component,
     ViewNavigationComponent,
   ],
   imports: [

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

@@ -0,0 +1 @@
+<a [wbRouterLink]="['/view']" class="e2e-view-link">View</a>

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

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2018-2019 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 { WorkbenchView } from '@scion/workbench';
+
+@Component({
+  selector: 'app-view-bb9700a6',
+  templateUrl: 'view-bb9700a6.component.html',
+})
+
+export class ViewBb9700a6Component {
+
+  constructor(view: WorkbenchView) {
+    view.title = 'Testcase bb9700a6';
+    view.cssClass = 'e2e-view-bb9700a6';
+  }
+}

projects/e2e/workbench-application-platform/src/page-object/testcase-b8bbbb11-view.po.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2018-2019 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 { clickElement, switchToIFrameContext } from '../util/testing.util';
+import { $ } from 'protractor';
+
+const E2E_TESTING_VIEW_CONTEXT = ['e2e-testing-app', 'e2e-view', 'e2e-view-b8bbbb11'];
+
+export class TestcaseB8bbbb11ViewPO {
+
+  private _linkFinder = $('a.e2e-testing-view-link');
+
+  public async clickLink(pressKey?: string): Promise<void> {
+    await switchToIFrameContext(E2E_TESTING_VIEW_CONTEXT);
+
+    if (pressKey) {
+      await clickElement(this._linkFinder, pressKey);
+    } else {
+      await this._linkFinder.click();
+    }
+  }
+}

projects/e2e/workbench-application-platform/src/router-link.e2e-spec.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2018-2019 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 { browser, Key } from 'protractor';
+import { TestcaseB8bbbb11ViewPO } from './page-object/testcase-b8bbbb11-view.po';
+import { TestingViewPO } from './page-object/testing-view.po';
+import { HostAppPO } from './page-object/host-app.po';
+
+describe('RouterLink', () => {
+
+  const hostAppPO = new HostAppPO();
+  const testingViewPO = new TestingViewPO();
+  const viewPO = new TestcaseB8bbbb11ViewPO();
+
+  beforeEach(async () => {
+    await browser.get('/');
+    await testingViewPO.navigateTo();
+    const viewNavigationPO = await testingViewPO.openViewNavigationPanel();
+    await viewNavigationPO.enterQualifier({
+      entity: 'testing',
+      testcase: 'b8bbbb11-view',
+    });
+    await viewNavigationPO.selectTarget('self');
+    await viewNavigationPO.execute();
+  });
+
+  it('should open testing view in current view [testcase: b8bbbb11-view]', async () => {
+    await viewPO.clickLink();
+    await expect(hostAppPO.getViewTabCount()).toBe(1);
+  });
+
+  it('should open testing view in new view tab when CTRL + click [testcase: b8bbbb11-view]', async () => {
+    await viewPO.clickLink(Key.CONTROL);
+    await expect(hostAppPO.getViewTabCount()).toBe(2);
+  });
+
+  it('should open testing view in new view tab when COMMAND + click [testcase: b8bbbb11-view]', async () => {
+    await viewPO.clickLink(Key.COMMAND);
+    await expect(hostAppPO.getViewTabCount()).toBe(2);
+  });
+
+  it('should open testing view in new view tab when META + click [testcase: b8bbbb11-view]', async () => {
+    await viewPO.clickLink(Key.META);
+    await expect(hostAppPO.getViewTabCount()).toBe(2);
+  });
+});

projects/e2e/workbench-application-platform/src/util/testing.util.ts

@@ -153,3 +153,13 @@ export async function getCssClasses(elementFinder: ElementFinder): Promise<strin
   const classAttr: string = await elementFinder.getAttribute('class');
   return classAttr.split(/\s+/);
 }
+
+/**
+ * Clicks the given element while pressing the specified key.
+ */
+export async function clickElement(elementFinder: ElementFinder, pressKey: string): Promise<void> {
+  await browser.actions().mouseMove(elementFinder).perform();
+
+  // It is important to release the pressed key by {@link #keyUp} in order to avoid side effects in other tests.
+  await browser.actions().keyDown(pressKey).click().keyUp(pressKey).perform();
+}

projects/e2e/workbench/src/page-object/testcase-bb9700a6-view.po.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2018-2019 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 { $ } from 'protractor';
+import { clickElement } from '../util/testing.util';
+
+export class TestcaseBb9700a6ViewPO {
+
+  private _viewFinder = $('app-view-bb9700a6');
+  private _linkFinder = this._viewFinder.$('a.e2e-view-link');
+
+  public async clickLink(pressKey?: string): Promise<void> {
+    if (pressKey) {
+      await clickElement(this._linkFinder, pressKey);
+    } else {
+      await this._linkFinder.click();
+    }
+  }
+}

projects/e2e/workbench/src/router-link.e2e-spec.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2018-2019 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 { browser, Key } from 'protractor';
+import { TestcaseBb9700a6ViewPO } from './page-object/testcase-bb9700a6-view.po';
+import { AppPO } from './page-object/app.po';
+import { ViewNavigationPO } from './page-object/view-navigation.po';
+
+describe('RouterLink', () => {
+
+  const appPO = new AppPO();
+  const viewNavigationPO = new ViewNavigationPO();
+  const viewPO = new TestcaseBb9700a6ViewPO();
+
+  beforeEach(async () => {
+    await browser.get('/');
+    await viewNavigationPO.navigateTo();
+
+    // open view-bb9700a6
+    await viewNavigationPO.enterPath('view-bb9700a6');
+    await viewNavigationPO.enterMatrixParams({viewCssClass: 'e2e-view-bb9700a6', viewTitle: 'view-bb9700a6'});
+    await viewNavigationPO.selectTarget('self');
+    await viewNavigationPO.navigate();
+  });
+
+  it('should open the testing view in current view [testcase: bb9700a6-view]', async () => {
+    await viewPO.clickLink();
+    await expect(appPO.getViewTabCount()).toBe(1);
+  });
+
+  it('should open the testing view in new view tab when CTRL + click [testcase: bb9700a6-view]', async () => {
+    await viewPO.clickLink(Key.CONTROL);
+    await expect(appPO.getViewTabCount()).toBe(2);
+  });
+
+  it('should open the testing view in new view tab when COMMAND + click [testcase: bb9700a6-view]', async () => {
+    await viewPO.clickLink(Key.COMMAND);
+    await expect(appPO.getViewTabCount()).toBe(2);
+  });
+
+  it('should open the testing view in new view tab when META + click [testcase: bb9700a6-view]', async () => {
+    await viewPO.clickLink(Key.META);
+    await expect(appPO.getViewTabCount()).toBe(2);
+  });
+});

projects/e2e/workbench/src/util/testing.util.ts

@@ -90,3 +90,13 @@ export async function hasBrowserError(error: string): Promise<boolean> {
   const logs = await this.browserErrors();
   return logs.some(log => log.message.includes(error));
 }
+
+/**
+ * Clicks the given element while pressing the specified key.
+ */
+export async function clickElement(elementFinder: ElementFinder, pressKey: string): Promise<void> {
+  await browser.actions().mouseMove(elementFinder).perform();
+
+  // It is important to release the pressed key by {@link #keyUp} in order to avoid side effects in other tests.
+  await browser.actions().keyDown(pressKey).click().keyUp(pressKey).perform();
+}

projects/scion/workbench-application.angular/src/lib/workbench-router-link.directive.ts

@@ -18,7 +18,7 @@ import { Qualifier } from '@scion/workbench-application.core';
  *
  * This directive is like 'RouterLink' but with functionality to target a workbench view outlet.
  *
- * If in the context of a view and CTRL key is not pressed, by default, navigation replaces the content of the current view.
+ * If in the context of a view and CTRL or META (Mac: ⌘, Windows: ⊞) key is not pressed, by default, navigation replaces the content of the current view.
  * Override this default behavior by setting a view target strategy in navigational extras.
  */
 @Directive({selector: ':not(a)[wbRouterLink]'})
@@ -36,23 +36,23 @@ export class WorkbenchRouterLinkDirective {
     this._viewContext = !!view;
   }
 
-  @HostListener('click', ['$event.button', '$event.ctrlKey'])
-  public onClick(button: number, ctrlKey: boolean): boolean {
+  @HostListener('click', ['$event.button', '$event.ctrlKey', '$event.metaKey'])
+  public onClick(button: number, ctrlKey: boolean, metaKey: boolean): boolean {
     if (button !== 0) { // not main button pressed
       return true;
     }
 
-    const extras = this.createNavigationExtras(ctrlKey);
+    const extras = this.createNavigationExtras(ctrlKey, metaKey);
     this._workbenchRouter.navigate(this.qualifier, extras);
     return false;
   }
 
-  protected createNavigationExtras(ctrlKey: boolean = false): WbNavigationExtras {
+  protected createNavigationExtras(ctrlKey: boolean = false, metaKey: boolean = false): WbNavigationExtras {
     const extras = this.extras || {};
 
     return {
       ...extras,
-      target: extras.target || (this._viewContext && !ctrlKey ? 'self' : 'blank'),
+      target: extras.target || (this._viewContext && !ctrlKey && !metaKey ? 'self' : 'blank'),
     };
   }
 }