From c322b1ff1abaf7c1a5fe21e2b61dbf2d3c428eb4 Mon Sep 17 00:00:00 2001 From: Dinh Nguyen Date: Mon, 30 Dec 2024 13:24:43 +0700 Subject: [PATCH 1/6] fix overlay index of version & artifact dropdown --- ...product-detail-version-action.component.scss | 2 +- .../product-detail/product-detail.component.ts | 17 ----------------- 2 files changed, 1 insertion(+), 18 deletions(-) diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.scss b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.scss index c1255691..733bce35 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.scss +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.scss @@ -131,7 +131,7 @@ height: 204px; margin-top: 6.4rem; background-color: var(--bs-body-bg); - z-index: 999; + z-index: 1000; padding: 10px; border-radius: 5px; box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1); diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts index 33161ff9..792591a3 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts @@ -125,7 +125,6 @@ export class ProductDetailComponent { return this.getDisplayedTabsSignal(); }); isDropdownOpen: WritableSignal = signal(false); - isTabDropdownShown: WritableSignal = signal(false); selectedVersion = ''; metaProductJsonUrl: string | undefined = ''; showPopup!: boolean; @@ -321,8 +320,6 @@ export class ProductDetailComponent { onTabChange(event: string): void { this.setActiveTab(event); - this.isTabDropdownShown.update(value => !value); - this.onTabDropdownShown(); } getSelectedTabLabel(): string { @@ -361,22 +358,8 @@ export class ProductDetailComponent { this.isDropdownOpen.update(value => !value); } - onTabDropdownShown(): void { - this.isTabDropdownShown.set(!this.isTabDropdownShown()); - } - @HostListener('document:click', ['$event']) handleClickOutside(event: MouseEvent): void { - const formSelect = - this.elementRef.nativeElement.querySelector('.form-select'); - - if ( - formSelect && - !formSelect.contains(event.target) && - this.isTabDropdownShown() - ) { - this.onTabDropdownShown(); - } } @HostListener('window:resize', ['$event']) From 85f9eafbf21ead8898a514de745037fd67eb139b Mon Sep 17 00:00:00 2001 From: Dinh Nguyen Date: Mon, 30 Dec 2024 13:39:32 +0700 Subject: [PATCH 2/6] remove redundant test case --- .../product-detail/product-detail.component.spec.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts index b6afbd79..7c726253 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts @@ -198,15 +198,6 @@ describe('ProductDetailComponent', () => { }); }); - it('should toggle isDropdownOpen on onShowDropdown', () => { - component.isDropdownOpen.set(false); - component.onShowInfoContent(); - expect(component.isDropdownOpen()).toBe(true); - - component.onShowInfoContent(); - expect(component.isTabDropdownShown()).toBe(false); - }); - it('should reset state before fetching new product details', () => { component.productDetail.set(MOCK_PRODUCT_DETAIL); component.productModuleContent.set( From cd30b61b42caad0aeb10d715bde6bbc6a676d719 Mon Sep 17 00:00:00 2001 From: Dinh Nguyen Date: Mon, 30 Dec 2024 16:37:47 +0700 Subject: [PATCH 3/6] handle feedback --- ...product-detail-version-action.component.spec.ts | 12 ++++++++++++ .../product-detail-version-action.component.ts | 14 ++++++++++++++ .../product-detail/product-detail.component.html | 1 + .../product-detail.component.spec.ts | 11 +++++++++++ .../product-detail/product-detail.component.ts | 8 ++++++++ 5 files changed, 46 insertions(+) diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.spec.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.spec.ts index f1c431ff..61e1f4cb 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.spec.ts +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.spec.ts @@ -339,4 +339,16 @@ describe('ProductDetailVersionActionComponent', () => { const result = component.getTrackingEnvironmentBasedOnActionType(); expect(result).toBe(''); }); + + it('should close the dropdown when clicking outside', () => { + component.isDropDownDisplayed.set(true); + component.actionType = ProductDetailActionType.STANDARD; + fixture.detectChanges(); + + const event = new MouseEvent('click'); + document.dispatchEvent(event); + fixture.detectChanges(); + + expect(component.isDropDownDisplayed()).toBeFalse(); + }); }); diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts index e256b4e2..1dc82dde 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts @@ -5,6 +5,7 @@ import { computed, ElementRef, EventEmitter, + HostListener, inject, Input, model, @@ -281,4 +282,17 @@ export class ProductDetailVersionActionComponent implements AfterViewInit { return ''; } } + + @HostListener('document:click', ['$event']) + handleClickOutside(event: MouseEvent): void { + let nativeElement = this.elementRef.nativeElement; + if (!nativeElement + .querySelector('#download-dropdown-menu') + .contains(event.target) + && + this.isDropDownDisplayed() + ) { + this.isDropDownDisplayed.set(!this.isDropDownDisplayed()); + } + } } diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html index d183959e..2ce9e3a4 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html @@ -150,6 +150,7 @@

class="bg-transparent border-0" (click)="onShowInfoContent()"> +