VMO-3852 Support deep linking for simulator + VMO-3687 Simulator on read only view

src/components/interaction-designer/toolbar/TreeBuilderToolbar.vue

@@ -363,7 +363,6 @@ const validationVuexNamespace = namespace('validation')
     // TreeUpdateConflictModal,
     // InteractionTotalsDateRangeConfiguration
   },
-
 })
 export default class TreeBuilderToolbar extends mixins(Routes, Permissions, Lang) {
   isImporterVisible = false
@@ -496,12 +495,7 @@ export default class TreeBuilderToolbar extends mixins(Routes, Permissions, Lang
     return (this.can('view-result-totals') && this.isFeatureViewResultsEnabled)
   }
 
-  get hasSimulator() {
-    return this.hasOfflineMode && this.isFeatureSimulatorEnabled
-  }
-
   // Methods #####################
-
   async handleAddBlockByTypeSelected({type}: { type: IBlock['type'] }): Promise<void> {
     const {uuid: blockId} = await this.flow_addBlankBlockByType({
       type,
@@ -667,6 +661,7 @@ export default class TreeBuilderToolbar extends mixins(Routes, Permissions, Lang
 
   // Clipboard
   @clipboardVuexNamespace.Action setSimulatorActive!: (value: boolean) => void
+  @clipboardVuexNamespace.Getter hasSimulator!: boolean
 
   @validationVuexNamespace.Action remove_block_validation!: ({blockId}: { blockId: IBlock['uuid'] | undefined}) => void
 }

src/router/trees.js

@@ -32,6 +32,11 @@ export const routes = [
         name: 'flow-details',
         meta: {isFlowEditorShown: true},
       },
+      {
+        path: 'simulator',
+        name: 'flow-simulator',
+        meta: { isSidebarShown: true },
+      },
       {
         path: 'block/:blockId',
         name: 'block-selected',

src/store/clipboard/index.ts

@@ -2,7 +2,8 @@ import {
   ActionTree, GetterTree, Module, MutationTree,
 } from 'vuex'
 import { IRootState } from '@/store'
-import { IPrompt } from '@floip/flow-runner';
+import { router } from '@/router'
+import { IPrompt } from '@floip/flow-runner'
 
 export interface BlocksData {
   isFocused: boolean;
@@ -24,6 +25,7 @@ export const getters: GetterTree<IClipboardState, IRootState> = {
   blocksData: (state) => state.blocksData,
   getBlockPrompt: (state) => (index: number) => state.blocksData[index].prompt,
   isBlockFocused: (state) => (index: number) => state.blocksData[index].isFocused,
+  hasSimulator: (_, _2, _3, rootGetters) => rootGetters['flow/hasOfflineMode'] && rootGetters.isFeatureSimulatorEnabled && !rootGetters['builder/isEditable'],
 }
 
 export const mutations: MutationTree<IClipboardState> = {
@@ -38,6 +40,10 @@ export const mutations: MutationTree<IClipboardState> = {
 export const actions: ActionTree<IClipboardState, IRootState> = {
   setSimulatorActive({ commit }, value) {
     commit('setSimulatorActive', value)
+    const routeName = value ? 'flow-simulator' : 'flow-canvas'
+    router.replace({
+      name: routeName,
+    })
   },
   resetBlocksData({ state }) {
     state.blocksData = []
@@ -58,7 +64,7 @@ export const actions: ActionTree<IClipboardState, IRootState> = {
   },
   removeFromBlocksData({ state }, index: number) {
     state.blocksData.splice(index)
-  }
+  },
 }
 
 export const store: Module<IClipboardState, IRootState> = {

src/views/InteractionDesigner.vue

@@ -11,22 +11,7 @@
       v-if="isSimulatorActive"
       class="tree-sidebar-container"
       :class="{ 'slide-out': !$route.meta.isSidebarShown,}">
-      <div
-        class="sidebar-cue"
-        :class="{'sidebar-close': $route.meta.isSidebarShown}"
-        @click="showOrHideSidebar">
-        <font-awesome-icon
-          v-if="$route.meta.isSidebarShown"
-          :icon="['fac', 'minimize']"
-          class="fa-btn" />
-        <font-awesome-icon
-          v-else
-          :icon="['fac', 'expand']"
-          class="fa-btn" />
-      </div>
-
-      <div
-        class="tree-sidebar">
+      <div v-if="$route.name === 'flow-simulator' && hasSimulator" class="tree-sidebar">
         <clipboard-root />
       </div>
     </aside>
@@ -148,7 +133,7 @@ export default {
 
     ...mapGetters('flow', ['activeFlow']),
     ...mapGetters('builder', ['activeBlock', 'isEditable', 'interactionDesignerBoundingClientRect']),
-    ...mapGetters('clipboard', ['isSimulatorActive']),
+    ...mapGetters('clipboard', ['hasSimulator', 'isSimulatorActive']),
 
     jsKey() {
       return get(this.selectedBlock, 'jsKey')
@@ -221,6 +206,9 @@ export default {
       if (this.$route.meta?.isBlockEditorShown) {
         this.setIsBlockEditorOpen(true)
       }
+      if (this.$route.name === 'flow-simulator' && this.hasSimulator()) {
+        this.setSimulatorActive(true)
+      }
     }, 500)
     console.debug('Vuej tree interaction designer mounted!')
 
@@ -242,6 +230,7 @@ export default {
     ...mapMutations('builder', ['activateBlock', 'setIsBlockEditorOpen', 'setInteractionDesignerBoundingClientRect']),
     ...mapActions('builder', ['setIsEditable']),
     ...mapMutations('flow', ['flow_setActiveFlowId']),
+    ...mapActions('clipboard', ['setSimulatorActive']),
 
     ...mapActions([
       'attemptSaveTree',