diff --git a/modules/ui/src/app/app-routing.module.ts b/modules/ui/src/app/app-routing.module.ts index d503116d6..454782cc9 100644 --- a/modules/ui/src/app/app-routing.module.ts +++ b/modules/ui/src/app/app-routing.module.ts @@ -37,6 +37,14 @@ const routes: Routes = [ import('./pages/reports/history.module').then(m => m.HistoryModule), title: 'Testrun - Reports', }, + { + path: 'risk-assessment', + loadChildren: () => + import('./pages/risk-assessment/risk-assessment.module').then( + m => m.RiskAssessmentModule + ), + title: 'Testrun - Risk Assessment', + }, { path: '', redirectTo: 'devices', diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index ef889d2c4..bd93aeb12 100644 --- a/modules/ui/src/app/app.component.html +++ b/modules/ui/src/app/app.component.html @@ -55,6 +55,17 @@ } "> + + diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts index ea315f68b..0eddcc1d1 100644 --- a/modules/ui/src/app/app.component.ts +++ b/modules/ui/src/app/app.component.ts @@ -37,6 +37,7 @@ import { TestRunService } from './services/test-run.service'; const DEVICES_LOGO_URL = '/assets/icons/devices.svg'; const DEVICES_RUN_URL = '/assets/icons/device_run.svg'; const REPORTS_LOGO_URL = '/assets/icons/reports.svg'; +const RISK_ASSESSMENT_LOGO_URL = '/assets/icons/risk-assessment.svg'; const TESTRUN_LOGO_URL = '/assets/icons/testrun_logo_small.svg'; const TESTRUN_LOGO_COLOR_URL = '/assets/icons/testrun_logo_color.svg'; const CLOSE_URL = '/assets/icons/close.svg'; @@ -86,6 +87,10 @@ export class AppComponent { 'reports', this.domSanitizer.bypassSecurityTrustResourceUrl(REPORTS_LOGO_URL) ); + this.matIconRegistry.addSvgIcon( + 'risk_assessment', + this.domSanitizer.bypassSecurityTrustResourceUrl(RISK_ASSESSMENT_LOGO_URL) + ); this.matIconRegistry.addSvgIcon( 'testrun_logo_small', this.domSanitizer.bypassSecurityTrustResourceUrl(TESTRUN_LOGO_URL) diff --git a/modules/ui/src/app/model/routes.ts b/modules/ui/src/app/model/routes.ts index f523f1b15..05ff91ed9 100644 --- a/modules/ui/src/app/model/routes.ts +++ b/modules/ui/src/app/model/routes.ts @@ -18,4 +18,5 @@ export enum Routes { Devices = '/devices', Testing = '/testing', Reports = '/reports', + RiskAssessment = '/risk-assessment', } diff --git a/modules/ui/src/app/pages/devices/device-repository.component.scss b/modules/ui/src/app/pages/devices/device-repository.component.scss index d15f6bad5..a089fb978 100644 --- a/modules/ui/src/app/pages/devices/device-repository.component.scss +++ b/modules/ui/src/app/pages/devices/device-repository.component.scss @@ -30,10 +30,10 @@ } .device-repository-toolbar { - padding-left: 32px; gap: 16px; background: $white; - height: 72px; + height: 74px; + padding: 24px 0 8px 32px; } .device-repository-content { diff --git a/modules/ui/src/app/pages/reports/history.component.scss b/modules/ui/src/app/pages/reports/history.component.scss index e8c8850d4..bd6098940 100644 --- a/modules/ui/src/app/pages/reports/history.component.scss +++ b/modules/ui/src/app/pages/reports/history.component.scss @@ -24,14 +24,14 @@ } .history-toolbar { - padding-left: 32px; gap: 10px; background: $white; - height: 72px; + height: 74px; + padding: 24px 0 8px 32px; } .history-content { - margin: 0 32px 39px 32px; + margin: 10px 32px 39px 32px; overflow-y: auto; border-radius: 4px; border: 1px solid $lighter-grey; diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment-routing.module.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment-routing.module.ts new file mode 100644 index 000000000..927da40bc --- /dev/null +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment-routing.module.ts @@ -0,0 +1,26 @@ +/** + * Copyright 2023 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { RiskAssessmentComponent } from './risk-assessment.component'; + +const routes: Routes = [{ path: '', component: RiskAssessmentComponent }]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class RiskAssessmentRoutingModule {} diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html new file mode 100644 index 000000000..e19456aa5 --- /dev/null +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html @@ -0,0 +1,18 @@ + + +

Risk assessment

+ diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss new file mode 100644 index 000000000..171771e81 --- /dev/null +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss @@ -0,0 +1,22 @@ +/** + * Copyright 2023 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@import 'src/theming/colors'; + +.risk-assessment-toolbar { + height: 74px; + padding: 24px 0 8px 32px; + background: $white; +} diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts new file mode 100644 index 000000000..dc1f931e1 --- /dev/null +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts @@ -0,0 +1,52 @@ +/** + * Copyright 2023 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RiskAssessmentComponent } from './risk-assessment.component'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +describe('RiskAssessmentComponent', () => { + let component: RiskAssessmentComponent; + let fixture: ComponentFixture; + let compiled: HTMLElement; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RiskAssessmentComponent], + imports: [MatToolbarModule, BrowserAnimationsModule], + }).compileComponents(); + + fixture = TestBed.createComponent(RiskAssessmentComponent); + component = fixture.componentInstance; + compiled = fixture.nativeElement as HTMLElement; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should have toolbar with title', () => { + const toolbarEl = compiled.querySelector('.risk-assessment-toolbar'); + const title = compiled.querySelector('h2.title'); + const titleContent = title?.innerHTML.trim(); + + expect(toolbarEl).not.toBeNull(); + expect(title).toBeTruthy(); + expect(titleContent).toContain('Risk assessment'); + }); +}); diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts new file mode 100644 index 000000000..c788ae2c0 --- /dev/null +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts @@ -0,0 +1,24 @@ +/** + * Copyright 2023 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'app-risk-assessment', + templateUrl: './risk-assessment.component.html', + styleUrl: './risk-assessment.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class RiskAssessmentComponent {} diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.module.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.module.ts new file mode 100644 index 000000000..6d3838a92 --- /dev/null +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.module.ts @@ -0,0 +1,27 @@ +/** + * Copyright 2023 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { RiskAssessmentRoutingModule } from './risk-assessment-routing.module'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { RiskAssessmentComponent } from './risk-assessment.component'; + +@NgModule({ + declarations: [RiskAssessmentComponent], + imports: [CommonModule, RiskAssessmentRoutingModule, MatToolbarModule], +}) +export class RiskAssessmentModule {} diff --git a/modules/ui/src/assets/icons/risk-assessment.svg b/modules/ui/src/assets/icons/risk-assessment.svg new file mode 100644 index 000000000..42ff5f942 --- /dev/null +++ b/modules/ui/src/assets/icons/risk-assessment.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss index 9cd587535..4b5a7324e 100644 --- a/modules/ui/src/styles.scss +++ b/modules/ui/src/styles.scss @@ -158,7 +158,7 @@ mat-hint { } } -h2.title { +.mat-toolbar h2.title { margin: 0; font-size: 32px; font-style: normal;