339315842: (feat) add risk assessment tab (#450)

* 339315842: (feat) add risk assessment tab

* 339315842: (feat) add risk assessment tab

---------

Co-authored-by: Volha Mardvilka <[email protected]>

Author: OlgaMardvilko

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',

modules/ui/src/app/app.component.html

@@ -55,6 +55,17 @@
             }
           ">
         </ng-container>
+        <ng-container
+          *ngTemplateOutlet="
+            navButtonRoute;
+            context: {
+              route: Routes.RiskAssessment,
+              svgIcon: 'risk_assessment',
+              label: 'Risk Assessment',
+              name: 'risk-assessment'
+            }
+          ">
+        </ng-container>
         <app-version
           [consentShown]="vm.consentShown"
           (consentShownEvent)="consentShown()"></app-version>

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)

modules/ui/src/app/model/routes.ts

@@ -18,4 +18,5 @@ export enum Routes {
   Devices = '/devices',
   Testing = '/testing',
   Reports = '/reports',
+  RiskAssessment = '/risk-assessment',
 }

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 {

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;

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 {}

modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html

@@ -0,0 +1,18 @@
+<!--
+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.
+-->
+<mat-toolbar class="risk-assessment-toolbar">
+  <h2 class="title">Risk assessment</h2>
+</mat-toolbar>

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;
+}

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<RiskAssessmentComponent>;
+  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');
+  });
+});