SUBMARINE-692. [web] Replace hand-crafted authguard with Angular buil…

…tin function

### What is this PR for?
1. Replace hand-crafted authguard with Angular builtin function
2. Remove notebook route module. Because there is only one path there, we don't need to use routing module

### What type of PR is it?
[mprovement]

### What is the Jira issue?
https://issues.apache.org/jira/projects/SUBMARINE/issues/SUBMARINE-692

### How should this be tested?
https://github.com/ByronHsu/submarine/actions/runs/398816623

Author: ByronHsu <[email protected]>

Closes #469 from ByronHsu/SUBMARINE-692 and squashes the following commits:

1d3be1e [ByronHsu] use canActivate as authguard

submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.module.ts

@@ -20,14 +20,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NotebookComponent } from './notebook.component';
-import { NotebookRoutingModule } from './notebook-routing.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgZorroAntdModule } from 'ng-zorro-antd';
 import { PipeSharedModule } from '@submarine/pipe/pipe-shared.module';
 
 @NgModule({
-  exports: [ReactiveFormsModule],
   declarations: [NotebookComponent],
-  imports: [CommonModule, NotebookRoutingModule, FormsModule, ReactiveFormsModule, NgZorroAntdModule, PipeSharedModule]
+  exports: [NotebookComponent],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, NgZorroAntdModule, PipeSharedModule]
 })
 export class NotebookModule {}

submarine-workbench/workbench-web/src/app/pages/workbench/workbench-routing.module.ts

@@ -18,7 +18,7 @@
  */
 
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { ActivatedRouteSnapshot, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
 import { EnvironmentComponent } from '@submarine/pages/workbench/environment/environment.component';
 import { ExperimentComponent } from '@submarine/pages/workbench/experiment/experiment.component';
 import { WorkbenchComponent } from '@submarine/pages/workbench/workbench.component';
@@ -27,15 +27,9 @@ import { ExperimentInfoComponent } from './experiment/experiment-info/experiment
 import { HomeComponent } from './home/home.component';
 import { InterpreterComponent } from './interpreter/interpreter.component';
 import { ModelComponent } from './model/model.component';
+import { NotebookComponent } from './notebook/notebook.component';
 import { WorkspaceComponent } from './workspace/workspace.component';
 
-function disablePage(allRoutes: Routes): Routes {
-  const disabledList: string[] = ['home', 'data', 'model', 'workspace', 'interpreter'];
-  allRoutes[0].children[0].redirectTo = 'experiment'; // redirect root page to experiment
-  allRoutes[0].children = allRoutes[0].children.filter((item) => !disabledList.includes(item.path)); // filter pages which are incomplete
-  return allRoutes;
-}
-
 const routes: Routes = [
   {
     path: '',
@@ -44,19 +38,22 @@ const routes: Routes = [
       {
         path: '',
         pathMatch: 'full',
-        redirectTo: 'home'
+        redirectTo: 'experiment'
       },
       {
         path: 'home',
-        component: HomeComponent
+        component: HomeComponent,
+        canActivate: ['canActivatePage']
       },
       {
         path: 'workspace',
-        component: WorkspaceComponent
+        component: WorkspaceComponent,
+        canActivate: ['canActivatePage']
       },
       {
         path: 'interpreter',
-        component: InterpreterComponent
+        component: InterpreterComponent,
+        canActivate: ['canActivatePage']
       },
       {
         path: 'experiment',
@@ -66,33 +63,52 @@ const routes: Routes = [
             path: 'info/:id',
             component: ExperimentInfoComponent
           }
-        ]
+        ],
+        canActivate: ['canActivatePage'],
+        canActivateChild: ['canActivatePage']
       },
       {
         path: 'environment',
-        component: EnvironmentComponent
+        component: EnvironmentComponent,
+        canActivate: ['canActivatePage']
       },
       {
         path: 'data',
-        component: DataComponent
+        component: DataComponent,
+        canActivate: ['canActivatePage']
       },
       {
         path: 'model',
-        component: ModelComponent
+        component: ModelComponent,
+        canActivate: ['canActivatePage']
       },
       {
-        path: 'manager',
-        loadChildren: () => import('./manager/manager.module').then((m) => m.ManagerModule)
+        path: 'notebook',
+        component: NotebookComponent,
+        canActivate: ['canActivatePage'],
       },
       {
-        path: 'notebook',
-        loadChildren: () => import('./notebook/notebook.module').then((m) => m.NotebookModule)
+        path: 'manager',
+        loadChildren: () => import('./manager/manager.module').then((m) => m.ManagerModule),
+        canActivate: ['canActivatePage']
       }
     ]
   }
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(disablePage(routes))]
+  imports: [RouterModule.forChild(routes)],
+  providers: [
+    {
+      provide: 'canActivatePage',
+      useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+        const disablePaths = ['home', 'data', 'model', 'workspace', 'interpreter'];
+        let currentPage = state.url.split('/')[2];
+        console.log('currentPage', currentPage);
+        if (disablePaths.includes(currentPage)) return false;
+        else return true;
+      }
+    }
+  ]
 })
-export class WorkbenchRoutingModule {}
+export class WorkbenchRoutingModule { }

submarine-workbench/workbench-web/src/app/pages/workbench/workbench.module.ts

@@ -25,7 +25,6 @@ import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-rou
 import { PipeSharedModule } from '@submarine/pipe/pipe-shared.module';
 import { NgZorroAntdModule } from 'ng-zorro-antd';
 import { DataComponent } from './data/data.component';
-import { ExperimentComponent } from './experiment/experiment.component';
 import { ExperimentModule } from './experiment/experiment.module';
 
 import { HomeComponent } from './home/home.component';
@@ -35,6 +34,7 @@ import { WorkbenchComponent } from './workbench.component';
 import { WorkspaceComponent } from './workspace/workspace.component';
 import { WorkspaceModule } from './workspace/workspace.module';
 import { EnvironmentComponent } from './environment/environment.component';
+import { NotebookComponent } from './notebook/notebook.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +43,8 @@ import { EnvironmentComponent } from './environment/environment.component';
     WorkspaceComponent,
     DataComponent,
     ModelComponent,
-    EnvironmentComponent
+    EnvironmentComponent,
+    NotebookComponent
   ],
   imports: [
     CommonModule,
@@ -57,4 +58,4 @@ import { EnvironmentComponent } from './environment/environment.component';
     PipeSharedModule
   ]
 })
-export class WorkbenchModule {}
+export class WorkbenchModule { }