feat: change fieldDefinition interface

Author: Sobyt483

docs/readme-generic-ui.md

@@ -68,14 +68,18 @@ Each field definition supports the following properties:
   - `"label"`: Display name for the group
   - `"delimiter"`: String used to separate grouped values
   - `"multiline"`: Boolean flag for multiline display of grouped values (default: true) When true, values are displayed on separate lines
-- `"labelDisplay"`: Boolean value for using the defaults or an object for customizing the visual appearance of field values:
-  - `"backgroundColor"`: Background color for the value (CSS color value)
-  - `"color"`: Text color for the value (CSS color value)
-  - `"fontWeight"`: Font weight for the value (CSS font-weight value)
-  - `"fontStyle"`: Font style for the value (CSS font-style value)
-  - `"textDecoration"`: Text decoration for the value (CSS text-decoration value)
-  - `"textTransform"`: Text transformation for the value (CSS text-transform value)
-- `"displayAsPlainText"`: Boolean valu that give you ability to render value as it is, without any built-in transformation.
+- `"uiSettings"`: Object for configuring UI-specific display settings:
+  - `"labelDisplay"`: Boolean value for using the defaults or an object for customizing the visual appearance of field values:
+    - `"backgroundColor"`: Background color for the value (CSS color value)
+    - `"color"`: Text color for the value (CSS color value)
+    - `"fontWeight"`: Font weight for the value (CSS font-weight value)
+    - `"fontStyle"`: Font style for the value (CSS font-style value)
+    - `"textDecoration"`: Text decoration for the value (CSS text-decoration value)
+    - `"textTransform"`: Text transformation for the value (CSS text-transform value)
+  - `"displayAs"`: Controls how the value is displayed:
+    - `'plainText'`: Render value as plain text without any built-in transformation
+    - `'secret'`: Render value as a secret with show/hide hover
+  - `"withCopyButton"`: Boolean flag to show a copy button next to the value for easy copying to clipboard
 - `"dynamicValuesDefinition"`: Configuration for dynamic value loading:
   - `"operation"`: GraphQL operation name
   - `"gqlQuery"`: GraphQL query string
@@ -85,6 +89,13 @@ Each field definition supports the following properties:
 #### Example Content Configuration for an Accounts Node
 Below is an example content-configuration for an accounts node using the generic list view.
 
+This example demonstrates various features including:
+- **Secret fields**: The "Key" field in `listView` and "API Key" field in `detailView` use `displayAs: "secret"` to hide sensitive data with a toggle
+- **Copy buttons**: Multiple fields include `withCopyButton: true` for easy copying to clipboard
+- **Plain text display**: The "External URL" field uses `displayAs: "plainText"` to prevent automatic link formatting
+- **Custom styling**: The "Type" and "Display Name" fields use `labelDisplay` for visual customization
+- **Field grouping**: Contact information is grouped using the `group` property
+
 ```json
 {
   "name": "accounts",
@@ -134,6 +145,10 @@ Below is an example content-configuration for an accounts node using the generic
                       "propertyField": {
                         "key": "OPENAI_API_KEY",
                         "transform": ["uppercase", "encode"]
+                      },
+                      "uiSettings": {
+                        "displayAs": "secret",
+                        "withCopyButton": true
                       }
                     },
                     {
@@ -180,6 +195,29 @@ Below is an example content-configuration for an accounts node using the generic
                         "fontWeight": "600"
                       }
                     },
+                    {
+                      "label": "API Key",
+                      "property": "spec.credentials.apiKey",
+                      "uiSettings": {
+                        "displayAs": "secret",
+                        "withCopyButton": true
+                      }
+                    },
+                    {
+                      "label": "Account ID",
+                      "property": "metadata.uid",
+                      "uiSettings": {
+                        "withCopyButton": true
+                      }
+                    },
+                    {
+                      "label": "External URL",
+                      "property": "spec.externalUrl",
+                      "uiSettings": {
+                        "displayAs": "plainText",
+                        "withCopyButton": true
+                      }
+                    },
                     {
                       "label": "Contact Info",
                       "property": "spec.email",

projects/lib/models/models/resource.ts

@@ -21,6 +21,12 @@ export interface PropertyField {
   transform?: TransformType[];
 }
 
+export interface UiSettings {
+  labelDisplay?: LabelDisplay | boolean;
+  displayAs?: 'plainText' | 'secret';
+  withCopyButton?: boolean;
+}
+
 export interface FieldDefinition {
   label?: string;
   property: string | string[];
@@ -34,10 +40,7 @@ export interface FieldDefinition {
     delimiter?: string;
     multiline?: boolean;
   };
-  labelDisplay?: LabelDisplay | boolean;
-  displayAsPlainText?: boolean;
-  withCopyButton?: boolean;
-  displayAsSecret?: boolean;
+  uiSettings?: UiSettings;
   dynamicValuesDefinition?: {
     operation: string;
     gqlQuery: string;

projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.html

@@ -1,17 +1,15 @@
-@if (displayAsPlainText()) {
+@if (displayAs() === 'plainText') {
   {{ value() }}
-} @else if (displayAsSecret()) {
+} @else if (displayAs() === 'secret') {
   <wc-secret-value [value]="value()"></wc-secret-value>
+} @else if (isBoolLike()) {
+  <wc-boolean-value [boolValue]="boolValue()!"></wc-boolean-value>
+} @else if (isUrlValue()) {
+  <wc-link-value [urlValue]="stringValue()!"></wc-link-value>
+} @else if (isLabelValue()) {
+  <wc-label-value [labelDisplay]="labelDisplayValue()!" [value]="value()"></wc-label-value>
 } @else {
-  @if (isBoolLike()) {
-    <wc-boolean-value [boolValue]="boolValue()!"></wc-boolean-value>
-  } @else if (isUrlValue()) {
-    <wc-link-value [urlValue]="stringValue()!"></wc-link-value>
-  } @else if (isLabelValue()) {
-    <wc-label-value [labelDisplay]="labelDisplayValue()!" [value]="value()"></wc-label-value>
-  } @else {
-    {{ value() }}
-  }
+  {{ value() }}
 }
 
 @if (withCopyButton()) {

projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.spec.ts

@@ -2,8 +2,10 @@ import { ValueCellComponent } from './value-cell.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LuigiClient } from '@luigi-project/client/luigi-element';
-import { FieldDefinition, Resource } from '@platform-mesh/portal-ui-lib/models/models';
-
+import {
+  FieldDefinition,
+  Resource,
+} from '@platform-mesh/portal-ui-lib/models/models';
 
 describe('ValueCellComponent', () => {
   let component: ValueCellComponent;
@@ -164,7 +166,9 @@ describe('ValueCellComponent', () => {
   describe('labelDisplay functionality', () => {
     it('should render label-value component when labelDisplay is an object', () => {
       const labelDisplay = { backgroundColor: '#ffffff', color: '#000000' };
-      const { fixture } = makeComponent('test-value', { labelDisplay });
+      const { fixture } = makeComponent('test-value', {
+        uiSettings: { labelDisplay },
+      });
       const compiled = fixture.nativeElement;
 
       expect(compiled.querySelector('wc-label-value')).toBeTruthy();
@@ -173,7 +177,9 @@ describe('ValueCellComponent', () => {
     });
 
     it('should render label-value component when labelDisplay is true', () => {
-      const { fixture } = makeComponent('test-value', { labelDisplay: true });
+      const { fixture } = makeComponent('test-value', {
+        uiSettings: { labelDisplay: true },
+      });
       const compiled = fixture.nativeElement;
 
       expect(compiled.querySelector('wc-label-value')).toBeTruthy();
@@ -182,7 +188,9 @@ describe('ValueCellComponent', () => {
     });
 
     it('should not render label-value component when labelDisplay is false', () => {
-      const { fixture } = makeComponent('test-value', { labelDisplay: false });
+      const { fixture } = makeComponent('test-value', {
+        uiSettings: { labelDisplay: false },
+      });
       const compiled = fixture.nativeElement;
 
       expect(compiled.querySelector('wc-label-value')).toBeFalsy();
@@ -192,7 +200,7 @@ describe('ValueCellComponent', () => {
 
     it('should not render label-value component when labelDisplay is undefined', () => {
       const { fixture } = makeComponent('test-value', {
-        labelDisplay: undefined,
+        uiSettings: { labelDisplay: undefined },
       });
       const compiled = fixture.nativeElement;
 
@@ -203,7 +211,7 @@ describe('ValueCellComponent', () => {
 
     it('should not render label-value component when labelDisplay is null', () => {
       const { fixture } = makeComponent('test-value', {
-        labelDisplay: null as any,
+        uiSettings: { labelDisplay: null as any },
       });
       const compiled = fixture.nativeElement;
 
@@ -214,7 +222,7 @@ describe('ValueCellComponent', () => {
 
     it('should render label-value component when labelDisplay is a string', () => {
       const { fixture } = makeComponent('test-value', {
-        labelDisplay: 'some-string' as any,
+        uiSettings: { labelDisplay: 'some-string' as any },
       });
       const compiled = fixture.nativeElement;
 
@@ -225,7 +233,7 @@ describe('ValueCellComponent', () => {
 
     it('should render label-value component when labelDisplay is a number', () => {
       const { fixture } = makeComponent('test-value', {
-        labelDisplay: 42 as any,
+        uiSettings: { labelDisplay: 42 as any },
       });
       const compiled = fixture.nativeElement;
 
@@ -235,39 +243,41 @@ describe('ValueCellComponent', () => {
     });
   });
 
-  describe('displayAsSecret functionality', () => {
-    it('should render secret-value component when displayAsSecret is true', () => {
+  describe('displayAs secret functionality', () => {
+    it('should render secret-value component when displayAs is secret', () => {
       const { fixture } = makeComponent('secret-password', {
-        displayAsSecret: true,
+        uiSettings: { displayAs: 'secret' },
       });
       const compiled = fixture.nativeElement;
 
       expect(compiled.querySelector('wc-secret-value')).toBeTruthy();
-      expect(component.displayAsSecret()).toBe(true);
+      expect(component.displayAs()).toBe('secret');
     });
 
-    it('should not render secret-value component when displayAsSecret is false', () => {
+    it('should not render secret-value component when displayAs is not secret', () => {
       const { fixture } = makeComponent('plain-text', {
-        displayAsSecret: false,
+        uiSettings: { displayAs: 'plainText' },
       });
       const compiled = fixture.nativeElement;
 
       expect(compiled.querySelector('wc-secret-value')).toBeFalsy();
-      expect(component.displayAsSecret()).toBe(false);
+      expect(component.displayAs()).toBe('plainText');
     });
 
-    it('should not render secret-value component when displayAsSecret is undefined', () => {
+    it('should not render secret-value component when displayAs is undefined', () => {
       const { fixture } = makeComponent('plain-text');
       const compiled = fixture.nativeElement;
 
       expect(compiled.querySelector('wc-secret-value')).toBeFalsy();
-      expect(component.displayAsSecret()).toBeUndefined();
+      expect(component.displayAs()).toBeUndefined();
     });
   });
 
   describe('withCopyButton functionality', () => {
     it('should render copy button when withCopyButton is true', () => {
-      const { fixture } = makeComponent('test-value', { withCopyButton: true });
+      const { fixture } = makeComponent('test-value', {
+        uiSettings: { withCopyButton: true },
+      });
       const compiled = fixture.nativeElement;
 
       expect(compiled.querySelector('ui5-icon[name="copy"]')).toBeTruthy();
@@ -276,7 +286,7 @@ describe('ValueCellComponent', () => {
 
     it('should not render copy button when withCopyButton is false', () => {
       const { fixture } = makeComponent('test-value', {
-        withCopyButton: false,
+        uiSettings: { withCopyButton: false },
       });
       const compiled = fixture.nativeElement;
 
@@ -300,7 +310,7 @@ describe('ValueCellComponent', () => {
       const customLuigiClient = createMockLuigiClient(showAlertSpy);
       const { fixture } = makeComponent(
         'test-value',
-        { withCopyButton: true },
+        { uiSettings: { withCopyButton: true } },
         customLuigiClient,
       );
 
@@ -320,7 +330,9 @@ describe('ValueCellComponent', () => {
     });
 
     it('should stop event propagation when copy button is clicked', () => {
-      const { fixture } = makeComponent('test-value', { withCopyButton: true });
+      const { fixture } = makeComponent('test-value', {
+        uiSettings: { withCopyButton: true },
+      });
       const compiled = fixture.nativeElement;
       const copyButton = compiled.querySelector('ui5-icon[name="copy"]');
 
@@ -334,10 +346,10 @@ describe('ValueCellComponent', () => {
     });
   });
 
-  describe('displayAsPlainText functionality', () => {
-    it('should render plain text when displayAsPlainText is true', () => {
+  describe('displayAs plainText functionality', () => {
+    it('should render plain text when displayAs is plainText', () => {
       const { fixture } = makeComponent('test-value', {
-        displayAsPlainText: true,
+        uiSettings: { displayAs: 'plainText' },
       });
       const compiled = fixture.nativeElement;
 
@@ -348,9 +360,9 @@ describe('ValueCellComponent', () => {
       expect(compiled.textContent.trim()).toContain('test-value');
     });
 
-    it('should not render plain text when displayAsPlainText is false', () => {
+    it('should not render plain text when displayAs is not plainText', () => {
       const { fixture } = makeComponent('https://example.com', {
-        displayAsPlainText: false,
+        uiSettings: {},
       });
       const compiled = fixture.nativeElement;
 
@@ -650,7 +662,7 @@ describe('ValueCellComponent', () => {
 
     it('should prioritize boolean over label when both are valid', () => {
       const { fixture } = makeComponent('true', {
-        labelDisplay: { backgroundColor: '#ffffff' },
+        uiSettings: { labelDisplay: { backgroundColor: '#ffffff' } },
       });
       const compiled = fixture.nativeElement;
 
@@ -661,7 +673,7 @@ describe('ValueCellComponent', () => {
 
     it('should prioritize URL over label when both are valid', () => {
       const { fixture } = makeComponent('https://example.com', {
-        labelDisplay: { backgroundColor: '#ffffff' },
+        uiSettings: { labelDisplay: { backgroundColor: '#ffffff' } },
       });
       const compiled = fixture.nativeElement;
 
@@ -672,7 +684,7 @@ describe('ValueCellComponent', () => {
 
     it('should render label when boolean and URL are not valid but labelDisplay is provided', () => {
       const { fixture } = makeComponent('some-text', {
-        labelDisplay: { backgroundColor: '#ffffff' },
+        uiSettings: { labelDisplay: { backgroundColor: '#ffffff' } },
       });
       const compiled = fixture.nativeElement;
 
@@ -682,7 +694,9 @@ describe('ValueCellComponent', () => {
     });
 
     it('should render plain text when no special rendering is needed', () => {
-      const { fixture } = makeComponent('some-text', { labelDisplay: false });
+      const { fixture } = makeComponent('some-text', {
+        uiSettings: { labelDisplay: false },
+      });
       const compiled = fixture.nativeElement;
 
       expect(compiled.querySelector('wc-boolean-value')).toBeFalsy();
@@ -691,4 +705,4 @@ describe('ValueCellComponent', () => {
       expect(compiled.textContent.trim()).toBe('some-text');
     });
   });
-});
+});

projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.ts

@@ -40,12 +40,9 @@ export class ValueCellComponent {
   value = computed(() =>
     getResourceValueByJsonPath(this.resource(), this.fieldDefinition()),
   );
-  labelDisplay = computed(() => this.fieldDefinition().labelDisplay);
-  displayAsSecret = computed(() => this.fieldDefinition().displayAsSecret);
-  withCopyButton = computed(() => this.fieldDefinition().withCopyButton);
-  displayAsPlainText = computed(
-    () => this.fieldDefinition().displayAsPlainText,
-  );
+  uiSettings = computed(() => this.fieldDefinition().uiSettings);
+  displayAs = computed(() => this.uiSettings()?.displayAs);
+  withCopyButton = computed(() => this.uiSettings()?.withCopyButton);
 
   isLabelValue = computed(() => this.labelDisplayValue() !== undefined);
   isBoolLike = computed(() => this.boolValue() !== undefined);
@@ -54,7 +51,7 @@ export class ValueCellComponent {
   boolValue = computed(() => this.normalizeBoolean(this.value()));
   stringValue = computed(() => this.normalizeString(this.value()));
   labelDisplayValue = computed(() =>
-    this.normalizeLabelDisplay(this.labelDisplay()),
+    this.normalizeLabelDisplay(this.uiSettings()?.labelDisplay),
   );
 
   private normalizeBoolean(value: unknown): boolean | undefined {