362959152: (feat) add testing complete modal

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

@@ -296,6 +296,10 @@ <h1 class="main-heading">Testrun</h1>
     <app-certificates
       (closeCertificatedEvent)="closeCertificates()"></app-certificates>
   </mat-drawer>
+  <app-testing-complete
+    *ngIf="vm.isTestingComplete"
+    [data]="vm.testrunStatus"
+    [profiles]="vm.riskProfiles"></app-testing-complete>
 </ng-container>
 
 <ng-template

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

@@ -61,8 +61,10 @@ import {
   selectIsAllDevicesOutdated,
   selectIsOpenStartTestrun,
   selectIsOpenWaitSnackBar,
+  selectIsTestingComplete,
   selectMenuOpened,
   selectReports,
+  selectRiskProfiles,
   selectStatus,
   selectSystemStatus,
 } from './store/selectors';
@@ -76,6 +78,8 @@ import { TestRunMqttService } from './services/test-run-mqtt.service';
 import { MOCK_ADAPTERS } from './mocks/settings.mock';
 import { WifiComponent } from './components/wifi/wifi.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { Profile } from './model/profile';
+import { TestrunStatus } from './model/testrun-status';
 
 const windowMock = {
   location: {
@@ -175,6 +179,8 @@ describe('AppComponent', () => {
             { selector: selectHasRiskProfiles, value: false },
             { selector: selectStatus, value: null },
             { selector: selectSystemStatus, value: null },
+            { selector: selectIsTestingComplete, value: false },
+            { selector: selectRiskProfiles, value: [] },
             { selector: selectIsOpenStartTestrun, value: false },
             { selector: selectIsOpenWaitSnackBar, value: false },
             { selector: selectReports, value: [] },
@@ -189,6 +195,7 @@ describe('AppComponent', () => {
         FakeSpinnerComponent,
         FakeShutdownAppComponent,
         FakeVersionComponent,
+        FakeTestingCompleteComponent,
       ],
     });
 
@@ -456,6 +463,21 @@ describe('AppComponent', () => {
     expect(internet).toBeTruthy();
   });
 
+  describe('Testing complete', () => {
+    beforeEach(() => {
+      store.overrideSelector(selectIsTestingComplete, true);
+      fixture.detectChanges();
+    });
+
+    it('should have testing complete component', () => {
+      const testingCompleteComp = compiled.querySelector(
+        'app-testing-complete'
+      );
+
+      expect(testingCompleteComp).toBeTruthy();
+    });
+  });
+
   describe('Callout component visibility', () => {
     describe('with no connection settings', () => {
       beforeEach(() => {
@@ -867,3 +889,12 @@ class FakeVersionComponent {
   @Input() consentShown!: boolean;
   @Output() consentShownEvent = new EventEmitter<void>();
 }
+
+@Component({
+  selector: 'app-testing-complete',
+  template: '<div></div>',
+})
+class FakeTestingCompleteComponent {
+  @Input() profiles: Profile[] = [];
+  @Input() data!: TestrunStatus | null;
+}

modules/ui/src/app/app.module.ts

@@ -50,6 +50,7 @@ import { WindowProvider } from './providers/window.provider';
 import { CertificatesComponent } from './pages/certificates/certificates.component';
 import { LOADER_TIMEOUT_CONFIG_TOKEN } from './services/loaderConfig';
 import { WifiComponent } from './components/wifi/wifi.component';
+import { TestingCompleteComponent } from './components/testing-complete/testing-complete.component';
 
 import { MqttModule, IMqttServiceOptions } from 'ngx-mqtt';
 import { DynamicTopDirective } from './components/callout/dynamic-top.directive';
@@ -91,6 +92,7 @@ export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
     MqttModule.forRoot(MQTT_SERVICE_OPTIONS),
     WifiComponent,
     DynamicTopDirective,
+    TestingCompleteComponent,
   ],
   providers: [
     WindowProvider,

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

@@ -28,9 +28,12 @@ import {
   selectInternetConnection,
   selectIsAllDevicesOutdated,
   selectIsOpenWaitSnackBar,
+  selectIsTestingComplete,
   selectMenuOpened,
   selectReports,
+  selectRiskProfiles,
   selectStatus,
+  selectSystemStatus,
   selectTestModules,
 } from './store/selectors';
 import { TestRunService } from './services/test-run.service';
@@ -106,6 +109,9 @@ describe('AppStore', () => {
             { selector: selectTestModules, value: MOCK_TEST_MODULES },
             { selector: selectInternetConnection, value: false },
             { selector: selectIsAllDevicesOutdated, value: false },
+            { selector: selectSystemStatus, value: null },
+            { selector: selectIsTestingComplete, value: false },
+            { selector: selectRiskProfiles, value: [] },
           ],
         }),
         { provide: TestRunService, useValue: mockService },
@@ -172,6 +178,9 @@ describe('AppStore', () => {
           reports: [],
           isStatusLoaded: false,
           systemStatus: null,
+          testrunStatus: null,
+          isTestingComplete: false,
+          riskProfiles: [],
           hasConnectionSettings: true,
           isMenuOpen: true,
           interfaces: {},

modules/ui/src/app/app.store.ts

@@ -26,9 +26,12 @@ import {
   selectInterfaces,
   selectInternetConnection,
   selectIsAllDevicesOutdated,
+  selectIsTestingComplete,
   selectMenuOpened,
   selectReports,
+  selectRiskProfiles,
   selectStatus,
+  selectSystemStatus,
 } from './store/selectors';
 import { Store } from '@ngrx/store';
 import { AppState } from './store/state';
@@ -53,6 +56,7 @@ import {
 import { FocusManagerService } from './services/focus-manager.service';
 import { TestRunMqttService } from './services/test-run-mqtt.service';
 import { NotificationService } from './services/notification.service';
+import { Profile } from './model/profile';
 
 export const CONSENT_SHOWN_KEY = 'CONSENT_SHOWN';
 export const CALLOUT_STATE_KEY = 'CALLOUT_STATE';
@@ -82,6 +86,12 @@ export class AppStore extends ComponentStore<AppComponentState> {
   private settingMissedError$: Observable<SettingMissedError | null> =
     this.store.select(selectError);
   systemStatus$: Observable<string | null> = this.store.select(selectStatus);
+  testrunStatus$: Observable<TestrunStatus | null> =
+    this.store.select(selectSystemStatus);
+  isTestingComplete$: Observable<boolean> = this.store.select(
+    selectIsTestingComplete
+  );
+  riskProfiles$: Observable<Profile[]> = this.store.select(selectRiskProfiles);
 
   viewModel$ = this.select({
     consentShown: this.consentShown$,
@@ -92,6 +102,9 @@ export class AppStore extends ComponentStore<AppComponentState> {
     reports: this.reports$,
     isStatusLoaded: this.isStatusLoaded$,
     systemStatus: this.systemStatus$,
+    testrunStatus: this.testrunStatus$,
+    isTestingComplete: this.isTestingComplete$,
+    riskProfiles: this.riskProfiles$,
     hasConnectionSettings: this.hasConnectionSetting$,
     isMenuOpen: this.isMenuOpen$,
     interfaces: this.interfaces$,

modules/ui/src/app/components/download-report/download-report.component.scss

@@ -21,6 +21,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  text-decoration: none;
   text-align: center;
   padding: 4px 0;
   margin: 0 4px;

modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html

@@ -13,7 +13,34 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<span class="risk-profile-select-form-title">Download ZIP file</span>
+<ng-container *ngIf="data.testrunStatus">
+  <div class="testing-result-heading">
+    <p class="testing-result-title">
+      {{ data.testrunStatus.device.manufacturer }}
+      {{ data.testrunStatus.device.model }} v{{
+        data.testrunStatus.device.firmware
+      }}
+    </p>
+    <p class="testing-result-subtitle">
+      {{ data.testrunStatus.device.test_pack }} testing has just finished
+    </p>
+  </div>
+  <div
+    class="testing-result"
+    [class]="
+      data.testrunStatus.status === StatusOfTestrun.Compliant
+        ? 'success-result'
+        : 'failed-result'
+    ">
+    <p class="testing-result-status">{{ data.testrunStatus.status }}</p>
+    <p class="testing-result-description">
+      {{ data.testrunStatus.description }}
+    </p>
+  </div>
+</ng-container>
+<span *ngIf="!data.testrunStatus" class="risk-profile-select-form-title"
+  >Download ZIP file</span
+>
 <p class="risk-profile-select-form-content" *ngIf="profiles.length === 1">
   Risk Profile is required for device verification. Please consider going to
   <a
@@ -86,23 +113,39 @@
     <mat-hint>Please choose a Risk Profile from the list</mat-hint>
   </mat-form-field>
 
-  <mat-dialog-actions align="end" class="risk-profile-select-form-actions">
-    <button
-      (click)="cancel(null)"
-      class="cancel-button"
-      color="primary"
-      mat-button
-      type="button">
-      Cancel
-    </button>
-    <button
-      (click)="cancel(select.value)"
-      class="download-button"
-      color="primary"
-      mat-flat-button
-      aria-label="Download"
-      type="button">
-      Download
-    </button>
+  <mat-dialog-actions class="risk-profile-select-form-actions">
+    <app-download-report
+      *ngIf="data.testrunStatus"
+      [data]="data.testrunStatus"
+      [href]="data.testrunStatus.report">
+      <button
+        (click)="cancel(undefined)"
+        class="download-pdf-button"
+        color="primary"
+        aria-label="Download PDF report"
+        mat-button
+        type="button">
+        Download PDF report
+      </button>
+    </app-download-report>
+    <div>
+      <button
+        (click)="cancel(undefined)"
+        class="cancel-button"
+        color="primary"
+        mat-button
+        type="button">
+        Cancel
+      </button>
+      <button
+        (click)="cancel(select.value)"
+        class="download-button"
+        color="primary"
+        mat-flat-button
+        aria-label="Download ZIP file"
+        type="button">
+        {{ data.testrunStatus ? 'Download ZIP file' : 'Download' }}
+      </button>
+    </div>
   </mat-dialog-actions>
 </div>

modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.scss

@@ -13,7 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@use '@angular/material' as mat;
 @import '../../../theming/colors';
+@import '../../../theming/variables';
 
 :host {
   display: grid;
@@ -31,6 +33,7 @@
 }
 
 .risk-profile-select-form-content {
+  margin: 14px 0 6px;
   font-family: Roboto, sans-serif;
   font-size: 14px;
   line-height: 20px;
@@ -49,8 +52,14 @@
 }
 
 .risk-profile-select-form-actions {
+  justify-content: flex-end;
   min-height: 30px;
   padding: 16px 0 0;
+  gap: 8px;
+
+  &:has(app-download-report) {
+    justify-content: space-between;
+  }
 }
 
 .profile-select {
@@ -84,3 +93,81 @@
   align-self: center;
   margin-right: 16px;
 }
+.testing-result-heading {
+  margin: 16px 0;
+}
+.testing-result-title {
+  margin: 0;
+  font-size: 32px;
+  line-height: 40px;
+  text-align: center;
+  color: $grey-900;
+}
+
+.testing-result-subtitle {
+  margin: 0;
+  font-family: $font-secondary;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.2px;
+  text-align: center;
+  color: $grey-800;
+}
+
+.testing-result {
+  display: flex;
+  height: auto;
+  min-height: 176px;
+  align-items: center;
+  gap: 8px;
+  margin: 6px 0 10px;
+  border-radius: 8px;
+}
+
+.testing-result-status {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 0;
+  min-width: 208px;
+  width: fit-content;
+  height: 100%;
+  min-height: 176px;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 16px;
+  border-radius: 8px;
+  color: $white;
+  font-size: 24px;
+  line-height: 32px;
+  background: red;
+}
+
+.testing-result-description {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 8px 24px;
+  color: $grey-800;
+  font-family: $font-secondary;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.2px;
+}
+
+.failed-result {
+  background: $red-50;
+
+  .testing-result-status {
+    background: $red-800;
+  }
+}
+
+.success-result {
+  background: $green-50;
+
+  .testing-result-status {
+    background: mat.m2-get-color-from-palette($color-accent, 700);
+  }
+}