fix for middle clicking links (#937)

* fix for middle clicking links

* Found another link in the app

* Converted all links to use externaUrl decorator

* Missing semicolon

* Minor fixes for compilation/linting

* Changed help link back to embedded in html

* trigger builds

* trigger build for agreement removal

packages/uhk-web/src/app/components/agent/about/about.component.html

@@ -12,7 +12,7 @@
             <div>
                 Agent version: <span class="text-bold">{{ version }}</span>
             </div>
-            <a class="link-github" [href]="agentGithubUrl" (click)="openUrlInBrowser($event)">Agent on GitHub</a>
+            <a class="link-github" [href]="agentGithubUrl" externalUrl>Agent on GitHub</a>
         </div>
         <ng-container *ngIf="(state$ | async) as state">
             <div class="form-group">
@@ -35,7 +35,7 @@
                     Loading...
                 </div>
                 <div *ngIf="state.error" class="form-group">
-                    We experienced a problem while fetching contributor list. <a [href]="agentContributorsUrl" (click)="openUrlInBrowser($event)">Check Contributors page on GitHub!</a>
+                    We experienced a problem while fetching contributor list. <a [href]="agentContributorsUrl" externalUrl>Check Contributors page on GitHub!</a>
                 </div>
             </ng-template>
         </ng-container>

packages/uhk-web/src/app/components/agent/about/about.component.ts

@@ -8,7 +8,6 @@ import { getVersions } from '../../../util';
 
 import { AppState, contributors } from '../../../store';
 import { State } from '../../../store/reducers/contributors.reducer';
-import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
 import { GetAgentContributorsAction } from '../../../store/actions/contributors.action';
 
 @Component({
@@ -21,8 +20,8 @@ import { GetAgentContributorsAction } from '../../../store/actions/contributors.
 })
 export class AboutComponent implements OnInit {
     version: string = getVersions().version;
-    agentGithubUrl = Constants.AGENT_GITHUB_URL;
-    agentContributorsUrl = Constants.AGENT_CONTRIBUTORS_GITHUB_PAGE_URL;
+    agentGithubUrl: string = Constants.AGENT_GITHUB_URL;
+    agentContributorsUrl: string = Constants.AGENT_CONTRIBUTORS_GITHUB_PAGE_URL;
     state$: Observable<State>;
 
     constructor(private store: Store<AppState>) {
@@ -33,10 +32,4 @@ export class AboutComponent implements OnInit {
 
         this.store.dispatch(new GetAgentContributorsAction());
     }
-
-    openUrlInBrowser(event: Event): void {
-        event.preventDefault();
-
-        this.store.dispatch(new OpenUrlInNewWindowAction((event.target as Element).getAttribute('href')));
-    }
 }

packages/uhk-web/src/app/components/agent/about/contributor-badge/contributor-badge.component.html

@@ -1,2 +1,2 @@
 <img #badge alt="{{ name }} on GitHub">
-<a [href]="profileUrl" (click)="openUrlInBrowser($event)">{{ name }}</a>
+<a [href]="profileUrl" externalUrl>{{ name }}</a>

packages/uhk-web/src/app/components/agent/about/contributor-badge/contributor-badge.component.ts

@@ -2,7 +2,6 @@ import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 
 import { AppState } from '../../../../store/index';
-import { OpenUrlInNewWindowAction } from '../../../../store/actions/app';
 
 import { UHKContributor } from '../../../../models/uhk-contributor';
 
@@ -33,10 +32,4 @@ export class ContributorBadgeComponent implements OnInit {
     ngOnInit(): void {
         (this.badge.nativeElement as HTMLImageElement).src = URL.createObjectURL(this.contributor.avatar);
     }
-
-    openUrlInBrowser(event: Event): void {
-        event.preventDefault();
-
-        this.store.dispatch(new OpenUrlInNewWindowAction((event.target as Element).getAttribute('href')));
-    }
 }

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html

@@ -32,7 +32,7 @@
                  role="alert">
                 <p>Firmware update failed. Disconnect every USB device from your computer (including USB hubs, KVM switches, USB dongles, and everything else), then connect only your UHK and retry.</p>
 
-                <p>If you've tried the above and the update still keeps failing, please <a class="link-github" (click)="openFirmwareGitHubIssuePage($event)">create a GitHub issue</a>, and attach the update log.</p>
+                <p>If you've tried the above and the update still keeps failing, please <a class="link-github" [href]="firmwareGithubIssueUrl" externalUrl>create a GitHub issue</a>, and attach the update log.</p>
             </div>
 
             <div *ngIf="firmwareUpgradeSuccess$ | async"

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts

@@ -3,7 +3,6 @@ import { Store } from '@ngrx/store';
 import { Observable, Subscription } from 'rxjs';
 import { Constants, HardwareModules, VersionInformation } from 'uhk-common';
 
-import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
 import {
     AppState,
     firmwareUpgradeAllowed,
@@ -37,6 +36,7 @@ export class DeviceFirmwareComponent implements OnDestroy {
     firmwareUpgradeAllowed$: Observable<boolean>;
     firmwareUpgradeFailed$: Observable<boolean>;
     firmwareUpgradeSuccess$: Observable<boolean>;
+    firmwareGithubIssueUrl: string;
 
     constructor(private store: Store<AppState>) {
         this.flashFirmwareButtonDisbabled$ = store.select(flashFirmwareButtonDisbabled);
@@ -49,6 +49,7 @@ export class DeviceFirmwareComponent implements OnDestroy {
         this.firmwareUpgradeAllowed$ = store.select(firmwareUpgradeAllowed);
         this.firmwareUpgradeFailed$ = store.select(firmwareUpgradeFailed);
         this.firmwareUpgradeSuccess$ = store.select(firmwareUpgradeSuccess);
+        this.firmwareGithubIssueUrl = Constants.FIRMWARE_GITHUB_ISSUE_URL;
     }
 
     ngOnDestroy(): void {
@@ -62,9 +63,4 @@ export class DeviceFirmwareComponent implements OnDestroy {
     changeFile(data: UploadFileData): void {
         this.store.dispatch(new UpdateFirmwareWithAction(data.data));
     }
-
-    openFirmwareGitHubIssuePage(event): void {
-        event.preventDefault();
-        this.store.dispatch(new OpenUrlInNewWindowAction(Constants.FIRMWARE_GITHUB_ISSUE_URL));
-    }
 }

packages/uhk-web/src/app/directives/external-url/external-url.directive.ts

@@ -14,6 +14,15 @@ export class ExternalUrlDirective {
 
     @HostListener('click', ['$event'])
     onClick($event: MouseEvent): void {
+        this.openUrl($event);
+    }
+
+    @HostListener('auxclick', ['$event'])
+    onAuxClick($event: MouseEvent): void {
+        this.openUrl($event);
+    }
+
+    openUrl($event: MouseEvent): void {
         $event.preventDefault();
         $event.stopPropagation();