Properly implement SDK-extensions UI features

[tecimovic]

We have added a lot of new XML elements. We need UI for them. This issue is a placeholder for all that.

[tecimovic]

This is a bit of a larger item....

The problem is the following:
currently all the UI for attributes/clusters/commands, etc is mostly hardcoded. The columns are fixed.

We have a feature called SDK extensions, where SDK can add their own data points to the individual fields.
So for example:
SDK can say: we are adding a column called "Color" to each attribute. Default value is "Blue", but users can type their own.

This will then result in ZAP showing a new column for the attribute, based on this data point (which is stored in the DB.)

We have the mechanism to load these into the database, we also have the queries, I think there is also REST API calls for that (and if not, they are easy to add).

But the UI doesn't do this now.

[tecimovic]

See this part of the "SDK customization" doc: https://github.com/project-chip/zap/blob/master/docs/sdk-integration.md#template-key-zcl

This lists the custom "zcl" keys in the gen-templates.json file, which contribute additional data tokens to the entities.
At the bottom, it lists "configurability".
Configurability has 3 options:

• "hidden": the UI does not need to show or know of this option. It is a hidden pass-through to the generation.
• "visible": the UI should SHOW the column for this option, but NOT allow editing by the user.
• "editable": the UI should SHOW the column AND allow the user to edit it. It should also save into the zap file.

In terms what APIs already exist:

• helper-sdkextension.js has the template helpers. They work and there are jest unit tests for them.
• query-package.js contains the queries. See functions that have "PackageExtension" in their names.
• I do not think we have REST layers for this. Looking around the rest/ directory, I see nothing. We will have to add this.

There are unit tests for this see gen-zigbee.test.js which has this:

 let sdkExtension = genResult.content['sdk-extension.out']
    expect(sdkExtension).toContain(
      "// cluster: 0x0000 Basic, text extension: 'Extension to basic cluster'"
    )
    expect(sdkExtension).toContain(
      "// cluster: 0x0002 Device Temperature Configuration, text extension: 'Extension to temperature config cluster'"
    )
    expect(sdkExtension).toContain(
      "// server cluster: 0x0001 Power Configuration, text extension: 'Extension to power cluster'"
    )
.
.
.

This tests that the extensions are properly triggered and generated.

[tecimovic]

For a good example of how these "extensions" are added to the system, see:
test/gen-template/zigbee/gen-templates.json

It has the "zcl" key which defines the extensions:

  "zcl": {
    "cluster": {
      "testClusterExtension": {
        "type": "text",
        "configurability": "hidden",
        "globalDefault": null,
        "label": "Test cluster extension",
        "defaults": [
          {
            "clusterCode": "0x0000",
            "value": "Extension to basic cluster"
          },
          {
            "clusterCode": "0x0001",
            "role": "server",
            "value": "Extension to power cluster"
          },
          {
            "clusterCode": "0x0002",
            "value": "Extension to temperature config cluster"
          }
        ]
      },
.
.
.

This one, for example is "hidden", so it should not show in the UI.

If you change this "configurability" to "visible", it should show in the UI for each cluster.

This file actually drives the unit tests, so feel free to add more extensions in here with different configurability.

I also expect, once you show them in the ui, we might need more data around it, such as "uiType: number" or maybe "uiType: checkbox" and so on. If you run into this, let me know and we can add more metadata around these extensions.

[tecimovic]

@Mehradml : here is my belief of what kind of APIs we have...

1.) query-package.js has these queries:

exports.insertPackageExtension = insertPackageExtension
exports.selectPackageExtension = selectPackageExtension
exports.selectPackageExtensionByPropertyAndEntity =  selectPackageExtensionByPropertyAndEntity
exports.deleteSessionPackage = deleteSessionPackage
exports.selectAllUiOptions = selectAllUiOptions

I think as far as queries go, these are all that are needed.

2.) There is a REST API in static-zcl.js:

/**
 * API: /zclExtension/:entity/:extension
 *
 * @param {*} db
 * @returns zcl extension handler
 */
function httpGetZclExtension(db) {
...

I think this is the only one. It can be used to query extensions. Should return some JSON stuff.