NXP-32573: added unit tests, refactored code, fixed warning box focus…

… issue & added .npmrc

.npmrc

@@ -0,0 +1,3 @@
+@hylandsoftware:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=ghp_your_authenticated_token
+registry=https://registry.npmjs.org/

README.md

@@ -1,2 +1,5 @@
 # nuxeo-admin-console-ui
-Nuxeo Admin console UI is a standard base web application for Nuxeo admin useres.
+Nuxeo Admin console UI is a standard base web application for Nuxeo admin users.
+
+# Note
+Replace ghp_your_authenticated_token in .npmrc file with your Github token.

angular.json

@@ -94,11 +94,14 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts", "zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules"]
+            }
           }
         }
       }

karma.conf.js

@@ -0,0 +1,28 @@
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/admin-console'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'coverage-istanbul'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package.json

@@ -6,7 +6,7 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test --code-coverage"
   },
   "private": true,
   "dependencies": {
@@ -43,6 +43,7 @@
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.1.3"

src/app/app-routing.module.ts

@@ -5,35 +5,35 @@ import { Route } from "@angular/router";
 export const appRoutes: Route[] = [
   {
     path: "",
-    loadChildren: () => import("./features/admin-home/admin-home.module").then((m) => m.AdminHomeModule),
+    loadChildren: () => import("./features/home/home.module").then((m) => m.HomeModule),
   },
   {
     path: "system-information",
-    loadChildren: () => import("./features/admin-system-information/admin-system-information.module").then((m) => m.AdminSystemInformationModule),
+    loadChildren: () => import("./features/system-information/system-information.module").then((m) => m.SystemInformationModule),
   },
   {
     path: "bulk-action-monitoring",
-    loadChildren: () => import("./features/admin-bulk-action-monitoring/admin-bulk-action-monitoring.module").then((m) => m.AdminBulkActionMonitoringModule),
+    loadChildren: () => import("./features/bulk-action-monitoring/bulk-action-monitoring.module").then((m) => m.BulkActionMonitoringModule),
   },
   {
     path: "elasticsearch-reindex",
-    loadChildren: () => import("./features/admin-elastic-search-reindex/admin-elastic-search-reindex.module").then((m) => m.AdminElasticSearchReindexModule),
+    loadChildren: () => import("./features/elastic-search-reindex/elastic-search-reindex.module").then((m) => m.ElasticSearchReindexModule),
   },
   {
     path: "fulltext-reindex",
-    loadChildren: () => import("./features/admin-full-text-reindex/admin-full-text-reindex.module").then((m) => m.AdminFullTextReindexModule),
+    loadChildren: () => import("./features/full-text-reindex/full-text-reindex.module").then((m) => m.FullTextReindexModule),
   },
   {
     path: "thumbnails-generation",
-    loadChildren: () => import("./features/admin-thumbnail-generation/admin-thumbnail-generation.module").then((m) => m.AdminThumbnailGenerationModule),
+    loadChildren: () => import("./features/thumbnail-generation/thumbnail-generation.module").then((m) => m.ThumbnailGenerationModule),
   },
   {
     path: "picture-renditions-generation",
-    loadChildren: () => import("./features/admin-picture-render-generation/admin-picture-render-generation.module").then((m) => m.AdminPictureRenderGenerationModule),
+    loadChildren: () => import("./features/picture-render-generation/picture-render-generation.module").then((m) => m.PictureRenderGenerationModule),
   },
   {
     path: "video-renditions-generation",
-    loadChildren: () => import("./features/admin-video-render-generation/admin-video-render-generation.module").then((m) => m.AdminVideoRenderGenerationModule),
+    loadChildren: () => import("./features/video-render-generation/video-render-generation.module").then((m) => m.VideoRenderGenerationModule),
   },
   {
     path: "auth",

src/app/app.component.html

@@ -0,0 +1 @@
+<base-layout *ngIf="loadApp"></base-layout>

src/app/app.component.spec.ts

@@ -0,0 +1,92 @@
+import { MatDialogModule } from "@angular/material/dialog";
+import { BaseLayoutComponent } from "./layouts/base-layout/components/base-layout.component";
+import { AppComponent } from "./app.component";
+import {
+  ComponentFixture,
+  ComponentFixtureAutoDetect,
+  TestBed,
+} from "@angular/core/testing";
+import { CommonModule } from "@angular/common";
+import { PersistenceService } from "./shared/services/persistence.service";
+import { WarningComponent } from "./features/warning/warning.component";
+import { CommonService } from "./shared/services/common.service";
+import { EventEmitter } from "@angular/core";
+
+describe("AppComponent", () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+  class persistenceServiceStub {
+    get() {
+      return null;
+    }
+    set() {}
+  }
+
+  class adminCommonServiceStub {
+    loadApp = new EventEmitter<Boolean>();
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AppComponent, BaseLayoutComponent],
+      imports: [CommonModule, MatDialogModule],
+      providers: [
+        { provide: ComponentFixtureAutoDetect, useValue: true },
+        { provide: PersistenceService, useClass: persistenceServiceStub },
+        { provide: CommonService, useClass: adminCommonServiceStub },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+  });
+
+  it("should test if component is created", () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe("test warning preference", () => {
+    beforeEach(() => {
+      spyOn(component.dialogService, "open");
+    });
+    it("should open the warning dialog if warning preference is not set", () => {
+      spyOn(component.persistenceService, "get").and.returnValue(null);
+      let loadAppSubscriptionSpy = spyOn(
+        component.adminCommonService.loadApp,
+        "subscribe"
+      ).and.callThrough();
+      component.ngOnInit();
+      expect(component.persistenceService.get).toHaveBeenCalled();
+      expect(component.dialogService.open).toHaveBeenCalledWith(
+        WarningComponent,
+        {
+          disableClose: true,
+        }
+      );
+      expect(loadAppSubscriptionSpy).toHaveBeenCalled();
+    });
+
+    it("should not open the warning dialog if warning preference is set", () => {
+      spyOn(component.persistenceService, "get").and.returnValue("true");
+      component.ngOnInit();
+      expect(component.persistenceService.get).toHaveBeenCalled();
+      expect(component.dialogService.open).not.toHaveBeenCalled();
+      expect(component.loadApp).toEqual(true);
+    });
+  });
+
+  it("should set loadApp to true or false based on the value received from the service subscription", () => {
+    component.ngOnInit();
+    component.adminCommonService.loadApp.emit(true);
+    expect(component.loadApp).toBe(true);
+    component.ngOnInit();
+    component.adminCommonService.loadApp.emit(false);
+    expect(component.loadApp).toBe(false);
+  });
+
+  it("should remove theloadAppSubscription when component is destroyed", () => {
+    spyOn(component.loadAppSubscription, "unsubscribe");
+    component.ngOnDestroy();
+    expect(component.loadAppSubscription.unsubscribe).toHaveBeenCalled();
+  });
+});

src/app/admin-app.component.ts → src/app/app.component.ts

@@ -2,27 +2,27 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { MatDialog } from "@angular/material/dialog";
 import { PersistenceService } from "./shared/services/persistence.service";
 import { Subscription } from "rxjs";
-import { AdminCommonService } from "./shared/services/admin-common.service";
-import { AdminWarningComponent } from "./features/admin-warning/admin-warning.component";
+import { CommonService } from "./shared/services/common.service";
+import { WarningComponent } from "./features/warning/warning.component";
 
 @Component({
-  selector: "admin-app-root",
-  templateUrl: "./admin-app.component.html",
-  styleUrls: ["./admin-app.component.scss"],
+  selector: "app",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
 })
-export class AdminAppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnInit, OnDestroy {
   loadApp: Boolean = false;
   loadAppSubscription = new Subscription();
   constructor(
-    private dialogService: MatDialog,
-    private persistenceService: PersistenceService,
-    private adminCommonService: AdminCommonService
+    public dialogService: MatDialog,
+    public persistenceService: PersistenceService,
+    public adminCommonService: CommonService
   ) {}
 
   ngOnInit(): void {
     const doNotWarn = !!this.persistenceService.get("doNotWarn");
     if (!doNotWarn) {
-      this.dialogService.open(AdminWarningComponent, {
+      this.dialogService.open(WarningComponent, {
         disableClose: true,
       });
       this.loadAppSubscription = this.adminCommonService.loadApp.subscribe(

src/app/app.module.ts

@@ -1,3 +1,5 @@
+import { BaseLayoutModule } from './layouts/base-layout/base-layout.module';
+import { BaseLayoutComponent } from './layouts/base-layout/components/base-layout.component';
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { RouterModule } from "@angular/router";
@@ -10,19 +12,17 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatToolbarModule } from "@angular/material/toolbar";
 import { AppRoutingModule } from "./app-routing.module";
 import { AuthRoutingModule } from "./auth/auth-routing.module";
-import { AdminBaseLayoutModule } from "./layouts/admin-base-layout/admin-base-layout.module";
-import { AdminVideoRenderGenerationModule } from "./features/admin-video-render-generation/admin-video-render-generation.module";
-import { AdminPictureRenderGenerationModule } from "./features/admin-picture-render-generation/admin-picture-render-generation.module";
-import { AdminThumbnailGenerationModule } from "./features/admin-thumbnail-generation/admin-thumbnail-generation.module";
-import { AdminFullTextReindexModule } from "./features/admin-full-text-reindex/admin-full-text-reindex.module";
-import { AdminElasticSearchReindexModule } from "./features/admin-elastic-search-reindex/admin-elastic-search-reindex.module";
-import { AdminBulkActionMonitoringModule } from "./features/admin-bulk-action-monitoring/admin-bulk-action-monitoring.module";
-import { AdminHomeModule } from "./features/admin-home/admin-home.module";
-import { AdminWarningComponent } from "./features/admin-warning/admin-warning.component";
-import { AdminBaseLayoutComponent } from "./layouts/admin-base-layout/components/admin-base-layout.component";
+import { VideoRenderGenerationModule } from "./features/video-render-generation/video-render-generation.module";
+import { PictureRenderGenerationModule } from "./features/picture-render-generation/picture-render-generation.module";
+import { ThumbnailGenerationModule } from "./features/thumbnail-generation/thumbnail-generation.module";
+import { FullTextReindexModule } from "./features/full-text-reindex/full-text-reindex.module";
+import { ElasticSearchReindexModule } from "./features/elastic-search-reindex/elastic-search-reindex.module";
+import { BulkActionMonitoringModule } from "./features/bulk-action-monitoring/bulk-action-monitoring.module";
+import { HomeModule } from "./features/home/home.module";
+import { WarningComponent } from "./features/warning/warning.component";
 import { HylandSSOManagerComponent } from "./auth/components/SSO/hylandSSOManager.component";
 import { BackendErrorMessages } from "./shared/components/backendErrorMessages/backendErrorMessages.component";
-import { AdminAppComponent } from "./admin-app.component";
+import { AppComponent } from "./app.component";
 import { AuthInterceptorService } from "./auth/services/auth-interceptor.service";
 import { authReducer } from "./auth/store/reducers";
 import * as authEffects from "./auth/store/effects";
@@ -31,22 +31,22 @@ import { FormsModule } from "@angular/forms";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { MatButtonModule } from "@angular/material/button";
 import { MatSidenavModule } from "@angular/material/sidenav";
-import { AdminHeaderComponent } from "./layouts/admin-header/admin-header.component";
-import { AdminMenuComponent } from "./layouts/admin-menu/admin-menu.component";
-import { AdminSystemInformationModule } from "./features/admin-system-information/admin-system-information.module";
+import { HeaderBarComponent } from "./layouts/header-bar/header-bar.component";
+import { MenuBarComponent } from "./layouts/menu-bar/menu-bar.component";
+import { SystemInformationModule } from "./features/system-information/system-information.module";
 import { HyDialogBoxModule, HyDialogModule } from "@hyland/ui";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatListModule } from "@angular/material/list";
 
 @NgModule({
   declarations: [
-    AdminAppComponent,
-    AdminHeaderComponent,
-    AdminMenuComponent,
-    AdminWarningComponent,
+    AppComponent,
+    HeaderBarComponent,
+    MenuBarComponent,
+    WarningComponent,
     BackendErrorMessages,
     HylandSSOManagerComponent,
-    AdminBaseLayoutComponent,
+    BaseLayoutComponent,
   ],
   imports: [
     BrowserModule,
@@ -66,16 +66,16 @@ import { MatListModule } from "@angular/material/list";
     MatToolbarModule,
     MatButtonModule,
     MatSidenavModule,
-    AdminHomeModule,
+    HomeModule,
     MatListModule,
-    AdminSystemInformationModule,
-    AdminBulkActionMonitoringModule,
-    AdminElasticSearchReindexModule,
-    AdminFullTextReindexModule,
-    AdminThumbnailGenerationModule,
-    AdminPictureRenderGenerationModule,
-    AdminVideoRenderGenerationModule,
-    AdminBaseLayoutModule,
+    SystemInformationModule,
+    BulkActionMonitoringModule,
+    ElasticSearchReindexModule,
+    FullTextReindexModule,
+    ThumbnailGenerationModule,
+    PictureRenderGenerationModule,
+    VideoRenderGenerationModule,
+    BaseLayoutModule,
     HyDialogModule,
     MatSidenavModule,
     MatButtonModule,
@@ -91,6 +91,6 @@ import { MatListModule } from "@angular/material/list";
     },
     ngrxDevtools,
   ],
-  bootstrap: [AdminAppComponent],
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/auth/services/auth.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
 import { map, Observable } from "rxjs";
 import { environment } from "../../../environments/environment";
-import { AdminUserInterface } from "../../shared/types/adminUser.interface";
+import { UserInterface } from "../../shared/types/user.interface";
 import { AuthResponseInterface } from "../types/authResponse.interface";
 import { HylandSSORequestInterface } from "../types/hylandSSORequest.interface";
 
@@ -12,16 +12,16 @@ import { HylandSSORequestInterface } from "../types/hylandSSORequest.interface";
 export class AuthService {
   constructor(private http: HttpClient) {}
 
-  getUser(response: AuthResponseInterface): AdminUserInterface {
+  getUser(response: AuthResponseInterface): UserInterface {
     return response.user;
   }
 
-  getCurrentUser(): Observable<AdminUserInterface> {
+  getCurrentUser(): Observable<UserInterface> {
     const url = environment.apiUrl + "/user.json";
     return this.http.get<AuthResponseInterface>(url).pipe(map(this.getUser));
   }
 
-  sso(data: HylandSSORequestInterface): Observable<AdminUserInterface> {
+  sso(data: HylandSSORequestInterface): Observable<UserInterface> {
     const url = environment.apiUrl + "/users/sso";
     return this.http
       .post<AuthResponseInterface>(url, data)