Studio V6 Integration (#1288)

* changing session storage depending on what is given from parent iframe

* add stsApplicationId as a prefix to sessio uuid

* keeping session uuid code together

* PR review

src/App.vue

@@ -41,12 +41,18 @@ 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')
+const querystring = require('querystring')
 
-window.addEventListener('message', (event) => {
+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')
+        window[rendApi.GLOBAL_SYMBOL_EXECUTE](
+          rendApi.id.setDarkTheme,
+          eventData.theme === 'dark'
+        )
         break
       case 'save':
         if (eventData.shouldSave) {
@@ -54,7 +60,7 @@ window.addEventListener('message', (event) => {
         }
         break
     }
-  }, 
+  },
   false
 )
 
@@ -136,6 +142,45 @@ export default defineComponent({
     },
   },
   methods: {
+    parseQueryString() {
+      let search = window.location.search
+
+      if (search[0] === '?') {
+        search = search.substring(1)
+      }
+      this.query = querystring.parse(search)
+    },
+
+    setSessionUuid() {
+      if (window.sessionStorage.getItem('session_uuid') == null) {
+        window.sessionStorage.setItem('session_uuid', uuidv4())
+      }
+      if (this.query[`stsApplicationId`]) {
+        let currentSessionUuid =
+          window.sessionStorage.getItem('session_uuid') || ''
+        let updatedSessionUuid =
+          this.query[`stsApplicationId`] + currentSessionUuid
+        window.sessionStorage.setItem('session_uuid', updatedSessionUuid)
+      }
+    },
+
+    setTheme() {
+      window[rendApi.GLOBAL_SYMBOL_EXECUTE](
+        rendApi.id.setDarkTheme,
+        storage.getItem(rendApi.storageKey.isDarkThemeActive)
+      )
+    },
+
+    routePage() {
+      if (window.location.hash == '#/preferences/about') {
+        this.$router.push({ path: '/preferences/about' })
+      } else if (this.isZapConfigSelected != true) {
+        this.$router.push({ path: '/config' })
+      } else {
+        this.$router.push({ path: '/' })
+        this.getAppData()
+      }
+    },
     setGenerationInProgress(progressMessage) {
       if (progressMessage != null && progressMessage.length > 0) {
         this.$q.loading.show({
@@ -168,7 +213,6 @@ export default defineComponent({
       }
 
       // Parse the query string into the front end.
-      const querystring = require('querystring')
       let search = window.location.search
 
       if (search[0] === '?') {
@@ -231,12 +275,9 @@ export default defineComponent({
         }
       )
 
-      this.$onWebSocket(
-        dbEnum.wsCategory.dirtyFlag,
-        (resp) => {
-          this.$store.dispatch('zap/setDirtyState', resp)
-        }
-      )
+      this.$onWebSocket(dbEnum.wsCategory.dirtyFlag, (resp) => {
+        this.$store.dispatch('zap/setDirtyState', resp)
+      })
     },
     addClassToBody() {
       if (this.uiThemeCategory === 'zigbee') {
@@ -249,28 +290,22 @@ export default defineComponent({
     },
   },
   created() {
-    window[rendApi.GLOBAL_SYMBOL_EXECUTE](
-      rendApi.id.setDarkTheme,
-      storage.getItem(rendApi.storageKey.isDarkThemeActive)
-    )
-    if (window.location.hash == '#/preferences/about') {
-      this.$router.push({ path: '/preferences/about' })
-    } else if (this.isZapConfigSelected != true) {
-      this.$router.push({ path: '/config' })
-    } else {
-      this.$router.push({ path: '/' })
-      this.getAppData()
-    }
+    this.parseQueryString()
+    this.setSessionUuid()
+    this.setTheme()
+    this.routePage()
   },
   mounted() {
     this.addClassToBody()
-    window?.parent?.postMessage({
+    window?.parent?.postMessage(
+      {
         eventId: 'mounted',
         eventData: {
-          hasMounted: true
-        }
+          hasMounted: true,
+        },
       },
-      '*')
+      '*'
+    )
   },
   unmounted() {
     if (this.uiThemeCategory === 'zigbee') {