The focus is not moved to the snackbar with certificate validation ru…

…le (#470) * Adds class to fix focus flow * Changes the delay according to string length
google · May 23, 2024 · 1ef0088 · 1ef0088
1 parent 0dd13d7
commit 1ef0088
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/modules/ui/src/app/app.store.spec.ts b/modules/ui/src/app/app.store.spec.ts
@@ -93,6 +93,7 @@ describe('AppStore', () => {
     store.overrideSelector(selectMenuOpened, true);
     store.overrideSelector(selectInterfaces, {});
     store.overrideSelector(selectError, null);
+    store.overrideSelector(selectStatus, null);
 
     spyOn(store, 'dispatch').and.callFake(() => {});
   });

diff --git a/modules/ui/src/app/pages/certificates/certificates.store.spec.ts b/modules/ui/src/app/pages/certificates/certificates.store.spec.ts
@@ -143,7 +143,8 @@ describe('CertificatesStore', () => {
           expect(notificationServiceMock.notify).toHaveBeenCalledWith(
             'Certificate successfully added.\niot.bms.google.com by Google, Inc. valid until 01 Sep 2024',
             0,
-            'certificate-notification'
+            'certificate-notification',
+            10000
           );
         });
       });
@@ -155,7 +156,8 @@ describe('CertificatesStore', () => {
           expect(notificationServiceMock.notify).toHaveBeenCalledWith(
             'The file name should be alphanumeric, symbols  -_. are allowed.\nFile extension must be .cert, .crt, .pem, .cer.\nMax name length is 24 characters.\nFile size should be a max of 4KB',
             0,
-            'certificate-notification'
+            'certificate-notification',
+            19000
           );
         });
       });

diff --git a/modules/ui/src/app/pages/certificates/certificates.store.ts b/modules/ui/src/app/pages/certificates/certificates.store.ts
@@ -28,6 +28,8 @@ export interface AppComponentState {
   certificates: Certificate[];
   selectedCertificate: string;
 }
+
+const SYMBOLS_PER_SECOND = 9.5;
 @Injectable()
 export class CertificatesStore extends ComponentStore<AppComponentState> {
   private certificates$ = this.select(state => state.certificates);
@@ -128,7 +130,12 @@ export class CertificatesStore extends ComponentStore<AppComponentState> {
   });
 
   private notify(message: string) {
-    this.notificationService.notify(message, 0, 'certificate-notification');
+    this.notificationService.notify(
+      message,
+      0,
+      'certificate-notification',
+      Math.ceil(message.length / SYMBOLS_PER_SECOND) * 1000
+    );
   }
 
   private removeCertificate(name: string, current: Certificate[]) {

diff --git a/modules/ui/src/app/services/notification.service.spec.ts b/modules/ui/src/app/services/notification.service.spec.ts
@@ -63,7 +63,7 @@ describe('NotificationService', () => {
 
       expect(openSpy).toHaveBeenCalledWith('something good happened', 'OK', {
         horizontalPosition: 'center',
-        panelClass: 'test-run-notification',
+        panelClass: ['test-run-notification'],
         duration: 0,
         politeness: 'assertive',
       });
@@ -79,7 +79,7 @@ describe('NotificationService', () => {
 
       expect(openSpy).toHaveBeenCalledWith('something good happened', 'OK', {
         horizontalPosition: 'center',
-        panelClass: 'test-run-notification',
+        panelClass: ['test-run-notification'],
         duration: 15000,
         politeness: 'assertive',
       });

diff --git a/modules/ui/src/app/services/notification.service.ts b/modules/ui/src/app/services/notification.service.ts
@@ -45,17 +45,21 @@ export class NotificationService {
     private focusManagerService: FocusManagerService
   ) {}
 
-  notify(message: string, duration = 0, panelClass = 'test-run-notification') {
+  notify(message: string, duration = 0, panelClass = '', timeout = TIMEOUT_MS) {
+    const panelClasses = ['test-run-notification'];
+    if (panelClass) {
+      panelClasses.push(panelClass);
+    }
     this.snackBarRef = this.snackBar.open(message, 'OK', {
       horizontalPosition: 'center',
-      panelClass: panelClass,
+      panelClass: panelClasses,
       duration: duration,
       politeness: 'assertive',
     });
 
     this.snackBarRef
       .afterOpened()
-      .pipe(take(1), delay(TIMEOUT_MS))
+      .pipe(take(1), delay(timeout))
       .subscribe(() => this.setFocusToActionButton());
 
     this.snackBarRef