**Enhance property field handling with transformations**

docs/readme-generic-ui.md

@@ -52,6 +52,14 @@ Each field definition supports the following properties:
 
 - `"label"`: Display name for the field
 - `"property"`: JSON path to the resource property (string or array of strings for fallback values)
+- `"propertyField"`: In case the property is a scalar value that represents an object, this property can be used to specify the field to be used for display within that object
+  - `"key"`: The name of the field to be used for display
+  - `"transform"`: An array of text manipulations to be applied to the value, the available are:  
+    | 'uppercase'
+    | 'lowercase'
+    | 'capitalize'
+    | 'decode'
+    | 'encode'
 - `"jsonPathExpression"`: Alternative JSONPath expression for complex data access (takes precedence over `property`)
 - `"required"`: Boolean flag indicating if the field is mandatory (for create views)
 - `"values"`: Array of predefined values for selection
@@ -106,7 +114,7 @@ Below is an example content-configuration for an accounts node using the generic
               "namespace": null,
               "readyCondition": {
                 "jsonPathExpression": "status.conditions[?(@.type=='Ready' && @.status=='True')]",
-                "property": ["status.conditions.status", "status.conditions.type"],
+                "property": ["status.conditions.status", "status.conditions.type"]
               },
               "ui": {
                 "logoUrl": "https://www.kcp.io/icons/logo.svg",
@@ -120,6 +128,14 @@ Below is an example content-configuration for an accounts node using the generic
                       "label": "Display Name",
                       "property": "spec.displayName"
                     },
+                    {
+                      "label": "Key",
+                      "property": "data",
+                      "propertyField": {
+                        "key": "OPENAI_API_KEY",
+                        "transform": ["uppercase", "encode"]
+                      }
+                    },
                     {
                       "label": "Type",
                       "property": "spec.type",
@@ -213,7 +229,7 @@ Below is an example content-configuration for an accounts node using the generic
                         "operation": "cities",
                         "gqlQuery": "subscription { cities { data { id name } } }",
                         "value": "data.id",
-                        "key": "data.name",
+                        "key": "data.name"
                       }
                     }
                   ]

package.json

@@ -34,19 +34,19 @@
     "@angular/compiler-cli": "20.3.9",
     "@angular/localize": "20.3.9",
     "@briebug/jest-schematic": "6.0.0",
-    "@openmfp/portal-ui-lib": "0.182.11",
+    "@openmfp/portal-ui-lib": "0.182.12",
     "@openmfp/config-prettier": "0.9.1",
     "@types/jest": "30.0.0",
     "@types/jmespath": "0.15.2",
     "@types/jsonpath": "0.2.4",
     "@ui5/webcomponents-ngx": "0.5.6",
-    "kubernetes-types": "1.30.0",
     "cpx2": "8.0.0",
     "jest": "29.7.0",
     "jest-jasmine2": "29.7.0",
     "jest-junit": "16.0.0",
     "jest-mock-extended": "3.0.7",
     "jmespath": "0.16.0",
+    "kubernetes-types": "1.30.0",
     "mkdirp": "3.0.1",
     "move-cli": "2.0.0",
     "ng-packagr": "20.3.0",

projects/lib/models/models/resource.ts

@@ -1,6 +1,5 @@
 import { Condition, ObjectMeta } from 'kubernetes-types/meta/v1';
 
-
 export interface LabelDisplay {
   backgroundColor?: string;
   color?: string;
@@ -10,9 +9,22 @@ export interface LabelDisplay {
   textTransform?: string;
 }
 
+export type TransformType =
+  | 'uppercase'
+  | 'lowercase'
+  | 'capitalize'
+  | 'decode'
+  | 'encode';
+
+export interface PropertyField {
+  key: string;
+  transform?: TransformType[];
+}
+
 export interface FieldDefinition {
   label?: string;
   property: string | string[];
+  propertyField?: PropertyField;
   jsonPathExpression?: string;
   required?: boolean;
   values?: string[];
@@ -56,6 +68,7 @@ export interface Resource extends Record<string, any> {
   status?: ResourceStatus;
   __typename?: string;
   ready?: boolean;
+  data?: Record<string, any>;
 }
 
 export interface ResourceDefinition {
@@ -83,4 +96,4 @@ export interface UIDefinition {
   detailView?: UiView;
 }
 
-export type KubernetesScope = 'Cluster' | 'Namespaced';
+export type KubernetesScope = 'Cluster' | 'Namespaced';

projects/lib/utils/utils/get-value-by-path.ts

@@ -7,6 +7,5 @@ export const getValueByPath = <T extends object, R = unknown>(
 ): R | undefined => {
   return getResourceValueByJsonPath(obj as Resource, {
     jsonPathExpression: path,
-    property: '',
   });
 };

projects/lib/utils/utils/resource-field-by-path.spec.ts

@@ -82,3 +82,83 @@ describe('getResourceValueByJsonPath', () => {
     expect(result).toBe('image1');
   });
 });
+
+describe('getResourceValueByJsonPath with propertyField', () => {
+  it('returns transformed single propertyField value', () => {
+    const resource = {
+      data: {
+        user: { name: 'john doe' },
+      },
+    } as unknown as Resource;
+
+    const field = {
+      property: 'data.user',
+      propertyField: { key: 'name', transform: ['capitalize'] },
+    } as unknown as FieldDefinition;
+
+    const result = getResourceValueByJsonPath(resource, field);
+    expect(result).toBe('John doe');
+  });
+
+  it('applies encode transform', () => {
+    const resource = {
+      data: {
+        secret: { token: 'hello' },
+      },
+    } as unknown as Resource;
+
+    const field = {
+      property: 'data.secret',
+      propertyField: { key: 'token', transform: ['encode'] },
+    } as unknown as FieldDefinition;
+
+    const result = getResourceValueByJsonPath(resource, field);
+    expect(result).toBe('aGVsbG8=');
+  });
+
+  it('applies multiple transforms in order (uppercase then encode)', () => {
+    const resource = {
+      data: {
+        info: { v: 'abc' },
+      },
+    } as unknown as Resource;
+
+    const field = {
+      property: 'data.info',
+      propertyField: { key: 'v', transform: ['uppercase', 'encode'] },
+    } as unknown as FieldDefinition;
+
+    const result = getResourceValueByJsonPath(resource, field);
+    expect(result).toBe('QUJD');
+  });
+
+  it('returns undefined if value missing for key', () => {
+    const resource = {
+      data: {
+        user: {},
+      },
+    } as unknown as Resource;
+
+    const field = {
+      property: 'data.user',
+      propertyField: { key: 'missing' },
+    } as unknown as FieldDefinition;
+
+    const result = getResourceValueByJsonPath(resource, field);
+    expect(result).toBeUndefined();
+  });
+
+  it('skips when base object is undefined', () => {
+    const resource = {
+      data: {},
+    } as unknown as Resource;
+
+    const field = {
+      property: 'data.missing',
+      propertyField: { key: 'anything' },
+    } as unknown as FieldDefinition;
+
+    const result = getResourceValueByJsonPath(resource, field);
+    expect(result).toBeUndefined();
+  });
+});

projects/lib/utils/utils/resource-field-by-path.ts

@@ -1,9 +1,17 @@
-import { Resource } from '@platform-mesh/portal-ui-lib/models';
+import {
+  PropertyField,
+  Resource,
+  TransformType,
+} from '@platform-mesh/portal-ui-lib/models';
 import jsonpath from 'jsonpath';
 
 export const getResourceValueByJsonPath = (
   resource: Resource,
-  field: { jsonPathExpression?: string; property?: string | string[] },
+  field: {
+    jsonPathExpression?: string;
+    property?: string | string[];
+    propertyField?: PropertyField;
+  },
 ) => {
   const property = field.jsonPathExpression || field.property;
   if (!property) {
@@ -17,6 +25,77 @@ export const getResourceValueByJsonPath = (
     return undefined;
   }
 
-  const value = jsonpath.query(resource, `$.${property}`);
-  return value.length ? value[0] : undefined;
+  const queryResult = jsonpath.query(resource, `$.${property}`);
+  const value = queryResult.length ? queryResult[0] : undefined;
+
+  if (value && field.propertyField) {
+    return executeTransform(
+      value[field.propertyField.key],
+      field.propertyField.transform,
+    );
+  }
+
+  return value;
+};
+
+const executeTransform = (
+  value: string | undefined,
+  transform: TransformType[] | undefined,
+): string | undefined => {
+  if (value == null || transform == null || !transform.length) return value;
+
+  return transform.reduce((acc, t) => {
+    if (acc == null) return acc;
+
+    switch (t) {
+      case 'uppercase':
+        return acc.toUpperCase();
+      case 'lowercase':
+        return acc.toLowerCase();
+      case 'capitalize': {
+        const str = String(acc);
+        return str.length ? str.charAt(0).toUpperCase() + str.slice(1) : str;
+      }
+      case 'decode': {
+        try {
+          return decodeBase64(acc);
+        } catch {
+          return acc;
+        }
+      }
+      case 'encode': {
+        try {
+          return encodeBase64(acc);
+        } catch {
+          return acc;
+        }
+      }
+      default:
+        return acc;
+    }
+  }, value);
+};
+
+export const encodeBase64 = (str: string): string => {
+  try {
+    const utf8Bytes = new TextEncoder().encode(str);
+    const binaryString = Array.from(utf8Bytes, (byte) =>
+      String.fromCharCode(byte),
+    ).join('');
+    return btoa(binaryString);
+  } catch (error) {
+    console.error('Base64 encoding failed:', error);
+    throw new Error('Failed to encode string to Base64');
+  }
+};
+
+export const decodeBase64 = (base64: string): string => {
+  try {
+    const binaryString = atob(base64);
+    const bytes = Uint8Array.from(binaryString, (char) => char.charCodeAt(0));
+    return new TextDecoder().decode(bytes);
+  } catch (error) {
+    console.error('Base64 decoding failed:', error);
+    throw new Error('Failed to decode Base64 string');
+  }
 };