- {{ 'common.product.detail.information.label' | translate }} -
-
-
-
@@ -127,7 +126,7 @@
[matomoClickName]="installButton.name + ' - ' + getTrackingEnvironmentBasedOnActionType()"
[lang]="languageService.selectedLanguage()"
class="btn btn__install flex-grow-1 install-designer-button m-0 col-4" id="install-button"
- (click)="onUpdateInstallationCountForDesigner()" onClick="function installInDesigner() {
+ (click)="onUpdateInstallationCountForDesigner()" onClick="function installInDesigner(event) {
const selectedItemElement = document.querySelector('.install-designer-dropdown');
if (selectedItemElement) {
const metaDataJsonUrl = selectedItemElement.getAttribute('metaDataJsonUrl');
@@ -158,4 +157,6 @@
{{ 'common.product.detail.contactUs.label' | translate }}
}
+ @default {
+ }
}
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 db54c4926..c12556917 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
@@ -90,6 +90,7 @@
.btn__install {
border: 0px;
}
+
.primary-color {
color: var(--ivy-primary-bg);
}
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 8ca0ec60b..f1c431ff1 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
@@ -10,7 +10,6 @@ import { CookieService } from 'ngx-cookie-service';
import { ActivatedRoute, provideRouter, Router } from '@angular/router';
import { CommonUtils } from '../../../../shared/utils/common.utils';
import { ROUTER } from '../../../../shared/constants/router.constant';
-import { MatomoConfiguration, MatomoModule, MatomoRouterModule } from 'ngx-matomo-client';
import { MatomoTestingModule } from 'ngx-matomo-client/testing';
import { ProductDetailActionType } from '../../../../shared/enums/product-detail-action-type';
import { MATOMO_TRACKING_ENVIRONMENT } from '../../../../shared/constants/matomo.constant';
@@ -31,10 +30,11 @@ describe('ProductDetailVersionActionComponent', () => {
beforeEach(() => {
productServiceMock = jasmine.createSpyObj('ProductService', [
- 'sendRequestToProductDetailVersionAPI', 'sendRequestToUpdateInstallationCount', 'sendRequestToGetProductVersionsForDesigner'
+ 'sendRequestToProductDetailVersionAPI',
+ 'sendRequestToUpdateInstallationCount',
+ 'sendRequestToGetProductVersionsForDesigner'
]);
- const commonUtilsSpy = jasmine.createSpyObj('CommonUtils', ['getCookieValue']);
- // const cookieServiceSpy = jasmine.createSpyObj('CookieService', ['get', 'set']);
+ const commonUtilsSpy = jasmine.createSpyObj('CommonUtils', [ 'getCookieValue' ]);
const activatedRouteSpy = jasmine.createSpyObj('ActivatedRoute', [], {
snapshot: {
queryParams: {}
@@ -43,7 +43,7 @@ describe('ProductDetailVersionActionComponent', () => {
TestBed.configureTestingModule({
imports: [
- ProductDetailVersionActionComponent,
+ ProductDetailVersionActionComponent,
TranslateModule.forRoot(),
MatomoTestingModule.forRoot()
],
@@ -67,9 +67,7 @@ describe('ProductDetailVersionActionComponent', () => {
fixture.detectChanges();
});
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => { expect(component).toBeTruthy(); });
it('first artifact should be chosen when select corresponding version', () => {
const selectedVersion = 'Version 10.0.2';
@@ -91,11 +89,13 @@ describe('ProductDetailVersionActionComponent', () => {
it('should update selectedVersion, artifacts, selectedArtifactName, and selectedArtifact, and call addVersionParamToRoute', () => {
const version = '1.0';
- const artifacts = [{
- name: 'Example Artifact',
- downloadUrl: 'https://example.com/download',
- isProductArtifact: true
- } as ItemDropdown];
+ const artifacts = [
+ {
+ name: 'Example Artifact',
+ downloadUrl: 'https://example.com/download',
+ isProductArtifact: true
+ } as ItemDropdown
+ ];
const versionMap = new Map
-
- {{ 'common.product.detail.information.value.implementedBy' | translate }}
-
-
- ![Logo Vendor]()
-
-
- -
-
- {{ 'common.product.detail.information.value.version' | translate }}
-
-
- {{ displayVersion }}
-
-
- @if(productDetail.compatibility) {
+@if (!(productDetail | emptyProductDetailPipe)) {
+ + {{ 'common.product.detail.information.label' | translate }} +
+ +
+
-
-
-
-
-
+
+
+
+
+
+
+
-
+}
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.ts
index 9c102cfae..6c7a8da60 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.ts
@@ -1,5 +1,12 @@
import { CommonModule } from '@angular/common';
-import { Component, inject, Input, OnChanges, SimpleChange, SimpleChanges } from '@angular/core';
+import {
+ Component,
+ inject,
+ Input,
+ OnChanges,
+ SimpleChange,
+ SimpleChanges
+} from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { ProductDetail } from '../../../../shared/models/product-detail.model';
import { LanguageService } from '../../../../core/services/language/language.service';
@@ -7,13 +14,19 @@ import { ProductDetailService } from '../product-detail.service';
import { VERSION } from '../../../../shared/constants/common.constant';
import { LoadingService } from '../../../../core/services/loading/loading.service';
import { ThemeService } from '../../../../core/services/theme/theme.service';
+import { EmptyProductDetailPipe } from '../../../../shared/pipes/empty-product-detail.pipe';
+import { LoadingComponentId } from '../../../../shared/enums/loading-component-id';
const SELECTED_VERSION = 'selectedVersion';
const PRODUCT_DETAIL = 'productDetail';
@Component({
selector: 'app-product-detail-information-tab',
standalone: true,
- imports: [CommonModule, TranslateModule],
+ imports: [
+ CommonModule,
+ TranslateModule,
+ EmptyProductDetailPipe
+],
templateUrl: './product-detail-information-tab.component.html',
styleUrl: './product-detail-information-tab.component.scss'
})
@@ -22,6 +35,7 @@ export class ProductDetailInformationTabComponent implements OnChanges {
productDetail!: ProductDetail;
@Input()
selectedVersion!: string;
+ protected LoadingComponentId = LoadingComponentId;
externalDocumentLink = '';
displayVersion = '';
displayExternalDocName: string | null = '';
@@ -33,7 +47,10 @@ export class ProductDetailInformationTabComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
let version = '';
const changedSelectedVersion = changes[SELECTED_VERSION];
- if (changedSelectedVersion && changedSelectedVersion.currentValue === changedSelectedVersion.previousValue) {
+ if ( changedSelectedVersion &&
+ changedSelectedVersion.currentValue ===
+ changedSelectedVersion.previousValue
+ ) {
return;
}
const changedProduct = changes[PRODUCT_DETAIL];
@@ -47,7 +64,11 @@ export class ProductDetailInformationTabComponent implements OnChanges {
return;
}
- this.productDetailService.getExternalDocumentForProductByVersion(this.productDetail.id, this.extractVersionValue(version))
+ this.productDetailService
+ .getExternalDocumentForProductByVersion(
+ this.productDetail.id,
+ this.extractVersionValue(version)
+ )
.subscribe({
next: response => {
if (response) {
@@ -56,11 +77,9 @@ export class ProductDetailInformationTabComponent implements OnChanges {
} else {
this.resetValues();
}
- this.loadingService.hide();
},
error: () => {
this.resetValues();
- this.loadingService.hide();
}
});
this.displayVersion = this.extractVersionValue(this.selectedVersion);
@@ -78,9 +97,9 @@ export class ProductDetailInformationTabComponent implements OnChanges {
// To ensure the function always returns a boolean, you can explicitly coerce the result into a boolean using the !! operator or default it to false
// Adding !! in case of changedProduct is undefined, it will return false instead of returning undefined
isProductChanged(changedProduct: SimpleChange) {
- return !!(changedProduct?.previousValue &&
+ return !!( changedProduct?.previousValue &&
Object.keys(changedProduct.previousValue).length > 0 &&
- changedProduct.currentValue !== changedProduct.previousValue);
+ changedProduct.currentValue !== changedProduct.previousValue
+ );
}
-
}
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.html
index 37f94b6f4..3369b6960 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.html
@@ -47,7 +47,6 @@
@if (isDropDownDisplayed()) {
}
+
+ {{
+ 'common.product.detail.information.value.implementedBy' | translate
+ }}
+
+
+ ![Logo Vendor]()
+
+
- {{ 'common.product.detail.information.value.compatibility' | translate }}
+ {{ 'common.product.detail.information.value.version' | translate }}
- {{ productDetail.compatibility }}
+ {{ displayVersion }}
- }
- -
-
- {{ 'common.product.detail.information.value.cost' | translate }}
-
- {{ productDetail.cost }}
-
- -
-
- {{ 'common.product.detail.information.value.language' | translate }}
-
- {{ productDetail.language }}
-
- @if (externalDocumentLink !== '') {
- -
-
- {{ 'common.product.detail.information.value.documentation' | translate }}
-
-
- {{ displayExternalDocName ?? 'common.product.detail.information.value.defaultDocName' | translate }}
-
-
- }
- -
-
- {{ 'common.product.detail.type' | translate }}
-
- {{ productDetail.type }}
-
- -
-
- {{ 'common.product.detail.information.value.tag' | translate }}
-
-
- {{ productDetail.tags ? productDetail.tags!.join(', ') : '' }}
-
-
- @if(productDetail.sourceUrl) {
+ @if (productDetail.compatibility) {
+ +
+
+ {{
+ 'common.product.detail.information.value.compatibility' | translate
+ }}
+
+
+ {{ productDetail.compatibility }}
+
+
+ }
- {{ 'common.product.detail.information.value.source' | translate }}
+ {{ 'common.product.detail.information.value.cost' | translate }}
-
-
- github.com
+ {{ productDetail.cost }}
+
+ +
+
+ {{ 'common.product.detail.information.value.language' | translate }}
+
+ {{ productDetail.language }}
+
+ @if (externalDocumentLink !== '') {
+ +
+
+ {{
+ 'common.product.detail.information.value.documentation' | translate
+ }}
+
+
+ {{
+ displayExternalDocName ??
+ 'common.product.detail.information.value.defaultDocName'
+ | translate
+ }}
+
+ }
+ +
+
+ {{ 'common.product.detail.type' | translate }}
+ {{ productDetail.type }}
- }
- @if(productDetail.statusBadgeUrl) {
- {{ 'common.product.detail.information.value.status' | translate }}
+ {{ 'common.product.detail.information.value.tag' | translate }}
+
+
+ {{ productDetail.tags ? productDetail.tags!.join(', ') : '' }}
+
+
+ @if (productDetail.sourceUrl) {
+ +
+
+ {{ 'common.product.detail.information.value.source' | translate }}
+
+
+
+ github.com
+
+
+
+ }
+ @if (productDetail.statusBadgeUrl) {
+ +
+
+ {{ 'common.product.detail.information.value.status' | translate }}
+
+ 
+
+ }
+ +
+
+ {{
+ 'common.product.detail.information.value.moreInformation' | translate
+ }}
+
+
+
+ {{ 'common.product.detail.information.value.contactUs' | translate }}
+
-
- }
- -
-
- {{
- 'common.product.detail.information.value.moreInformation' | translate
- }}
-
-
-
- {{ 'common.product.detail.information.value.contactUs' | translate }}
-
-
-
-
-
-
-
-
-
-
-
- = signal([]);
productDetail!: ProductDetail;
subscriptions: Subscription[] = [];
searchTextChanged = new Subject();
+ loadingService = inject(LoadingService);
criteria: Criteria = {
search: '',
type: TypeOption.All_TYPES,
@@ -116,7 +122,7 @@ export class ProductComponent implements AfterViewInit, OnDestroy {
}
viewProductDetail(productId: string, _productTag: string) {
- if(this.isRESTClient()) {
+ if (this.isRESTClient()) {
window.location.href = `/${productId}`;
}
this.router.navigate([`/${productId}`]);
diff --git a/marketplace-ui/src/app/modules/product/product.service.spec.ts b/marketplace-ui/src/app/modules/product/product.service.spec.ts
index ab17ec697..fddf9522a 100644
--- a/marketplace-ui/src/app/modules/product/product.service.spec.ts
+++ b/marketplace-ui/src/app/modules/product/product.service.spec.ts
@@ -20,25 +20,19 @@ describe('ProductService', () => {
let products = MOCK_PRODUCTS._embedded.products;
let service: ProductService;
let httpMock: HttpTestingController;
- let loadingServiceSpy: jasmine.SpyObj;
beforeEach(() => {
- const spyLoading = jasmine.createSpyObj('LoadingService', ['show', 'hide']);
-
TestBed.configureTestingModule({
imports: [],
providers: [
ProductService,
provideHttpClient(withInterceptorsFromDi()),
provideHttpClientTesting(),
- { provide: LoadingService, useValue: spyLoading }
+ LoadingService
]
});
service = TestBed.inject(ProductService);
httpMock = TestBed.inject(HttpTestingController);
- loadingServiceSpy = TestBed.inject(
- LoadingService
- ) as jasmine.SpyObj;
});
it('should be created', () => {
@@ -194,9 +188,6 @@ describe('ProductService', () => {
expect(req.request.method).toBe('GET');
req.flush(mockResponse);
-
- expect(loadingServiceSpy.show).not.toHaveBeenCalled();
- expect(loadingServiceSpy.hide).not.toHaveBeenCalled();
});
it('getProductDetailsWithVersion should return a product detail', () => {
diff --git a/marketplace-ui/src/app/modules/product/product.service.ts b/marketplace-ui/src/app/modules/product/product.service.ts
index 22ee095b1..aaabb6183 100644
--- a/marketplace-ui/src/app/modules/product/product.service.ts
+++ b/marketplace-ui/src/app/modules/product/product.service.ts
@@ -7,9 +7,10 @@ import { ProductApiResponse } from '../../shared/models/apis/product-response.mo
import { Criteria } from '../../shared/models/criteria.model';
import { ProductDetail } from '../../shared/models/product-detail.model';
import { VersionData } from '../../shared/models/vesion-artifact.model';
-import { SkipLoading } from '../../core/interceptors/api.interceptor';
+import { LoadingComponent } from '../../core/interceptors/api.interceptor';
import { VersionAndUrl } from '../../shared/models/version-and-url';
import { API_URI } from '../../shared/constants/api.constant';
+import { LoadingComponentId } from '../../shared/enums/loading-component-id';
@Injectable()
export class ProductService {
@@ -17,6 +18,7 @@ export class ProductService {
loadingService = inject(LoadingService);
findProductsByCriteria(criteria: Criteria): Observable {
+ this.loadingService.showLoading(LoadingComponentId.LANDING_PAGE);
let requestParams = new HttpParams();
let requestURL = API_URI.PRODUCT;
if (criteria.nextPageHref) {
@@ -35,7 +37,11 @@ export class ProductService {
);
}
return this.httpClient.get(requestURL, {
- params: requestParams
+ params: requestParams,
+ context: new HttpContext().set(
+ LoadingComponent,
+ LoadingComponentId.LANDING_PAGE
+ )
});
}
@@ -61,9 +67,10 @@ export class ProductService {
productId: string,
isShowDevVersion: boolean
): Observable {
- return this.httpClient.get(
- `${API_URI.PRODUCT_DETAILS}/${productId}?isShowDevVersion=${isShowDevVersion}`
- );
+ return this.httpClient
+ .get(
+ `${API_URI.PRODUCT_DETAILS}/${productId}?isShowDevVersion=${isShowDevVersion}`
+ );
}
sendRequestToProductDetailVersionAPI(
@@ -75,13 +82,13 @@ export class ProductService {
const params = new HttpParams()
.append('designerVersion', designerVersion)
.append('isShowDevVersion', showDevVersion);
- return this.httpClient.get(url, {
- params,
- context: new HttpContext().set(SkipLoading, true)
- });
+ return this.httpClient.get(url, { params });
}
- sendRequestToUpdateInstallationCount(productId: string, designerVersion: string) {
+ sendRequestToUpdateInstallationCount(
+ productId: string,
+ designerVersion: string
+ ) {
const url = `${API_URI.PRODUCT_MARKETPLACE_DATA}/installation-count/${productId}`;
const params = new HttpParams().append('designerVersion', designerVersion);
return this.httpClient.put(url, null, { params });
diff --git a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.html b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.html
index bd8f64d01..993ceab34 100644
--- a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.html
+++ b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.html
@@ -1,3 +1,9 @@
- {
+ getNavigationStartEvent() {
return this.router.events.pipe(
filter(event => event instanceof NavigationStart)
) as Observable;
diff --git a/marketplace-ui/src/assets/scss/custom-style.scss b/marketplace-ui/src/assets/scss/custom-style.scss
index 1a1bdd9b7..c1b98a88f 100644
--- a/marketplace-ui/src/assets/scss/custom-style.scss
+++ b/marketplace-ui/src/assets/scss/custom-style.scss
@@ -56,6 +56,10 @@ p {
font-size: 14px;
}
+.overlay-background{
+ background: rgba(0, 0, 0, 0.32);
+}
+
[data-bs-theme='light'] {
--ivy-primary-bg: #{$ivyPrimaryColorLight};
--ivy-secondary-bg: #{$ivySecondaryColorLight};
- ![]()
-
- {{ - productDetail().names - | multilingualism: languageService.selectedLanguage() - }} -
+
+
-
+
+
+
-
+
-
-
+
+
+ @if (!(productDetail() | emptyProductDetailPipe)) {
-
-
-
- @if(productDetailActionType() !== ProductDetailActionType.CUSTOM_SOLUTION) {
-
-
+
+ - {{ 'common.product.detail.type' | translate }} -
-- -
-- {{ productDetail().type | productType | translate }} -
+ class="connector-title-container d-flex flex-column module-gap"> +
+
+
+
+ ![]()
+
+ + {{ + productDetail().names + | multilingualism: languageService.selectedLanguage() + }} +
+
+
+
+ @if (
+ productDetailActionType() !==
+ ProductDetailActionType.CUSTOM_SOLUTION
+ ) {
+
+
+ + {{ 'common.product.detail.type' | translate }} +
++ +
++ {{ productDetail().type | productType | translate }} +
+
-
diff --git a/marketplace-ui/src/app/modules/product/product.component.ts b/marketplace-ui/src/app/modules/product/product.component.ts
index a041ae197..a60e29440 100644
--- a/marketplace-ui/src/app/modules/product/product.component.ts
+++ b/marketplace-ui/src/app/modules/product/product.component.ts
@@ -34,6 +34,9 @@ import {
DESIGNER_SESSION_STORAGE_VARIABLE
} from '../../shared/constants/common.constant';
import { ItemDropdown } from '../../shared/models/item-dropdown.model';
+import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component';
+import { LoadingService } from '../../core/services/loading/loading.service';
+import { LoadingComponentId } from '../../shared/enums/loading-component-id';
const SEARCH_DEBOUNCE_TIME = 500;
@@ -41,6 +44,7 @@ const SEARCH_DEBOUNCE_TIME = 500;
selector: 'app-product',
standalone: true,
imports: [
+ LoadingSpinnerComponent,
CommonModule,
FormsModule,
TranslateModule,
@@ -52,10 +56,12 @@ const SEARCH_DEBOUNCE_TIME = 500;
styleUrl: './product.component.scss'
})
export class ProductComponent implements AfterViewInit, OnDestroy {
+ protected LoadingComponentId = LoadingComponentId;
products: WritableSignal
- @if (displayedTabsSignal().length > 0) {
-
}
-
+
-
-
-
-
-
-;
let languageService: jasmine.SpyObj;
let titleService: Title;
+ let mockProductFeedbackService: jasmine.SpyObj;
+ let mockProductStarRatingService: jasmine.SpyObj;
+ let mockAuthService: jasmine.SpyObj;
+ let mockAppModalService: jasmine.SpyObj;
beforeEach(async () => {
const routingQueryParamServiceSpy = jasmine.createSpyObj(
@@ -48,9 +60,27 @@ describe('ProductDetailComponent', () => {
['getDesignerVersionFromSessionStorage', 'isDesignerEnv']
);
- const languageServiceSpy = jasmine.createSpyObj(
- 'LanguageService',
- ['selectedLanguage']
+ const languageServiceSpy = jasmine.createSpyObj('LanguageService', [
+ 'selectedLanguage'
+ ]);
+
+ mockProductFeedbackService = jasmine.createSpyObj(
+ 'ProductFeedbackService',
+ [
+ 'getInitFeedbacksObservable',
+ 'findProductFeedbacksByCriteria',
+ 'handleFeedbackApiResponse',
+ 'findProductFeedbackOfUser',
+ 'totalElements'
+ ]
+ );
+ mockAuthService = jasmine.createSpyObj('AuthService', ['getToken']);
+ mockAppModalService = jasmine.createSpyObj('AppModalService', [
+ 'openAddFeedbackDialog'
+ ]);
+ mockProductStarRatingService = jasmine.createSpyObj(
+ 'ProductStarRatingService',
+ ['getRatingObservable', 'starRatings', 'totalComments', 'reviewNumber']
);
await TestBed.configureTestingModule({
@@ -61,15 +91,24 @@ describe('ProductDetailComponent', () => {
MatomoTestingModule.forRoot()
],
providers: [
+ ProductStarRatingService,
provideHttpClient(withInterceptorsFromDi()),
provideHttpClientTesting(),
+ {
+ provide: ProductStarRatingService,
+ useValue: mockProductStarRatingService
+ },
+ {
+ provide: ProductFeedbackService,
+ useValue: mockProductFeedbackService
+ },
+ { provide: AuthService, useValue: mockAuthService },
+ { provide: AppModalService, useValue: mockAppModalService },
{
provide: ActivatedRoute,
useValue: {
- snapshot: {
- params: { id: products[0].id },
- queryParams: { type: TypeOption.CONNECTORS }
- },
+ snapshot: { params: { id: products[0].id } },
+ queryParams: of({ type: TypeOption.CONNECTORS }),
fragment: of('description')
}
},
@@ -100,6 +139,20 @@ describe('ProductDetailComponent', () => {
) as jasmine.SpyObj;
titleService = TestBed.inject(Title);
+ mockProductFeedbackService.getInitFeedbacksObservable.and.returnValue(
+ of([MOCK_FEEDBACK_API_RESPONSE] as any as FeedbackApiResponse)
+ );
+
+ mockProductFeedbackService.findProductFeedbackOfUser.and.returnValue(
+ of({} as any as Feedback)
+ );
+ mockAppModalService.openAddFeedbackDialog.and.returnValue(
+ Promise.resolve()
+ );
+ mockAuthService.getToken.and.returnValue('token');
+ mockProductStarRatingService.getRatingObservable.and.returnValue(
+ of([] as any as StarRatingCounting[])
+ );
});
beforeEach(() => {
@@ -115,9 +168,7 @@ describe('ProductDetailComponent', () => {
});
it('should have title like the name DE', () => {
- languageService.selectedLanguage.and.returnValue(
- Language.DE
- );
+ languageService.selectedLanguage.and.returnValue(Language.DE);
component.updateWebBrowserTitle();
fixture.detectChanges();
@@ -193,8 +244,7 @@ describe('ProductDetailComponent', () => {
fixture.detectChanges();
const description = fixture.debugElement.query(By.css('#description'));
expect(description).toBeFalsy();
- }
- )
+ });
it('should return true for description when in EN language it is not null and not undefined and not empty', () => {
const mockContent: ProductModuleContent = {
@@ -204,9 +254,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('description')).toBeTrue();
@@ -220,9 +268,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.DE;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('description')).toBeTrue();
@@ -236,9 +282,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.DE;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('description')).toBeTrue();
@@ -247,14 +291,12 @@ describe('ProductDetailComponent', () => {
it('should return true for description when in DE language it is undefined but in EN language it has value', () => {
const mockContent: ProductModuleContent = {
...MOCK_PRODUCT_MODULE_CONTENT,
- description: { en: 'Test description'}
+ description: { en: 'Test description' }
};
const selectedLanguage = Language.DE;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('description')).toBeTrue();
@@ -286,9 +328,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('description')).toBeFalse();
@@ -297,14 +337,12 @@ describe('ProductDetailComponent', () => {
it('should return false for description when in EN language it is undefined', () => {
const mockContent: ProductModuleContent = {
...MOCK_PRODUCT_MODULE_CONTENT,
- description: { de: "Test description" }
+ description: { de: 'Test description' }
};
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('description')).toBeFalse();
@@ -318,9 +356,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('description')).toBeFalse();
@@ -334,9 +370,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('description')).toBeFalse();
@@ -350,9 +384,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('setup')).toBeTrue();
@@ -366,9 +398,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.DE;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('setup')).toBeTrue();
@@ -382,9 +412,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.DE;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('setup')).toBeTrue();
@@ -393,14 +421,12 @@ describe('ProductDetailComponent', () => {
it('should return true for setup when in DE language it is undefined but in EN language it has value', () => {
const mockContent: ProductModuleContent = {
...MOCK_PRODUCT_MODULE_CONTENT,
- setup: { en: 'Test setup'}
+ setup: { en: 'Test setup' }
};
const selectedLanguage = Language.DE;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('setup')).toBeTrue();
@@ -416,14 +442,12 @@ describe('ProductDetailComponent', () => {
it('should return false for setup when in EN language it is an empty string', () => {
const mockContent: ProductModuleContent = {
...MOCK_PRODUCT_MODULE_CONTENT,
- setup: { en: '', de: "Test setup" }
+ setup: { en: '', de: 'Test setup' }
};
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('setup')).toBeFalse();
@@ -432,14 +456,12 @@ describe('ProductDetailComponent', () => {
it('should return false for setup when in EN language it is undefined', () => {
const mockContent: ProductModuleContent = {
...MOCK_PRODUCT_MODULE_CONTENT,
- setup: { de: "Test setup" }
+ setup: { de: 'Test setup' }
};
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('setup')).toBeFalse();
@@ -453,9 +475,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('setup')).toBeFalse();
@@ -469,9 +489,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('setup')).toBeFalse();
@@ -485,9 +503,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('demo')).toBeTrue();
@@ -501,9 +517,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.DE;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('demo')).toBeTrue();
@@ -517,9 +531,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.DE;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('demo')).toBeTrue();
@@ -528,14 +540,12 @@ describe('ProductDetailComponent', () => {
it('should return true for demo when in DE language it is undefined but in EN language it has value', () => {
const mockContent: ProductModuleContent = {
...MOCK_PRODUCT_MODULE_CONTENT,
- demo: { en: 'Test demo'}
+ demo: { en: 'Test demo' }
};
const selectedLanguage = Language.DE;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('demo')).toBeTrue();
@@ -556,9 +566,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('demo')).toBeFalse();
@@ -567,14 +575,12 @@ describe('ProductDetailComponent', () => {
it('should return false for demo when in EN language it is undefined', () => {
const mockContent: ProductModuleContent = {
...MOCK_PRODUCT_MODULE_CONTENT,
- demo: { de: "Test demo" }
+ demo: { de: 'Test demo' }
};
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('demo')).toBeFalse();
@@ -588,9 +594,7 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('demo')).toBeFalse();
@@ -604,15 +608,12 @@ describe('ProductDetailComponent', () => {
const selectedLanguage = Language.EN;
- languageService.selectedLanguage.and.returnValue(
- selectedLanguage
- );
+ languageService.selectedLanguage.and.returnValue(selectedLanguage);
component.productModuleContent.set(mockContent);
expect(component.getContent('demo')).toBeFalse();
});
-
it('should display dropdown horizontally on small viewport', () => {
viewport.set(540);
const tabGroup = fixture.debugElement.query(By.css('.row-tab'));
@@ -663,9 +664,9 @@ describe('ProductDetailComponent', () => {
expect(infoTab).toBeTruthy();
});
- it('should call checkMediaSize on ngAfterViewInit', fakeAsync(() => {
+ it('should call checkMediaSize on ngOnInit', fakeAsync(() => {
spyOn(component, 'checkMediaSize');
- component.ngAfterViewInit();
+ component.ngOnInit();
tick();
expect(component.checkMediaSize).toHaveBeenCalled();
}));
@@ -737,7 +738,7 @@ describe('ProductDetailComponent', () => {
it('should return DESIGNER_ENV as acction type in Designer Env', () => {
routingQueryParamService.isDesignerEnv.and.returnValue(true);
- component.updateProductDetailActionType({ sourceUrl: 'some-url'} as any);
+ component.updateProductDetailActionType({ sourceUrl: 'some-url' } as any);
expect(component.productDetailActionType()).toBe(
ProductDetailActionType.DESIGNER_ENV
);
@@ -756,7 +757,6 @@ describe('ProductDetailComponent', () => {
By.css('#app-product-installation-count-action')
);
expect(installationCount).toBeFalsy();
-
});
it('should return STANDARD as acction type when when productDetail.sourceUrl is defined', () => {
@@ -771,7 +771,7 @@ describe('ProductDetailComponent', () => {
it('displayed tabs array should have size 0 if product module content description, setup, demo, dependcy are all empty', () => {
const mockContent: ProductModuleContent = {
- ...MOCK_PRODUCT_MODULE_CONTENT,
+ ...MOCK_PRODUCT_MODULE_CONTENT
};
component.productModuleContent.set(mockContent);
@@ -780,14 +780,20 @@ describe('ProductDetailComponent', () => {
it('should hide tab and tab content when all tabs have no content', () => {
const mockContent: ProductModuleContent = {
- ...MOCK_PRODUCT_MODULE_CONTENT,
+ ...MOCK_PRODUCT_MODULE_CONTENT
};
component.productModuleContent.set(mockContent);
const tabGroup = fixture.debugElement.query(By.css('.tab-group'));
const tabs = tabGroup.query(By.css('.row-tab d-none d-xl-block col-12'));
- const dropdown = tabGroup.query(By.css('.dropdown-tab d-block d-xl-none d-flex flex-row justify-content-center align-items-center w-100'));
- const tabContent = tabGroup.query(By.css('.tab-content col-12 default-cursor'));
+ const dropdown = tabGroup.query(
+ By.css(
+ '.dropdown-tab d-block d-xl-none d-flex flex-row justify-content-center align-items-center w-100'
+ )
+ );
+ const tabContent = tabGroup.query(
+ By.css('.tab-content col-12 default-cursor')
+ );
expect(tabs).toBeFalsy();
expect(dropdown).toBeFalsy();
@@ -795,18 +801,32 @@ describe('ProductDetailComponent', () => {
});
it('should generate right text for the rate connector', () => {
- const rateConnector = fixture.debugElement.query(By.css('.rate-connector-btn'));
- expect(rateConnector.childNodes[0].nativeNode.textContent).toContain("common.feedback.rateFeedbackForConnectorBtnLabel");
+ const rateConnector = fixture.debugElement.query(
+ By.css('.rate-connector-btn')
+ );
+ expect(rateConnector.childNodes[0].nativeNode.textContent).toContain(
+ 'common.feedback.rateFeedbackForConnectorBtnLabel'
+ );
- const rateConnectorEmptyText = fixture.debugElement.query(By.css('.rate-empty-text'));
- expect(rateConnectorEmptyText.childNodes[0].nativeNode.textContent).toContain("common.feedback.noFeedbackForConnectorLabel");
+ const rateConnectorEmptyText = fixture.debugElement.query(
+ By.css('.rate-empty-text')
+ );
+ expect(
+ rateConnectorEmptyText.childNodes[0].nativeNode.textContent
+ ).toContain('common.feedback.noFeedbackForConnectorLabel');
component.route.snapshot.params['id'] = 'cronjob';
- spyOn(component, 'getProductById').and.returnValue(of(MOCK_CRON_JOB_PRODUCT_DETAIL));
+ spyOn(component, 'getProductById').and.returnValue(
+ of(MOCK_CRON_JOB_PRODUCT_DETAIL)
+ );
component.ngOnInit();
fixture.detectChanges();
- expect(rateConnector.childNodes[0].nativeNode.textContent).toContain("common.feedback.rateFeedbackForUtilityBtnLabel");
- expect(rateConnectorEmptyText.childNodes[0].nativeNode.textContent).toContain("common.feedback.noFeedbackForUtilityLabel");
+ expect(rateConnector.childNodes[0].nativeNode.textContent).toContain(
+ 'common.feedback.rateFeedbackForUtilityBtnLabel'
+ );
+ expect(
+ rateConnectorEmptyText.childNodes[0].nativeNode.textContent
+ ).toContain('common.feedback.noFeedbackForUtilityLabel');
});
it('maven tab should not display when product module content is missing', () => {
@@ -816,6 +836,7 @@ describe('ProductDetailComponent', () => {
let mavenTab = fixture.debugElement.query(
By.css('app-product-detail-maven-content')
);
+
expect(mavenTab).toBeTruthy();
component.productModuleContent.set({} as any as ProductModuleContent);
fixture.detectChanges();
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 eda8701dc..36c65f9b6 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
@@ -13,7 +13,7 @@ import { ActivatedRoute, Router } from '@angular/router';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule } from '@ngx-translate/core';
import { MarkdownModule, MarkdownService } from 'ngx-markdown';
-import { map, Observable } from 'rxjs';
+import { forkJoin, map, Observable } from 'rxjs';
import { AuthService } from '../../../auth/auth.service';
import { LanguageService } from '../../../core/services/language/language.service';
import { ThemeService } from '../../../core/services/theme/theme.service';
@@ -22,14 +22,15 @@ import {
DEFAULT_IMAGE_URL,
DEFAULT_VENDOR_IMAGE,
DEFAULT_VENDOR_IMAGE_BLACK,
- PRODUCT_DETAIL_TABS, RATING_LABELS_BY_TYPE, SHOW_DEV_VERSION,
+ PRODUCT_DETAIL_TABS,
+ RATING_LABELS_BY_TYPE,
+ SHOW_DEV_VERSION,
VERSION
} from '../../../shared/constants/common.constant';
import { ItemDropdown } from '../../../shared/models/item-dropdown.model';
import { ProductDetail } from '../../../shared/models/product-detail.model';
import { ProductModuleContent } from '../../../shared/models/product-module-content.model';
import { ProductTypeIconPipe } from '../../../shared/pipes/icon.pipe';
-import { MissingReadmeContentPipe } from '../../../shared/pipes/missing-readme-content.pipe';
import { MultilingualismPipe } from '../../../shared/pipes/multilingualism.pipe';
import { ProductTypePipe } from '../../../shared/pipes/product-type.pipe';
import { AppModalService } from '../../../shared/services/app-modal.service';
@@ -51,6 +52,10 @@ import { CookieService } from 'ngx-cookie-service';
import { ROUTER } from '../../../shared/constants/router.constant';
import { Title } from '@angular/platform-browser';
import { API_URI } from '../../../shared/constants/api.constant';
+import { EmptyProductDetailPipe } from '../../../shared/pipes/empty-product-detail.pipe';
+import { LoadingSpinnerComponent } from '../../../shared/components/loading-spinner/loading-spinner.component';
+import { LoadingComponentId } from '../../../shared/enums/loading-component-id';
+import { LoadingService } from '../../../core/services/loading/loading.service';
export interface DetailTab {
activeClass: string;
@@ -78,9 +83,10 @@ const DEFAULT_ACTIVE_TAB = 'description';
ProductDetailFeedbackComponent,
ProductInstallationCountActionComponent,
ProductTypeIconPipe,
- MissingReadmeContentPipe,
CommonDropdownComponent,
- NgOptimizedImage
+ NgOptimizedImage,
+ EmptyProductDetailPipe,
+ LoadingSpinnerComponent
],
providers: [ProductService, MarkdownService],
templateUrl: './product-detail.component.html',
@@ -100,14 +106,16 @@ export class ProductDetailComponent {
elementRef = inject(ElementRef);
cookieService = inject(CookieService);
routingQueryParamService = inject(RoutingQueryParamService);
+ loadingService = inject(LoadingService);
- resizeObserver: ResizeObserver;
+ protected LoadingComponentId = LoadingComponentId;
+ protected ProductDetailActionType = ProductDetailActionType;
+ resizeObserver: ResizeObserver;
productDetail: WritableSignal = signal({} as ProductDetail);
productModuleContent: WritableSignal = signal(
{} as ProductModuleContent
);
- protected ProductDetailActionType = ProductDetailActionType;
productDetailActionType = signal(ProductDetailActionType.STANDARD);
detailTabs = PRODUCT_DETAIL_TABS;
activeTab = '';
@@ -123,6 +131,7 @@ export class ProductDetailComponent {
isMobileMode = signal(false);
installationCount = 0;
logoUrl = DEFAULT_IMAGE_URL;
+
@HostListener('window:popstate', ['$event'])
onPopState() {
this.activeTab = window.location.hash.split('#tab-')[1];
@@ -145,51 +154,86 @@ export class ProductDetailComponent {
queryParamsHandling: 'merge',
replaceUrl: true
});
-
const productId = this.route.snapshot.params[ROUTER.ID];
this.productDetailService.productId.set(productId);
if (productId) {
- const isShowDevVersion = CommonUtils.getCookieValue(this.cookieService, SHOW_DEV_VERSION, false);
- this.getProductById(productId, isShowDevVersion).subscribe(productDetail => {
- this.productDetail.set(productDetail);
- this.productModuleContent.set(productDetail.productModuleContent);
- this.metaProductJsonUrl = productDetail.metaProductJsonUrl;
- this.productDetailService.productNames.set(productDetail.names);
- this.productDetailService.productLogoUrl.set(productDetail.logoUrl);
- this.installationCount = productDetail.installationCount;
- this.handleProductContentVersion();
- this.updateProductDetailActionType(productDetail);
- this.logoUrl = productDetail.logoUrl;
- this.updateWebBrowserTitle();
- const ratingLabels = RATING_LABELS_BY_TYPE.find(button => button.type === productDetail.type);
- if (ratingLabels !== undefined) {
- this.productDetailService.ratingBtnLabel.set(ratingLabels.btnLabel);
- this.productDetailService.noFeedbackLabel.set(ratingLabels.noFeedbackLabel);
- }
+ this.loadingService.showLoading(LoadingComponentId.DETAIL_PAGE);
+ forkJoin({
+ productDetail: this.getProductDetailObservable(productId),
+ productFeedBack:
+ this.productFeedbackService.getInitFeedbacksObservable(),
+ rating: this.productStarRatingService.getRatingObservable(productId),
+ userFeedback: this.productFeedbackService.findProductFeedbackOfUser()
+ }).subscribe(res => {
+ this.handleProductDetail(res.productDetail);
+ this.productFeedbackService.handleFeedbackApiResponse(
+ res.productFeedBack
+ );
+ this.updateDropdownSelection();
+ this.checkMediaSize();
+ this.route.queryParams.subscribe(params => {
+ this.showPopup = params['showPopup'] === 'true';
+ if (this.showPopup && this.authService.getToken()) {
+ this.appModalService
+ .openAddFeedbackDialog()
+ .then(() => this.removeQueryParam())
+ .catch(() => this.removeQueryParam());
+ }
+ });
+ this.loadingService.hideLoading(LoadingComponentId.DETAIL_PAGE);
});
+ }
+ }
+
+ getProductDetailObservable(productId: string): Observable {
+ const isShowDevVersion = CommonUtils.getCookieValue(
+ this.cookieService,
+ SHOW_DEV_VERSION,
+ false
+ );
+ return this.getProductById(productId, isShowDevVersion);
+ }
- this.productFeedbackService.initFeedbacks();
- this.productStarRatingService.fetchData();
+ handleProductDetail(productDetail: ProductDetail): void {
+ this.productDetail.set(productDetail);
+ this.productModuleContent.set(productDetail.productModuleContent);
+ this.metaProductJsonUrl = productDetail.metaProductJsonUrl;
+ this.productDetailService.productNames.set(productDetail.names);
+ this.productDetailService.productLogoUrl.set(productDetail.logoUrl);
+ this.installationCount = productDetail.installationCount;
+ this.handleProductContentVersion();
+ this.updateProductDetailActionType(productDetail);
+ this.logoUrl = productDetail.logoUrl;
+ this.updateWebBrowserTitle();
+ const ratingLabels = RATING_LABELS_BY_TYPE.find(
+ button => button.type === productDetail.type
+ );
+ if (ratingLabels !== undefined) {
+ this.productDetailService.ratingBtnLabel.set(ratingLabels.btnLabel);
+ this.productDetailService.noFeedbackLabel.set(
+ ratingLabels.noFeedbackLabel
+ );
}
- this.updateDropdownSelection();
}
- onClickingBackToHomepageButton() {
+ onClickingBackToHomepageButton(): void {
this.router.navigate([API_URI.APP]);
}
- onLogoError() {
+ onLogoError(): void {
this.logoUrl = DEFAULT_IMAGE_URL;
}
- handleProductContentVersion() {
+ handleProductContentVersion(): void {
if (this.isEmptyProductContent()) {
return;
}
- this.selectedVersion = VERSION.displayPrefix.concat(this.productModuleContent().version);
+ this.selectedVersion = VERSION.displayPrefix.concat(
+ this.productModuleContent().version
+ );
}
- updateProductDetailActionType(productDetail: ProductDetail) {
+ updateProductDetailActionType(productDetail: ProductDetail): void {
if (productDetail?.sourceUrl === undefined) {
this.productDetailActionType.set(ProductDetailActionType.CUSTOM_SOLUTION);
} else if (this.routingQueryParamService.isDesignerEnv()) {
@@ -199,42 +243,34 @@ export class ProductDetailComponent {
}
}
- scrollToTop() {
+ scrollToTop(): void {
window.scrollTo({ left: 0, top: 0, behavior: 'instant' });
}
- getProductById(productId: string, isShowDevVersion: boolean): Observable {
- const targetVersion = this.routingQueryParamService.getDesignerVersionFromSessionStorage();
+ getProductById(
+ productId: string,
+ isShowDevVersion: boolean
+ ): Observable {
+ const targetVersion =
+ this.routingQueryParamService.getDesignerVersionFromSessionStorage();
let productDetail$: Observable;
if (!targetVersion) {
- productDetail$ = this.productService.getProductDetails(productId, isShowDevVersion);
- }
- else {
- productDetail$ = this.productService.getBestMatchProductDetailsWithVersion(
+ productDetail$ = this.productService.getProductDetails(
productId,
- targetVersion
+ isShowDevVersion
);
+ } else {
+ productDetail$ =
+ this.productService.getBestMatchProductDetailsWithVersion(
+ productId,
+ targetVersion
+ );
}
return productDetail$.pipe(
map((response: ProductDetail) => this.setDefaultVendorImage(response))
);
}
- ngAfterViewInit(): void {
- this.checkMediaSize();
- this.productFeedbackService.findProductFeedbackOfUser().subscribe(() => {
- this.route.queryParams.subscribe(params => {
- this.showPopup = params['showPopup'] === 'true';
- if (this.showPopup && this.authService.getToken()) {
- this.appModalService
- .openAddFeedbackDialog()
- .then(() => this.removeQueryParam())
- .catch(() => this.removeQueryParam());
- }
- });
- });
- }
-
getContent(value: string): boolean {
const content = this.productModuleContent();
@@ -263,7 +299,6 @@ export class ProductDetailComponent {
),
dependency: content.isDependency
};
-
return conditions[value] ?? false;
}
@@ -272,7 +307,7 @@ export class ProductDetailComponent {
return !content || Object.keys(content).length === 0;
}
- loadDetailTabs(selectedVersion: string) {
+ loadDetailTabs(selectedVersion: string): void {
let version = selectedVersion || this.productDetail().newestReleaseVersion;
version = version.replace(VERSION.displayPrefix, '');
this.productService
@@ -284,17 +319,17 @@ export class ProductDetailComponent {
});
}
- onTabChange(event: string) {
+ onTabChange(event: string): void {
this.setActiveTab(event);
this.isTabDropdownShown.update(value => !value);
this.onTabDropdownShown();
}
- getSelectedTabLabel() {
+ getSelectedTabLabel(): string {
return CommonUtils.getLabel(this.activeTab, PRODUCT_DETAIL_TABS);
}
- updateDropdownSelection() {
+ updateDropdownSelection(): void {
const dropdown = document.getElementById(
'tab-group-dropdown'
) as HTMLSelectElement;
@@ -303,7 +338,7 @@ export class ProductDetailComponent {
}
}
- setActiveTab(tab: string) {
+ setActiveTab(tab: string): void {
this.activeTab = tab;
const hash = '#tab-' + tab;
const path = window.location.pathname;
@@ -322,16 +357,16 @@ export class ProductDetailComponent {
localStorage.setItem(STORAGE_ITEM, JSON.stringify(savedTab));
}
- onShowInfoContent() {
+ onShowInfoContent(): void {
this.isDropdownOpen.update(value => !value);
}
- onTabDropdownShown() {
+ onTabDropdownShown(): void {
this.isTabDropdownShown.set(!this.isTabDropdownShown());
}
@HostListener('document:click', ['$event'])
- handleClickOutside(event: MouseEvent) {
+ handleClickOutside(event: MouseEvent): void {
const formSelect =
this.elementRef.nativeElement.querySelector('.form-select');
@@ -345,11 +380,11 @@ export class ProductDetailComponent {
}
@HostListener('window:resize', ['$event'])
- onResize() {
+ onResize(): void {
this.checkMediaSize();
}
- checkMediaSize() {
+ checkMediaSize(): void {
const mediaQuery = window.matchMedia('(max-width: 767px)');
if (mediaQuery.matches) {
this.isMobileMode.set(true);
@@ -358,7 +393,7 @@ export class ProductDetailComponent {
}
}
- onClickRateBtn() {
+ onClickRateBtn(): void {
const productId = this.productDetailService.productId();
if (this.authService.getToken()) {
this.appModalService.openAddFeedbackDialog();
@@ -367,7 +402,7 @@ export class ProductDetailComponent {
}
}
- receiveInstallationCountData(data: number) {
+ receiveInstallationCountData(data: number): void {
this.installationCount = data;
}
@@ -380,12 +415,13 @@ export class ProductDetailComponent {
updateWebBrowserTitle() {
if (this.productDetail().names !== undefined) {
- const title = this.productDetail().names[this.languageService.selectedLanguage()];
+ const title =
+ this.productDetail().names[this.languageService.selectedLanguage()];
this.titleService.setTitle(title);
}
}
- getDisplayedTabsSignal() {
+ getDisplayedTabsSignal(): ItemDropdown[] {
this.updateWebBrowserTitle();
const displayedTabs: ItemDropdown[] = [];
for (const detailTab of this.detailTabs) {
@@ -406,15 +442,13 @@ export class ProductDetailComponent {
private setDefaultVendorImage(productDetail: ProductDetail): ProductDetail {
const { vendorImage, vendorImageDarkMode } = productDetail;
- if (!(productDetail.vendorImage || productDetail.vendorImageDarkMode )) {
+ if (!(productDetail.vendorImage || productDetail.vendorImageDarkMode)) {
productDetail.vendorImage = DEFAULT_VENDOR_IMAGE_BLACK;
productDetail.vendorImageDarkMode = DEFAULT_VENDOR_IMAGE;
- }
- else {
+ } else {
productDetail.vendorImage = vendorImage || vendorImageDarkMode;
productDetail.vendorImageDarkMode = vendorImageDarkMode || vendorImage;
}
-
return productDetail;
}
}
diff --git a/marketplace-ui/src/app/modules/product/product.component.html b/marketplace-ui/src/app/modules/product/product.component.html
index 17e919271..a0ea7844c 100644
--- a/marketplace-ui/src/app/modules/product/product.component.html
+++ b/marketplace-ui/src/app/modules/product/product.component.html
@@ -47,6 +47,6 @@
-
-
-
-
-
-
-
+
+
+
-
+ @if (displayedTabsSignal().length > 0) {
+
+ }
+
+
+
+
+
+
-
+
-
+
+
-
+
-
-
-
+
+
@for (displayedTab of displayedTabsSignal(); track $index) {
- }
-
@if (displayedTab.value === 'dependency' && productDetail().productModuleContent) {
-
+ [selectedVersion]="
+ selectedVersion
+ ">
} @else {
-
}
}
-
-
+
-
- @if (productDetail() && productFeedbackService.totalElements() > 0) {
-
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 b3e14d5ac..749209234 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
@@ -20,7 +20,8 @@ import {
MOCK_PRODUCT_DETAIL,
MOCK_CRON_JOB_PRODUCT_DETAIL,
MOCK_PRODUCT_MODULE_CONTENT,
- MOCK_PRODUCTS
+ MOCK_PRODUCTS,
+ MOCK_FEEDBACK_API_RESPONSE
} from '../../../shared/mocks/mock-data';
import { ProductService } from '../product.service';
import { ProductDetailComponent } from './product-detail.component';
@@ -31,6 +32,13 @@ import { ProductDetailActionType } from '../../../shared/enums/product-detail-ac
import { LanguageService } from '../../../core/services/language/language.service';
import { Language } from '../../../shared/enums/language.enum';
import { MatomoTestingModule } from 'ngx-matomo-client/testing';
+import { AuthService } from '../../../auth/auth.service';
+import { AppModalService } from '../../../shared/services/app-modal.service';
+import { ProductFeedbackService } from './product-detail-feedback/product-feedbacks-panel/product-feedback.service';
+import { ProductStarRatingService } from './product-detail-feedback/product-star-rating-panel/product-star-rating.service';
+import { FeedbackApiResponse } from '../../../shared/models/apis/feedback-response.model';
+import { StarRatingCounting } from '../../../shared/models/star-rating-counting.model';
+import { Feedback } from '../../../shared/models/feedback.model';
const products = MOCK_PRODUCTS._embedded.products;
declare const viewport: Viewport;
@@ -41,6 +49,10 @@ describe('ProductDetailComponent', () => {
let routingQueryParamService: jasmine.SpyObj
-
+ + @if (!(productDetail() | emptyProductDetailPipe)) { +
- 
-
+
-
-
- {{ productDetailService.noFeedbackLabel() | translate }}
-
-
-
- {{ 'common.feedback.noFeedbackSecondLabel' | translate }}
-
-
+ + @if (!(productDetail() | emptyProductDetailPipe)) { +
+ @if (productDetail() && productFeedbackService.totalElements() > 0) {
+
}
-
+
+ }
+
+
+
+
+
+ {{ productDetailService.noFeedbackLabel() | translate }}
+
+
+
+ {{ 'common.feedback.noFeedbackSecondLabel' | translate }}
+
+
-
-
\ No newline at end of file
+@if (isLoading()) {
+
+
+}
diff --git a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.scss b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.scss
index ea8350003..4298d17dc 100644
--- a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.scss
+++ b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.scss
@@ -1,16 +1,78 @@
-.spinner-container {
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
+.dot-stretching {
+ position: relative;
+ width: 10px;
+ height: 10px;
+ border-radius: 5px;
+ background-color: var(--ivy-primary-bg);
+ color: var(--ivy-primary-bg);
+ transform: scale(1.25, 1.25);
+ animation: dot-stretching 1s infinite ease-in;
+}
+
+.dot-stretching,
+.dot-stretching::before,
+.dot-stretching::after{
+ width: 10px;
+ height: 10px;
+ border-radius: 5px;
+ background-color: var(--ivy-primary-bg);
+ color: var(--ivy-primary-bg);
+}
+
+.dot-stretching::before,
+.dot-stretching::after {
+ content: '';
+ display: inline-block;
+ position: absolute;
top: 0;
- left: 0;
- background: rgba(0, 0, 0, 0.32);
- z-index: 2000;
}
-.spinner-border {
- width: 4rem;
- height: 4rem;
+
+.dot-stretching::before {
+ animation: dot-stretching-before 1s infinite ease-in;
+}
+
+.dot-stretching::after {
+ animation: dot-stretching-after 1s infinite ease-in;
+}
+
+.stage {
+ width: 0px;
+}
+
+@keyframes dot-stretching {
+ 0% {
+ transform: scale(1.25, 1.25);
+ }
+ 50%,
+ 60% {
+ transform: scale(0.8, 0.8);
+ }
+ 100% {
+ transform: scale(1.25, 1.25);
+ }
+}
+@keyframes dot-stretching-before {
+ 0% {
+ transform: translate(0) scale(0.7, 0.7);
+ }
+ 50%,
+ 60% {
+ transform: translate(-20px) scale(1, 1);
+ }
+ 100% {
+ transform: translate(0) scale(0.7, 0.7);
+ }
+}
+@keyframes dot-stretching-after {
+ 0% {
+ transform: translate(0) scale(0.7, 0.7);
+ }
+ 50%,
+ 60% {
+ transform: translate(20px) scale(1, 1);
+ }
+ 100% {
+ transform: translate(0) scale(0.7, 0.7);
+ }
}
diff --git a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts
index 3578b8ac9..4a7fde2c6 100644
--- a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts
+++ b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts
@@ -1,6 +1,7 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { LoadingSpinnerComponent } from './loading-spinner.component';
+import { LoadingComponentId } from '../../enums/loading-component-id';
describe('LoadingSpinnerComponent', () => {
let component: LoadingSpinnerComponent;
@@ -16,30 +17,30 @@ describe('LoadingSpinnerComponent', () => {
fixture.detectChanges();
});
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-
- it('should have isFixPosition set to true by default', () => {
- expect(component.isFixPosition).toBe(true);
- });
+ it('should create', () => expect(component).toBeTruthy());
- it('should apply position-fixed class when isFixPosition is true', () => {
- const containerElement = fixture.debugElement.query(By.css('.spinner-container'));
- expect(containerElement.nativeElement.classList.contains('position-fixed')).toBe(true);
- expect(containerElement.nativeElement.classList.contains('position-absolute')).toBe(false);
+ it('should display when isLoading state is true', () => {
+ component.key = LoadingComponentId.LANDING_PAGE;
+ component.loadingService.showLoading(LoadingComponentId.LANDING_PAGE);
+ fixture.detectChanges();
+ expect(component.isLoading()).toBeTrue();
});
- it('should apply position-absolute class when isFixPosition is false', () => {
- component.isFixPosition = false;
+ it('should display when isLoading state is false', () => {
+ component.key = LoadingComponentId.LANDING_PAGE;
+ component.loadingService.hideLoading(LoadingComponentId.LANDING_PAGE);
fixture.detectChanges();
- const containerElement = fixture.debugElement.query(By.css('.spinner-container'));
- expect(containerElement.nativeElement.classList.contains('position-absolute')).toBe(true);
- expect(containerElement.nativeElement.classList.contains('position-fixed')).toBe(false);
+ expect(component.isLoading()).toBeFalse();
});
- it('should contain a spinner-border element', () => {
- const spinnerElement = fixture.debugElement.query(By.css('.spinner-border'));
- expect(spinnerElement).toBeTruthy();
+ it('container class should come from input', () => {
+ component.key = LoadingComponentId.LANDING_PAGE;
+ component.containerClasses = 'spinner-container';
+ component.loadingService.showLoading(LoadingComponentId.LANDING_PAGE);
+ fixture.detectChanges();
+ const containerElement = fixture.debugElement.query(
+ By.css('.spinner-container')
+ );
+ expect(containerElement.nativeElement).toBeTruthy();
});
});
diff --git a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.ts b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.ts
index 182731f23..cd3cc6d8b 100644
--- a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.ts
+++ b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.ts
@@ -1,16 +1,15 @@
-import { Component, Input } from '@angular/core';
-import { NgClass } from '@angular/common';
+import { Component, computed, inject, Input } from '@angular/core';
+import { LoadingService } from '../../../core/services/loading/loading.service';
@Component({
selector: 'app-loading-spinner',
standalone: true,
- imports: [
- NgClass
- ],
templateUrl: './loading-spinner.component.html',
styleUrl: './loading-spinner.component.scss'
})
export class LoadingSpinnerComponent {
- @Input()
- isFixPosition = true;
+ @Input() key = '';
+ @Input() containerClasses = '';
+ loadingService = inject(LoadingService);
+ isLoading = computed(() => this.loadingService.loadingStates()[this.key]);
}
diff --git a/marketplace-ui/src/app/shared/enums/loading-component-id.ts b/marketplace-ui/src/app/shared/enums/loading-component-id.ts
new file mode 100644
index 000000000..dedca8eb2
--- /dev/null
+++ b/marketplace-ui/src/app/shared/enums/loading-component-id.ts
@@ -0,0 +1,6 @@
+export enum LoadingComponentId {
+ LANDING_PAGE = 'landing-page',
+ PRODUCT_DETAIL_INFORMATION = 'product-detail-information',
+ PRODUCT_VERSION = 'product-version',
+ DETAIL_PAGE = 'detail-page'
+}
diff --git a/marketplace-ui/src/app/shared/mocks/mock-data.ts b/marketplace-ui/src/app/shared/mocks/mock-data.ts
index cf319dc7e..e58cec921 100644
--- a/marketplace-ui/src/app/shared/mocks/mock-data.ts
+++ b/marketplace-ui/src/app/shared/mocks/mock-data.ts
@@ -1,7 +1,9 @@
+import { FeedbackApiResponse } from '../models/apis/feedback-response.model';
import { ProductApiResponse } from '../models/apis/product-response.model';
import { ExternalDocument } from '../models/external-document.model';
import { ProductDetail } from '../models/product-detail.model';
import { ProductModuleContent } from '../models/product-module-content.model';
+import { StarRatingCounting } from '../models/star-rating-counting.model';
export const MOCK_PRODUCTS = {
_embedded: {
@@ -226,7 +228,8 @@ export const MOCK_CRON_JOB_PRODUCT_DETAIL: ProductDetail = {
de: 'Das Cron-Job-Utility übernimmt die automatische Verwaltung deiner zeitgesteuerten Aufgaben.',
en: 'Cron Job Utility handles your scheduled jobs autonomously.'
},
- logoUrl: 'https://raw.githubusercontent.com/axonivy-market/market/feature/MARP-463-Multilingualism-for-Website/market/utils/cronjob/logo.png',
+ logoUrl:
+ 'https://raw.githubusercontent.com/axonivy-market/market/feature/MARP-463-Multilingualism-for-Website/market/utils/cronjob/logo.png',
type: 'util',
tags: ['utils'],
vendor: 'Axon Ivy AG',
@@ -234,7 +237,8 @@ export const MOCK_CRON_JOB_PRODUCT_DETAIL: ProductDetail = {
newestReleaseVersion: 'v10.0.4',
cost: 'Free',
sourceUrl: 'https://github.com/axonivy-market/cronjob',
- statusBadgeUrl: 'https://github.com/axonivy-market/cronjob/actions/workflows/ci.yml/badge.svg',
+ statusBadgeUrl:
+ 'https://github.com/axonivy-market/cronjob/actions/workflows/ci.yml/badge.svg',
language: 'English',
industry: 'Cross-Industry',
compatibility: '10.0+',
@@ -246,10 +250,10 @@ export const MOCK_CRON_JOB_PRODUCT_DETAIL: ProductDetail = {
en: '**Cron Job** is a job-firing schedule that recurs based on calendar-like notions.\n\nThe [Quartz framework](http://www.quartz-scheduler.org/) is used as underlying scheduler framework.\n\nWith Cron Job, you can specify firing-schedules such as “every Friday at noon”, or “every weekday and 9:30 am”, or even “every 5 minutes between 9:00 am and 10:00 am on every Monday, Wednesday and Friday during January”.\n\nFor more details about Cron Expressions please refer to [Lesson 6: CronTrigger](http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-06.html)'
},
setup: {
- en: 'No special setup is needed for this demo. Only start the Engine and watch out the logging which will be updated every 5 seconds with the following logging entry:\n\n```\n\nCron Job ist started at: 2023-01-27 10:43:20.\n\n```',
+ en: 'No special setup is needed for this demo. Only start the Engine and watch out the logging which will be updated every 5 seconds with the following logging entry:\n\n```\n\nCron Job ist started at: 2023-01-27 10:43:20.\n\n```'
},
demo: {
- en: 'In this demo, the CronByGlobalVariableTriggerStartEventBean is defined as the Java class to be executed in the Ivy Program Start element.\n\n\n\nThis bean gets a cron expression via the variable defined as Cron expression and it will schedule by using the expression.\n\n\n\nFor this demo, the Cron expression is defining the time to start the cron that simply fires every 5 seconds.\n\n```\n\n demoStartCronPattern: 0/5 * * * * ?\n\n```',
+ en: 'In this demo, the CronByGlobalVariableTriggerStartEventBean is defined as the Java class to be executed in the Ivy Program Start element.\n\n\n\nThis bean gets a cron expression via the variable defined as Cron expression and it will schedule by using the expression.\n\n\n\nFor this demo, the Cron expression is defining the time to start the cron that simply fires every 5 seconds.\n\n```\n\n demoStartCronPattern: 0/5 * * * * ?\n\n```'
},
isDependency: true,
name: 'cron job',
@@ -280,7 +284,8 @@ export const MOCK_PRODUCT_DETAIL: ProductDetail = {
de: "TODO Atlassian's Jira connector lets you track issues directly from the Axon Ivy platform."
},
installationCount: 1,
- logoUrl: 'https://raw.githubusercontent.com/axonivy-market/market/master/market/connector/jira/logo.png',
+ logoUrl:
+ 'https://raw.githubusercontent.com/axonivy-market/market/master/market/connector/jira/logo.png',
type: 'connector',
tags: ['helper'],
vendor: 'FROX AG',
@@ -289,7 +294,8 @@ export const MOCK_PRODUCT_DETAIL: ProductDetail = {
newestReleaseVersion: 'v10.0.0',
cost: 'Free',
sourceUrl: 'https://github.com/axonivy-market/jira-connector',
- statusBadgeUrl: 'https://github.com/axonivy-market/jira-connector/actions/workflows/ci.yml/badge.svg',
+ statusBadgeUrl:
+ 'https://github.com/axonivy-market/jira-connector/actions/workflows/ci.yml/badge.svg',
language: 'English',
industry: 'Cross-Industry',
compatibility: '9.2+',
@@ -300,17 +306,17 @@ export const MOCK_PRODUCT_DETAIL: ProductDetail = {
en: "Axon Ivy's [Atlassian Jira Connector ](https://www.atlassian.com/software/jira) gives you full power to track issues within your process work. The connector:\n\n- Features three main functionalities (create comment, create issue, and get issue).\n- Provides access to the core API of Atlassian Jira.\n- Supports you with an easy-to-copy demo implementation to reduce your integration effort.\n- Enables low code citizen developers to integrate issue tracking tools without writing a single line of code."
},
setup: {
- en: 'Open the `Config/variables.yaml` in your Axon Ivy Designer and paste the\ncode below and adjust the values to your environment.\n\n```\nVariables:\n\n jira-connector:\n \n # Url to the Jira server\n Url: "https://localhost"\n\n # Username to connect to the Jira server\n Username: "admin"\n\n # Password to connect to the Jira server\n Password: "1234"\n```',
+ en: 'Open the `Config/variables.yaml` in your Axon Ivy Designer and paste the\ncode below and adjust the values to your environment.\n\n```\nVariables:\n\n jira-connector:\n \n # Url to the Jira server\n Url: "https://localhost"\n\n # Username to connect to the Jira server\n Username: "admin"\n\n # Password to connect to the Jira server\n Password: "1234"\n```'
},
demo: {
- en: '\n',
+ en: '\n'
},
isDependency: true,
name: 'Jira Connector',
groupId: 'com.axonivy.connector.jira',
artifactId: 'jira-connector',
type: 'iar',
- productId: 'jira-connector',
+ productId: 'jira-connector'
},
mavenDropins: false,
_links: {
@@ -329,3 +335,24 @@ export const MOCK_EXTERNAL_DOCUMENT: ExternalDocument = {
artifactName: 'Portal Guide',
relativeLink: '/market-cache/portal/portal-guide/10.0.0/doc/index.html'
};
+
+export const MOCK_FEEDBACK_API_RESPONSE: FeedbackApiResponse = {
+ _embedded: {
+ feedbacks: [
+ {
+ content: 'cool stuff',
+ rating: 5,
+ productId: 'portal'
+ }
+ ]
+ },
+ _links: {
+ self: { href: '/feedbacks' }
+ },
+ page: {
+ size: 10,
+ totalElements: 1,
+ totalPages: 1,
+ number: 0
+ }
+};
\ No newline at end of file
diff --git a/marketplace-ui/src/app/shared/pipes/empty-product-detail.pipe.ts b/marketplace-ui/src/app/shared/pipes/empty-product-detail.pipe.ts
new file mode 100644
index 000000000..d83f056b7
--- /dev/null
+++ b/marketplace-ui/src/app/shared/pipes/empty-product-detail.pipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { ProductDetail } from "../models/product-detail.model";
+
+@Pipe({
+ standalone: true,
+ name: 'emptyProductDetailPipe'
+})
+export class EmptyProductDetailPipe
+ implements PipeTransform
+{
+ transform(productDetail: ProductDetail): boolean {
+ return !productDetail || Object.keys(productDetail).length === 0;
+ }
+}
\ No newline at end of file
diff --git a/marketplace-ui/src/app/shared/pipes/missing-readme-content.pipe.ts b/marketplace-ui/src/app/shared/pipes/missing-readme-content.pipe.ts
deleted file mode 100644
index 72f8d166d..000000000
--- a/marketplace-ui/src/app/shared/pipes/missing-readme-content.pipe.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core";
-import { ProductModuleContent } from "../models/product-module-content.model";
-
-@Pipe({
- standalone: true,
- name: 'missingReadmeContent'
-})
-export class MissingReadmeContentPipe implements PipeTransform {
- transform(productModuleContent: ProductModuleContent): boolean {
- return (
- !productModuleContent || Object.keys(productModuleContent).length === 0
- );
- }
-}
\ No newline at end of file
diff --git a/marketplace-ui/src/app/shared/pipes/product-type.pipe.ts b/marketplace-ui/src/app/shared/pipes/product-type.pipe.ts
index 7c922ba25..bdba94750 100644
--- a/marketplace-ui/src/app/shared/pipes/product-type.pipe.ts
+++ b/marketplace-ui/src/app/shared/pipes/product-type.pipe.ts
@@ -6,6 +6,10 @@ import { Pipe, PipeTransform } from '@angular/core';
})
export class ProductTypePipe implements PipeTransform {
transform(type: string, _args?: []): string {
- return `common.filter.value.${type}`;
+ let i18nKey = '';
+ if (type) {
+ i18nKey = `common.filter.value.${type}`;
+ }
+ return i18nKey;
}
}
diff --git a/marketplace-ui/src/app/shared/services/app-modal.service.ts b/marketplace-ui/src/app/shared/services/app-modal.service.ts
index 999b2d5f7..12677724f 100644
--- a/marketplace-ui/src/app/shared/services/app-modal.service.ts
+++ b/marketplace-ui/src/app/shared/services/app-modal.service.ts
@@ -10,7 +10,7 @@ import { SuccessDialogComponent } from '../../modules/product/product-detail/pro
export class AppModalService {
private readonly modalService = inject(NgbModal);
- openShowFeedbacksDialog() {
+ openShowFeedbacksDialog(): void {
this.modalService.open(ShowFeedbacksDialogComponent, {
centered: true,
modalDialogClass: 'show-feedbacks-modal-dialog',
@@ -30,7 +30,7 @@ export class AppModalService {
return addFeedbackDialog.result;
}
- openSuccessDialog() {
+ openSuccessDialog(): void {
this.modalService.open(SuccessDialogComponent, {
fullscreen: 'md',
centered: true,
diff --git a/marketplace-ui/src/app/shared/services/routing.query.param.service.ts b/marketplace-ui/src/app/shared/services/routing.query.param.service.ts
index 47ccc4eee..c07d08dae 100644
--- a/marketplace-ui/src/app/shared/services/routing.query.param.service.ts
+++ b/marketplace-ui/src/app/shared/services/routing.query.param.service.ts
@@ -11,9 +11,7 @@ export class RoutingQueryParamService {
isDesignerEnv = computed(() => this.isDesigner());
designerVersion = signal('');
- constructor(
- private readonly router: Router
- ) {
+ constructor(private readonly router: Router) {
this.getNavigationStartEvent().subscribe(() => {
if (!this.isDesigner()) {
this.isDesigner.set(
@@ -25,7 +23,7 @@ export class RoutingQueryParamService {
});
}
- checkSessionStorageForDesignerVersion(params: Params) {
+ checkSessionStorageForDesignerVersion(params: Params): void {
const versionParam =
params[DESIGNER_SESSION_STORAGE_VARIABLE.ivyVersionParamName];
if (versionParam !== undefined) {
@@ -37,7 +35,7 @@ export class RoutingQueryParamService {
}
}
- checkSessionStorageForDesignerEnv(params: Params) {
+ checkSessionStorageForDesignerEnv(params: Params): void {
const ivyViewerParam =
params[DESIGNER_SESSION_STORAGE_VARIABLE.ivyViewerParamName];
if (
@@ -51,7 +49,7 @@ export class RoutingQueryParamService {
}
}
- getDesignerVersionFromSessionStorage() {
+ getDesignerVersionFromSessionStorage(): string {
if (this.designerVersion() === '') {
this.designerVersion.set(
sessionStorage.getItem(
@@ -62,7 +60,7 @@ export class RoutingQueryParamService {
return this.designerVersion();
}
- isDesignerViewer() {
+ isDesignerViewer(): boolean {
if (!this.isDesigner()) {
this.isDesigner.set(
sessionStorage.getItem(
@@ -73,7 +71,7 @@ export class RoutingQueryParamService {
return this.isDesigner();
}
- getNavigationStartEvent(): Observable
+
+
+
+
+