From 1c5f550cda066d02a1319156817bdcb1a68181ec Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Mon, 3 Feb 2025 10:59:06 +0000
Subject: [PATCH] 391367086: (feat) [GM3] add new risk profile form

---
 .../dynamic-form/dynamic-form.component.scss  |  2 +-
 .../list-layout/list-layout.component.html    |  6 +-
 .../pages/devices/devices.component.spec.ts   | 34 +++++++++--
 .../profile-form/profile-form.component.html  |  1 -
 .../profile-form/profile-form.component.scss  |  3 +-
 .../risk-assessment.component.html            | 41 -------------
 .../risk-assessment.component.scss            | 59 ++-----------------
 .../risk-assessment.component.spec.ts         |  4 +-
 modules/ui/src/styles.scss                    | 21 -------
 9 files changed, 43 insertions(+), 128 deletions(-)

diff --git a/modules/ui/src/app/components/dynamic-form/dynamic-form.component.scss b/modules/ui/src/app/components/dynamic-form/dynamic-form.component.scss
index 3ef463e0d..b28de1d15 100644
--- a/modules/ui/src/app/components/dynamic-form/dynamic-form.component.scss
+++ b/modules/ui/src/app/components/dynamic-form/dynamic-form.component.scss
@@ -26,7 +26,7 @@
   line-height: 24px;
   letter-spacing: 0.1px;
   color: colors.$on-surface-variant;
-  padding: 20px 20px 8px 16px;
+  padding: 8px 16px;
   display: inline-block;
   &:has(+ .field-select-multiple.ng-invalid.ng-dirty) {
     color: mat.get-theme-color($light-theme, error, 40);
diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.html b/modules/ui/src/app/components/list-layout/list-layout.component.html
index 1377b2944..6dfe504d6 100644
--- a/modules/ui/src/app/components/list-layout/list-layout.component.html
+++ b/modules/ui/src/app/components/list-layout/list-layout.component.html
@@ -13,7 +13,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<ng-container *ngIf="entities().length > 0; else empty">
+<ng-container *ngIf="entities().length > 0 || isOpenEntityForm(); else empty">
   <mat-drawer-container class="layout-container">
     <mat-drawer mode="side" opened class="layout-container-left-panel">
       <mat-toolbar class="layout-container-left-panel-toolbar">
@@ -44,7 +44,9 @@
           *ngIf="isOpenEntityForm() && !initialEntity()"
           class="fake-list-item">
           <mat-icon svgIcon="draft" class="profile-draft-icon"></mat-icon>
-          New device
+          {{
+            title() === LayoutType.Device ? 'New device' : 'New risk profile'
+          }}
         </div>
         <ng-container *ngFor="let entity of filtered(); index as i">
           <app-list-item
diff --git a/modules/ui/src/app/pages/devices/devices.component.spec.ts b/modules/ui/src/app/pages/devices/devices.component.spec.ts
index 7cabe6f97..4b8d45538 100644
--- a/modules/ui/src/app/pages/devices/devices.component.spec.ts
+++ b/modules/ui/src/app/pages/devices/devices.component.spec.ts
@@ -20,7 +20,7 @@ import {
   tick,
 } from '@angular/core/testing';
 import { of } from 'rxjs';
-import { Device, DeviceAction } from '../../model/device';
+import { Device, DeviceAction, TestModule } from '../../model/device';
 
 import { DevicesComponent } from './devices.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -35,8 +35,9 @@ import { TestrunInitiateFormComponent } from '../testrun/components/testrun-init
 import { Routes } from '../../model/routes';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { Component } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 import { MOCK_PROGRESS_DATA_IN_PROGRESS } from '../../mocks/testrun.mock';
+import { DeviceQualificationFromComponent } from './components/device-qualification-from/device-qualification-from.component';
 
 describe('DevicesComponent', () => {
   let component: DevicesComponent;
@@ -68,12 +69,22 @@ describe('DevicesComponent', () => {
         MatIconTestingModule,
         DevicesComponent,
         FakeProgressComponent,
+        FakeDeviceQualificationComponent,
       ],
       providers: [
         { provide: DevicesStore, useValue: mockDevicesStore },
         { provide: FocusManagerService, useValue: stateServiceMock },
       ],
-    }).compileComponents();
+    })
+      .overrideComponent(DevicesComponent, {
+        remove: {
+          imports: [DeviceQualificationFromComponent],
+        },
+        add: {
+          imports: [FakeDeviceQualificationComponent],
+        },
+      })
+      .compileComponents();
 
     TestBed.overrideProvider(DevicesStore, { useValue: mockDevicesStore });
 
@@ -104,7 +115,6 @@ describe('DevicesComponent', () => {
       });
       mockDevicesStore.devices$ = of([]);
       mockDevicesStore.testModules$ = of([]);
-      mockDevicesStore.isOpenAddDevice$ = of(true);
       fixture.detectChanges();
     });
 
@@ -115,6 +125,7 @@ describe('DevicesComponent', () => {
     });
 
     it('should open form if isOpenAddDevice$ as true', () => {
+      mockDevicesStore.isOpenAddDevice$ = of(true);
       component.ngOnInit();
 
       expect(component.isOpenDeviceForm).toBeTrue();
@@ -263,3 +274,18 @@ describe('DevicesComponent', () => {
   template: '',
 })
 class FakeProgressComponent {}
+
+@Component({
+  selector: 'app-device-qualification-from',
+  template: '<div></div>',
+})
+class FakeDeviceQualificationComponent {
+  initialDevice = input<Device | null>(null);
+  devices = input<Device[]>([]);
+  testModules = input<TestModule[]>([]);
+  isCreate = input<boolean>(true);
+
+  save = output<Device>();
+  delete = output<Device>();
+  cancel = output<void>();
+}
diff --git a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html
index 8bde474ba..7e0bf87db 100644
--- a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html
+++ b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html
@@ -20,7 +20,6 @@
       appearance="outline"
       floatLabel="always"
       class="profile-form-field">
-      <mat-label>Specify risk assessment profile name</mat-label>
       <input class="form-name" formControlName="name" matInput />
       <mat-hint>Required for saving a profile</mat-hint>
       <mat-error
diff --git a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss
index c5e927e27..f54bc0138 100644
--- a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss
+++ b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss
@@ -28,12 +28,13 @@
 
   .name-field-label {
     padding-top: 0;
+    margin: 0;
   }
   .field-container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding: 8px 16px 8px 24px;
+    padding: 16px 32px;
   }
 
   .profile-form-field {
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
index d1499b292..516cdf9b1 100644
--- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html
+++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html
@@ -28,47 +28,6 @@
     (addEntity)="openForm()">
   </app-list-layout>
 
-  <!-- TODO to be deleted after Risk Profiles GM3 migration -->
-  <!--  <ng-container *ngIf="isOpenProfileForm; else empty">-->
-  <!--    <mat-drawer-container class="risk-assessment-container">-->
-  <!--      <mat-drawer-content class="risk-assessment-content">-->
-  <!--        <mat-toolbar class="risk-assessment-toolbar">-->
-  <!--          <h2 class="title" tabindex="-1">Risk assessment</h2>-->
-  <!--        </mat-toolbar>-->
-  <!--        <div class="main-content">-->
-  <!--          <app-profile-form-->
-  <!--            [selectedProfile]="vm.selectedProfile"-->
-  <!--            [isCopyProfile]="isCopyProfile"-->
-  <!--            [profiles]="vm.profiles"-->
-  <!--            [profileFormat]="vm.profileFormat"-->
-  <!--            (saveProfile)="saveProfileClicked($event, vm.selectedProfile)"-->
-  <!--            (discard)="discard(vm.selectedProfile)"></app-profile-form>-->
-  <!--        </div>-->
-  <!--      </mat-drawer-content>-->
-  <!--    </mat-drawer-container>-->
-  <!--  </ng-container>-->
-  <!--  <mat-drawer-->
-  <!--    mode="side"-->
-  <!--    opened-->
-  <!--    position="end"-->
-  <!--    class="profiles-drawer"-->
-  <!--    *ngIf="vm.profiles.length">-->
-  <!--    <div class="profiles-drawer-header">-->
-  <!--      <h2 class="profiles-drawer-header-title">Saved profiles</h2>-->
-  <!--    </div>-->
-  <!--    <div class="profiles-drawer-content">-->
-  <!--      <app-profile-item-->
-  <!--        *ngFor="let profile of vm.profiles; let i = index; trackBy: trackByName"-->
-  <!--        [profile]="profile"-->
-  <!--        class="profile-item-{{ i }}"-->
-  <!--        [ngClass]="{ selected: profile.name === vm.selectedProfile?.name }"-->
-  <!--        (deleteButtonClicked)="deleteProfile($event, i, vm.selectedProfile)"-->
-  <!--        (profileClicked)="profileClicked($event)"-->
-  <!--        (copyProfileClicked)="copyProfileAndOpenForm($event)">-->
-  <!--      </app-profile-item>-->
-  <!--    </div>-->
-  <!--  </mat-drawer>-->
-
   <ng-template #content>
     <app-no-entity-selected
       *ngIf="!isOpenProfileForm"
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
index c115d0844..817e7ceb0 100644
--- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss
+++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss
@@ -17,6 +17,10 @@
 @use 'variables';
 @use 'mixins';
 
+:host {
+  overflow: auto;
+}
+
 .risk-assessment-add-button {
   @include mixins.add-button;
 }
@@ -24,58 +28,3 @@
 .risk-assessment-content-empty {
   @include mixins.content-empty;
 }
-
-:host:has(.profiles-drawer) {
-  .risk-assessment-content-empty {
-    width: calc(100% - #{variables.$profiles-drawer-width});
-  }
-}
-
-.risk-assessment-container,
-.risk-assessment-content {
-  background-color: colors.$white;
-}
-
-.risk-assessment-container {
-  flex: 1;
-}
-
-.risk-assessment-content {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  box-sizing: border-box;
-  padding-right: 94px;
-  overflow: hidden;
-}
-
-.risk-assessment-toolbar {
-  height: 74px;
-  padding: 24px 0 8px 32px;
-  background: colors.$white;
-}
-
-.main-content {
-  padding: 16px 32px;
-  overflow: hidden;
-  width: calc(100% - #{variables.$profiles-drawer-width});
-}
-
-.profiles-drawer {
-  width: variables.$profiles-drawer-width;
-  box-shadow: none;
-  border-left: 1px solid colors.$light-grey;
-}
-
-.profiles-drawer-header {
-  padding: 12px 12px 16px 24px;
-}
-
-.profiles-drawer-header-title {
-  margin: 0;
-  font-size: 22px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 28px;
-  color: colors.$dark-grey;
-}
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
index f6e6b3664..b123f1845 100644
--- 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
@@ -152,11 +152,11 @@ describe('RiskAssessmentComponent', () => {
 
       const title = compiled.querySelector('h2.title');
       const titleContent = title?.innerHTML.trim();
-      // const profileForm = compiled.querySelectorAll('app-profile-form');
+      const profileForm = compiled.querySelectorAll('app-profile-form');
 
       expect(title).toBeTruthy();
       expect(titleContent).toContain('Risk Assessment');
-      // expect(profileForm).toBeTruthy();
+      expect(profileForm).toBeTruthy();
     });
   });
 
diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss
index cac27fb17..a6c6b2ae7 100644
--- a/modules/ui/src/styles.scss
+++ b/modules/ui/src/styles.scss
@@ -364,12 +364,6 @@ body #main {
     }
   }
 
-  &:has(app-risk-assessment .profiles-drawer) {
-    .app-callout-container {
-      width: calc(100% - #{variables.$profiles-drawer-width});
-    }
-  }
-
   &:has(app-settings) {
     .app-callout-container app-callout:last-of-type .callout-container {
       margin-bottom: 0;
@@ -429,21 +423,6 @@ body #main {
     overflow: hidden;
   }
 
-  app-risk-assessment:has(.profiles-drawer) {
-    .risk-assessment-content-empty {
-      width: calc(100% - $profiles-drawer-width-xs) !important;
-    }
-  }
-
-  app-risk-assessment .main-content {
-    width: auto !important;
-    padding: 16px 4px !important;
-  }
-
-  .risk-assessment-content {
-    padding-right: $profiles-drawer-width-xs !important;
-  }
-
   app-dynamic-form {
     width: 100%;
   }