fix(overmind-devtools): fix actions list size

Author: christianalfoni

packages/node_modules/overmind-devtools/backend/dev.html

@@ -37,10 +37,10 @@
     <script>
       async function checkDev() {
         try {
-          const response = await fetch('http://localhost:3000')
+          const response = await fetch('http://localhost:3333')
 
           if (response.status >= 200 && response.status < 300) {
-            location.href = 'http://localhost:3000'
+            location.href = 'http://localhost:3333'
           } else {
             setTimeout(checkDev, 250)
           }

packages/node_modules/overmind-devtools/package.json

@@ -9,7 +9,7 @@
 		"overmind-devtools": "bin.js"
 	},
 	"scripts": {
-		"start": "concurrently \"electron ./backend/main\" \"webpack-dev-server --port 3000\"",
+		"start": "concurrently \"electron ./backend/main\" \"webpack-dev-server --port 3333\"",
 		"build": "webpack",
 		"typecheck": "tsc --noEmit",
 		"test": "jest --runInBand",

packages/node_modules/overmind-devtools/src/components/ActionOperator/styles.ts

@@ -18,6 +18,7 @@ export const effectArgs = css({
 
 export const value = css({
   marginLeft: 'auto',
+  marginRight: '0.5rem',
   display: 'flex',
   alignItems: 'center',
 })

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

@@ -2,6 +2,7 @@ import { createElement, FunctionComponent, Fragment } 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()
@@ -20,16 +21,31 @@ const ActionSelector: FunctionComponent = () => {
         />
 
         <div className={styles.inputWrapper}>
-          <div className={styles.suggestion}>{app.actionQuerySuggestion}</div>
+          <div
+            className={css(
+              styles.suggestion,
+              app.actionQuery.length ? styles.inputActive : null
+            )}
+          >
+            {app.actionQuerySuggestion}
+          </div>
           <input
             autoFocus
             placeholder="Search for action..."
             onBlur={() => actions.toggleQueryingAction()}
-            className={styles.input}
+            className={css(
+              styles.input,
+              app.actionQuery.length ? styles.inputActive : null
+            )}
             value={app.actionQuery}
             onChange={(event) =>
               actions.changeActionQuery(event.currentTarget.value)
             }
+            onKeyDown={(event) => {
+              if (event.keyCode === 13) {
+                actions.submitQueryAction()
+              }
+            }}
           />
         </div>
         <div className={styles.resultWrapper}>

packages/node_modules/overmind-devtools/src/components/ActionSelector/styles.ts

@@ -40,10 +40,16 @@ export const input = css({
   },
 })
 
+export const inputActive = css({
+  paddingLeft: '1.5rem',
+})
+
 export const suggestion = css({
   position: 'absolute',
   display: 'flex',
   alignItems: 'center',
+  height: '100%',
+  boxSizing: 'border-box',
   left: '-1rem',
   fontSize: 16,
   padding: '0.5rem',
@@ -68,7 +74,9 @@ export const noSelectedAction = css({
 export const resultWrapper = css({
   position: 'absolute',
   top: '100%',
-  width: '100%',
+  minWidth: '100%',
+  maxHeight: '75vh',
+  overflowY: 'scroll',
   left: 0,
   backgroundColor: colors.dark3,
   borderBottomLeftRadius: 3,

packages/node_modules/overmind-devtools/src/components/Inspector/index.tsx

@@ -224,7 +224,7 @@ const ValueComponent: FunctionComponent<ValueComponentProps> = ({
             {path[path.length - 1]}:
           </span>
         ) : null}
-        "{value}"
+        "{value.length > 50 ? value.substr(0, 50) + '...' : value}"
       </div>
     )
   }