From 55962a23090c88d8e668db7ddb9e78d6ab6aed48 Mon Sep 17 00:00:00 2001
From: kurilova <sonnycactus@gmail.com>
Date: Wed, 8 May 2024 11:24:10 +0000
Subject: [PATCH 1/2] Adds focus on next or close button when certificate is
 deleted

---
 .../certificates/certificates.component.html  |  3 ++
 .../certificates.component.spec.ts            | 28 +++++++++++++++++++
 .../certificates/certificates.component.ts    | 19 +++++++++++++
 .../certificates/certificates.store.spec.ts   | 11 ++++++++
 .../pages/certificates/certificates.store.ts  | 11 ++++++++
 5 files changed, 72 insertions(+)

diff --git a/modules/ui/src/app/pages/certificates/certificates.component.html b/modules/ui/src/app/pages/certificates/certificates.component.html
index 23781d330..d75f115b4 100644
--- a/modules/ui/src/app/pages/certificates/certificates.component.html
+++ b/modules/ui/src/app/pages/certificates/certificates.component.html
@@ -31,6 +31,9 @@ <h2 class="certificates-drawer-header-title">Certificates</h2>
     <section class="content-certificates">
       <app-certificate-item
         *ngFor="let certificate of vm.certificates"
+        [class.certificate-selected]="
+          certificate.name === vm.selectedCertificate
+        "
         [certificate]="certificate"
         (deleteButtonClicked)="
           deleteCertificate($event)
diff --git a/modules/ui/src/app/pages/certificates/certificates.component.spec.ts b/modules/ui/src/app/pages/certificates/certificates.component.spec.ts
index abe237775..c050f28e3 100644
--- a/modules/ui/src/app/pages/certificates/certificates.component.spec.ts
+++ b/modules/ui/src/app/pages/certificates/certificates.component.spec.ts
@@ -132,5 +132,33 @@ describe('CertificatesComponent', () => {
         openSpy.calls.reset();
       }));
     });
+
+    describe('#focusNextButton', () => {
+      it('should focus next active element if exist', () => {
+        const row = window.document.querySelector(
+          'app-certificate-item'
+        ) as HTMLElement;
+        row.classList.add('certificate-selected');
+        const nextButton = window.document.querySelector(
+          '.certificate-selected + app-certificate-item .certificate-item-delete'
+        ) as HTMLButtonElement;
+        const buttonFocusSpy = spyOn(nextButton, 'focus');
+
+        component.focusNextButton();
+
+        expect(buttonFocusSpy).toHaveBeenCalled();
+      });
+
+      it('should focus navigation button if next active element does not exist', () => {
+        const nextButton = window.document.querySelector(
+          '.certificates-drawer-content .close-button'
+        ) as HTMLButtonElement;
+        const buttonFocusSpy = spyOn(nextButton, 'focus');
+
+        component.focusNextButton();
+
+        expect(buttonFocusSpy).toHaveBeenCalled();
+      });
+    });
   });
 });
diff --git a/modules/ui/src/app/pages/certificates/certificates.component.ts b/modules/ui/src/app/pages/certificates/certificates.component.ts
index b29f17014..0e0b805b1 100644
--- a/modules/ui/src/app/pages/certificates/certificates.component.ts
+++ b/modules/ui/src/app/pages/certificates/certificates.component.ts
@@ -68,6 +68,8 @@ export class CertificatesComponent implements OnDestroy {
   }
 
   deleteCertificate(name: string) {
+    this.store.selectCertificate(name);
+
     const dialogRef = this.dialog.open(DeleteFormComponent, {
       ariaLabel: 'Delete certificate',
       data: {
@@ -86,7 +88,24 @@ export class CertificatesComponent implements OnDestroy {
       .subscribe(deleteCertificate => {
         if (deleteCertificate) {
           this.store.deleteCertificate(name);
+          this.focusNextButton();
         }
       });
   }
+
+  focusNextButton() {
+    // Try to focus next interactive element, if exists
+    const next = window.document.querySelector(
+      '.certificate-selected + app-certificate-item .certificate-item-delete'
+    ) as HTMLButtonElement;
+    if (next) {
+      next.focus();
+    } else {
+      // If next interactive element doest not exist, close button will be focused
+      const menuButton = window.document.querySelector(
+        '.certificates-drawer-content .close-button'
+      ) as HTMLButtonElement;
+      menuButton?.focus();
+    }
+  }
 }
diff --git a/modules/ui/src/app/pages/certificates/certificates.store.spec.ts b/modules/ui/src/app/pages/certificates/certificates.store.spec.ts
index bf7415b0b..f42b9e928 100644
--- a/modules/ui/src/app/pages/certificates/certificates.store.spec.ts
+++ b/modules/ui/src/app/pages/certificates/certificates.store.spec.ts
@@ -68,6 +68,16 @@ describe('CertificatesStore', () => {
 
       certificateStore.updateCertificates([certificate]);
     });
+
+    it('should update selectedCertificate', (done: DoneFn) => {
+      const certificate = 'test';
+      certificateStore.viewModel$.pipe(skip(1), take(1)).subscribe(store => {
+        expect(store.selectedCertificate).toEqual(certificate);
+        done();
+      });
+
+      certificateStore.selectCertificate(certificate);
+    });
   });
 
   describe('selectors', () => {
@@ -75,6 +85,7 @@ describe('CertificatesStore', () => {
       certificateStore.viewModel$.pipe(take(1)).subscribe(store => {
         expect(store).toEqual({
           certificates: [],
+          selectedCertificate: '',
         });
         done();
       });
diff --git a/modules/ui/src/app/pages/certificates/certificates.store.ts b/modules/ui/src/app/pages/certificates/certificates.store.ts
index 4cc0830ff..4748ed05d 100644
--- a/modules/ui/src/app/pages/certificates/certificates.store.ts
+++ b/modules/ui/src/app/pages/certificates/certificates.store.ts
@@ -25,13 +25,18 @@ import { DatePipe } from '@angular/common';
 
 export interface AppComponentState {
   certificates: Certificate[];
+  selectedCertificate: string;
 }
 @Injectable()
 export class CertificatesStore extends ComponentStore<AppComponentState> {
   private certificates$ = this.select(state => state.certificates);
+  private selectedCertificate$ = this.select(
+    state => state.selectedCertificate
+  );
 
   viewModel$ = this.select({
     certificates: this.certificates$,
+    selectedCertificate: this.selectedCertificate$,
   });
 
   updateCertificates = this.updater((state, certificates: Certificate[]) => ({
@@ -39,6 +44,11 @@ export class CertificatesStore extends ComponentStore<AppComponentState> {
     certificates,
   }));
 
+  selectCertificate = this.updater((state, selectedCertificate: string) => ({
+    ...state,
+    selectedCertificate,
+  }));
+
   getCertificates = this.effect(trigger$ => {
     return trigger$.pipe(
       exhaustMap(() => {
@@ -118,6 +128,7 @@ export class CertificatesStore extends ComponentStore<AppComponentState> {
   ) {
     super({
       certificates: [],
+      selectedCertificate: '',
     });
   }
 }

From fa4724bfa5ed9dd1632279e9ad78f2371a46990c Mon Sep 17 00:00:00 2001
From: kurilova <sonnycactus@gmail.com>
Date: Wed, 8 May 2024 11:44:58 +0000
Subject: [PATCH 2/2] Fix tests

---
 .../certificates/certificates.component.spec.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/modules/ui/src/app/pages/certificates/certificates.component.spec.ts b/modules/ui/src/app/pages/certificates/certificates.component.spec.ts
index c050f28e3..16c5b32dc 100644
--- a/modules/ui/src/app/pages/certificates/certificates.component.spec.ts
+++ b/modules/ui/src/app/pages/certificates/certificates.component.spec.ts
@@ -13,7 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  TestBed,
+} from '@angular/core/testing';
 
 import { CertificatesComponent } from './certificates.component';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
@@ -134,7 +139,7 @@ describe('CertificatesComponent', () => {
     });
 
     describe('#focusNextButton', () => {
-      it('should focus next active element if exist', () => {
+      it('should focus next active element if exist', fakeAsync(() => {
         const row = window.document.querySelector(
           'app-certificate-item'
         ) as HTMLElement;
@@ -147,9 +152,10 @@ describe('CertificatesComponent', () => {
         component.focusNextButton();
 
         expect(buttonFocusSpy).toHaveBeenCalled();
-      });
+        flush();
+      }));
 
-      it('should focus navigation button if next active element does not exist', () => {
+      it('should focus navigation button if next active element does not exist', fakeAsync(() => {
         const nextButton = window.document.querySelector(
           '.certificates-drawer-content .close-button'
         ) as HTMLButtonElement;
@@ -158,7 +164,8 @@ describe('CertificatesComponent', () => {
         component.focusNextButton();
 
         expect(buttonFocusSpy).toHaveBeenCalled();
-      });
+        flush();
+      }));
     });
   });
 });