feat(api): custom inspector noSelectionText option

Akryum · Akryum · commit 8c41e58d9593 · 2021-04-20T18:41:12.000+02:00
diff --git a/docs/plugin/api-reference.md b/docs/plugin/api-reference.md
@@ -164,12 +164,15 @@ The options are:
 - `icon` (optional): [Material icon code](https://material.io/resources/icons/), for example `'star'`
 - `treeFilterPlaceholder` (optional): placeholder of the filter input above the tree
 - `stateFilterPlaceholder` (optional): placeholder of the filter input in the state inspector
+- `noSelectionText` (optional): text displayed in the inspector pane when no node is selected
 
 Example:
 
 ```js
+const INSPECTOR_ID = 'test-inspector'
+
 api.addInspector({
-  id: 'test-inspector',
+  id: INSPECTOR_ID,
   label: 'Test inspector',
   icon: 'tab_unselected',
   treeFilterPlaceholder: 'Search for test...'
diff --git a/packages/api/src/api/api.ts b/packages/api/src/api/api.ts
@@ -72,6 +72,7 @@ export interface CustomInspectorOptions {
   icon?: string
   treeFilterPlaceholder?: string
   stateFilterPlaceholder?: string
+  noSelectionText?: string
 }
 
 export interface CustomInspectorNode {
diff --git a/packages/app-backend-core/src/index.ts b/packages/app-backend-core/src/index.ts
@@ -25,9 +25,9 @@ import {
   getComponentInstance
 } from './component'
 import { addQueuedPlugins, addPlugin, sendPluginList, addPreviouslyRegisteredPlugins } from './plugin'
-import { PluginDescriptor, SetupFunction, TimelineLayerOptions, App, TimelineEventOptions, CustomInspectorOptions } from '@vue/devtools-api'
-import { registerApp, selectApp, mapAppRecord, getAppRecordId, waitForAppsRegistration } from './app'
-import { sendInspectorTree, getInspector, getInspectorWithAppId, sendInspectorState, editInspectorState } from './inspector'
+import { PluginDescriptor, SetupFunction, TimelineLayerOptions, TimelineEventOptions, CustomInspectorOptions } from '@vue/devtools-api'
+import { registerApp, selectApp, mapAppRecord, waitForAppsRegistration } from './app'
+import { sendInspectorTree, getInspector, getInspectorWithAppId, sendInspectorState, editInspectorState, sendCustomInspectors } from './inspector'
 import { showScreenshot } from './timeline-screenshot'
 
 let ctx: BackendContext
@@ -257,17 +257,7 @@ async function connect () {
   // Custom inspectors
 
   ctx.bridge.on(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_LIST, () => {
-    ctx.bridge.send(BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_LIST, {
-      inspectors: ctx.customInspectors.map(i => ({
-        id: i.id,
-        appId: getAppRecordId(i.app),
-        pluginId: i.plugin.descriptor.id,
-        label: i.label,
-        icon: i.icon,
-        treeFilterPlaceholder: i.treeFilterPlaceholder,
-        stateFilterPlaceholder: i.stateFilterPlaceholder
-      }))
-    })
+    sendCustomInspectors(ctx)
   })
 
   ctx.bridge.on(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_TREE, ({ inspectorId, appId, treeFilter }) => {
diff --git a/packages/app-backend-core/src/inspector.ts b/packages/app-backend-core/src/inspector.ts
@@ -35,3 +35,18 @@ export async function editInspectorState (inspector: CustomInspector, nodeId: st
     value: state.value != null ? parse(state.value, true) : state.value
   })
 }
+
+export async function sendCustomInspectors (ctx: BackendContext) {
+  ctx.bridge.send(BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_LIST, {
+    inspectors: ctx.customInspectors.map(i => ({
+      id: i.id,
+      appId: getAppRecordId(i.app),
+      pluginId: i.plugin.descriptor.id,
+      label: i.label,
+      icon: i.icon,
+      treeFilterPlaceholder: i.treeFilterPlaceholder,
+      stateFilterPlaceholder: i.stateFilterPlaceholder,
+      noSelectionText: i.noSelectionText
+    }))
+  })
+}
diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue
@@ -2,10 +2,12 @@
 import { watch } from '@vue/composition-api'
 import { useCurrentInspector } from '.'
 import StateInspector from '../StateInspector.vue'
+import EmptyPane from '@front/features/layout/EmptyPane.vue'
 
 export default {
   components: {
-    StateInspector
+    StateInspector,
+    EmptyPane
   },
 
   setup () {
@@ -56,4 +58,11 @@ export default {
       @edit-state="editState"
     />
   </div>
+
+  <EmptyPane
+    v-else-if="inspector.noSelectionText"
+    :icon="inspector.icon"
+  >
+    {{ inspector.noSelectionText }}
+  </EmptyPane>
 </template>
diff --git a/packages/shell-dev-vue3/src/devtools-plugin/index.js b/packages/shell-dev-vue3/src/devtools-plugin/index.js
@@ -121,7 +121,8 @@ export default {
         id: 'test-inspector',
         label: 'Test inspector',
         icon: 'tab_unselected',
-        treeFilterPlaceholder: 'Search for test...'
+        treeFilterPlaceholder: 'Search for test...',
+        noSelectionText: 'Select a node to view details'
       })
 
       api.addInspector({

Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,7 @@ export interface CustomInspectorOptions {`
`72`	`72`	`icon?: string`
`73`	`73`	`treeFilterPlaceholder?: string`
`74`	`74`	`stateFilterPlaceholder?: string`
	`75`	`+ noSelectionText?: string`
`75`	`76`	`}`
`76`	`77`
`77`	`78`	`export interface CustomInspectorNode {`