diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index b6262e58d..b1561c516 100644 --- a/modules/ui/src/app/app.component.html +++ b/modules/ui/src/app/app.component.html @@ -123,16 +123,9 @@

Testrun

*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, } "> @@ -187,16 +180,9 @@

Testrun

+ let-calloutState="calloutState">
Testrun >Please update your Devices to continue testing. - - The device is now being tested. Why not take the time to complete the - device Risk Assessment questionnaire? -
@@ -297,5 +267,19 @@

Testrun

(onCLoseTip)="onCLoseTip($event)" (onAction)="navigateToRuntime()"> + + diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts index c9ecd93ba..9bdb75f2f 100644 --- a/modules/ui/src/app/app.component.spec.ts +++ b/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(() => { diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts index 27a22cd5d..f5e44136b 100644 --- a/modules/ui/src/app/app.component.ts +++ b/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), diff --git a/modules/ui/src/app/components/help-tip/help-tip.component.html b/modules/ui/src/app/components/help-tip/help-tip.component.html index 8e2122902..53c8bd0dc 100644 --- a/modules/ui/src/app/components/help-tip/help-tip.component.html +++ b/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"> -
+ [style.left.px]="tipPosition.left" + [ngClass]="data()?.arrowPosition"> +

{{ data()?.title }}