Changes for renderer API integration into IDE (#1215)

-Implemented optional save button, enabled by a query parameter and controlled by the dirty state
-Added listeners for cross-iframe messages
-Added notification to parent app when ZAP has finished loading

src-electron/ide-integration/studio-rest-api.js

@@ -103,7 +103,7 @@ async function isComponentTogglingDisabled(db, sessionId) {
  * @returns URL for rest api.
  */
 function restApiUrl(api, path, queryParams = {}) {
-  let base = localhost + studioHttpPort + api + path
+  let base = localhost + studioHttpPort + api + encodeURIComponent(path)
   let params = Object.entries(queryParams)
   if (params.length) {
     let queries = new URLSearchParams()

src/App.vue

@@ -34,16 +34,30 @@ limitations under the License.
 import { defineComponent } from 'vue'
 import { QSpinnerGears } from 'quasar'
 import ZclTour from './tutorials/ZclTour.vue'
-
-// import VueTour from './tutorials/VueTour.vue'
-
 import CommonMixin from './util/common-mixin'
+
 const rendApi = require(`../src-shared/rend-api.js`)
 const restApi = require(`../src-shared/rest-api.js`)
 const observable = require('./util/observable.js')
 const dbEnum = require(`../src-shared/db-enum.js`)
 const storage = require('./util/storage.js')
 
+window.addEventListener('message', (event) => {
+    const eventData = event?.data?.eventData
+    switch (event?.data?.eventId) {
+      case 'theme':
+        window[rendApi.GLOBAL_SYMBOL_EXECUTE](rendApi.id.setDarkTheme, eventData.theme === 'dark')
+        break
+      case 'save':
+        if (eventData.shouldSave) {
+          window[rendApi.GLOBAL_SYMBOL_EXECUTE](rendApi.id.save)
+        }
+        break
+    }
+  }, 
+  false
+)
+
 async function initLoad(store) {
   let promises = []
   promises.push(store.dispatch('zap/loadInitialData'))
@@ -180,6 +194,16 @@ export default defineComponent({
         this.$store.dispatch('zap/setStandalone', query['standalone'])
       }
 
+      if (`setSaveButtonVisible` in query) {
+        this.$store.dispatch(
+          'zap/setSaveButtonVisible',
+          query[`setSaveButtonVisible`] === 'true'
+        )
+      } else {
+        // If we don't specify it, default is off.
+        this.$store.dispatch('zap/setSaveButtonVisible', false)
+      }
+
       this.zclDialogTitle = 'ZCL tab!'
       this.zclDialogText =
         'Welcome to ZCL tab. This is just a test of a dialog.'
@@ -206,6 +230,13 @@ export default defineComponent({
           this.$store.dispatch('zap/updateSelectedUcComponentState', resp)
         }
       )
+
+      this.$onWebSocket(
+        dbEnum.wsCategory.dirtyFlag,
+        (resp) => {
+          this.$store.dispatch('zap/setDirtyState', resp)
+        }
+      )
     },
     addClassToBody() {
       if (this.uiThemeCategory === 'zigbee') {
@@ -233,6 +264,13 @@ export default defineComponent({
   },
   mounted() {
     this.addClassToBody()
+    window?.parent?.postMessage({
+        eventId: 'mounted',
+        eventData: {
+          hasMounted: true
+        }
+      },
+      '*')
   },
   unmounted() {
     if (this.uiThemeCategory === 'zigbee') {

src/components/ZCLToolbar.vue

@@ -38,6 +38,20 @@
         <div>Generate</div>
       </div>
     </q-btn>
+    <q-btn
+      id="save"
+      color="grey"
+      flat
+      no-caps
+      class="cursor-pointer"
+      @click="saveChanges"
+      v-if="this.$store.state.zap.saveButtonVisible && this.$store.state.zap.isDirty"
+    >
+      <div class="text-center">
+        <q-icon name="o_save" />
+        <div>Save</div>
+      </div>
+    </q-btn>
     <q-btn
       v-if="isCoreDocumentationAvailable"
       id="documentation"
@@ -250,6 +264,11 @@ export default {
         )
       }
     },
+    saveChanges() {
+      window[rendApi.GLOBAL_SYMBOL_EXECUTE] (
+        rendApi.id.save
+      )
+    },
     // This function will start vue tour steps
     startTour,
     togglePreviewTab() {

src/store/zap/actions.js

@@ -752,6 +752,10 @@ export function setDebugNavBar(context, debugNavBar) {
   context.commit('setDebugNavBar', debugNavBar)
 }
 
+export function setSaveButtonVisible(context, saveButtonVisible) {
+  context.commit('setSaveButtonVisible', saveButtonVisible)
+}
+
 export function setStandalone(context, standalone) {
   context.commit('setStandalone', standalone)
 }
@@ -818,6 +822,10 @@ export function updateSelectedUcComponentState(context, projectInfo) {
   })
 }
 
+export function setDirtyState(context, isDirty) {
+  context.commit('setDirtyState', isDirty)
+}
+
 export function loadZclClusterToUcComponentDependencyMap(context) {
   axiosRequests
     .$serverGet(`/zclExtension/cluster/component`)

src/store/zap/mutations.js

@@ -452,6 +452,10 @@ export function setDebugNavBar(state, debugNavBar) {
   state.debugNavBar = debugNavBar
 }
 
+export function setSaveButtonVisible(state, saveButtonVisible) {
+  state.saveButtonVisible = saveButtonVisible
+}
+
 export function setStandalone(state, standalone) {
   state.standalone = standalone
 }
@@ -627,3 +631,10 @@ export function updateIsClusterOptionChanged(state, value) {
 export function updateNotificationCount(state, value) {
   state.notificationCount = value
 }
+
+export function setDirtyState(state, isDirty) {
+  if (state.isDirty != isDirty) {
+    state.isDirty = isDirty;
+    window.parent?.postMessage({eventId: 'dirty', eventData: { isDirty: isDirty }}, '*')
+  }
+} 
\ No newline at end of file

src/store/zap/state.js

@@ -45,6 +45,8 @@ export default function () {
     selectedGenericOptions: {},
     projectPackages: [],
     allPackages: [],
+    isDirty: false,
+    saveButtonVisible: false,
     clusterManager: {
       openDomains: {},
       lastSelectedDomain: null,