Add notification when report is generating (#2843)

This PR enhances the report generation functionality by adding animation
during the process. This PR is a continuation and enhancement of the
previous PR:

Adding a button to generate a report for a workflow:
#2770
Enhancing Report Generation by adding Operator Results:
#2792
Enhancing Report Generation by Adding Operator Json and Comments Section
: #2807
Ai Flag: #2818 and
#2808

Key Changes:

**menu.component.ts:** 
At the start, notification.blank is called to display a message, and
notification.remove is used to remove it at the end. Upon successful
generation, this.notificationService.success is invoked.

**notification.service.ts:** 
notification.blank and notification.remove have been added.

Screenshot of the notification:

![image](https://github.com/user-attachments/assets/76f01cfd-dd52-4ba5-8f87-d2703473e82e)

![image](https://github.com/user-attachments/assets/a0a06876-275d-4062-a62a-0b423488107c)

core/gui/src/app/common/service/notification/notification.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from "@angular/core";
 import { NzMessageDataOptions, NzMessageService } from "ng-zorro-antd/message";
+import { NzNotificationService } from "ng-zorro-antd/notification";
 
 /**
  * NotificationService is an entry service for sending notifications
@@ -8,7 +9,20 @@ import { NzMessageDataOptions, NzMessageService } from "ng-zorro-antd/message";
   providedIn: "root",
 })
 export class NotificationService {
-  constructor(private message: NzMessageService) {}
+  constructor(
+    private message: NzMessageService,
+    private notification: NzNotificationService
+  ) {}
+
+  // Only blank can be removed manually
+  blank(title: string, content: string, options: NzMessageDataOptions = {}): void {
+    this.notification.blank(title, content, options);
+  }
+
+  // Remove current blank notification only
+  remove(): void {
+    this.notification.remove();
+  }
 
   success(message: string, options: NzMessageDataOptions = {}) {
     this.message.success(message, options);

core/gui/src/app/workspace/component/menu/menu.component.ts

@@ -306,8 +306,8 @@ export class MenuComponent implements OnInit {
    * get the html to export all results.
    */
   public onClickGenerateReport(): void {
-    // Get notification
-    this.notificationService.info("The report is being generated...");
+    // Get notification and set nzDuration to 0 to prevent it from auto-closing
+    this.notificationService.blank("", "The report is being generated...", { nzDuration: 0 });
 
     const workflowName = this.currentWorkflowName;
     const WorkflowContent: WorkflowContent = this.workflowActionService.getWorkflowContent();
@@ -331,13 +331,23 @@ export class MenuComponent implements OnInit {
                 );
                 // Generate the final report as HTML after all results are retrieved
                 this.reportGenerationService.generateReportAsHtml(workflowSnapshotURL, sortedResults, workflowName);
+
+                // Close the notification after the report is generated
+                this.notificationService.remove();
+                this.notificationService.success("Report successfully generated.");
               },
               error: (error: unknown) => {
                 this.notificationService.error("Error in retrieving operator results: " + (error as Error).message);
+                // Close the notification on error
+                this.notificationService.remove();
               },
             });
         },
-        error: (e: unknown) => this.notificationService.error((e as Error).message),
+        error: (e: unknown) => {
+          this.notificationService.error((e as Error).message);
+          // Close the notification on error
+          this.notificationService.remove();
+        },
       });
   }