feat: implement secret filed & copy feature

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,17 +145,21 @@ 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,
+                        "labelDisplay": {
+                          "backgroundColor": "#e3f2fd",
+                          "color": "#1976d2",
+                          "fontWeight": "bold",
+                          "textTransform": "uppercase"
+                        }
                       }
                     },
                     {
                       "label": "Type",
                       "property": "spec.type",
-                      "labelDisplay": {
-                        "backgroundColor": "#e3f2fd",
-                        "color": "#1976d2",
-                        "fontWeight": "bold",
-                        "textTransform": "uppercase"
-                      }
                     },
                     {
                       "label": "Contact Info",
@@ -175,9 +190,34 @@ Below is an example content-configuration for an accounts node using the generic
                     {
                       "label": "Display Name",
                       "property": "spec.displayName",
-                      "labelDisplay": {
-                        "color": "#2e7d32",
-                        "fontWeight": "600"
+                      "uiSettings": {
+                        "labelDisplay": {
+                          "color": "#2e7d32",
+                          "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
                       }
                     },
                     {

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,8 +40,7 @@ export interface FieldDefinition {
     delimiter?: string;
     multiline?: boolean;
   };
-  labelDisplay?: LabelDisplay | boolean;
-  displayAsPlainText?: boolean;
+  uiSettings?: UiSettings;
   dynamicValuesDefinition?: {
     operation: string;
     gqlQuery: string;
@@ -96,4 +101,4 @@ export interface UIDefinition {
   detailView?: UiView;
 }
 
-export type KubernetesScope = 'Cluster' | 'Namespaced';
+export type KubernetesScope = 'Cluster' | 'Namespaced';

projects/wc/_mocks_/ui5-mock.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 
-
 @Component({ selector: 'ui5-component', template: '', standalone: true })
 export class MockComponent {}
 
@@ -31,4 +30,14 @@ jest.mock('@ui5/webcomponents-ngx', () => {
     BarComponent: MockComponent,
     LinkComponent: MockComponent,
   };
+});
+
+jest.mock('@ui5/webcomponents-icons/dist/copy.js', () => ({}), {
+  virtual: true,
+});
+jest.mock('@ui5/webcomponents-icons/dist/hide.js', () => ({}), {
+  virtual: true,
+});
+jest.mock('@ui5/webcomponents-icons/dist/show.js', () => ({}), {
+  virtual: true,
 });

projects/wc/src/app/components/generic-ui/detail-view/detail-view.component.html

@@ -49,9 +49,10 @@
                   <span [class.multiline]="viewField.group.multiline ?? true">
                     <span>{{ field.label }}: </span>
                     <value-cell
-                    [labelDisplay]="field.labelDisplay"
-                    [value]="getResourceValueByJsonPath(resource, field)"
-                    [displayAsPlainText]="!!field.displayAsPlainText" />
+                    [fieldDefinition]="field"
+                    [resource]="resource"
+                    [LuigiClient]="LuigiClient()"
+                    />
                   </span>
                   @if (!last && viewField.group.delimiter) {
                     <span>{{ viewField.group.delimiter }}</span>
@@ -62,9 +63,10 @@
               <ui5-label>{{ viewField.label }}</ui5-label>
               <p>
                 <value-cell
-                [labelDisplay]="viewField.labelDisplay"
-                [value]="getResourceValueByJsonPath(resource, viewField)"
-                [displayAsPlainText]="!!viewField.displayAsPlainText" />
+                [fieldDefinition]="viewField"
+                [resource]="resource"
+                [LuigiClient]="LuigiClient()"
+                />
               </p>
             }
           </div>

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

@@ -88,9 +88,9 @@
                 <div>
                   <span>{{ field.label }}: </span>
                   <value-cell
-                    [labelDisplay]="field.labelDisplay"
-                    [displayAsPlainText]="!!field.displayAsPlainText"
-                    [value]="getResourceValueByJsonPath(item, field)"
+                    [fieldDefinition]="field"
+                    [resource]="item"
+                    [LuigiClient]="LuigiClient()"
                   />
                 </div>
                 @if (!last && column.group.delimiter) {
@@ -101,9 +101,9 @@
           } @else {
             <ui5-table-cell>
               <value-cell
-                [labelDisplay]="column.labelDisplay"
-                [displayAsPlainText]="!!column.displayAsPlainText"
-                [value]="getResourceValueByJsonPath(item, column)"
+                [fieldDefinition]="column"
+                [resource]="item"
+                [LuigiClient]="LuigiClient()"
               />
             </ui5-table-cell>
           }

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

@@ -0,0 +1,9 @@
+<span class="secret-value">
+  <span class="value-text">
+    @if (isVisible()) {
+      <span class="original">{{ value() }}</span>
+    } @else {
+      <span class="masked">{{ maskedValue() }}</span>
+    }
+  </span>
+</span>

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

@@ -0,0 +1,10 @@
+.secret-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  .masked {
+    transform: translateY(0.2em);
+    display: flex;
+  }
+}