fix(overmind-devtools-client): prevent showing derived edit button

Author: christianalfoni

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

@@ -36,6 +36,7 @@ function renderValue({
         endBracket="}"
         path={path}
         expandedPaths={expandedPaths}
+        hasWrapper={Boolean(wrapper)}
         onClickPath={onClickPath}
         renderPaths={renderPaths}
         onToggleExpand={onToggleExpand}
@@ -54,6 +55,7 @@ function renderValue({
         renderPaths={renderPaths}
         path={path}
         expandedPaths={expandedPaths}
+        hasWrapper={Boolean(wrapper)}
         onClickPath={onClickPath}
         onToggleExpand={onToggleExpand}
         isArray
@@ -70,6 +72,7 @@ function renderValue({
         value={value}
         onClickPath={onClickPath}
         selectedStatePath={selectedStatePath}
+        hasWrapper={Boolean(wrapper)}
         onSubmitState={onSubmitState}
       />
     )
@@ -91,7 +94,7 @@ const PathTools: FunctionComponent<PathToolsProps> = ({
   disabled,
 }) => {
   return disabled ? (
-    <div>{children}</div>
+    <div className={styles.pathToolsWrapper}>{children}</div>
   ) : (
     <div className={styles.pathToolsWrapper}>
       {children}{' '}
@@ -146,6 +149,7 @@ type NestedProps = {
   expandedPaths: string[]
   renderPaths: RenderPaths
   path: string
+  hasWrapper: boolean
   isArray: boolean
   value: any
   onToggleExpand: (path: string[]) => void
@@ -162,6 +166,7 @@ const Nested: FunctionComponent<NestedProps> = memo(
     onClickPath,
     startBracket,
     renderPaths,
+    hasWrapper,
     endBracket,
     isArray,
     selectedStatePath,
@@ -201,7 +206,7 @@ const Nested: FunctionComponent<NestedProps> = memo(
           <PathTools
             path={path}
             onClickPath={onClickPath}
-            disabled={!onSubmitState}
+            disabled={!onSubmitState || hasWrapper}
           >
             {path.length ? (
               <span className={styles.key}>{path.split('.').pop()}:</span>
@@ -230,7 +235,7 @@ const Nested: FunctionComponent<NestedProps> = memo(
           <PathTools
             path={path}
             onClickPath={onClickPath}
-            disabled={!onSubmitState}
+            disabled={!onSubmitState || hasWrapper}
           >
             {path.length ? (
               <span className={styles.key}>{path.split('.').pop()}:</span>
@@ -274,13 +279,21 @@ const Nested: FunctionComponent<NestedProps> = memo(
 type ValueComponentProps = {
   value: string | number | boolean
   path: string
+  hasWrapper: boolean
   onClickPath?: (path: string[]) => void
   selectedStatePath: string
   onSubmitState: (newState: string) => void
 }
 
 const ValueComponent: FunctionComponent<ValueComponentProps> = memo(
-  ({ value, path, onClickPath, selectedStatePath, onSubmitState }) => {
+  ({
+    value,
+    path,
+    onClickPath,
+    selectedStatePath,
+    onSubmitState,
+    hasWrapper,
+  }) => {
     const [isHoveringString, setHoveringString] = useState(false)
 
     if (selectedStatePath && path === selectedStatePath) {
@@ -304,7 +317,7 @@ const ValueComponent: FunctionComponent<ValueComponentProps> = memo(
           <PathTools
             path={path}
             onClickPath={onClickPath}
-            disabled={!onSubmitState}
+            disabled={!onSubmitState || hasWrapper}
           >
             {path.length ? (
               <span className={styles.key}>{path.split('.').pop()}:</span>
@@ -321,7 +334,7 @@ const ValueComponent: FunctionComponent<ValueComponentProps> = memo(
           <PathTools
             path={path}
             onClickPath={onClickPath}
-            disabled={!onSubmitState}
+            disabled={!onSubmitState || hasWrapper}
           >
             {path.length ? (
               <span className={styles.key}>{path.split('.').pop()}:</span>
@@ -346,7 +359,7 @@ const ValueComponent: FunctionComponent<ValueComponentProps> = memo(
         <PathTools
           path={path}
           onClickPath={onClickPath}
-          disabled={!onSubmitState}
+          disabled={!onSubmitState || hasWrapper}
         >
           {path.length ? (
             <span className={styles.key}>{path.split('.').pop()}:</span>