Add browser not supported page. Resolves #1140. (#1157)

Author: frano-m

maintenance/explore/cell.png

@@ -1,8 +1,8 @@
 /**
- * UCSC Genomics Institute - CGL
- * https://cgl.genomics.ucsc.edu/
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
  *
- * Set of top-level routes used by Boardwalk.
+ * Set of top-level routes used by HCA Data Portal.
  */
 
 // Core dependencies
@@ -11,22 +11,29 @@ import { Route } from "@angular/router";
 // App components
 import { ErrorComponent } from "./system/error/error.component";
 import { NotFoundComponent } from "./system/not-found/not-found.component";
+import { BrowserCanActivateGuard } from "./shared/routing/browser.can-activate.guard";
 
 export const AppRoutes: Route[] = [
     {
         path: "",
-        redirectTo: "/projects",
-        pathMatch: "full"
-    }, {
-        path: "error",
-        component: ErrorComponent
-    }, {
-        path: "not-found",
-        component: NotFoundComponent
-    },
-    {
-        path: "**",
-        redirectTo: "/projects",
-        pathMatch: "full"
+        canActivate: [BrowserCanActivateGuard],
+        children: [
+            {
+                path: "",
+                redirectTo: "/projects",
+                pathMatch: "full"
+            }, {
+                path: "error",
+                component: ErrorComponent
+            }, {
+                path: "not-found",
+                component: NotFoundComponent
+            },
+            {
+                path: "**",
+                redirectTo: "/projects",
+                pathMatch: "full"
+            }
+        ]
     }
 ];

spa/src/app/app.routes.ts

@@ -24,22 +24,27 @@ import { ProjectSummaryStatsComponent } from "./project-summary-stats-component/
 import { ReleaseComponent } from "./releases/release.component";
 import { ReleaseFilesModalContainerComponent } from "./releases/release-files-modal-container/release-files-modal-container.component";
 import { ReleaseVisualizationsModalContainerComponent } from "./releases/visualizations-modal-container/release-visualizations-modal-container.component";
+import { BrowserCanActivateGuard } from "../shared/routing/browser.can-activate.guard";
 
 export const routes: Route[] = [
     {
         path: "files",
+        canActivate: [BrowserCanActivateGuard],
         component: FilesComponent
     },
     {
         path: "get-data",
+        canActivate: [BrowserCanActivateGuard],
         component: HCAGetDataComponent
     },
     {
         path: "samples",
+        canActivate: [BrowserCanActivateGuard],
         component: FilesComponent
     },
     {
         path: "projects",
+        canActivate: [BrowserCanActivateGuard],
         children: [
             {
                 path: "",
@@ -56,7 +61,7 @@ export const routes: Route[] = [
                 },
                     {
                         path: "project-metadata",
-                        component: ProjectMetadataComponent
+                        component: ProjectMetadataComponent,
                     },
                     {
                         path: "expression-matrices",
@@ -99,6 +104,7 @@ export const routes: Route[] = [
     },
     {
         path: "releases/2020-mar",
+        canActivate: [BrowserCanActivateGuard],
         component: ReleaseComponent
     }
 ];

spa/src/app/files/files.routes.ts

@@ -0,0 +1,51 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Determines if current browser is supported and if so, allows navigation to continue. If browser is not supported,
+ * exits out of Angular and loads BNS page by updating the address bar.
+ */
+
+// Core dependencies
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from "@angular/router";
+import { DeviceDetectorService } from "ngx-device-detector";
+
+@Injectable()
+export class BrowserCanActivateGuard implements CanActivate {
+
+    /**
+     * @param {DeviceDetectorService} deviceService
+     */
+    constructor(private deviceService: DeviceDetectorService) {}
+
+    /**
+     * Returns true if browser is supported and navigation can continue.
+     *
+     * @param {ActivatedRouteSnapshot} route
+     * @param {RouterStateSnapshot} state
+     * @returns {boolean}
+     */
+    canActivate(route: ActivatedRouteSnapshot,
+                state: RouterStateSnapshot): boolean {
+
+        return this.isBrowserSupported();
+    }
+
+    /**
+     * Returns true if browser is supported.
+     *
+     * @returns {boolean}
+     */
+    private isBrowserSupported(): boolean {
+
+        // Display browser not supported for Internet Explorer.
+        if ( this.deviceService.browser === "IE" ) {
+
+            window.location.href = "/static/browser-not-supported.html";
+            return false;
+        }
+
+        return true;
+    }
+}

spa/src/app/shared/routing/browser.can-activate.guard.ts

@@ -39,6 +39,7 @@ import { FileDownloadComponent } from "./file-download/file-download.component";
 import { CopyToClipboardComponent } from "./copy-to-clipboard/copy-to-clipboard.component";
 import { NavComponent } from "./nav/nav.component";
 import { NoHitsComponent } from "./no-hits/no-hits.component";
+import { BrowserCanActivateGuard } from "./routing/browser.can-activate.guard";
 
 @NgModule({
     imports: [
@@ -74,6 +75,7 @@ import { NoHitsComponent } from "./no-hits/no-hits.component";
         WarningTitleComponent
     ],
     providers: [
+        BrowserCanActivateGuard,
         GTMService,
         ResponsiveService
     ],