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

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

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}