340859666: (feat): display risk profile form with name field (#514)

Co-authored-by: Volha Mardvilka <mardvilka@google.com>

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

@@ -0,0 +1,54 @@
+<!--
+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.
+-->
+<form [formGroup]="profileForm" class="profile-form">
+  <div class="field-container">
+    <p class="field-label">Profile name *</p>
+    <mat-form-field appearance="outline" class="name-field">
+      <mat-label>Specify risk assessment profile name</mat-label>
+      <input class="form-name" formControlName="name" matInput />
+      <mat-error
+        *ngIf="nameControl.hasError('invalid_format')"
+        role="alert"
+        aria-live="assertive">
+        <span
+          >Please, check. The Profile name must be a maximum of 28 characters.
+          Only letters, numbers, and accented letters are permitted.</span
+        >
+      </mat-error>
+      <mat-error *ngIf="nameControl.hasError('required')">
+        <span>The Profile name is required</span>
+      </mat-error>
+      <mat-error *ngIf="nameControl.hasError('has_same_profile_name')">
+        <span
+          >This Profile name is already used for another Risk Assessment
+          profile</span
+        >
+      </mat-error>
+    </mat-form-field>
+  </div>
+</form>
+<div class="form-actions">
+  <button mat-flat-button color="primary" class="save-profile-button">
+    Save Profile
+  </button>
+  <button mat-flat-button class="save-draft-button">Save Draft</button>
+  <button
+    mat-flat-button
+    class="discard-button"
+    [disabled]="profileForm.pristine">
+    Discard
+  </button>
+</div>

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.scss

@@ -0,0 +1,47 @@
+/**
+ * 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';
+@import 'src/theming/variables';
+
+.profile-form {
+  .field-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 8px 16px 8px 24px;
+  }
+  .field-label {
+    margin: 0;
+    color: $grey-800;
+    font-size: 18px;
+    line-height: 24px;
+  }
+  mat-form-field {
+    width: 100%;
+  }
+}
+
+.form-actions {
+  display: flex;
+  gap: 16px;
+  padding: 0 24px;
+}
+
+.save-draft-button,
+.discard-button {
+  color: $primary;
+}

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.spec.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 { ProfileFormComponent } from './profile-form.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('ProfileFormComponent', () => {
+  let component: ProfileFormComponent;
+  let fixture: ComponentFixture<ProfileFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProfileFormComponent, BrowserAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProfileFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  // TODO: Add more unit tests
+});

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts

@@ -0,0 +1,80 @@
+/**
+ * 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,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { DeviceValidators } from '../../devices/components/device-form/device.validators';
+import { Profile } from '../../../model/profile';
+import { ProfileValidators } from './profile.validators';
+import { MatError } from '@angular/material/form-field';
+
+@Component({
+  selector: 'app-profile-form',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    CommonModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatError,
+  ],
+  templateUrl: './profile-form.component.html',
+  styleUrl: './profile-form.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProfileFormComponent implements OnInit {
+  profileForm!: FormGroup;
+  @Input() profiles!: Profile[];
+  constructor(
+    private deviceValidators: DeviceValidators,
+    private profileValidators: ProfileValidators,
+    private fb: FormBuilder
+  ) {}
+
+  get nameControl() {
+    return this.profileForm.get('name') as AbstractControl;
+  }
+
+  ngOnInit() {
+    this.createProfileForm();
+  }
+
+  createProfileForm() {
+    this.profileForm = this.fb.group({
+      name: [
+        '',
+        [
+          Validators.required,
+          this.deviceValidators.deviceStringFormat(),
+          this.profileValidators.differentProfileName(this.profiles),
+        ],
+      ],
+    });
+  }
+}

modules/ui/src/app/pages/risk-assessment/profile-form/profile.validators.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 { Injectable } from '@angular/core';
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { Profile } from '../../../model/profile';
+@Injectable({ providedIn: 'root' })
+export class ProfileValidators {
+  public differentProfileName(profiles: Profile[]): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const value = control.value?.trim();
+      if (value && profiles.length) {
+        const isSameProfileName = this.hasSameProfileName(value, profiles);
+        return isSameProfileName ? { has_same_profile_name: true } : null;
+      }
+      return null;
+    };
+  }
+
+  private hasSameProfileName(
+    profileName: string,
+    profiles: Profile[]
+  ): boolean {
+    return (
+      profiles.some(profile => profile.name === profileName.trim()) || false
+    );
+  }
+}

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

@@ -14,14 +14,18 @@
 limitations under the License.
 -->
 <ng-container *ngIf="viewModel$ | async as vm">
-  <mat-drawer-container class="risk-assessment-container">
-    <mat-drawer-content class="risk-assessment-content">
-      <mat-toolbar class="risk-assessment-toolbar">
-        <h2 class="title">Risk assessment</h2>
-      </mat-toolbar>
-      <div class="main-content"></div>
-    </mat-drawer-content>
-  </mat-drawer-container>
+  <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">Risk assessment</h2>
+        </mat-toolbar>
+        <div class="main-content">
+          <app-profile-form [profiles]="vm.profiles"></app-profile-form>
+        </div>
+      </mat-drawer-content>
+    </mat-drawer-container>
+  </ng-container>
   <mat-drawer
     mode="side"
     opened
@@ -40,4 +44,17 @@ <h2 class="profiles-drawer-header-title">Saved profiles</h2>
       </app-profile-item>
     </div>
   </mat-drawer>
+
+  <ng-template #empty>
+    <div class="risk-assessment-content-empty">
+      <button
+        (click)="openForm()"
+        aria-label="Add New Risk Assessment"
+        class="risk-assessment-add-button"
+        color="primary"
+        mat-flat-button>
+        New Risk Assessment
+      </button>
+    </div>
+  </ng-template>
 </ng-container>

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

@@ -16,15 +16,33 @@
 @import 'src/theming/colors';
 @import 'src/theming/variables';
 
+.risk-assessment-content-empty {
+  height: 100%;
+  width: calc(100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host:has(.profiles-drawer) {
+  .risk-assessment-content-empty {
+    width: calc(100% - $profiles-drawer-width);
+  }
+}
+
 .risk-assessment-container,
 .risk-assessment-content {
+  height: 100%;
   background-color: $white;
 }
 
 .risk-assessment-content {
   display: flex;
   flex-direction: column;
   gap: 14px;
+  width: calc(100% - $profiles-drawer-width);
+  box-sizing: border-box;
+  padding-right: 94px;
 }
 
 .risk-assessment-toolbar {