From 3bdbbdb3e3f08bb3d252d4659869dcf340432a9e Mon Sep 17 00:00:00 2001
From: jsica <juliana.sica@broadcom.com>
Date: Mon, 4 Dec 2023 14:21:09 -0500
Subject: [PATCH] Error in activity reporter not visible, need to scroll to the
 top

Add a scrollIntoView method for the vcd-banner-activity-reporter. This increases the visibility of success and error messages by scrolling the activity reporter banner into view.

Testing Done:
- Edited examples locally to have a page where the error/success message is not visible.
- Observed that the scrolling to the activity banner was successful.

Signed-off-by: Juliana Sica <juliana.sica@broadcom.com>
---
 projects/components/CHANGELOG.MD                     |  1 +
 .../banner-activity-reporter.component.ts            | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/projects/components/CHANGELOG.MD b/projects/components/CHANGELOG.MD
index b899815f..402b4c10 100644
--- a/projects/components/CHANGELOG.MD
+++ b/projects/components/CHANGELOG.MD
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix ErrorBannerExampleComponent when closed with X button
 ### Changed
 * errorMessage reset value is `null` instead of `undefined`
+* Add scrollIntoView method for the vcd-banner-activity-reporter
 
 ## [15.0.1-dev.12]
 ### Fixed
diff --git a/projects/components/src/common/activity-reporter/banner-activity-reporter.component.ts b/projects/components/src/common/activity-reporter/banner-activity-reporter.component.ts
index 5b8a34fb..2e6887d2 100644
--- a/projects/components/src/common/activity-reporter/banner-activity-reporter.component.ts
+++ b/projects/components/src/common/activity-reporter/banner-activity-reporter.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
-import { Component, Inject, Input } from '@angular/core';
+import { Component, ElementRef, Inject, Input } from '@angular/core';
 import { TranslationService } from '@vcd/i18n';
 import { LazyString } from '@vcd/i18n';
 import { ActivityPromiseResolver } from './activity-promise-resolver';
@@ -29,6 +29,7 @@ export class BannerActivityReporterComponent extends ActivityReporter {
 
     constructor(
         private translationService: TranslationService,
+        private elementRef: ElementRef,
         @Inject(ActivityPromiseResolver) promiseResolver: ActivityPromiseResolver<any>
     ) {
         super(promiseResolver);
@@ -49,6 +50,7 @@ export class BannerActivityReporterComponent extends ActivityReporter {
     reportError(errorText: string): void {
         this.errorText = errorText;
         this.running = false;
+        this.scrollIntoView();
     }
 
     /**
@@ -59,6 +61,7 @@ export class BannerActivityReporterComponent extends ActivityReporter {
             this.successMessage = successMessage;
         }
         this.running = false;
+        this.scrollIntoView();
     }
 
     /**
@@ -75,6 +78,13 @@ export class BannerActivityReporterComponent extends ActivityReporter {
         this.successMessage = null;
     }
 
+    /**
+     * Scroll to the banner activity reporter.
+     */
+    private scrollIntoView(): void {
+        this.elementRef.nativeElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+
     /*
      * Reset the banner activity state manually.
      *