From 0721735e37eb8fd712920ee0e7c9ea01dab23a34 Mon Sep 17 00:00:00 2001
From: Elaina Hsu <elxhsu@fb.com>
Date: Thu, 16 Jul 2020 12:23:47 -0700
Subject: [PATCH] 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                       |  1 +
 .../components/data-inspector/DataInspector.tsx | 17 +++++++++++++++--
 .../data-inspector/ManagedDataInspector.tsx     | 11 ++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/desktop/app/src/index.tsx b/desktop/app/src/index.tsx
index 1bdbdb9a2..b2a1dd97f 100644
--- a/desktop/app/src/index.tsx
+++ b/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';
diff --git a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
index 3f8852ed7..9752abfef 100644
--- a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
+++ b/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>);
diff --git a/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx b/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
index b35d45025..c130ba6e0 100644
--- a/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
+++ b/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}