show save button in ide when dirtyflag is sent to parent (#1594)

* show save button in ide when dirtyflag is sent to parent

* remove redundant logic

* no point in having the button disapear the way the current logic works

* only show if stsApplication

* further cleanup, adding query to state so do not have redundant logic

* more cleanup

* even more cleanup

* cleanup

* remove unused code

Author: paulr34

src/App.vue

@@ -152,6 +152,9 @@ export default defineComponent({
     showExceptionIcon() {
       return this.$store.state.zap.showExceptionIcon
     },
+    query() {
+      return this.$store.state.zap.query // Access the query string from Vuex
+    },
     uiThemeCategory: {
       get() {
         if (this.$store.state.zap.isMultiConfig) {
@@ -171,12 +174,9 @@ export default defineComponent({
   },
   methods: {
     parseQueryString() {
-      let search = window.location.search
-
-      if (search[0] === '?') {
-        search = search.substring(1)
-      }
-      this.query = querystring.parse(search)
+      const searchParams = new URLSearchParams(window.location.search)
+      const query = Object.fromEntries(searchParams.entries()) // Parse query string into an object
+      this.$store.commit('zap/setQuery', query) // Store it in Vuex
     },
 
     setTheme() {
@@ -263,37 +263,28 @@ export default defineComponent({
           )
         })
       }
-
-      // Parse the query string into the front end.
-      let search = window.location.search
-
-      if (search[0] === '?') {
-        search = search.substring(1)
-      }
-
-      let query = querystring.parse(search)
-      if (query[`uiMode`]) {
-        this.$store.dispatch('zap/setDefaultUiMode', query[`uiMode`])
+      if (this.query[`uiMode`]) {
+        this.$store.dispatch('zap/setDefaultUiMode', this.query[`uiMode`])
       }
 
-      if (`debugNavBar` in query) {
+      if (`debugNavBar` in this.query) {
         this.$store.dispatch(
           'zap/setDebugNavBar',
-          query[`debugNavBar`] === 'true'
+          this.query[`debugNavBar`] === 'true'
         )
       } else {
         // If we don't specify it, default is on.
         this.$store.dispatch('zap/setDebugNavBar', true)
       }
 
-      if ('standalone' in query) {
-        this.$store.dispatch('zap/setStandalone', query['standalone'])
+      if ('standalone' in this.query) {
+        this.$store.dispatch('zap/setStandalone', this.query['standalone'])
       }
 
-      if (`setSaveButtonVisible` in query) {
+      if (`setSaveButtonVisible` in this.query) {
         this.$store.dispatch(
           'zap/setSaveButtonVisible',
-          query[`setSaveButtonVisible`] === 'true'
+          this.query[`setSaveButtonVisible`] === 'true'
         )
       } else {
         // If we don't specify it, default is off.
@@ -318,7 +309,7 @@ export default defineComponent({
 
       // load initial UC component state
       this.$store.dispatch(`zap/loadUcComponentState`)
-      if (query[`newConfig`]) {
+      if (this.query[`newConfig`]) {
         this.loadInitialEndpoints()
       }
 

src/components/ZCLToolbar.vue

@@ -61,9 +61,7 @@
       flat
       no-caps
       @click="saveChanges"
-      v-if="
-        this.$store.state.zap.saveButtonVisible && this.$store.state.zap.isDirty
-      "
+      v-if="showSaveButton"
     >
       <div class="text-center">
         <q-icon name="o_save" />
@@ -245,6 +243,12 @@ export default {
   name: 'ZCLToolbar',
   mixins: [CommonMixin],
   computed: {
+    query() {
+      return this.$store.state.zap.query // Access the query string from Vuex
+    },
+    showSaveButton() {
+      return !!this.query['stsApplicationId'] // Use optional chaining and double negation for clarity
+    },
     isCoreDocumentationAvailable() {
       return (
         this.$store.state.zap.genericOptions[

src/store/zap/actions.js

@@ -1171,15 +1171,6 @@ export function setDebugNavBar(context, debugNavBar) {
   context.commit('setDebugNavBar', debugNavBar)
 }
 
-/**
- * Show or hide the Save button in ZAP UI.
- * @param {*} context
- * @param {*} saveButtonVisible
- */
-export function setSaveButtonVisible(context, saveButtonVisible) {
-  context.commit('setSaveButtonVisible', saveButtonVisible)
-}
-
 /**
  * Set the mode of ZAP UI.
  * @param {*} context

src/store/zap/mutations.js

@@ -49,6 +49,10 @@ export const updateShowDevTools = (state) => {
   state.showDevTools = !state.showDevTools
 }
 
+export const setQuery = (state, query) => {
+  state.query = query
+}
+
 /**
  * Set the information text in the state
  * @param {*} state
@@ -785,15 +789,6 @@ export function setDebugNavBar(state, debugNavBar) {
   state.debugNavBar = debugNavBar
 }
 
-/**
- * Show save button in the UI using the state.
- * @param {*} state
- * @param {*} saveButtonVisible
- */
-export function setSaveButtonVisible(state, saveButtonVisible) {
-  state.saveButtonVisible = saveButtonVisible
-}
-
 /**
  * Set standalone mode for ZAP using the state.
  * @param {*} state

src/store/zap/state.js

@@ -52,12 +52,11 @@ export default function () {
     featureMapValue: 0,
     zclDeviceTypes: {},
     endpoints: [],
+    query: {},
     genericOptions: {},
     selectedGenericOptions: {},
     projectPackages: [],
     allPackages: [],
-    isDirty: false,
-    saveButtonVisible: false,
     clusterManager: {
       openDomains: {},
       lastSelectedDomain: null,