Adds section titles for Atoms and Selectors. Adds a title proper to t… (

#1573)

Summary:
…he selector icon so that it gives a hint. Fixed getStyles to actually accumulate styles which fixes the jarring hover-over on node labels. Improved flow typing on getStyles.

Pull Request resolved: #1573

Reviewed By: drarmstr

Differential Revision: D33892487

Pulled By: butlersrepos

fbshipit-source-id: ac26db9f3d649e055b9c39e26f6c584fc88ae69b

packages-ext/recoil-devtools/src/pages/Popup/Items/ItemLabel.js

@@ -11,7 +11,7 @@
 import type {Node} from '../../../types/DevtoolsTypes';
 
 const {getStyle} = require('../../../utils/getStyle');
-const NodeName = require('./NodeName');
+const NodeName = require('./NodeName').default;
 const React = require('react');
 const styles = {
   label: {

packages-ext/recoil-devtools/src/pages/Popup/Items/NodeName.js

@@ -11,7 +11,7 @@
 
 import type {Node} from '../../../types/DevtoolsTypes';
 
-const React = require('react');
+import React from 'react';
 
 const styles = {
   label: {
@@ -35,13 +35,18 @@ type KeyProps = {
   node: ?Node,
 };
 
-function NodeName({name, node}: KeyProps): React$Element<'span'> {
+export default function NodeName({
+  name,
+  node,
+}: KeyProps): React$Element<'span'> {
   return (
     <span style={styles.label}>
-      {node?.type === 'selector' && <span style={styles.selector}>S</span>}
+      {node?.type === 'selector' && (
+        <span style={styles.selector} title="This is a Recoil selector">
+          S
+        </span>
+      )}
       {name}
     </span>
   );
 }
-
-module.exports = NodeName;

packages-ext/recoil-devtools/src/pages/Popup/PopupSidebarTransaction.js

@@ -13,7 +13,7 @@ import type {TransactionType} from '../../types/DevtoolsTypes';
 import type Connection from '../../utils/Connection';
 
 const ConnectionContext = require('./ConnectionContext');
-const NodeName = require('./Items/NodeName');
+const NodeName = require('./Items/NodeName').default;
 const React = require('react');
 const {useCallback, useContext, useEffect, useRef} = require('react');
 

packages-ext/recoil-devtools/src/pages/Popup/PopupSnapshot.js

@@ -19,6 +19,9 @@ const React = require('react');
 const {useContext, useMemo} = require('react');
 
 const styles = {
+  container: {
+    paddingLeft: 8,
+  },
   item: {
     marginBottom: 16,
   },
@@ -56,9 +59,11 @@ function SnapshotRenderer(): React.Node {
   });
 
   return (
-    <div>
-      {atoms}
-      {selectors}
+    <div style={styles.container}>
+      <h2>Atoms</h2>
+      {atoms.length > 0 ? atoms : 'No atoms to show.'}
+      <h2>Selectors</h2>
+      {selectors.length > 0 ? selectors : 'No selectors to show.'}
     </div>
   );
 }

packages-ext/recoil-devtools/src/utils/getStyle.js

@@ -9,14 +9,24 @@
  */
 'use strict';
 
+type CssMap = {
+  [string]: string | number,
+};
+
+function getEntries<T>(obj: {[string]: T}): Array<[string, T]> {
+  const keys: string[] = Object.keys(obj);
+  return keys.map(key => [key, obj[key]]);
+}
+
 export const getStyle = (
-  source: {[key: string]: {[key: string]: string | number}},
-  entries: {[key: string]: boolean},
+  source: {[key: string]: CssMap},
+  entries: {[string]: boolean},
 ): {...} | {[string]: number | string} => {
-  return Object.entries(entries).reduce((acc, [key, value]) => {
+  const classNameMap = getEntries<boolean>(entries);
+  return classNameMap.reduce<CssMap>((acc, [key, val]) => {
     let nextAcc = {...acc};
-    if (Boolean(value)) {
-      nextAcc = {...source[key]};
+    if (Boolean(val)) {
+      nextAcc = {...nextAcc, ...source[key]};
     }
 
     return nextAcc;