From 6cd0d57f89e5d829b80559f6a550646802906e60 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Wed, 26 Mar 2025 15:32:36 +0000
Subject: [PATCH] Remove focus trap on certificate page; remove ng-template
 from menu; adds tooltip on + button

---
 .../side-button-menu.component.html           | 45 ++++++-------------
 .../side-button-menu.component.ts             |  9 +++-
 .../src/app/components/wifi/wifi.component.ts |  1 -
 .../certificates/certificates.component.ts    |  2 -
 4 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html
index 1a7436f5d..d7cf2c172 100644
--- a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html
+++ b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html
@@ -3,7 +3,8 @@
     class="side-add-button"
     mat-fab
     (click)="menuTrigger.openMenu()"
-    aria-label="Actions">
+    aria-label="Actions"
+    matTooltip="Actions">
     <mat-icon>add</mat-icon>
   </button>
   <div
@@ -31,42 +32,22 @@
         fill="white" />
     </svg>
   </div>
-  <ng-container
-    *ngFor="let item of menuItems()"
-    [ngTemplateOutlet]="menuItem"
-    [ngTemplateOutletContext]="{
-      svgIcon: item.svgIcon,
-      icon: item.icon,
-      label: item.label,
-      description: item.description,
-      onClick: item.onClick,
-      disabled$: item.disabled$,
-    }"></ng-container>
-</mat-menu>
-
-<ng-template
-  #menuItem
-  let-icon="icon"
-  let-svgIcon="svgIcon"
-  let-label="label"
-  let-description="description"
-  let-onClick="onClick"
-  let-disabled$="disabled$">
   <button
+    *ngFor="let item of menuItems()"
     mat-menu-item
     class="side-add-menu-button"
-    [class.with-description]="description !== null"
-    (click)="onClick()"
-    [disabled]="disabled$ | async">
-    <mat-icon *ngIf="svgIcon" svgIcon="{{ svgIcon }}"></mat-icon>
+    [class.with-description]="item.description !== null"
+    (click)="item.onClick()"
+    [disabled]="item.disabled$ | async">
+    <mat-icon *ngIf="item.svgIcon" svgIcon="{{ item.svgIcon }}"></mat-icon>
     <mat-icon
-      *ngIf="icon"
+      *ngIf="item.icon"
       class="material-symbols-outlined side-add-menu-button-icon"
-      >{{ icon }}</mat-icon
+      >{{ item.icon }}</mat-icon
     >
-    <div class="side-add-menu-button-label">{{ label }}</div>
-    <div *ngIf="description" class="side-add-menu-button-description">
-      {{ description }}
+    <div class="side-add-menu-button-label">{{ item.label }}</div>
+    <div *ngIf="item.description" class="side-add-menu-button-description">
+      {{ item.description }}
     </div>
   </button>
-</ng-template>
+</mat-menu>
diff --git a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.ts b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.ts
index 5a5f4468d..c6a71dac3 100644
--- a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.ts
+++ b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.ts
@@ -4,10 +4,17 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { CommonModule } from '@angular/common';
 import { AddMenuItem } from '../../app.component';
+import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-side-button-menu',
-  imports: [MatButtonModule, MatIconModule, MatMenuModule, CommonModule],
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    CommonModule,
+    MatTooltip,
+  ],
   templateUrl: './side-button-menu.component.html',
   styleUrl: './side-button-menu.component.scss',
 })
diff --git a/modules/ui/src/app/components/wifi/wifi.component.ts b/modules/ui/src/app/components/wifi/wifi.component.ts
index 2cb6c72da..ce741fefd 100644
--- a/modules/ui/src/app/components/wifi/wifi.component.ts
+++ b/modules/ui/src/app/components/wifi/wifi.component.ts
@@ -20,7 +20,6 @@ import { MatIconButton } from '@angular/material/button';
 
 @Component({
   selector: 'app-wifi',
-
   imports: [MatIcon, MatTooltip, MatIconButton],
   templateUrl: './wifi.component.html',
   styles: `
diff --git a/modules/ui/src/app/pages/certificates/certificates.component.ts b/modules/ui/src/app/pages/certificates/certificates.component.ts
index 0848f7807..b3c6065d5 100644
--- a/modules/ui/src/app/pages/certificates/certificates.component.ts
+++ b/modules/ui/src/app/pages/certificates/certificates.component.ts
@@ -22,7 +22,6 @@ import {
 } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { CertificatesStore } from './certificates.store';
 import { SimpleDialogComponent } from '../../components/simple-dialog/simple-dialog.component';
 import { Subject, takeUntil } from 'rxjs';
@@ -39,7 +38,6 @@ import { CertificateUploadButtonComponent } from './components/certificate-uploa
     CertificatesTableComponent,
   ],
   providers: [CertificatesStore, DatePipe],
-  hostDirectives: [CdkTrapFocus],
   templateUrl: './certificates.component.html',
   styleUrl: './certificates.component.scss',
 })