From 8a961056005eebced69a3f36be520ac70516c829 Mon Sep 17 00:00:00 2001
From: ivakoleva <ikoleva@vmware.com>
Date: Thu, 27 Apr 2023 17:00:07 +0300
Subject: [PATCH] frontend: Toggleable auth (#1958)

We need a feature flag for skipping OAuth2, so the frontend can
operate with a Control Service where security is disabled. It is the
default use case when having quickstart-vdk for local demo or dev
installation.

This is a stacked PR onto auth configurations organized from
https://github.com/vmware/versatile-data-kit/pull/1957
Introduced authSkipped flag defaulting to false, due security standards.
The top right corner with username and logout dropdown are rendered
in case auth is enabled.

Testing done: verified both cases locally; added testing

---------

Signed-off-by: ivakoleva <iva.koleva@clearcode.bg>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 .../projects/ui/src/app/app-config.model.ts   |  3 +-
 .../projects/ui/src/app/app-config.service.ts |  6 ++
 .../projects/ui/src/app/app.component.html    | 10 +--
 .../projects/ui/src/app/app.component.spec.ts | 72 ++++++++++---------
 .../gui/projects/ui/src/app/app.component.ts  | 35 ++++++---
 .../gui/projects/ui/src/app/app.module.ts     |  6 +-
 .../projects/ui/src/app/http.interceptor.ts   |  7 +-
 .../ui/src/assets/data/appConfig.json         |  1 +
 8 files changed, 85 insertions(+), 55 deletions(-)

diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.model.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.model.ts
index ff6db19002..34cb7f9cf3 100644
--- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.model.ts
+++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.model.ts
@@ -10,13 +10,14 @@ export interface AppConfig {
 }
 
 export interface Auth {
+    skipAuth?: false;
+
     // Used for producing the AuthConfig.customQueryParams mapping for `orgLink` and `targetUri`
     consoleCloudUrl?: string;
     orgLinkRoot?: string;
     // $window.location.origin is replaced with the corresponding value dynamically upon loading,
     // see AppConfigService
     authConfig?: AuthConfig;
-
     resourceServer?: OAuthResourceServerConfig;
     // Used for token auto-refresh capability, in case a token is about to expire.
     refreshTokenConfig?: RefreshTokenConfig;
diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.ts
index 2f77e12a21..f716b68bf2 100644
--- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.ts
+++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.ts
@@ -30,7 +30,12 @@ export class AppConfigService {
         return this.appConfig;
     }
 
+    getSkipAuth(): boolean {
+        return this.appConfig.auth.skipAuth;
+    }
+
     getAuthCodeFlowConfig(): AuthConfig {
+        if (this.getSkipAuth()) return new AuthConfig();
         const replaceWindowLocationOrigin = (str: string): string => {
             return str?.replace('$window.location.origin', window.location.origin);
         };
@@ -42,6 +47,7 @@ export class AppConfigService {
     }
 
     getRefreshTokenConfig(): RefreshTokenConfig {
+        if (this.getSkipAuth()) return null;
         return this.getConfig()?.auth.refreshTokenConfig;
     }
 }
diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.html b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.html
index fb31bdd180..21ec3a466c 100644
--- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.html
+++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.html
@@ -3,8 +3,10 @@
    ~ SPDX-License-Identifier: Apache-2.0
   -->
 
-<clr-main-container [attr.data-automation]="!!idToken ? 'vdk' : null">
-    <ng-container *ngIf="idToken">
+<clr-main-container
+    [attr.data-automation]="skipAuth || !!idToken ? 'vdk' : null"
+>
+    <ng-container *ngIf="skipAuth || idToken">
         <header class="header-7">
             <div class="branding">
                 <a href="..." class="nav-link">
@@ -14,7 +16,7 @@
                     >
                 </a>
             </div>
-            <div class="header-actions">
+            <div class="header-actions" *ngIf="!skipAuth">
                 <clr-dropdown>
                     <button
                         class="nav-text"
@@ -108,7 +110,7 @@
     </ng-container>
 </clr-main-container>
 
-<div *ngIf="!idToken" class="vdk-main__spinner-container">
+<div *ngIf="!skipAuth && !idToken" class="vdk-main__spinner-container">
     <div class="checking-user">
         <div class="loading-spinner">
             <h2 class="loading-title">Loading Data</h2>
diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.spec.ts
index b45e455ef3..0f458b5745 100644
--- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.spec.ts
+++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.spec.ts
@@ -19,25 +19,55 @@ import {
     UrlOpenerService
 } from '@versatiledatakit/shared';
 
-import { AppConfig } from './app-config.model';
-
 import { AppConfigService } from './app-config.service';
 
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
     let routerServiceStub: jasmine.SpyObj<RouterService>;
-    let oAuthServiceStub: jasmine.SpyObj<OAuthService>;
     let navigationServiceStub: jasmine.SpyObj<NavigationService>;
     let viewContainerRefStub: jasmine.SpyObj<ViewContainerRef>;
     let dynamicComponentsServiceStub: jasmine.SpyObj<DynamicComponentsService>;
     let confirmationServiceStub: jasmine.SpyObj<ConfirmationService>;
     let urlOpenerServiceStub: jasmine.SpyObj<UrlOpenerService>;
     let appConfigServiceStub: jasmine.SpyObj<AppConfigService>;
+    const configureTestingModule = (providersAdditional: any[]) => {
+        const providersBase = [
+            UrlHelperService,
+            { provide: NavigationService, useValue: navigationServiceStub },
+            { provide: RouterService, useValue: routerServiceStub },
+            { provide: ViewContainerRef, useValue: viewContainerRefStub },
+            { provide: DynamicComponentsService, useValue: dynamicComponentsServiceStub },
+            { provide: ConfirmationService, useValue: confirmationServiceStub },
+            { provide: UrlOpenerService, useValue: urlOpenerServiceStub },
+            { provide: AppConfigService, useValue: appConfigServiceStub }
+        ];
+        TestBed.configureTestingModule({
+            schemas: [NO_ERRORS_SCHEMA],
+            declarations: [AppComponent],
+            imports: [],
+            providers: providersBase.concat(providersAdditional)
+        });
+    };
 
     beforeEach(() => {
         routerServiceStub = jasmine.createSpyObj<RouterService>('routerService', ['getState']);
-        oAuthServiceStub = jasmine.createSpyObj<OAuthService>('oAuthService', [
+        navigationServiceStub = jasmine.createSpyObj<NavigationService>('navigationService', ['initialize']);
+        appConfigServiceStub = jasmine.createSpyObj<AppConfigService>('appConfigService', [
+            'getConfig',
+            'getAuthCodeFlowConfig',
+            'getSkipAuth'
+        ]);
+        viewContainerRefStub = jasmine.createSpyObj<ViewContainerRef>('viewContainerRefStub', ['createComponent']);
+        dynamicComponentsServiceStub = jasmine.createSpyObj<DynamicComponentsService>('dynamicComponentsServiceStub', ['initialize']);
+        confirmationServiceStub = jasmine.createSpyObj<ConfirmationService>('confirmationServiceStub', ['initialize']);
+        urlOpenerServiceStub = jasmine.createSpyObj<UrlOpenerService>('urlOpenerServiceStub', ['initialize']);
+        routerServiceStub.getState.and.returnValue(new Subject());
+    });
+
+    it('should create the app with auth enabled', () => {
+        appConfigServiceStub.getSkipAuth.and.returnValue(false);
+        const oAuthServiceStub = jasmine.createSpyObj<OAuthService>('oAuthService', [
             'configure',
             'loadDiscoveryDocumentAndLogin',
             'getAccessTokenExpiration',
@@ -46,41 +76,19 @@ describe('AppComponent', () => {
             'getIdToken',
             'getIdentityClaims'
         ]);
-        navigationServiceStub = jasmine.createSpyObj<NavigationService>('navigationService', ['initialize']);
-        viewContainerRefStub = jasmine.createSpyObj<ViewContainerRef>('viewContainerRefStub', ['createComponent']);
-        dynamicComponentsServiceStub = jasmine.createSpyObj<DynamicComponentsService>('dynamicComponentsServiceStub', ['initialize']);
-        confirmationServiceStub = jasmine.createSpyObj<ConfirmationService>('confirmationServiceStub', ['initialize']);
-        urlOpenerServiceStub = jasmine.createSpyObj<UrlOpenerService>('urlOpenerServiceStub', ['initialize']);
-        appConfigServiceStub = jasmine.createSpyObj<AppConfigService>('appConfigService', ['getConfig', 'getAuthCodeFlowConfig']);
-
-        routerServiceStub.getState.and.returnValue(new Subject());
         oAuthServiceStub.getIdentityClaims.and.returnValue({});
         oAuthServiceStub.loadDiscoveryDocumentAndLogin.and.returnValue(Promise.resolve(true));
         oAuthServiceStub.getAccessTokenExpiration.and.returnValue(0);
         oAuthServiceStub.refreshToken.and.returnValue(Promise.resolve({} as TokenResponse));
-        appConfigServiceStub.getConfig.and.returnValue({} as AppConfig);
+        configureTestingModule([{ provide: OAuthService, useValue: oAuthServiceStub }]);
 
-        TestBed.configureTestingModule({
-            schemas: [NO_ERRORS_SCHEMA],
-            declarations: [AppComponent],
-            imports: [],
-            providers: [
-                UrlHelperService,
-                { provide: OAuthService, useValue: oAuthServiceStub },
-                { provide: NavigationService, useValue: navigationServiceStub },
-                { provide: RouterService, useValue: routerServiceStub },
-                { provide: ViewContainerRef, useValue: viewContainerRefStub },
-                { provide: DynamicComponentsService, useValue: dynamicComponentsServiceStub },
-                { provide: ConfirmationService, useValue: confirmationServiceStub },
-                { provide: UrlOpenerService, useValue: urlOpenerServiceStub },
-                { provide: AppConfigService, useValue: appConfigServiceStub }
-            ]
-        });
-    });
-
-    it('should create the app', () => {
         const fixture = TestBed.createComponent(AppComponent);
         const app = fixture.componentInstance;
         expect(app).toBeTruthy();
     });
+
+    it('should create the app with auth skipped', () => {
+        appConfigServiceStub.getSkipAuth.and.returnValue(true);
+        configureTestingModule([]);
+    });
 });
diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.ts
index ec2fabe440..f2f6e30441 100644
--- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.ts
+++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Component, OnInit, ViewContainerRef } from '@angular/core';
+import { Component, OnInit, ViewContainerRef, Optional } from '@angular/core';
 
 import { timer } from 'rxjs';
 
@@ -24,33 +24,42 @@ export class AppComponent implements OnInit {
 
     constructor(
         private readonly appConfigService: AppConfigService,
-        private readonly oauthService: OAuthService,
+        @Optional() private readonly oauthService: OAuthService,
         private readonly navigationService: NavigationService,
         private readonly viewContainerRef: ViewContainerRef,
         private readonly dynamicComponentsService: DynamicComponentsService,
         private readonly confirmationService: ConfirmationService,
         private readonly urlOpenerService: UrlOpenerService
     ) {
-        this.oauthService.configure(appConfigService.getAuthCodeFlowConfig());
-        this.oauthService
-            .loadDiscoveryDocumentAndLogin()
-            .then(() => {
-                this.initTokenRefresh();
-            })
-            .catch(() => {
-                // No-op.
-            });
+        if (!this.skipAuth) {
+            this.oauthService.configure(appConfigService.getAuthCodeFlowConfig());
+            this.oauthService
+                .loadDiscoveryDocumentAndLogin()
+                .then(() => {
+                    this.initTokenRefresh();
+                })
+                .catch(() => {
+                    // No-op.
+                });
+        }
     }
 
     logout(): void {
+        if (this.skipAuth) return;
         this.oauthService.logOut();
     }
 
+    get skipAuth(): boolean {
+        return this.appConfigService.getSkipAuth();
+    }
+
     get idToken(): string {
+        if (this.skipAuth) return null;
         return this.oauthService.getIdToken();
     }
 
     get userName(): string {
+        if (this.skipAuth) return null;
         return this.oauthService.getIdentityClaims() ? this.getIdentityClaim('username') : 'N/A';
     }
 
@@ -65,6 +74,7 @@ export class AppComponent implements OnInit {
     }
 
     private getIdentityClaim(userNamePropName: string): string {
+        if (this.skipAuth) throw Error;
         const identityClaims = this.oauthService.getIdentityClaims() as {
             [key: string]: string;
         };
@@ -73,6 +83,7 @@ export class AppComponent implements OnInit {
     }
 
     private initTokenRefresh() {
+        if (this.skipAuth) throw Error;
         const refreshTokenConfig = this.appConfigService.getRefreshTokenConfig();
         timer(refreshTokenConfig.start, AppComponent.toMillis(refreshTokenConfig.checkInterval)).subscribe(() => {
             const remainiTimeMillis = this.oauthService.getAccessTokenExpiration() - Date.now();
@@ -86,6 +97,7 @@ export class AppComponent implements OnInit {
     }
 
     private setCustomTokenAttributes(redirectToConsole: boolean, defaultOrg: { refLink: string }) {
+        if (this.skipAuth) throw Error;
         const linkOrgQuery = this.getOrgLinkFromQueryParams(defaultOrg);
         const consoleCloudUrl = this.appConfigService.getConfig().auth.consoleCloudUrl;
         this.oauthService.customQueryParams = {
@@ -99,6 +111,7 @@ export class AppComponent implements OnInit {
     }
 
     private getOrgLinkFromQueryParams(defaultOrg: { refLink: string }): string {
+        if (this.skipAuth) throw Error;
         const params = new URLSearchParams(window.location.search);
         const orgLinkUnderscored = params.get('org_link');
         const orgLinkBase = params.get('orgLink');
diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.module.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.module.ts
index 131577ef38..952ee282af 100644
--- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.module.ts
+++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.module.ts
@@ -80,6 +80,7 @@ export function lottiePlayerLoader() {
             useValue: localStorage
         },
         {
+            deps: [AppConfigService],
             provide: AuthConfig,
             useFactory: (appConfig: AppConfigService) => () => appConfig.getAuthCodeFlowConfig()
         },
@@ -87,10 +88,7 @@ export function lottiePlayerLoader() {
             deps: [AppConfigService],
             provide: OAuthModuleConfig,
             useFactory: (appConfig: AppConfigService) => ({
-                resourceServer: {
-                    allowedUrls: appConfig.getConfig().auth.resourceServer.allowedUrls,
-                    sendAccessToken: appConfig.getConfig().auth.resourceServer.sendAccessToken
-                }
+                resourceServer: appConfig.getConfig().auth.resourceServer
             })
         },
         {
diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/http.interceptor.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/http.interceptor.ts
index 0787ae635c..f4ba9b44d1 100644
--- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/http.interceptor.ts
+++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/http.interceptor.ts
@@ -24,19 +24,20 @@ export class AuthorizationInterceptor implements HttpInterceptor {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-        const url = req.url.toLowerCase();
+        if (this.appConfigService.getSkipAuth()) {
+            return next.handle(req);
+        }
         if (!this.moduleConfig) {
             return next.handle(req);
         }
-
         if (!this.moduleConfig.resourceServer) {
             return next.handle(req);
         }
-
         if (!this.moduleConfig.resourceServer.allowedUrls) {
             return next.handle(req);
         }
 
+        const url = req.url.toLowerCase();
         if (!this.checkUrl(url)) {
             return next.handle(req);
         }
diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/assets/data/appConfig.json b/projects/frontend/data-pipelines/gui/projects/ui/src/assets/data/appConfig.json
index 8921a0bba2..cb63545224 100644
--- a/projects/frontend/data-pipelines/gui/projects/ui/src/assets/data/appConfig.json
+++ b/projects/frontend/data-pipelines/gui/projects/ui/src/assets/data/appConfig.json
@@ -1,5 +1,6 @@
 {
   "auth": {
+    "skipAuth": false,
     "consoleCloudUrl": "https://console-stg.cloud.vmware.com/",
     "orgLinkRoot": "/csp/gateway/am/api/orgs/",
     "authConfig": {