Adds Certificates page

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

@@ -19,13 +19,32 @@ import { DevicesComponent } from './pages/devices/devices.component';
 import { CanDeactivateGuard } from './guards/can-deactivate.guard';
 import { TestrunComponent } from './pages/testrun/testrun.component';
 import { RiskAssessmentComponent } from './pages/risk-assessment/risk-assessment.component';
+import { CertificatesComponent } from './pages/certificates/certificates.component';
 import { SettingsComponent } from './pages/settings/settings.component';
+import { GeneralSettingsComponent } from './pages/general-settings/general-settings.component';
 
 export const routes: Routes = [
   {
     path: 'settings',
     component: SettingsComponent,
     title: 'Testrun - Settings',
+    children: [
+      {
+        path: '',
+        redirectTo: 'general',
+        pathMatch: 'full',
+      },
+      {
+        path: 'certificates',
+        component: CertificatesComponent,
+        title: 'Testrun - Certificates',
+      },
+      {
+        path: 'general',
+        component: GeneralSettingsComponent,
+        title: 'Testrun - General Settings',
+      },
+    ],
   },
   {
     path: 'testing',

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

@@ -82,16 +82,6 @@ <h1 class="main-heading">Testrun</h1>
         </a>
         <span class="spacer"></span>
         <div class="app-bar-buttons">
-          <button
-            class="app-toolbar-button app-toolbar-button-certificates"
-            mat-icon-button
-            aria-label="Certificates"
-            matTooltip="Certificates"
-            (click)="openCert()">
-            <mat-icon class="material-symbols-outlined filled"
-              >workspace_premium</mat-icon
-            >
-          </button>
           <button
             #toggleSettingsBtn
             class="app-toolbar-button app-toolbar-button-general-settings"
@@ -285,15 +275,6 @@ <h1 class="main-heading">Testrun</h1>
     </app-general-settings>
   </mat-drawer>
 
-  <mat-drawer
-    #certDrawer
-    mode="over"
-    position="end"
-    autoFocus="#setting-panel-close-button"
-    class="settings-drawer">
-    <app-certificates
-      (closeCertificatedEvent)="closeCertificates()"></app-certificates>
-  </mat-drawer>
   <app-testing-complete
     *ngIf="vm.isTestingComplete"
     [data]="vm.testrunStatus"

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

@@ -62,7 +62,6 @@ import {
   selectSystemStatus,
 } from './store/selectors';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
-import { CertificatesComponent } from './pages/certificates/certificates.component';
 import { of } from 'rxjs';
 import { WINDOW } from './providers/window.provider';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
@@ -119,11 +118,9 @@ describe('AppComponent', () => {
       'getTestModules',
       'testrunInProgress',
       'fetchProfiles',
-      'fetchCertificates',
       'getHistory',
     ]);
 
-    mockService.fetchCertificates.and.returnValue(of([]));
     mockFocusManagerService = jasmine.createSpyObj('mockFocusManagerService', [
       'focusFirstElementInContainer',
     ]);
@@ -144,7 +141,6 @@ describe('AppComponent', () => {
         BypassComponent,
         CalloutComponent,
         MatIconTestingModule,
-        CertificatesComponent,
         WifiComponent,
         MatTooltipModule,
         FakeSpinnerComponent,
@@ -793,28 +789,6 @@ describe('AppComponent', () => {
     expect(spyToggle).toHaveBeenCalledTimes(0);
   });
 
-  it('should render certificates button', () => {
-    const generalSettingsButton = compiled.querySelector(
-      '.app-toolbar-button-certificates'
-    );
-
-    expect(generalSettingsButton).toBeDefined();
-  });
-
-  it('should call certificates open on click certificates button', () => {
-    fixture.detectChanges();
-
-    const settingsBtn = compiled.querySelector(
-      '.app-toolbar-button-certificates'
-    ) as HTMLButtonElement;
-    const certDrawer = component.certDrawer();
-    spyOn(certDrawer, 'open');
-
-    settingsBtn.click();
-
-    expect(certDrawer.open).toHaveBeenCalledTimes(1);
-  });
-
   it('should set focus to first focusable elem when close callout', fakeAsync(() => {
     component.calloutClosed('mockId');
     tick(100);

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

@@ -41,7 +41,6 @@ import { timer } from 'rxjs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { CertificatesComponent } from './pages/certificates/certificates.component';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TestingCompleteComponent } from './components/testing-complete/testing-complete.component';
@@ -89,7 +88,6 @@ const QUALIFICATION_URL = '/assets/icons/qualification.svg';
     CalloutComponent,
     CdkTrapFocus,
     ShutdownAppComponent,
-    CertificatesComponent,
     WifiComponent,
     TestingCompleteComponent,
     GeneralSettingsComponent,
@@ -115,7 +113,6 @@ export class AppComponent implements AfterViewInit {
   private openedSettingFromToggleBtn = true;
 
   readonly settingsDrawer = viewChild.required<MatDrawer>('settingsDrawer');
-  readonly certDrawer = viewChild.required<MatDrawer>('certDrawer');
   readonly toggleSettingsBtn =
     viewChild.required<HTMLButtonElement>('toggleSettingsBtn');
   readonly settings = viewChild.required<GeneralSettingsComponent>('settings');
@@ -209,10 +206,6 @@ export class AppComponent implements AfterViewInit {
     });
   }
 
-  async closeCertificates(): Promise<void> {
-    await this.certDrawer().close();
-  }
-
   async closeSetting(hasDevices: boolean): Promise<void> {
     return await this.settingsDrawer()
       .close()
@@ -242,11 +235,6 @@ export class AppComponent implements AfterViewInit {
       await this.liveAnnouncer.announce('The settings panel is disabled');
     }
   }
-
-  async openCert() {
-    await this.certDrawer().open();
-  }
-
   consentShown() {
     this.appStore.setContent();
   }

modules/ui/src/app/components/empty-message/empty-message.component.html

@@ -0,0 +1,7 @@
+<div class="empty-message">
+  <div class="empty-message-img">
+    <img [src]="image()" alt="empty message image" />
+  </div>
+  <span class="empty-message-header">{{ header() }}</span>
+  <span class="empty-message-main">{{ message() }}</span>
+</div>

modules/ui/src/app/components/empty-message/empty-message.component.scss

@@ -0,0 +1,30 @@
+@use 'variables';
+@use 'colors';
+
+.empty-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.empty-message-header {
+  font-weight: 400;
+  line-height: 28px;
+  font-size: 22px;
+  color: colors.$on-surface;
+}
+
+.empty-message-main {
+  font-family: variables.$font-secondary;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.1px;
+  color: colors.$on-surface-variant;
+}
+
+.empty-message-img {
+  width: 293px;
+  height: 154px;
+}

modules/ui/src/app/components/empty-message/empty-message.component.spec.ts

@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmptyMessageComponent } from './empty-message.component';
+
+describe('EmptyMessageComponent', () => {
+  let compiled: HTMLElement;
+  let component: EmptyMessageComponent;
+  let fixture: ComponentFixture<EmptyMessageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EmptyMessageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EmptyMessageComponent);
+    component = fixture.componentInstance;
+    compiled = fixture.nativeElement as HTMLElement;
+    fixture.componentRef.setInput('image', 'image.csv');
+    fixture.componentRef.setInput('header', 'header text');
+    fixture.componentRef.setInput('message', 'message text');
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have image', () => {
+    const image = compiled.querySelector('img') as HTMLImageElement;
+
+    expect(image?.src).toContain('image.csv');
+  });
+
+  it('should have header', () => {
+    const text = compiled.querySelector('.empty-message-header');
+
+    expect(text?.textContent?.trim()).toEqual('header text');
+  });
+
+  it('should have message', () => {
+    const text = compiled.querySelector('.empty-message-main');
+
+    expect(text?.textContent?.trim()).toEqual('message text');
+  });
+});

modules/ui/src/app/components/empty-message/empty-message.component.ts

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-empty-message',
+  imports: [],
+  templateUrl: './empty-message.component.html',
+  styleUrl: './empty-message.component.scss',
+})
+export class EmptyMessageComponent {
+  image = input<string>();
+  header = input<string>();
+  message = input<string>();
+}

modules/ui/src/app/model/certificate.ts

@@ -15,7 +15,7 @@
  */
 export interface Certificate {
   name: string;
-  status?: string;
+  status?: CertificateStatus;
   organisation?: string;
   expires?: string;
   uploading?: boolean;

modules/ui/src/app/model/routes.ts

@@ -20,4 +20,6 @@ export enum Routes {
   Testing = '/testing',
   Reports = '/reports',
   RiskAssessment = '/risk-assessment',
+  Certificates = 'certificates',
+  General = 'general',
 }