feat(state inspector): limit number of root fields

packages/app-frontend/src/components/StateFields.vue

+<template>
+  <div
+    class="data-fields"
+  >
+    <template v-if="isFieldsArray">
+      <data-field
+        v-for="field in displayedFields"
+        :key="field.key"
+        :field="field"
+        :depth="0"
+        :path="field.key"
+        :editable="field.editable"
+        :force-collapse="forceCollapse"
+        :is-state-field="isStateField(field)"
+      />
+    </template>
+    <template v-else>
+      <data-field
+        v-for="(value, key) in displayedFields"
+        :key="key"
+        :field="{ value, key }"
+        :depth="0"
+        :path="key"
+        :editable="false"
+      />
+    </template>
+    <VueButton
+      v-if="fieldsCount > limit"
+      v-tooltip="'Show more'"
+      icon-left="more_horiz"
+      class="icon-button flat more"
+      @click="showMore()"
+    />
+  </div>
+</template>
+
+<script>
+import DataField from './DataField.vue'
+
+export default {
+  components: {
+    DataField
+  },
+
+  props: {
+    fields: {
+      type: [Array, Object],
+      required: true
+    },
+
+    forceCollapse: String
+  },
+
+  data () {
+    return {
+      limit: 20
+    }
+  },
+
+  computed: {
+    isFieldsArray () {
+      return Array.isArray(this.fields)
+    },
+
+    displayedFields () {
+      if (this.isFieldsArray) {
+        return this.fields.slice(0, this.limit)
+      } else {
+        return Object.keys(this.fields)
+          .slice(0, this.limit)
+          .reduce((obj, key) => {
+            obj[key] = this.fields[key]
+            return obj
+          }, {})
+      }
+    },
+
+    fieldsCount () {
+      if (this.isFieldsArray) {
+        return this.fields.length
+      } else {
+        return Object.keys(this.fields).length
+      }
+    }
+  },
+
+  methods: {
+    isStateField (field) {
+      return field && field.type === 'state'
+    },
+
+    showMore () {
+      this.limit += 20
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.more
+  width 20px
+  height @width
+  >>> .vue-ui-icon
+    width 16px
+    height @width
+</style>

packages/app-frontend/src/components/StateInspector.vue

@@ -23,40 +23,18 @@
         />
         <span class="key">{{ toDisplayType(dataType) }}</span>
       </div>
-      <div
+      <StateFields
         v-show="isExpanded(dataType)"
-        class="data-fields"
-      >
-        <template v-if="Array.isArray(state[dataType])">
-          <data-field
-            v-for="field in state[dataType]"
-            :key="field.key"
-            :field="field"
-            :depth="0"
-            :path="field.key"
-            :editable="field.editable"
-            :force-collapse="forceCollapse"
-            :is-state-field="isStateField(field)"
-          />
-        </template>
-        <template v-else>
-          <data-field
-            v-for="(value, key) in state[dataType]"
-            :key="key"
-            :field="{ value, key }"
-            :depth="0"
-            :path="key"
-            :editable="false"
-          />
-        </template>
-      </div>
+        :fields="state[dataType]"
+        :force-collapse="forceCollapse"
+      />
     </div>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
-import DataField from './DataField.vue'
+import StateFields from './StateFields.vue'
 
 const keyOrder = {
   props: 1,
@@ -74,7 +52,7 @@ const keyOrder = {
 
 export default {
   components: {
-    DataField
+    StateFields
   },
 
   props: {
@@ -152,10 +130,6 @@ export default {
         this.forceCollapse = value ? 'expand' : 'collapse'
         Vue.set(this.expandedState, key, value)
       })
-    },
-
-    isStateField (field) {
-      return field && field.type === 'state'
     }
   }
 }