diff --git a/console-webapp/README.md b/console-webapp/README.md index 68f4e0673..bf4adaa37 100644 --- a/console-webapp/README.md +++ b/console-webapp/README.md @@ -13,7 +13,7 @@ Webapp is deployed with the nomulus default service war to Google App Engine. During nomulus default service war build task, gradle script triggers the following: -1) Console webapp build script `buildConsoleWebappProd`, which installs +1) Console webapp build script `buildConsoleWebapp`, which installs dependencies, assembles a compiled ts -> js, minified, optimized static artifact (html, css, js) 2) Artifact assembled in step 1 then gets copied to core project web artifact diff --git a/console-webapp/angular.json b/console-webapp/angular.json index 089b69f23..2f9f98141 100644 --- a/console-webapp/angular.json +++ b/console-webapp/angular.json @@ -63,6 +63,39 @@ ], "outputHashing": "all" }, + "sandbox": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.sandbox.ts" + } + ], + "outputHashing": "all" + }, + "crash": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + }, + "alpha": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + }, "development": { "optimization": false, "extractLicenses": false, @@ -78,6 +111,15 @@ "production": { "buildTarget": "console-webapp:build:production" }, + "alpha": { + "buildTarget": "console-webapp:build:alpha" + }, + "crash": { + "buildTarget": "console-webapp:build:crash" + }, + "sandbox": { + "buildTarget": "console-webapp:build:sandbox" + }, "development": { "buildTarget": "console-webapp:build:development" } diff --git a/console-webapp/build.gradle b/console-webapp/build.gradle index 90aab8eb7..c30323667 100644 --- a/console-webapp/build.gradle +++ b/console-webapp/build.gradle @@ -37,17 +37,16 @@ task runConsoleWebappUnitTests(type: Exec) { args 'run', 'test' } -task buildConsoleWebappNonProd(type: Exec) { +task buildConsoleWebapp(type: Exec) { workingDir "${consoleDir}/" executable 'npm' - args 'run', 'build' -} - -// Keeping the same as non prod for now before we figure out optimization we want to include -task buildConsoleWebappProd(type: Exec) { - workingDir "${consoleDir}/" - executable 'npm' - args 'run', 'build' + def configuration = project.hasProperty('configuration') ? + project.getProperty('configuration') : + 'production' + args 'run', "build", "--configuration=${configuration}" + doFirst { + println "Building console for environment: ${configuration}" + } } task applyFormatting(type: Exec) { @@ -68,10 +67,10 @@ task deploy(type: Exec) { args 'app', 'deploy', "${projectParam}", '--quiet' } -tasks.buildConsoleWebappProd.dependsOn(tasks.npmInstallDeps) +tasks.buildConsoleWebapp.dependsOn(tasks.npmInstallDeps) tasks.runConsoleWebappUnitTests.dependsOn(tasks.npmInstallDeps) tasks.applyFormatting.dependsOn(tasks.npmInstallDeps) tasks.checkFormatting.dependsOn(tasks.npmInstallDeps) tasks.build.dependsOn(tasks.checkFormatting) tasks.build.dependsOn(tasks.runConsoleWebappUnitTests) -tasks.deploy.dependsOn(tasks.buildConsoleWebappProd) +tasks.deploy.dependsOn(tasks.buildConsoleWebapp) diff --git a/console-webapp/package.json b/console-webapp/package.json index 447102f47..7a32ee77c 100644 --- a/console-webapp/package.json +++ b/console-webapp/package.json @@ -4,9 +4,9 @@ "scripts": { "ng": "ng", "start": "ng serve --proxy-config dev-proxy.config.json", - "build": "ng build --base-href=/console/", + "build": "ng build --base-href=/console/ --configuration=$npm_config_configuration", "build:local": "ng build --base-href=/default/console/", - "watch": "ng build --watch --configuration development", + "watch": "ng build --watch --configuration=development", "test": "ng test --browsers=ChromeHeadless --watch=false", "run:dev": "", "prettify": "npx prettier --write ./src/", @@ -54,4 +54,4 @@ "prettier": "2.8.7", "typescript": "~5.4.5" } -} \ No newline at end of file +} diff --git a/console-webapp/src/app/app-routing.module.ts b/console-webapp/src/app/app-routing.module.ts index 8e2c6e509..8602f8f0c 100644 --- a/console-webapp/src/app/app-routing.module.ts +++ b/console-webapp/src/app/app-routing.module.ts @@ -34,6 +34,10 @@ export interface RouteWithIcon extends Route { iconName?: string; } +export const PATHS = { + NewOteComponent: 'new-ote', + OteStatusComponent: 'ote-status/:registrarId', +}; export const routes: RouteWithIcon[] = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { @@ -41,12 +45,14 @@ export const routes: RouteWithIcon[] = [ component: RegistryLockVerifyComponent, }, { - path: NewOteComponent.PATH, - component: NewOteComponent, + path: PATHS.NewOteComponent, + loadComponent: () => + import('./ote/newOte.component').then((mod) => mod.NewOteComponent), }, { - path: OteStatusComponent.PATH, - component: OteStatusComponent, + path: PATHS.OteStatusComponent, + loadComponent: () => + import('./ote/oteStatus.component').then((mod) => mod.OteStatusComponent), }, { path: 'registrars', component: RegistrarComponent }, { diff --git a/console-webapp/src/app/app.component.spec.ts b/console-webapp/src/app/app.component.spec.ts index b0adbfcd1..72a13cee5 100644 --- a/console-webapp/src/app/app.component.spec.ts +++ b/console-webapp/src/app/app.component.spec.ts @@ -16,16 +16,16 @@ import { provideHttpClient } from '@angular/common/http'; import { provideHttpClientTesting } from '@angular/common/http/testing'; import { TestBed } from '@angular/core/testing'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; import { MaterialModule } from './material.module'; import { BackendService } from './shared/services/backend.service'; +import { AppRoutingModule } from './app-routing.module'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [AppComponent], - imports: [RouterTestingModule, MaterialModule, BrowserAnimationsModule], + imports: [MaterialModule, BrowserAnimationsModule, AppRoutingModule], providers: [ BackendService, provideHttpClient(), diff --git a/console-webapp/src/app/app.module.ts b/console-webapp/src/app/app.module.ts index 11cf6dc8a..34ca074c7 100644 --- a/console-webapp/src/app/app.module.ts +++ b/console-webapp/src/app/app.module.ts @@ -68,8 +68,6 @@ import { TldsComponent } from './tlds/tlds.component'; HeaderComponent, HomeComponent, LocationBackDirective, - NewOteComponent, - OteStatusComponent, UserLevelVisibility, NavigationComponent, NewRegistrarComponent, @@ -99,6 +97,7 @@ import { TldsComponent } from './tlds/tlds.component'; MaterialModule, SnackBarModule, ], + exports: [SelectedRegistrarWrapper], providers: [ BackendService, BreakPointObserverService, diff --git a/console-webapp/src/app/ote/newOte.component.scss b/console-webapp/src/app/ote/newOte.component.scss index 02e1bf260..58b35ac5c 100644 --- a/console-webapp/src/app/ote/newOte.component.scss +++ b/console-webapp/src/app/ote/newOte.component.scss @@ -4,4 +4,8 @@ white-space: break-spaces; padding: 20px; } + mat-form-field { + width: 100%; + max-width: 350px; + } } diff --git a/console-webapp/src/app/ote/newOte.component.ts b/console-webapp/src/app/ote/newOte.component.ts index 7cff6c925..01246ad45 100644 --- a/console-webapp/src/app/ote/newOte.component.ts +++ b/console-webapp/src/app/ote/newOte.component.ts @@ -17,6 +17,8 @@ import { Component, computed, signal } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { MatSnackBar } from '@angular/material/snack-bar'; import { RegistrarService } from '../registrar/registrar.service'; +import { MaterialModule } from '../material.module'; +import { SnackBarModule } from '../snackbar.module'; export interface OteCreateResponse extends Map { password: string; @@ -24,12 +26,12 @@ export interface OteCreateResponse extends Map { @Component({ selector: 'app-ote', + standalone: true, + imports: [MaterialModule, SnackBarModule], templateUrl: './newOte.component.html', styleUrls: ['./newOte.component.scss'], }) export class NewOteComponent { - public static PATH = 'new-ote'; - oteCreateResponse = signal(undefined); readonly oteCreateResponseFormatted = computed(() => { diff --git a/console-webapp/src/app/ote/oteStatus.component.html b/console-webapp/src/app/ote/oteStatus.component.html index 23da40e2e..59516196c 100644 --- a/console-webapp/src/app/ote/oteStatus.component.html +++ b/console-webapp/src/app/ote/oteStatus.component.html @@ -1,31 +1,28 @@ - -

OT&E Status Check

- @if(isOte()) { -

- Status: - {{ oteStatusUnfinished().length ? "Unfinished" : "Completed" }} -

-
- @if(oteStatusCompleted().length) { -
-

Completed

-
- check_box{{ entry.description }} -
+

OT&E Status Check

+@if(registrarId() === null) { +

Missing registrarId param

+} @else if(isOte()) { +

+ Status: + {{ oteStatusUnfinished().length ? "Unfinished" : "Completed" }} +

+
+ @if(oteStatusCompleted().length) { +
+

Completed

+
+ check_box{{ entry.description }} +
+
+ } @if(oteStatusUnfinished().length) { +
+

Unfinished

+
+ check_box_outline_blank{{ entry.description }}
- } @if(oteStatusUnfinished().length) { -
-

Unfinished

-
- check_box_outline_blank{{ entry.description }} -
-
- }
- } @else { -

- Registrar {{ registrarService.registrar()?.registrarId }} is not an OT&E - registrar -

} - +
+} @else { +

Registrar {{ registrarId() }} is not an OT&E registrar

+} diff --git a/console-webapp/src/app/ote/oteStatus.component.ts b/console-webapp/src/app/ote/oteStatus.component.ts index e9adfc9c6..148b0f814 100644 --- a/console-webapp/src/app/ote/oteStatus.component.ts +++ b/console-webapp/src/app/ote/oteStatus.component.ts @@ -13,9 +13,14 @@ // limitations under the License. import { HttpErrorResponse } from '@angular/common/http'; -import { Component, computed, signal } from '@angular/core'; +import { Component, computed, OnInit, signal } from '@angular/core'; import { MatSnackBar } from '@angular/material/snack-bar'; import { RegistrarService } from '../registrar/registrar.service'; +import { MaterialModule } from '../material.module'; +import { SnackBarModule } from '../snackbar.module'; +import { CommonModule } from '@angular/common'; +import { ActivatedRoute, ParamMap } from '@angular/router'; +import { take } from 'rxjs'; export interface OteStatusResponse { description: string; @@ -26,12 +31,13 @@ export interface OteStatusResponse { @Component({ selector: 'app-ote-status', + standalone: true, + imports: [MaterialModule, SnackBarModule, CommonModule], templateUrl: './oteStatus.component.html', styleUrls: ['./oteStatus.component.scss'], }) -export class OteStatusComponent { - public static PATH = 'ote-status'; - +export class OteStatusComponent implements OnInit { + registrarId = signal(null); oteStatusResponse = signal([]); oteStatusCompleted = computed(() => @@ -41,16 +47,26 @@ export class OteStatusComponent { this.oteStatusResponse().filter((v) => !v.completed) ); isOte = computed( - () => this.registrarService.registrar()?.type?.toLowerCase() === 'ote' + () => + this.registrarService + .registrars() + .find((r) => r.registrarId === this.registrarId()) + ?.type?.toLowerCase() === 'ote' ); constructor( + private route: ActivatedRoute, protected registrarService: RegistrarService, private _snackBar: MatSnackBar - ) { - this.registrarService - .oteStatus(this.registrarService.registrarId()) - .subscribe({ + ) {} + + ngOnInit(): void { + this.route.paramMap.pipe(take(1)).subscribe((params: ParamMap) => { + this.registrarId.set(params.get('registrarId')); + const registrarId = this.registrarId(); + if (!registrarId) throw 'Missing registrarId param'; + + this.registrarService.oteStatus(registrarId).subscribe({ next: (oteStatusResponse: OteStatusResponse[]) => { this.oteStatusResponse.set(oteStatusResponse); }, @@ -58,5 +74,6 @@ export class OteStatusComponent { this._snackBar.open(err.error || err.message); }, }); + }); } } diff --git a/console-webapp/src/app/registrar/registrarDetails.component.html b/console-webapp/src/app/registrar/registrarDetails.component.html index 7379d7e69..419b7c49e 100644 --- a/console-webapp/src/app/registrar/registrarDetails.component.html +++ b/console-webapp/src/app/registrar/registrarDetails.component.html @@ -9,6 +9,7 @@
@if(!inEdit && !registrarNotFound) {