Add operator field and message in detail form and delete dialog (#176)

* feat: add operator field and message in help detail form

* feat: bump deps

* fix: translation

---------

Co-authored-by: Christian Badura <[email protected]>

package.json

@@ -89,11 +89,11 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@openapitools/openapi-generator-cli": "^2.13.4",
-    "@schematics/angular": "18.1.4",
+    "@schematics/angular": "18.2.1",
     "@svgr/webpack": "^8.1.0",
     "@swc-node/register": "^1.10.9",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "~22.2.0",
+    "@types/node": "~22.5.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "css-loader": "^7.1.2",
@@ -110,7 +110,7 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-sonarqube-unit-reporter": "^0.0.23",
-    "ng-packagr": "18.1.0",
+    "ng-packagr": "18.2.1",
     "ngx-build-plus": "^18.0.0",
     "ngx-translate-testing": "^7.0.0",
     "postcss": "8.4.41",

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

@@ -1,4 +1,4 @@
-import { NO_ERRORS_SCHEMA, Component, SimpleChanges } from '@angular/core'
+import { NO_ERRORS_SCHEMA, Component } from '@angular/core'
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
 import { HttpClient } from '@angular/common/http'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
@@ -49,7 +49,7 @@ describe('HelpDetailComponent', () => {
       console.log('Filtering products with query:', event.query)
     }
     // eslint-disable-next-line @angular-eslint/use-lifecycle-interface
-    ngOnChanges(changes: SimpleChanges): void {
+    ngOnChanges(): void {
       console.log('On changes')
     }
   }

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

@@ -40,6 +40,28 @@
         {{ 'HELP_ITEM.HELP_ITEM_ID' | translate }}</label
       >
     </span>
+    <div *ngIf="changeMode !== 'NEW'">
+      <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"
+          formControlName="operator"
+          [binary]="true"
+          [styleClass]="'cursor-auto shadow-none'"
+          [label]="'HELP_ITEM.OPERATOR' | translate"
+          [pTooltip]="'HELP_ITEM.TOOLTIPS.OPERATOR' | translate"
+          tooltipPosition="right"
+          tooltipEvent="hover"
+        ></p-checkbox>
+      </div>
+      <p-message
+        *ngIf="helpItem?.operator"
+        styleClass="p-1"
+        id="help_detail_form_operator_delete_message"
+        severity="info"
+        [text]="'ACTIONS.DELETE.MESSAGE.OPERATOR_TEXT' | translate"
+      ></p-message>
+    </div>
     <span class="p-float-label">
       <input
         pInputText

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

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
-import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core'
-import { ReactiveFormsModule, FormGroup } from '@angular/forms'
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms'
 import { HttpClient } from '@angular/common/http'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core'
@@ -12,6 +12,15 @@ import { MessageService } from 'primeng/api'
 import { Product } from 'src/app/shared/generated'
 import { HelpFormComponent } from './help-form.component'
 
+const mockForm = new FormGroup({
+  product: new FormControl(null),
+  itemId: new FormControl(null),
+  context: new FormControl(null),
+  baseUrl: new FormControl(null),
+  resourceUrl: new FormControl(null),
+  operator: new FormControl(false)
+})
+
 describe('HelpFormComponent', () => {
   let component: HelpFormComponent
   let fixture: ComponentFixture<HelpFormComponent>
@@ -52,25 +61,22 @@ describe('HelpFormComponent', () => {
   it('should patch formGroup OnChanges if helpItem exists', () => {
     const mockHelpItem = {
       itemId: 'id',
-      productName: 'name'
+      productName: 'name',
+      operator: false
     }
     component.helpItem = mockHelpItem
-    component.formGroup = formGroupSpy
+    component.formGroup = mockForm
 
-    component.ngOnChanges({
-      helpItem: new SimpleChange(null, mockHelpItem, false)
-    })
+    component.ngOnChanges()
 
-    expect(formGroupSpy.patchValue).toHaveBeenCalledWith(mockHelpItem)
+    expect(component.formGroup.controls['itemId'].value).toBe(mockHelpItem.itemId)
   })
 
   it('should reset formGroup OnChanges if helpItem does not exist', () => {
     component.helpItem = undefined
     component.formGroup = formGroupSpy
 
-    component.ngOnChanges({
-      helpItem: new SimpleChange(null, null, false)
-    })
+    component.ngOnChanges()
 
     expect(component.formGroup.reset).toHaveBeenCalled()
   })

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

@@ -1,23 +1,24 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { FormControl, FormGroup, Validators } from '@angular/forms'
 
 import { Column } from '@onecx/portal-integration-angular'
-import { CreateHelp, Product } from 'src/app/shared/generated'
+import { Help, Product } from 'src/app/shared/generated'
 
 export interface HelpDetailForm {
   product: FormControl<Product | null>
   itemId: FormControl<string | null>
   context: FormControl<string | null>
   baseUrl: FormControl<string | null>
   resourceUrl: FormControl<string | null>
+  operator: FormControl<boolean | null>
 }
 
 @Component({
   selector: 'app-help-form',
   templateUrl: './help-form.component.html'
 })
 export class HelpFormComponent implements OnChanges {
-  @Input() helpItem: CreateHelp | undefined
+  @Input() helpItem: Help | undefined
   @Input() changeMode = 'NEW'
   @Input() products: Product[] = []
 
@@ -37,16 +38,18 @@ export class HelpFormComponent implements OnChanges {
       itemId: new FormControl(null, [Validators.required, Validators.minLength(2), Validators.maxLength(255)]),
       context: new FormControl(null, [Validators.maxLength(255)]),
       baseUrl: new FormControl(null, [Validators.maxLength(255)]),
-      resourceUrl: new FormControl(null, [Validators.maxLength(255)])
+      resourceUrl: new FormControl(null, [Validators.maxLength(255)]),
+      operator: new FormControl(false)
     })
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.helpItem)
+  ngOnChanges(): void {
+    if (this.helpItem) {
       this.formGroup.patchValue({
         ...this.helpItem
       })
-    else this.formGroup.reset()
+      this.formGroup.controls['operator'].disable()
+    } else this.formGroup.reset()
   }
 
   public filterProducts(event: { query: string }) {

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

@@ -165,6 +165,7 @@
       <div id="hm_help_delete_message_text" class="font-bold">
         {{('ACTIONS.DELETE.MESSAGE_TEXT' | translate).replace('{{ITEM}}', helpItem?.itemId)}}
       </div>
+      <div *ngIf="helpItem?.operator" class="mt-3">{{ 'ACTIONS.DELETE.MESSAGE.OPERATOR_TEXT' | translate }}</div>
       <div class="mt-2">{{ 'ACTIONS.DELETE.MESSAGE_INFO' | translate }}</div>
     </div>
   </div>