From 7e1766d18baeec8bd17bb81d6c4cc691ceac1b54 Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Wed, 18 Sep 2024 11:33:36 +0000
Subject: [PATCH] 366014294: (feat) update callouts logic

---
 modules/ui/src/app/app.component.html         | 52 ++++++++++---------
 modules/ui/src/app/app.component.ts           |  4 ++
 .../components/callout/callout.component.html |  2 +-
 3 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html
index 5ccc06a92..764a08f8e 100644
--- a/modules/ui/src/app/app.component.html
+++ b/modules/ui/src/app/app.component.html
@@ -157,6 +157,33 @@ <h1 class="main-heading">Testrun</h1>
               panel.
             </app-callout>
           </ng-container>
+          <app-callout
+            id="outdated_devices_callout"
+            role="alert"
+            aria-live="assertive"
+            [closable]="true"
+            [type]="CalloutType.Error"
+            (calloutClosed)="calloutClosed($event)"
+            *ngIf="
+              vm.hasExpiredDevices &&
+              !vm.calloutState.get('outdated_devices_callout')
+            ">
+            Further information is required in your device configurations.
+            <ng-container *ngIf="!isDevicesRoute"
+              >Please update your
+              <a
+                (click)="navigateToDeviceRepository()"
+                (keydown.enter)="navigateToDeviceRepository()"
+                (keydown.space)="navigateToDeviceRepository()"
+                aria-label="The Devices link redirects to the device repository page."
+                tabindex="0"
+                role="link"
+                class="message-link"
+                >Devices</a
+              >
+              to continue testing.
+            </ng-container>
+          </app-callout>
           <app-callout
             [type]="CalloutType.Info"
             *ngIf="vm.hasConnectionSettings === false">
@@ -244,31 +271,6 @@ <h1 class="main-heading">Testrun</h1>
               >Risk Assessment questionnaire</a
             >?
           </app-callout>
-          <app-callout
-            id="outdated_devices_callout"
-            role="alert"
-            aria-live="assertive"
-            [closable]="true"
-            [type]="CalloutType.Error"
-            (calloutClosed)="calloutClosed($event)"
-            *ngIf="
-              vm.hasExpiredDevices &&
-              !vm.calloutState.get('outdated_devices_callout')
-            ">
-            Further information is required in your device configurations.
-            Please update your
-            <a
-              (click)="navigateToDeviceRepository()"
-              (keydown.enter)="navigateToDeviceRepository()"
-              (keydown.space)="navigateToDeviceRepository()"
-              aria-label="The Devices link redirects to the device repository page."
-              tabindex="0"
-              role="link"
-              class="message-link"
-              >Devices</a
-            >
-            to continue testing.
-          </app-callout>
         </div>
         <router-outlet></router-outlet>
       </div>
diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts
index 0fd9098f9..231304e8b 100644
--- a/modules/ui/src/app/app.component.ts
+++ b/modules/ui/src/app/app.component.ts
@@ -131,6 +131,10 @@ export class AppComponent {
     return this.route.url === Routes.RiskAssessment;
   }
 
+  get isDevicesRoute(): boolean {
+    return this.route.url === Routes.Devices;
+  }
+
   navigateToDeviceRepository(): void {
     this.route.navigate([Routes.Devices]);
   }
diff --git a/modules/ui/src/app/components/callout/callout.component.html b/modules/ui/src/app/components/callout/callout.component.html
index c2493e0a2..36f0c981f 100644
--- a/modules/ui/src/app/components/callout/callout.component.html
+++ b/modules/ui/src/app/components/callout/callout.component.html
@@ -32,6 +32,6 @@
     class="callout-close-button"
     mat-button
     (click)="calloutClosed.emit(id)">
-    OK
+    Dismiss
   </button>
 </div>