Release 1.0.0

README.md

@@ -1,29 +1,44 @@
-# Cumulocity widget plugin
+# Cumulocity IoT Tenant Option Management plugin
 
-This is the Cumulocity module federation plugin. Plugins can be developed like any Cumulocity application, but can be used at runtime by other applications. Therefore, they export an Angular module which can then be imported by any other application. The exports are defined in `package.json`:
+Easily create, edit and delete tenant options. You can configure an option as encrypted and can decided between text or JSON input.
 
-```
-"exports": [
- {
- "name": "Example widget plugin",
- "module": "WidgetPluginModule",
- "path": "./widget/widget-plugin.module.ts",
- "description": "Adds custom widget"
- }
-]
-```
+## Sample images
+
+List all tenant options that were created on the tenant. You can search through, sort and filter all columns.
+![alt Tenant options grid example](/docs/overview.png)
+
+Easily create text or JSON options. You can also encrypt the content of an option.
+![alt Create tenant option example](/docs/create-option.png)
+
+JSON editor example
+![alt Update of a tenant option with JSOn value example](/docs/update-json-option.png)
+
+## Limitations
+
+You can only see, edit and delete options you created using the plugin.
+
+## Features to come
+
+- (Bulk) Import and export of all options/ specific categories
+- Import by Template
+o dynamically show creation forms for c8y specific tenant options using formly
+o will ship with example template for Analytics Builder options
+
+## Versions
+1.0.0 - WebSDK v. 1017
 
 **How to start**
-Run the command below to scaffold a `widget` plugin.
+Change the target tenant and application you want to run this plugin on in the `package.json`.
 
 ```
-c8ycli new <yourPluginName> widget-plugin
+c8ycli server -u https://{{your-tenant}}.cumulocity.com/ --shell {{administration}}
 ```
+Keep in mind that this plugin needs to have an app (e.g. cockpit) running with at least the same version as this plugin. if your tenant contains an older version, use the c8ycli to create a cockpit clone running with at least v 1017! Upload this clone to the target tenant and reference this name in the --shell command.
 
-As the app.module is a typical Cumuloctiy application, any new plugin can be tested via the CLI:
+The widget plugin can be locally tested via the start script:
 
 ```
-npm start -- --shell cockpit
+npm start
 ```
 
 In the Module Federation terminology, `widget` plugin is called `remote` and the `cokpit` is called `shell`. Modules provided by this `widget` will be loaded by the `cockpit` application at the runtime. This plugin provides a basic custom widget that can be accessed through the `Add widget` menu.

package.json

@@ -1,15 +1,21 @@
 {
  "name": "tenant-option-management-plugin",
- "version": "1017.0.357",
+ "version": "1.0.0",
  "description": "This is the Cumulocity module federation plugin. Plugins can be developed like any Cumulocity application, but can be used at runtime by other applications. Therefore, they export an Angular module which can then be imported by any other application. The exports are defined in `package.json`:",
  "scripts": {
- "start": "c8ycli server -p 9058 -u https://entelios-dev.eu-latest.cumulocity.com/ --shell administration",
+ "start": "c8ycli server",
  "build": "c8ycli build",
  "deploy": "c8ycli deploy",
  "postinstall": "ngcc"
  },
- "keywords": [],
- "author": "",
+ "keywords": [
+ "Cumulocity",
+ "Plugin",
+ "Tenant Option",
+ "Management",
+ "Administration"
+ ],
+ "author": "Hendrik Naether",
  "license": "Apache-2.0",
  "dependencies": {
  "@angular/animations": "14.0.6",
@@ -57,14 +63,15 @@
  "c8y": {
  "application": {
  "name": "tenant-option-management-plugin",
- "description": "Custom widget with module federation",
+ "description": "Adds menu entry. Users can add/update/delete tenant options.",
  "contextPath": "tenant-option-management-plugin",
  "key": "tenant-option-management-plugin-application-key",
- "globalTitle": "Custom widget with Module Federation",
+ "globalTitle": "Tenant Option Management plugin",
  "tabsHorizontal": true,
  "isPackage": true,
  "noAppSwitcher": true,
  "package": "plugin",
+ "requiredPlatformVersion": "1017.0",
  "exports": [
  {
  "name": "Tenant option plugin",
@@ -77,11 +84,17 @@
  "widget-plugin": [
  "TenantOptionManagementModule"
  ]
- }
+ },
+ "copy": [
+ {
+ "from": "docs",
+ "to": "docs"
+ }
+ ]
  },
  "cli": {}
  },
  "browserslist": [
  "last 2 major versions"
  ]
-}
+}

tenant-option-management/add-option/add-option-modal.component.ts

@@ -17,7 +17,7 @@ interface Tab {
  templateUrl: './add-option-modal.component.html',
 })
 export class AddOptionModalComponent {
- closeSubject: Subject<ITenantOption> = new Subject();
+ closeSubject: Subject<ITenantOption & { encrypted: string }> = new Subject();
 
  option = {
  key: '',

tenant-option-management/tenant-option-management.component.html

@@ -1,3 +1,5 @@
+<c8y-title> {{ 'Tenant Option Management' | translate }} </c8y-title>
+
 <c8y-action-bar-item [placement]="'right'" [priority]="500">
  <button
  title="{{ 'Add tenant option' | translate }}"

tenant-option-management/tenant-option-management.component.ts

@@ -104,7 +104,10 @@ export class TenantOptionManagementComponent {
  if (row) {
  void this.optionsManagement.updateOption(option).then(() => this.reload());
  } else {
- void this.optionsManagement.addOption(option).then(() => this.reload());
+ void this.optionsManagement.addOption(option).then((o) => {
+ this.rows.push({ id: `${o.category}-${o.key}`, ...o });
+ this.rows = [...this.rows]; // trigger binding
+ });
  }
  }
  });
@@ -127,8 +130,6 @@ export class TenantOptionManagementComponent {
  { ok: _('Delete') as string, cancel: _('Cancel') as string }
  );
  await this.optionsManagement.deleteOption(row);
- this.rows = this.rows.filter((r) => r.category !== row.category && r.key !== row.key);
- // reload the grid to remove the just deleted item
- // this.refresh.next();
+ this.rows = this.rows.filter((r) => r.category !== row.category || r.key !== row.key);
  }
 }

tenant-option-management/tenant-option-management.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { IManagedObject, ITenantOption, InventoryService, TenantOptionsService } from '@c8y/client';
 import { TenantOptionRow } from './tenant-option-management.component';
+import { cloneDeep } from 'lodash';
 
 export interface TenantOptionConfiguration extends IManagedObject {
  type: 'tenant_option_plugin_config';
@@ -30,15 +31,18 @@ export class TenantOptionManagementService {
  }
  }
 
- async addOption(option: ITenantOption) {
+ async addOption(
+ option: ITenantOption & { encrypted: string }
+ ): Promise<ITenantOption & { encrypted: string }> {
  await this.tenantOption.create(option);
- delete option.value;
 
  const config = await this.getConfiguration();
+ const toSend = cloneDeep(option);
+ delete toSend.value;
+ config.options.push(toSend);
+ await this.inventory.update({ id: config.id, options: config.options });
 
- config.options.push(option);
-
- return this.inventory.update({ id: config.id, options: config.options });
+ return option;
  }
 
  updateOption(option: ITenantOption) {
@@ -54,11 +58,15 @@ export class TenantOptionManagementService {
  }
 
  async deleteOption(row: TenantOptionRow) {
- await this.tenantOption.delete(row);
+ try {
+ await this.tenantOption.delete({ category: row.category, key: row.key });
+ } catch (e) {
+ console.warn(e);
+ }
  const config = await this.getConfiguration();
  const delta = {
  id: config.id,
- options: config.options.filter((o) => o.category !== row.category && o.key !== row.category),
+ options: config.options.filter((o) => o.category !== row.category || o.key !== row.key),
  };
  await this.inventory.update(delta);
  }