feat(api): node actions for custom inspector (#1820)

Co-authored-by: Guillaume Chau <[email protected]>

Author: DamianOsipiuk

packages/api/src/api/api.ts

@@ -96,6 +96,11 @@ export interface CustomInspectorOptions {
     tooltip?: string
     action: () => void | Promise<void>
   }[]
+  nodeActions?: {
+    icon: string
+    tooltip?: string
+    action: (nodeId: string) => void | Promise<void>
+  }[]
 }
 
 export interface CustomInspectorNode {

packages/app-backend-core/src/index.ts

@@ -609,12 +609,12 @@ function connectBridge () {
     }
   })
 
-  ctx.bridge.on(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_ACTION, async ({ inspectorId, appId, actionIndex }) => {
+  ctx.bridge.on(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_ACTION, async ({ inspectorId, appId, actionIndex, actionType, args }) => {
     const inspector = await getInspectorWithAppId(inspectorId, appId, ctx)
     if (inspector) {
-      const action = inspector.actions[actionIndex]
+      const action = inspector[actionType ?? 'actions'][actionIndex]
       try {
-        await action.action()
+        await action.action(...(args ?? []))
       } catch (e) {
         if (SharedData.debugInfo) {
           console.error(e)

packages/app-backend-core/src/inspector.ts

@@ -56,6 +56,10 @@ export async function sendCustomInspectors (ctx: BackendContext) {
         icon: a.icon,
         tooltip: a.tooltip,
       })),
+      nodeActions: i.nodeActions?.map(a => ({
+        icon: a.icon,
+        tooltip: a.tooltip,
+      })),
     })
   }
   ctx.bridge.send(BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_LIST, {

packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue

@@ -2,6 +2,8 @@
 import EmptyPane from '@front/features/layout/EmptyPane.vue'
 
 import { watch, defineComponent, ref } from '@vue/composition-api'
+import { BridgeEvents } from '@vue-devtools/shared-utils'
+import { useBridge } from '@front/features/bridge'
 import { useCurrentInspector } from './composable'
 import StateInspector from '../StateInspector.vue'
 
@@ -32,11 +34,29 @@ export default defineComponent({
       }
     })
 
+    // Custom actions
+    const {
+      bridge,
+    } = useBridge()
+
+    function executeCustomAction (index: number) {
+      bridge.send(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_ACTION, {
+        inspectorId: inspector.value.id,
+        appId: inspector.value.appId,
+        actionIndex: index,
+        actionType: 'nodeActions',
+        args: [
+          inspector.value.selectedNodeId,
+        ],
+      })
+    }
+
     return {
       inspector,
       filteredState,
       editState,
       stateInspector,
+      executeCustomAction,
     }
   },
 })
@@ -58,6 +78,15 @@ export default defineComponent({
         :placeholder="inspector.stateFilterPlaceholder || 'Filter state...'"
         class="search flex-1 flat ml-2"
       />
+
+      <VueButton
+        v-for="(action, index) of inspector.nodeActions"
+        :key="index"
+        v-tooltip="action.tooltip"
+        class="icon-button flat"
+        :icon-left="action.icon"
+        @click="executeCustomAction(index)"
+      />
     </div>
 
     <StateInspector

packages/app-frontend/src/features/inspector/custom/composable.ts

@@ -17,6 +17,10 @@ export interface InspectorFromBackend {
     icon: string
     tooltip?: string
   }[]
+  nodeActions?: {
+    icon: string
+    tooltip?: string
+  }[]
 }
 
 export interface Inspector extends InspectorFromBackend {

packages/shared-utils/src/consts.ts

@@ -84,6 +84,7 @@ export enum BridgeEvents {
   TO_FRONT_CUSTOM_INSPECTOR_STATE = 'f:custom-inspector:state',
   TO_BACK_CUSTOM_INSPECTOR_EDIT_STATE = 'b:custom-inspector:edit-state',
   TO_BACK_CUSTOM_INSPECTOR_ACTION = 'b:custom-inspector:action',
+  TO_BACK_CUSTOM_INSPECTOR_NODE_ACTION = 'b:custom-inspector:node-action',
   TO_FRONT_CUSTOM_INSPECTOR_SELECT_NODE = 'f:custom-inspector:select-node',
 
   // Custom state

packages/shell-dev-vue3/src/devtools-plugin/index.js

@@ -197,6 +197,16 @@ export default {
             },
           },
         ],
+        nodeActions: [
+          {
+            icon: 'help',
+            tooltip: 'Test custom node action',
+            action: (arg1) => {
+              console.log('Node action', arg1)
+              api.selectInspectorNode('test-inspector', 'child')
+            },
+          },
+        ],
       })
 
       api.addInspector({