Propagating "loginEnabled" config parameter.

Cleanup of header menu and tests with regards to "loginEnabled" and whether the user is logged in or not
kamu-data · Aug 19, 2023 · 45c8ed0 · 45c8ed0
1 parent 9ffa76b
commit 45c8ed0
Show file tree

Hide file tree

Showing 19 changed files with 296 additions and 160 deletions.
diff --git a/images/kamu-web-ui/runtime-config.json b/images/kamu-web-ui/runtime-config.json
@@ -1,3 +1,4 @@
 {
-    "apiServerGqlUrl": "http://localhost:8080/graphql"
+    "apiServerGqlUrl": "http://localhost:8080/graphql",
+    "loginEnabled": true
 }
diff --git a/src/app/app-config.service.ts b/src/app/app-config.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 
 interface AppConfig {
     apiServerGqlUrl: string;
+    loginEnabled: boolean;
 }
 
 @Injectable({
@@ -18,13 +19,22 @@ export class AppConfigService {
         return this.appConfig.apiServerGqlUrl;
     }
 
+    get loginEnabled(): boolean {
+        if (!this.appConfig) {
+            this.appConfig = AppConfigService.loadAppConfig();
+        }
+
+        return this.appConfig.loginEnabled;
+    }
+
     private static loadAppConfig(): AppConfig {
         const request = new XMLHttpRequest();
         request.open("GET", "/assets/runtime-config.json", false);
         request.send(null);
         const data: AppConfig = JSON.parse(request.responseText) as AppConfig;
         return {
             apiServerGqlUrl: AppConfigService.toRemoteURL(data.apiServerGqlUrl),
+            loginEnabled: data.loginEnabled,
         };
     }
 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -4,6 +4,7 @@
     [isMobileView]="isMobileView"
     [isVisible]="isHeaderVisible"
     [userInfo]="user"
+    [isLoginEnabled]="isLoginEnabled"
     (selectDatasetEmitter)="onSelectDataset($event)"
     (clickAppLogoEmitter)="onClickAppLogo()"
     (loginEmitter)="onLogin()"

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -15,6 +15,7 @@ import { AccountDetailsFragment } from "./api/kamu.graphql.interface";
 import { MaybeNull } from "./common/app.types";
 import _ from "lodash";
 import { isMobileView, promiseWithCatch } from "./common/app.helpers";
+import { AppConfigService } from "./app-config.service";
 
 export const ALL_URLS_WITHOUT_HEADER: string[] = [ProjectLinks.URL_LOGIN, ProjectLinks.URL_GITHUB_CALLBACK];
 
@@ -35,6 +36,7 @@ export class AppComponent extends BaseComponent implements OnInit {
     public appLogo = `/${AppValues.APP_LOGO}`;
     public isMobileView = false;
     public isHeaderVisible = true;
+    public isLoginEnabled = true;
     public user: AccountDetailsFragment = AppComponent.AnonymousAccountInfo;
 
     @HostListener("window:resize")
@@ -47,8 +49,10 @@ export class AppComponent extends BaseComponent implements OnInit {
         private authApi: AuthApi,
         private modalService: ModalService,
         private navigationService: NavigationService,
+        private appConfigService: AppConfigService,
     ) {
         super();
+        this.isLoginEnabled = appConfigService.loginEnabled;
     }
 
     public ngOnInit(): void {

diff --git a/src/app/common/base-test.helpers.spec.ts b/src/app/common/base-test.helpers.spec.ts
@@ -22,16 +22,24 @@ export function emitClickOnElementByDataTestId<T>(fixture: ComponentFixture<T>,
     (debugElement.nativeElement as HTMLElement).click();
 }
 
-export function findElementByDataTestId<T>(fixture: ComponentFixture<T>, id: string): HTMLElement {
+export function findElementByDataTestId<T>(fixture: ComponentFixture<T>, id: string): HTMLElement | undefined {
     const debugElement: MaybeNull<DebugElement> = fixture.debugElement.query(By.css(`[data-test-id="${id}"]`));
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (debugElement) {
         return debugElement.nativeElement as HTMLElement;
     } else {
-        throw new Error("Element " + id + " not found");
+        return undefined;
     }
 }
 
+export function getElementByDataTestId<T>(fixture: ComponentFixture<T>, id: string): HTMLElement {
+    const element: HTMLElement | undefined = findElementByDataTestId(fixture, id);
+    if (element) {
+        return element;
+    }
+    throw new Error("Element " + id + " not found");
+}
+
 export const routerMockEventSubject = new ReplaySubject<RouterEvent>(1);
 
 export const routerMock = {
@@ -69,7 +77,7 @@ export const snapshotParamMapMock = {
 };
 
 export function findInputElememtByDataTestId<T>(fixture: ComponentFixture<T>, id: string): HTMLInputElement {
-    return findElementByDataTestId(fixture, id) as HTMLInputElement;
+    return getElementByDataTestId(fixture, id) as HTMLInputElement;
 }
 
 export function dispatchInputEvent<T>(fixture: ComponentFixture<T>, id: string, value: string): void {

diff --git a/src/app/components/app-header/app-header.component.html b/src/app/components/app-header/app-header.component.html
@@ -99,45 +99,33 @@
                     Explore
                 </a>
 
-                <a
-                    class="Header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
-                    data-ga-click="Header, click, Nav menu - item:dashboard:user"
-                    aria-label="Dashboard"
-                    (click)="onUserDatasets()"
-                >
-                    Your Datasets
-                </a>
-
-                <a
-                    class="Header-link d-block d-md-none py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
-                    (click)="onAddNew()"
-                    data-test-id="addNewDataset"
-                >
-                    Add New Dataset
-                </a>
-
-                <ng-template [ngIf]="!isUserLoggedIn()">
-                    <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
-                        data-test-id="openBillingPlanHeader"
-                        (click)="onBilling()"
-                        >Account & Billing</a
-                    >
+                <ng-template [ngIf]="!isUserLoggedIn() && isLoginEnabled">
                     <a
                         class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
-                        data-test-id="openHelpHeader"
-                        (click)="onHelp()"
-                        >Help</a
-                    >
-                    <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
-                        data-test-id="openUserProfileHeader"
+                        data-test-id="loginHeader"
                         (click)="onLogin()"
                         >Login</a
                     >
                 </ng-template>
 
                 <ng-template [ngIf]="isUserLoggedIn()">
+                    <a
+                        class="Header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
+                        data-ga-click="Header, click, Nav menu - item:dashboard:user"
+                        data-test-id="userDatasetsHeader"
+                        aria-label="Dashboard"
+                        (click)="onUserDatasets()"
+                    >
+                        Your Datasets
+                    </a>
+
+                    <a
+                        class="Header-link d-block d-md-none py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        (click)="onAddNew()"
+                        data-test-id="addNewDatasetHeader"
+                    >
+                        Add New Dataset
+                    </a>
                     <a
                         class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openUserProfileHeader"
@@ -162,22 +150,20 @@
                         (click)="onSettings()"
                         >Settings</a
                     >
-                    <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
-                        data-test-id="openHelpHeader"
-                        (click)="onHelp()"
-                        >Help</a
-                    >
                     <a
                         class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="userNameHeader"
-                        href="/kulykivska"
+                        href="/{{ userInfo.name }}"
                     >
                         <img
                             class="avatar avatar-user"
                             loading="lazy"
                             decoding="async"
-                            src="https://avatars.githubusercontent.com/u/87068546?s=40&amp;v=4"
+                            [src]="
+                                isUserLoggedIn() && userInfo.avatarUrl
+                                    ? userInfo.avatarUrl
+                                    : 'https://avatars.githubusercontent.com/u/11951648?v=4'
+                            "
                             width="20"
                             height="20"
                         />
@@ -192,24 +178,33 @@
                         Sign out
                     </button>
                 </ng-template>
+
+                <a
+                    class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                    data-test-id="openHelpHeader"
+                    (click)="onHelp()"
+                    >Help</a
+                >
             </div>
             <div id="appHeaderAdditionalBlock" class="app-header__right-column">
                 <div
                     class="d-flex d-sm-none d-md-flex justify-content-center notification-indicator-container align-items-center m-0"
                 >
                     <app-notification-indicator></app-notification-indicator>
                 </div>
-                <button
-                    class="app-header__right-column__addnew-block d-block d-sm-none d-md-flex m-2"
-                    (click)="onAddNew()"
-                    data-test-id="addNewBlock"
-                >
-                    <span><i class="bi bi-plus-circle"></i></span>
-                    <span class="app-header__right-column__label">New</span>
-                </button>
+                <ng-container *ngIf="isUserLoggedIn()">
+                    <button
+                        class="app-header__right-column__addnew-block d-block d-sm-none d-md-flex m-2"
+                        (click)="onAddNew()"
+                        data-test-id="addNewBlock"
+                    >
+                        <span><i class="bi bi-plus-circle"></i></span>
+                        <span class="app-header__right-column__label">New</span>
+                    </button>
+                </ng-container>
                 <button
                     class="button-round d-block d-sm-none d-md-block"
-                    data-test-id="openUserInfo"
+                    data-test-id="openUserInfoBlock"
                     mat-button
                     [matMenuTriggerFor]="menu"
                 >
@@ -221,7 +216,7 @@
                                     : 'https://avatars.githubusercontent.com/u/11951648?v=4'
                             "
                             (click)="onOpenUserInfo()"
-                            data-test-id="openUserInfo"
+                            data-test-id="openUserInfoImage"
                             alt="User icon"
                         />
                     </div>
@@ -233,15 +228,13 @@
                             isUserLoggedIn() ? userInfo.name : defaultUsername
                         }}</strong>
                     </p>
+
+                    <button mat-menu-item data-test-id="openHelp" (click)="onHelp()">Help</button>
+
                     <div role="none" class="dropdown-divider"></div>
 
-                    <ng-template [ngIf]="!isUserLoggedIn()">
+                    <ng-template [ngIf]="!isUserLoggedIn() && isLoginEnabled">
                         <button mat-menu-item data-test-id="openLogin" (click)="onLogin()">Login</button>
-                        <div role="none" class="dropdown-divider"></div>
-                        <button mat-menu-item data-test-id="openBillingPlan" (click)="onBilling()">
-                            Account & Billing
-                        </button>
-                        <button mat-menu-item data-test-id="openHelp" (click)="onHelp()">Help</button>
                     </ng-template>
 
                     <ng-template [ngIf]="isUserLoggedIn()">
@@ -253,14 +246,15 @@
                         </button>
 
                         <div role="none" class="dropdown-divider"></div>
+
                         <button mat-menu-item data-test-id="openBillingPlan" (click)="onBilling()">
                             Account & Billing
                         </button>
                         <button mat-menu-item data-test-id="openAnalytics" (click)="onAnalytics()">Analytics</button>
                         <button mat-menu-item data-test-id="openSettings" (click)="onSettings()">Settings</button>
-                        <button mat-menu-item data-test-id="openHelp" (click)="onHelp()">Help</button>
 
                         <div role="none" class="dropdown-divider"></div>
+
                         <button mat-menu-item data-test-id="openSignOut" (click)="onLogOut()">
                             <svg-icon name="sign-out"></svg-icon>
                             Sign out