From aa0c97fa32741353215e982db042a4dd0f0fc176 Mon Sep 17 00:00:00 2001 From: Volha Mardvilka Date: Mon, 13 May 2024 13:45:59 +0000 Subject: [PATCH 1/2] 339315842: (feat) add risk assessment tab --- modules/ui/src/app/app-routing.module.ts | 8 +++ modules/ui/src/app/app.component.html | 11 ++++ modules/ui/src/app/app.component.ts | 5 ++ modules/ui/src/app/model/routes.ts | 1 + .../devices/device-repository.component.scss | 4 +- .../app/pages/reports/history.component.scss | 6 +-- .../risk-assessment-routing.module.ts | 26 ++++++++++ .../risk-assessment.component.html | 18 +++++++ .../risk-assessment.component.scss | 22 ++++++++ .../risk-assessment.component.spec.ts | 52 +++++++++++++++++++ .../risk-assessment.component.ts | 24 +++++++++ .../risk-assessment/risk-assessment.module.ts | 27 ++++++++++ .../ui/src/assets/icons/risk-assessment.svg | 10 ++++ modules/ui/src/styles.scss | 2 +- 14 files changed, 210 insertions(+), 6 deletions(-) create mode 100644 modules/ui/src/app/pages/risk-assessment/risk-assessment-routing.module.ts create mode 100644 modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html create mode 100644 modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss create mode 100644 modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts create mode 100644 modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts create mode 100644 modules/ui/src/app/pages/risk-assessment/risk-assessment.module.ts create mode 100644 modules/ui/src/assets/icons/risk-assessment.svg diff --git a/modules/ui/src/app/app-routing.module.ts b/modules/ui/src/app/app-routing.module.ts index d503116d6..9047d1edb 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 Assessments', + }, { path: '', redirectTo: 'devices', diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index ef889d2c4..9894c4f27 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..06f26b4a3 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_assessments', + 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; From 6674cd0846be311c46e0a0f2773f61fc11331478 Mon Sep 17 00:00:00 2001 From: Volha Mardvilka Date: Mon, 13 May 2024 13:52:22 +0000 Subject: [PATCH 2/2] 339315842: (feat) add risk assessment tab --- modules/ui/src/app/app-routing.module.ts | 2 +- modules/ui/src/app/app.component.html | 6 +++--- modules/ui/src/app/app.component.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/modules/ui/src/app/app-routing.module.ts b/modules/ui/src/app/app-routing.module.ts index 9047d1edb..454782cc9 100644 --- a/modules/ui/src/app/app-routing.module.ts +++ b/modules/ui/src/app/app-routing.module.ts @@ -43,7 +43,7 @@ const routes: Routes = [ import('./pages/risk-assessment/risk-assessment.module').then( m => m.RiskAssessmentModule ), - title: 'Testrun - Risk Assessments', + title: 'Testrun - Risk Assessment', }, { path: '', diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index 9894c4f27..bd93aeb12 100644 --- a/modules/ui/src/app/app.component.html +++ b/modules/ui/src/app/app.component.html @@ -60,9 +60,9 @@ navButtonRoute; context: { route: Routes.RiskAssessment, - svgIcon: 'risk_assessments', - label: 'Risk Assessments', - name: 'risk-assessments' + svgIcon: 'risk_assessment', + label: 'Risk Assessment', + name: 'risk-assessment' } "> diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts index 06f26b4a3..0eddcc1d1 100644 --- a/modules/ui/src/app/app.component.ts +++ b/modules/ui/src/app/app.component.ts @@ -88,7 +88,7 @@ export class AppComponent { this.domSanitizer.bypassSecurityTrustResourceUrl(REPORTS_LOGO_URL) ); this.matIconRegistry.addSvgIcon( - 'risk_assessments', + 'risk_assessment', this.domSanitizer.bypassSecurityTrustResourceUrl(RISK_ASSESSMENT_LOGO_URL) ); this.matIconRegistry.addSvgIcon(