From 27cff396adf94660e4b8c22e52bad1ee12c7b355 Mon Sep 17 00:00:00 2001
From: Scott Kyle <skyle@fb.com>
Date: Thu, 18 Jun 2020 11:03:08 -0700
Subject: [PATCH] Add path param to extractValue

Summary: I'm working on an attribute inspector that has particular top-level special keys that should not be editable, while the rest can be. This enables the functionality to allow dynamic determinations of what can be made editable, and is an additive non-breaking change to the API.

Reviewed By: mweststrate

Differential Revision: D22111965

fbshipit-source-id: 4bc6df0f76cf1e2bf0590235dcf543c665c7d8d8
---
 .../components/data-inspector/DataInspector.tsx   | 15 +++++++++------
 .../ui/components/data-inspector/DataPreview.tsx  |  6 ++++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
index 2b4c1c8c8..3f8852ed7 100644
--- a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
+++ b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
@@ -346,28 +346,30 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     );
 
     const extractValue = useCallback(
-      (data: any, depth: number) => {
+      (data: any, depth: number, path: string[]) => {
         let res;
         if (extractValueProp) {
-          res = extractValueProp(data, depth);
+          res = extractValueProp(data, depth, path);
         }
         if (!res) {
-          res = defaultValueExtractor(data, depth);
+          res = defaultValueExtractor(data, depth, path);
         }
         return res;
       },
       [extractValueProp],
     );
 
-    const res = useMemo(() => extractValue(data, depth), [
+    const res = useMemo(() => extractValue(data, depth, path), [
       extractValue,
       data,
       depth,
+      path,
     ]);
-    const resDiff = useMemo(() => extractValue(diff, depth), [
+    const resDiff = useMemo(() => extractValue(diff, depth, path), [
       extractValue,
-      data,
+      diff,
       depth,
+      path,
     ]);
     const ancestry = useMemo(
       () => (res ? parentAncestry!.concat([res.value]) : []),
@@ -554,6 +556,7 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     } else {
       descriptionOrPreview = (
         <DataPreview
+          path={path}
           type={type}
           value={value}
           extractValue={extractValue}
diff --git a/desktop/app/src/ui/components/data-inspector/DataPreview.tsx b/desktop/app/src/ui/components/data-inspector/DataPreview.tsx
index 0755915d4..ea900b383 100755
--- a/desktop/app/src/ui/components/data-inspector/DataPreview.tsx
+++ b/desktop/app/src/ui/components/data-inspector/DataPreview.tsx
@@ -17,6 +17,7 @@ import {colors} from '../colors';
 export type DataValueExtractor = (
   value: any,
   depth: number,
+  path: string[],
 ) =>
   | {
       mutable: boolean;
@@ -51,6 +52,7 @@ function intersperse(arr: Array<any>, sep: string) {
 }
 
 export default class DataPreview extends PureComponent<{
+  path: string[];
   type: string;
   value: any;
   depth: number;
@@ -62,7 +64,7 @@ export default class DataPreview extends PureComponent<{
   };
 
   render() {
-    const {depth, extractValue, type, value} = this.props;
+    const {depth, extractValue, path, type, value} = this.props;
 
     if (type === 'array') {
       return (
@@ -70,7 +72,7 @@ export default class DataPreview extends PureComponent<{
           {'['}
           {intersperse(
             value.map((element: any, index: number) => {
-              const res = extractValue(element, depth + 1);
+              const res = extractValue(element, depth + 1, path);
               if (!res) {
                 return null;
               }