more fixes on animation and handleClickOutside

frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.html

@@ -15,10 +15,10 @@
   SPDX-License-Identifier: Apache-2.0 -->
 
 <div
-	class="tooltip-container"
+	class="tooltip-container popover-element"
 	[ngClass]="data.position"
 	[ngStyle]="data.width | iconPanelSizeStyles: data.height"
-	[@fadeInOut]="isClosing">
+	[@fadeInOut]="popoverRef.isClosing">
 	<div class="tooltip-arrow"></div>
 
 	<div class="popover-content">

frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.ts

@@ -50,10 +50,8 @@ export class MsPopoverComponent {
 	@Input() contentTemplate?: TemplateRef<any>;
 	@Output() actionEvent: EventEmitter<PopoverStatus> = new EventEmitter<PopoverStatus>();
 
-	isClosing = false;
-
 	constructor(
-		private popoverRef: PopoverRef,
+		public popoverRef: PopoverRef,
 		@Inject(POPOVER_DATA) public data: PopoverConfig
 	) {
 		this.closeDrawerOnBackdropClick();
@@ -62,19 +60,16 @@ export class MsPopoverComponent {
 	onClose(): void {
 		this.actionEvent.emit(PopoverStatus.CLOSE);
 		this.popoverRef.close({ status: PopoverStatus.CLOSE });
-		this.isClosing = true;
 	}
 
 	onSave(): void {
 		this.actionEvent.emit(PopoverStatus.SAVE);
 		this.popoverRef.close({ status: PopoverStatus.SAVE });
-		this.isClosing = false;
 	}
 
 	onDismiss(): void {
 		this.actionEvent.emit(PopoverStatus.DISMISS);
 		this.popoverRef.close({ status: PopoverStatus.DISMISS });
-		this.isClosing = false;
 	}
 
 	private closeDrawerOnBackdropClick(): void {

frontend/src/app/modules/core/components/ms-popover/popover.ref.ts

@@ -29,6 +29,11 @@ import { PopoverClose } from './models/interfaces/popover-config.interface';
 // - Handle Backdrop Clicks: Allows listening to backdrop clicks, providing a way to close the popover or take action when the user clicks outside of the popover.
 
 export class PopoverRef {
+	/**
+	 * Based on this value we trigger the fade-in and fade-out animations.
+	 */
+	public isClosing: boolean = false;
+
 	private afterClosedSubject = new Subject<any>();
 
 	/**
@@ -54,6 +59,8 @@ export class PopoverRef {
 	}
 
 	public close(result?: PopoverClose<any>) {
+		this.isClosing = true;
+
 		this.afterClosedSubject.next(result);
 		this.afterClosedSubject.complete();
 		this.dataSubject.complete();

frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-toolbar/ms-terminal-toolbar.component.ts

@@ -109,6 +109,7 @@ export class MsTerminalToolbarComponent implements OnInit, OnDestroy {
 			.pipe(take(1))
 			.subscribe(() => {
 				this.searchPanelRef = undefined;
+				this.disposeSearch.emit();
 			});
 	}
 
@@ -135,6 +136,10 @@ export class MsTerminalToolbarComponent implements OnInit, OnDestroy {
 	}
 
 	openTerminalMessagesHistoryDialog() {
+		if (!isNil(this.searchPanelRef)) {
+			this.searchPanelRef?.close();
+		}
+
 		this.terminalDialogService.openMessagesHistoryDialog();
 	}
 

frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.ts

@@ -31,6 +31,7 @@ import { MsTerminalXtermComponent } from '../ms-terminal-xterm/ms-terminal-xterm
 })
 export class MsTerminalXtermWithToolbarComponent implements OnDestroy {
 	@ViewChild('terminalWrapper') terminalWrapper!: ElementRef;
+	@ViewChild('popoverElement') popoverElement!: ElementRef;
 
 	private clickListener!: () => void;
 
@@ -46,7 +47,9 @@ export class MsTerminalXtermWithToolbarComponent implements OnDestroy {
 	}
 
 	handleClickOutside(event: Event): void {
-		if (this.terminalWrapper && !this.terminalWrapper.nativeElement.contains(event.target)) {
+		const clickedInsidePopover = (event.target as HTMLElement).closest('.popover-element');
+
+		if (this.terminalWrapper && !this.terminalWrapper.nativeElement.contains(event.target) && !clickedInsidePopover) {
 			if (this.popoverManager.hasActivePopover('terminal-popover')) {
 				this.popoverManager.closePopoverById('terminal-popover');
 			}