Fix UI cluster closing issues while using text based filtering (#1274)

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

@@ -58,10 +58,17 @@ describe('Testing cluster filters', () => {
     () => {
       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/cluster-multiple-search.cy.js

@@ -60,4 +60,10 @@ describe('Add multiple clusters and search', () => {
       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/cluster-search.cy.js

@@ -41,4 +41,23 @@ describe('Testing cluster search', () => {
       cy.get('tbody').children().should('contain', data.cluster2)
     })
   })
+  it('check individual cluster closing and opening', () => {
+    cy.get('[data-test=Cluster').each(($row) => {
+      cy.wrap($row).should('have.class', 'q-expansion-item--expanded')
+    })
+    cy.dataCy('cluster-general').children().children().eq(0).click()
+    cy.dataCy('cluster-general').should(
+      'have.class',
+      'q-expansion-item--collapsed'
+    )
+    cy.dataCy('cluster-general').children().children().eq(0).click()
+    cy.dataCy('cluster-general').should(
+      'have.class',
+      'q-expansion-item--expanded'
+    )
+    cy.dataCy('cluster-btn-closeall').click()
+    cy.get('[data-test=Cluster').each(($row) => {
+      cy.wrap($row).should('have.class', 'q-expansion-item--collapsed')
+    })
+  })
 })

src/components/ZclClusterManager.vue

@@ -57,6 +57,7 @@ limitations under the License.
             dense
             @update:model-value="changeDomainFilter($event)"
             data-test="filter-input"
+            data-cy="cluster-domain-filter"
           />
         </div>
 
@@ -70,6 +71,7 @@ limitations under the License.
             @clear="changeFilterString('')"
             :model-value="filterString"
             data-test="search-clusters"
+            data-cy="cluster-text-filter"
           >
             <template v-slot:prepend>
               <q-icon name="search" />
@@ -83,7 +85,11 @@ limitations under the License.
             rounded
             @click="doActionFilter(actionOption)"
             :label="actionOption.label"
-            color="primary"
+            color="secondary"
+            :data-cy="
+              'cluster-btn-' +
+              actionOption.label.replace(/\s/g, '').toLowerCase()
+            "
           />
         </div>
       </div>
@@ -99,6 +105,7 @@ limitations under the License.
             @update:model-value="setOpenDomain(domainName, $event)"
             :model-value="getDomainOpenState(domainName)"
             data-test="Cluster"
+            :data-cy="'cluster-' + domainName.replace(/\s/g, '').toLowerCase()"
             header-class="bg-white text-primary"
           >
             <q-card>
@@ -301,7 +308,7 @@ export default {
       })
     },
     getDomainOpenState(domainName) {
-      return this.openDomains[domainName] || this.filterString != ''
+      return this.openDomains[domainName]
     },
     changeDomainFilter(filter) {
       this.$store.dispatch('zap/setDomainFilter', {

src/store/zap/mutations.js

@@ -488,15 +488,15 @@ export function setDomainFilter(state, filterEnabledClusterPair) {
   let filter = filterEnabledClusterPair.filter
   state.clusterManager.filter = filter
   state.domains.map((domainName) => {
+    const openDomainValue =
+      state.clusterManager.filterString === ''
+        ? filter.domainFilterFn(domainName, state.clusterManager.openDomains, {
+            enabledClusters: filterEnabledClusterPair.enabledClusters,
+          })
+        : true
     setOpenDomain(state, {
       domainName: domainName,
-      value: filter.domainFilterFn(
-        domainName,
-        state.clusterManager.openDomains,
-        {
-          enabledClusters: filterEnabledClusterPair.enabledClusters,
-        }
-      ),
+      value: openDomainValue,
     })
   })
 }
@@ -504,7 +504,6 @@ export function setDomainFilter(state, filterEnabledClusterPair) {
 export function doActionFilter(state, filterEnabledClusterPair) {
   let filter = filterEnabledClusterPair.filter
   // When we close all, we also clear all filters.
-  resetFilters(state)
   state.domains.map((domainName) => {
     setOpenDomain(state, {
       domainName: domainName,