Harmonize app setup files and align help-item-edit form (#241)

* fix: harmonize app setup files and align help-item-edit form

* fix: tests

* fix: increase test coverage

* fix: increase test coverage

src/app/_hm-mixins.scss

@@ -371,6 +371,14 @@
     }
   }
 }
+// This does not work if located inside the app, should be placed into src/styles.scss
+@mixin autocomplete-zebra-rows {
+  .p-autocomplete-panel .p-autocomplete-items {
+    .p-autocomplete-item:nth-child(even) {
+      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) {

src/app/app.component.spec.ts

@@ -1,6 +1,6 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { AppComponent } from './app.component'
-import { NO_ERRORS_SCHEMA } from '@angular/core'
 
 describe('AppComponent', () => {
   beforeEach(async () => {
@@ -21,13 +21,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance
     expect(app.title).toEqual('onecx-help-ui')
   })
-
-  /*
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent)
-    fixture.detectChanges()
-    const compiled = fixture.nativeElement as HTMLElement
-    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome Help Mgmt')
-  })
-  */
 })

src/app/app.module.ts

@@ -1,23 +1,18 @@
-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: '', pathMatch: 'full' }]
 @NgModule({
@@ -26,14 +21,13 @@ const routes: Routes = [{ path: '', pathMatch: 'full' }]
   imports: [
     CommonModule,
     BrowserModule,
-    HttpClientModule,
-    KeycloakAuthModule,
     BrowserAnimationsModule,
+    KeycloakAuthModule,
+    PortalCoreModule.forRoot('onecx-help-ui'),
     RouterModule.forRoot(routes, {
       initialNavigation: 'enabledBlocking',
       enableTracing: true
     }),
-    PortalCoreModule.forRoot('onecx-help-ui'),
     TranslateModule.forRoot({
       isolate: true,
       loader: {
@@ -50,12 +44,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 Help Module constructor')
   }
 }

src/app/help/help-detail/help-detail.component.html

@@ -26,7 +26,7 @@
         icon="pi pi-times"
         (onClick)="onDialogHide()"
         [label]="'ACTIONS.NAVIGATION.CLOSE' | translate"
-        [aria-label]="'ACTIONS.NAVIGATION.CLOSE' | translate"
+        [ariaLabel]="'ACTIONS.NAVIGATION.CLOSE' | translate"
         [pTooltip]="'ACTIONS.NAVIGATION.CLOSE.TOOLTIP' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
@@ -37,7 +37,7 @@
         icon="pi pi-times"
         (onClick)="onDialogHide()"
         [label]="'ACTIONS.CANCEL' | translate"
-        [aria-label]="'ACTIONS.CANCEL' | translate"
+        [ariaLabel]="'ACTIONS.CANCEL' | translate"
         [pTooltip]="'ACTIONS.TOOLTIPS.CANCEL' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
@@ -49,7 +49,7 @@
         (onClick)="onSave()"
         [disabled]="!helpFormComponent.formGroup.valid"
         [label]="'ACTIONS.SAVE' | translate"
-        [aria-label]="'ACTIONS.SAVE' | translate"
+        [ariaLabel]="'ACTIONS.SAVE' | translate"
         [pTooltip]="'ACTIONS.TOOLTIPS.SAVE' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"

src/app/help/help-detail/help-detail.component.spec.ts

@@ -51,6 +51,9 @@ describe('HelpDetailComponent', () => {
     filterProducts(event: { query: string }): void {
       console.log('Filtering products with query:', event.query)
     }
+    sortProductsByName(a: Product, b: Product): number {
+      return a.displayName.toUpperCase().localeCompare(b.displayName.toUpperCase())
+    }
     // eslint-disable-next-line @angular-eslint/use-lifecycle-interface
     ngOnChanges(): void {
       console.log('On changes')

src/app/help/help-form/help-form.component.html

@@ -2,7 +2,7 @@
   <div class="flex flex-wrap flex-column gap-4 justify-content-between mt-2">
     <span class="p-float-label">
       <p-autoComplete
-        id="help_detail_form_product_name_autocomplete"
+        id="hm_detail_form_product_name_autocomplete"
         styleClass="w-full"
         inputStyleClass="pt-3 pb-2 text-responsive"
         formControlName="product"
@@ -18,31 +18,29 @@
         tooltipPosition="top"
         tooltipEvent="hover"
       ></p-autoComplete>
-      <label class="ocx-required-label" for="help_detail_form_product_name_autocomplete"
+      <label class="ocx-required-label" for="hm_detail_form_product_name_autocomplete"
         >{{ 'HELP_ITEM.APPLICATION_NAME' | translate }}
       </label>
     </span>
     <span class="p-float-label" controlErrorAnchor>
       <input
         pInputText
         type="text"
-        id="help_detail_form_item_id"
+        id="hm_detail_form_item_id"
         class="w-full pt-3 pb-2 text-responsive"
         formControlName="itemId"
         [pTooltip]="'HELP_ITEM.TOOLTIPS.HELP_ITEM_ID' | translate"
         [pTooltip]="'HELP_ITEM.TOOLTIPS.HELP_ITEM_ID' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
       />
-      <label class="ocx-required-label" for="help_detail_form_item_id">
-        {{ 'HELP_ITEM.HELP_ITEM_ID' | translate }}</label
-      >
+      <label class="ocx-required-label" for="hm_detail_form_item_id">{{ 'HELP_ITEM.HELP_ITEM_ID' | translate }}</label>
     </span>
     <div *ngIf="changeMode !== 'CREATE'">
       <div class="px-2 mb-2 flex flex-row justify-content-between align-items-center column-gap-3">
         <p-checkbox
           type="text"
-          inputId="help_detail_operator"
+          inputId="hm_detail_form_operator"
           formControlName="operator"
           [binary]="true"
           [styleClass]="'cursor-auto shadow-none'"
@@ -55,7 +53,7 @@
       <p-message
         *ngIf="helpItem?.operator"
         styleClass="p-1"
-        id="help_detail_form_operator_delete_message"
+        id="hm_detail_form_operator_delete_message"
         severity="info"
         [text]="'ACTIONS.DELETE.MESSAGE.OPERATOR_TEXT' | translate"
       ></p-message>
@@ -73,42 +71,40 @@
         <input
           pInputText
           type="text"
-          id="help_detail_form_base_url"
+          id="hm_detail_form_base_url"
           class="w-full pt-3 pb-2 text-responsive"
           formControlName="baseUrl"
           [pTooltip]="'HELP_ITEM.TOOLTIPS.BASE_URL' | translate"
           tooltipPosition="top"
           tooltipEvent="hover"
         />
-        <label class="ocx-required-label" for="help_detail_form_base_url">
-          {{ 'HELP_ITEM.BASE_URL' | translate }}</label
-        >
+        <label class="ocx-required-label" for="hm_detail_form_base_url"> {{ 'HELP_ITEM.BASE_URL' | translate }}</label>
       </span>
       <span class="p-float-label">
         <input
           pInputText
           type="text"
-          id="help_detail_form_resource_url"
+          id="hm_detail_form_resource_url"
           class="w-full pt-3 pb-2 text-responsive"
           formControlName="resourceUrl"
           [pTooltip]="'HELP_ITEM.TOOLTIPS.RESOURCE_URL' | translate"
           tooltipPosition="top"
           tooltipEvent="hover"
         />
-        <label class="" for="help_detail_form_resource_url">{{ 'HELP_ITEM.RESOURCE_URL' | translate }}</label>
+        <label class="" for="hm_detail_form_resource_url">{{ 'HELP_ITEM.RESOURCE_URL' | translate }}</label>
       </span>
       <span class="p-float-label">
         <input
           pInputText
           type="text"
-          id="help_detail_form_context"
+          id="hm_detail_form_context"
           class="w-full pt-3 pb-2 text-responsive"
           formControlName="context"
           [pTooltip]="'HELP_ITEM.TOOLTIPS.CONTEXT' | translate"
           tooltipPosition="top"
           tooltipEvent="hover"
         />
-        <label class="" for="help_detail_form_context">{{ 'HELP_ITEM.CONTEXT' | translate }}</label>
+        <label class="" for="hm_detail_form_context">{{ 'HELP_ITEM.CONTEXT' | translate }}</label>
       </span>
     </div>
   </p-fieldset>

src/app/help/help-form/help-form.component.spec.ts

@@ -106,4 +106,21 @@ describe('HelpFormComponent', () => {
 
     expect(component.productsFiltered[0].displayName).toEqual('OneCx Tenant UI')
   })
+
+  describe('sortProductsByName', () => {
+    const p1: Product = { name: 'p1', displayName: 'P1' }
+    const p2: Product = { name: 'p2', displayName: 'P2' }
+
+    it('should return 0 when both strings are identical', () => {
+      expect(component.sortProductsByName(p1, p1)).toBe(0)
+    })
+
+    it('should return -1', () => {
+      expect(component.sortProductsByName(p1, p2)).toBe(-1)
+    })
+
+    it('should return 1', () => {
+      expect(component.sortProductsByName(p2, p1)).toBe(1)
+    })
+  })
 })

src/app/help/help-form/help-form.component.ts

@@ -29,8 +29,8 @@ export class HelpFormComponent implements OnChanges {
     { field: 'context', header: 'CONTEXT' },
     { field: 'resourceUrl', header: 'RESOURCE_URL' }
   ]
-
   public productsFiltered: Product[] = []
+
   constructor() {
     this.formGroup = new FormGroup<HelpDetailForm>({
       product: new FormControl(null, [Validators.required]),
@@ -55,5 +55,10 @@ export class HelpFormComponent implements OnChanges {
   public filterProducts(event: { query: string }) {
     const query = event.query.toLowerCase()
     this.productsFiltered = this.products?.filter((product) => product.displayName.toLowerCase().includes(query))
+    this.productsFiltered.sort(this.sortProductsByName)
+  }
+
+  public sortProductsByName(a: Product, b: Product): number {
+    return a.displayName.toUpperCase().localeCompare(b.displayName.toUpperCase())
   }
 }

src/app/help/help-search/help-criteria/help-criteria.component.scss

@@ -3,3 +3,4 @@
 @include correct-search-criteria;
 @include correct-autocomplete;
 @include displaying-text-responsive;
+@include dropdown-zebra-rows;

src/app/help/help-search/help-search.component.html

@@ -79,7 +79,7 @@
 
       <ng-template pTemplate="body" let-row="rowIndex" let-rowData let-columns="columns">
         <tr [id]="'hm_search_table_row_' + row">
-          <td class="px-0 text-center white-space-nowrap">
+          <td class="px-2 text-center white-space-nowrap">
             <ng-container *ocxIfNotPermission="'HELP#EDIT'">
               <button
                 pbutton

src/app/help/help-search/help-search.component.ts

@@ -38,9 +38,7 @@ export class HelpSearchComponent implements OnInit {
   public assignedProductNames: string[] = []
   public products: Product[] = []
   public productsLoaded: boolean = false
-  public criteria: SearchHelpsRequestParams = {
-    helpSearchCriteria: {}
-  }
+  public criteria: SearchHelpsRequestParams = { helpSearchCriteria: {} }
   public helpSearchCriteria!: HelpSearchCriteria
   public searchInProgress = false
   public loadingResults = false

src/app/onecx-help-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)
@@ -35,7 +34,6 @@ const routes: Routes = [
   imports: [
     AngularAuthModule,
     BrowserModule,
-    HttpClientModule,
     BrowserAnimationsModule,
     PortalCoreModule.forMicroFrontend(),
     RouterModule.forRoot(addInitializeModuleGuard(routes)),
@@ -49,18 +47,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 OneCXHelpModule implements DoBootstrap {
   constructor(private readonly injector: Injector) {