matter centric UI (project-chip#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
SiliconLabs · Mar 15, 2024 · 1fc5cc4 · 1fc5cc4
1 parent 6d55a45
commit 1fc5cc4
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 177 deletions.
diff --git a/cypress/e2e/clusters/cluster-filter.cy.js b/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')
-    })
-  })
 })
diff --git a/cypress/e2e/clusters/dimmable-light.cy.js b/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')
-      })
-    })
   }
 )
diff --git a/src/components/ZclAttributeManager.vue b/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 = []

diff --git a/src/components/ZclCreateModifyEndpoint.vue b/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,14 +199,15 @@ 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'
 
 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