fix: product list on workspace creation (#455)

* fix: product list on workspace creation

* fix: dropdown lists on creation

* fix: tests

* fix: sonar

sonar-local-project.properties

@@ -7,19 +7,25 @@
 #   npm run sonar
 #
 sonar.host.url=http://localhost:9000
-sonar.login=<generated-project-token>
+# sonar.verbose=true
 #
 sonar.organization=onecx
 sonar.projectKey=onecx-workspace-ui
 sonar.projectName=onecx-workspace-ui
 sonar.javascript.coveragePlugin=lcov
-sonar.javascript.lcov.reportPaths=reports/coverage/lcov.info
+sonar.javascript.lcov.reportPaths=reports/coverage/lcov.js.info
+sonar.typescript.lcov.reportPaths=reports/coverage/lcov.ts.info
 sonar.testExecutionReportPaths=reports/sonarqube_report.xml
 sonar.sourceEncoding=UTF-8
+sonar.sources=src/app
 sonar.exclusions=node_modules/**/*,src/app/shared/generated/**/*
+# duplication detection
 sonar.cpd.exclusions=src/app/shared/generated/**/*
-sonar.coverage.exclusions=*.ts,*.js,src/*.ts,src/**/*.module.ts,src/environments/*,src/assets/**/*,src/app/shared/generated/**/*
-sonar.sources=src/app
-#sonar.working.directory=dist/sonar
-#sonar.tests=src/app
-sonar.test.inclusions=src/app/**/*.spec.ts
+# coverage
+sonar.coverage.exclusions=*.ts,*.js,src/*.ts,src/**/*.module.ts,src/**/*.main.ts,src/**/*.bootstrap.ts,src/environments/*,src/assets/**/*,src/app/shared/generated/**/*
+# sonar.working.directory=dist/sonar
+sonar.test.inclusions=src/app/**/*.spec.ts
+# sonar.scm.exclusions.disabled=true
+sonar.language=ts,js,json,css,web
+# sonar.lang.patterns.ts=**/*.ts
+# sonar.typescript.tsconfigPath=tsconfig.json

src/app/remotes/horizontal-main-menu/horizontal-main-menu.component.spec.ts

@@ -23,7 +23,6 @@ describe('OneCXHorizontalMainMenuComponent', () => {
     const fixture = TestBed.createComponent(OneCXHorizontalMainMenuComponent)
     const component = fixture.componentInstance
     fixture.detectChanges()
-
     return { fixture, component }
   }
 
@@ -40,11 +39,8 @@ describe('OneCXHorizontalMainMenuComponent', () => {
       providers: [
         provideHttpClient(),
         provideHttpClientTesting(),
-        {
-          provide: BASE_URL,
-          useValue: baseUrlSubject
-        },
-        provideRouter([{ path: 'admin/welcome', component: OneCXHorizontalMainMenuComponent }])
+        provideRouter([{ path: 'admin/welcome', component: OneCXHorizontalMainMenuComponent }]),
+        { provide: BASE_URL, useValue: baseUrlSubject }
       ]
     })
       .overrideComponent(OneCXHorizontalMainMenuComponent, {

src/app/remotes/user-avatar-menu/user-avatar-menu.component.spec.ts

@@ -94,7 +94,7 @@ describe('OneCXUserAvatarMenuComponent', () => {
       })
       .compileComponents()
 
-    baseUrlSubject.next('base_url')
+    baseUrlSubject.next('base_url_mock')
 
     menuItemApiSpy.getMenuItems.calls.reset()
     appConfigSpy.init.and.returnValue(Promise.resolve())
@@ -210,9 +210,7 @@ describe('OneCXUserAvatarMenuComponent', () => {
       spyOn(userService.profile$, 'asObservable').and.returnValue(of(profile) as any)
       const appStateService = TestBed.inject(AppStateService)
       spyOn(appStateService.currentWorkspace$, 'asObservable').and.returnValue(
-        of({
-          workspaceName: 'test-workspace'
-        }) as any
+        of({ workspaceName: 'test-workspace' }) as any
       )
     })
 
@@ -393,7 +391,7 @@ describe('OneCXUserAvatarMenuComponent', () => {
     })
 
     xit('should have correct icon for logout', async () => {
-      menuItemApiSpy.getMenuItems.and.returnValue(of({ workspaceName: 'workspace', menu: [] } as any))
+      menuItemApiSpy.getMenuItems.and.returnValue(of({ workspaceName: 'test-workspace', menu: [] } as any))
       const { avatarMenuHarness } = await setUpWithHarness()
       const menuItems = await avatarMenuHarness.getMenuItems()
 

src/app/remotes/user-avatar-menu/user-avatar-menu.component.ts

@@ -1,7 +1,15 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import {
+  APP_INITIALIZER,
+  AfterViewInit,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  Inject,
+  Input,
+  OnDestroy,
+  Renderer2
+} from '@angular/core'
 import { Location } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
-import { APP_INITIALIZER, AfterViewInit, Component, Inject, Input, OnDestroy, Renderer2 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'

src/app/workspace/workspace-create/workspace-create.component.html

@@ -18,105 +18,105 @@
           <input
             pInputText
             type="text"
-            id="ws_create_item_name"
+            id="ws_create_form_name"
             class="w-full pt-3 pb-2"
             formControlName="name"
             [pTooltip]="'WORKSPACE.TOOLTIPS.NAME' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label class="ocx-required-label" for="ws_create_item_name"> {{ 'WORKSPACE.NAME' | translate }} </label>
+          <label class="ocx-required-label" for="ws_create_form_name"> {{ 'WORKSPACE.NAME' | translate }} </label>
         </span>
         <span class="p-float-label w-12 sm:w-7x" controlErrorAnchor>
           <input
             pInputText
             type="text"
-            id="ws_create_item_display_name"
+            id="ws_create_form_display_name"
             class="w-full pt-3 pb-2"
             formControlName="displayName"
             [pTooltip]="'WORKSPACE.TOOLTIPS.DISPLAY_NAME' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label class="ocx-required-label" for="ws_create_item_display_name">
+          <label class="ocx-required-label" for="ws_create_form_display_name">
             {{ 'WORKSPACE.DISPLAY_NAME' | translate }}
           </label>
         </span>
       </div>
 
-      <div class="flex flex-row flex-wrap gap-3 justify-content-between align-items-center">
+      <div class="w-12 flex flex-row flex-wrap gap-3 justify-content-between">
         <span class="p-float-label w-12 sm:w-5x">
           <p-dropdown
-            id="ws_create_item_theme"
+            *ngIf="(themes$ | async) ?? [] as themes"
+            id="ws_create_form_theme"
             formControlName="theme"
-            styleClass="w-full"
-            [options]="(themes$ | async) || []"
+            styleClass="w-full input-field-correction"
+            (onClick)="onOpenThemes(themes)"
+            [options]="themes"
             [ariaLabel]="'WORKSPACE.THEME' | translate"
             [pTooltip]="'WORKSPACE.TOOLTIPS.THEME' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           >
           </p-dropdown>
-          <label class="ocx-required-label" for="ws_create_item_theme"> {{ 'WORKSPACE.THEME' | translate }} </label>
+          <label class="ocx-required-label" for="ws_create_form_theme"> {{ 'WORKSPACE.THEME' | translate }} </label>
+        </span>
+        <span class="p-float-label w-12 sm:w-7x">
+          <p-dropdown
+            *ngIf="(productPaths$ | async) ?? [] as paths"
+            id="ws_create_form_home_page"
+            formControlName="homePage"
+            styleClass="w-full input-field-correction"
+            (onClick)="onOpenProductPathes(paths)"
+            [options]="paths"
+            [ariaLabel]="'WORKSPACE.HOME_PAGE' | translate"
+            [pTooltip]="'WORKSPACE.TOOLTIPS.HOME_PAGE' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
+          >
+          </p-dropdown>
+          <label for="ws_create_form_home_page"> {{ 'WORKSPACE.HOME_PAGE' | translate }} </label>
         </span>
-        <div class="p-inputgroup w-12 sm:w-7x" controlErrorAnchor>
-          <span class="p-float-label">
-            <p-dropdown
-              #inputHomePage
-              id="ws_create_form_home_page"
-              formControlName="homePage"
-              styleClass="w-full inputgroup-dropdown-with-link input-field-correction"
-              [options]="mfeRList"
-              [editable]="true"
-              [ariaLabel]="'WORKSPACE.HOME_PAGE' | translate"
-              [pTooltip]="'WORKSPACE.TOOLTIPS.HOME_PAGE' | translate"
-              tooltipPosition="top"
-              tooltipEvent="hover"
-            >
-            </p-dropdown>
-            <label for="ws_create_form_home_page"> {{ 'WORKSPACE.HOME_PAGE' | translate }} </label>
-          </span>
-        </div>
       </div>
 
       <div>
         <span class="p-float-label" controlErrorAnchor>
           <input
             pInputText
             type="text"
-            id="ws_create_item_baseUrl"
+            id="ws_create_form_baseUrl"
             class="w-full pt-3 pb-2"
             formControlName="baseUrl"
             [pTooltip]="'WORKSPACE.TOOLTIPS.BASE_URL' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label class="ocx-required-label" for="ws_create_item_baseUrl"> {{ 'WORKSPACE.BASE_URL' | translate }}</label>
+          <label class="ocx-required-label" for="ws_create_form_baseUrl"> {{ 'WORKSPACE.BASE_URL' | translate }}</label>
         </span>
-        <label class="ocx-control-hint block mt-1" for="ws_create_item_baseUrl">
-          {{ ('VALIDATION.HINTS.FORMAT_URL' | translate) + urlPattern }}
+        <label class="ocx-control-hint block mt-1" for="ws_create_form_baseUrl">
+          {{ ('VALIDATION.HINTS.FORMAT_URL' | translate) + '/base-path-to-workspace' }}
         </label>
       </div>
 
       <div class="flex flex-wrap sm:flex-nowrap align-items-center row-gap-2 column-gap-4">
         <app-image-container
-          [id]="'ws_create_item_logo_image'"
+          [id]="'ws_create_form_logo_image'"
           [imageUrl]="fetchingLogoUrl"
           [small]="true"
         ></app-image-container>
         <span class="p-float-label w-full">
           <input
             pInputText
             type="text"
-            id="ws_create_item_logo"
+            id="ws_create_form_logo"
             class="w-full pt-3 pb-2"
             formControlName="logoUrl"
             (blur)="inputChange($event)"
             [pTooltip]="'IMAGE.TOOLTIPS.URL' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="ws_create_item_logo"> {{ 'IMAGE.LOGO_URL' | translate }} </label>
+          <label for="ws_create_form_logo"> {{ 'IMAGE.LOGO_URL' | translate }} </label>
         </span>
       </div>
 
@@ -125,14 +125,14 @@
           <input
             pInputText
             type="text"
-            id="ws_create_item_footerLabel"
+            id="ws_create_form_footerLabel"
             class="w-full pt-3 pb-2"
             formControlName="footerLabel"
             [pTooltip]="'WORKSPACE.TOOLTIPS.FOOTER_LABEL' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="ws_create_item_footerLabel"> {{ 'WORKSPACE.FOOTER_LABEL' | translate }} </label>
+          <label for="ws_create_form_footerLabel"> {{ 'WORKSPACE.FOOTER_LABEL' | translate }} </label>
         </span>
       </div>
 
@@ -143,13 +143,13 @@
             pInputTextarea
             autoresize="true"
             rows="4"
-            id="ws_create_item_description"
+            id="ws_create_form_description"
             formControlName="description"
             [pTooltip]="'WORKSPACE.TOOLTIPS.DESCRIPTION' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           ></textarea>
-          <label for="ws_create_item_description"> {{ 'WORKSPACE.DESCRIPTION' | translate }} </label>
+          <label for="ws_create_form_description"> {{ 'WORKSPACE.DESCRIPTION' | translate }} </label>
         </span>
       </div>
     </div>

src/app/workspace/workspace-create/workspace-create.component.spec.ts

@@ -26,7 +26,7 @@ const workspace: Workspace = {
   theme: 'theme',
   baseUrl: '/some/base/url',
   homePage: '/homepage',
-  displayName: ''
+  displayName: 'displayName'
 }
 
 class MockRouter {
@@ -120,27 +120,6 @@ describe('WorkspaceCreateComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  describe('loadMfeUrls', () => {
-    it('should load product urls on init', () => {
-      productServiceSpy.searchAvailableProducts.and.returnValue(of({ stream: [{ baseUrl: 'baseUrl' }] }))
-      component.mfeRList = []
-
-      component.ngOnInit()
-
-      expect(component.mfeRList).toContain('baseUrl')
-    })
-
-    it('should log error if api call fails', () => {
-      const errorResponse = { status: 400, statusText: 'Error on searching products' }
-      productServiceSpy.searchAvailableProducts.and.returnValue(throwError(() => errorResponse))
-      spyOn(console, 'error')
-
-      component.ngOnInit()
-
-      expect(console.error).toHaveBeenCalledWith('getProductsByWorkspaceId', errorResponse)
-    })
-  })
-
   it('should create a workspace', () => {
     wApiServiceSpy.createWorkspace.and.returnValue(of({ resource: workspace }))
 
@@ -186,4 +165,68 @@ describe('WorkspaceCreateComponent', () => {
 
     expect(component.fetchingLogoUrl).toBe(url)
   }))
+
+  describe('onOpenProductPathes', () => {
+    it('should load product urls', () => {
+      const products = [{ baseUrl: '/productBaseUrl-1' }, { baseUrl: '/productBaseUrl-2' }]
+      productServiceSpy.searchAvailableProducts.and.returnValue(of({ stream: products }))
+
+      component.onOpenProductPathes([])
+
+      component.productPaths$.subscribe((paths) => {
+        expect(paths).toEqual([products[0].baseUrl, products[1].baseUrl])
+      })
+    })
+
+    it('should prevent loading product URLs again', () => {
+      const paths = ['/productBaseUrl-1', '/productBaseUrl-2']
+
+      component.onOpenProductPathes(paths)
+    })
+
+    it('should load product paths failed', () => {
+      const errorResponse = { status: 400, statusText: 'Error on loading product paths' }
+      productServiceSpy.searchAvailableProducts.and.returnValue(throwError(() => errorResponse))
+      spyOn(console, 'error')
+
+      component.onOpenProductPathes([])
+
+      component.productPaths$.subscribe((paths) => {
+        expect(paths).toEqual([])
+        expect(console.error).toHaveBeenCalledWith('searchAvailableProducts', errorResponse)
+      })
+    })
+  })
+
+  describe('onOpenThemes', () => {
+    it('should load themes', () => {
+      const themes = ['theme-1', 'theme-2']
+      wApiServiceSpy.getAllThemes.and.returnValue(of(themes))
+
+      component.onOpenThemes([])
+
+      component.themes$.subscribe((data) => {
+        expect(data).toEqual(themes)
+      })
+    })
+
+    it('should prevent loading product URLs again', () => {
+      const themes = ['theme-1', 'theme-2']
+
+      component.onOpenThemes(themes)
+    })
+
+    it('should load themes failed', () => {
+      const errorResponse = { status: 400, statusText: 'Error on loading themes' }
+      wApiServiceSpy.getAllThemes.and.returnValue(throwError(() => errorResponse))
+      spyOn(console, 'error')
+
+      component.onOpenThemes([])
+
+      component.themes$.subscribe((data) => {
+        expect(data).toEqual([])
+        expect(console.error).toHaveBeenCalledWith('getAllThemes', errorResponse)
+      })
+    })
+  })
 })