From f89d52077373d838527302a1813c19fe4a3eba98 Mon Sep 17 00:00:00 2001
From: yumiguan <41277086+yumiguan@users.noreply.github.com>
Date: Fri, 12 Aug 2022 19:39:06 +0800
Subject: [PATCH] Feature/datamanager group detail display info (#679)

* Support datamanager group detail display info

* update

* update readme

* update tests

* update tests

* fix issue
---
 README.md                                     |   2 +-
 .../components/DocumentTreeDialogCreate.vue   |  39 ++-
 frontend/src/components/DocumentTreeNode.vue  |  35 +--
 frontend/src/store/datamanager.js             |  25 +-
 frontend/src/store/settings.js                |   1 +
 frontend/src/views/datamanager/DataDetail.vue |   6 +
 .../views/datamanager/DataDetailHttpData.vue  |   6 +-
 .../src/views/datamanager/DataDetailInfo.vue  | 292 ++++++++++++------
 .../views/datamanager/DataDetailPlainJSON.vue | 140 +++++++++
 frontend/src/views/datamanager/DataList.vue   |   1 +
 frontend/src/views/statusbar/StatusInfo.vue   |  12 +-
 lyrebird/mock/blueprints/apis/common.py       |   1 +
 lyrebird/mock/blueprints/apis/mock.py         |   6 +-
 lyrebird/mock/dm/__init__.py                  | 112 ++++---
 lyrebird/mock/dm/file_data_adapter.py         |   6 +
 lyrebird/mock/qrcode.py                       |  14 +-
 .../lyrebird_plugin_demo/README.md            |   2 +-
 .../lyrebird_plugin_demo/setup.py             |   1 -
 lyrebird/utils.py                             |  23 ++
 lyrebird/version.py                           |   2 +-
 tests/test_conf_api.py                        |   9 +-
 tests/test_dm.py                              |  67 +++-
 22 files changed, 601 insertions(+), 201 deletions(-)
 create mode 100644 frontend/src/views/datamanager/DataDetailPlainJSON.vue

diff --git a/README.md b/README.md
index 6a6242402..ab720f0e8 100644
--- a/README.md
+++ b/README.md
@@ -72,7 +72,7 @@ docker pull overbridge/lyrebird
 
 - macOS/Windows
 
-* Python >= 3.6
+* Python >= 3.7
 
 ```bash
 # macOS系统中推荐使用Homebrew(https://brew.sh/#install)安装Python3
diff --git a/frontend/src/components/DocumentTreeDialogCreate.vue b/frontend/src/components/DocumentTreeDialogCreate.vue
index 1d30584be..0469cd6e4 100644
--- a/frontend/src/components/DocumentTreeDialogCreate.vue
+++ b/frontend/src/components/DocumentTreeDialogCreate.vue
@@ -1,12 +1,12 @@
 <template>
   <v-dialog v-model="shown" width="600">
     <v-card>
-      <v-card-title style="font-size:16px;">Create {{createType}}</v-card-title>
+      <v-card-title style="font-size:16px;">Add</v-card-title>
 
       <v-divider/>
 
       <v-card-text class="overflow-auto py-0 mt-3 mb-2" style="font-size:14px">
-        <v-row>
+        <v-row align="center" class="mt-0">
           <v-col cols="2">
             <p class="text-right"><b>Parent</b></p>
           </v-col>
@@ -14,6 +14,21 @@
             <p>{{nodeInfo.abs_parent_path}}</p>
           </v-col>
         </v-row>
+
+        <v-row  align="center" class="mt-0">
+          <v-col cols="2">
+            <p class="text-right"><b>Type</b></p>
+          </v-col>
+          <v-col cols="10">
+            <v-select
+              v-model="createType"
+              :items="createTypeItems"
+              dense
+              color="primary"
+            />
+          </v-col>
+        </v-row>
+
         <v-row align="center" class="mt-0">
           <v-col cols="2">
             <p class="text-right"><b>Name</b></p>
@@ -45,6 +60,11 @@ export default {
   data () {
     return {
       createName: null,
+      createTypeItems: [
+        { value: 'group', text: 'Group' },
+        { value: 'data', text: 'Data (HTTP)' },
+        { value: 'json', text: 'Data (JSON)' }
+      ]
     }
   },
   computed: {
@@ -59,8 +79,13 @@ export default {
     nodeInfo () {
       return this.$store.state.dataManager.focusNodeInfo
     },
-    createType () {
-      return this.$store.state.dataManager.createType
+    createType: {
+      get () {
+        return this.$store.state.dataManager.createType
+      },
+      set (val) {
+        this.$store.commit('setCreateType', val)
+      }
     }
   },
   methods: {
@@ -71,12 +96,14 @@ export default {
           groupName: this.createName,
           parentId: this.nodeInfo.id
         })
-      } else if (this.createType === 'data') {
+      } else {
         this.$store.dispatch('createData', {
+          type: this.createType,
           dataName: this.createName,
           parentId: this.nodeInfo.id
         })
-      } else { }
+      }
+      this.createName = ''
       this.shown = false
     },
     onCancel () {
diff --git a/frontend/src/components/DocumentTreeNode.vue b/frontend/src/components/DocumentTreeNode.vue
index 96264d409..b938decea 100644
--- a/frontend/src/components/DocumentTreeNode.vue
+++ b/frontend/src/components/DocumentTreeNode.vue
@@ -10,18 +10,13 @@
     >
 
       <span>
-        <v-btn
-          v-show="data.type === 'group'"
-          icon
-          class="mr-1 my-0"
-          @click.stop="onToggleStatusChange"
-        >
+        <v-btn v-if="data.type === 'group'" icon class="mr-1 my-0" @click.stop="onToggleStatusChange">
           <v-icon small :color="toggleColor">
             {{isNodeOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'}}
           </v-icon>
         </v-btn>
-
-        <v-icon v-show="data.type === 'data'" small color="accent" size="14px" class="mr-1">mdi-file</v-icon>
+        <v-icon v-else-if="data.type === 'json'" small color="accent" size="14px" class="mr-1">mdi-alpha-j-box-outline</v-icon>
+        <v-icon v-else small color="accent" size="14px" class="mr-1">mdi-file</v-icon>
 
         <div class="status-point" v-show="isGroupActivated"/>
 
@@ -44,7 +39,7 @@
           v-show="data.type==='group'"
           icon
           @click="isGroupActivated ? onTreeNodeDeactivate() : onTreeNodeActivate()"
-          :title="isGroupActivated ? 'Activate' : 'Deactivate'"
+          :title="isGroupActivated ? 'Deactivate' : 'Activate'"
         >
           <v-icon size="12px" :color="isGroupActivated ? 'error' : '#19be6b'">
             {{isGroupActivated ? 'mdi-square' : 'mdi-play'}}
@@ -52,6 +47,7 @@
         </v-btn>
 
         <v-btn
+          v-show="isNodeDeletable"
           icon
           @click.stop="changeDeleteDialogStatus"
         >
@@ -121,16 +117,7 @@
               v-show="data.type==='group'"
               @click="onTreeNodeAddGroup"
             >
-              <v-list-item-title>Add group</v-list-item-title>
-            </v-list-item>
-
-            <v-list-item
-              key="addData"
-              link
-              v-show="data.type==='group'"
-              @click="onTreeNodeAddData"
-            >
-              <v-list-item-title>Add data</v-list-item-title>
+              <v-list-item-title>Add</v-list-item-title>
             </v-list-item>
 
             <v-divider v-show="data.type==='group'"/>
@@ -242,6 +229,9 @@ export default {
     duplicateNodeChildrenCount () {
       return this.countNodeChildren(this.data)
     },
+    isNodeDeletable () {
+      return this.$store.state.dataManager.treeUndeletableId.indexOf(this.data.id) === -1
+    },
     isNodeOpen () {
       return this.$store.state.dataManager.groupListOpenNode.indexOf(this.data.id) > -1
     },
@@ -299,6 +289,8 @@ export default {
         this.$store.dispatch('loadGroupDetail', this.data)
       } else if (this.data.type === 'data') {
         this.$store.dispatch('loadDataDetail', this.data)
+      } else if (this.data.type === 'json') {
+        this.$store.dispatch('loadDataDetail', this.data)
       } else { }
     },
     onTreeNodeCut () {
@@ -318,11 +310,6 @@ export default {
       this.$store.dispatch('duplicateGroupOrData', this.data)
     },
     onTreeNodeAddGroup () {
-      this.$store.commit('setCreateType', 'group')
-      this.$store.commit('setIsShownCreateDialog', true)
-    },
-    onTreeNodeAddData () {
-      this.$store.commit('setCreateType', 'data')
       this.$store.commit('setIsShownCreateDialog', true)
     },
     onTreeNodeActivate () {
diff --git a/frontend/src/store/datamanager.js b/frontend/src/store/datamanager.js
index 0f613adcb..5b3ca5e88 100644
--- a/frontend/src/store/datamanager.js
+++ b/frontend/src/store/datamanager.js
@@ -36,7 +36,8 @@ export default {
     undeletableKey: ['id', 'rule', 'name', 'label', 'category', 'super_by'],
     uneditableKey: ['id', 'rule', 'super_by'],
     stickyTopKey: ['id', 'rule', 'super_id', 'name', 'label', 'super_by'],
-    displayCopyKey: ['id']
+    displayCopyKey: ['id'],
+    treeUndeletableId: []
   },
   mutations: {
     setTitle (state, title) {
@@ -169,6 +170,9 @@ export default {
     },
     concatStickyTopKey (state, stickyTopKey) {
       state.stickyTopKey = state.stickyTopKey.concat(stickyTopKey)
+    },
+    concatTreeUndeletableId (state, treeUndeletableId) {
+      state.treeUndeletableId = state.treeUndeletableId.concat(treeUndeletableId)
     }
   },
   actions: {
@@ -180,6 +184,7 @@ export default {
             .then(response => {
               commit('addGroupListOpenNode', response.data.data.id)
               commit('setGroupList', [response.data.data])
+              commit('concatTreeUndeletableId', response.data.data.id)
               commit('setIsLoading', false)
             })
             .catch(error => {
@@ -237,12 +242,21 @@ export default {
       }
     },
     saveGroupDetail ({ state, commit, dispatch }, payload) {
+      bus.$emit('msg.loading', 'Updating group ' + payload.name + ' ...')
       api.updateGroup(payload.id, payload)
         .then(response => {
-          dispatch('loadDataMap')
-          dispatch('loadDataLabel')
+          if (state.isReloadTreeWhenUpdate) {
+            dispatch('loadDataMap')
+            dispatch('loadDataLabel')
+            commit('setIsReloadTreeWhenUpdate', false)
+          }
           dispatch('loadGroupDetail', payload)
-          bus.$emit('msg.success', 'Group ' + payload.name + ' update!')
+          bus.$emit('msg.destroy')
+          if (response.data.message) {
+            bus.$emit('msg.info', response.data.message)
+          } else {
+            bus.$emit('msg.success', 'Group ' + payload.name + ' update!')
+          }
         })
         .catch(error => {
           bus.$emit('msg.error', 'Group ' + payload.name + ' update error: ' + error.data.message)
@@ -265,9 +279,10 @@ export default {
           bus.$emit('msg.error', 'Delete group ' + payload.name + ' error: ' + error.data.message)
         })
     },
-    createData ({ dispatch }, { dataName, parentId }) {
+    createData ({ dispatch }, { type, dataName, parentId }) {
       if (dataName) {
         api.createData(parentId, {
+          type,
           name: dataName
         })
           .then(response => {
diff --git a/frontend/src/store/settings.js b/frontend/src/store/settings.js
index 3628ff6f5..efe7e023d 100644
--- a/frontend/src/store/settings.js
+++ b/frontend/src/store/settings.js
@@ -3,6 +3,7 @@ import { bus } from '@/eventbus'
 
 var configCommitMap = [
   {'name': 'mock.data.showLabel', 'commit': 'setIsLabelDisplay'},
+  {'name': 'mock.data.tree.undeletableId', 'commit': 'concatTreeUndeletableId'},
   {'name': 'mock.data.detail.stickyTopKey', 'commit': 'concatStickyTopKey'},
   {'name': 'mock.data.detail.undeletableKey', 'commit': 'concatUndeletableKey'},
   {'name': 'mock.data.detail.undisplayedKey', 'commit': 'concatUndisplayedKey'},
diff --git a/frontend/src/views/datamanager/DataDetail.vue b/frontend/src/views/datamanager/DataDetail.vue
index 38fc8cef8..af73db5fb 100644
--- a/frontend/src/views/datamanager/DataDetail.vue
+++ b/frontend/src/views/datamanager/DataDetail.vue
@@ -21,12 +21,14 @@
 
 <script>
 import DataDetailHttpData from '@/views/datamanager/DataDetailHttpData.vue'
+import DataDetailPlainJSON from '@/views/datamanager/DataDetailPlainJSON.vue'
 import DataDetailFolder from '@/views/datamanager/DataDetailFolder.vue'
 import JsonPathBar from '@/views/datamanager/JsonPathBar.vue'
 import { getGroupDetail } from '@/api'
 
 export default {
   components: {
+    DataDetailPlainJSON,
     DataDetailHttpData,
     DataDetailFolder,
     JsonPathBar
@@ -46,6 +48,8 @@ export default {
     getComponentByType (payload) {
       if (payload.type === 'data') {
         return 'DataDetailHttpData'
+      } else if (payload.type === 'json') {
+        return 'DataDetailPlainJSON'
       } else if (payload.type === 'group') {
         return 'DataDetailFolder'
       } else {
@@ -64,6 +68,8 @@ export default {
           })
       } else if (payload.type === 'data') {
         this.$store.dispatch('loadDataDetail', payload)
+      } else if (payload.type === 'json') {
+        this.$store.dispatch('loadDataDetail', payload)
       } else { }
     }
   }
diff --git a/frontend/src/views/datamanager/DataDetailHttpData.vue b/frontend/src/views/datamanager/DataDetailHttpData.vue
index 47eac57e8..45b7b0ee8 100644
--- a/frontend/src/views/datamanager/DataDetailHttpData.vue
+++ b/frontend/src/views/datamanager/DataDetailHttpData.vue
@@ -72,7 +72,11 @@ export default {
   computed: {
     currentTab: {
       get () {
-        return this.$store.state.dataManager.dataDetailFocuedTab
+        const dataDetailFocuedTab = this.$store.state.dataManager.dataDetailFocuedTab
+        if (this.editorCache.hasOwnProperty(dataDetailFocuedTab)) {
+          return dataDetailFocuedTab
+        }
+        return 'info'
       },
       set (val) {
         this.$store.commit('setDataDetailFocuedTab', val)
diff --git a/frontend/src/views/datamanager/DataDetailInfo.vue b/frontend/src/views/datamanager/DataDetailInfo.vue
index e0da0fa46..231123c3e 100644
--- a/frontend/src/views/datamanager/DataDetailInfo.vue
+++ b/frontend/src/views/datamanager/DataDetailInfo.vue
@@ -1,82 +1,162 @@
 <template>
-  <Row type="flex" align="top" @mouseover.native="isMouseOver=true" @mouseout.native="isMouseOver=false" style="margin-bottom:10px;word-break:break-all;">
-    <Col span="4" align="right" style="padding:0px 10px 0px 0px">
-      <Tooltip :content="deletable ? 'Delete': 'Undeletable key'" :delay="500" placement="bottom-start">
-        <Icon 
-          type="md-remove-circle" 
-          :class="buttonClass" 
-          v-show="isMouseOver" 
-          @click.native="deleteInfoKey" 
-          style="padding:0px 10px"
-        />
-      </Tooltip>
-      <span>{{infoKey}}</span>
-    </Col>
-    <Col span="20" style="padding:0px 0px 0px 10px">
-      <span v-if="inputValueType === 'link'">
-        <Input v-model="inputValue" type="textarea" :autosize="{ minRows: 1 }" size="small" style="width:calc(100% - 30px);"/>
-        <Poptip
-          placement="bottom"
-          :width="getQrcodeImgWidth()"
-          word-wrap
-          @on-popper-show="loadQrcodeImg"
-          v-model="isDisplayPoptip"
-          transfer
-        >
-          <svg-icon class="ivu-icon" name="qrcode" scale="2.8" style="margin-left:3px;cursor: pointer;"/>
-          <div slot="content">
-            <img :src="imgData" style="width:100%">
+  <v-hover v-slot="{ hover: isMouseOver }">
+    <v-row
+      no-gutters
+      align="start"
+      style="word-break:break-all;"
+      class="data-detail-info mb-3"
+    >
+      <v-col cols=2 class="pr-2">
+        <p class="text-right ma-0">
+          <v-btn
+            icon
+            v-show="isMouseOver"
+            @click.stop="deleteInfoKey"
+            :disabled="!deletable"
+            title="Delete"
+          >
+            <v-icon size="12px" color="primary">mdi-minus-circle</v-icon>
+          </v-btn>
+          {{infoKey}}
+        </p>
+      </v-col>
+
+      <v-col cols=10 class="pl-2">
+        <span v-if="inputValueType === 'label'">
+          <LabelDropdown :initLabels="infoValue" :placement="'bottom-start'" @onLabelChange="editLabel">
+            <template #dropdownButton>
+              <span v-for="(label, index) in infoValue">
+                <span class="data-label" :style="'background-color:'+(label.color?label.color:'#808695')">{{label.name}}</span>
+              </span>
+              <v-btn icon class="ml-1"  title="Edit">
+                <v-icon size="12px" color="primary">mdi-pencil</v-icon>
+              </v-btn>
+            </template>
+          </LabelDropdown>
+        </span>
+        <span v-else-if="inputValueType === 'category'">
+          <Select v-model="infoValue.selected" multiple size="small">
+            <Option v-for="item in infoValue.allItem" :value="item.value" :key="item.value">{{ item.value }}</Option>
+          </Select>
+        </span>
+        <span v-else-if="inputValueType === 'longList'">
+          <div class="row no-gutters mb-1" v-for="listItem in longListValue">
+            <div class="col-5">
+              <span>{{listItem.id}}</span>
+            </div>
+            <div class="col-7 text-truncate">
+              <span>{{listItem.name}}</span>
+            </div>
           </div>
-        </Poptip>
-      </span>
-      <span v-else-if="inputValueType === 'label'">
-        <LabelDropdown :initLabels="infoValue" :placement="'bottom-start'" @onLabelChange="editLabel">
-          <template #dropdownButton>
-            <span v-for="(label, index) in infoValue">
-              <span class="data-label" :style="'background-color:'+(label.color?label.color:'#808695')">{{label.name}}</span>
+          <v-btn v-show="infoValue.length > longListShowLessCount" plain class="px-0" height="20" color="primary" @click="changeTextLongListShowAll">
+            <span>{{isLongListShowAll ? 'Show Less': 'Show More'}}</span>
+          </v-btn>
+        </span>
+        <span v-else-if="inputValueType === 'stringObject'">
+          <v-row no-gutters>
+
+            <v-textarea
+              v-if="editable"
+              class="data-detail-info-input shading"
+              outlined
+              dense
+              v-model="infoValue.value"
+              hide-details
+              rows=1
+              auto-grow
+              background-color="#ffffff"
+            />
+            <span v-else>
+              {{infoValue.value}}
             </span>
-            <Icon type="md-settings" size="14" style="padding-left:5px"/>
-          </template>
-        </LabelDropdown>
-      </span>
-      <span v-else-if="inputValueType === 'category'">
-        <Select v-model="infoValue.selected" multiple size="small">
-          <Option v-for="item in infoValue.allItem" :value="item.value" :key="item.value">{{ item.value }}</Option>
-        </Select>
-      </span>
-      <span v-else-if="inputValueType === 'longList'">
-        <div class="row no-gutters mb-1" v-for="listItem in longListValue">
-          <div class="col-5">
-            <span>{{listItem.id}}</span>
-          </div>
-          <div class="col-7 text-truncate">
-            <span>{{listItem.name}}</span>
-          </div>
-        </div>
-        <v-btn v-show="infoValue.length > longListShowLessCount" plain class="px-0" height="20" color="primary" @click="changeTextLongListShowAll">
-          <span>{{isLongListShowAll ? 'Show Less': 'Show More'}}</span>
-        </v-btn>
-      </span>
-      <span v-else-if="inputValueType === 'input'">
-        <Input v-model="inputValue" type="textarea" :autosize="{ minRows: 1 }" size="small"/>
-      </span>
-      <span v-else-if="inputValueType === 'textWithCopy'">
-        {{inputValue}}
-        <v-btn icon x-small title='Copy'>
-          <v-icon
-            x-small
-            color="context"
-            v-clipboard:copy="inputValue"
-            v-clipboard:success="onUrlCopy"
-            v-clipboard:error="onUrlCopyError"
-          >{{copyIcon}}</v-icon>
-        </v-btn>
-      </span>
-      <span v-else>
-        {{inputValue}}
-      </span>
-    </Col>
-  </Row>
+
+            <v-btn v-show="isDisplayCopyIcon" icon x-small title='Copy'>
+              <v-icon
+                x-small
+                color="context"
+                v-clipboard:copy="inputValue"
+                v-clipboard:success="onUrlCopy"
+                v-clipboard:error="onUrlCopyError"
+              >{{copyIcon}}</v-icon>
+            </v-btn>
+
+            <v-menu offset-y open-on-hover :close-on-content-click="false">
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn plain icon small v-bind="attrs" v-on="on">
+                  <v-icon small size="18px" color="content">mdi-information-outline</v-icon>
+                </v-btn>
+              </template>
+              <div class="data-detail-info-string-object-info-menu pa-2">
+                {{infoValue.info}}
+              </div>
+            </v-menu>
+
+            <Poptip
+              v-show="isDisplayPoptipIcon"
+              placement="bottom"
+              :width="getQrcodeImgWidth()"
+              word-wrap
+              @on-popper-show="loadQrcodeImg"
+              v-model="isDisplayPoptip"
+              transfer
+            >
+              <svg-icon class="ivu-icon" name="qrcode" scale="2.8" style="margin-left:3px;cursor: pointer;"/>
+              <div slot="content">
+                <img :src="imgData" style="width:100%">
+              </div>
+            </Poptip>
+
+          </v-row>
+        </span>
+        <span v-else-if="inputValueType === 'string'">
+          <v-row no-gutters>
+            <v-textarea
+              v-if="editable"
+              class="data-detail-info-input shading"
+              outlined
+              dense
+              v-model="inputValue"
+              hide-details
+              rows=1
+              auto-grow
+              background-color="#ffffff"
+            />
+            <span v-else>
+              {{inputValue}}
+            </span>
+
+            <span v-show="isDisplayPoptipIcon">
+              <Poptip
+                placement="bottom"
+                :width="getQrcodeImgWidth()"
+                word-wrap
+                @on-popper-show="loadQrcodeImg"
+                v-model="isDisplayPoptip"
+                transfer
+              >
+                <svg-icon class="ivu-icon" name="qrcode" scale="2.8" style="margin-left:3px;cursor: pointer;"/>
+                <div slot="content">
+                  <img :src="imgData" style="width:100%">
+                </div>
+              </Poptip>
+            </span>
+
+            <v-btn v-show="isDisplayCopyIcon" icon x-small title='Copy'>
+              <v-icon
+                x-small
+                color="context"
+                v-clipboard:copy="inputValue"
+                v-clipboard:success="onUrlCopy"
+                v-clipboard:error="onUrlCopyError"
+              >{{copyIcon}}</v-icon>
+            </v-btn>
+          </v-row>
+        </span>
+      </v-col>
+    </v-row>
+  </v-hover>
+
+
 </template>
 
 <script>
@@ -94,7 +174,6 @@ export default {
     return {
       imgData: '',
       isDisplayPoptip: false,
-      isMouseOver: false,
       isLongListShowAll: false,
       longListShowLessCount: 5,
       copyIcon: 'mdi-content-copy'
@@ -114,6 +193,9 @@ export default {
       },
       set (val) {
         this.$store.commit('setGroupDetailItem', { key: this.infoKey, value: val })
+        if (this.infoKey === 'name') {
+          this.$store.commit('setIsReloadTreeWhenUpdate', true)
+        }
       }
     },
     infoValue () {
@@ -125,33 +207,31 @@ export default {
       }
       return this.infoValue.slice(0, this.longListShowLessCount)
     },
-    buttonClass () {
-      if (this.deletable) {
-        return ['enable-button']
-      } else {
-        return ['disable-button']
+    isDisplayCopyIcon () {
+      return this.$store.state.dataManager.displayCopyKey.indexOf(this.infoKey) !== -1
+    },
+    isDisplayPoptipIcon () {
+      if (!String(this.inputValue).match('(?=.*://)')) {
+        return false
+      }
+      if (this.$store.state.snapshot.groupDetailDisplayKey === this.infoKey ) {
+        this.isDisplayPoptip = true
+        this.$store.commit('clearGroupDetailDisplayKey')
+        this.loadQrcodeImg ()
       }
+      return true
     },
     inputValueType () {
-      if (String(this.inputValue).match('(?=.*://)')) {
-        if (this.$store.state.snapshot.groupDetailDisplayKey === this.infoKey ) {
-          this.isDisplayPoptip = true
-          this.$store.commit('clearGroupDetailDisplayKey')
-          this.loadQrcodeImg ()
-        }
-        return 'link'
-      } else if (this.infoKey === 'label') {
+      if (this.infoKey === 'label') {
         return 'label'
       } else if (this.infoKey === 'category') {
         return 'category'
       } else if (this.infoKey === 'super_by') {
         return 'longList'
-      } else if (this.$store.state.dataManager.displayCopyKey.indexOf(this.infoKey) !== -1) {
-        return 'textWithCopy'
-      } else if (this.editable) {
-        return 'input'
+      } else if (this.infoValue && this.infoValue.hasOwnProperty('value') && this.infoValue.hasOwnProperty('info') ) {
+        return 'stringObject'
       } else {
-        return 'text'
+        return 'string'
       }
     }
   },
@@ -246,4 +326,26 @@ export default {
   vertical-align: bottom;
   font-weight: 500;
 }
+.data-detail-info-string-object-info-menu {
+  background-color: #fff;
+  min-width: 200px;
+  max-width: 600px;
+}
+.data-detail-info .v-btn--icon.v-size--default {
+  height: 18px;
+  width: 18px;
+}
+.data-detail-info-input {
+  font-size: 14px;
+}
+.data-detail-info-input .v-input__slot {
+  min-height: 24px !important;
+  padding: 0px 4px !important;
+}
+.data-detail-info-input textarea {
+  color: #515a6e !important;
+  line-height: 20px !important;
+  min-height: 24px !important;
+  margin-top: 2px !important;
+}
 </style>
diff --git a/frontend/src/views/datamanager/DataDetailPlainJSON.vue b/frontend/src/views/datamanager/DataDetailPlainJSON.vue
new file mode 100644
index 000000000..ff1582967
--- /dev/null
+++ b/frontend/src/views/datamanager/DataDetailPlainJSON.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="small-tab">
+    <tabs v-model="currentTab" :animated="false" size="small">
+      <tab-pane label="Information" name="info" />
+      <tab-pane label="JSON" name="json" />
+    </tabs>
+    <div>
+      <CodeEditor
+        class="data-detail"
+        :language="currentTabContentType"
+        v-model="editorContent"
+        v-on:on-jsonpath-change="onJsonPathChange"
+      ></CodeEditor>
+    </div>
+    <div class="save-btn" v-if="dataDetail">
+      <v-tooltip top>
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn
+            v-bind="attrs"
+            v-on="on"
+            fab
+            dark
+            color="primary"
+            class="save-btn-detail"
+            @click="save"
+          >
+            <v-icon 
+            class="save-btn-icon"
+            dark>
+              mdi-content-save-outline
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>Save (⌘+s)</span>
+      </v-tooltip>
+    </div>
+  </div>
+</template>
+
+<script>
+import DataDetailInfo from '@/views/datamanager/DataDetailInfo.vue'
+import CodeEditor from '@/components/CodeEditor.vue'
+import Icon from 'vue-svg-icon/Icon.vue'
+
+export default {
+  components: {
+    DataDetailInfo,
+    CodeEditor,
+    'svg-icon': Icon
+  },
+  data () {
+    return {
+      editorCache: {
+        info: null,
+        json: null
+      }
+    }
+  },
+  mounted () {
+    this.$bus.$on('keydown', this.onKeyDown)
+    this.setDataDetailEditorCache(this.dataDetail)
+  },
+  beforeDestroy () {
+    this.$bus.$off('keydown', this.onKeyDown)
+  },
+  computed: {
+    currentTab: {
+      get () {
+        const dataDetailFocuedTab = this.$store.state.dataManager.dataDetailFocuedTab
+        if (this.editorCache.hasOwnProperty(dataDetailFocuedTab)) {
+          return dataDetailFocuedTab
+        }
+        return 'info'
+      },
+      set (val) {
+        this.$store.commit('setDataDetailFocuedTab', val)
+      }
+    },
+    currentTabContentType () {
+      return 'json'
+    },
+    dataDetail () {
+      return this.$store.state.dataManager.dataDetail
+    },
+    editorContent: {
+      get () {
+        const content = this.editorCache[this.currentTab]
+        if (!content) {
+          return ''
+        }
+        return content
+      },
+      set (val) {
+        this.editorCache[this.currentTab] = val
+      }
+    }
+  },
+  watch: {
+    dataDetail (val) {
+      this.setDataDetailEditorCache(val)
+    }
+  },
+  methods: {
+    save () {
+      const newData = {}
+      Object.assign(newData, JSON.parse(this.editorCache.info))
+      newData['json'] = this.editorCache.json
+      this.$store.commit('setIsReloadTreeWhenUpdate', this.dataDetail.name !== newData.name)
+      this.$store.dispatch('saveDataDetail', newData)
+    },
+    onJsonPathChange (payload) {
+      this.$store.commit('setJsonPath', payload.jsonPath)
+    },
+    onKeyDown (event) {
+      if (event.code !== "KeyS" || !event.metaKey) {
+        return
+      }
+      this.save()
+      event.preventDefault()
+      console.log("Save", event)
+    },
+    setDataDetailEditorCache (val) {
+      if (val === null || Object.keys(val).length === 0) {
+        return
+      }
+      this.editorCache.info = JSON.stringify({
+        id: val.id,
+        name: val.name
+      })
+      this.editorCache.json = typeof (val.json) == 'object' ? JSON.stringify(val.json) : val.json
+    }
+  }
+}
+</script>
+
+<style scoped>
+.small-tab > .ivu-tabs > .ivu-tabs-bar {
+  margin-bottom: 0;
+}
+</style>
diff --git a/frontend/src/views/datamanager/DataList.vue b/frontend/src/views/datamanager/DataList.vue
index f18bfecb2..cdf001149 100644
--- a/frontend/src/views/datamanager/DataList.vue
+++ b/frontend/src/views/datamanager/DataList.vue
@@ -54,6 +54,7 @@
             icon
             @click.stop="changeDeleteDialogStatus"
             :disabled="selectedLeaf.length===0"
+            title="Delete"
           >
             <v-icon size="12px" color="primary">mdi-trash-can-outline</v-icon>
           </v-btn>
diff --git a/frontend/src/views/statusbar/StatusInfo.vue b/frontend/src/views/statusbar/StatusInfo.vue
index b5e303a38..7d00bbe79 100644
--- a/frontend/src/views/statusbar/StatusInfo.vue
+++ b/frontend/src/views/statusbar/StatusInfo.vue
@@ -5,7 +5,7 @@
         content="content"
         placement="top-end"
         class="main-footer-status"
-        width="250"
+        width="280"
       >
         <span class="main-footer-status-button">
           <Icon type="ios-arrow-up" style="padding-right:3px;"/>
@@ -16,10 +16,10 @@
         </div>
         <div slot="content">
           <Row>
-            <i-col span="9">
+            <i-col span="12">
               <b style="float: right">IP</b>
             </i-col>
-            <i-col span="14" offset="1">
+            <i-col span="11" offset="1">
               {{status.ip}}
               <v-btn icon x-small @click.stop="showDialogChangeIp" title="Update info">
                 <v-icon size="12px" color="primary">mdi-pencil</v-icon>
@@ -27,10 +27,10 @@
             </i-col>
           </Row>
           <Row v-for="key in showedStatus" :key="key">
-            <i-col span="9">
+            <i-col span="12">
               <b style="float: right">{{key.toUpperCase()}}</b>
             </i-col>
-            <i-col span="14" offset="1">{{status[key]}}</i-col>
+            <i-col span="11" offset="1">{{status[key]}}</i-col>
           </Row>
           <Divider style="margin:10px 0;"/>
           <div style="text-align:center">
@@ -65,7 +65,7 @@ export default {
   },
   data () {
     return {
-      showedStatus: ['mock.port', 'proxy.port']
+      showedStatus: ['mock.port', 'proxy.port', 'extra.mock.port']
     }
   },
   mounted () {
diff --git a/lyrebird/mock/blueprints/apis/common.py b/lyrebird/mock/blueprints/apis/common.py
index 4f6b9e628..66ce0719f 100644
--- a/lyrebird/mock/blueprints/apis/common.py
+++ b/lyrebird/mock/blueprints/apis/common.py
@@ -17,6 +17,7 @@ def get(self):
             **{'ip': conf.get('ip', 'unknown ip'),
                'mock.port': conf['mock.port'],
                'proxy.port': conf['proxy.port'],
+               'extra.mock.port': conf['extra.mock.port'],
                'version': version.VERSION
                })
 
diff --git a/lyrebird/mock/blueprints/apis/mock.py b/lyrebird/mock/blueprints/apis/mock.py
index b8eb2aa0f..23e81e9cc 100644
--- a/lyrebird/mock/blueprints/apis/mock.py
+++ b/lyrebird/mock/blueprints/apis/mock.py
@@ -14,7 +14,7 @@ class MockGroup(Resource):
 
     def get(self, group_id=None, label=None):
         if group_id:
-            _group = context.application.data_manager.id_map.get(group_id)
+            _group = context.application.data_manager.get(group_id)
             if not _group:
                 return context.make_fail_response('Not found group')
 
@@ -56,8 +56,8 @@ def post(self):
     def put(self):
         group_id = request.json.get('id')
         data = request.json.get('data')
-        context.application.data_manager.update_group(group_id, data)
-        return context.make_ok_response()
+        message = context.application.data_manager.update_group(group_id, data)
+        return context.make_ok_response(**message)
 
     def delete(self, group_id=None):
         if group_id is not None:
diff --git a/lyrebird/mock/dm/__init__.py b/lyrebird/mock/dm/__init__.py
index 4ce2cb62d..7746885a7 100644
--- a/lyrebird/mock/dm/__init__.py
+++ b/lyrebird/mock/dm/__init__.py
@@ -6,7 +6,6 @@
 import shutil
 import datetime
 from pathlib import Path
-from jinja2 import Template
 from urllib.parse import urlparse
 from collections import OrderedDict
 from lyrebird import utils, application
@@ -40,6 +39,7 @@ def __init__(self):
 
         self.add_group_ignore_keys = set(['id', 'type', 'children'])
         self.update_group_ignore_keys = set(['id', 'parent_id', 'type', 'children'])
+        self.supported_data_type = ['data', 'json']
 
         self.unsave_keys = set()
 
@@ -113,9 +113,13 @@ def get(self, _id):
         if not node:
             raise IDNotFound(_id)
         if node.get('type') == 'group' or node.get('type') == None:
-            return node
+            return self._adapter._get_group(_id)
         elif node.get('type') == 'data':
             return self._adapter._load_data(_id)
+        elif node.get('type') == 'json':
+            return self._adapter._load_data(_id)
+        else:
+            raise UnsupportedType
 
     # -----
     # Mock operations
@@ -185,8 +189,11 @@ def activate(self, search_id):
         data_map = {d['id']: d for d in data_list}
         self.activated_data.update({i: data_map[i] for i in ordered_data_id if data_map.get(i)})
         self.activated_group[_id] = _node
+
+        # After activate
         self._check_activated_data_rules_contains_request_data()
-    
+        self._adapter._after_activate()
+
     def _check_activated_data_rules_contains_request_data(self):
         self.is_activated_data_rules_contains_request_data = False
         for _data_id in self.activated_data:
@@ -218,7 +225,7 @@ def _collect_activate_node(self, node, level_lefted=1):
 
     def _collect_data_in_node(self, node):
         id_list = []
-        if node.get('type', '') == 'data':
+        if node.get('type') in self.supported_data_type:
             return [node['id']]
         elif node.get('type', '') == 'group':
             if 'children' in node:
@@ -267,20 +274,12 @@ def get_matched_data(self, flow):
 
     def _format_respose_data(self, flow):
         # TODO render mock data before response, support more functions
-        params = {
-            'config': config,
-            'ip': config.get('ip'),
-            'port': config.get('mock.port'),
-            'today': datetime.date.today(),
-            'now':  datetime.datetime.now()
-        }
-
+        origin_response_data = flow['response']['data']
         try:
-            flow_response_data = Template(flow['response']['data'])
-            flow['response']['data'] = flow_response_data.render(params)
+            flow['response']['data'] = utils.render(flow['response']['data'])
         except Exception:
-            url = flow['request']['url']
-            logger.warning(f'Format response data error! {url}') 
+            flow['response']['data'] = origin_response_data
+            logger.warning(f'Format response data error! {flow["request"]["url"]}') 
 
     def _is_match_rule(self, flow, rules):
         if not rules:
@@ -322,6 +321,17 @@ def _make_data(self, raw_data, **kwargs):
         data = dict(raw_data)
         _data_id = kwargs.get('data_id') or str(uuid.uuid4())
         data['id'] = _data_id
+
+        if data.get('type') == 'json':
+            self._make_data_json(raw_data, data)
+        elif data.get('type') == 'data':
+            self._make_data_http_data(raw_data, data)
+        else:
+            self._make_data_http_data(raw_data, data)
+
+        return data
+
+    def _make_data_http_data(self, raw_data, data):
         if 'request' in data:
             # TODO remove it with inspector frontend
             data['request'] = dict(raw_data['request'])
@@ -351,11 +361,21 @@ def _make_data(self, raw_data, **kwargs):
         data['name'] = _data_name
         data['rule'] = _data_rule
 
-        return data
+    def _make_data_json(self, raw_data, data):
+        if 'json' not in data:
+            data['json'] = {}
+
+        data['name'] = data['name'] if data.get('name') else 'Unnamed JSON'
 
     def add_data(self, parent_id, raw_data, **kwargs):
         if not isinstance(raw_data, dict):
-            raise DataObjectSouldBeADict
+            raise DataObjectShouldBeADict
+
+        if not raw_data.get('type'):
+            raw_data['type'] = 'data'
+
+        if raw_data['type'] not in self.supported_data_type:
+            raise UnsupportedType
 
         parent_node = None
         if parent_id == 'tmp_group':
@@ -364,8 +384,8 @@ def add_data(self, parent_id, raw_data, **kwargs):
             parent_node = self.id_map.get(parent_id)
             if not parent_node:
                 raise IDNotFound(parent_id)
-            if parent_node['type'] == 'data':
-                raise DataObjectCannotContainAnyOtherObject
+            if parent_node['type'] != 'group':
+                raise OnlyGroupCanContainAnyOtherObject
 
         data = self._make_data(raw_data)
         data['parent_id'] = parent_id
@@ -380,7 +400,7 @@ def add_data(self, parent_id, raw_data, **kwargs):
             data_node = {}
             data_node['id'] = _data_id
             data_node['name'] = _data_name
-            data_node['type'] = 'data'
+            data_node['type'] = data.get('type')
             data_node['parent_id'] = parent_id
 
             # New data added in the head of child list
@@ -410,7 +430,7 @@ def add_group(self, data):
         if not parent_node:
             raise IDNotFound(parent_id)
         if parent_node.get('type') == 'data':
-            raise DataObjectCannotContainAnyOtherObject
+            raise OnlyGroupCanContainAnyOtherObject
 
         # Add group
         group_id = str(uuid.uuid4())
@@ -557,6 +577,8 @@ def _copy_node(self, parent_node, node, **kwargs):
                 self._copy_node(new_node, child, **kwargs)
         elif new_node['type'] == 'data':
             self._copy_data(new_node, node, **kwargs)
+        elif new_node['type'] == 'json':
+            self._copy_data(new_node, node, **kwargs)
         return new_node['id']
 
     def _copy_data(self, new_data_node, data_node, **kwargs):
@@ -703,22 +725,35 @@ def update_group(self, _id, data, save=True):
         for key in self.unsave_keys:
             data.pop(key) if key in data else None
 
-        # Add new key into node
+        # Uneditable key
+        for key in self.update_group_ignore_keys:
+            data[key] = node.get(key)
+
+        # labels are ordered, sorted by label name
+        if 'label' not in data:
+            data['label'] = []
+        elif 'label' in data and isinstance(data['label'], list):
+            data['label'].sort(key=lambda x:x.get('name', '').lower())
+
+        if save:
+            message = self._adapter._update_group(data)
+
+        # Update node
+        # 1. Add new key into node
         update_data = {k: data[k] for k in data if k not in self.update_group_ignore_keys}
         node.update(update_data)
 
-        # Remove deleted key in node
+        # 2. Remove deleted key in node
         delete_keys = [k for k in node if k not in data and k not in self.update_group_ignore_keys]
         for key in delete_keys:
             node.pop(key)
 
-        # labels are ordered, sorted by label name
-        if 'label' not in node:
-            node['label'] = []
-        elif 'label' in node and isinstance(node['label'], list):
-            node['label'].sort(key=lambda x:x.get('name', '').lower())
-        if save:
-            self._adapter._update_group(node)
+        # 3. Update existed value
+        for key, value in data.items():
+            if key in node:
+                node[key] = value
+
+        return message
 
     def update_data(self, _id, data):
         node = self.id_map.get(_id)
@@ -817,7 +852,8 @@ def _get_snapshot_path(self):
     def _get_type_hashmap(self, ids):
         type_map = {
             'group': [],
-            'data': []
+            'data': [],
+            'json': []
         }
         for id_ in ids:
             node = self.id_map.get(id_)
@@ -858,8 +894,8 @@ def delete_by_query(self, query):
             })
 
             type_map = self._get_type_hashmap(id_list)
-            node_delete_group_ids = type_map['group'] + type_map['data']
-            node_delete_data_ids = type_map['data']
+            node_delete_group_ids = type_map['group'] + type_map['data'] + type_map['json']
+            node_delete_data_ids = type_map['data'] + type_map['json']
 
             for id_ in id_list:
                 # Delete from parent
@@ -913,7 +949,11 @@ class DataNotFound(Exception):
     pass
 
 
-class DataObjectCannotContainAnyOtherObject(Exception):
+class OnlyGroupCanContainAnyOtherObject(Exception):
+    pass
+
+
+class UnsupportedType(Exception):
     pass
 
 
@@ -921,7 +961,7 @@ class SuperIdCannotBeNodeItself(Exception):
     pass
 
 
-class DataObjectSouldBeADict(Exception):
+class DataObjectShouldBeADict(Exception):
     pass
 
 
diff --git a/lyrebird/mock/dm/file_data_adapter.py b/lyrebird/mock/dm/file_data_adapter.py
index da38bfb9d..2f2c2cd87 100644
--- a/lyrebird/mock/dm/file_data_adapter.py
+++ b/lyrebird/mock/dm/file_data_adapter.py
@@ -49,6 +49,9 @@ def _init_id_map(self, node):
             for child in node['children']:
                 self._init_id_map(child)
 
+    def _get_group(self, id_):
+        return self.context.id_map.get(id_)
+
     def _add_group(self, data, **kwargs):
         self._save_prop()
 
@@ -161,6 +164,9 @@ def _get_data_rule(self, request):
     def _get_activate_group(self, search_id):
         return self.context.id_map.get(search_id)
 
+    def _after_activate(self):
+        pass
+
     # duplicate
     def duplicate(self, _id):
         self.context.copy(_id)
diff --git a/lyrebird/mock/qrcode.py b/lyrebird/mock/qrcode.py
index fc26673b3..07c968bb8 100644
--- a/lyrebird/mock/qrcode.py
+++ b/lyrebird/mock/qrcode.py
@@ -1,20 +1,10 @@
 import io
 import qrcode
 import binascii
-from jinja2 import Template
-from lyrebird.application import config
-
-def _format_parameters(link):
-    params = {
-        'ip': config.get('ip'),
-        'port': config.get('mock.port')
-    }
-    link_template = Template(link)
-    formated_link = link_template.render(params)
-    return formated_link
+from lyrebird import utils
 
 def get_qrcode_img(link):
-    formated_link = _format_parameters(link)
+    formated_link = utils.render(link)
 
     img = qrcode.make(formated_link, border=1)
     img_buffer = io.BytesIO()
diff --git a/lyrebird/project_builder/lyrebird_plugin_demo/README.md b/lyrebird/project_builder/lyrebird_plugin_demo/README.md
index ca881bd3b..5e2bde970 100644
--- a/lyrebird/project_builder/lyrebird_plugin_demo/README.md
+++ b/lyrebird/project_builder/lyrebird_plugin_demo/README.md
@@ -8,7 +8,7 @@
 
 * macOS
 
-* Python3.6及以上
+* Python3.7及以上
 
 
 ## 安装
diff --git a/lyrebird/project_builder/lyrebird_plugin_demo/setup.py b/lyrebird/project_builder/lyrebird_plugin_demo/setup.py
index 40c69a8b1..aae6cdf64 100644
--- a/lyrebird/project_builder/lyrebird_plugin_demo/setup.py
+++ b/lyrebird/project_builder/lyrebird_plugin_demo/setup.py
@@ -23,7 +23,6 @@
     include_package_data=True,
     classifiers=[
         "Programming Language :: Python :: 3 :: Only",
-        "Programming Language :: Python :: 3.6",
         "Programming Language :: Python :: 3.7",
         "Programming Language :: Python :: 3.8",
         "Programming Language :: Python :: 3.9",
diff --git a/lyrebird/utils.py b/lyrebird/utils.py
index 03d23fb35..525ea1048 100644
--- a/lyrebird/utils.py
+++ b/lyrebird/utils.py
@@ -7,9 +7,12 @@
 import requests
 import datetime
 import netifaces
+import traceback
 from pathlib import Path
+from jinja2 import Template
 from contextlib import closing
 from lyrebird.log import get_logger
+from lyrebird.application import config
 
 logger = get_logger()
 
@@ -130,6 +133,26 @@ def download(link, input_path):
             f.write(chunck)
 
 
+def render(data):
+    if not isinstance(data, str):
+        logger.warning(f'Format error! Expected str, found {type(data)}') 
+        return
+
+    params = {
+        'config': config,
+        'ip': config.get('ip'),
+        'port': config.get('mock.port'),
+        'today': datetime.date.today(),
+        'now':  datetime.datetime.now()
+    }
+
+    try:
+        template_data = Template(data)
+        return template_data.render(params)
+    except Exception:
+        logger.error(f'Format error!\n {traceback.format_exc()}')
+
+
 class CaseInsensitiveDict(dict):
     '''
     A dict data-structure that ignore key's case.
diff --git a/lyrebird/version.py b/lyrebird/version.py
index d5ecc063f..c1a057e35 100644
--- a/lyrebird/version.py
+++ b/lyrebird/version.py
@@ -1,3 +1,3 @@
-IVERSION = (2, 7, 1)
+IVERSION = (2, 8, 0)
 VERSION = ".".join(str(i) for i in IVERSION)
 LYREBIRD = "Lyrebird " + VERSION
diff --git a/tests/test_conf_api.py b/tests/test_conf_api.py
index 182301e88..ef9153a19 100644
--- a/tests/test_conf_api.py
+++ b/tests/test_conf_api.py
@@ -1,9 +1,6 @@
 from lyrebird.config import ConfigManager
-from lyrebird import application, reporter
-from lyrebird.event import EventServer
-from lyrebird.task import BackgroundTaskServer
+from lyrebird import application
 from lyrebird.mock.mock_server import LyrebirdMockServer
-from lyrebird.mock.handlers.encoder_decoder_handler import EncoderDecoder
 
 import pytest
 import copy
@@ -27,10 +24,6 @@
 def client():
     application._cm = ConfigManager()
     application._cm.config = copy.deepcopy(conf)
-    application.server['event'] = EventServer()
-    application.reporter = reporter.Reporter()
-    application.server['task'] = BackgroundTaskServer()
-    application.encoders_decoders = EncoderDecoder()
     server = LyrebirdMockServer()
     client = server.app.test_client()
     yield client
diff --git a/tests/test_dm.py b/tests/test_dm.py
index af16fd356..58f2a012b 100644
--- a/tests/test_dm.py
+++ b/tests/test_dm.py
@@ -9,6 +9,7 @@
 from urllib.parse import urlparse
 from lyrebird.mock import dm
 from lyrebird.mock.dm.file_data_adapter import data_adapter
+from lyrebird.mock.handlers.encoder_decoder_handler import EncoderDecoder
 from lyrebird import application
 
 dataA = {
@@ -334,6 +335,7 @@ def data_manager(root, tmpdir):
     }
     application._cm = MockConfigManager(config=_conf)
     lyrebird.mock.context.application.socket_io = FakeSocketio()
+    application.encoders_decoders = EncoderDecoder()
     _dm = dm.DataManager()
     _dm.snapshot_workspace = tmpdir
     _dm.set_adapter(data_adapter)
@@ -629,6 +631,41 @@ def test_add_group_by_path(data_manager):
             break
     assert found_new_group
 
+
+def test_add_data_no_type(data_manager):
+    custom_name = 'CUSTOM_NAME'
+    custom_rule = {
+        'CUSTOM_KEY': 'CUSTOM_VALUE'
+    }
+    data = {
+        'name': custom_name,
+        'rule': custom_rule,
+        'request': {
+            'url': 'http://hostname.com/pathA/pathB?param=1'
+        },
+        'response': {}
+    }
+
+    new_data_id = data_manager.add_data('groupC-UUID', data)
+    _new_data_node = data_manager.id_map.get(new_data_id)
+    assert custom_name == _new_data_node['name']
+    _new_data = data_manager.get(new_data_id)
+    assert custom_name == _new_data['name']
+
+    assert custom_rule == _new_data['rule']
+
+    assert data['request'] == _new_data['request']
+    group_c = data_manager.id_map.get('groupC-UUID')
+    found_new_data = False
+    for child in group_c['children']:
+        if child['id'] == new_data_id:
+            found_new_data = True
+            break
+    assert found_new_data
+    new_data_file = data_manager.root_path / new_data_id
+    assert new_data_file.exists()
+
+
 def test_add_data_request_with_name_rule(data_manager):
     custom_name = 'CUSTOM_NAME'
     custom_rule = {
@@ -636,6 +673,7 @@ def test_add_data_request_with_name_rule(data_manager):
     }
     data = {
         'name': custom_name,
+        'type': 'data',
         'rule': custom_rule,
         'request': {
             'url': 'http://hostname.com/pathA/pathB?param=1'
@@ -665,6 +703,7 @@ def test_add_data_request_with_name_rule(data_manager):
 
 def test_add_data_request_url_params(data_manager):
     data = {
+        'type': 'data',
         'request': {
             'url': f'http://hostname.com/pathA/pathB?param=1'
         },
@@ -695,6 +734,7 @@ def test_add_data_request_url_params(data_manager):
 
 def test_add_data_request_url_no_params(data_manager):
     data = {
+        'type': 'data',
         'request': {
             'url': f'http://hostname.com/pathA/pathB'
         },
@@ -714,6 +754,7 @@ def test_add_data_request_url_no_params(data_manager):
 
 def test_add_data_request_url_no_path(data_manager):
     data = {
+        'type': 'data',
         'request': {
             'url': f'http://hostname.com'
         },
@@ -734,6 +775,7 @@ def test_add_data_request_url_no_path(data_manager):
 def test_add_data_request_url_illegal(data_manager):
     url_illegal = 'EXAMPLE'
     data = {
+        'type': 'data',
         'request': {
             'url': url_illegal
         },
@@ -751,7 +793,30 @@ def test_add_data_request_url_illegal(data_manager):
 
 def test_add_data_no_request(data_manager):
     data = {
-        'name': 'add_data_name'
+        'name': 'add_data_name',
+        'type': 'data'
+    }
+    new_data_id = data_manager.add_data('groupC-UUID', data)
+    _new_data_node = data_manager.id_map.get(new_data_id)
+    assert data['name'] == _new_data_node['name']
+    _new_data = data_manager.get(new_data_id)
+    assert data['name'] == _new_data['name']
+    group_c = data_manager.id_map.get('groupC-UUID')
+    found_new_data = False
+    for child in group_c['children']:
+        if child['id'] == new_data_id:
+            found_new_data = True
+            break
+    assert found_new_data
+    new_data_file = data_manager.root_path / new_data_id
+    assert new_data_file.exists()
+
+
+def test_add_json(data_manager):
+    data = {
+        'name': 'add_json_name',
+        'type': 'json',
+        'json': {"a" : 1}
     }
     new_data_id = data_manager.add_data('groupC-UUID', data)
     _new_data_node = data_manager.id_map.get(new_data_id)