Feature/modify cluster configuration (#1366)

* feat: set tab's visibility in cluster configuration * fix: remove unnecessary line * fix: modify old ZclClusterView test function in ui.test.js * fix: modify the condition in computed
project-chip · Jul 26, 2024 · 50afd74 · 50afd74
1 parent 034bd26
commit 50afd74
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 72 deletions.
diff --git a/src/components/ZclClusterView.vue b/src/components/ZclClusterView.vue
@@ -14,15 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <div class="popup-wrap row">
+  <div class="popup-wrap row" id="ZclClusterView">
     <q-card flat class="col column q-pa-lg">
       <div>
         <div class="row no-wrap">
           <div class="col">
             <div class="text-h4">
               {{ selectedCluster.label }}
             </div>
-
             <q-breadcrumbs active-color="grey">
               <!-- this needs to be updated depending on how the pages will work -->
               <q-breadcrumbs-el>
@@ -88,9 +87,10 @@ limitations under the License.
             name="reporting"
             label="Attribute Reporting"
             class="v-step-11"
+            v-show="enableAttributeReportingTab"
           />
           <q-tab name="commands" label="Commands" class="v-step-12" />
-          <q-tab name="events" label="Events" v-show="events.length > 0" />
+          <q-tab name="events" label="Events" v-show="enableEventsTab" />
         </q-tabs>
         <div
           class="col column linear-border-wrap"
@@ -120,11 +120,13 @@ import ZclAttributeReportingManager from './ZclAttributeReportingManager.vue'
 import ZclCommandManager from './ZclCommandManager.vue'
 import ZclEventManager from './ZclEventManager.vue'
 import EditableAttributesMixin from '../util/editable-attributes-mixin'
+import CommonMixin from '../util/common-mixin'
+
 import * as dbEnum from '../../src-shared/db-enum.js'
 
 export default {
   name: 'ZclClusterView',
-  mixins: [EditableAttributesMixin],
+  mixins: [CommonMixin, EditableAttributesMixin],
   computed: {
     isClusterDocumentationAvailable() {
       return (
@@ -171,6 +173,25 @@ export default {
         return this.$store.state.zap.showReportTabInCluster
       },
     },
+    category: {
+      get() {
+        return this.getDeviceCategory(
+          this.zclDeviceTypes[
+            this.endpointDeviceTypeRef[this.selectedEndpointId][0]
+          ]?.packageRef
+        )
+      },
+    },
+    enableEventsTab: {
+      get() {
+        return this.category === dbEnum.helperCategory.matter
+      },
+    },
+    enableAttributeReportingTab: {
+      get() {
+        return this.category === dbEnum.helperCategory.zigbee
+      },
+    },
   },
   watch: {
     tutorialTab(val) {

diff --git a/src/components/ZclEventManager.vue b/src/components/ZclEventManager.vue
@@ -14,72 +14,79 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <div v-show="eventData.length > 0">
-    <q-table
-      class="my-sticky-header-table"
-      :rows="eventData"
-      :columns="columns"
-      row-key="<b>name</b>"
-      dense
-      virtual-scroll
-      flat
-      binary-state-sort
-      v-model:pagination="pagination"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            {{ col.label }}
-          </q-th>
-        </q-tr>
-      </template>
-      <template v-slot:body="props">
-        <q-tr :props="props" class="table_body">
-          <q-td key="included" :props="props" auto-width>
-            <q-toggle
-              class="q-mt-xs"
-              v-model="selectedEvents"
-              :val="hashEventIdClusterId(props.row.id, selectedCluster.id)"
-              indeterminate-value="false"
-              keep-color
-              @update:model-value="
-                handleEventSelection(
-                  selectedEvents,
-                  'selectedEvents',
-                  props.row,
-                  selectedCluster.id
-                )
-              "
-            />
-          </q-td>
-          <q-td key="eventId" :props="props" auto-width>{{
-            asHex(props.row.code, 2)
-          }}</q-td>
-          <q-td key="mfgId" :props="props" auto-width
-            >{{
-              selectedCluster.manufacturerCode
-                ? asHex(selectedCluster.manufacturerCode, 4)
-                : props.row.manufacturerCode
-                ? asHex(props.row.manufacturerCode, 4)
-                : '-'
-            }}
-          </q-td>
-          <q-td key="name" :props="props" auto-width>{{ props.row.name }}</q-td>
-          <q-td key="side" :props="props" auto-width>{{
-            props.row.side === 'client' ? 'Client ➞ Server' : 'Server ➞ Client'
-          }}</q-td>
-          <q-td key="priority" :props="props" auto-width>{{
-            props.row.priority
-          }}</q-td>
-          <q-td key="required" :props="props" auto-width>{{
-            props.row.isOptional ? '' : 'Yes'
-          }}</q-td>
-          <q-td key="description" :props="props" auto-width>{{
-            props.row.description
-          }}</q-td>
-        </q-tr>
-      </template>
-    </q-table>
+  <div>
+    <div v-if="eventData.length > 0">
+      <q-table
+        class="my-sticky-header-table"
+        :rows="eventData"
+        :columns="columns"
+        row-key="<b>name</b>"
+        dense
+        virtual-scroll
+        flat
+        binary-state-sort
+        v-model:pagination="pagination"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              {{ col.label }}
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="table_body">
+            <q-td key="included" :props="props" auto-width>
+              <q-toggle
+                class="q-mt-xs"
+                v-model="selectedEvents"
+                :val="hashEventIdClusterId(props.row.id, selectedCluster.id)"
+                indeterminate-value="false"
+                keep-color
+                @update:model-value="
+                  handleEventSelection(
+                    selectedEvents,
+                    'selectedEvents',
+                    props.row,
+                    selectedCluster.id
+                  )
+                "
+              />
+            </q-td>
+            <q-td key="eventId" :props="props" auto-width>{{
+              asHex(props.row.code, 2)
+            }}</q-td>
+            <q-td key="mfgId" :props="props" auto-width
+              >{{
+                selectedCluster.manufacturerCode
+                  ? asHex(selectedCluster.manufacturerCode, 4)
+                  : props.row.manufacturerCode
+                  ? asHex(props.row.manufacturerCode, 4)
+                  : '-'
+              }}
+            </q-td>
+            <q-td key="name" :props="props" auto-width>{{
+              props.row.name
+            }}</q-td>
+            <q-td key="side" :props="props" auto-width>{{
+              props.row.side === 'client'
+                ? 'Client ➞ Server'
+                : 'Server ➞ Client'
+            }}</q-td>
+            <q-td key="priority" :props="props" auto-width>{{
+              props.row.priority
+            }}</q-td>
+            <q-td key="required" :props="props" auto-width>{{
+              props.row.isOptional ? '' : 'Yes'
+            }}</q-td>
+            <q-td key="description" :props="props" auto-width>{{
+              props.row.description
+            }}</q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </div>
+    <div v-else><br />{{ noEventsMessage }}</div>
   </div>
 </template>
 
@@ -139,6 +146,7 @@ export default {
   },
   data() {
     return {
+      noEventsMessage: 'No events available for this cluster.',
       pagination: {
         rowsPerPage: 0,
       },

diff --git a/test/ui.test.js b/test/ui.test.js
@@ -92,12 +92,12 @@ describe('Component mounting test', () => {
   test(
     'ZclClusterView',
     () => {
-      const wrapper = mount(ZclClusterView, {
+      const wrapper = shallowMount(ZclClusterView, {
         global: {
           plugins: [ZapStore()],
         },
       })
-      expect(wrapper.html().includes('Endpoint')).toBe(true)
+      expect(wrapper.find('#ZclClusterView').exists()).toBe(true)
     },
     timeout.short()
   )