113 parameterized operation widget changes (#39)

* 113 parameterized operation widget changes

* update package lock file

* update package lock file

* Updated 1021.6 to 1021.22.x

* npm ci error fix

* added cypress config file for operations

* renaming cypress config file

* config file changes

* added test config in angular json

* added karma config file

* added test file

* added service spec file

* Added lazy loading and standalone. Added monaco editor. Added placeholder support. Added layout fixes.

* Added spacing

* widget select image changes

* Testing bugfix

* Replaced outdated *ng statements with new syntax

* Improved debounce handling for code editor. Fixed issues.

* operation body reset with empty object bug fix

---------

Co-authored-by: Hendrik Näther <hendrik.naether@cumulocity.com>

Author: vib-c8y

angular.json

@@ -675,6 +675,15 @@
             }
           },
           "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "packages/operations-widget/src/test.ts",
+            "polyfills": "packages/operations-widget/src/polyfills.ts",
+            "tsConfig": "packages/operations-widget/tsconfig.app.json",
+            "karmaConfig": "packages/operations-widget/karma.conf.js"
+          }
         }
       }
     }

libs/helpers/domain-model-type.helper.ts

@@ -0,0 +1,50 @@
+import { IMeasurementValue, IOperation } from '@c8y/client';
+import { IMeasurement } from '@c8y/client';
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+export function isToCreateIOperation(obj?: unknown): obj is IOperation {
+  return typeof obj === 'object' && obj !== null && 'deviceId' in obj && !('id' in obj);
+}
+
+function isMeasurementValue(value: unknown): value is IMeasurementValue {
+  return isObject(value) && typeof value.value === 'number';
+}
+
+export function isMeasurement(value: unknown): value is IMeasurement {
+  if (!isObject(value)) return false;
+
+  // Required base fields
+  if (
+    !('id' in value) ||
+    !(typeof value.id === 'string' || typeof value.id === 'number') ||
+    typeof value.type !== 'string' ||
+    typeof value.time !== 'string' ||
+    typeof value.self !== 'string' ||
+    !isObject(value.source)
+  ) {
+    return false;
+  }
+
+  // Look for at least ONE fragment containing ONE MeasurementValue
+  for (const key of Object.keys(value)) {
+    // skip known base properties
+    if (['id', 'type', 'time', 'self', 'source'].includes(key)) {
+      continue;
+    }
+
+    const fragment = value[key];
+
+    if (!isObject(fragment)) continue;
+
+    for (const series of Object.values(fragment)) {
+      if (isMeasurementValue(series)) {
+        return true; // ✅ found at least one valid fragment+series
+      }
+    }
+  }
+
+  return false;
+}

libs/helpers/extract-placeholders.spec.ts

@@ -0,0 +1,42 @@
+import { extractPlaceholdersFromObject } from './extract-placeholders';
+
+describe('extractPlaceholdersFromObject', () => {
+  it('extracts templates with paths from nested objects and arrays in encounter order', () => {
+    const obj = {
+      deviceId: '123',
+      op: { example: '{{test}}', nested: 'value-{{a}}-{{b}}' },
+      arr: ['no-template', '{{arr1}}', { deep: '{{deep_val}} and {{arr1}}' }],
+    };
+
+    const result = extractPlaceholdersFromObject(obj as unknown);
+
+    expect(result).toEqual([
+      { key: 'test', path: 'op.example' },
+      { key: 'a', path: 'op.nested' },
+      { key: 'b', path: 'op.nested' },
+      { key: 'arr1', path: 'arr[1]' },
+      { key: 'deep_val', path: 'arr[2].deep' },
+    ]);
+  });
+
+  it('returns empty array when no templates are present', () => {
+    expect(extractPlaceholdersFromObject({ a: 'x', b: [1, 2], c: { d: null } })).toEqual([]);
+  });
+
+  it('handles multiple occurrences and trims whitespace', () => {
+    const obj = { s: 'prefix {{  spaced  }} suffix {{spaced}} {{other}}' };
+
+    const result = extractPlaceholdersFromObject(obj);
+
+    expect(result).toEqual([
+      { key: 'spaced', path: 's' },
+      { key: 'other', path: 's' },
+    ]);
+  });
+
+  it('handles non-string primitives safely', () => {
+    const obj = { n: 42, bool: true, nested: { s: '{{x}}' } };
+
+    expect(extractPlaceholdersFromObject(obj)).toEqual([{ key: 'x', path: 'nested.s' }]);
+  });
+});

libs/helpers/extract-placeholders.ts

@@ -0,0 +1,56 @@
+import { set } from "lodash";
+
+/**
+ * Recursively walks an object/array and extracts unique template placeholders
+ * of the form `{{ ... }}` along with the path where they were found.
+ * Returns placeholders in encounter order.
+ */
+export function extractPlaceholdersFromObject(obj: unknown): { key: string; path: string }[] {
+  const results: { key: string; path: string }[] = [];
+  const seen = new Set<string>();
+
+  const regex = /{{\s*([^{}\n]+?)\s*}}/g;
+
+  function visit(value: unknown, path: string) {
+    if (value == null) return;
+
+    if (typeof value === 'string') {
+      let match: RegExpExecArray | null;
+
+      while ((match = regex.exec(value)) !== null) {
+        const extracted = match[1].trim();
+
+        if (!seen.has(extracted)) {
+          seen.add(extracted);
+          results.push({
+            key: extracted,
+            path,
+          });
+        }
+      }
+
+      // reset for next string
+      regex.lastIndex = 0;
+    } else if (Array.isArray(value)) {
+      value.forEach((item, index) => {
+        visit(item, `${path}[${index}]`);
+      });
+    } else if (typeof value === 'object') {
+      Object.entries(value as Record<string, unknown>).forEach(([key, val]) => {
+        visit(val, path ? `${path}.${key}` : key);
+      });
+    }
+  }
+
+  visit(obj, '');
+
+  return results;
+}
+
+export function removePlaceholders(obj: object) {
+  const tuples = extractPlaceholdersFromObject(obj);
+
+  for (const tuple of tuples) {
+    set(obj, tuple.path, undefined);
+  }
+}

package-lock.json

@@ -3,6 +3,10 @@
 The Operations Widget enables Cumulocity IoT users to send predefined or custom operations from the Cockpit application.
 Once you have selected the widget within the widget gallery you will find the widget configuration menu. There you can define multiple buttons, which make defined operations triggerable from inside the widget.
 For each added button you can configure different parameters of the operation and the style of the buttons.
+In Define fields column, user can define the key, label and field type (Text / Number / Dropdown).
+Based on the selection of field type, the corresponding options will appear in the popup when the user clicks the button in the widget.
+User can define the operation JSON object in Operation value (or) user can define the fields in the configuration menu.
+If user defines both fields, user entered values in the popup will be appended in the Operation Value fields.
 
 ![Operation Config](./public/widget.png)
 
@@ -19,6 +23,7 @@ For each added button you can configure different parameters of the operation an
 | Description        | Description of the operation, which should be triggered by the button. |
 | Operation Fragment | The operation fragment, which should be sent.                          |
 | Operation Value    | The operation JSON object.                                             |
+| Define Fields      | Define field types key and label.                                      |
 | Button             | The button type (color).                                               |
 | Icon               | The button icon.                                                       |
 

packages/operations-widget/README.md

@@ -22,7 +22,8 @@ export default {
         name: 'Operations Widget',
         module: 'OperationsWidgetModule',
         path: './src/app/operations-widget/operations-widget.module.ts',
-        description: '',
+        description:
+          'Configurable action buttons with labels, icons, and input fields to send parameterized operation to device.',
       },
     ],
   },

packages/operations-widget/cumulocity.config.ts

@@ -0,0 +1,38 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/plugin.favorites'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['Chrome'],
+    restartOnFileChange: true
+  });
+};

packages/operations-widget/karma.conf.js

@@ -1,7 +1,7 @@
 {
   "name": "cumulocity-operations-widget-plugin",
   "version": "0.1.4",
-  "description": "",
+  "description": "Configurable action buttons with labels, icons, and input fields to send parameterized operation to device.",
   "author": "@dirk-peter-c8y",
   "homepage": "___TODO___",
   "dependencies": {}