feat(overmind-devtools): runtime and actions called from actions

Author: christianalfoni

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

@@ -2,12 +2,21 @@ import { createElement, FunctionComponent, Fragment } from 'react'
 import { useOvermind } from '../../overmind'
 import * as styles from './styles'
 import ActionOperator from '../ActionOperator'
-import { getOperatorId, nameToColor } from '../../overmind/utils'
-import { OperatorsByPath } from '../../overmind/types'
+import {
+  getOperatorId,
+  nameToColor,
+  getOperatorsByPath,
+} from '../../overmind/utils'
+import { OperatorsByPath, Action as TAction } from '../../overmind/types'
 
-const Action: FunctionComponent = () => {
+type Props = {
+  action: TAction
+  inline?: boolean
+}
+
+const Action: FunctionComponent<Props> = ({ action, inline }) => {
   const { state } = useOvermind()
-  const operatorsByPath = state.currentOperatorsByPath
+  const operatorsByPath = getOperatorsByPath(action)
 
   function renderOperators(operatorsByPath: OperatorsByPath) {
     return operatorsByPath.map((operatorByPath, index) => {
@@ -59,6 +68,17 @@ const Action: FunctionComponent = () => {
     })
   }
 
+  if (inline) {
+    return (
+      <div className={styles.innerWrapper}>
+        <div className={styles.innerTitle}>{action.actionName}</div>
+        <div className={styles.innerContent}>
+          {operatorsByPath.map(renderOperators)}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className={styles.wrapper}>{operatorsByPath.map(renderOperators)}</div>
   )

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

@@ -8,6 +8,21 @@ export const wrapper = css({
   boxSizing: 'border-box',
 })
 
+export const innerWrapper = css({
+  margin: '0.5rem 0',
+  padding: 0,
+  border: `1px solid ${colors.blue}`,
+})
+
+export const innerTitle = css({
+  color: colors.blue,
+  padding: '0.1rem 0.5rem',
+})
+
+export const innerContent = css({
+  padding: '0.5rem',
+})
+
 export const pipe = css({
   display: 'flex',
   alignItems: 'center',

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

@@ -7,6 +7,7 @@ export const flush = css({
   borderTopRightRadius: 3,
   borderBottomRightRadius: 3,
   position: 'relative',
+  marginLeft: '0.5rem',
   ':hover div:nth-child(2)': {
     display: 'block',
     zIndex: 2,

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

@@ -13,6 +13,8 @@ import * as textStyles from '../../styles/text'
 import { css } from 'emotion'
 import { colors } from '../../theme'
 import ActionFlush from '../ActionFlush'
+import Action from '../Action'
+import { useOvermind } from 'overmind-devtools/src/overmind'
 
 type Props = {
   operator: OperatorType
@@ -25,6 +27,8 @@ const ActionOperator: FunctionComponent<Props> = ({
   value,
   flush,
 }) => {
+  const { state } = useOvermind()
+
   return (
     <div className={actionStyles.pipe}>
       <div className={styles.operator}>
@@ -76,7 +80,7 @@ const ActionOperator: FunctionComponent<Props> = ({
                   <span className={styles.effectArgs}>
                     (
                     {effect.args.map((arg, argIndex) => (
-                      <Fragment>
+                      <Fragment key={argIndex}>
                         <ValueInspector small value={arg} />
                         {argIndex === effect.args.length - 1 ? null : (
                           <span>,</span>
@@ -127,12 +131,24 @@ const ActionOperator: FunctionComponent<Props> = ({
                   >
                     {mutation.path}
                   </span>
-                  {mutation.args.map((arg) => (
-                    <ValueInspector small value={arg} />
+                  {mutation.args.map((arg, argIndex) => (
+                    <ValueInspector key={argIndex} small value={arg} />
                   ))}
                 </div>
               )
             }
+
+            if (event.type === EventType.Action) {
+              const id = event.data as string
+
+              return (
+                <Action
+                  key={index}
+                  action={state.currentApp.actions[id]}
+                  inline
+                />
+              )
+            }
           })}
           {operator.error ? (
             <div className={styles.operatorItem}>

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

@@ -6,7 +6,7 @@ export const wrapper = css({
   position: 'relative',
   borderTopLeftRadius: 3,
   borderBottomLeftRadius: 3,
-  backgroundColor: colors.dark2,
+  backgroundColor: colors.dark,
   display: 'flex',
   padding: '0 1rem',
   alignItems: 'center',
@@ -25,8 +25,7 @@ export const inputWrapper = css({
 export const input = css({
   position: 'absolute',
   border: 0,
-  top: '0.25rem',
-  left: 0,
+  left: '-1rem',
   fontFamily: 'inherit',
   outline: 'none',
   backgroundColor: 'transparent',
@@ -45,8 +44,7 @@ export const suggestion = css({
   position: 'absolute',
   display: 'flex',
   alignItems: 'center',
-  top: '0.25rem',
-  left: 0,
+  left: '-1rem',
   fontSize: 16,
   padding: '0.5rem',
   opacity: 0.5,
@@ -65,7 +63,6 @@ export const selectedAction = css({
 
 export const noSelectedAction = css({
   opacity: 0.5,
-  padding: '0 1rem',
 })
 
 export const resultWrapper = css({

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

@@ -15,7 +15,7 @@ const Actions: FunctionComponent = () => {
       {state.currentAction ? (
         <div className={styles.columns}>
           <ActionsList />
-          <Action />
+          <Action action={state.currentAction} />
         </div>
       ) : (
         <div className={styles.centerWrapper}>

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

@@ -17,7 +17,6 @@ export const centerWrapper = css({
 
 export const columns = css({
   display: 'flex',
-  borderTop: `1px solid hsl(206,57%,16%)`,
   '> *:first-child': {
     flex: '0 0 300px',
   },

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

@@ -2,10 +2,9 @@ import { css } from 'emotion'
 import { colors } from '../../theme'
 
 export const wrapper = css({
-  padding: '1rem',
+  margin: '1rem',
   display: 'flex',
   alignItems: 'stretch',
-  backgroundColor: colors.dark,
 })
 
 export const button = css({

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

@@ -4,6 +4,7 @@ import { colors } from '../../theme'
 export const wrapper = css({
   position: 'relative',
   display: 'flex',
+  paddingTop: '0.5rem',
   backgroundColor: colors.dark,
   height: 50,
   justifyContent: 'center',

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

@@ -1,11 +1,13 @@
-import { createElement, FunctionComponent } from 'react'
+import { createElement, FunctionComponent, Fragment } from 'react'
 import { useOvermind } from '../../overmind'
 import * as styles from './styles'
 import * as text from '../../styles/text'
 import Input from '../common/Input'
 import Button from '../common/Button'
 import Workspace from '../Workspace'
 import { css } from 'emotion'
+import Runtime from 'overmind-devtools/src/components/Runtime'
+import { colors } from 'overmind-devtools/src/theme'
 
 const Devtools: FunctionComponent = () => {
   const { state, actions } = useOvermind()
@@ -62,15 +64,35 @@ const Devtools: FunctionComponent = () => {
     )
   }
 
-  if (state.isConnecting) {
-    return (
-      <div className={styles.wrapper}>
-        <h1>Waiting for an app to connect...</h1>
-      </div>
-    )
-  }
-
-  return <Workspace />
+  return (
+    <Fragment>
+      {state.isConnecting ? (
+        <div className={styles.wrapper}>
+          <h1>Waiting for an app to connect...</h1>
+          <h2>or</h2>
+          <input
+            disabled={state.runtimeLoading}
+            className={styles.input}
+            defaultValue={
+              state.runtimeHost ? state.runtimeHost.split('?')[0] : ''
+            }
+            placeholder="Connect to app..."
+            style={{
+              borderColor: state.runtimeError ? colors.red : 'transparent',
+            }}
+            onKeyDown={(event) => {
+              if (event.keyCode === 13) {
+                actions.setRuntimeHost(event.currentTarget.value)
+              }
+            }}
+          />
+        </div>
+      ) : (
+        <Workspace />
+      )}
+      <Runtime />
+    </Fragment>
+  )
 }
 
 export default Devtools