Fix: fix some popover closing behavior

src-ui/src/app/components/common/preview-popup/preview-popup.component.html

@@ -4,7 +4,7 @@
   <ng-content></ng-content>
 </a>
 <ng-template #previewContent>
-  <div class="preview-popup-container">
+  <div class="preview-popup-container" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview(); close()">
     @if (error) {
       <div class="w-100 h-100 position-relative">
         <p class="fst-italic position-absolute top-50 start-50 translate-middle" i18n>Error loading preview</p>

src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts

@@ -1,9 +1,4 @@
-import {
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-  ComponentFixture,
-  fakeAsync,
-  TestBed,
-  tick,
-} from '@angular/core/testing'
 
 import {
   HttpClient,
@@ -61,6 +56,7 @@ describe('PreviewPopupComponent', () => {
     fixture = TestBed.createComponent(PreviewPopupComponent)
     component = fixture.componentInstance
     component.document = { ...doc }
+    jest.useFakeTimers()
     fixture.detectChanges()
   })
 
@@ -139,16 +135,36 @@ describe('PreviewPopupComponent', () => {
     expect(component.previewText).toEqual('Preview text')
   })
 
-  it('should show preview on mouseover after delay to preload content', fakeAsync(() => {
+  it('should show preview on mouseover after delay to preload content', () => {
     component.mouseEnterPreview()
     expect(component.popover.isOpen()).toBeTruthy()
-    tick(600)
+    jest.advanceTimersByTime(600)
     component.close()
-
+    jest.advanceTimersByTime(600)
-    component.mouseEnterPreview()
+  })
-    tick(100)
+
-    component.mouseLeavePreview()
+  it('should not show preview on mouseover if mouse no longer on preview', () => {
-    tick(600)
+    component.mouseEnterPreview()
-    expect(component.popover.isOpen()).toBeFalsy()
+    jest.advanceTimersByTime(100)
-  }))
+    component.mouseLeavePreview()
+    jest.advanceTimersByTime(600)
+    expect(component.popover.isOpen()).toBeFalsy()
+  })
+
+  it('should not close preview on mouseleave if mouse back on preview', () => {
+    component.close()
+    component.mouseEnterPreview()
+    jest.advanceTimersByTime(300)
+    expect(component.popover.isOpen()).toBeTruthy()
+  })
+
+  it('should support immediate close on mouseleave', () => {
+    component.mouseEnterPreview()
+    jest.advanceTimersByTime(600)
+    expect(component.popover.isOpen()).toBeTruthy()
+    component.mouseLeavePreview()
+    component.close(true)
+    jest.advanceTimersByTime(1)
+    expect(component.popover.isOpen()).toBeFalsy()
+  })
 })

src-ui/src/app/components/common/preview-popup/preview-popup.component.ts

@@ -46,7 +46,7 @@ export class PreviewPopupComponent implements OnDestroy {
 
   @ViewChild('popover') popover: NgbPopover
 
-  mouseOnPreview: boolean
+  mouseOnPreview: boolean = false
 
   popoverClass: string = 'shadow popover-preview'
 
@@ -118,7 +118,7 @@ export class PreviewPopupComponent implements OnDestroy {
           // show popover
           this.popoverClass = this.popoverClass.replace('pe-none opacity-0', '')
         } else {
-          this.popover.close()
+          this.popover.close(true)
         }
       }, 600)
     }
@@ -128,7 +128,12 @@ export class PreviewPopupComponent implements OnDestroy {
     this.mouseOnPreview = false
   }
 
-  public close() {
+  public close(immediate: boolean = false) {
-    this.popover.close(false)
+    setTimeout(
+      () => {
+        if (!this.mouseOnPreview) this.popover.close()
+      },
+      immediate ? 0 : 300
+    )
   }
 }