Use observable in detail, fix various layout stuff (#303)

* fix: use observables in detail, fix various layout stuff * fix: tests * fix: delete dialogs * fix: add version to app detail * fix: tests 100%
onecx · Nov 3, 2024 · 241211a · 241211a
1 parent d8e10b6
commit 241211a
Show file tree

Hide file tree

Showing 26 changed files with 466 additions and 368 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,20 +17,18 @@ speed-measure-plugin*.json
 .idea
 .project
 .classpath
-.c9/
 .history
 .settings
 .vscode
 *.launch
-*.sublime-workspace
 
 # misc
 .angular
 .eslintcache
-.husky/_
 .sass-cache
-.gitlab*
 .scannerwork
+.husky/_
+.gitlab*
 connect.lock
 typings
 *.log

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,9 +67,9 @@
     "keycloak-angular": "^16.0.1",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primeng": "^17.18.10",
+    "primeng": "^17.18.11",
     "rxjs": "7.8.1",
-    "tslib": "^2.7.0"
+    "tslib": "^2.8.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.1.2",
@@ -114,7 +114,7 @@
     "sonar-scanner": "^3.1.0",
     "sonarqube-scanner": "^4.2.3",
     "ts-node": "10.9.2",
-    "typescript": "5.5",
+    "typescript": "5.5.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.95.0",
     "webpack-merge": "^6.0.1"

diff --git a/src/app/_ps-mixins.scss b/src/app/_ps-mixins.scss
@@ -180,7 +180,7 @@
     .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
       padding-top: 0.4rem;
       padding-bottom: 0.4rem;
-      &:nth-child(odd) {
+      &:nth-child(even) {
         background-color: #f8f9fa;
       }
     }
@@ -377,8 +377,8 @@
 @mixin dataview-list-zebra-rows {
   :host ::ng-deep {
     .p-dataview-list .p-dataview-content .p-grid > div {
-      &:nth-child(odd) {
-        background-color: #f8f9fa;
+      &:nth-child(even) {
+        background-color: var(--table-body-row-even-bg);
       }
     }
   }
@@ -388,49 +388,49 @@
     .p-dataview-list .p-dataview-content .p-grid > div {
       &:nth-child(4n + 1),
       &:nth-child(4n + 2) {
-        background-color: #f8f9fa;
+        background-color: var(--table-body-row-even-bg);
       }
     }
   }
 }
 @mixin dataview-list-flex-zebra-rows {
   :host ::ng-deep {
     .p-dataview-list .p-dataview-content > div {
-      &:nth-child(odd) {
-        background-color: #f8f9fa;
+      &:nth-child(even) {
+        background-color: var(--table-body-row-even-bg);
       }
     }
   }
 }
 @mixin dropdown-zebra-rows {
   :host ::ng-deep {
-    .p-dropdown-panel .p-dropdown-items *:nth-child(odd) .p-dropdown-item {
-      background-color: #f8f9fa;
+    .p-dropdown-panel .p-dropdown-items *:nth-child(even) .p-dropdown-item {
+      background-color: var(--table-body-row-even-bg);
     }
   }
 }
 @mixin listbox-zebra-rows {
   :host ::ng-deep {
     .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled) {
-      &:nth-child(odd) {
-        background-color: #f8f9fa;
+      &:nth-child(even) {
+        background-color: var(--table-body-row-even-bg);
       }
     }
   }
 }
 @mixin picklist-zebra-rows {
   :host ::ng-deep {
     .p-picklist-list li {
-      &:nth-child(odd) {
-        background-color: #f8f9fa;
+      &:nth-child(even) {
+        background-color: var(--table-body-row-even-bg);
       }
     }
   }
 }
 @mixin table-zebra-rows {
   :host ::ng-deep {
-    .p-datatable .p-datatable-tbody > tr:nth-child(odd) > td {
-      background-color: #f8f9fa;
+    .p-datatable .p-datatable-tbody > tr:nth-child(even) > td {
+      background-color: var(--table-body-row-even-bg);
     }
   }
 }
@@ -490,6 +490,15 @@
     }
   }
 }
+@mixin tabview-fix-color-selected-tab {
+  :host ::ng-deep {
+    // correct the background color on inital selected tab
+    .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link[aria-selected='true'] {
+      background-color: rgba(var(--primary-color-rgb), 0.12);
+    }
+  }
+}
+
 /* **********************************************
  *  TABLE
  * **********************************************/

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,39 +1,39 @@
-import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core'
+import { APP_INITIALIZER, NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { HttpClient, HttpClientModule } from '@angular/common/http'
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { RouterModule, Routes } from '@angular/router'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core'
 
-import {
-  APP_CONFIG,
-  AppStateService,
-  createTranslateLoader,
-  translateServiceInitializer,
-  PortalCoreModule,
-  UserService
-} from '@onecx/portal-integration-angular'
 import { KeycloakAuthModule } from '@onecx/keycloak-auth'
+import { createTranslateLoader } from '@onecx/angular-accelerator'
+import { APP_CONFIG, AppStateService, UserService } from '@onecx/angular-integration-interface'
+import { translateServiceInitializer, PortalCoreModule } from '@onecx/portal-integration-angular'
 
-import { AppComponent } from './app.component'
 import { environment } from 'src/environments/environment'
+import { AppComponent } from './app.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./product-store/product-store.module').then((m) => m.ProductStoreModule)
+  }
+]
 
-const routes: Routes = [{ path: '', pathMatch: 'full' }]
 @NgModule({
   bootstrap: [AppComponent],
   declarations: [AppComponent],
   imports: [
     CommonModule,
     BrowserModule,
-    HttpClientModule,
-    KeycloakAuthModule,
     BrowserAnimationsModule,
+    KeycloakAuthModule,
+    PortalCoreModule.forRoot('onecx-product-store-ui'),
     RouterModule.forRoot(routes, {
       initialNavigation: 'enabledBlocking',
       enableTracing: true
     }),
-    PortalCoreModule.forRoot('onecx-product-store-ui'),
     TranslateModule.forRoot({
       isolate: true,
       loader: {
@@ -50,12 +50,12 @@ const routes: Routes = [{ path: '', pathMatch: 'full' }]
       useFactory: translateServiceInitializer,
       multi: true,
       deps: [UserService, TranslateService]
-    }
-  ],
-  schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
+    },
+    provideHttpClient(withInterceptorsFromDi())
+  ]
 })
 export class AppModule {
   constructor() {
-    console.info('App Module constructor')
+    console.info('OneCX Product Store Module constructor')
   }
 }
diff --git a/src/app/onecx-product-store-remote.module.ts b/src/app/onecx-product-store-remote.module.ts
@@ -1,24 +1,23 @@
-import { HttpClient, HttpClientModule } from '@angular/common/http'
-import { BrowserModule } from '@angular/platform-browser'
 import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core'
-import { Router, RouterModule, Routes } from '@angular/router'
-import { MissingTranslationHandler, TranslateLoader, TranslateModule } from '@ngx-translate/core'
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { RouterModule, Routes, Router } from '@angular/router'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { TranslateLoader, TranslateModule, MissingTranslationHandler } from '@ngx-translate/core'
 
+import { AngularAuthModule } from '@onecx/angular-auth'
+import { createTranslateLoader } from '@onecx/angular-accelerator'
+import { createAppEntrypoint, initializeRouter, startsWith } from '@onecx/angular-webcomponents'
+import { addInitializeModuleGuard, AppStateService, ConfigurationService } from '@onecx/angular-integration-interface'
 import {
-  AppStateService,
-  ConfigurationService,
-  createTranslateLoader,
   PortalApiConfiguration,
   PortalCoreModule,
   PortalMissingTranslationHandler
 } from '@onecx/portal-integration-angular'
-import { addInitializeModuleGuard } from '@onecx/angular-integration-interface'
-import { createAppEntrypoint, initializeRouter, startsWith } from '@onecx/angular-webcomponents'
-import { AppEntrypointComponent } from './app-entrypoint.component'
-import { AngularAuthModule } from '@onecx/angular-auth'
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { environment } from 'src/environments/environment'
+
 import { Configuration } from './shared/generated'
+import { environment } from 'src/environments/environment'
+import { AppEntrypointComponent } from './app-entrypoint.component'
 
 function apiConfigProvider(configService: ConfigurationService, appStateService: AppStateService) {
   return new PortalApiConfiguration(Configuration, environment.apiPrefix, configService, appStateService)
@@ -30,13 +29,13 @@ const routes: Routes = [
     loadChildren: () => import('./product-store/product-store.module').then((m) => m.ProductStoreModule)
   }
 ]
+
 @NgModule({
   declarations: [AppEntrypointComponent],
   imports: [
     AngularAuthModule,
-    BrowserAnimationsModule,
     BrowserModule,
-    HttpClientModule,
+    BrowserAnimationsModule,
     PortalCoreModule.forMicroFrontend(),
     RouterModule.forRoot(addInitializeModuleGuard(routes)),
     TranslateModule.forRoot({
@@ -49,18 +48,17 @@ const routes: Routes = [
       missingTranslationHandler: { provide: MissingTranslationHandler, useClass: PortalMissingTranslationHandler }
     })
   ],
-  exports: [],
   providers: [
     ConfigurationService,
+    { provide: Configuration, useFactory: apiConfigProvider, deps: [ConfigurationService, AppStateService] },
     {
       provide: APP_INITIALIZER,
       useFactory: initializeRouter,
       multi: true,
       deps: [Router, AppStateService]
     },
-    { provide: Configuration, useFactory: apiConfigProvider, deps: [ConfigurationService, AppStateService] }
-  ],
-  schemas: []
+    provideHttpClient(withInterceptorsFromDi())
+  ]
 })
 export class OneCXProductStoreModule implements DoBootstrap {
   constructor(private readonly injector: Injector) {

diff --git a/src/app/product-store/app-delete/app-delete.component.html b/src/app/product-store/app-delete/app-delete.component.html
@@ -10,11 +10,12 @@
   <div class="flex column-gap-4 row-gap-1 justify-content-start align-items-center">
     <div class="pi pi-question-circle text-3xl danger-action-text"></div>
     <div>
-      <div id="ps_app_delete_message" class="font-bold">
-        {{ ('ACTIONS.DELETE.MESSAGE' | translate).replace("{{ITEM}}", appAbstract?.appId ?? '') }}
+      <div id="ps_app_delete_message" class="font-bold">{{ 'ACTIONS.DELETE.APP.MESSAGE' | translate }}</div>
+      <div id="ps_app_delete_app_id" class="my-2 font-bold danger-action-text text-center">
+        {{ appAbstract?.appId }}
       </div>
-      <div class="mt-3" *ngIf="appAbstract?.operator">{{ 'ACTIONS.DELETE.APP.OPERATOR_TEXT' | translate }}</div>
-      <div class="mt-3">{{ 'ACTIONS.DELETE.MESSAGE_INFO' | translate }}</div>
+      <div *ngIf="appAbstract?.operator">{{ 'ACTIONS.DELETE.APP.OPERATOR_TEXT' | translate }}</div>
+      <div class="mt-1">{{ 'ACTIONS.DELETE.MESSAGE_INFO' | translate }}</div>
     </div>
   </div>
   <ng-template pTemplate="footer">

diff --git a/src/app/product-store/app-detail/app-detail.component.scss b/src/app/product-store/app-detail/app-detail.component.scss
@@ -4,6 +4,8 @@
 @include table-zebra-rows;
 @include table-inline-buttons;
 @include table-vertical-lines;
+@include dialog-footer-buttons;
+@include dialog-modal-dialog-content;
 
 :host ::ng-deep {
   /**

diff --git a/src/app/product-store/app-search/app-search.component.html b/src/app/product-store/app-search/app-search.component.html
@@ -153,6 +153,7 @@
           </ocx-data-view-controls>
         </div>
       </ng-template>
+
       <ng-template let-apps pTemplate="gridItem">
         <div class="p-grid p-nogutter grid grid-nogutter">
           <div *ngFor="let app of apps" class="col-6 md:col-4 lg:col-4 xl:col-3 p-2 md:px-3">
@@ -245,13 +246,20 @@
                 <div
                   *ngIf="app.appType === 'MFE'"
                   [id]="'ps_app_search_data_' + app.appId + '_app_type_key'"
-                  class="text-xs sm:text-sm text-responsive"
+                  class="text-xs text-responsive"
                   [pTooltip]="app.exposedModule.length <= 25 ? '' : app.exposedModule"
                   tooltipPosition="top"
                   tooltipEvent="hover"
                 >
                   {{ app.exposedModule }}
                 </div>
+                <div
+                  *ngIf="app.appType === 'MFE'"
+                  [id]="'ps_app_search_data_' + app.appId + '_app_version'"
+                  class="text-xs text-responsive"
+                >
+                  {{ app.appVersion }}
+                </div>
                 <div
                   [id]="'ps_app_search_data_' + app.appId + '_product_name'"
                   class="text-xs text-responsive"

diff --git a/src/app/product-store/product-detail/product-apps/product-apps.component.html b/src/app/product-store/product-detail/product-apps/product-apps.component.html
@@ -1,9 +1,9 @@
-<div *ngIf="productDetails$ | async as details" class="mb-1">
+<div *ngIf="productDetails$ | async as details" class="mb-1 mx-1">
   <p-fieldset
     *ngIf="details.microfrontends && details.microfrontends.length > 0"
     [toggleable]="false"
     [collapsed]="false"
-    styleClass="surface-100 py-0 mb-3"
+    styleClass="surface-100 py-0 mt-1 mb-3 mx-1"
   >
     <ng-template pTemplate="header">
       <span [pTooltip]="'DIALOG.COMPONENTS.TOOLTIPS.MFE' | translate" tooltipPosition="top" tooltipEvent="hover">