feat: Editable vuex state (#724)

* make vuex state editable

* add test for updating the stage

* fix: don't clear history on edit

* chore: misc

* test: split vuex edit

* test: fix e2e

Author: hootlex

cypress/integration/vuex-edit.js

@@ -0,0 +1,46 @@
+import { suite } from '../utils/suite'
+
+suite('vuex edit', () => {
+  it('should edit state', () => {
+    cy.get('.vuex-tab').click()
+    // using the decrease button
+    cy.get('.data-field').eq(0)
+      .find('.actions .vue-ui-button').eq(1)
+      .click({ force: true })
+      .click({ force: true })
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('-2')
+    })
+
+    // using the increase button
+    cy.get('.data-field').eq(0).click()
+      .find('.actions .vue-ui-button').eq(2)
+      .click({ force: true })
+      .click({ force: true })
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('0')
+    })
+
+    // using the edit input
+    cy.get('.data-field').eq(0).click()
+      .find('.actions .vue-ui-button').eq(0).click({ force: true })
+    cy.get('.edit-input').type('12')
+    cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('12')
+    })
+
+    // change count back to 1
+    cy.get('.data-field').eq(0).click()
+      .find('.actions .vue-ui-button').eq(0).click({ force: true })
+    cy.get('.edit-input').type('0')
+    cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('0')
+    })
+  })
+})

shells/dev/target/NativeTypes.vue

@@ -60,7 +60,7 @@ const proxy1 = new Proxy(sum, handler)
 export default {
   components: {
     TestComponent: {
-      props: { bar: { default: 'hey' }},
+      props: { bar: { default: 'hey' } },
       data: () => ({ foo: '42' }),
       computed: {
         parentComp () { return this.$parent }

src/backend/vuex.js

@@ -1,5 +1,6 @@
 import { stringify, parse } from 'src/util'
 import SharedData from 'src/shared-data'
+import { set } from '../util'
 
 export function initVuexBackend (hook, bridge) {
   const store = hook.store
@@ -159,6 +160,18 @@ export function initVuexBackend (hook, bridge) {
     return resultState
   }
 
+  bridge.on('vuex:edit-state', ({ index, value, path }) => {
+    let parsedValue
+    if (value) {
+      parsedValue = parse(value, true)
+    }
+    set(store.state, path, parsedValue)
+    bridge.send('vuex:inspected-state', {
+      index,
+      snapshot: getSnapshot()
+    })
+  })
+
   function takeSnapshot (index) {
     snapshots.push({
       index,

src/devtools/components/DataField.vue

@@ -182,6 +182,7 @@
         :removable="isSubfieldsEditable"
         :renamable="editable && valueType === 'plain-object'"
         :force-collapse="forceCollapse"
+        :is-state-field="isStateField"
       />
       <span
         v-if="formattedSubFields.length > limit"
@@ -201,6 +202,7 @@
         :force-collapse="forceCollapse"
         editable
         removable
+        :is-state-field="isStateField"
         @cancel-edit="addingValue = false"
         @submit-edit="addingValue = false"
       />
@@ -261,6 +263,10 @@ export default {
     forceCollapse: {
       type: String,
       default: null
+    },
+    isStateField: {
+      type: Boolean,
+      default: false
     }
   },
 

src/devtools/components/StateInspector.vue

@@ -35,6 +35,7 @@
             :path="field.key"
             :editable="field.editable"
             :force-collapse="forceCollapse"
+            :is-state-field="isStateField(field)"
           />
         </template>
         <template v-else>
@@ -140,6 +141,10 @@ export default {
         this.forceCollapse = value ? 'expand' : 'collapse'
         Vue.set(this.expandedState, key, value)
       })
+    },
+
+    isStateField (field) {
+      return field && field.type === 'state'
     }
   }
 }

src/devtools/index.js

@@ -141,7 +141,10 @@ function initApp (shell) {
     bridge.on('vuex:inspected-state', ({ index, snapshot }) => {
       snapshotsCache.set(index, snapshot)
       store.commit('vuex/RECEIVE_STATE', snapshot)
-      if (store.state.vuex.inspectedIndex === index) {
+
+      if (index === -1) {
+        store.commit('vuex/UPDATE_BASE_STATE', snapshot)
+      } else if (store.state.vuex.inspectedIndex === index) {
         store.commit('vuex/UPDATE_INSPECTED_STATE', snapshot)
       }
 

src/devtools/mixins/data-field-edit.js

@@ -167,11 +167,18 @@ export default {
     },
 
     sendEdit (args) {
-      bridge.send('set-instance-data', {
-        id: this.inspectedInstance.id,
-        path: this.path,
-        ...args
-      })
+      if (this.isStateField) {
+        this.$store.dispatch('vuex/editState', {
+          path: this.path,
+          args
+        })
+      } else {
+        bridge.send('set-instance-data', {
+          id: this.inspectedInstance.id,
+          path: this.path,
+          ...args
+        })
+      }
     },
 
     transformSpecialTokens (str, display) {

src/devtools/views/vuex/VuexStateInspector.vue

@@ -131,13 +131,25 @@ export default {
     filteredState () {
       const inspectedState = [].concat(
         ...Object.keys(this.inspectedState).map(
-          type => Object.keys(this.inspectedState[type]).map(
-            key => ({
-              key,
-              type,
-              value: this.inspectedState[type][key]
-            })
-          )
+          type => {
+            let processedState
+            if (!Array.isArray(this.inspectedState[type])) {
+              processedState = Object.keys(this.inspectedState[type]).map(key => ({
+                key,
+                editable: type === 'state',
+                value: this.inspectedState[type][key]
+              }))
+            } else {
+              processedState = this.inspectedState[type]
+            }
+
+            return processedState.map(
+              item => ({
+                type,
+                ...item
+              })
+            )
+          }
         )
       )
 

src/devtools/views/vuex/actions.js

@@ -76,6 +76,14 @@ export function updateFilter ({ commit }, filter) {
   commit('UPDATE_FILTER', filter)
 }
 
+export function editState ({ state }, { path, args }) {
+  bridge.send('vuex:edit-state', {
+    index: state.inspectedIndex,
+    path,
+    ...args
+  })
+}
+
 function travelTo (state, commit, index, apply = true) {
   return new Promise((resolve) => {
     Resolve.travel = resolve

src/devtools/views/vuex/module.js

@@ -72,6 +72,10 @@ const mutations = {
     state.lastReceivedState = value
   },
 
+  'UPDATE_BASE_STATE' (state, value) {
+    state.base = value
+  },
+
   'TIME_TRAVEL' (state, index) {
     state.activeIndex = index
   },