Allow user to edit a device type on an existing endpoint as a new endpoint config and not an overwrite on existing endpoint config (#1541)

brdandu · web-flow · commit eceeced69103 · 2025-04-01T09:41:46.000-04:00
- Currently when a user edits the device type on an endpoint configuration then the configuration is overwritten on top of the existing endpoint configuration.
- However the above can lead to non-compliant device type as per the protocol specification if the users are not careful.
- With this change a dialogue pops up when the user changes the device type to either edit on top of existing endpoint config or add as a new endpoint config.
- Added cypress tests to cover the same

- Add changes to to UI by removing v-close-up and add persist so that the UI pop ups don't vanish when clicking outside the popups
- Github: ZAP#1125
diff --git a/cypress/e2e/endpoints/edit-endpoint.cy.js b/cypress/e2e/endpoints/edit-endpoint.cy.js
@@ -6,7 +6,8 @@ Cypress.on('uncaught:exception', (err, runnable) => {
 })
 
 describe('Testing Editing endpoints', () => {
-  it('create a new endpoint', () => {
+  beforeEach(() => {
+    // Set up the base URL and create an endpoint before each test
     cy.fixture('baseurl').then((data) => {
       cy.visit(data.baseurl)
     })
@@ -15,26 +16,59 @@ describe('Testing Editing endpoints', () => {
       cy.addEndpoint(data.endpoint1)
     })
   })
-  it('edit endpoint', { retries: { runMode: 2, openMode: 2 } }, () => {
-    cy.get('[data-test="edit-endpoint"]').last().click()
 
+  it('create a new endpoint', () => {
+    // Verify the endpoint was created successfully
     cy.fixture('data').then((data) => {
-      cy.get('[data-test="select-endpoint-input"]')
-        .click()
-        .type(data.endpoint2.substring(0, 5), { force: true })
-      cy.wait(500)
-      cy.get('div').contains(data.endpoint2).click({ force: true })
+      cy.get('aside').children().should('contain', data.endpoint1)
     })
-    cy.get('[data-test="endpoint-title"]').click() // it makes sure that the previous input field has been unselected
-    cy.get('button').contains('Save').click()
   })
   it(
-    'Check if edit is successfull',
+    'edit endpoint -> Overwrite',
     { retries: { runMode: 2, openMode: 2 } },
     () => {
+      cy.get('[data-test="edit-endpoint"]').last().click()
+
+      cy.fixture('data').then((data) => {
+        cy.get('[data-test="select-endpoint-input"]')
+          .click()
+          .type(data.endpoint2.substring(0, 5), { force: true })
+        cy.wait(500)
+        cy.get('div').contains(data.endpoint2).click({ force: true })
+      })
+      cy.get('[data-test="endpoint-title"]').click() // it makes sure that the previous input field has been unselected
+      cy.get('button').contains('Save').click()
+      cy.wait(500)
+      // Test overwrite option
+      cy.get('button').contains('Overwrite').click()
+      // Verify the endpoint was updated successfully
       cy.fixture('data').then((data) => {
         cy.get('aside').children().should('contain', data.endpoint2)
       })
     }
   )
+  it(
+    'edit endpoint -> delete and add',
+    { retries: { runMode: 2, openMode: 2 } },
+    () => {
+      cy.get('[data-test="edit-endpoint"]').last().click()
+
+      cy.fixture('data').then((data) => {
+        cy.get('[data-test="select-endpoint-input"]')
+          .click()
+          .type(data.endpoint3.substring(0, 5), { force: true })
+        cy.wait(500)
+        cy.get('div').contains(data.endpoint3).click({ force: true })
+      })
+      cy.get('[data-test="endpoint-title"]').click() // it makes sure that the previous input field has been unselected
+      cy.get('button').contains('Save').click()
+      cy.wait(500)
+      // Test delete and add option
+      cy.get('button').contains('Delete and Add').click()
+      // Verify the endpoint was updated successfully
+      cy.fixture('data').then((data) => {
+        cy.get('aside').children().should('contain', data.endpoint3)
+      })
+    }
+  )
 })
diff --git a/src/components/ZclCreateModifyEndpoint.vue b/src/components/ZclCreateModifyEndpoint.vue
@@ -262,6 +262,43 @@ limitations under the License.
         />
       </q-card-actions>
     </q-card>
+
+    <!-- Device Type Change Dialog -->
+    <q-dialog v-model="showDeviceTypeChangeDialog" persistent>
+      <q-card>
+        <q-card-section>
+          <div class="text-h6">Device Type Changed</div>
+          <p>
+            The device type configuration for this endpoint has changed. Would
+            you like to apply the changes on top of the existing configuration,
+            which may result in a noncompliant device type (Overwrite), or
+            delete the existing endpoint and create a new one?
+          </p>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            flat
+            label="Cancel"
+            color="primary"
+            @click="cancelDeviceTypeChange"
+          />
+          <q-btn
+            flat
+            label="Overwrite"
+            color="primary"
+            @click="overwriteDeviceType"
+            data-test="overwrite"
+          />
+          <q-btn
+            flat
+            label="Delete and Add"
+            color="primary"
+            @click="deleteAndAddDeviceType"
+            data-test="delete-and-add"
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </div>
 </template>
 
@@ -341,7 +378,8 @@ export default {
       deviceTypeTmp: [], // Temp store for the selected device types
       primaryDeviceTypeTmp: null, // Temp store for the selected primary device type
       endpointIds: [],
-      tmpSelectedOptions: []
+      tmpSelectedOptions: [],
+      showDeviceTypeChangeDialog: false // Controls the visibility of the dialog
     }
   },
   computed: {
@@ -588,15 +626,58 @@ export default {
           !this.$refs.version?.includes((v) => !(v >= 0))) &&
         profile
       ) {
-        this.$emit('saveOrCreateValidated')
         if (this.endpointReference) {
-          this.editEpt(this.shownEndpoint, this.endpointReference)
-          this.$emit('updateData')
+          // Check if the device type has changed
+          const currentDeviceType = this.deviceTypeTmp.map(
+            (dt) => dt.deviceTypeRef
+          )
+          const previousDeviceType =
+            this.endpointDeviceTypeRef[
+              this.endpointType[this.endpointReference]
+            ]
+
+          if (currentDeviceType.toString() !== previousDeviceType.toString()) {
+            // Show the dialog
+            this.showDeviceTypeChangeDialog = true
+          } else {
+            // No change in device type, proceed with editing
+            this.editEpt(this.shownEndpoint, this.endpointReference)
+            this.$emit('updateData')
+            this.$emit('saveOrCreateValidated')
+          }
         } else {
+          // Create new endpoint
           this.newEpt()
         }
       }
     },
+    cancelDeviceTypeChange() {
+      this.showDeviceTypeChangeDialog = false
+    },
+    overwriteDeviceType() {
+      this.showDeviceTypeChangeDialog = false
+      this.editEpt(this.shownEndpoint, this.endpointReference)
+      this.$emit('updateData')
+      this.$emit('saveOrCreateValidated') // Toggle the edit endpoint UI
+    },
+    deleteAndAddDeviceType() {
+      this.showDeviceTypeChangeDialog = false
+      this.deleteEpt(this.endpointReference)
+      this.newEpt()
+    },
+    deleteEpt(endpointReference) {
+      // Logic to delete the existing endpoint
+      this.$store
+        .dispatch('zap/deleteEndpoint', endpointReference)
+        .then(() => {
+          console.log(`Endpoint ${endpointReference} deleted successfully.`)
+        })
+        .catch((err) => {
+          console.error(
+            `Error deleting endpoint ${endpointReference}: ${err.message}`
+          )
+        })
+    },
     reqValue(value) {
       return !_.isEmpty(value) || '* Required'
     },
diff --git a/src/components/ZclEndpointCard.vue b/src/components/ZclEndpointCard.vue
@@ -45,7 +45,6 @@ limitations under the License.
             dense
             icon="o_edit"
             size="sm"
-            v-close-popup
             @click="modifyEndpointDialog = !modifyEndpointDialog"
             data-test="edit-endpoint"
           >
@@ -202,6 +201,7 @@ limitations under the License.
     <q-dialog
       v-model="modifyEndpointDialog"
       class="background-color:transparent"
+      persistent
     >
       <zcl-create-modify-endpoint
         v-bind:endpointReference="endpointReference"
