Fix scalar value setting and displaying (#156)

Co-authored-by: Grzegorz Krajniak <[email protected]>

Author: gkrajniak

projects/wc/src/app/components/generic-ui/list-view/create-resource-modal/create-resource-modal.component.html

@@ -8,18 +8,24 @@
       }
     </ui5-title>
   </ui5-bar>
-  <section test-id="create-resource-dialog-form" class="form" [formGroup]="form">
+  <section
+    test-id="create-resource-dialog-form"
+    class="form"
+    [formGroup]="form"
+  >
     @for (field of fields(); track field.property) {
-      @let fieldProperty = sanitizePropertyName(field.property);
-      <div class="inputs" [attr.test-id]="'create-field-container-' + fieldProperty">
+      @let fieldProperty = sanitizePropertyName(field);
+      <div
+        class="inputs"
+        [attr.test-id]="'create-field-container-' + fieldProperty"
+      >
         <ui5-label
           [attr.test-id]="'create-field-label-' + fieldProperty"
           for="username"
           show-colon
           [required]="field.required"
-        >{{
-          field.label
-        }}</ui5-label>
+          >{{ field.label }}</ui5-label
+        >
         @if (field.values?.length) {
           <ui5-select
             class="input"
@@ -34,7 +40,12 @@
           >
             @for (value of [''].concat(field.values ?? []); track value) {
               <ui5-option
-                [attr.test-id]="'create-field-' + fieldProperty + '-option-' + (value || 'empty')"
+                [attr.test-id]="
+                  'create-field-' +
+                  fieldProperty +
+                  '-option-' +
+                  (value || 'empty')
+                "
                 [value]="value"
                 [selected]="value === form.controls[fieldProperty].value"
                 >{{ value }}</ui5-option
@@ -51,7 +62,8 @@
             (change)="setFormControlValue($event, fieldProperty)"
             (blur)="onFieldBlur(fieldProperty)"
             [required]="!!field.required"
-            [valueState]="getValueState(fieldProperty)" />
+            [valueState]="getValueState(fieldProperty)"
+          />
         } @else {
           <ui5-input
             class="input"
@@ -66,7 +78,9 @@
           >
             @if (form.controls[fieldProperty].errors?.k8sNameInvalid) {
               <div slot="valueStateMessage">
-                <a href="{{ k8sMessages.RFC_1035.href }}" target="_blank">{{ k8sMessages.RFC_1035.message }}</a>
+                <a href="{{ k8sMessages.RFC_1035.href }}" target="_blank">{{
+                  k8sMessages.RFC_1035.message
+                }}</a>
               </div>
             }
           </ui5-input>

projects/wc/src/app/components/generic-ui/list-view/create-resource-modal/create-resource-modal.component.spec.ts

@@ -189,20 +189,29 @@ describe('CreateResourceModalComponent', () => {
 
   describe('sanitizePropertyName', () => {
     it('should replace dots with underscores in property name', () => {
-      const property = 'metadata.name.firstName';
-      const result = (component as any).sanitizePropertyName(property);
+      const field = { property: 'metadata.name.firstName' };
+      const result = (component as any).sanitizePropertyName(field);
       expect(result).toBe('metadata_name_firstName');
     });
 
+    it('should take propertyField key into account', () => {
+      const field = {
+        property: 'metadata.name.firstName',
+        propertyField: { key: 'secret' },
+      };
+      const result = (component as any).sanitizePropertyName(field);
+      expect(result).toBe('metadata_name_firstName_secret');
+    });
+
     it('should handle property names without dots', () => {
-      const property = 'name';
-      const result = (component as any).sanitizePropertyName(property);
+      const field = { property: 'name' };
+      const result = (component as any).sanitizePropertyName(field);
       expect(result).toBe('name');
     });
 
     it('should throw error when property is an array', () => {
-      const property = ['name', 'firstName'];
-      expect(() => (component as any).sanitizePropertyName(property)).toThrow(
+      const field = { property: ['name', 'firstName'] };
+      expect(() => (component as any).sanitizePropertyName(field)).toThrow(
         'Wrong property type, array not supported',
       );
     });

projects/wc/src/app/components/generic-ui/list-view/create-resource-modal/create-resource-modal.component.ts

@@ -23,7 +23,7 @@ import {
 } from '@angular/forms';
 import { FieldDefinition, Resource } from '@platform-mesh/portal-ui-lib/models';
 import { ResourceNodeContext } from '@platform-mesh/portal-ui-lib/services';
-import { getValueByPath } from '@platform-mesh/portal-ui-lib/utils';
+import { getResourceValueByJsonPath } from '@platform-mesh/portal-ui-lib/utils';
 import {
   BarComponent,
   DialogComponent,
@@ -125,11 +125,16 @@ export class CreateResourceModalComponent implements OnInit {
     this.form.controls[formControlName].markAsTouched();
   }
 
-  sanitizePropertyName(property: string | string[]) {
+  sanitizePropertyName(field: FieldDefinition) {
+    const property: string | string[] = field.property;
     if (property instanceof Array) {
       throw new Error('Wrong property type, array not supported');
     }
-    return (property as string).replaceAll('.', '_');
+
+    return (
+      (property as string).replaceAll('.', '_') +
+      (field.propertyField ? `_${field.propertyField?.key}` : '')
+    );
   }
 
   isEditMode() {
@@ -148,10 +153,10 @@ export class CreateResourceModalComponent implements OnInit {
     return this.fields().reduce(
       (obj, fieldDefinition) => {
         const validators = this.getValidator(fieldDefinition);
-        const fieldName = this.sanitizePropertyName(fieldDefinition.property);
+        const fieldName = this.sanitizePropertyName(fieldDefinition);
         const fieldValue =
           resource && typeof fieldDefinition.property === 'string'
-            ? getValueByPath(resource, fieldDefinition.property)
+            ? getResourceValueByJsonPath(resource, fieldDefinition)
             : '';
         obj[fieldName] = new FormControl(fieldValue, validators);