From 63ccb069790d784f971de2e9ad1bc6a38528f1f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henry=20T=C3=A4schner?=
 <129834483+HenryT-CG@users.noreply.github.com>
Date: Tue, 29 Oct 2024 11:48:28 +0100
Subject: [PATCH] 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                       |   8 +
 src/app/app.component.spec.ts                 |  11 +-
 src/app/app.module.ts                         |  30 ++--
 .../help-detail/help-detail.component.html    |   6 +-
 .../help-detail/help-detail.component.spec.ts |   3 +
 .../help/help-form/help-form.component.html   |  28 ++--
 .../help-form/help-form.component.spec.ts     |  17 ++
 src/app/help/help-form/help-form.component.ts |   7 +-
 .../help-criteria.component.scss              |   1 +
 .../help-search/help-search.component.html    |   2 +-
 .../help/help-search/help-search.component.ts |   4 +-
 src/app/onecx-help-remote.module.ts           |  33 ++--
 .../help-item-editor-form.component.html      | 152 ++++++++++--------
 .../help-item-editor-form.component.scss      |  14 ++
 .../help-item-editor-form.component.spec.ts   |  24 +--
 .../help-item-editor-form.component.ts        |  17 +-
 .../help-item-editor-form.harness.ts          |  29 +---
 .../help-item-editor.component.ts             |  22 +--
 src/styles.scss                               |  18 +--
 webpack.config.js                             |   9 +-
 20 files changed, 221 insertions(+), 214 deletions(-)

diff --git a/src/app/_hm-mixins.scss b/src/app/_hm-mixins.scss
index 182744f..d9fbc67 100644
--- a/src/app/_hm-mixins.scss
+++ b/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) {
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index c03db24..8ae8ed4 100644
--- a/src/app/app.component.spec.ts
+++ b/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')
-  })
-  */
 })
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5ce3a90..0e83575 100644
--- a/src/app/app.module.ts
+++ b/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')
   }
 }
diff --git a/src/app/help/help-detail/help-detail.component.html b/src/app/help/help-detail/help-detail.component.html
index cf51326..9f0fcbd 100644
--- a/src/app/help/help-detail/help-detail.component.html
+++ b/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"
diff --git a/src/app/help/help-detail/help-detail.component.spec.ts b/src/app/help/help-detail/help-detail.component.spec.ts
index aa9a15a..8b18352 100644
--- a/src/app/help/help-detail/help-detail.component.spec.ts
+++ b/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')
diff --git a/src/app/help/help-form/help-form.component.html b/src/app/help/help-form/help-form.component.html
index 879e5e5..35752d6 100644
--- a/src/app/help/help-form/help-form.component.html
+++ b/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,7 +18,7 @@
         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>
@@ -26,7 +26,7 @@
       <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"
@@ -34,15 +34,13 @@
         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>
diff --git a/src/app/help/help-form/help-form.component.spec.ts b/src/app/help/help-form/help-form.component.spec.ts
index 9ee7e24..deae266 100644
--- a/src/app/help/help-form/help-form.component.spec.ts
+++ b/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)
+    })
+  })
 })
diff --git a/src/app/help/help-form/help-form.component.ts b/src/app/help/help-form/help-form.component.ts
index 0803996..1b81169 100644
--- a/src/app/help/help-form/help-form.component.ts
+++ b/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())
   }
 }
diff --git a/src/app/help/help-search/help-criteria/help-criteria.component.scss b/src/app/help/help-search/help-criteria/help-criteria.component.scss
index 80a0054..f07d3bf 100644
--- a/src/app/help/help-search/help-criteria/help-criteria.component.scss
+++ b/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;
diff --git a/src/app/help/help-search/help-search.component.html b/src/app/help/help-search/help-search.component.html
index a44c93c..f685684 100644
--- a/src/app/help/help-search/help-search.component.html
+++ b/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
diff --git a/src/app/help/help-search/help-search.component.ts b/src/app/help/help-search/help-search.component.ts
index b6a4e26..b99c1c2 100644
--- a/src/app/help/help-search/help-search.component.ts
+++ b/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
diff --git a/src/app/onecx-help-remote.module.ts b/src/app/onecx-help-remote.module.ts
index 9c262d9..2307cc1 100644
--- a/src/app/onecx-help-remote.module.ts
+++ b/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) {
diff --git a/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.html b/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.html
index 20e99c9..776ef5f 100644
--- a/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.html
+++ b/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.html
@@ -1,67 +1,91 @@
-<form [formGroup]="formGroup" class="flex flex-column row-gap-4 justify-content-center align-items-center">
-  <span class="p-float-label w-full mt-2">
-    <input
-      id="hm_item_editor_field_helpitem_id"
-      class="w-full"
-      type="text"
-      pInputText
-      name="helpItemId"
-      formControlName="helpItemId"
-      [pTooltip]="'HELP_ITEM.TOOLTIPS.HELP_ITEM_ID' | translate"
-      tooltipPosition="top"
-      tooltipEvent="hover"
-    />
-    <label class="ocx-required-label" for="hm_item_editor_field_helpitem_id">
-      {{ 'HELP_ITEM.HELP_ITEM_ID' | translate }}</label
-    >
-  </span>
+<form [formGroup]="formGroup">
+  <div class="flex flex-wrap flex-column gap-4 justify-content-between mt-2">
+    <span class="p-float-label">
+      <input
+        id="hm_item_editor_form_product_name"
+        class="w-full"
+        type="text"
+        pInputText
+        formControlName="productName"
+        aria-labelledby="hm_item_editor_form_product_name"
+        [pTooltip]="'HELP_ITEM.TOOLTIPS.APPLICATION_NAME' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      />
+      <label class="ocx-required-label" for="hm_item_editor_form_product_name">
+        {{ 'HELP_ITEM.APPLICATION_NAME' | translate }}</label
+      >
+    </span>
 
-  <span class="p-float-label w-full">
-    <input
-      id="hm_item_editor_field_product_name"
-      class="w-full"
-      type="text"
-      pInputText
-      name="productName"
-      formControlName="productName"
-      [pTooltip]="'HELP_ITEM.TOOLTIPS.APPLICATION_NAME' | translate"
-      tooltipPosition="top"
-      tooltipEvent="hover"
-    />
-    <label class="ocx-required-label" for="hm_item_editor_field_product_name">
-      {{ 'HELP_ITEM.APPLICATION_NAME' | translate }}</label
-    >
-  </span>
+    <span class="p-float-label">
+      <input
+        id="hm_item_editor_form_helpitem_id"
+        class="w-full pt-3 pb-2 text-responsive"
+        type="text"
+        pInputText
+        formControlName="helpItemId"
+        aria-labelledby="hm_item_editor_form_helpitem_id"
+        [pTooltip]="'HELP_ITEM.TOOLTIPS.HELP_ITEM_ID' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      />
+      <label class="ocx-required-label" for="hm_item_editor_form_helpitem_id">
+        {{ 'HELP_ITEM.HELP_ITEM_ID' | translate }}</label
+      >
+    </span>
 
-  <span class="p-float-label w-full">
-    <input
-      id="hm_item_editor_field_base_url"
-      class="w-full"
-      type="text"
-      pInputText
-      name="baseUrl"
-      formControlName="baseUrl"
-      [pTooltip]="'HELP_ITEM.TOOLTIPS.BASE_URL' | translate"
-      tooltipPosition="top"
-      tooltipEvent="hover"
-    />
-    <label class="ocx-required-label" for="hm_item_editor_field_base_url">
-      {{ 'HELP_ITEM.BASE_URL' | translate }}</label
-    >
-  </span>
-
-  <span class="p-float-label w-full">
-    <input
-      id="hm_item_editor_field_resource_url"
-      class="w-full"
-      type="text"
-      pInputText
-      name="resourceUrl"
-      formControlName="resourceUrl"
-      [pTooltip]="'HELP_ITEM.TOOLTIPS.RESOURCE_URL' | translate"
-      tooltipPosition="top"
-      tooltipEvent="hover"
-    />
-    <label for="hm_item_editor_field_resource_url">{{ 'HELP_ITEM.RESOURCE_URL' | translate }}</label>
-  </span>
+    <p-fieldset [toggleable]="false" [collapsed]="false" styleClass="surface-100 pb-3 px-2">
+      <ng-template pTemplate="header">
+        <span [pTooltip]="'HELP_DETAIL.URL.TOOLTIP' | translate" tooltipPosition="top" tooltipEvent="hover">
+          {{ 'HELP_DETAIL.URL' | translate }}
+        </span>
+      </ng-template>
+      <div class="flex flex-wrap flex-column gap-4 justify-content-between mt-2">
+        <span class="p-float-label">
+          <input
+            id="hm_item_editor_form_base_url"
+            class="w-full pt-3 pb-2 text-responsive"
+            type="text"
+            pInputText
+            formControlName="baseUrl"
+            aria-labelledby="hm_item_editor_form_base_url"
+            [pTooltip]="'HELP_ITEM.TOOLTIPS.BASE_URL' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
+          />
+          <label class="ocx-required-label" for="hm_item_editor_form_base_url">
+            {{ 'HELP_ITEM.BASE_URL' | translate }}</label
+          >
+        </span>
+        <span class="p-float-label">
+          <input
+            id="hm_item_editor_form_resource_url"
+            class="w-full pt-3 pb-2 text-responsive"
+            type="text"
+            pInputText
+            formControlName="resourceUrl"
+            aria-labelledby="hm_item_editor_form_resource_url"
+            [pTooltip]="'HELP_ITEM.TOOLTIPS.RESOURCE_URL' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
+          />
+          <label for="hm_item_editor_form_resource_url">{{ 'HELP_ITEM.RESOURCE_URL' | translate }}</label>
+        </span>
+        <span class="p-float-label">
+          <input
+            pInputText
+            type="text"
+            id="hm_item_editor_form_context"
+            class="w-full pt-3 pb-2 text-responsive"
+            formControlName="context"
+            aria-labelledby="hm_item_editor_form_context"
+            [pTooltip]="'HELP_ITEM.TOOLTIPS.CONTEXT' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
+          />
+          <label class="" for="hm_item_editor_form_context">{{ 'HELP_ITEM.CONTEXT' | translate }}</label>
+        </span>
+      </div>
+    </p-fieldset>
+  </div>
 </form>
diff --git a/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.scss b/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.scss
index f4e576c..f10f910 100644
--- a/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.scss
+++ b/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.scss
@@ -1,4 +1,18 @@
 @import '/src/app/_hm-mixins.scss';
 
 @include correct-modal-dialog;
+@include displaying-text-responsive;
 @include readable-disabled-form-controls;
+
+:host ::ng-deep {
+  .p-fieldset {
+    &.p-fieldset-toggleable .p-fieldset-legend a,
+    .p-fieldset-legend {
+      background-color: transparent;
+      padding: 0 0.4rem;
+    }
+    .p-fieldset-content {
+      padding: 0.5rem 0.2rem 0rem;
+    }
+  }
+}
diff --git a/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.spec.ts b/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.spec.ts
index 38937b7..b7b4a54 100644
--- a/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.spec.ts
+++ b/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.spec.ts
@@ -56,25 +56,20 @@ describe('HelpItemEditorFormComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  it('should display correct labels', async () => {
-    expect(await helpItemEditorDialogHarness.getHelpItemIdLabelText()).toEqual('Help Item ID')
-    expect(await helpItemEditorDialogHarness.getProductNameLabelText()).toEqual('Application')
-    expect(await helpItemEditorDialogHarness.getBaseUrlLabelText()).toEqual('Base URL')
-    expect(await helpItemEditorDialogHarness.getResourceUrlLabelText()).toEqual('Resource URL')
-  })
-
   it('should initially have empty values', async () => {
     expect(await helpItemEditorDialogHarness.getHelpItemIdValue()).toEqual('')
     expect(await helpItemEditorDialogHarness.getProductNameValue()).toEqual('')
     expect(await helpItemEditorDialogHarness.getBaseUrlValue()).toEqual('')
     expect(await helpItemEditorDialogHarness.getResourceUrlValue()).toEqual('')
+    expect(await helpItemEditorDialogHarness.getContextValue()).toEqual('')
   })
 
   it('should update form and result on changes', async () => {
     const helpItem = {
       productName: 'new_product_name',
       itemId: 'new_item_id',
-      resourceUrl: 'new_resource_url'
+      resourceUrl: 'new_resource_url',
+      context: 'new_context'
     }
     component.helpItem = helpItem
     component.productDisplayName = 'new product display name'
@@ -89,6 +84,7 @@ describe('HelpItemEditorFormComponent', () => {
     expect(await helpItemEditorDialogHarness.getHelpItemIdValue()).toEqual('new_item_id')
     expect(await helpItemEditorDialogHarness.getProductNameValue()).toEqual('new product display name')
     expect(await helpItemEditorDialogHarness.getResourceUrlValue()).toEqual('new_resource_url')
+    expect(await helpItemEditorDialogHarness.getContextValue()).toEqual('new_context')
     expect(component.dialogResult).toEqual(helpItem)
   })
 
@@ -100,14 +96,16 @@ describe('HelpItemEditorFormComponent', () => {
     const helpItem = {
       productName: 'new_product_name',
       itemId: 'new_item_id',
-      resourceUrl: 'new_resource_url'
+      resourceUrl: 'new_resource_url',
+      context: 'new_context'
     }
     component.helpItem = helpItem
     component.formGroup.patchValue({
       productName: 'form_product_name',
       itemId: 'form_item_id',
       baseUrl: 'form_base_url',
-      resourceUrl: 'form_resource_url'
+      resourceUrl: 'form_resource_url',
+      context: 'form_context'
     })
 
     const result = component.ocxDialogButtonClicked({ button: 'primary' } as any)
@@ -116,7 +114,8 @@ describe('HelpItemEditorFormComponent', () => {
       productName: 'new_product_name',
       itemId: 'new_item_id',
       baseUrl: 'form_base_url',
-      resourceUrl: 'form_resource_url'
+      resourceUrl: 'form_resource_url',
+      context: 'form_context'
     })
   })
 
@@ -125,7 +124,8 @@ describe('HelpItemEditorFormComponent', () => {
       productName: 'new_product_name',
       itemId: 'new_item_id',
       baseUrl: 'new_base_url',
-      resourceUrl: 'new_resource_path'
+      resourceUrl: 'new_resource_path',
+      context: 'new_context'
     }
     component.helpItem = helpItem
     fixture.detectChanges()
diff --git a/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.ts b/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.ts
index 3901094..68df72c 100644
--- a/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.ts
+++ b/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.component.ts
@@ -4,6 +4,7 @@ import { TranslateModule } from '@ngx-translate/core'
 import { DialogButtonClicked, DialogResult, DialogState, PortalMessageService } from '@onecx/portal-integration-angular'
 import { InputTextModule } from 'primeng/inputtext'
 import { TooltipModule } from 'primeng/tooltip'
+import { FieldsetModule } from 'primeng/fieldset'
 import { Observable } from 'rxjs'
 import { Help } from 'src/app/shared/generated'
 
@@ -12,7 +13,7 @@ import { Help } from 'src/app/shared/generated'
   standalone: true,
   styleUrls: ['./help-item-editor-form.component.scss'],
   templateUrl: './help-item-editor-form.component.html',
-  imports: [InputTextModule, ReactiveFormsModule, TranslateModule, TooltipModule],
+  imports: [InputTextModule, ReactiveFormsModule, TranslateModule, TooltipModule, FieldsetModule],
   providers: [PortalMessageService, FormBuilder]
 })
 export class HelpItemEditorFormComponent implements DialogResult<Help>, DialogButtonClicked, OnChanges {
@@ -29,7 +30,8 @@ export class HelpItemEditorFormComponent implements DialogResult<Help>, DialogBu
       helpItemId: new FormControl({ value: null, disabled: true }, [Validators.required]),
       productName: new FormControl({ value: null, disabled: true }, [Validators.required]),
       baseUrl: new FormControl(null, Validators.required),
-      resourceUrl: new FormControl(null)
+      resourceUrl: new FormControl(null),
+      context: new FormControl(null)
     })
   }
 
@@ -41,7 +43,8 @@ export class HelpItemEditorFormComponent implements DialogResult<Help>, DialogBu
       this.formGroup.patchValue({
         helpItemId: this.dialogResult.itemId,
         baseUrl: this.dialogResult.baseUrl,
-        resourceUrl: this.dialogResult.resourceUrl
+        resourceUrl: this.dialogResult.resourceUrl,
+        context: this.dialogResult.context
       })
     }
     if (changes['productDisplayName'] && this.productDisplayName) {
@@ -55,18 +58,16 @@ export class HelpItemEditorFormComponent implements DialogResult<Help>, DialogBu
     if (state.button === 'secondary') {
       return true
     }
-
     if (this.formGroup.valid && this.helpItem) {
       this.dialogResult = {
         ...this.helpItem,
         baseUrl: this.formGroup.value['baseUrl'],
-        resourceUrl: this.formGroup.value['resourceUrl']
+        resourceUrl: this.formGroup.value['resourceUrl'],
+        context: this.formGroup.value['context']
       }
       return true
     } else {
-      this.portalMessageService.error({
-        summaryKey: 'HELP_ITEM_EDITOR.SAVE_ERROR'
-      })
+      this.portalMessageService.error({ summaryKey: 'HELP_ITEM_EDITOR.SAVE_ERROR' })
       return false
     }
   }
diff --git a/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.harness.ts b/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.harness.ts
index b1a82c7..617ebb9 100644
--- a/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.harness.ts
+++ b/src/app/remotes/help-item-editor/help-item-editor-form/help-item-editor-form.harness.ts
@@ -3,44 +3,29 @@ import { ComponentHarness } from '@angular/cdk/testing'
 export class HelpItemEditorDialogHarness extends ComponentHarness {
   static readonly hostSelector = 'app-ocx-help-item-editor'
 
-  getHelpItemIdInput = this.locatorFor('#hm_item_editor_field_helpitem_id')
-  getHelpItemIdLabel = this.locatorFor('label[for=hm_item_editor_field_helpitem_id]')
-  getProductNameInput = this.locatorFor('#hm_item_editor_field_product_name')
-  getProductNameLabel = this.locatorFor('label[for=hm_item_editor_field_product_name]')
-  getBaseUrlInput = this.locatorFor('#hm_item_editor_field_base_url')
-  getBaseUrlLabel = this.locatorFor('label[for=hm_item_editor_field_base_url]')
-  getResourceUrlInput = this.locatorFor('#hm_item_editor_field_resource_url')
-  getResourceUrlLabel = this.locatorFor('label[for=hm_item_editor_field_resource_url]')
+  getHelpItemIdInput = this.locatorFor('#hm_item_editor_form_helpitem_id')
+  getProductNameInput = this.locatorFor('#hm_item_editor_form_product_name')
+  getBaseUrlInput = this.locatorFor('#hm_item_editor_form_base_url')
+  getResourceUrlInput = this.locatorFor('#hm_item_editor_form_resource_url')
+  getContextInput = this.locatorFor('#hm_item_editor_form_context')
 
   async getHelpItemIdValue(): Promise<string> {
     return await (await this.getHelpItemIdInput()).getProperty<string>('value')
   }
 
-  async getHelpItemIdLabelText(): Promise<string | undefined> {
-    return await (await this.getHelpItemIdLabel())?.text()
-  }
-
   async getProductNameValue(): Promise<string> {
     return await (await this.getProductNameInput()).getProperty<string>('value')
   }
 
-  async getProductNameLabelText(): Promise<string | undefined> {
-    return await (await this.getProductNameLabel())?.text()
-  }
-
   async getBaseUrlValue(): Promise<string> {
     return await (await this.getBaseUrlInput()).getProperty<string>('value')
   }
 
-  async getBaseUrlLabelText(): Promise<string | undefined> {
-    return await (await this.getBaseUrlLabel())?.text()
-  }
-
   async getResourceUrlValue(): Promise<string> {
     return await (await this.getResourceUrlInput()).getProperty<string>('value')
   }
 
-  async getResourceUrlLabelText(): Promise<string | undefined> {
-    return await (await this.getResourceUrlLabel())?.text()
+  async getContextValue(): Promise<string> {
+    return await (await this.getContextInput()).getProperty<string>('value')
   }
 }
diff --git a/src/app/remotes/help-item-editor/help-item-editor.component.ts b/src/app/remotes/help-item-editor/help-item-editor.component.ts
index 68971ca..fda0201 100644
--- a/src/app/remotes/help-item-editor/help-item-editor.component.ts
+++ b/src/app/remotes/help-item-editor/help-item-editor.component.ts
@@ -157,25 +157,11 @@ export class OneCXHelpItemEditorComponent implements ocxRemoteComponent, ocxRemo
       'HELP_ITEM_EDITOR.HEADER',
       {
         type: HelpItemEditorFormComponent,
-        inputs: {
-          helpItem: helpItem,
-          productDisplayName: productDisplayName
-        }
-      },
-      {
-        key: 'ACTIONS.SAVE',
-        icon: PrimeIcons.CHECK
+        inputs: { helpItem: helpItem, productDisplayName: productDisplayName }
       },
-      {
-        key: 'ACTIONS.CANCEL',
-        icon: PrimeIcons.TIMES
-      },
-      {
-        showXButton: true,
-        draggable: true,
-        resizable: true,
-        width: '500px'
-      }
+      { key: 'ACTIONS.SAVE', icon: PrimeIcons.CHECK },
+      { key: 'ACTIONS.CANCEL', icon: PrimeIcons.TIMES },
+      { showXButton: true, draggable: true, resizable: true, width: '550px' }
     )
   }
 
diff --git a/src/styles.scss b/src/styles.scss
index 75af930..17e5a96 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,21 +7,9 @@
 @import '@onecx/portal-layout-styles/src/styles/primeng/theme-light.scss';
 @import '../node_modules/@onecx/portal-integration-angular/assets/styles.scss';
 
-/* Specials for p-overlay */
-.p-dropdown-panel .p-dropdown-items {
-  // zebra rows
-  *:nth-child(odd) .p-dropdown-item {
-    background-color: #f8f9fa;
-  }
-}
+// This does not work if located inside the app
 .p-autocomplete-panel .p-autocomplete-items {
-  // zebra rows
-  .p-autocomplete-item:nth-child(odd) {
-    background-color: #f8f9fa;
+  .p-autocomplete-item:nth-child(even) {
+    background-color: var(--table-body-row-even-bg);
   }
 }
-// compact
-.p-dropdown-item,
-.p-autocomplete-item {
-  padding: 0.5rem 1rem;
-}
diff --git a/webpack.config.js b/webpack.config.js
index e2d8278..b30b116 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,20 +11,19 @@ const config = withModuleFederationPlugin({
   },
   shared: share({
     '@angular/core': { requiredVersion: 'auto', includeSecondaries: true },
-    '@angular/forms': { requiredVersion: 'auto', includeSecondaries: true, eager: false },
     '@angular/common': { requiredVersion: 'auto', includeSecondaries: { skip: ['@angular/common/http/testing'] } },
     '@angular/common/http': { requiredVersion: 'auto', includeSecondaries: true },
-    '@angular/router': { requiredVersion: 'auto', includeSecondaries: true },
+    '@angular/forms': { requiredVersion: 'auto', includeSecondaries: true },
     '@angular/platform-browser': { requiredVersion: 'auto', includeSecondaries: true },
-    rxjs: { requiredVersion: 'auto', includeSecondaries: true },
-    primeng: { requiredVersion: 'auto', includeSecondaries: true },
+    '@angular/router': { requiredVersion: 'auto', includeSecondaries: true },
     '@ngx-translate/core': { requiredVersion: 'auto' },
+    primeng: { requiredVersion: 'auto', includeSecondaries: true },
+    rxjs: { requiredVersion: 'auto', includeSecondaries: true },
     '@onecx/accelerator': { requiredVersion: 'auto', includeSecondaries: true },
     '@onecx/angular-accelerator': { requiredVersion: 'auto', includeSecondaries: true },
     '@onecx/angular-auth': { requiredVersion: 'auto', includeSecondaries: true },
     '@onecx/angular-integration-interface': { requiredVersion: 'auto', includeSecondaries: true },
     '@onecx/angular-remote-components': { requiredVersion: 'auto', includeSecondaries: true },
-    '@onecx/angular-testing': { requiredVersion: 'auto', includeSecondaries: true },
     '@onecx/angular-webcomponents': { requiredVersion: 'auto', includeSecondaries: true },
     '@onecx/integration-interface': { requiredVersion: 'auto', includeSecondaries: true },
     '@onecx/keycloak-auth': { requiredVersion: 'auto', includeSecondaries: true },