From 10b467096ef683c6a8a72e95ed20f96c3d8d809d Mon Sep 17 00:00:00 2001
From: yumiguan <41277086+yumiguan@users.noreply.github.com>
Date: Mon, 4 Dec 2023 17:07:59 +0800
Subject: [PATCH] v2.23.0 - feature/inspector-temp-mock (#805)

* Inspector support temprory mock; DataManager support custom tab

* remove inspector save button hover
---
 frontend/src/api/datamanager.js               |  17 +-
 frontend/src/components/DocumentTree.vue      |  13 +-
 frontend/src/components/DocumentTreeNode.vue  |  16 +-
 frontend/src/store/datamanager.js             |  67 ++++-
 frontend/src/views/Main.vue                   |   5 +
 frontend/src/views/datamanager/DataDetail.vue |   9 +-
 .../views/datamanager/DataDetailFolder.vue    | 139 +++++++--
 .../views/datamanager/DataDetailHttpData.vue  |  50 +++-
 .../src/views/datamanager/DataDetailInfo.vue  |  18 +-
 .../datamanager/DataDetailPlainConfig.vue     |  32 +-
 .../views/datamanager/DataDetailPlainJSON.vue |  32 +-
 frontend/src/views/datamanager/DataList.vue   | 255 +---------------
 .../views/datamanager/DataListButtonBar.vue   | 279 +++++++++++++++++
 .../src/views/datamanager/JsonPathBar.vue     |  43 ---
 frontend/src/views/inspector/ButtonBar.vue    |  54 +---
 frontend/src/views/inspector/FlowDetail.vue   | 177 +++++++----
 .../src/views/inspector/TempMockDrawer.vue    |  80 +++++
 frontend/src/views/inspector/TempMockTree.vue | 129 ++++++++
 lyrebird/mock/blueprints/apis/mock.py         |  38 ++-
 lyrebird/mock/cache.py                        |   6 +
 lyrebird/mock/dm/__init__.py                  |  89 +++---
 lyrebird/mock/dm/file_data_adapter.py         |   2 +-
 lyrebird/mock/dm/temp_mock.py                 | 166 +++++++++++
 lyrebird/mock/handlers/mock_handler.py        |  16 +-
 lyrebird/utils.py                             |  16 +
 lyrebird/version.py                           |   2 +-
 tests/test_dm.py                              |  88 ++++++
 tests/test_dm_api.py                          |  64 ++++
 tests/test_dm_temp.py                         | 280 ++++++++++++++++++
 29 files changed, 1661 insertions(+), 521 deletions(-)
 create mode 100644 frontend/src/views/datamanager/DataListButtonBar.vue
 delete mode 100644 frontend/src/views/datamanager/JsonPathBar.vue
 create mode 100644 frontend/src/views/inspector/TempMockDrawer.vue
 create mode 100644 frontend/src/views/inspector/TempMockTree.vue
 create mode 100644 lyrebird/mock/dm/temp_mock.py
 create mode 100644 tests/test_dm_temp.py

diff --git a/frontend/src/api/datamanager.js b/frontend/src/api/datamanager.js
index 107c5b6ed..9bef9bc5a 100644
--- a/frontend/src/api/datamanager.js
+++ b/frontend/src/api/datamanager.js
@@ -49,6 +49,18 @@ export const updateGroup = (id, data) => {
   })
 }
 
+export const updateByQuery = (ids, data, tab) => {
+  const query = {
+    id: ids,
+    tab
+  }
+  return axios({
+    url: '/api/group',
+    method: 'PUT',
+    data: { query, data }
+  })
+}
+
 export const getDataDetail = (dataId) => {
   return axios({
     url: '/api/data/' + dataId
@@ -164,9 +176,10 @@ export const getSnapShotDetail = (id) => {
   })
 }
 
-export const deleteByQuery = (ids) => {
+export const deleteByQuery = (ids, parentId) => {
   const query = {
-    id: ids
+    id: ids,
+    'parent_id': parentId
   }
   return axios({
     url: '/api/group',
diff --git a/frontend/src/components/DocumentTree.vue b/frontend/src/components/DocumentTree.vue
index bfdefa32d..c88100fac 100644
--- a/frontend/src/components/DocumentTree.vue
+++ b/frontend/src/components/DocumentTree.vue
@@ -23,7 +23,7 @@
           :options="{threshold: 0.5}"
           transition="fade-transition"
         >
-          <DocumentTreeNode :data="item" :selected="selected"/>
+          <DocumentTreeNode :data="item" :selected="selected" :editable="editable" :deletable="deletable"/>
         </v-lazy>
       </template>
     </v-treeview>
@@ -37,7 +37,16 @@ export default {
   components: {
     DocumentTreeNode
   },
-  props: ['treeData', 'searchStr'],
+  props: {
+    'treeData': Array,
+    'searchStr': String,
+    'editable': {
+      default: true
+    },
+    'deletable': {
+      default: true
+    }
+  },
   data() {
     return {
       searchRefreshDataListTimer: null,
diff --git a/frontend/src/components/DocumentTreeNode.vue b/frontend/src/components/DocumentTreeNode.vue
index e02cf2b9d..31181d83f 100644
--- a/frontend/src/components/DocumentTreeNode.vue
+++ b/frontend/src/components/DocumentTreeNode.vue
@@ -60,7 +60,7 @@
           icon
           @click="changeMenuStatus"
           class="mr-1"
-          v-show="data.type !== 'config'"
+          v-show="isNodeEditable"
         >
           <v-icon
             size="12px" 
@@ -79,7 +79,7 @@
 import { getGroupChildren } from '@/api'
 
 export default {
-  props: ['data', 'selected'],
+  props: ['data', 'selected', 'editable', 'deletable'],
   data () {
     return {
       isMouseOver: false,
@@ -136,7 +136,10 @@ export default {
       return this.$store.state.dataManager.focusNodeInfo && this.data.id === this.$store.state.dataManager.focusNodeInfo.id
     },
     isNodeDeletable () {
-      return this.$store.state.dataManager.treeUndeletableId.indexOf(this.data.id) === -1
+      return this.deletable && this.$store.state.dataManager.treeUndeletableId.indexOf(this.data.id) === -1
+    },
+    isNodeEditable () {
+      return this.editable && this.data.type !== 'config'
     },
     isNodeOpen () {
       return this.$store.state.dataManager.groupListOpenNode.indexOf(this.data.id) > -1
@@ -201,6 +204,9 @@ export default {
         })
     },
     onTreeNodeClick () {
+      if (!this.editable) {
+        return
+      }
       this.$store.commit('setFocusNodeInfo', this.data)
       if (this.data.type === 'group') {
         this.$store.dispatch('loadGroupDetail', this.data)
@@ -279,10 +285,6 @@ export default {
 }
 .toggle-icon-status {
   transform:rotate(-90deg);
-  /* animation-name: loading-icon-rotate;
-  animation-duration: 800ms;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite; */
 }
 .loading-icon {
   animation-name: loading-icon-rotate;
diff --git a/frontend/src/store/datamanager.js b/frontend/src/store/datamanager.js
index 99ea4309b..457ea40df 100644
--- a/frontend/src/store/datamanager.js
+++ b/frontend/src/store/datamanager.js
@@ -5,9 +5,8 @@ import { bus } from '@/eventbus'
 export default {
   state: {
     title: 'Mock Data',
-    searchStr: '',
+    treeSearchStr: '',
     groupList: [],
-    jsonPath: null,
     conflictInfo: null,
     isLoadConflictInfo: false,
     groupListOpenNode: [],
@@ -41,21 +40,20 @@ export default {
     uneditableKey: ['id', 'rule', 'super_by'],
     stickyTopKey: ['id', 'rule', 'super_id', 'name', 'label', 'super_by'],
     displayCopyKey: ['id'],
-    treeUndeletableId: []
+    treeUndeletableId: [],
+    temporaryMockDataList: [],
+    tempGroupId: 'tmp_group',
   },
   mutations: {
     setTitle (state, title) {
       state.title = title
     },
-    setSearchStr (state, searchStr) {
-      state.searchStr = searchStr
+    setTreeSearchStr (state, treeSearchStr) {
+      state.treeSearchStr = treeSearchStr
     },
     setGroupList (state, groupList) {
       state.groupList = groupList
     },
-    setJsonPath (state, jsonPath) {
-      state.jsonPath = jsonPath
-    },
     setConflictInfo (state, conflictInfo) {
       state.conflictInfo = conflictInfo
     },
@@ -189,7 +187,10 @@ export default {
     },
     concatTreeUndeletableId (state, treeUndeletableId) {
       state.treeUndeletableId = state.treeUndeletableId.concat(treeUndeletableId)
-    }
+    },
+    setTemporaryMockDataList (state, val) {
+      state.temporaryMockDataList = val
+    },
   },
   actions: {
     loadDataMap ({ state, commit }) {
@@ -295,7 +296,7 @@ export default {
           }
           dispatch('loadGroupDetail', payload)
           bus.$emit('msg.destroy')
-          if (response.data.message) {
+          if (response.data.message && response.data.message.length > 0) {
             bus.$emit('msg.info', response.data.message)
           } else {
             bus.$emit('msg.success', 'Group ' + payload.name + ' update!')
@@ -305,6 +306,22 @@ export default {
           bus.$emit('msg.error', 'Group ' + payload.name + ' update error: ' + error.data.message)
         })
     },
+    sendGroupDetail ({ state }, payload) {
+      bus.$emit('msg.loading', `Sending ${payload.tab} ...`)
+      let ids = state.isSelectableStatus ? state.selectedLeaf : [state.groupDetail.id]
+      api.updateByQuery(ids, state.groupDetail, payload.tab)
+        .then(response => {
+          bus.$emit('msg.destroy')
+          if (response.data.message && response.data.message.length > 0) {
+            bus.$emit('msg.info', response.data.message)
+          } else {
+            bus.$emit('msg.success', `Group ${payload.tab} send success!`)
+          }
+        })
+        .catch(error => {
+          bus.$emit('msg.error', `Group ${payload.tab} send error: ${error.data.message}`)
+        })
+    },
     deleteGroup ({ state, commit, dispatch }, payload) {
       bus.$emit('msg.loading', 'Deleting group ' + payload.name + ' ...')
       api.deleteGroup(payload.id)
@@ -467,6 +484,36 @@ export default {
         .catch(error => {
           bus.$emit('msg.error', 'Delete error: ' + error.data.message)
         })
+    },
+    // Temp mock
+    loadTempMockData ({ state, commit }) {
+      api.getGroupDetail(state.tempGroupId)
+        .then(response => {
+          commit('setTemporaryMockDataList', [response.data.data])
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Load Temporary mock data error: ' + error.data.message)
+        })
+    },
+    createTempMockData ({ state, dispatch }, payload ) {
+      api.createData(state.tempGroupId, payload)
+        .then(_ => {
+          dispatch('loadTempMockData')
+          bus.$emit('msg.success', 'Save temporary mock data success!')
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Save temporary mock error: ' + error.data.message)
+        })
+    },
+    deleteTempMockData ({ state, dispatch }, payload) {
+      api.deleteByQuery([payload.id], state.tempGroupId)
+        .then(_ => {
+          dispatch('loadTempMockData')
+          bus.$emit('msg.success', `Delete temporary mock data ${payload.name} success!`)
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Delete temporary mock data error: ' + error.data.message)
+        })
     }
   }
 }
diff --git a/frontend/src/views/Main.vue b/frontend/src/views/Main.vue
index d564cde81..c869604ee 100644
--- a/frontend/src/views/Main.vue
+++ b/frontend/src/views/Main.vue
@@ -270,6 +270,11 @@ export default {
 .side-navgation {
   z-index: 4;
 }
+.ivu-split-trigger-con {
+  /* vuetify drawer z-index is 4 */
+  /* iview drawer z-index is 4 */
+  z-index: 3; 
+}
 .ivu-split-pane {
   overflow: hidden;
 }
diff --git a/frontend/src/views/datamanager/DataDetail.vue b/frontend/src/views/datamanager/DataDetail.vue
index 6807b1a32..744dfc88c 100644
--- a/frontend/src/views/datamanager/DataDetail.vue
+++ b/frontend/src/views/datamanager/DataDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <Row class="button-bar">
-      <Col span="15" class="button-bar-line">
+      <Col class="button-bar-line">
         <span v-for="(value, index) in nodeParents" :key="value.id">
           <v-icon v-if="!value.parent_id" small color="accent" @click="showNode(value)">mdi-home</v-icon>
           <a v-else @click="showNode(value)">{{value.name}}</a>
@@ -10,9 +10,6 @@
           </v-icon>
         </span>
       </Col>
-      <Col span="8" offset="1" align="right" class="button-bar-line">
-        <JsonPathBar/>
-      </Col>
     </Row>
     <component v-if="nodeInfo.type" :is="getComponentByType(nodeInfo)" />
     <div v-else class="data-detail-empty">No selected data</div>
@@ -24,7 +21,6 @@ import DataDetailHttpData from '@/views/datamanager/DataDetailHttpData.vue'
 import DataDetailPlainJSON from '@/views/datamanager/DataDetailPlainJSON.vue'
 import DataDetailPlainConfig from '@/views/datamanager/DataDetailPlainConfig.vue'
 import DataDetailFolder from '@/views/datamanager/DataDetailFolder.vue'
-import JsonPathBar from '@/views/datamanager/JsonPathBar.vue'
 import { getGroupDetail } from '@/api'
 
 export default {
@@ -32,8 +28,7 @@ export default {
     DataDetailPlainConfig,
     DataDetailPlainJSON,
     DataDetailHttpData,
-    DataDetailFolder,
-    JsonPathBar
+    DataDetailFolder
   },
   computed: {
     groupDetail () {
diff --git a/frontend/src/views/datamanager/DataDetailFolder.vue b/frontend/src/views/datamanager/DataDetailFolder.vue
index cbd500c58..15e641a5d 100644
--- a/frontend/src/views/datamanager/DataDetailFolder.vue
+++ b/frontend/src/views/datamanager/DataDetailFolder.vue
@@ -1,19 +1,31 @@
 <template>
   <div class="small-tab">
-    <tabs v-model="currentTab" :animated="false" size="small">
-      <tab-pane label="Information" name="information">
+    <v-tabs
+      v-model="currentTab"
+      center-active
+      active-class="flow-detail-active-tab"
+      background-color="shading"
+      color="accent"
+      height="29"
+      show-arrows="never"
+      slider-color="primary"
+    >
+      <v-tab append class="flow-detail-tab" v-for="(tab, index) in tabItems" :href="'#'+tab.id" :key="index">
+        {{ tab.label }}
+      </v-tab>
+
+      <v-tab-item value="info">
         <div class="data-detail">
           <div class="data-detail-content">
-            <div v-for="(value, key) in groupInfoStickyTop" :key="key">
+            <div v-for="key in groupInfoStickyTop" :key="key">
               <DataDetailInfo
                 :infoKey="key"
                 :editable="!uneditableKey.includes(key)"
                 :deletable="!undeletableKey.includes(key)"
               />
             </div>
-            <div v-for="(value, key) in groupInfoNormal" :key="key">
+            <div v-for="key in groupInfoNormal" :key="key">
               <DataDetailInfo
-                :infoValue="value"
                 :infoKey="key"
                 :editable="!uneditableKey.includes(key)"
                 :deletable="!undeletableKey.includes(key)"
@@ -34,13 +46,14 @@
             </Row>
           </div>
         </div>
-      </tab-pane>
-      <tab-pane label="Conflict" name="conflict">
+      </v-tab-item>
+
+      <v-tab-item value="conflict">
         <div class="data-detail">
           <Row type="flex" justify="end" style="padding-top:10px">
             <Col span="18" style="padding:0px 5px 0px 10px">
               <p v-if="conflictInfo">
-                <Icon type="md-information-circle" />Group
+                Group
                 <b>{{conflictCheckNode.name}}</b>
                 has {{conflictInfo.length}} conflicts
               </p>
@@ -62,11 +75,25 @@
           </Row>
           <DataDetailConflict :information="conflictInfo" />
         </div>
-      </tab-pane>
-    </tabs>
+      </v-tab-item>
 
-    <div class="save-btn" v-if="groupInfo">
-      <v-tooltip top>
+      <v-tab-item v-for="(tab, index) in customTabInfo" :value="tab.id" :key="index">
+        <div class="data-detail">
+          <div class="data-detail-content">
+            <div v-for="(value, key) in tab.content" :key="key">
+              <DataDetailInfo
+                :infoKey="key"
+                :editable="!uneditableKey.includes(key)"
+                :deletable="!undeletableKey.includes(key)"
+              />
+            </div>
+          </div>
+        </div>
+      </v-tab-item>
+    </v-tabs>
+
+    <div class="save-btn" v-show="groupInfo">
+      <v-tooltip top v-if="currentTab === 'info'">
         <template v-slot:activator="{ on, attrs }">
           <v-btn
             v-bind="attrs"
@@ -86,6 +113,27 @@
         </template>
         <span>Save (⌘+s)</span>
       </v-tooltip>
+
+      <v-tooltip top v-else-if="currentTab !== 'conflict'">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn
+            v-bind="attrs"
+            v-on="on"
+            fab
+            dark
+            color="primary"
+            class="save-btn-detail"
+            @click="sendCustomTagInfo"
+          >
+            <v-icon
+            class="save-btn-icon"
+            dark>
+              mdi-send
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>Send</span>
+      </v-tooltip>
     </div>
   </div>
 </template>
@@ -93,13 +141,11 @@
 <script>
 import DataDetailConflict from '@/views/datamanager/DataDetailConflict.vue'
 import DataDetailInfo from "@/views/datamanager/DataDetailInfo.vue"
-import Icon from 'vue-svg-icon/Icon.vue'
 
 export default {
   components: {
     DataDetailConflict,
     DataDetailInfo,
-    Icon
   },
   data () {
     return {
@@ -128,25 +174,61 @@ export default {
     groupInfo () {
       return this.$store.state.dataManager.groupDetail
     },
+    tabItems () {
+      let tabs = [
+        {id: 'info', label: 'Information'},
+        {id: 'conflict', label: 'Conflict'}
+      ]
+      for (const customTab of this.customTabInfo) {
+        tabs.push({
+          id: customTab.id,
+          label: customTab.id
+        })
+      }
+      return tabs
+    },
+    customTabInfo () {
+      let info = {}
+      for (const key in this.groupInfo) {
+        const value = this.groupInfo[key]
+        if (typeof(value) === 'object' && value.hasOwnProperty('tab')) {
+          if (!info.hasOwnProperty(value.tab)) {
+            info[value.tab] = {}
+          }
+          info[value.tab][key] = value
+        }
+      }
+      let arr = []
+      for (const key in info) {
+        arr.push({
+          id: key,
+          content: info[key]
+        })
+      }
+      return arr
+    },
     groupInfoStickyTop () {
-      const groupInfo = this.$store.state.dataManager.groupDetail
-      let stickyTopInfo = {}
-      for (const key in groupInfo) {
-        if (this.stickyTopKey.includes(key)) {
-          stickyTopInfo[key] = groupInfo[key]
+      let keys = []
+      for (const key of this.stickyTopKey) {
+        if (this.groupInfo.hasOwnProperty(key)) {
+          keys.push(key)
         }
       }
-      return stickyTopInfo
+      return keys
     },
     groupInfoNormal () {
-      const groupInfo = this.$store.state.dataManager.groupDetail
-      let notStickyTopInfo = {}
-      for (const key in groupInfo) {
-        if (!this.stickyTopKey.includes(key) && !this.undisplayedKey.includes(key) && key.substring(0, 1) !== '_') {
-          notStickyTopInfo[key] = groupInfo[key]
+      let keys = []
+      for (const key in this.groupInfo) {
+        if (
+          !this.stickyTopKey.includes(key) && 
+          !this.undisplayedKey.includes(key) && 
+          key.substring(0, 1) !== '_' &&
+          !this.groupInfo[key].hasOwnProperty('tab')
+        ) {
+          keys.push(key)
         }
       }
-      return notStickyTopInfo
+      return keys
     },
     conflictInfo () {
       return this.$store.state.dataManager.conflictInfo
@@ -186,6 +268,11 @@ export default {
         this.$store.dispatch('saveGroupDetail', this.groupInfo)
       }
     },
+    sendCustomTagInfo () {
+      this.$store.dispatch('sendGroupDetail', {
+        tab: this.currentTab
+      })
+    },
     getConflictInfo () {
       this.conflictCheckNode = this.nodeInfo
       this.$store.commit('setIsLoadConflictInfo', true)
diff --git a/frontend/src/views/datamanager/DataDetailHttpData.vue b/frontend/src/views/datamanager/DataDetailHttpData.vue
index 16d66ecd2..8e9324d88 100644
--- a/frontend/src/views/datamanager/DataDetailHttpData.vue
+++ b/frontend/src/views/datamanager/DataDetailHttpData.vue
@@ -1,12 +1,31 @@
 <template>
-  <div class="small-tab">
-    <tabs v-model="currentTab" @on-click="onTabClick" :animated="false" size="small">
-      <tab-pane label="Information" name="info" />
-      <tab-pane label="Request" name="req" />
-      <tab-pane label="RequestData" name="reqData" />
-      <tab-pane label="Response" name="resp" />
-      <tab-pane label="ResponseData" name="respData" />
-    </tabs>
+  <div>
+
+    <v-container class="pa-0 data-list-button-bar">
+      <v-row no-gutters >
+        <v-tabs
+          v-model="currentTab"
+          center-active
+          active-class="flow-detail-active-tab"
+          background-color="shading"
+          color="accent"
+          height="29"
+          show-arrows="never"
+          slider-color="primary"
+        >
+
+          <v-tab append href="#info" class="flow-detail-tab">Information</v-tab>
+          <v-tab append href="#req" class="flow-detail-tab">Request</v-tab>
+          <v-tab append href="#reqData" class="flow-detail-tab">RequestBody</v-tab>
+          <v-tab append href="#resp" class="flow-detail-tab">Response</v-tab>
+          <v-tab append href="#respData" class="flow-detail-tab">ResponseData</v-tab>
+          <v-spacer />
+
+          <JsonpathInfo :jsonpath="jsonPath" />
+        </v-tabs>
+      </v-row>
+    </v-container>
+
     <div>
       <CodeEditor
         v-if="!isShowCodeDiffEditor"
@@ -21,6 +40,7 @@
         :content="editorContent"
         :diffContent="editorDiffContent" />
     </div>
+
     <div
       class="show-diff-btn"
       v-if="this.currentTab==='respData' && !this.isEditorContentEquals"
@@ -44,6 +64,7 @@
         <span v-else>Hide the diff</span>
       </v-tooltip>
     </div>
+
     <div class="save-btn" v-if="dataDetail">
       <v-tooltip top>
         <template v-slot:activator="{ on, attrs }">
@@ -67,14 +88,15 @@
         <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'
 import CodeDiffEditor from '@/components/CodeDiffEditor.vue'
+import JsonpathInfo from '@/views/inspector/JsonpathInfo.vue'
 import { render } from '@/api'
 
 export default {
@@ -82,7 +104,7 @@ export default {
     DataDetailInfo,
     CodeEditor,
     CodeDiffEditor,
-    'svg-icon': Icon
+    JsonpathInfo
   },
   data () {
     return {
@@ -96,7 +118,8 @@ export default {
       diffButtonStatus: 'show',
       isEditorContentEquals: true,
       isTreeNodeClicked: false,
-      renderedRespData: ''
+      renderedRespData: '',
+      jsonPath: null,
     }
   },
   mounted () {
@@ -197,7 +220,7 @@ export default {
       this.$store.dispatch('saveDataDetail', newData)
     },
     onJsonPathChange (payload) {
-      this.$store.commit('setJsonPath', payload.jsonPath)
+      this.jsonPath = payload.jsonPath
     },
     onKeyDown (event) {
       if (event.code !== "KeyS" || !event.metaKey) {
@@ -281,9 +304,6 @@ export default {
 </script>
 
 <style scoped>
-.small-tab > .ivu-tabs > .ivu-tabs-bar {
-  margin-bottom: 0;
-}
 .show-diff-btn {
   color: #fff;
   font-size: 0.6rem;
diff --git a/frontend/src/views/datamanager/DataDetailInfo.vue b/frontend/src/views/datamanager/DataDetailInfo.vue
index 4b52c6de4..af1065ad2 100644
--- a/frontend/src/views/datamanager/DataDetailInfo.vue
+++ b/frontend/src/views/datamanager/DataDetailInfo.vue
@@ -42,6 +42,11 @@
             <Option v-for="item in infoValue.allItem" :value="item.value" :key="item.value">{{ item.value }}</Option>
           </Select>
         </span>
+        <span v-else-if="inputValueType === 'select'">
+          <Select v-model="infoValue.value" size="small">
+            <Option v-for="item in infoValue.items" :value="item.value" :key="item.value" class="data-detail-info-select-option">{{ item.label }}</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">
@@ -85,7 +90,14 @@
 
             <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-btn
+                  plain
+                  icon
+                  small
+                  v-show="infoValue.info"
+                  v-bind="attrs"
+                  v-on="on"
+                >
                   <v-icon small size="18px" color="content">mdi-information-outline</v-icon>
                 </v-btn>
               </template>
@@ -202,7 +214,7 @@ export default {
       }
     },
     infoValue () {
-      return this.$store.state.dataManager.groupDetail[this.infoKey]
+      const value = this.$store.state.dataManager.groupDetail[this.infoKey]
     },
     longListValue () {
       if (this.isLongListShowAll) {
@@ -231,6 +243,8 @@ export default {
         return 'category'
       } else if (this.infoKey === 'super_by') {
         return 'longList'
+      } else if (this.infoValue && this.infoValue.hasOwnProperty('items') && this.infoValue.hasOwnProperty('value')) {
+        return 'select'
       } else if (this.infoValue && this.infoValue.hasOwnProperty('value') && this.infoValue.hasOwnProperty('info') ) {
         return 'stringObject'
       } else if (this.infoValue && this.infoValue.hasOwnProperty('link') && this.infoValue.hasOwnProperty('value') ) {
diff --git a/frontend/src/views/datamanager/DataDetailPlainConfig.vue b/frontend/src/views/datamanager/DataDetailPlainConfig.vue
index 1411f707b..34eb1d413 100644
--- a/frontend/src/views/datamanager/DataDetailPlainConfig.vue
+++ b/frontend/src/views/datamanager/DataDetailPlainConfig.vue
@@ -1,9 +1,28 @@
 <template>
   <div class="small-tab">
-    <tabs v-model="currentTab" :animated="false" size="small">
-      <tab-pane label="Information" name="info" />
-      <tab-pane label="Settings" name="json" />
-    </tabs>
+
+    <v-container class="pa-0 data-list-button-bar">
+      <v-row no-gutters >
+        <v-tabs
+          v-model="currentTab"
+          center-active
+          active-class="flow-detail-active-tab"
+          background-color="shading"
+          color="accent"
+          height="29"
+          show-arrows="never"
+          slider-color="primary"
+        >
+
+          <v-tab append href="#info" class="flow-detail-tab">Information</v-tab>
+          <v-tab append href="#json" class="flow-detail-tab">Settings</v-tab>
+          <v-spacer />
+
+          <JsonpathInfo :jsonpath="jsonPath" />
+        </v-tabs>
+      </v-row>
+    </v-container>
+
     <div>
       <CodeEditor
         class="data-detail"
@@ -12,6 +31,7 @@
         v-on:on-jsonpath-change="onJsonPathChange"
       ></CodeEditor>
     </div>
+
     <div class="save-btn" v-if="dataDetail">
       <v-tooltip top>
         <template v-slot:activator="{ on, attrs }">
@@ -40,13 +60,13 @@
 <script>
 import DataDetailInfo from '@/views/datamanager/DataDetailInfo.vue'
 import CodeEditor from '@/components/CodeEditor.vue'
-import Icon from 'vue-svg-icon/Icon.vue'
+import JsonpathInfo from '@/views/inspector/JsonpathInfo.vue'
 
 export default {
   components: {
     DataDetailInfo,
     CodeEditor,
-    'svg-icon': Icon
+    JsonpathInfo
   },
   data () {
     return {
diff --git a/frontend/src/views/datamanager/DataDetailPlainJSON.vue b/frontend/src/views/datamanager/DataDetailPlainJSON.vue
index 90c42ab13..0732cb561 100644
--- a/frontend/src/views/datamanager/DataDetailPlainJSON.vue
+++ b/frontend/src/views/datamanager/DataDetailPlainJSON.vue
@@ -1,9 +1,28 @@
 <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>
+
+    <v-container class="pa-0 data-list-button-bar">
+      <v-row no-gutters >
+        <v-tabs
+          v-model="currentTab"
+          center-active
+          active-class="flow-detail-active-tab"
+          background-color="shading"
+          color="accent"
+          height="29"
+          show-arrows="never"
+          slider-color="primary"
+        >
+
+          <v-tab append href="#info" class="flow-detail-tab">Information</v-tab>
+          <v-tab append href="#json" class="flow-detail-tab">JSON</v-tab>
+          <v-spacer />
+
+          <JsonpathInfo :jsonpath="jsonPath" />
+        </v-tabs>
+      </v-row>
+    </v-container>
+
     <div>
       <CodeEditor
         class="data-detail"
@@ -12,6 +31,7 @@
         v-on:on-jsonpath-change="onJsonPathChange"
       ></CodeEditor>
     </div>
+
     <div class="save-btn" v-if="dataDetail">
       <v-tooltip top>
         <template v-slot:activator="{ on, attrs }">
@@ -40,13 +60,13 @@
 <script>
 import DataDetailInfo from '@/views/datamanager/DataDetailInfo.vue'
 import CodeEditor from '@/components/CodeEditor.vue'
-import Icon from 'vue-svg-icon/Icon.vue'
+import JsonpathInfo from '@/views/inspector/JsonpathInfo.vue'
 
 export default {
   components: {
     DataDetailInfo,
     CodeEditor,
-    'svg-icon': Icon
+    JsonpathInfo
   },
   data () {
     return {
diff --git a/frontend/src/views/datamanager/DataList.vue b/frontend/src/views/datamanager/DataList.vue
index 22133d2c5..773d4a7b1 100644
--- a/frontend/src/views/datamanager/DataList.vue
+++ b/frontend/src/views/datamanager/DataList.vue
@@ -1,134 +1,7 @@
 <template>
   <div>
-    <v-container class="pa-0 data-list-button-bar">
-      <v-row no-gutters align="center" class="mx-1">
+    <ButtonBar/>
 
-        <span class="mx-1">
-          <b>{{title}}</b>
-        </span>
-
-        <v-btn icon @click.stop="reloadMockData" title="Reload mock data">
-          <v-icon size="12px" color="primary">mdi-refresh</v-icon>
-        </v-btn>
-
-        <span class="mx-1">
-          <LabelDropdown :initLabels="selectedLabel" :placement="'bottom-end'" @onLabelChange="editLabel">
-            <template #dropdownButton>
-              <v-btn text small class="px-0" height="20" color="primary">
-                <span>Labels</span>
-                <v-icon size="12px">mdi-menu-down</v-icon>
-              </v-btn>
-            </template>
-          </LabelDropdown>
-        </span>
-
-        <v-text-field
-          class="data-list-button-bar-search shading"
-          placeholder="Search name/id"
-          prepend-inner-icon="mdi-magnify"
-          filled
-          dense
-          rounded
-          height=12
-          v-model="searchStr"
-          flat
-          hide-details
-        ></v-text-field>
-
-        <span v-if="isSelectableStatus">
-          <v-btn text small class="px-0" height="20" color="primary" @click.stop="changeSelectableStatus">
-            <span>Cancel</span>
-          </v-btn>
-
-          <v-divider vertical class="mx-1 data-list-button-bar-divider content"/>
-
-          <v-btn
-            icon
-            @click.stop="changeDeleteDialogStatus"
-            :disabled="selectedLeaf.length===0"
-            title="Delete"
-          >
-            <v-icon size="12px" color="primary">mdi-trash-can-outline</v-icon>
-          </v-btn>
-        </span>
-
-        <v-btn v-else icon class="ml-1" @click.stop="changeSelectableStatus" title="Select mode">
-          <v-icon size="12px" color="primary">mdi-pencil</v-icon>
-        </v-btn>
-
-        <v-menu
-          left
-          bottom
-          offset-y
-          offset-overflow
-          :close-on-content-click="false"
-          style="position: absolute;"
-        >
-
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              icon
-              v-bind="attrs"
-              v-on="on"
-              class="ml-1"
-              title="Settings"
-            >
-              <v-icon size="12px" color="primary">mdi-cog-outline</v-icon>
-            </v-btn>
-          </template>
-
-          <v-list dense>
-            <v-list-item>
-              <v-list-item-action>
-                <v-switch v-model="isLoadTreeAsync"/>
-              </v-list-item-action>
-
-              <v-list-item-content>
-                <v-list-item-title>Load asyn</v-list-item-title>
-                <v-list-item-subtitle>Load data asynchronous</v-list-item-subtitle>
-              </v-list-item-content>
-            </v-list-item>
-
-            <v-list-item>
-              <v-list-item-action>
-                <v-switch v-model="isPreloadDataMap"/>
-              </v-list-item-action>
-
-              <v-list-item-content>
-                <v-list-item-title>Preload</v-list-item-title>
-                <v-list-item-subtitle>Proload DataTree before entering DataManager</v-list-item-subtitle>
-              </v-list-item-content>
-            </v-list-item>
-
-            <v-list-item>
-              <v-list-item-action>
-                <v-switch v-model="isLabelDisplay"/>
-              </v-list-item-action>
-
-              <v-list-item-content>
-                <v-list-item-title>Labels</v-list-item-title>
-                <v-list-item-subtitle>Display labels in each tree node</v-list-item-subtitle>
-              </v-list-item-content>
-            </v-list-item>
-
-            <v-list-item>
-              <v-list-item-action>
-                <v-switch v-model="isDisplayConfiguration"/>
-              </v-list-item-action>
-
-              <v-list-item-content>
-                <v-list-item-title>Configuration</v-list-item-title>
-                <v-list-item-subtitle>Display configuration file in each group</v-list-item-subtitle>
-              </v-list-item-content>
-            </v-list-item>
-
-          </v-list>
-
-        </v-menu>
-
-      </v-row>
-    </v-container>
-    
     <Row>
       <v-overlay
         :absolute="true"
@@ -146,6 +19,7 @@
       </v-overlay>
       <DocumentTree :treeData="treeData" class="overflow-auto data-list" :searchStr="searchStr"/>
     </Row>
+
     <NodeMenu/>
     <DeleteDialog/>
     <CreateDialog/>
@@ -154,7 +28,7 @@
 </template>
 
 <script>
-import LabelDropdown from '@/components/LabelDropdown.vue'
+import ButtonBar from '@/views/datamanager/DataListButtonBar.vue'
 import DocumentTree from '@/components/DocumentTree.vue'
 import NodeMenu from '@/components/DocumentTreeNodeMenu.vue'
 import DeleteDialog from '@/components/DocumentTreeDialogDelete.vue'
@@ -164,18 +38,13 @@ import { searchGroupByName } from '@/api'
 
 export default {
   components: {
-    LabelDropdown,
+    ButtonBar,
     DocumentTree,
     NodeMenu,
     CreateDialog,
     DuplicateDialog,
     DeleteDialog,
   },
-  data () {
-    return {
-      searchStr: ''
-    }
-  },
   computed: {
     treeData () {
       return this.$store.state.dataManager.groupList
@@ -183,63 +52,8 @@ export default {
     spinShow () {
       return this.$store.state.dataManager.isLoading
     },
-    title () {
-      return this.$store.state.dataManager.title
-    },
-    selectedLabel () {
-      return this.$store.state.dataManager.dataListSelectedLabel
-    },
-    isLabelDisplay: {
-      get () {
-        return this.$store.state.dataManager.isLabelDisplay
-      },
-      set (val) {
-        this.$store.commit('setIsLabelDisplay', val)
-        this.$store.dispatch('updateConfigByKey', {
-          'mock.data.showLabel': val
-        })
-      }
-    },
-    isDisplayConfiguration: {
-      get () {
-        return this.$store.state.dataManager.isDisplayConfiguration
-      },
-      set (val) {
-        this.$store.commit('setIsDisplayConfiguration', val)
-        this.$store.dispatch('updateConfigByKey', {
-          'mock.data.shownConfig': val
-        })
-        this.$store.dispatch('loadDataMap')
-      }
-    },
-    isLoadTreeAsync: {
-      get () {
-        return this.$store.state.dataManager.isLoadTreeAsync
-      },
-      set (val) {
-        this.$store.commit('setIsTreeLoadAsync', val)
-        this.$store.dispatch('updateConfigByKey', {
-          'mock.data.tree.asynchronous': val
-        })
-        this.$store.dispatch('loadDataMap')
-      }
-    },
-    isPreloadDataMap: {
-      get () {
-        return this.$store.state.settings.preLoadFuncSet.has('loadDataMap')
-      },
-      set (val) {
-        val ? this.$store.commit('addPreLoadFuncSet', 'loadDataMap') : this.$store.commit('deletePreLoadFuncSet', 'loadDataMap')
-        this.$store.dispatch('updateConfigByKey', {
-          'mock.data.tree.preload': val
-        })
-      }
-    },
-    isSelectableStatus () {
-      return this.$store.state.dataManager.isSelectableStatus
-    },
-    selectedLeaf () {
-      return this.$store.state.dataManager.selectedLeaf
+    searchStr () {
+      return this.$store.state.dataManager.treeSearchStr
     }
   },
   watch: {
@@ -293,32 +107,6 @@ export default {
         }).catch(error => {
           this.$bus.$emit('msg.error', 'Load snapshot ' + importGroupId + ' error: ' + error.data.message)
         })
-    },
-    editLabel (payload) {
-      // When label is not empty, close isLoadTreeAsync
-      if (payload.labels.length > 0) {
-        this.isLoadTreeAsync = false
-      }
-      this.$store.commit('setDataListSelectedLabel', {})
-      let labels = []
-      for (const id of payload.labels) {
-        const label = this.$store.state.dataManager.labels[id]
-        labels.push(label)
-      }
-      this.$store.commit('setDataListSelectedLabel', labels)
-      this.$store.dispatch('loadDataMap')
-    },
-    changeSelectableStatus () {
-      this.$store.commit('setIsSelectableStatus', !this.isSelectableStatus)
-      this.$store.commit('setSelectedLeaf', [])
-    },
-    changeDeleteDialogStatus () {
-      this.$store.commit('setDeleteNode', Array.from(this.$store.state.dataManager.selectedNode))
-      this.$store.commit('setDeleteDialogSource', 'multiple')
-      this.$store.commit('setIsShownDeleteDialog', true)
-    },
-    reloadMockData () {
-      this.$store.dispatch('loadDataMap')
     }
   }
 }
@@ -337,35 +125,4 @@ export default {
     footer: 28px
   */
 }
-.data-list-button-bar {
-  line-height: 30px;
-  border-bottom: 1px solid #ddd;
-}
-.data-list-button-bar .v-btn--icon.v-size--default {
-  height: 20px;
-  width: 20px;
-}
-.data-list-button-bar-divider {
-  height: 15px;
-}
-.data-list-button-bar-search {
-  font-size: 12px;
-  width: 50px;
-  height: 20px !important;
-}
-.data-list-button-bar-search .v-input__prepend-inner {
-  margin-top: -2px !important;
-}
-.data-list-button-bar-search .v-input__slot {
-  padding: 0px 4px !important;
-  min-height: 20px !important;
-  height: 20px !important;
-}
-.data-list-button-bar-search .v-icon.v-icon {
-  font-size: 12px;
-}
-.data-list-button-bar-search .v-text-field input {
-  font-size: 12px;
-  padding: 0px !important;
-}
 </style>
diff --git a/frontend/src/views/datamanager/DataListButtonBar.vue b/frontend/src/views/datamanager/DataListButtonBar.vue
new file mode 100644
index 000000000..857283fbd
--- /dev/null
+++ b/frontend/src/views/datamanager/DataListButtonBar.vue
@@ -0,0 +1,279 @@
+<template>
+  <v-container class="pa-0 data-list-button-bar">
+    <v-row no-gutters align="center" class="mx-1">
+
+      <span class="mx-1">
+        <b>{{title}}</b>
+      </span>
+
+      <v-btn icon @click.stop="reloadMockData" title="Reload mock data">
+        <v-icon size="12px" color="primary">mdi-refresh</v-icon>
+      </v-btn>
+
+      <span v-show="editable" class="mx-1">
+        <LabelDropdown :initLabels="selectedLabel" :placement="'bottom-end'" @onLabelChange="editLabel">
+          <template #dropdownButton>
+            <v-btn text small class="px-0" height="20" color="primary">
+              <span>Labels</span>
+              <v-icon size="12px">mdi-menu-down</v-icon>
+            </v-btn>
+          </template>
+        </LabelDropdown>
+      </span>
+
+      <v-text-field
+        class="data-list-button-bar-search shading"
+        placeholder="Search name/id"
+        prepend-inner-icon="mdi-magnify"
+        filled
+        dense
+        rounded
+        height=12
+        v-model="treeSearchStr"
+        flat
+        hide-details
+      ></v-text-field>
+
+      <span v-show="editable">
+        <span v-if="isSelectableStatus">
+          <v-btn text small class="px-0" height="20" color="primary" @click.stop="changeSelectableStatus">
+            <span>Cancel</span>
+          </v-btn>
+
+          <v-divider vertical class="mx-1 data-list-button-bar-divider content"/>
+
+          <v-btn
+            icon
+            @click.stop="changeDeleteDialogStatus"
+            :disabled="selectedLeaf.length===0"
+            title="Delete"
+          >
+            <v-icon size="12px" color="primary">mdi-trash-can-outline</v-icon>
+          </v-btn>
+        </span>
+
+        <v-btn v-else icon class="ml-1" @click.stop="changeSelectableStatus" title="Select mode">
+          <v-icon size="12px" color="primary">mdi-pencil</v-icon>
+        </v-btn>
+      </span>
+
+      <v-menu
+        left
+        bottom
+        offset-y
+        offset-overflow
+        :close-on-content-click="false"
+        style="position: absolute;"
+      >
+
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn
+            v-show="editable"
+            icon
+            v-bind="attrs"
+            v-on="on"
+            class="ml-1"
+            title="Settings"
+          >
+            <v-icon size="12px" color="primary">mdi-cog-outline</v-icon>
+          </v-btn>
+        </template>
+
+        <v-list dense>
+          <v-list-item>
+            <v-list-item-action>
+              <v-switch v-model="isLoadTreeAsync"/>
+            </v-list-item-action>
+
+            <v-list-item-content>
+              <v-list-item-title>Load asyn</v-list-item-title>
+              <v-list-item-subtitle>Load data asynchronous</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+
+          <v-list-item>
+            <v-list-item-action>
+              <v-switch v-model="isPreloadDataMap"/>
+            </v-list-item-action>
+
+            <v-list-item-content>
+              <v-list-item-title>Preload</v-list-item-title>
+              <v-list-item-subtitle>Proload DataTree before entering DataManager</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+
+          <v-list-item>
+            <v-list-item-action>
+              <v-switch v-model="isLabelDisplay"/>
+            </v-list-item-action>
+
+            <v-list-item-content>
+              <v-list-item-title>Labels</v-list-item-title>
+              <v-list-item-subtitle>Display labels in each tree node</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+
+          <v-list-item>
+            <v-list-item-action>
+              <v-switch v-model="isDisplayConfiguration"/>
+            </v-list-item-action>
+
+            <v-list-item-content>
+              <v-list-item-title>Configuration</v-list-item-title>
+              <v-list-item-subtitle>Display configuration file in each group</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+
+        </v-list>
+
+      </v-menu>
+
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import LabelDropdown from '@/components/LabelDropdown.vue'
+
+export default {
+  components: {
+    LabelDropdown,
+  },
+  props: {
+    editable: {
+      default: true
+    }
+  },
+  computed: {
+    title () {
+      return this.$store.state.dataManager.title
+    },
+    selectedLabel () {
+      return this.$store.state.dataManager.dataListSelectedLabel
+    },
+    treeSearchStr: {
+      get () {
+        this.$store.state.dataManager.treeSearchStr
+      },
+      set (val) {
+        this.$store.commit('setTreeSearchStr', val)
+      }
+    },
+    isLabelDisplay: {
+      get () {
+        return this.$store.state.dataManager.isLabelDisplay
+      },
+      set (val) {
+        this.$store.commit('setIsLabelDisplay', val)
+        this.$store.dispatch('updateConfigByKey', {
+          'mock.data.showLabel': val
+        })
+      }
+    },
+    isDisplayConfiguration: {
+      get () {
+        return this.$store.state.dataManager.isDisplayConfiguration
+      },
+      set (val) {
+        this.$store.commit('setIsDisplayConfiguration', val)
+        this.$store.dispatch('updateConfigByKey', {
+          'mock.data.shownConfig': val
+        })
+        this.$store.dispatch('loadDataMap')
+      }
+    },
+    isLoadTreeAsync: {
+      get () {
+        return this.$store.state.dataManager.isLoadTreeAsync
+      },
+      set (val) {
+        this.$store.commit('setIsTreeLoadAsync', val)
+        this.$store.dispatch('updateConfigByKey', {
+          'mock.data.tree.asynchronous': val
+        })
+        this.$store.dispatch('loadDataMap')
+      }
+    },
+    isPreloadDataMap: {
+      get () {
+        return this.$store.state.settings.preLoadFuncSet.has('loadDataMap')
+      },
+      set (val) {
+        val ? this.$store.commit('addPreLoadFuncSet', 'loadDataMap') : this.$store.commit('deletePreLoadFuncSet', 'loadDataMap')
+        this.$store.dispatch('updateConfigByKey', {
+          'mock.data.tree.preload': val
+        })
+      }
+    },
+    isSelectableStatus () {
+      return this.$store.state.dataManager.isSelectableStatus
+    },
+    selectedLeaf () {
+      return this.$store.state.dataManager.selectedLeaf
+    }
+  },
+  methods: {
+    editLabel (payload) {
+      // When label is not empty, close isLoadTreeAsync
+      if (payload.labels.length > 0) {
+        this.isLoadTreeAsync = false
+      }
+      this.$store.commit('setDataListSelectedLabel', {})
+      let labels = []
+      for (const id of payload.labels) {
+        const label = this.$store.state.dataManager.labels[id]
+        labels.push(label)
+      }
+      this.$store.commit('setDataListSelectedLabel', labels)
+      this.$store.dispatch('loadDataMap')
+    },
+    changeSelectableStatus () {
+      this.$store.commit('setIsSelectableStatus', !this.isSelectableStatus)
+      this.$store.commit('setSelectedLeaf', [])
+    },
+    changeDeleteDialogStatus () {
+      this.$store.commit('setDeleteNode', Array.from(this.$store.state.dataManager.selectedNode))
+      this.$store.commit('setDeleteDialogSource', 'multiple')
+      this.$store.commit('setIsShownDeleteDialog', true)
+    },
+    reloadMockData () {
+      this.$store.dispatch('loadDataMap')
+    }
+  }
+}
+</script>
+
+<style>
+.data-list-button-bar {
+  line-height: 30px;
+  border-bottom: 1px solid #ddd;
+  max-width: none;
+}
+.data-list-button-bar .v-btn--icon.v-size--default {
+  height: 20px;
+  width: 20px;
+}
+.data-list-button-bar-divider {
+  height: 15px;
+}
+.data-list-button-bar-search {
+  font-size: 12px;
+  width: 50px;
+  height: 20px !important;
+}
+.data-list-button-bar-search .v-input__prepend-inner {
+  margin-top: -2px !important;
+}
+.data-list-button-bar-search .v-input__slot {
+  padding: 0px 4px !important;
+  min-height: 20px !important;
+  height: 20px !important;
+}
+.data-list-button-bar-search .v-icon.v-icon {
+  font-size: 12px;
+}
+.data-list-button-bar-search .v-text-field input {
+  font-size: 12px;
+  padding: 0px !important;
+}
+</style>
diff --git a/frontend/src/views/datamanager/JsonPathBar.vue b/frontend/src/views/datamanager/JsonPathBar.vue
deleted file mode 100644
index 655c0cfb4..000000000
--- a/frontend/src/views/datamanager/JsonPathBar.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div v-if="jsonPath">
-    <Tooltip
-      :content="jsonPath"
-      placement="bottom-end"
-      theme="light"
-      max-width="500"
-      transfer
-      style="width:100%"
-    >
-      <span class="json-path-span">
-        <b style="padding-right:5px">JSONPath:</b>{{jsonPath}}
-      </span>
-    </Tooltip>
-  </div>
-</template>
-
-<script>
-export default {
-  computed: {
-    jsonPath() {
-      return this.$store.state.dataManager.jsonPath
-    }
-  }
-}
-</script>
-
-<style>
-.ivu-tooltip-inner-with-width{
-  word-break: break-all;
-  white-space: normal;
-  width: 300px;
-}
-.json-path-span{
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: top;
-  cursor: pointer;
-}
-</style>
diff --git a/frontend/src/views/inspector/ButtonBar.vue b/frontend/src/views/inspector/ButtonBar.vue
index 2363d8e80..d14b64cdf 100644
--- a/frontend/src/views/inspector/ButtonBar.vue
+++ b/frontend/src/views/inspector/ButtonBar.vue
@@ -29,7 +29,6 @@
         <span>Clear</span>
       </v-tooltip>
 
-
       <b class="pr-1 pl-3">Mock Group</b>
 
       <v-chip
@@ -103,7 +102,6 @@
         />
       </div>
 
-
       <v-menu
         left
         bottom
@@ -163,48 +161,18 @@
       </v-menu>
     </div>
 
-    <MockDataSelector ref="searchModal" :showRoot="false">
-      <template #selected>
-        <div v-if="activatedGroups">
-          <label style="padding-right:5px">Activated Mock Group</label>
-          <Tag v-for="group in activatedGroups" :key="group.id">{{group.name}}</Tag>
-        </div>
-      </template>
-      <template #searchItem="{ searchResult }">
-        <Row type="flex" align="middle" class="search-row" @click.native="onActivateClick(searchResult)">
-          <Col span="22">
-            <p class="search-item">
-              <b class="search-item-title">{{searchResult.name}}</b>
-              <span class="search-item-path">{{searchResult.abs_parent_path}}</span>
-            </p>
-          </Col>
-          <Col span="2" align="right">
-            <Icon
-              type="ios-play"
-              color="#19be6b"
-              size="22"
-              class="search-item-btn"
-            />
-          </Col>
-        </Row>
-      </template>
-    </MockDataSelector>
+    <TempMockDrawer ref="treeDrawer"/>
+
   </div>
 </template>
 
 <script>
-import MockDataSelector from '@/components/SearchModal.vue'
-import Icon from 'vue-svg-icon/Icon.vue'
+import TempMockDrawer from '@/views/inspector/TempMockDrawer.vue'
 
 export default {
   name: 'buttonBar',
   components: {
-    MockDataSelector,
-    'svg-icon': Icon
-  },
-  data () {
-    return {
-    }
+    TempMockDrawer
   },
   computed: {
     diffMode: {
@@ -288,7 +256,7 @@ export default {
   },
   methods: {
     showMockDataSelector () {
-      this.$refs.searchModal.toggal()
+      this.$refs.treeDrawer.toggal()
     },
     changeFlowFilter () {
       this.$store.dispatch('loadFlowList')
@@ -377,6 +345,8 @@ export default {
 }
 .inspector-search .v-input__slot {
   padding-right: 4px !important;
+  min-height: 26px !important;
+  height: 26px !important;
 }
 .inspector-search .v-icon {
   font-size: 14px !important;
@@ -387,19 +357,17 @@ export default {
 }
 .flow-filter-select {
   width: 120px;
-  min-height: 26px !important;
-  height: 26px !important;
   font-size: 14px;
   font-weight: 400;
   line-height: 14px;
 }
-.flow-filter .v-text-field--outlined, .v-text-field--solo {
-  border-radius: 4px 0px 0px 4px !important;
-}
-.inspector-button-bar .v-input__slot {
+.flow-filter-select .v-input__slot {
   min-height: 26px !important;
   height: 26px !important;
 }
+.flow-filter .v-text-field--outlined, .v-text-field--solo {
+  border-radius: 4px 0px 0px 4px !important;
+}
 .flow-filter .v-select__selections{
   min-height: 26px !important;
   height: 26px !important;
diff --git a/frontend/src/views/inspector/FlowDetail.vue b/frontend/src/views/inspector/FlowDetail.vue
index 4afdc4987..60615486c 100644
--- a/frontend/src/views/inspector/FlowDetail.vue
+++ b/frontend/src/views/inspector/FlowDetail.vue
@@ -21,9 +21,9 @@
           </v-btn>
 
           <v-tab append href="#req" class="flow-detail-tab">Request</v-tab>
-          <v-tab append href="#req-body" class="flow-detail-tab">RequestBody</v-tab>
+          <v-tab append href="#reqData" class="flow-detail-tab">RequestBody</v-tab>
           <v-tab append href="#resp" class="flow-detail-tab">Response</v-tab>
-          <v-tab append href="#resp-body" class="flow-detail-tab">ResponseBody</v-tab>
+          <v-tab append href="#respData" class="flow-detail-tab">ResponseData</v-tab>
           <v-tab v-if="showProxyResponse" append href="#proxy-resp-diff" class="flow-detail-tab">ResponseBodyDiff</v-tab>
           <v-spacer />
 
@@ -39,16 +39,16 @@
       </Row>
       <CodeDiffEditor 
         v-if="isDiffEditor"
-        :content="codeContent"
+        :content="editorCache"
         :diffContent="diffContent"
-        :language="codeType"
+        :language="currentTabContentType"
         class="flow-detail"
       />
       <CodeEditor
         v-else
         class="flow-detail"
-        :language="codeType"
-        :content="codeContent"
+        :language="currentTabContentType"
+        v-model="editorContent"
         v-on:on-jsonpath-change="onJsonPathChange"
       />
     </span>
@@ -57,7 +57,19 @@
       <p>No Selected flow</p>
     </div>
 
-  </div>
+    <div v-show="flowDetail" class="save-btn">
+      <v-btn
+        fab
+        dark
+        color="primary"
+        class="save-btn-detail"
+        @click="TemporaryMock"
+      >
+        M
+      </v-btn>
+    </div>
+
+</div>
 </template>
 
 <script>
@@ -74,44 +86,49 @@ export default {
   },
   data () {
     return {
+      editorCache: {
+        id: null,
+        req: null,
+        reqData: null,
+        resp: null,
+        respData: null
+      },
+      editorCacheLanguage: {
+        req: 'json',
+        reqData: null,
+        resp: 'json',
+        respData: null
+      },
       codeType: 'json',
       currentTab: 'req',
-      jsonPath: null
+      jsonPath: null,
     }
   },
+  mounted () {
+    this.setDataDetailEditorCache(this.flowDetail)
+  },
   computed: {
     flowDetail () {
       return this.$store.state.inspector.focusedFlowDetail
     },
-    codeContent () {
-      let codeContent = ''
-      if (this.currentTab === 'req') {
-        codeContent = JSON.stringify(this.flowDetail.request, null, 4)
-        this.codeType = 'json'
-      } else if (this.currentTab === 'req-body') {
-        if (this.flowDetail.request.data) {
-          codeContent = this.parseJsonData(this.flowDetail.request.data)
-          this.codeType = 'json'
-        } else {
-          codeContent = ''
-          this.codeType = 'text'
+    editorContent: {
+      get () {
+        const content = this.editorCache[this.currentTab]
+        if (!content) {
+          return ''
         }
-      } else if (this.currentTab === 'resp') {
-        const respInfo = {
-          code: this.flowDetail.response.code,
-          headers: this.flowDetail.response.headers
-        }
-        codeContent = JSON.stringify(respInfo, null, 4)
-        this.codeType = 'json'
-      } else if (this.currentTab === 'resp-body') {
-        codeContent = this.parseResponseByContentType(this.flowDetail.response)
-      } else if (this.currentTab === 'proxy-resp-diff') {
-        codeContent = this.parseResponseByContentType(this.flowDetail.response)
-      } else { }
-      return codeContent
+        return content
+      },
+      set (val) {
+        this.editorCache[this.currentTab] = val
+      }
+    },
+    currentTabContentType () {
+      const content = this.editorCacheLanguage[this.currentTab]
+      return content ? content : 'json'
     },
     diffContent () {
-      return this.parseResponseByContentType(this.flowDetail.proxy_response)
+      return this.getParsedContentAndType(this.flowDetail.proxy_response)
     },
     isDiffEditor () {
       return this.currentTab === 'proxy-resp-diff'
@@ -119,11 +136,16 @@ export default {
     showProxyResponse () {
       const isShow = this.flowDetail && this.flowDetail.hasOwnProperty('proxy_response')
       if (!isShow && this.currentTab == 'proxy-resp-diff') {
-          this.currentTab = 'resp-body'
+        this.currentTab = 'respData'
       }
       return isShow
     },
   },
+  watch: {
+    flowDetail (val) {
+      this.setDataDetailEditorCache(val)
+    },
+  },
   methods: {
     dismiss () {
       this.$store.commit('setInspectorSplit', 1)
@@ -133,12 +155,32 @@ export default {
     switchTab (name) {
       this.currentTab = name
     },
-    parseNullData (data) {
-      this.codeType = 'text'
+    setDataDetailEditorCache (val) {
+      if (val === null || Object.keys(val).length === 0) {
+        return
+      }
+      this.editorCache.id = val.id
+      this.editorCache.req = JSON.stringify({
+        url: val.request.url,
+        headers: val.request.headers,
+        method: val.request.method
+      })
+      let reqContentInfo = this.getParsedContentAndType(val.request)
+      this.editorCache.reqData = reqContentInfo.content
+      this.editorCacheLanguage.reqData = reqContentInfo.language
+
+      this.editorCache.resp = JSON.stringify({
+        code: val.response.code,
+        headers: val.response.headers
+      })
+      let respContentInfo = this.getParsedContentAndType(val.response)
+      this.editorCache.respData = respContentInfo.content
+      this.editorCacheLanguage.respData = respContentInfo.language
+    },
+    parseNullData (_) {
       return ''
     },
     parseJsonData (data) {
-      this.codeType = 'json'
       if (typeof data === 'object') {
         return JSON.stringify(data, null, 4)
       } else {
@@ -146,18 +188,15 @@ export default {
       }
     },
     parseHtmlData (data) {
-      this.codeType = 'html'
       return data
     },
     parseXmlData (data) {
-      this.codeType = 'xml'
       return data
     },
     parseTextData (data) {
-      this.codeType = 'text'
       return data
     },
-    parseResponseByContentType (response) {
+    getParsedContentAndType (response) {
       let contentType = null
       for (const headerKey in response.headers) {
         if (headerKey.toLowerCase() == 'content-type') {
@@ -165,27 +204,49 @@ export default {
           break
         }
       }
-      let codeContent = ''
-      if (response.data === undefined || response.data === null) {
-        codeContent = this.parseNullData(response.data)
-      } else if (contentType) {
-        if (contentType.includes('html')) {
-          codeContent = this.parseHtmlData(response.data)
-        } else if (contentType.includes('xml')) {
-          codeContent = this.parseXmlData(response.data)
-        } else if (contentType.includes('json')) {
-          codeContent = this.parseJsonData(response.data)
-        } else {
-          codeContent = this.parseTextData(response.data)
-        }
+
+      let contentInfo = { content: '', language: '' }
+
+      if (!contentType) {
+        contentInfo.language = 'json'
+      } else if (response.data === undefined || response.data === null) {
+        contentInfo.content = this.parseNullData(response.data)
+        contentInfo.language = 'text'
+      } else if (contentType.includes('json')) {
+        contentInfo.content = this.parseJsonData(response.data)
+        contentInfo.language = 'json'
+      } else if (contentType.includes('html')) {
+        contentInfo.content = this.parseHtmlData(response.data)
+        contentInfo.language = 'html'
+      } else if (contentType.includes('xml')) {
+        contentInfo.content = this.parseXmlData(response.data)
+        contentInfo.language = 'xml'
       } else {
-        codeContent = this.parseTextData(response.data)
+        contentInfo.content = this.parseTextData(response.data)
+        contentInfo.language = 'text'
       }
-      return codeContent
+      return contentInfo
     },
     onJsonPathChange (payload) {
       this.jsonPath = payload.jsonPath
-    }
+    },
+    TemporaryMock () {
+      const newData = {}
+      // Add request
+      const newReq = {}
+      Object.assign(newReq, JSON.parse(this.editorCache.req))
+      newReq['data'] = this.editorCache.reqData
+      newData['request'] = newReq
+      // Add response
+      const newResp = {}
+      Object.assign(newResp, JSON.parse(this.editorCache.resp))
+      newResp['data'] = this.editorCache.respData
+      newData['response'] = newResp
+
+      newData.id = this.editorCache.id
+
+      this.$store.dispatch('createTempMockData', newData)
+    },
   }
 }
 </script>
diff --git a/frontend/src/views/inspector/TempMockDrawer.vue b/frontend/src/views/inspector/TempMockDrawer.vue
new file mode 100644
index 000000000..9efb7a63b
--- /dev/null
+++ b/frontend/src/views/inspector/TempMockDrawer.vue
@@ -0,0 +1,80 @@
+<template>
+  <v-navigation-drawer
+    class="inspector-drawer"
+    v-model="shown"
+    absolute
+    temporary
+    hide-overlay
+    right
+    width="600"
+    color="rgba(230, 230, 230, 0.8)"
+  >
+
+    <DataListButtonBar :editable="false"/>
+
+    <TempMockTree :searchStr="searchStr"/>
+
+    <DocumentTree :treeData="treeData" class="overflow-auto data-list" :searchStr="searchStr" :editable="false" :deletable="false"/>
+
+  </v-navigation-drawer>
+</template>
+  
+<script>
+import TempMockTree from '@/views/inspector/TempMockTree.vue'
+import DocumentTree from '@/components/DocumentTree.vue'
+import DataListButtonBar from '@/views/datamanager/DataListButtonBar.vue'
+
+export default {
+  components: {
+    TempMockTree,
+    DocumentTree,
+    DataListButtonBar
+  },
+  activated () {
+    this.$store.dispatch('loadTempMockData')
+  },
+  data() {
+    return {
+      shown: false
+    }
+  },
+  computed: {
+    treeData () {
+      return this.$store.state.dataManager.groupList
+    },
+    temporaryMockDataList () {
+      return this.$store.state.dataManager.temporaryMockDataList
+    },
+    searchStr () {
+      return this.$store.state.dataManager.treeSearchStr
+    }
+  },
+  methods: {
+    toggal () {
+      this.shown = !this.shown
+    }
+  }
+}
+</script>
+  
+<style>
+.inspector-drawer {
+  z-index: 4;
+}
+.data-list-button-bar-search .v-input__prepend-inner {
+  margin-top: -2px !important;
+}
+.data-list-button-bar-search .v-input__slot {
+  padding: 0px 4px !important;
+  min-height: 20px !important;
+  height: 20px !important;
+}
+.data-list-button-bar-search .v-icon.v-icon {
+  font-size: 12px;
+}
+.data-list-button-bar-search .v-text-field input {
+  font-size: 12px;
+  padding: 0px !important;
+}
+</style>
+  
\ No newline at end of file
diff --git a/frontend/src/views/inspector/TempMockTree.vue b/frontend/src/views/inspector/TempMockTree.vue
new file mode 100644
index 000000000..bd336ff1e
--- /dev/null
+++ b/frontend/src/views/inspector/TempMockTree.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="temp-mock-tree">
+
+    <v-treeview
+      :items="temporaryMockDataList"
+      :search="realSearchStr"
+      :filter="searchFilter"
+
+      expand-icon=""
+
+      dense
+      hoverable
+
+      :open="openNode"
+      style="padding-left:0px"
+    >
+      <template v-slot:label="{ item }">
+        <v-lazy
+          :options="{threshold: 0.5}"
+          transition="fade-transition"
+        >
+          <v-container class="pa-0 data-list-tree-node">
+            <v-row
+              no-gutters
+              align="center"
+              @mouseover="mouseOverId=item.id"
+              @mouseout="mouseOverId=null"
+            >
+              <span>
+                <v-btn v-if="item.type === 'group'" icon class="mr-1 my-0" @click.stop="onToggleStatusChange">
+                  <v-icon small color="accent" :class="toggleClass">
+                    mdi-chevron-down
+                  </v-icon>
+                </v-btn>
+                <v-icon v-else small color="accent" size="14px" class="mr-1">mdi-file</v-icon>
+              </span>
+
+              <span class="tree-node-inner-text accent--text">{{item.name}}</span>
+
+              <v-spacer/>
+
+              <span v-show="item.id === mouseOverId && item.id !== tempMockRootId">
+                <v-btn
+                  icon
+                  @click.stop="deleteData(item)"
+                >
+                  <v-icon size="12px" color="error">mdi-delete</v-icon>
+                </v-btn>
+              </span>
+
+            </v-row>
+          </v-container>
+
+        </v-lazy>
+
+      </template>
+    </v-treeview>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    'treeData': Array,
+    'searchStr': String,
+  },
+  data() {
+    return {
+      searchRefreshDataListTimer: null,
+      mouseOverId: null,
+      realSearchStr: '',
+      openNode: []
+    }
+  },
+  computed: {
+    temporaryMockDataList () {
+      return this.$store.state.dataManager.temporaryMockDataList
+    },
+    tempMockRootId () {
+      return this.$store.state.dataManager.tempGroupId
+    },
+    rootOpen () {
+      return this.openNode.indexOf(this.tempMockRootId) !== -1
+    },
+    toggleClass () {
+      return !this.rootOpen ? 'toggle-icon-status' : ''
+    }
+  },
+  watch: {
+    searchStr (newValue, oldValue) {
+      clearTimeout(this.searchRefreshDataListTimer)
+      this.searchRefreshDataListTimer = setTimeout(() => {
+        if (newValue !== oldValue) {
+          this.realSearchStr = this.searchStr
+          clearTimeout(this.searchRefreshDataListTimer)
+        }
+      }, 1000)
+    },
+  },
+  methods: {
+    searchFilter (item, search, textKey) {
+      // By default, it will search case insensitively
+      // Once customized `filter`, case-insensitive search needs to implement by self
+      if (item.id === search) {
+        return true
+      }
+      // textKey defaults to name, this value cannot be customized in the component
+      if (item[textKey].toLowerCase().indexOf(search.toLowerCase()) > -1) {
+        return true
+      }
+    },
+    onToggleStatusChange () {
+      this.openNode = this.rootOpen ? [] : ['tmp_group']
+    },
+    deleteData (payload) {
+      this.$store.dispatch('deleteTempMockData', payload)
+    }
+  }
+}
+</script>
+
+<style>
+.temp-mock-tree .v-treeview--dense .v-treeview-node__root{
+  min-height: 32px;
+  padding: 0px;
+  margin-left: -28px;
+}
+</style>
diff --git a/lyrebird/mock/blueprints/apis/mock.py b/lyrebird/mock/blueprints/apis/mock.py
index 9c599a409..7025b0486 100644
--- a/lyrebird/mock/blueprints/apis/mock.py
+++ b/lyrebird/mock/blueprints/apis/mock.py
@@ -7,6 +7,15 @@
 
 logger = log.get_logger()
 
+'''
+1. new API
+2. origin API, response add new key {data: {'name': '...'}} -> {data: {'name': '...'}, 'custom': [ {}, {} ]}
+3. origin API response, frontend store add new prop
+4. origin API response store, add DataDeteilFolder.vue computed prop
+5. origin API response store DataDeteilFolder.vue, add DataDetailInfo.vue type
+
+'''
+
 
 class MockGroup(Resource):
     """
@@ -15,6 +24,10 @@ class MockGroup(Resource):
 
     def get(self, group_id=None, label=None):
         if group_id:
+            if group_id == 'tmp_group':
+                _group = context.application.data_manager.temp_mock_tree.get()
+                return application.make_ok_response(data=_group)
+
             query = request.args
             if query and query.get('childrenOnly') == 'true':
                 children = context.application.data_manager._get_group_children(group_id) or []
@@ -65,9 +78,19 @@ def post(self):
         return context.make_ok_response(data={'group_id': group_id})
 
     def put(self):
-        group_id = request.json.get('id')
-        data = request.json.get('data')
-        message = context.application.data_manager.update_group(group_id, data)
+        if 'query' in request.json:
+            query = request.json['query']
+            if query is None:
+                return application.make_fail_response(f'Update query is None!')
+
+            data = request.json.get('data')
+            message = context.application.data_manager.update_by_query(query, data)
+
+        else:
+            group_id = request.json.get('id')
+            data = request.json.get('data')
+            message = context.application.data_manager.update_group(group_id, data)
+
         if message:
             return context.make_ok_response(**message)
         return context.make_ok_response()
@@ -81,6 +104,10 @@ def delete(self, group_id=None):
         if query is None:
             return application.make_fail_response(f'Delete query is None!')
 
+        if query.get('parent_id') == 'tmp_group':
+            context.application.data_manager.temp_mock_tree.delete_by_query(query)
+            return context.make_ok_response()
+
         if context.application.data_manager.is_deleting_lock:
             return application.make_fail_response(f'Is deleting, no new delete')
 
@@ -123,6 +150,11 @@ def put(self):
     def post(self):
         parent_id = request.json.get('parent_id')
         data = request.json.get('data')
+
+        if parent_id == 'tmp_group':
+            new_data_id = context.application.data_manager.temp_mock_tree.add_data(data)
+            return application.make_ok_response(data_id=new_data_id)
+
         new_data_id = context.application.data_manager.add_data(parent_id, data)
         return context.make_ok_response(data_id=new_data_id)
 
diff --git a/lyrebird/mock/cache.py b/lyrebird/mock/cache.py
index 7d3925fc9..ca85f60b6 100644
--- a/lyrebird/mock/cache.py
+++ b/lyrebird/mock/cache.py
@@ -28,6 +28,12 @@ def add(self, obj):
     def items(self):
         return list(self._cache)
 
+    def get(self, id_):
+        for item in list(self._cache):
+            if item['id'] != id_:
+                continue
+            return item
+
     def clear(self):
         self._cache.clear()
     
diff --git a/lyrebird/mock/dm/__init__.py b/lyrebird/mock/dm/__init__.py
index b4a9550e8..26a2a89e8 100644
--- a/lyrebird/mock/dm/__init__.py
+++ b/lyrebird/mock/dm/__init__.py
@@ -13,6 +13,7 @@
 from lyrebird.application import config
 from lyrebird.mock import context
 from lyrebird.mock.dm.match import MatchRules
+from lyrebird.mock.dm.temp_mock import TempMock
 from lyrebird.config import CONFIG_TREE_SHOW_CONFIG
 
 PROP_FILE_NAME = '.lyrebird_prop'
@@ -30,8 +31,7 @@ def __init__(self):
         self.is_activated_data_rules_contains_request_data = False
         self.LEVEL_SUPER_ACTIVATED = 3
         self.clipboard = None
-        self.save_to_group_id = None
-        self.tmp_group = {'id': 'tmp_group', 'type': 'group', 'name': 'tmp-group', 'label': [], 'children': []}
+
         self.snapshot_import_cache = {}
         self.SNAPSHOT_SUFFIX = '.lb'
         self.COPY_NODE_NAME_SUFFIX = ' - copy'
@@ -50,6 +50,9 @@ def __init__(self):
         self.DELETE_STEP = 100
         self.is_deleting_lock = False
 
+        # init temp mock
+        self.temp_mock_tree = TempMock()
+
     @property
     def snapshot_workspace(self):
         if not self._snapshot_workspace:
@@ -392,6 +395,22 @@ def _collect_data_in_node(self, node):
                     id_list.extend(self._collect_data_in_node(child))
         return id_list
 
+    def _collect_node(self, node, target_type=None):
+        id_list = []
+        if self.is_data_virtual_node(node):
+            return []
+
+        node_type = node.get('type')
+        if not target_type or node_type in target_type:
+            id_list.append(node['id'])
+
+        if node_type == 'group':
+            if 'children' in node:
+                for child in node['children']:
+                    id_list.extend(self._collect_node(child, target_type=target_type))
+
+        return id_list
+
     def deactivate(self):
         """
         Clear activated data
@@ -408,6 +427,21 @@ def reactive(self):
         for _group_id in self.activated_group:
             self.activate(_group_id)
 
+    def get_matched_data_multiple_source(self, flow):
+        matched_data = self.temp_mock_tree.get_matched_data(flow)
+        if matched_data:
+            return {
+                'data': matched_data,
+                'parent': self.temp_mock_tree.root
+            }
+
+        matched_data = self.get_matched_data(flow)
+        if matched_data:
+            return {
+                'data': matched_data,
+                'parent': list(self.activated_group.values())[0]
+            }
+
     def get_matched_data(self, flow):
         """
         Find matched mock data from activated data
@@ -510,7 +544,7 @@ def _make_data_http_data(self, raw_data, data):
             _data_name = data['name'] if data.get('name') else self._adapter._get_data_name(data)
             _data_rule = data['rule'] if data.get('rule') else self._adapter._get_data_rule(data['request'])
             if 'data' in data['request']:
-                data['request']['data'] = self._flow_data_2_str(data['request']['data'])
+                data['request']['data'] = utils.flow_data_2_str(data['request']['data'])
         else:
             _data_name = data.get('name')
             _data_rule = {'request.url': '(?=.*YOUR-REQUEST-PATH)(?=.*PARAMS)'}
@@ -521,7 +555,7 @@ def _make_data_http_data(self, raw_data, data):
             data['response'] = dict(raw_data['response'])
 
             if 'data' in data['response']:
-                data['response']['data'] = self._flow_data_2_str(data['response']['data'])
+                data['response']['data'] = utils.flow_data_2_str(data['response']['data'])
         else:
             data['response'] = {}
 
@@ -555,14 +589,11 @@ def add_data(self, parent_id, raw_data, **kwargs):
             raise UnsupportedType
 
         parent_node = None
-        if parent_id == 'tmp_group':
-            parent_node = self.tmp_group
-        elif parent_id:
-            parent_node = self.id_map.get(parent_id)
-            if not parent_node:
-                raise IDNotFound(parent_id)
-            if parent_node['type'] != 'group':
-                raise OnlyGroupCanContainAnyOtherObject
+        parent_node = self.id_map.get(parent_id)
+        if not parent_node:
+            raise IDNotFound(parent_id)
+        if parent_node['type'] != 'group':
+            raise OnlyGroupCanContainAnyOtherObject
 
         data = self._make_data(raw_data, **kwargs)
         data['parent_id'] = parent_id
@@ -589,19 +620,6 @@ def add_data(self, parent_id, raw_data, **kwargs):
 
         return _data_id
 
-    def _flow_str_2_data(self, data_str):
-        if not isinstance(data_str, str):
-            return data_str
-        try:
-            return json.loads(data_str)
-        except Exception:
-            return data_str
-
-    def _flow_data_2_str(self, data):
-        if isinstance(data, str):
-            return data
-        return json.dumps(data, ensure_ascii=False)
-
     def add_group(self, data):
         ignore_key = self.add_group_ignore_keys | self.unsave_keys
         new_group = {k: data[k] for k in data if k not in ignore_key}
@@ -900,18 +918,17 @@ def _get_node_parent(self, node):
     # -----
 
     def save_data(self, data):
-        if len(self.activated_group) > 0:
-            # TODO use self.save_to_group_id
-            target_group_id = list(self.activated_group.keys())[0]
-            self.add_data(target_group_id, data)
-        else:
-            self.add_data('tmp_group', data)
+        if len(self.activated_group) == 0:
+            raise ActivateGroupNotFound
+
+        target_group_id = list(self.activated_group.keys())[0]
+        self.add_data(target_group_id, data)
 
     # -----
     # Editor
     # -----
 
-    def update_group(self, _id, data, save=True):
+    def update_group(self, _id, data, save=True, **kwargs):
         node = self.id_map.get(_id)
         if not node:
             raise IDNotFound(_id)
@@ -930,7 +947,7 @@ def update_group(self, _id, data, save=True):
         elif 'label' in data and isinstance(data['label'], list):
             data['label'].sort(key=lambda x:x.get('name', '').lower())
 
-        message = self._adapter._update_group(data) if save else None
+        message = self._adapter._update_group(data, **kwargs) if save else None
 
         # Update node
         # 1. Add new key into node
@@ -1121,6 +1138,9 @@ def delete_by_query(self, query):
 
         context.emit('datamanagerUpdate')
 
+    def update_by_query(self, query, data):
+        return self.update_group(data.get('id'), data, query=query)
+
 
 # -----------------
 # Exceptions
@@ -1130,6 +1150,9 @@ class DumpPropError(Exception):
     pass
 
 
+class ActivateGroupNotFound(Exception):
+    pass
+
 
 class RootNotSet(Exception):
     pass
diff --git a/lyrebird/mock/dm/file_data_adapter.py b/lyrebird/mock/dm/file_data_adapter.py
index 77d355c4c..cf576c730 100644
--- a/lyrebird/mock/dm/file_data_adapter.py
+++ b/lyrebird/mock/dm/file_data_adapter.py
@@ -67,7 +67,7 @@ def _get_group_children(self, id_):
     def _add_group(self, data, **kwargs):
         self._save_prop()
 
-    def _update_group(self, data):
+    def _update_group(self, data, **kwargs):
         id_ = data['id']
         node = self.context.id_map.get(id_)
 
diff --git a/lyrebird/mock/dm/temp_mock.py b/lyrebird/mock/dm/temp_mock.py
new file mode 100644
index 000000000..e97b2b8bf
--- /dev/null
+++ b/lyrebird/mock/dm/temp_mock.py
@@ -0,0 +1,166 @@
+import uuid
+import traceback
+from datetime import datetime
+from urllib.parse import urlparse
+from collections import OrderedDict
+
+from lyrebird import application
+from lyrebird.log import get_logger
+from lyrebird.mock.dm.match import MatchRules
+from lyrebird.utils import flow_data_2_str, render
+
+
+logger = get_logger()
+
+
+class TempMock:
+    def __init__(self):
+        self.root = {
+            'id': 'tmp_group',
+            'type': 'group',
+            'name': 'Temp Mock',
+            'label': [],
+            'children': []
+        }
+        self.activated_data = OrderedDict()
+
+    def get(self):
+        return self.root
+    
+    def get_matched_data(self, flow):
+        _matched_data = []
+        for data in self.activated_data.values():
+            if MatchRules.match(flow, data.get('rule')):
+                _matched_data.append(data)
+                break
+
+        for response_data in _matched_data:
+            if 'response' not in response_data:
+                continue
+            if 'data' not in response_data['response']:
+                continue
+            if not response_data['response']['data']:
+                continue
+
+            origin_response_data = response_data['response']['data']
+            try:
+                response_data['response']['data'] = render(response_data['response']['data'])
+            except Exception:
+                response_data['response']['data'] = origin_response_data
+                logger.warning(f'Format response data error! {response_data["request"]["url"]}\n {traceback.format_exc()}')
+
+        return _matched_data
+
+    def add_data(self, raw_data):
+        if not isinstance(raw_data, dict):
+            raise DataObjectShouldBeADict
+
+        data = dict(raw_data)
+        data_id = str(uuid.uuid4())
+        data['id'] = data_id
+
+        if 'request' in data:
+            data['request'] = dict(raw_data['request'])
+
+            _data_name = data['name'] if data.get('name') else self._get_data_name(data)
+            _data_rule = data['rule'] if data.get('rule') else self._get_data_rule(data['request'])
+            if 'data' in data['request']:
+                data['request']['data'] = flow_data_2_str(data['request']['data'])
+        else:
+            _data_name = data.get('name')
+            _data_rule = {'request.url': '(?=.*YOUR-REQUEST-PATH)(?=.*PARAMS)'}
+            data['request'] = {}
+
+        data['name'] = _data_name
+        data['rule'] = _data_rule
+
+        if 'response' in data:
+            data['response'] = dict(raw_data['response'])
+
+            if 'data' in data['response']:
+                data['response']['data'] = flow_data_2_str(data['response']['data'])
+        else:
+            data['response'] = {}
+
+        self.activated_data[data_id] = data
+        self.activated_data.move_to_end(data_id, last=False)
+
+        data_node = {
+            'id': data_id,
+            'name': data.get('name'),
+            'type': 'data',
+            'parent_id': 'tmp_group'
+        }
+        self.root['children'].insert(0, data_node)
+
+        return data_id
+
+    def delete_by_query(self, query):
+        if not query.get('id'):
+            return
+        ids = query['id']
+
+        for id_ in ids:
+            if id_ in self.activated_data:
+                del self.activated_data[id_]
+
+        for child in self.root['children'][::-1]:
+            if child['id'] in ids:
+                self.root['children'].remove(child)
+
+    @staticmethod
+    def _get_data_name(data):
+        name = 'New Data'
+        request = data.get('request')
+        if not request:
+            return name
+
+        url = request.get('url')
+        if not url:
+            return name
+
+        parsed_url = urlparse(url)
+        host = parsed_url.hostname
+        path = parsed_url.path
+        if path:
+            name = path
+        elif host:
+            name = host
+        else:
+            name = url[0:100]
+
+        time_now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+        name = f'{time_now}  {name}'
+
+        return name
+
+    @staticmethod
+    def _get_data_rule(request):
+        pattern = 'YOUR-REQUEST-PATH'
+        url = request.get('url')
+        if not url:
+            return {'request.url': f'(?=.*{pattern})'}
+
+        parsed_url = urlparse(url)
+        host = parsed_url.netloc
+        path = parsed_url.path
+        query = parsed_url.query
+        if path and host:
+            pattern = path
+            if query:
+                pattern += '\?' 
+            elif url.endswith(path):
+                pattern += '$'
+
+        elif host:
+            pattern = host
+            if url.endswith(host):
+                pattern += '$'
+
+        else:
+            pattern = url
+        return {'request.url': f'(?=.*{pattern})'}
+
+
+class DataObjectShouldBeADict(Exception):
+    pass
diff --git a/lyrebird/mock/handlers/mock_handler.py b/lyrebird/mock/handlers/mock_handler.py
index 311c421ef..98b3372f5 100644
--- a/lyrebird/mock/handlers/mock_handler.py
+++ b/lyrebird/mock/handlers/mock_handler.py
@@ -1,6 +1,6 @@
 from pathlib import Path
+from lyrebird import utils
 from lyrebird.mock.dm.jsonpath import jsonpath
-import json
 from lyrebird.mock import context
 from lyrebird.log import get_logger
 from .mock_data_helper import MockDataHelper
@@ -34,15 +34,17 @@ def is_handle_ssr(handler_context):
         return True
 
     def handle(self, handler_context):
-        hit_datas = context.application.data_manager.get_matched_data(handler_context.flow)
+        hit_datas_info = context.application.data_manager.get_matched_data_multiple_source(handler_context.flow)
+        if not hit_datas_info:
+            return
+
+        hit_datas = hit_datas_info['data']
         if len(hit_datas) <= 0:
             return
 
         # TODO rules of hitting multiple mock data
         hit_data = hit_datas[0]
-
-        activated_groups = context.application.data_manager.activated_group
-        activated_group = list(activated_groups.values())[0]
+        activated_group = hit_datas_info['parent']
 
         is_ssr = MockHandler.is_handle_ssr(handler_context)
         if is_ssr:
@@ -56,9 +58,9 @@ def handle(self, handler_context):
 
             resp_jsonpath = config.get(CONFIG_MOCK_REQUEST_SSR_MOCK_DATA_JSONPATH)
             if resp_jsonpath:
-                request_data_update[resp_key] = context.application.data_manager._flow_str_2_data(request_data_update[resp_key])
+                request_data_update[resp_key] = utils.flow_str_2_data(request_data_update[resp_key])
                 target_response_data = jsonpath.search(request_data_update[resp_key], resp_jsonpath, find_one=True)
-                request_data_update[resp_key] = context.application.data_manager._flow_data_2_str(target_response_data)
+                request_data_update[resp_key] = utils.flow_data_2_str(target_response_data)
 
             if 'data' not in handler_context.flow['request']:
                 handler_context.flow['request']['data'] = {}
diff --git a/lyrebird/utils.py b/lyrebird/utils.py
index 9e41534be..f238b8d45 100644
--- a/lyrebird/utils.py
+++ b/lyrebird/utils.py
@@ -1,5 +1,6 @@
 import re
 import os
+import json
 import math
 import time
 import socket
@@ -315,6 +316,21 @@ def url_decode_for_list_or_dict(decode_obj, decode_key):
             url_decode(decode_obj[decode_key], key)
 
 
+def flow_str_2_data(data_str):
+    if not isinstance(data_str, str):
+        return data_str
+    try:
+        return json.loads(data_str)
+    except Exception:
+        return data_str
+
+
+def flow_data_2_str(data):
+    if isinstance(data, str):
+        return data
+    return json.dumps(data, ensure_ascii=False)
+
+
 class CaseInsensitiveDict(dict):
     '''
     A dict data-structure that ignore key's case.
diff --git a/lyrebird/version.py b/lyrebird/version.py
index 7388cfd6b..02d7d4d45 100644
--- a/lyrebird/version.py
+++ b/lyrebird/version.py
@@ -1,3 +1,3 @@
-IVERSION = (2, 22, 0)
+IVERSION = (2, 23, 0)
 VERSION = ".".join(str(i) for i in IVERSION)
 LYREBIRD = "Lyrebird " + VERSION
diff --git a/tests/test_dm.py b/tests/test_dm.py
index 279cca176..647059e4d 100644
--- a/tests/test_dm.py
+++ b/tests/test_dm.py
@@ -650,6 +650,49 @@ def test_activate_groups(data_manager):
     assert len(flow_B_mock_data) == 1
 
 
+def test_activate_multiple_only_store(data_manager):
+    flow_a = {
+        'request': {
+            'url': 'http://somehost/api/search'
+        }
+    }
+    data_manager.activate('groupA-UUID')
+    flow_mock_info = data_manager.get_matched_data_multiple_source(flow_a)
+    assert len(flow_mock_info['data']) == 1
+
+
+def test_activate_multiple_all(data_manager):
+    temp_mock_data_id = data_manager.temp_mock_tree.add_data({
+        'request': {
+            'url': 'http://hostname.com/pathA/pathB?param=1'
+        },
+        'response': {}
+    })
+
+    data_manager.activate('groupA-UUID')
+
+    flow_mock_by_stored_data = {
+        'request': {
+            'url': 'http://somehost/api/search'
+        }
+    }
+
+    flow_mock_info = data_manager.get_matched_data_multiple_source(flow_mock_by_stored_data)
+    assert len(flow_mock_info['data']) == 1
+    assert flow_mock_info['data'][0]['id'] == 'dataA-UUID'
+    assert flow_mock_info['parent']['id'] == 'groupA-UUID'
+
+    flow_mock_by_temp = {
+        'request': {
+            'url': 'http://hostname.com/pathA/pathB?param=1'
+        }
+    }
+    flow_mock_info = data_manager.get_matched_data_multiple_source(flow_mock_by_temp)
+    assert len(flow_mock_info['data']) == 1
+    assert flow_mock_info['data'][0]['id'] == temp_mock_data_id
+    assert flow_mock_info['parent']['id'] == 'tmp_group'
+
+
 def test_activate_groups_with_extra_info(data_manager):
     flow_A = {
         'request': {
@@ -926,6 +969,21 @@ def test_update_group_change_value(data_manager):
     assert data_manager.id_map[update_group_id]['name'] == new_group_name
 
 
+def test_update_by_query(data_manager):
+    query = {
+        'tab': 'PIPELINE',
+        'key': 'value'
+    }
+    new_group_name = 'groupA-new-name'
+    update_group_id = 'groupA-UUID'
+
+    update_data = deepcopy(data_manager.id_map[update_group_id])
+    update_data['name'] = new_group_name
+    data_manager.update_by_query(query, update_data)
+
+    assert data_manager.id_map[update_group_id]['name'] == new_group_name
+
+
 def test_update_group_key_add_and_delete(data_manager):
     new_group_key = 'groupA-new-info'
     new_group_value = 'groupA-new-value'
@@ -957,6 +1015,36 @@ def test_update_data(data_manager):
     assert data_manager.get(update_data_id)['name'] == new_data_name
 
 
+def test_save_data(data_manager):
+    data = {
+        'id': 'some_id',
+        'size': 100,
+        'duration': 0.5,
+        'start_time': '',
+        'client_address': '',
+        'request': {
+            'url': 'http://hostname.com/pathA/pathB?param=1',
+            'headers': {}
+        },
+        'response': {
+            'headers': {},
+            'data': {},
+            'code': 200
+        }
+    }
+
+    group_a = data_manager.id_map.get('groupA-UUID')
+    origin_child_ids = set([c['id'] for c in group_a['children']])
+
+    data_manager.activate('groupA-UUID')
+    data_manager.save_data(data)
+
+    new_child_ids = set([c['id'] for c in group_a['children']])
+
+    assert origin_child_ids < new_child_ids
+    assert len(new_child_ids) - len(origin_child_ids) == 1
+
+
 def test_delete(data_manager):
     data_manager.delete('groupB-UUID')
     assert 'groupB-UUID' not in data_manager.id_map
diff --git a/tests/test_dm_api.py b/tests/test_dm_api.py
index f301d0033..dbb376808 100644
--- a/tests/test_dm_api.py
+++ b/tests/test_dm_api.py
@@ -87,6 +87,12 @@ def test_group_get_with_group_id(client):
     assert resp.json['code'] == 1000
 
 
+def test_group_get_with_tmp_group(client):
+    group_id = 'tmp_group'
+    resp = client.get(f'/api/group/{group_id}')
+    assert resp.json['code'] == 1000
+
+
 def test_group_get_children(client):
     group_id = 'groupA-UUID'
     resp = client.get(f'/api/group/{group_id}?childrenOnly=true')
@@ -122,12 +128,47 @@ def test_group_put(client):
     assert resp.json['code'] == 1000
 
 
+
+def test_group_put_with_query(client):
+    resp = client.put('/api/group', json={
+        'query': {
+            'tab': 'PIPELINE'
+        },
+        'data': {
+            'id': 'groupA-UUID',
+            'name': 'groupA-UUID-new',
+            'parent_id': 'root'
+        },
+        
+    })
+    assert resp.json['code'] == 1000
+
+
 def test_group_delete_with_group_id(client):
     group_id = 'groupA-UUID'
     resp = client.delete(f'/api/group/{group_id}')
     assert resp.json['code'] == 1000
 
 
+def test_group_delete_by_query(client):
+    resp = client.delete(f'/api/group', json={
+        'query': {
+            'id': ['groupA-UUID']
+        }
+    })
+    assert resp.json['code'] == 1000
+
+
+def test_group_delete_with_tmp_group(client):
+    resp = client.delete(f'/api/group', json={
+        'query': {
+            'id': ['groupA-UUID']
+        },
+        'parent_id': 'tmp_group'
+    })
+    assert resp.json['code'] == 1000
+
+
 def test_group_delete_with_query(client):
     resp = client.delete('/api/group', json={
         'query': {
@@ -179,6 +220,29 @@ def test_data_post(client):
     assert resp.json['code'] == 1000
 
 
+def test_data_post_with_tmp_group(client):
+    resp = client.post('/api/data', json={
+        'parent_id': 'tmp_group',
+        'data': {
+            'id': 'some_id',
+            'size': 100,
+            'duration': 0.5,
+            'start_time': '',
+            'client_address': '',
+            'request': {
+                'url': 'http://hostname.com/pathA/pathB?param=1',
+                'headers': {}
+            },
+            'response': {
+                'headers': {},
+                'data': {},
+                'code': 200
+            }
+        }
+    })
+    assert resp.json['code'] == 1000
+
+
 def test_data_delete(client):
     data_id = 'dataA-UUID'
     resp = client.delete(f'/api/data/{data_id}')
diff --git a/tests/test_dm_temp.py b/tests/test_dm_temp.py
new file mode 100644
index 000000000..3ee770879
--- /dev/null
+++ b/tests/test_dm_temp.py
@@ -0,0 +1,280 @@
+import re
+import json
+import pytest
+import codecs
+import tarfile
+import lyrebird
+from pathlib import Path
+from copy import deepcopy
+from typing import NamedTuple
+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 = {
+    'id': 'dataA-UUID',
+    'name': 'dataA',
+    'rule': {
+        'request.url': '/api/search'
+    },
+    'request': {
+        'url': 'http://unittest.com/api/search'
+    }
+}
+
+dataB = {
+    'id': 'dataB-UUID',
+    'name': 'dataB',
+    'rule': {
+        'request.url': '/api/location'
+    },
+    'request': {
+        'url': 'http://unittest.com/api/location'
+    }
+}
+
+
+prop = {
+    'id': 'root',
+    'name': 'root',
+    'type': 'group',
+    'parent_id': None,
+    'children': [
+        {
+            'id': 'groupA-UUID',
+            'name': 'groupA',
+            'type': 'group',
+            'parent_id': 'root',
+            'super_id': 'groupB-UUID',
+            'children': [
+                {
+                    'id': 'dataA-UUID',
+                    'name': 'dataA',
+                    'type': 'data',
+                    'parent_id': 'groupA-UUID'
+                },
+                {
+                    'id': 'dataB-UUID',
+                    'name': 'dataB',
+                    'type': 'data',
+                    'parent_id': 'groupA-UUID'
+                },
+            ]
+        }
+    ]
+}
+
+
+MockConfigManager = NamedTuple('MockConfigManager', [('config', dict)])
+
+class FakeSocketio:
+
+    def emit(self, event, *args, **kwargs): {
+        print(f'Send event {event} args={args} kw={kwargs}')
+    }
+
+
+@pytest.fixture
+def root(tmpdir):
+    with codecs.open(tmpdir / 'dataA-UUID', 'w') as f:
+        json.dump(dataA, f)
+    with codecs.open(tmpdir / 'dataB-UUID', 'w') as f:
+        json.dump(dataB, f)
+    with codecs.open(tmpdir / '.lyrebird_prop', 'w') as f:
+        json.dump(prop, f)
+    return tmpdir
+
+
+@pytest.fixture
+def data_manager(root, tmpdir):
+    _conf = {
+        'ip': '127.0.0.1',
+        'mock.port': 9090,
+    }
+    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)
+    _dm.set_root(root)
+
+    data = {
+        'request': {
+            'url': 'http://somehost/api/detail',
+            'headers': {}
+        },
+        'response': {
+            'headers': {},
+            'data': {},
+            'code': 200
+        }
+    }
+    _dm.temp_mock_tree.add_data(data)
+    return _dm
+
+
+def test_get(data_manager):
+    root = data_manager.temp_mock_tree.get()
+    assert root['id'] == 'tmp_group'
+    assert root['type'] == 'group'
+    assert root['name'] == 'Temp Mock'
+    assert len(root['children']) == 1
+
+
+def test_match(data_manager):
+    flow_a = {
+        'request': {
+            'url': 'http://somehost/api/search'
+        }
+    }
+    flow_a_mock_data = data_manager.temp_mock_tree.get_matched_data(flow_a)
+    assert len(flow_a_mock_data) == 0
+
+    flow_b = {
+        'request': {
+            'url': 'http://somehost/api/detail'
+        }
+    }
+    flow_b_mock_data = data_manager.temp_mock_tree.get_matched_data(flow_b)
+    assert len(flow_b_mock_data) == 1
+
+
+def test_add(data_manager):
+    data = {
+        'request': {
+            'url': 'http://hostname.com/pathA/pathB?param=1'
+        },
+        'response': {}
+    }
+    new_data_id = data_manager.temp_mock_tree.add_data(data)
+    assert new_data_id
+
+    found_new_data = False
+    for child in data_manager.temp_mock_tree.root['children']:
+        if child['id'] == new_data_id:
+            found_new_data = True
+            break
+    assert found_new_data
+
+    assert new_data_id in data_manager.temp_mock_tree.activated_data
+
+    parsed_url = urlparse(data['request']['url'])
+    parsed_url_path = parsed_url.path
+
+    _new_data = data_manager.temp_mock_tree.activated_data.get(new_data_id)
+    assert parsed_url_path in _new_data['name']
+    assert f'(?=.*{parsed_url_path}\?)' == _new_data['rule']['request.url']
+
+
+def test_add_data_request_url_no_params(data_manager):
+    data = {
+        'request': {
+            'url': f'http://hostname.com/pathA/pathB'
+        },
+        'response': {}
+    }
+    new_data_id = data_manager.temp_mock_tree.add_data(data)
+    assert new_data_id
+
+    found_new_data = False
+    for child in data_manager.temp_mock_tree.root['children']:
+        if child['id'] == new_data_id:
+            found_new_data = True
+            break
+    assert found_new_data
+
+    assert new_data_id in data_manager.temp_mock_tree.activated_data
+
+    parsed_url = urlparse(data['request']['url'])
+    parsed_url_path = parsed_url.path
+
+    _new_data = data_manager.temp_mock_tree.activated_data.get(new_data_id)
+    assert parsed_url_path in _new_data['name']
+
+    assert f'(?=.*{parsed_url_path}$)' == _new_data['rule']['request.url']
+
+
+def test_add_data_request_url_no_path(data_manager):
+    data = {
+        'request': {
+            'url': f'http://hostname.com'
+        },
+        'response': {}
+    }
+    new_data_id = data_manager.temp_mock_tree.add_data(data)
+    assert new_data_id
+
+    found_new_data = False
+    for child in data_manager.temp_mock_tree.root['children']:
+        if child['id'] == new_data_id:
+            found_new_data = True
+            break
+    assert found_new_data
+
+    assert new_data_id in data_manager.temp_mock_tree.activated_data
+
+    parsed_url = urlparse(data['request']['url'])
+    parsed_url_hostname = parsed_url.hostname
+
+    _new_data = data_manager.temp_mock_tree.activated_data.get(new_data_id)
+    assert parsed_url_hostname in _new_data['name']
+
+    assert f'(?=.*{parsed_url_hostname}$)' == _new_data['rule']['request.url']
+
+
+def test_add_data_request_url_illegal(data_manager):
+    url_illegal = 'EXAMPLE'
+    data = {
+        'request': {
+            'url': url_illegal
+        },
+        'response': {}
+    }
+    new_data_id = data_manager.temp_mock_tree.add_data(data)
+    assert new_data_id
+
+    found_new_data = False
+    for child in data_manager.temp_mock_tree.root['children']:
+        if child['id'] == new_data_id:
+            found_new_data = True
+            break
+    assert found_new_data
+
+    assert new_data_id in data_manager.temp_mock_tree.activated_data
+
+    _new_data = data_manager.temp_mock_tree.activated_data.get(new_data_id)
+    assert url_illegal in _new_data['name']
+
+    assert f'(?=.*{url_illegal})' == _new_data['rule']['request.url']
+
+
+def test_delete_by_query(data_manager):
+    data = {
+        'request': {
+            'url': 'http://hostname.com/pathA/pathB?param=1',
+            'headers': {}
+        },
+        'response': {
+            'headers': {},
+            'data': {},
+            'code': 200
+        }
+    }
+    new_data_id = data_manager.temp_mock_tree.add_data(data)
+    assert new_data_id
+
+    query = {
+        'id': [new_data_id]
+    }
+    data_manager.temp_mock_tree.delete_by_query(query)
+    found_delete_data = False
+    for child in data_manager.temp_mock_tree.root['children']:
+        if child['id'] == new_data_id:
+            found_delete_data = True
+            break
+    assert found_delete_data == False
+
+    assert new_data_id not in data_manager.temp_mock_tree.activated_data