The validation for duplicated name doesn't work for copied risk profile; The tooltips are not shown for action icons of the risk profile

modules/ui/src/app/mocks/profile.mock.ts

@@ -155,3 +155,30 @@ export const RENAME_PROFILE_MOCK = {
   name: 'Primary profile',
   rename: 'New profile',
 };
+
+export const COPY_PROFILE_MOCK: Profile = {
+  name: 'Copy of Primary profile',
+  status: ProfileStatus.VALID,
+  questions: [
+    {
+      question: 'What is the email of the device owner(s)?',
+      answer: 'boddey@google.com, cmeredith@google.com',
+    },
+    {
+      question: 'What type of device do you need reviewed?',
+      answer: 'IoT Sensor',
+    },
+    {
+      question: 'Are any of the following statements true about your device?',
+      answer: 'First',
+    },
+    {
+      question: 'What features does the device have?',
+      answer: [0, 1, 2],
+    },
+    {
+      question: 'Comments',
+      answer: 'Yes',
+    },
+  ],
+};

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

@@ -18,6 +18,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ProfileFormComponent } from './profile-form.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
+  COPY_PROFILE_MOCK,
   NEW_PROFILE_MOCK,
   NEW_PROFILE_MOCK_DRAFT,
   PROFILE_FORM,
@@ -132,7 +133,6 @@ describe('ProfileFormComponent', () => {
         name.dispatchEvent(new Event('input'));
         component.nameControl.markAsTouched();
 
-        fixture.detectChanges();
         fixture.detectChanges();
 
         const nameError = compiled.querySelector('mat-error')?.innerHTML;
@@ -457,6 +457,15 @@ describe('ProfileFormComponent', () => {
           component.nameControl.hasError('has_same_profile_name')
         ).toBeTrue();
       });
+
+      it('should have an error when uses the name of copy profile', () => {
+        component.selectedProfile = COPY_PROFILE_MOCK;
+        component.profiles = [PROFILE_MOCK, PROFILE_MOCK_2, COPY_PROFILE_MOCK];
+
+        expect(
+          component.nameControl.hasError('has_same_profile_name')
+        ).toBeTrue();
+      });
     });
 
     describe('with no profile', () => {

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

@@ -219,6 +219,7 @@ export class ProfileFormComponent implements OnInit {
         this.getControl(index).setValue(profile.questions[index].answer);
       }
     });
+    this.nameControl.markAsTouched();
     this.triggerResize();
   }
 

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

@@ -37,7 +37,13 @@ export class ProfileValidators {
   ): ValidatorFn {
     return (control: AbstractControl): ValidationErrors | null => {
       const value = control.value?.trim();
-      if (value && profiles.length && (!profile || profile?.name !== value)) {
+      if (
+        value &&
+        profiles.length &&
+        (!profile ||
+          !profile.created ||
+          (profile.created && profile?.name !== value))
+      ) {
         const isSameProfileName = this.hasSameProfileName(value, profiles);
         return isSameProfileName ? { has_same_profile_name: true } : null;
       }

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

@@ -53,13 +53,15 @@
     class="profile-item-button copy"
     mat-icon-button
     attr.aria-label="Copy {{ profile.name }}"
+    matTooltip="Copy {{ profile.name }}"
     (click)="copyProfileClicked.emit(profile)">
     <mat-icon fontSet="material-symbols-outlined"> content_copy </mat-icon>
   </button>
   <button
     class="profile-item-button delete"
     mat-icon-button
     attr.aria-label="Delete {{ profile.name }}"
+    matTooltip="Delete {{ profile.name }}"
     (click)="deleteButtonClicked.emit(profile.name)">
     <mat-icon fontSet="material-symbols-outlined"> delete </mat-icon>
   </button>

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

@@ -26,7 +26,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TestRunService } from '../../services/test-run.service';
 import SpyObj = jasmine.SpyObj;
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { NEW_PROFILE_MOCK, PROFILE_MOCK } from '../../mocks/profile.mock';
+import {
+  COPY_PROFILE_MOCK,
+  NEW_PROFILE_MOCK,
+  PROFILE_MOCK,
+} from '../../mocks/profile.mock';
 import { of } from 'rxjs';
 import { Component, Input } from '@angular/core';
 import { Profile, ProfileFormat } from '../../model/profile';
@@ -220,9 +224,7 @@ describe('RiskAssessmentComponent', () => {
     describe('#getCopyOfProfile', () => {
       it('should open the form with copy of profile', () => {
         const copy = component.getCopyOfProfile(PROFILE_MOCK);
-        expect(copy).toEqual(
-          Object.assign({}, PROFILE_MOCK, { name: 'Copy of Primary profile' })
-        );
+        expect(copy).toEqual(COPY_PROFILE_MOCK);
       });
     });
 

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

@@ -68,6 +68,7 @@ export class RiskAssessmentComponent implements OnInit, OnDestroy {
   getCopyOfProfile(profile: Profile): Profile {
     const copyOfProfile = { ...profile };
     copyOfProfile.name = this.getCopiedProfileName(profile.name);
+    delete copyOfProfile.created; // new profile is not create yet
     return copyOfProfile;
   }