feat(overmind-devtools-vscode): trigger devtool client on codelense

Author: christianalfoni

packages/node_modules/overmind-devtools-client/DevtoolBackend.js

@@ -104,6 +104,15 @@ class DevtoolBackend {
       )
     })
   }
+  sendMessageToDevtool(message) {
+    console.log('Sending message to devtool!')
+    this.devtoolSocket.send(
+      JSON.stringify({
+        type: 'message',
+        data: message,
+      })
+    )
+  }
   onClientMessage(message) {
     if (this.options.onMessage) {
       this.options.onMessage(message)

packages/node_modules/overmind-devtools-client/src/components/ActionSelector/index.tsx

@@ -1,13 +1,31 @@
-import { createElement, FunctionComponent, Fragment } from 'react'
+import {
+  createElement,
+  FunctionComponent,
+  Fragment,
+  useEffect,
+  useRef,
+} from 'react'
 import * as styles from './styles'
 import { useOvermind } from '../../overmind'
 import { nameToColor } from '../../overmind/utils'
 import { css } from 'emotion'
 
 const ActionSelector: FunctionComponent = () => {
   const { state, actions } = useOvermind()
+  const queryActionRef = useRef(null)
   const app = state.currentApp
 
+  useEffect(
+    () => {
+      if (app.isQueryingAction) {
+        setTimeout(() => {
+          queryActionRef.current.focus()
+        })
+      }
+    },
+    [app.isQueryingAction]
+  )
+
   if (app.isQueryingAction) {
     return (
       <div className={styles.wrapper}>
@@ -31,6 +49,7 @@ const ActionSelector: FunctionComponent = () => {
           </div>
           <input
             autoFocus
+            ref={queryActionRef}
             placeholder="Search for action..."
             onBlur={() => actions.toggleQueryingAction()}
             className={css(

packages/node_modules/overmind-devtools-client/src/overmind/actions.ts

@@ -1,4 +1,4 @@
-import { Action, pipe, Operator, AsyncAction } from 'overmind'
+import { Action, pipe, Operator, AsyncAction, mutate, run } from 'overmind'
 import {
   Message,
   Tab,
@@ -32,6 +32,13 @@ export const onMessage: Operator<Message> = pipe(
     [ExecutionType.ACTION_END]: o.updateAction(),
     [ExecutionType.OPERATOR_ASYNC]: o.updateOperatorAsync(),
     [ExecutionType.GETTER]: o.runGetterMutation(),
+    [ExecutionType.RUN_ACTION]: mutate(({ state }, message) => {
+      console.log('GOT THE MESSAGE!!!')
+      state.currentTab = Tab.Actions
+      state.currentApp.actionQuery = message.data
+      state.currentApp.actionQueryPayload = ''
+      state.currentApp.isQueryingAction = true
+    }),
   })
 )
 

packages/node_modules/overmind-devtools-client/src/overmind/operators.ts

@@ -37,6 +37,7 @@ import {
 export const ensureCurrentApp: () => Operator<Message> = () =>
   mutate(({ state }, message) => {
     if (!state.currentAppName) {
+      console.log(JSON.stringify(message))
       state.currentAppName = message.appName
     }
   })

packages/node_modules/overmind-devtools-client/src/overmind/types.ts

@@ -212,6 +212,7 @@ export enum ExecutionType {
   ACTION_END = 'action:end',
   GETTER = 'getter',
   STATE = 'state',
+  RUN_ACTION = 'runAction',
 }
 
 export enum AppMessageType {

packages/node_modules/overmind-devtools-vscode/src/DevtoolsPanel.ts

@@ -64,4 +64,7 @@ export class DevtoolsPanel {
     )
     this._panel.webview.html = content
   }
+  reveal() {
+    this._panel.reveal()
+  }
 }

packages/node_modules/overmind-devtools-vscode/src/extension.ts

@@ -39,7 +39,18 @@ export function activate(context: vscode.ExtensionContext) {
           context,
           appName,
           devtoolBackend.clientSockets[appName],
-          actions
+          actions,
+          (name) => {
+            devtoolsPanel.reveal()
+            console.log('Sending runAction!', name)
+            devtoolBackend.sendMessageToDevtool({
+              appName,
+              message: {
+                type: 'runAction',
+                data: name,
+              },
+            })
+          }
         )
       }
     },

packages/node_modules/overmind-devtools-vscode/src/runActions.ts

@@ -7,7 +7,8 @@ export const initRunActions = (
   context: vscode.ExtensionContext,
   appName: string,
   appNameConnection: { send(payload: string): void },
-  avaiableActions: string[]
+  avaiableActions: string[],
+  reveal: (name: string) => void
 ) => {
   const sendExecuteMessage = (actionName: string, payload: any = undefined) => {
     appNameConnection.send(
@@ -60,6 +61,8 @@ export const initRunActions = (
     vscode.commands.registerCommand(
       'overmind-devtools.runAction',
       (preSelectActionName: string, needsPayload: boolean) => {
+        reveal(preSelectActionName)
+        /*
         const foundAction = getExactOrSingleMatch(preSelectActionName)
         if (foundAction) {
           executeAction(foundAction, needsPayload)
@@ -80,6 +83,7 @@ export const initRunActions = (
           quickPick.onDidHide(() => quickPick.dispose())
           quickPick.show()
         }
+        */
       }
     )
   )

packages/overmind-website/src/index.tsx

@@ -15,7 +15,7 @@ const overmind = createOvermind(
         devtools: false,
       }
     : {
-        devtools: 'localhost:3032',
+        devtools: 'localhost:3031',
       }
 )
 setConfig({