MARP-1577 marketplace cannot install market item on the web browser o…

…f the designer (#253)

marketplace-ui/src/app/app.component.spec.ts

@@ -31,8 +31,8 @@ describe('AppComponent', () => {
       [
         'getNavigationStartEvent',
         'isDesignerEnv',
-        'checkCookieForDesignerEnv',
-        'checkCookieForDesignerVersion'
+        'checkSessionStorageForDesignerEnv',
+        'checkSessionStorageForDesignerVersion'
       ]
     );
 
@@ -89,7 +89,7 @@ describe('AppComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should subscribe to query params and check cookies if not in designer environment', () => {
+  it('should subscribe to query params and check session strorage if not in designer environment', () => {
     routingQueryParamService.isDesignerEnv.and.returnValue(false);
     const params = { someParam: 'someValue' };
 
@@ -103,10 +103,10 @@ describe('AppComponent', () => {
     navigationStartSubject.next(new NavigationStart(1, 'testUrl'));
 
     expect(
-      routingQueryParamService.checkCookieForDesignerEnv
+      routingQueryParamService.checkSessionStorageForDesignerEnv
     ).toHaveBeenCalledWith(params);
     expect(
-      routingQueryParamService.checkCookieForDesignerVersion
+      routingQueryParamService.checkSessionStorageForDesignerVersion
     ).toHaveBeenCalledWith(params);
   });
 
@@ -117,10 +117,10 @@ describe('AppComponent', () => {
     navigationStartSubject.next(new NavigationStart(1, 'testUrl'));
 
     expect(
-      routingQueryParamService.checkCookieForDesignerEnv
+      routingQueryParamService.checkSessionStorageForDesignerEnv
     ).not.toHaveBeenCalled();
     expect(
-      routingQueryParamService.checkCookieForDesignerVersion
+      routingQueryParamService.checkSessionStorageForDesignerVersion
     ).not.toHaveBeenCalled();
   });
 

marketplace-ui/src/app/app.component.ts

@@ -40,8 +40,8 @@ export class AppComponent {
     this.routingQueryParamService.getNavigationStartEvent().subscribe(() => {
       if (!this.routingQueryParamService.isDesignerEnv()) {
         this.route.queryParams.subscribe(params => {
-          this.routingQueryParamService.checkCookieForDesignerEnv(params);
-          this.routingQueryParamService.checkCookieForDesignerVersion(params);
+          this.routingQueryParamService.checkSessionStorageForDesignerEnv(params);
+          this.routingQueryParamService.checkSessionStorageForDesignerVersion(params);
         });
       }
     });

marketplace-ui/src/app/auth/auth.service.spec.ts

@@ -4,7 +4,6 @@ import { Router } from '@angular/router';
 import { CookieService } from 'ngx-cookie-service';
 import { AuthService } from './auth.service';
 import { environment } from '../../environments/environment';
-import { of } from 'rxjs';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { TOKEN_KEY } from '../shared/constants/common.constant';
 

marketplace-ui/src/app/core/interceptors/api.interceptor.spec.ts

@@ -5,7 +5,7 @@ import { ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 import { ProductComponent } from '../../modules/product/product.component';
-import { DESIGNER_COOKIE_VARIABLE } from '../../shared/constants/common.constant';
+import { DESIGNER_SESSION_STORAGE_VARIABLE } from '../../shared/constants/common.constant';
 import { apiInterceptor } from './api.interceptor';
 import { MatomoTestingModule } from 'ngx-matomo-client/testing';
 
@@ -29,7 +29,7 @@ describe('AuthInterceptor', () => {
           provide: ActivatedRoute,
           useValue: {
             queryParams: of({
-              [DESIGNER_COOKIE_VARIABLE.restClientParamName]: true
+              [DESIGNER_SESSION_STORAGE_VARIABLE.restClientParamName]: true
             })
           }
         }

marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.html

@@ -131,10 +131,14 @@
                   const selectedItemElement = document.querySelector('.install-designer-dropdown');
                   if (selectedItemElement) {
                   const metaDataJsonUrl = selectedItemElement.getAttribute('metaDataJsonUrl');
-                  install(metaDataJsonUrl);
+                    try {
+                      install(metaDataJsonUrl);
+                    } catch (error) {
+                      event.stopImmediatePropagation();
+                    }
                   }
                 }
-                installInDesigner();" [ngClass]="themeService.isDarkMode() ? 'btn-light' : 'btn-primary'">
+                installInDesigner(event);" [ngClass]="themeService.isDarkMode() ? 'btn-light' : 'btn-primary'">
         {{ 'common.product.detail.install.buttonLabelInDesigner' | translate }}
       </button>
     </div>

marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts

@@ -234,7 +234,7 @@ export class ProductDetailVersionActionComponent implements AfterViewInit {
     this.productService
       .sendRequestToUpdateInstallationCount(
         this.productId,
-        this.routingQueryParamService.getDesignerVersionFromCookie()
+        this.routingQueryParamService.getDesignerVersionFromSessionStorage()
       )
       .subscribe((data: number) => this.installationCount.emit(data));
   }

marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts

@@ -45,7 +45,7 @@ describe('ProductDetailComponent', () => {
   beforeEach(async () => {
     const routingQueryParamServiceSpy = jasmine.createSpyObj(
       'RoutingQueryParamService',
-      ['getDesignerVersionFromCookie', 'isDesignerEnv']
+      ['getDesignerVersionFromSessionStorage', 'isDesignerEnv']
     );
 
     const languageServiceSpy = jasmine.createSpyObj(
@@ -130,10 +130,10 @@ describe('ProductDetailComponent', () => {
     expect(component.selectedVersion).toEqual('Version 10.0.0');
   });
 
-  it('should get corresponding version from cookie', () => {
+  it('should get corresponding version from session strorage', () => {
     const targetVersion = '1.0';
     const productId = 'Portal';
-    routingQueryParamService.getDesignerVersionFromCookie.and.returnValue(
+    routingQueryParamService.getDesignerVersionFromSessionStorage.and.returnValue(
       targetVersion
     );
     component.getProductById(productId, false).subscribe(productDetail => {

marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts

@@ -204,7 +204,7 @@ export class ProductDetailComponent {
   }
 
   getProductById(productId: string, isShowDevVersion: boolean): Observable<ProductDetail> {
-    const targetVersion = this.routingQueryParamService.getDesignerVersionFromCookie();
+    const targetVersion = this.routingQueryParamService.getDesignerVersionFromSessionStorage();
     let productDetail$: Observable<ProductDetail>;
     if (!targetVersion) {
       productDetail$ = this.productService.getProductDetails(productId, isShowDevVersion);

marketplace-ui/src/app/modules/product/product.component.spec.ts

@@ -15,7 +15,7 @@ import { ProductComponent } from './product.component';
 import { ProductService } from './product.service';
 import { MockProductService } from '../../shared/mocks/mock-services';
 import { RoutingQueryParamService } from '../../shared/services/routing.query.param.service';
-import { DESIGNER_COOKIE_VARIABLE } from '../../shared/constants/common.constant';
+import { DESIGNER_SESSION_STORAGE_VARIABLE } from '../../shared/constants/common.constant';
 import { ItemDropdown } from '../../shared/models/item-dropdown.model';
 import { By } from '@angular/platform-browser';
 import { Location } from '@angular/common';
@@ -59,8 +59,8 @@ describe('ProductComponent', () => {
         'getNavigationStartEvent',
         'isDesigner',
         'isDesignerEnv',
-        'checkCookieForDesignerEnv',
-        'checkCookieForDesignerVersion'
+        'checkSessionStorageForDesignerEnv',
+        'checkSessionStorageForDesignerVersion'
       ]
     );
 
@@ -75,7 +75,7 @@ describe('ProductComponent', () => {
           provide: ActivatedRoute,
           useValue: {
             queryParams: of({
-              [DESIGNER_COOKIE_VARIABLE.restClientParamName]: true
+              [DESIGNER_SESSION_STORAGE_VARIABLE.restClientParamName]: true
             })
           }
         },
@@ -210,7 +210,7 @@ describe('ProductComponent', () => {
 
   it('should set isRESTClient true based on query params and designer environment', () => {
     component.route.queryParams = of({
-      [DESIGNER_COOKIE_VARIABLE.restClientParamName]: 'resultsOnly',
+      [DESIGNER_SESSION_STORAGE_VARIABLE.restClientParamName]: 'resultsOnly',
     });
 
     routingQueryParamService.isDesignerEnv.and.returnValue(true);
@@ -222,8 +222,8 @@ describe('ProductComponent', () => {
 
   it('should not display marketplace introduction in designer', () => {
     component.route.queryParams = of({
-      [DESIGNER_COOKIE_VARIABLE.restClientParamName]: 'resultsOnly',
-      [DESIGNER_COOKIE_VARIABLE.searchParamName]: 'search'
+      [DESIGNER_SESSION_STORAGE_VARIABLE.restClientParamName]: 'resultsOnly',
+      [DESIGNER_SESSION_STORAGE_VARIABLE.searchParamName]: 'search'
     });
 
     component.isDesignerEnvironment = true;

marketplace-ui/src/app/modules/product/product.component.ts

@@ -31,7 +31,7 @@ import { RoutingQueryParamService } from '../../shared/services/routing.query.pa
 import {
   DEFAULT_PAGEABLE,
   DEFAULT_PAGEABLE_IN_REST_CLIENT,
-  DESIGNER_COOKIE_VARIABLE
+  DESIGNER_SESSION_STORAGE_VARIABLE
 } from '../../shared/constants/common.constant';
 import { ItemDropdown } from '../../shared/models/item-dropdown.model';
 
@@ -80,12 +80,13 @@ export class ProductComponent implements AfterViewInit, OnDestroy {
   constructor() {
     this.route.queryParams.subscribe(params => {
       this.isRESTClient.set(
-        DESIGNER_COOKIE_VARIABLE.restClientParamName in params &&
+        DESIGNER_SESSION_STORAGE_VARIABLE.restClientParamName in params &&
           this.isDesignerEnvironment
       );
 
-      if (params[DESIGNER_COOKIE_VARIABLE.searchParamName] != null) {
-        this.criteria.search = params[DESIGNER_COOKIE_VARIABLE.searchParamName];
+      if (params[DESIGNER_SESSION_STORAGE_VARIABLE.searchParamName] != null) {
+        this.criteria.search =
+          params[DESIGNER_SESSION_STORAGE_VARIABLE.searchParamName];
       }
     });
 

marketplace-ui/src/app/shared/constants/common.constant.ts

@@ -182,7 +182,7 @@ export const FEEDBACK_SORT_TYPES: ItemDropdown<FeedbackSortType>[] = [
   }
 ];
 
-export const DESIGNER_COOKIE_VARIABLE = {
+export const DESIGNER_SESSION_STORAGE_VARIABLE = {
   ivyViewerParamName: 'ivy-viewer',
   ivyVersionParamName: 'ivy-version',
   defaultDesignerViewer: 'designer-market',

marketplace-ui/src/app/shared/services/routing.query.param.service.spec.ts

@@ -1,20 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 import { Router, NavigationStart } from '@angular/router';
-import { CookieService } from 'ngx-cookie-service';
 import { RoutingQueryParamService } from './routing.query.param.service';
 import { Subject } from 'rxjs';
-import { DESIGNER_COOKIE_VARIABLE } from '../constants/common.constant';
+import { DESIGNER_SESSION_STORAGE_VARIABLE } from '../constants/common.constant';
 
 describe('RoutingQueryParamService', () => {
   let service: RoutingQueryParamService;
-  let cookieService: jasmine.SpyObj<CookieService>;
   let eventsSubject: Subject<NavigationStart>;
+  let mockStorage: { [key: string]: string };
 
   beforeEach(() => {
-    const cookieServiceSpy = jasmine.createSpyObj('CookieService', [
-      'get',
-      'set'
-    ]);
     eventsSubject = new Subject<NavigationStart>();
     const routerSpy = jasmine.createSpyObj('Router', [], {
       events: eventsSubject.asObservable()
@@ -23,59 +18,61 @@ describe('RoutingQueryParamService', () => {
     TestBed.configureTestingModule({
       providers: [
         RoutingQueryParamService,
-        { provide: CookieService, useValue: cookieServiceSpy },
         { provide: Router, useValue: routerSpy }
       ]
     });
     service = TestBed.inject(RoutingQueryParamService);
-    cookieService = TestBed.inject(
-      CookieService
-    ) as jasmine.SpyObj<CookieService>;
+    mockStorage = {
+      'ivy-viewer': 'designer-market',
+      'ivy-version': '1.0'
+    };
+    spyOn(sessionStorage, 'getItem').and.callFake((key: string) => {
+      return mockStorage[key] || null;
+    });
+
+    spyOn(sessionStorage, 'setItem').and.callFake((key: string, value: string) => {
+      mockStorage[key] = value;
+    });
   });
 
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
 
-  it('should check cookie for designer version', () => {
-    const params = { [DESIGNER_COOKIE_VARIABLE.ivyVersionParamName]: '1.0' };
-    service.checkCookieForDesignerVersion(params);
-    expect(cookieService.set).toHaveBeenCalledWith(
-      DESIGNER_COOKIE_VARIABLE.ivyVersionParamName,
+  it('should check session storage for designer version', () => {
+    const params = {
+      [DESIGNER_SESSION_STORAGE_VARIABLE.ivyVersionParamName]: '1.0'
+    };
+    service.checkSessionStorageForDesignerVersion(params);
+    expect(sessionStorage.setItem).toHaveBeenCalledWith(
+      DESIGNER_SESSION_STORAGE_VARIABLE.ivyVersionParamName,
       '1.0'
     );
-    expect(service.getDesignerVersionFromCookie()).toBe('1.0');
+    expect(service.getDesignerVersionFromSessionStorage()).toBe('1.0');
   });
 
-  it('should check cookie for designer env', () => {
+  it('should check session storage for designer env', () => {
     const params = {
-      [DESIGNER_COOKIE_VARIABLE.ivyViewerParamName]:
-        DESIGNER_COOKIE_VARIABLE.defaultDesignerViewer
+      [DESIGNER_SESSION_STORAGE_VARIABLE.ivyViewerParamName]:
+        DESIGNER_SESSION_STORAGE_VARIABLE.defaultDesignerViewer
     };
-    service.checkCookieForDesignerEnv(params);
-    expect(cookieService.set).toHaveBeenCalledWith(
-      DESIGNER_COOKIE_VARIABLE.ivyViewerParamName,
-      DESIGNER_COOKIE_VARIABLE.defaultDesignerViewer
+    service.checkSessionStorageForDesignerEnv(params);
+    expect(sessionStorage.setItem).toHaveBeenCalledWith(
+      DESIGNER_SESSION_STORAGE_VARIABLE.ivyViewerParamName,
+      DESIGNER_SESSION_STORAGE_VARIABLE.defaultDesignerViewer
     );
     expect(service.isDesignerViewer()).toBeTrue();
   });
 
-  it('should get designer version from cookie if not set', () => {
-    cookieService.get.and.returnValue('1.0');
-    expect(service.getDesignerVersionFromCookie()).toBe('1.0');
+  it('should get designer version from session storage if not set', () => {
+    expect(service.getDesignerVersionFromSessionStorage()).toBe('1.0');
   });
 
-  it('should set isDesigner to true if cookie matches default designer viewer', () => {
-    cookieService.get.and.returnValue(
-      DESIGNER_COOKIE_VARIABLE.defaultDesignerViewer
-    );
+  it('should set isDesigner to true if session storage matches default designer viewer', () => {
     expect(service.isDesignerViewer()).toBeTrue();
   });
 
   it('should listen to navigation start events', () => {
-    cookieService.get.and.returnValue(
-      DESIGNER_COOKIE_VARIABLE.defaultDesignerViewer
-    );
     eventsSubject.next(new NavigationStart(1, 'testUrl'));
     expect(service.isDesignerViewer()).toBeTrue();
   });