feat: fix search of apps

src/app/product-store/app-detail/app-detail.component.html

@@ -21,7 +21,7 @@
           '600px': '100vw',
       }"
 >
-  <form *ngIf="appAbstract?.appType === 'MFE'" [formGroup]="formGroupMfe" errorTailor>
+  <form *ngIf="!loading && appAbstract?.appType === 'MFE'" [formGroup]="formGroupMfe" errorTailor>
     <ng-template pTemplate="header">
       <span>{{ 'ACTIONS.' + this.changeMode + '.MFE.HEADER' | translate }}</span>
     </ng-template>
@@ -293,7 +293,7 @@
     </p-fieldset>
   </form>
 
-  <form *ngIf="appAbstract?.appType === 'MS'" [formGroup]="formGroupMs" errorTailor>
+  <form *ngIf="!loading && appAbstract?.appType === 'MS'" [formGroup]="formGroupMs" errorTailor>
     <ng-template pTemplate="header">
       <span>{{ 'ACTIONS.' + this.changeMode + '.MS.HEADER' | translate }}</span>
     </ng-template>

src/app/product-store/app-detail/app-detail.component.ts

@@ -17,9 +17,7 @@ import {
   MicroservicesAPIService,
   GetMicroserviceByAppIdRequestParams
 } from 'src/app/shared/generated'
-import { AppAbstract } from '../app-search/app-search.component'
-
-export type ChangeMode = 'VIEW' | 'CREATE' | 'EDIT' | 'COPY'
+import { AppAbstract, ChangeMode } from '../app-search/app-search.component'
 
 export interface MfeForm {
   appId: FormControl<string | null>
@@ -57,6 +55,7 @@ export class AppDetailComponent implements OnChanges {
   @Output() displayDialogChange = new EventEmitter<boolean>()
   @Output() appChanged = new EventEmitter<boolean>()
 
+  private debug = true
   public mfe: Microfrontend | undefined
   public ms: Microservice | undefined
   public formGroupMfe: FormGroup
@@ -101,16 +100,20 @@ export class AppDetailComponent implements OnChanges {
   }
 
   ngOnChanges() {
-    if (this.appAbstract?.id && this.displayDialog) {
-      if (this.changeMode !== 'CREATE') {
-        if (this.appAbstract.appType === 'MFE') this.getMfe()
-        if (this.appAbstract.appType === 'MS') this.getMs()
-      } else if (this.changeMode === 'CREATE') {
-        this.ms = undefined
-        this.mfe = undefined
-        this.formGroupMs.reset()
-        this.formGroupMfe.reset()
-      }
+    if (this.changeMode === 'CREATE') {
+      this.ms = undefined
+      this.mfe = undefined
+      this.formGroupMs.reset()
+      this.formGroupMfe.reset()
+    } else if (this.appAbstract?.id) {
+      if (this.appAbstract.appType === 'MFE') this.getMfe()
+      if (this.appAbstract.appType === 'MS') this.getMs()
+    }
+  }
+  private log(text: string, obj?: object): void {
+    if (this.debug) {
+      if (obj) console.log('app detail: ' + text, obj)
+      else console.log('app detail: ' + text)
     }
   }
 

src/app/product-store/app-search/app-search.component.html

@@ -53,7 +53,7 @@
   <ocx-page-content>
     <p-dataView
       id="product_search_dataview"
-      [value]="apps"
+      [value]="(apps$ | async) ?? []"
       [paginator]="true"
       [alwaysShowPaginator]="false"
       [rowsPerPageOptions]="[10, 20, 50]"

src/app/product-store/app-search/app-search.component.scss

@@ -15,6 +15,12 @@
     }
   }
 
+  // correction for data-view-control component
+  .data-view-control-border.p-dropdown:last-of-type {
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+
   .p-dataview-content .p-grid > div {
     min-height: 60px;
     &.listview-row {

src/app/product-store/app-search/app-search.component.ts

@@ -1,10 +1,9 @@
 import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'
-import { HttpErrorResponse } from '@angular/common/http'
 import { FormControl, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
 import { DataView } from 'primeng/dataview'
-import { combineLatest, finalize, map, Observable, Subject, takeUntil } from 'rxjs'
+import { combineLatest, finalize, map, of, Observable, Subject, startWith, catchError } from 'rxjs'
 
 import { Action, DataViewControlTranslations, UserService } from '@onecx/portal-integration-angular'
 import {
@@ -16,15 +15,16 @@ import {
   MicroservicesAPIService
 } from 'src/app/shared/generated'
 import { limitText } from 'src/app/shared/utils'
-import { ChangeMode } from '../app-detail/app-detail.component'
 
 export interface AppSearchCriteria {
   appId: FormControl<string | null>
   appName: FormControl<string | null>
+  //  appType: FormControl<AppType | null>
   productName: FormControl<string | null>
 }
 export type AppType = 'MS' | 'MFE'
 export type AppAbstract = MicrofrontendAbstract & Microservice & { appType: AppType }
+export type ChangeMode = 'VIEW' | 'CREATE' | 'EDIT' | 'COPY'
 
 @Component({
   templateUrl: './app-search.component.html',
@@ -33,7 +33,6 @@ export type AppAbstract = MicrofrontendAbstract & Microservice & { appType: AppT
 export class AppSearchComponent implements OnInit, OnDestroy {
   private readonly destroy$ = new Subject()
   private readonly debug = true // to be removed after finalization
-  public dataAccessIssue = false
   public exceptionKey = ''
   public loading = true
   public actions$: Observable<Action[]> | undefined
@@ -103,7 +102,15 @@ export class AppSearchComponent implements OnInit, OnDestroy {
           pageSize: 100
         }
       })
-      .pipe(finalize(() => (this.searchInProgress = false)))
+      .pipe(
+        startWith({} as MicrofrontendPageResult),
+        catchError((err) => {
+          this.exceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + err.status + '.APPS'
+          console.error('searchMicrofrontends():', err)
+          return of({} as MicrofrontendPageResult)
+        }),
+        finalize(() => (this.searchInProgress = false))
+      )
 
     this.mss$ = this.msApi
       .searchMicroservice({
@@ -114,37 +121,36 @@ export class AppSearchComponent implements OnInit, OnDestroy {
           pageSize: 100
         }
       })
-      .pipe(finalize(() => (this.searchInProgress = false)))
+      .pipe(
+        startWith({} as MicroservicePageResult),
+        catchError((err) => {
+          this.exceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + err.status + '.APPS'
+          console.error('searchMicroservice():', err)
+          return of({} as MicroservicePageResult)
+        }),
+        finalize(() => (this.searchInProgress = false))
+      )
 
-    this.apps = []
-    combineLatest(this.mfes$, this.mss$)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(([microfrontends, microservices]) => {
-        // mfe
-        if (microfrontends instanceof HttpErrorResponse) {
-          this.dataAccessIssue = true
-          this.exceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + microfrontends.status + '.WORKSPACES'
-          console.error('searchMicrofrontends():', microfrontends)
-        } else if (microfrontends instanceof Object) {
-          if (microfrontends?.stream)
-            for (let app of microfrontends.stream) this.apps?.push({ ...app, appType: 'MFE' } as AppAbstract)
-          this.log('searchMicrofrontends():', microfrontends.stream)
-        } else console.error('searchMicrofrontends() => unknown response:', microfrontends)
-        // ms
-        if (!this.dataAccessIssue) {
-          if (microservices instanceof HttpErrorResponse) {
-            this.dataAccessIssue = true
-            this.exceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + microservices.status + '.WORKSPACES'
-            console.error('searchMicroservice():', microservices)
-          } else if (microservices instanceof Object) {
-            if (microservices?.stream)
-              for (let app of microservices.stream) this.apps?.push({ ...app, appType: 'MS' } as AppAbstract)
-            this.log('searchMicroservice():', microservices?.stream)
-          } else console.error('searchMicroservice() => unknown response:', microservices)
-        }
-        this.log('searchApps():', this.apps)
-        this.loading = false
-      })
+    this.apps$ = combineLatest([
+      this.mfes$.pipe(
+        map((a) => {
+          return a.stream
+            ? a.stream?.map((mfe) => {
+                return { ...mfe, appType: 'MFE' } as AppAbstract
+              })
+            : []
+        })
+      ),
+      this.mss$.pipe(
+        map((a) => {
+          return a.stream
+            ? a.stream?.map((ms) => {
+                return { ...ms, appType: 'MS' } as AppAbstract
+              })
+            : []
+        })
+      )
+    ]).pipe(map(([mfes, mss]) => mfes.concat(mss)))
   }
 
   private prepareActionButtons(): void {
@@ -237,14 +243,15 @@ export class AppSearchComponent implements OnInit, OnDestroy {
     this.displayDeleteDialog = true
   }
 
+  /**
+   * trigger search after any change on detail level
+   */
   public appChanged(changed: any) {
     this.displayDetailDialog = false
     if (changed) this.searchApps()
   }
   public appDeleted(deleted: any) {
     this.displayDeleteDialog = false
-    if (deleted && this.app?.id) {
-      this.apps = this.apps.filter((app) => app.id !== this.app?.id)
-    }
+    if (deleted) this.searchApps()
   }
 }

src/app/product-store/product-search/product-search.component.ts

@@ -46,10 +46,10 @@ export class ProductSearchComponent implements OnInit {
   ngOnInit(): void {
     this.prepareDialogTranslations()
     this.prepareActionButtons()
-    this.searchData()
+    this.searchProducts()
   }
 
-  public searchData(): void {
+  public searchProducts(): void {
     this.searchInProgress = true
     this.products$ = this.productApi
       .searchProducts({
@@ -136,16 +136,17 @@ export class ProductSearchComponent implements OnInit {
   public onSortDirChange(asc: boolean): void {
     this.sortOrder = asc ? -1 : 1
   }
+
   public onSearch() {
-    this.searchData()
+    this.searchProducts()
   }
   public onSearchReset() {
     this.productSearchCriteriaGroup.reset()
   }
-  public onNewProduct() {
-    this.router.navigate(['./new'], { relativeTo: this.route })
-  }
   public onAppSearch() {
     this.router.navigate(['./apps'], { relativeTo: this.route })
   }
+  public onNewProduct() {
+    this.router.navigate(['./new'], { relativeTo: this.route })
+  }
 }