Bolded names of Store record fields that appear in the Consistency List

Summary:
Bolded the record fields' keys if it is consistent (in the consistency white list).

*if the key is within an object, information on whether it is consistent will not be available in preview. The Object has to be physically expanded by the user in order to see the bolded key.

Reviewed By: mweststrate

Differential Revision: D22416084

fbshipit-source-id: 7eb1d8c65be07f880722a133b70195a4a63f0e75

desktop/app/src/index.tsx

@@ -103,6 +103,7 @@ export {default as DataInspector} from './ui/components/data-inspector/DataInspe
 export {default as ManagedDataInspector} from './ui/components/data-inspector/ManagedDataInspector';
 export {default as SearchableDataInspector} from './ui/components/data-inspector/SearchableDataInspector';
 export {default as DataDescription} from './ui/components/data-inspector/DataDescription';
+export {HighlightManager} from './ui/components/Highlight';
 export {default as Tabs} from './ui/components/Tabs';
 export {default as Tab} from './ui/components/Tab';
 export {default as Input} from './ui/components/Input';

desktop/app/src/ui/components/data-inspector/DataInspector.tsx

@@ -21,7 +21,7 @@ import {colors} from '../colors';
 import {clipboard} from 'electron';
 import React from 'react';
 import {TooltipOptions} from '../TooltipProvider';
-import {useHighlighter} from '../Highlight';
+import {useHighlighter, HighlightManager} from '../Highlight';
 
 export {DataValueExtractor} from './DataPreview';
 
@@ -136,6 +136,14 @@ type DataInspectorProps = {
    * Callback whenever delete action is invoked on current path.
    */
   onDelete?: DataInspectorDeleteValue | undefined | null;
+  /**
+   * Render callback that can be used to customize the rendering of object keys.
+   */
+  onRenderName?: (
+    path: Array<string>,
+    name: string,
+    highlighter: HighlightManager,
+  ) => React.ReactElement;
   /**
    * Callback when a value is edited.
    */
@@ -327,6 +335,7 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     parentPath,
     onExpanded,
     onDelete,
+    onRenderName,
     extractValue: extractValueProp,
     expanded: expandedPaths,
     name,
@@ -491,6 +500,7 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
               collapsed={collapsed}
               onExpanded={onExpanded}
               onDelete={onDelete}
+              onRenderName={onRenderName}
               parentPath={path}
               depth={depth + 1}
               key={key}
@@ -530,12 +540,15 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     // create name components
     const nameElems = [];
     if (typeof name !== 'undefined') {
+      const text = onRenderName
+        ? onRenderName(path, name, highlighter)
+        : highlighter.render(name);
       nameElems.push(
         <Tooltip
           title={tooltips != null && tooltips[name]}
           key="name"
           options={nameTooltipOptions}>
-          <InspectorName>{highlighter.render(name)}</InspectorName>
+          <InspectorName>{text}</InspectorName>
         </Tooltip>,
       );
       nameElems.push(<span key="sep">: </span>);

desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx

@@ -12,7 +12,7 @@ import {PureComponent} from 'react';
 import DataInspector from './DataInspector';
 import React from 'react';
 import {DataValueExtractor} from './DataPreview';
-import {HighlightProvider} from '../Highlight';
+import {HighlightProvider, HighlightManager} from '../Highlight';
 
 export type ManagedDataInspectorProps = {
   /**
@@ -41,6 +41,14 @@ export type ManagedDataInspectorProps = {
    * Callback when a delete action is invoked.
    */
   onDelete?: (path: Array<string>) => void;
+  /**
+   * Render callback that can be used to customize the rendering of object keys.
+   */
+  onRenderName?: (
+    path: Array<string>,
+    name: string,
+    highlighter: HighlightManager,
+  ) => React.ReactElement;
   /**
    * Whether all objects and arrays should be collapsed by default.
    */
@@ -170,6 +178,7 @@ export default class ManagedDataInspector extends PureComponent<
           expanded={this.state.expanded}
           onExpanded={this.onExpanded}
           onDelete={this.props.onDelete}
+          onRenderName={this.props.onRenderName}
           expandRoot={this.props.expandRoot}
           collapsed={this.props.filter ? true : this.props.collapsed}
           tooltips={this.props.tooltips}