matter centric UI (#1278)

* matter centric UI

* only allow selection of server if Matter project

* removing cypress tests because Zigbee and Matter GUI diverged - follow up task for separating them

* centralizing data

cypress/e2e/clusters/cluster-filter.cy.js

@@ -29,46 +29,4 @@ describe('Testing cluster filters', () => {
       })
     }
   )
-  it(
-    'enable power configuration cluster',
-    { retries: { runMode: 2, openMode: 2 } },
-    () => {
-      cy.get('[data-test="filter-input"]').click({ force: true })
-      cy.get('.q-virtual-scroll__content > :nth-child(1)').click()
-      cy.fixture('data').then((data) => {
-        cy.get('tbody').children().should('contain', data.cluster2)
-      })
-      cy.get('#General').click({ force: true })
-      cy.get(
-        '#General > .q-expansion-item__container > .q-expansion-item__content > .q-card > .q-card__section > .row >  .q-table__container > .q-table__middle > .q-table > tbody > :nth-child(2) > :nth-child(6) > .q-field > .q-field__inner > .q-field__control'
-      ).click({ force: true })
-      cy.fixture('data').then((data) => {
-        cy.get('.q-virtual-scroll__content > :nth-child(3)')
-          .contains(data.server1)
-          .click()
-      })
-      cy.get(
-        '.v-step-7 > .q-field > .q-field__inner > .q-field__control'
-      ).click({ force: true })
-    }
-  )
-  it(
-    'checks if power configuration exists',
-    { retries: { runMode: 2, openMode: 2 } },
-    () => {
-      cy.get('.q-virtual-scroll__content > :nth-child(2)').click({
-        force: true,
-        multiple: true,
-      })
-      cy.fixture('data').then((data) => {
-        cy.get('tbody').children().should('contain', data.cluster2)
-      })
-    }
-  )
-  it('Close all the clusters', () => {
-    cy.dataCy('cluster-btn-closeall').click()
-    cy.get('[data-test=Cluster').each(($row) => {
-      cy.wrap($row).should('have.class', 'q-expansion-item--collapsed')
-    })
-  })
 })

cypress/e2e/clusters/dimmable-light.cy.js

@@ -25,21 +25,5 @@ describe(
           .type(data.cluster4)
       })
     })
-    it('Enabling Client & Server', () => {
-      cy.get(
-        ':nth-child(6) > .q-field > .q-field__inner > .q-field__control'
-      ).click({ force: true })
-      cy.fixture('data').then((data) => {
-        cy.get('.q-menu').contains(data.server2).click()
-      })
-    })
-    it('Check Configuration page', () => {
-      cy.get(':nth-child(7) > .q-btn > .q-btn__content > .notranslate').click({
-        force: true,
-      })
-      cy.fixture('data').then((data) => {
-        cy.get('tr.table_body').contains(data.attribute3).should('be.visible')
-      })
-    })
   }
 )

src/components/ZclAttributeManager.vue

@@ -123,8 +123,14 @@ limitations under the License.
               "
             />
           </q-td>
-          <q-td key="singleton" :props="props" auto-width>
+          <q-td
+            key="singleton"
+            v-if="enableSingleton"
+            :props="props"
+            auto-width
+          >
             <q-checkbox
+              v-if="enableSingleton"
               class="q-mt-xs"
               :model-value="selectionSingleton"
               :val="hashAttributeIdClusterId(props.row.id, selectedCluster.id)"
@@ -140,8 +146,9 @@ limitations under the License.
               "
             />
           </q-td>
-          <q-td key="bounded" :props="props" auto-width>
+          <q-td key="bounded" v-if="enableBounded" :props="props" auto-width>
             <q-checkbox
+              v-if="enableBounded"
               class="q-mt-xs"
               :model-value="selectionBounded"
               :val="hashAttributeIdClusterId(props.row.id, selectedCluster.id)"
@@ -410,97 +417,110 @@ export default {
         rowsPerPage: 0,
         sortBy: 'clientServer',
       },
-      columns: [
-        {
-          name: 'status',
-          required: false,
-          label: '',
-          align: 'left',
-          style: 'width:1%',
-        },
-        {
-          name: 'included',
-          label: 'Enabled',
-          field: 'included',
-          align: 'left',
-        },
-        {
-          name: 'attrID',
-          align: 'left',
-          label: 'Attribute ID',
-          field: 'attrID',
-          sortable: true,
-          style: 'max-width: 90px',
-          headerStyle: 'max-width: 90px',
-        },
-        {
-          name: 'attrName',
-          label: 'Attribute',
-          field: 'attrName',
-          align: 'left',
-          sortable: true,
-        },
-        {
-          name: 'required',
-          label: 'Required',
-          field: 'required',
-          align: 'left',
-          sortable: true,
-        },
-        {
-          name: 'clientServer',
-          label: 'Client/Server',
-          field: 'clientServer',
-          align: 'left',
-          sortable: true,
-        },
-        {
-          name: 'mfgID',
-          label: 'Mfg Code',
-          align: 'left',
-          field: 'mfgID',
-          sortable: true,
-        },
-        {
-          name: 'storageOption',
-          label: 'Storage Option',
-          align: 'left',
-          field: 'storageOption',
-          sortable: true,
-        },
-        {
-          name: 'singleton',
-          align: 'left',
-          label: 'Singleton',
-          field: 'singleton',
-          sortable: true,
-        },
-        {
-          name: 'bounded',
-          align: 'left',
-          label: 'Bounded',
-          field: 'bounded',
-          sortable: true,
-        },
-        {
-          name: 'type',
-          align: 'left',
-          label: 'Type',
-          field: 'type',
-          sortable: true,
-        },
-        {
-          name: 'default',
-          align: 'left',
-          label: 'Default',
-          field: 'default',
-          style: 'min-width: 180px',
-          headerStyle: 'min-width: 180px',
-        },
-      ],
+      columns: [],
       forcedExternal: [],
+      enableSingleton: false,
+      enableBounded: false,
     }
   },
+  mounted() {
+    this.columns = [
+      {
+        name: 'status',
+        required: false,
+        label: '',
+        align: 'left',
+        style: 'width:1%',
+      },
+      {
+        name: 'included',
+        label: 'Enabled',
+        field: 'included',
+        align: 'left',
+      },
+      {
+        name: 'attrID',
+        align: 'left',
+        label: 'Attribute ID',
+        field: 'attrID',
+        sortable: true,
+        style: 'max-width: 90px',
+        headerStyle: 'max-width: 90px',
+      },
+      {
+        name: 'attrName',
+        label: 'Attribute',
+        field: 'attrName',
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'required',
+        label: 'Required',
+        field: 'required',
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'clientServer',
+        label: 'Client/Server',
+        field: 'clientServer',
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'mfgID',
+        label: 'Mfg Code',
+        align: 'left',
+        field: 'mfgID',
+        sortable: true,
+      },
+      {
+        name: 'storageOption',
+        label: 'Storage Option',
+        align: 'left',
+        field: 'storageOption',
+        sortable: true,
+      },
+      ...(this.enableSingleton
+        ? [
+            {
+              name: 'singleton',
+              align: 'left',
+              label: 'Singleton',
+              field: 'singleton',
+              sortable: true,
+            },
+          ]
+        : []),
+      ...(this.enableBounded
+        ? [
+            {
+              name: 'bounded',
+              align: 'left',
+              label: 'Bounded',
+              field: 'bounded',
+              sortable: true,
+            },
+          ]
+        : []),
+      {
+        name: 'type',
+        align: 'left',
+        label: 'Type',
+        field: 'type',
+        sortable: true,
+      },
+      {
+        name: 'default',
+        align: 'left',
+        label: 'Default',
+        field: 'default',
+        style: 'min-width: 180px',
+        headerStyle: 'min-width: 180px',
+      },
+    ]
+  },
   created() {
     if (this.$serverGet != null) {
       this.forcedExternal = []

src/components/ZclCreateModifyEndpoint.vue

@@ -32,7 +32,7 @@ limitations under the License.
             min="0"
           />
           <q-input
-            v-if="$store.state.zap.isProfileIdShown"
+            v-if="enableProfileId"
             label="Profile ID"
             v-model="computedProfileId"
             ref="profile"
@@ -136,6 +136,7 @@ limitations under the License.
 
           <div class="q-gutter-md row">
             <q-input
+              v-if="enableNetworkId"
               label="Network"
               type="number"
               v-model="shownEndpoint.networkIdentifier"
@@ -198,6 +199,7 @@ limitations under the License.
 import * as RestApi from '../../src-shared/rest-api'
 import * as DbEnum from '../../src-shared/db-enum'
 import CommonMixin from '../util/common-mixin'
+import uiOptions from '../util/ui-options'
 const _ = require('lodash')
 import * as dbEnum from '../../src-shared/db-enum.js'
 
@@ -205,7 +207,7 @@ export default {
   name: 'ZclCreateModifyEndpoint',
   props: ['endpointReference'],
   emits: ['saveOrCreateValidated', 'updateData'],
-  mixins: [CommonMixin],
+  mixins: [CommonMixin, uiOptions],
   watch: {
     deviceTypeRefAndDeviceIdPair(val) {
       this.setDeviceTypeCallback(val)
@@ -254,13 +256,6 @@ export default {
     } else {
       this.shownEndpoint.endpointIdentifier = this.getSmallestUnusedEndpointId()
     }
-
-    const enableMatterFeatures =
-      this.$store.state.zap.selectedZapConfig?.zclProperties?.category ===
-      'matter'
-    this.enableMultipleDevice = enableMatterFeatures
-    this.enablePrimaryDevice = enableMatterFeatures
-    this.enableParentEndpoint = enableMatterFeatures
   },
   data() {
     return {
@@ -275,9 +270,6 @@ export default {
       saveOrCreateCloseFlag: false,
       deviceTypeTmp: [], // Temp store for the selected device types
       primaryDeviceTypeTmp: null, // Temp store for the selected primary device type
-      enableMultipleDevice: false,
-      enablePrimaryDevice: false,
-      enableParentEndpoint: false,
       endpointIds: [],
     }
   },
@@ -484,14 +476,10 @@ export default {
       }
     },
     saveOrCreateHandler() {
-      let profile = this.$store.state.zap.isProfileIdShown
-        ? this.$refs.profile.validate()
-        : true
-
+      let profile = this.enableProfileId ? this.$refs.profile.validate() : true
       if (
         this.$refs.endpoint.validate() &&
         this.$refs.device.validate() &&
-        this.$refs.network.validate() &&
         (this.$refs.version?.validate?.() ??
           !this.$refs.version?.includes((v) => !(v >= 0))) &&
         profile

src/components/ZclDomainClusterView.vue

@@ -219,6 +219,7 @@ limitations under the License.
 <script>
 import CommonMixin from '../util/common-mixin'
 import restApi from '../../src-shared/rest-api'
+import uiOptions from '../util/ui-options'
 
 let ZclClusterRoleAction = {
   Add: 'add',
@@ -230,8 +231,23 @@ let ZclClusterRole = { server: 'server', client: 'client' }
 export default {
   name: 'ZclDomainClusterView',
   props: ['domainName', 'clusters'],
-  mixins: [CommonMixin],
+  mixins: [CommonMixin, uiOptions],
   computed: {
+    clusterSelectionOptions() {
+      if (this.enableServerOnly) {
+        return [
+          { label: 'Not Enabled', client: false, server: false },
+          { label: 'Server', client: false, server: true },
+        ]
+      } else {
+        return [
+          { label: 'Not Enabled', client: false, server: false },
+          { label: 'Client', client: true, server: false },
+          { label: 'Server', client: false, server: true },
+          { label: 'Client & Server', client: true, server: true },
+        ]
+      }
+    },
     showStatus: {
       get() {
         return !this.$store.state.zap.standalone
@@ -524,12 +540,6 @@ export default {
       ZclClusterRole,
       showEnableAllClustersDialog: false,
       uc_label: 'uc label',
-      clusterSelectionOptions: [
-        { label: 'Not Enabled', client: false, server: false },
-        { label: 'Client', client: true, server: false },
-        { label: 'Server', client: false, server: true },
-        { label: 'Client & Server', client: true, server: true },
-      ],
       columns: [
         {
           name: 'status',

src/components/ZclEndpointCard.vue

@@ -265,6 +265,7 @@ limitations under the License.
 <script>
 import ZclCreateModifyEndpoint from './ZclCreateModifyEndpoint.vue'
 import CommonMixin from '../util/common-mixin'
+import uiOptions from '../util/ui-options'
 import * as Storage from '../util/storage'
 import restApi from '../../src-shared/rest-api'
 import * as Util from '../util/util'
@@ -273,7 +274,7 @@ import * as dbEnum from '../../src-shared/db-enum.js'
 export default {
   name: 'ZclEndpointCard',
   props: ['endpointReference'],
-  mixins: [CommonMixin],
+  mixins: [CommonMixin, uiOptions],
   components: { ZclCreateModifyEndpoint },
   data() {
     return {
@@ -552,10 +553,6 @@ export default {
       this.selectedReporting = []
       this.getEndpointCardData()
       //only show Matter features if Matter is selected
-      const enableMatterFeatures =
-        this.$store.state.zap.selectedZapConfig?.zclProperties?.category ===
-        'matter'
-      this.enableParentEndpoint = enableMatterFeatures
     }
   },
 }

src/util/ui-options.js

+// mixin.js
+export default {
+  data() {
+    return {
+      enableProfileId: false,
+      enableNetworkId: false,
+      enableMultipleDevice: false,
+      enablePrimaryDevice: false,
+      enableParentEndpoint: false,
+      enableServerOnly: false,
+      enableSingleton: false,
+      enableBounded: false,
+    }
+  },
+  mounted() {
+    const enableZigbeeFeatures =
+      this.$store.state.zap.selectedZapConfig?.zclProperties?.category ===
+      'zigbee'
+    this.enableProfileId = enableZigbeeFeatures
+    this.enableNetworkId = enableZigbeeFeatures
+    this.enableSingleton = enableZigbeeFeatures
+    this.enableBounded = enableZigbeeFeatures
+    const enableMatterFeatures =
+      this.$store.state.zap.selectedZapConfig?.zclProperties?.category ===
+      'matter'
+    this.enableMultipleDevice = enableMatterFeatures
+    this.enablePrimaryDevice = enableMatterFeatures
+    this.enableParentEndpoint = enableMatterFeatures
+    this.enableServerOnly = enableMatterFeatures
+  },
+}