feat(overmind-devtools): show path of operator

Author: christianalfoni

packages/demos/todomvc/src/app/actions.ts

@@ -4,6 +4,12 @@ import { Todo } from './state'
 import * as helpers from './helpers'
 import * as mutations from './mutations'
 
+function hasLength(_, value: string) {
+  return Boolean(value.length)
+}
+
+function noop() {}
+
 export default (action: Action) => ({
   changeNewTodoTitle: action<React.ChangeEvent<HTMLInputElement>>()
     .map(helpers.getEventValue)

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

@@ -15,15 +15,3 @@ export const Pipe = styled.div`
   align-items: center;
   margin: ${({ theme }) => `${theme.padding.small} 0`};
 `
-
-export const Path = styled<
-  {
-    borderColor?: keyof Colors
-  },
-  'div'
->('div')`
-  border-bottom: 1px solid
-    ${({ theme, borderColor }) =>
-      borderColor ? theme.color[borderColor] : theme.color.black};
-  min-width: 25px;
-`

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

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { connect, Connect } from '../../app'
 import { Flush as FlushType, FlushReference } from '../../app/state'
-import { Pipe, Path } from '../Action/elements'
+import { Pipe } from '../Action/elements'
 import { Flush, FlushHeader } from './elements'
+import Path from '../ActionPath'
 import Text from '../common/Text'
 import Icon from '../common/Icon'
 

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

@@ -4,7 +4,8 @@ import { Operator as OperatorType } from '../../app/state'
 import ValueInspector from '../ValueInspector'
 import Text from '../common/Text'
 import Icon from '../common/Icon'
-import { Pipe, Path } from '../Action/elements'
+import Path from '../ActionPath'
+import { Pipe } from '../Action/elements'
 import { Operator, OperatorHeader, Mutation } from './elements'
 
 type Props = {
@@ -21,7 +22,13 @@ const ActionOperator: React.SFC<Props> = ({ operator, value, app }) => (
     <Pipe>
       <Path
         borderColor={operator.type === 'mutation' ? 'primary' : 'secondary'}
-      />
+      >
+        {operator.path.length ? (
+          <Text variant="hint">
+            <b>{operator.path.join('.')}</b>
+          </Text>
+        ) : null}
+      </Path>
       <Operator
         borderColor={operator.type === 'mutation' ? 'primary' : 'secondary'}
         onClick={() => app.actions.toggleCollapsed(operator)}

packages/node_modules/overmind-devtools/src/components/ActionPath/elements.tsx

@@ -0,0 +1,39 @@
+import styled from '../../styled-components'
+import { Colors } from '../../theme'
+
+export const Path = styled.div`
+  position: relative;
+  min-width: 25px;
+`
+
+export const PathLine = styled<
+  {
+    borderColor?: keyof Colors
+  },
+  'div'
+>('div')`
+  position: absolute;
+  top: 50%;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  border-bottom: 1px solid
+    ${({ theme, borderColor }) =>
+      borderColor ? theme.color[borderColor] : theme.color.black};
+`
+
+export const PathText = styled<
+  {
+    borderColor?: keyof Colors
+  },
+  'div'
+>('div')`
+  position: relative;
+  z-index: 1;
+  margin: ${({ theme }) => `0 ${theme.padding.smaller} 0 25px`};
+  padding: ${({ theme }) =>
+    `${theme.padding.smallest} ${theme.padding.smaller}`};
+  border: 1px solid ${({ theme, borderColor }) => theme.color[borderColor]};
+  background-color: #fff;
+  border-radius: ${({ theme }) => theme.borderRadius.normal};
+`

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

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { Path, PathLine, PathText } from './elements'
+import { Colors } from '../../theme'
+
+type Props = {
+  borderColor?: keyof Colors
+}
+
+const ActionPath: React.SFC<Props> = ({ borderColor, children }) => (
+  <Path>
+    <PathLine borderColor={borderColor} />
+    {children ? (
+      <PathText borderColor={borderColor}>{children}</PathText>
+    ) : null}
+  </Path>
+)
+
+export default ActionPath