feat(overmind-devtools): show effect arguments

Author: christianalfoni

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

@@ -1,4 +1,4 @@
-import { createElement, FunctionComponent } from 'react'
+import { createElement, FunctionComponent, Fragment } from 'react'
 import {
   Operator as OperatorType,
   EventType,
@@ -73,14 +73,18 @@ const ActionOperator: FunctionComponent<Props> = ({
                       ? effect.name + '.' + effect.method
                       : effect.method}
                   </span>
-                  {effect.args.length ? (
-                    <ValueInspector
-                      small
-                      value={
-                        effect.args.length > 1 ? effect.args : effect.args[0]
-                      }
-                    />
-                  ) : null}
+                  <span className={styles.effectArgs}>
+                    (
+                    {effect.args.map((arg, argIndex) => (
+                      <Fragment>
+                        <ValueInspector small value={arg} />
+                        {argIndex === effect.args.length - 1 ? null : (
+                          <span>,</span>
+                        )}
+                      </Fragment>
+                    ))}
+                    )
+                  </span>
                   {effect.result === undefined && !effect.error ? null : (
                     <span
                       className={css(
@@ -123,14 +127,9 @@ const ActionOperator: FunctionComponent<Props> = ({
                   >
                     {mutation.path}
                   </span>
-                  <ValueInspector
-                    small
-                    value={
-                      mutation.args.length > 1
-                        ? mutation.args
-                        : mutation.args[0]
-                    }
-                  />
+                  {mutation.args.map((arg) => (
+                    <ValueInspector small value={arg} />
+                  ))}
                 </div>
               )
             }

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

@@ -8,9 +8,16 @@ export const operator = css({
   cursor: 'default',
 })
 
+export const effectArgs = css({
+  display: 'flex',
+  alignItems: 'center',
+  '> span': {
+    marginRight: '0.5rem',
+  },
+})
+
 export const value = css({
   marginLeft: 'auto',
-  paddingRight: '0.5rem',
   display: 'flex',
   alignItems: 'center',
 })