From a22eed2414880fba2078a4ba1bc805716d002ab4 Mon Sep 17 00:00:00 2001 From: Volha Mardvilka Date: Tue, 4 Jun 2024 11:24:05 +0000 Subject: [PATCH] 341966862: (feat) display info about risk assessment in welcome modal --- modules/ui/src/app/app.component.html | 6 +- modules/ui/src/app/app.component.spec.ts | 2 + .../consent-dialog.component.html | 37 ++++++++-- .../consent-dialog.component.scss | 6 +- .../consent-dialog.component.spec.ts | 71 ++++++++++++++++--- .../consent-dialog.component.ts | 15 ++-- .../components/version/version.component.ts | 17 +++-- modules/ui/src/app/model/version.ts | 5 ++ 8 files changed, 128 insertions(+), 31 deletions(-) diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index 10ec58c4e..8a1866102 100644 --- a/modules/ui/src/app/app.component.html +++ b/modules/ui/src/app/app.component.html @@ -68,7 +68,11 @@ + [hasRiskProfiles]="vm.hasRiskProfiles" + (consentShownEvent)="consentShown()" + (navigateToRiskAssessmentEvent)=" + navigateToRiskAssessment() + "> diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts index c46ebb0fd..0c4153e72 100644 --- a/modules/ui/src/app/app.component.spec.ts +++ b/modules/ui/src/app/app.component.spec.ts @@ -786,5 +786,7 @@ class FakeShutdownAppComponent { }) class FakeVersionComponent { @Input() consentShown!: boolean; + @Input() hasRiskProfiles!: boolean; @Output() consentShownEvent = new EventEmitter(); + @Output() navigateToRiskAssessmentEvent = new EventEmitter(); } diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html index 1fed20122..92bb3cb08 100644 --- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html +++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html @@ -53,21 +53,23 @@

Welcome to Testrun!

-
+
- Software is outdated! -

+ Software is outdated! +

You are currently using an outdated software ({{ - data.installed_version + data.version.installed_version }}).
- The latest version number is {{ data.latest_version }}{{ data.version.latest_version }}. Please consider to update or continue at your own risk.

-

+

Welcome to Testrun!

+
+ + Risk Assessment feature added! +

+ Now you can answer a short questionnaire, create a security profile and + attach it to the Testrun result to complete a device verification. Also, + it will speed up the process a lot! +

+

+ +

+ +
Testrun uses Google Analytics to learn about how our users use the diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss index 065dde6a3..b9db2c709 100644 --- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss +++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss @@ -66,11 +66,11 @@ } } -.consent-update { - .consent-update-title { +.section-container { + .section-title { font-size: 18px; } - .download-link-container { + .section-action-container { text-align: end; margin-bottom: 0; } diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts index eb232dd2a..c538554f2 100644 --- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts +++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts @@ -46,7 +46,7 @@ describe('ConsentDialogComponent', () => { }); fixture = TestBed.createComponent(ConsentDialogComponent); component = fixture.componentInstance; - component.data = NEW_VERSION; + component.data = { version: NEW_VERSION, hasRiskProfiles: false }; component.optOut = false; fixture.detectChanges(); compiled = fixture.nativeElement as HTMLElement; @@ -56,30 +56,32 @@ describe('ConsentDialogComponent', () => { expect(component).toBeTruthy(); }); - it('should close dialog with true when checkbox unchecked on "confirm" click', () => { + it('should close dialog with grant as true when checkbox unchecked on "confirm" click', () => { const closeSpy = spyOn(component.dialogRef, 'close'); const confirmButton = compiled.querySelector( '.confirm-button' ) as HTMLButtonElement; + const dialogRes = { grant: true, isNavigateToRiskAssessment: undefined }; confirmButton?.click(); - expect(closeSpy).toHaveBeenCalledWith(true); + expect(closeSpy).toHaveBeenCalledWith(dialogRes); closeSpy.calls.reset(); }); - it('should close dialog with false when checkbox unchecked on "confirm" click', () => { + it('should close dialog with grant as false when checkbox unchecked on "confirm" click', () => { component.optOut = true; fixture.detectChanges(); const closeSpy = spyOn(component.dialogRef, 'close'); const confirmButton = compiled.querySelector( '.confirm-button' ) as HTMLButtonElement; + const dialogRes = { grant: false, isNavigateToRiskAssessment: undefined }; confirmButton?.click(); - expect(closeSpy).toHaveBeenCalledWith(false); + expect(closeSpy).toHaveBeenCalledWith(dialogRes); closeSpy.calls.reset(); }); @@ -97,13 +99,13 @@ describe('ConsentDialogComponent', () => { describe('with new version available', () => { beforeEach(() => { - component.data = NEW_VERSION; + component.data = { version: NEW_VERSION, hasRiskProfiles: false }; fixture.detectChanges(); }); - it('should has content', () => { + it('should has consent content', () => { const content = compiled.querySelector( - '.consent-update-content' + '.section-content.consent' ) as HTMLElement; const innerContent = content.innerHTML.trim(); @@ -120,13 +122,60 @@ describe('ConsentDialogComponent', () => { describe('with no new version available', () => { beforeEach(() => { - component.data = VERSION; + component.data = { version: VERSION, hasRiskProfiles: false }; fixture.detectChanges(); }); - it('should has content', () => { + it('should not has consent content', () => { const content = compiled.querySelector( - '.consent-update-content' + '.section-content.consent' + ) as HTMLElement; + + expect(content).toBeNull(); + }); + }); + + describe('with no risk assessment profiles', () => { + beforeEach(() => { + component.data = { version: VERSION, hasRiskProfiles: false }; + fixture.detectChanges(); + }); + + it('should has risk-assessment content', () => { + const content = compiled.querySelector( + '.section-content.risk-assessment' + ) as HTMLElement; + + const innerContent = content.innerHTML.trim(); + expect(innerContent).toContain( + 'Now you can answer a short questionnaire' + ); + }); + + it('should close dialog with isNavigateToRiskAssessment as true when click "confirm"', () => { + const closeSpy = spyOn(component.dialogRef, 'close'); + const riskAssessmentBtn = compiled.querySelector( + '.risk-assessment-button' + ) as HTMLButtonElement; + const dialogRes = { grant: true, isNavigateToRiskAssessment: true }; + + riskAssessmentBtn?.click(); + + expect(closeSpy).toHaveBeenCalledWith(dialogRes); + + closeSpy.calls.reset(); + }); + }); + + describe('with risk assessment profiles', () => { + beforeEach(() => { + component.data = { version: VERSION, hasRiskProfiles: true }; + fixture.detectChanges(); + }); + + it('should not has risk-assessment content', () => { + const content = compiled.querySelector( + '.section-content.risk-assessment' ) as HTMLElement; expect(content).toBeNull(); diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts index 6eefcd0c6..8b27a8961 100644 --- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts +++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts @@ -19,7 +19,7 @@ import { MatDialogModule, MatDialogRef, } from '@angular/material/dialog'; -import { Version } from '../../../model/version'; +import { ConsentDialogResult, Version } from '../../../model/version'; import { MatButtonModule } from '@angular/material/button'; import { CalloutComponent } from '../../callout/callout.component'; import { CalloutType } from '../../../model/callout-type'; @@ -27,7 +27,10 @@ import { NgIf } from '@angular/common'; import { MatCheckbox } from '@angular/material/checkbox'; import { FormsModule } from '@angular/forms'; -type DialogData = Version; +type DialogData = { + version: Version; + hasRiskProfiles: boolean; +}; @Component({ selector: 'app-consent-dialog', @@ -51,8 +54,12 @@ export class ConsentDialogComponent { @Inject(MAT_DIALOG_DATA) public data: DialogData ) {} - confirm(optOut: boolean) { + confirm(optOut: boolean, isNavigateToRiskAssessment?: boolean) { // dialog should be closed with opposite value to grant or deny access to GA - this.dialogRef.close(!optOut); + const dialogResult: ConsentDialogResult = { + grant: !optOut, + isNavigateToRiskAssessment, + }; + this.dialogRef.close(dialogResult); } } diff --git a/modules/ui/src/app/components/version/version.component.ts b/modules/ui/src/app/components/version/version.component.ts index 7693ecfcf..186c3bcf6 100644 --- a/modules/ui/src/app/components/version/version.component.ts +++ b/modules/ui/src/app/components/version/version.component.ts @@ -26,7 +26,7 @@ import { TestRunService, UNAVAILABLE_VERSION, } from '../../services/test-run.service'; -import { Version } from '../../model/version'; +import { ConsentDialogResult, Version } from '../../model/version'; import { MatButtonModule } from '@angular/material/button'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { tap } from 'rxjs/internal/operators/tap'; @@ -48,7 +48,9 @@ declare const gtag: Function; }) export class VersionComponent implements OnInit, OnDestroy { @Input() consentShown!: boolean; + @Input() hasRiskProfiles!: boolean; @Output() consentShownEvent = new EventEmitter(); + @Output() navigateToRiskAssessmentEvent = new EventEmitter(); version$!: Observable; private destroy$: Subject = new Subject(); @@ -84,9 +86,10 @@ export class VersionComponent implements OnInit, OnDestroy { } openConsentDialog(version: Version) { + const dialogData = { version, hasRiskProfiles: this.hasRiskProfiles }; const dialogRef = this.dialog.open(ConsentDialogComponent, { ariaLabel: 'Welcome to Testrun modal window', - data: version, + data: dialogData, autoFocus: true, hasBackdrop: true, disableClose: true, @@ -96,13 +99,17 @@ export class VersionComponent implements OnInit, OnDestroy { dialogRef ?.afterClosed() .pipe(takeUntil(this.destroy$)) - .subscribe((grant: boolean) => { - if (grant === null) { + .subscribe((dialogResult: ConsentDialogResult) => { + if (dialogResult.grant === null) { return; } gtag('consent', 'update', { - analytics_storage: grant ? 'granted' : 'denied', + analytics_storage: dialogResult.grant ? 'granted' : 'denied', }); + + if (dialogResult.isNavigateToRiskAssessment) { + this.navigateToRiskAssessmentEvent.emit(); + } }); } diff --git a/modules/ui/src/app/model/version.ts b/modules/ui/src/app/model/version.ts index 22064bc05..21ec6ee38 100644 --- a/modules/ui/src/app/model/version.ts +++ b/modules/ui/src/app/model/version.ts @@ -20,3 +20,8 @@ export interface Version { latest_version: string; latest_version_url: string; } + +export interface ConsentDialogResult { + grant: boolean; + isNavigateToRiskAssessment?: boolean; +}