From 9e4c5363c522d241a9df830b480dc23b678e3efb Mon Sep 17 00:00:00 2001
From: Elaina Hsu <elxhsu@fb.com>
Date: Thu, 23 Jul 2020 09:13:31 -0700
Subject: [PATCH] Deep-linking records to other strong records in the Store tab

Summary: All strong records with a matching record available in the store tab are underlined. When clicked on, it will direct the user to the corresponding store record.

Reviewed By: jonathoma

Differential Revision: D22622612

fbshipit-source-id: 537dbb282e4ae1ff695c577ab47c413d41a10fa4
---
 .../src/ui/components/data-inspector/DataInspector.tsx | 10 ++++++++++
 .../components/data-inspector/ManagedDataInspector.tsx |  5 +++++
 2 files changed, 15 insertions(+)

diff --git a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
index 9752abfef..5584ec23d 100644
--- a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
+++ b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
@@ -144,6 +144,10 @@ type DataInspectorProps = {
     name: string,
     highlighter: HighlightManager,
   ) => React.ReactElement;
+  /**
+   * Render callback that can be used to customize the rendering of object values.
+   */
+  onRenderDescription?: (description: React.ReactElement) => React.ReactElement;
   /**
    * Callback when a value is edited.
    */
@@ -336,6 +340,7 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     onExpanded,
     onDelete,
     onRenderName,
+    onRenderDescription,
     extractValue: extractValueProp,
     expanded: expandedPaths,
     name,
@@ -501,6 +506,7 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
               onExpanded={onExpanded}
               onDelete={onDelete}
               onRenderName={onRenderName}
+              onRenderDescription={onRenderDescription}
               parentPath={path}
               depth={depth + 1}
               key={key}
@@ -566,6 +572,10 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
           extra={extra}
         />
       );
+
+      descriptionOrPreview = onRenderDescription
+        ? onRenderDescription(descriptionOrPreview)
+        : descriptionOrPreview;
     } else {
       descriptionOrPreview = (
         <DataPreview
diff --git a/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx b/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
index c130ba6e0..cb1cf6bf6 100644
--- a/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
+++ b/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
@@ -49,6 +49,10 @@ export type ManagedDataInspectorProps = {
     name: string,
     highlighter: HighlightManager,
   ) => React.ReactElement;
+  /**
+   * Render callback that can be used to customize the rendering of object values.
+   */
+  onRenderDescription?: (description: React.ReactElement) => React.ReactElement;
   /**
    * Whether all objects and arrays should be collapsed by default.
    */
@@ -179,6 +183,7 @@ export default class ManagedDataInspector extends PureComponent<
           onExpanded={this.onExpanded}
           onDelete={this.props.onDelete}
           onRenderName={this.props.onRenderName}
+          onRenderDescription={this.props.onRenderDescription}
           expandRoot={this.props.expandRoot}
           collapsed={this.props.filter ? true : this.props.collapsed}
           tooltips={this.props.tooltips}