406769857: (feat) add risk assessment message

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

@@ -123,16 +123,9 @@ <h1 class="main-heading">Testrun</h1>
           *ngTemplateOutlet="
             callouts;
             context: {
-              systemStatus: vm.systemStatus,
               error: vm.settingMissedError,
               hasExpiredDevices: vm.hasExpiredDevices,
               calloutState: vm.calloutState,
-              hasConnectionSettings: vm.hasConnectionSettings,
-              hasRiskProfiles: vm.hasRiskProfiles,
-              isAllDevicesOutdated: vm.isAllDevicesOutdated,
-              isStatusLoaded: vm.isStatusLoaded,
-              reports: vm.reports,
-              hasDevices: vm.hasDevices,
             }
           ">
         </ng-container>
@@ -187,16 +180,9 @@ <h1 class="main-heading">Testrun</h1>
 
 <ng-template
   #callouts
-  let-systemStatus="systemStatus"
   let-error="error"
   let-hasExpiredDevices="hasExpiredDevices"
-  let-calloutState="calloutState"
-  let-hasConnectionSettings="hasConnectionSettings"
-  let-isAllDevicesOutdated="isAllDevicesOutdated"
-  let-isStatusLoaded="isStatusLoaded"
-  let-reports="reports"
-  let-hasRiskProfiles="hasRiskProfiles"
-  let-hasDevices="hasDevices">
+  let-calloutState="calloutState">
   <div class="app-callout-container">
     <app-callout
       [type]="CalloutType.Error"
@@ -231,22 +217,6 @@ <h1 class="main-heading">Testrun</h1>
         >Please update your Devices to continue testing.
       </ng-container>
     </app-callout>
-    <app-callout
-      role="alert"
-      aria-live="assertive"
-      [type]="CalloutType.Check"
-      *ngIf="
-        hasConnectionSettings === true &&
-        hasDevices === true &&
-        hasRiskProfiles === false &&
-        systemStatus === StatusOfTestrun.InProgress &&
-        isRiskAssessmentRoute === false
-      "
-      action="Create risk Assessment"
-      (onAction)="navigateToRiskAssessment()">
-      The device is now being tested. Why not take the time to complete the
-      device Risk Assessment questionnaire?
-    </app-callout>
   </div>
 </ng-template>
 
@@ -297,5 +267,19 @@ <h1 class="main-heading">Testrun</h1>
       (onCLoseTip)="onCLoseTip($event)"
       (onAction)="navigateToRuntime()">
     </app-help-tip>
+    <app-help-tip
+      *ngIf="
+        hasConnectionSettings === true &&
+        hasDevices === true &&
+        hasRiskProfiles === false &&
+        systemStatus === StatusOfTestrun.InProgress &&
+        isRiskAssessmentRoute === false
+      "
+      [class.closed-tip]="isClosedTip"
+      [data]="HelpTips.step4"
+      [target]="riskAssessmentTipTarget"
+      (onCLoseTip)="onCLoseTip($event)"
+      (onAction)="navigateToRiskAssessment()">
+    </app-help-tip>
   </div>
 </ng-template>

modules/ui/src/app/app.component.spec.ts

@@ -533,40 +533,6 @@ describe('AppComponent', () => {
         expect(helpTip).toBeNull();
       });
     });
-  });
-
-  describe('Callout component visibility', () => {
-    describe('with systemStatus data IN Progress and without riskProfiles', () => {
-      beforeEach(() => {
-        store.overrideSelector(selectHasConnectionSettings, true);
-        store.overrideSelector(selectHasDevices, true);
-        store.overrideSelector(selectHasRiskProfiles, false);
-        store.overrideSelector(
-          selectStatus,
-          MOCK_PROGRESS_DATA_IN_PROGRESS.status
-        );
-        fixture.detectChanges();
-      });
-
-      it('should have callout component with "The device is now being tested" text', () => {
-        const callout = compiled.querySelector('app-callout');
-        const calloutContent = callout?.innerHTML.trim();
-
-        expect(callout).toBeTruthy();
-        expect(calloutContent).toContain('The device is now being tested');
-      });
-
-      it('should have callout component with "Risk Assessment" link', () => {
-        const callout = compiled.querySelector('app-callout');
-        const calloutLinkEl = compiled.querySelector(
-          '.callout-action-link'
-        ) as HTMLAnchorElement;
-        const calloutLinkContent = calloutLinkEl.innerHTML.trim();
-
-        expect(callout).toBeTruthy();
-        expect(calloutLinkContent).toContain('Create risk Assessment');
-      });
-    });
 
     describe('with systemStatus data IN Progress and without riskProfiles', () => {
       beforeEach(() => {
@@ -580,26 +546,26 @@ describe('AppComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should have callout component with "The device is now being tested" text', () => {
-        const callout = compiled.querySelector('app-callout');
-        const calloutContent = callout?.innerHTML.trim();
+      it('should have help tip with "Risk Assessment" title', () => {
+        const helpTipTitle = compiled.querySelector('app-help-tip .title');
+        const helpTipTitleContent = helpTipTitle?.innerHTML.trim();
 
-        expect(callout).toBeTruthy();
-        expect(calloutContent).toContain('The device is now being tested');
+        expect(helpTipTitleContent).toContain('Risk Assessment');
       });
 
-      it('should have callout component with "Risk Assessment" link', () => {
-        const callout = compiled.querySelector('app-callout');
-        const calloutLinkEl = compiled.querySelector(
-          '.callout-action-link'
+      it('should have help tip with "Create risk profile" link', () => {
+        const helpTipLinkEl = compiled.querySelector(
+          '.tip-action-link'
         ) as HTMLAnchorElement;
-        const calloutLinkContent = calloutLinkEl.innerHTML.trim();
+        const helpTipLinkContent = helpTipLinkEl.innerHTML.trim();
 
-        expect(callout).toBeTruthy();
-        expect(calloutLinkContent).toContain('Create risk Assessment');
+        expect(helpTipLinkEl).toBeTruthy();
+        expect(helpTipLinkContent).toContain(HelpTips.step4.action);
       });
     });
+  });
 
+  describe('Callout component visibility', () => {
     describe('error', () => {
       describe('with settingMissedError with one port is missed', () => {
         beforeEach(() => {

modules/ui/src/app/app.component.ts

@@ -135,6 +135,7 @@ export class AppComponent implements AfterViewInit {
   settingTipTarget!: HTMLElement;
   deviceTipTarget!: HTMLElement;
   testingTipTarget!: HTMLElement;
+  riskAssessmentTipTarget!: HTMLElement;
   isClosedTip = false;
 
   @HostListener('mousedown')
@@ -239,6 +240,10 @@ export class AppComponent implements AfterViewInit {
       '.app-sidebar-button.app-sidebar-button-testrun'
     ) as HTMLElement;
 
+    this.riskAssessmentTipTarget = document.querySelector(
+      '.app-sidebar-button.app-sidebar-button-risk-assessment'
+    ) as HTMLElement;
+
     this.viewModel$
       .pipe(
         filter(({ isStatusLoaded }) => isStatusLoaded === true),

modules/ui/src/app/components/help-tip/help-tip.component.html

@@ -18,8 +18,9 @@
   aria-label="Help tips"
   class="tip"
   [style.top.px]="tipPosition.top"
-  [style.left.px]="tipPosition.left">
-  <div class="tip-container" *ngIf="data()" [ngClass]="data()?.arrowPosition">
+  [style.left.px]="tipPosition.left"
+  [ngClass]="data()?.arrowPosition">
+  <div class="tip-container" *ngIf="data()">
     <div class="heading">
       <p class="title">{{ data()?.title }}</p>
       <button

modules/ui/src/app/components/help-tip/help-tip.component.scss

@@ -23,6 +23,10 @@
   z-index: 100;
   width: 256px;
   box-sizing: border-box;
+
+  &.left {
+    width: 276px;
+  }
 }
 
 .tip-container {
@@ -50,12 +54,12 @@
   transform: rotate(45deg) translate(-50%);
 }
 
-.tip-container.top::before {
+.top .tip-container::before {
   top: 0;
   left: 50%;
 }
 
-.tip-container.left::before {
+.left .tip-container::before {
   top: 50%;
   left: 0;
 }

modules/ui/src/app/components/help-tip/help-tip.component.spec.ts

@@ -64,9 +64,9 @@ describe('HelpTipComponent', () => {
   });
 
   it('should have class provided from arrowPosition', () => {
-    const tipContainerEl = compiled.querySelector('.tip-container');
+    const tipEl = compiled.querySelector('.tip');
 
-    expect(tipContainerEl?.classList).toContain('top');
+    expect(tipEl?.classList).toContain('top');
   });
 
   describe('#updateTipPosition', () => {

modules/ui/src/app/model/tip-config.ts

@@ -45,4 +45,12 @@ export const HelpTips = {
     position: 'right',
     arrowPosition: 'left',
   } as TipConfig,
+  step4: {
+    title: 'Risk Assessment:',
+    content:
+      'Whilst testing is in progress, create a risk profile for the device.',
+    action: 'Create risk profile',
+    position: 'right',
+    arrowPosition: 'left',
+  } as TipConfig,
 };