From acc0e7c2e0c0f0c1acb44790f6d22498e6f2f2e9 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 5 May 2020 07:56:57 -0700
Subject: [PATCH] Preserve manual selection after filtering

Summary:
Before this diff filtering and manual expanding / collapsing could not be combined, this diff fixes that
{F236120000}

Reviewed By: jonathoma

Differential Revision: D21381515

fbshipit-source-id: b0662fcbad3b0dfcb0bfe846e3c05a3a78294dde
---
 desktop/app/src/ui/components/Highlight.tsx   | 17 +++++++-----
 .../data-inspector/DataInspector.tsx          |  7 ++---
 .../data-inspector/ManagedDataInspector.tsx   | 27 ++++++++++++++-----
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/desktop/app/src/ui/components/Highlight.tsx b/desktop/app/src/ui/components/Highlight.tsx
index 77ae003c0..378229f5b 100644
--- a/desktop/app/src/ui/components/Highlight.tsx
+++ b/desktop/app/src/ui/components/Highlight.tsx
@@ -59,14 +59,19 @@ function createHighlightManager(initialText: string = ''): HighlightManager {
     }, [text]);
 
     const index = text.toLowerCase().indexOf(currentFilter);
-    if (index === -1) {
-      return <span>{text}</span>;
-    }
     return (
       <span ref={elem}>
-        {text.substr(0, index)}
-        <Highlighted>{text.substr(index, currentFilter.length)}</Highlighted>
-        {text.substr(index + currentFilter.length)}
+        {index === -1 ? (
+          text
+        ) : (
+          <>
+            {text.substr(0, index)}
+            <Highlighted>
+              {text.substr(index, currentFilter.length)}
+            </Highlighted>
+            {text.substr(index + currentFilter.length)}
+          </>
+        )}
       </span>
     );
   });
diff --git a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
index 5af227db2..e082f1340 100644
--- a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
+++ b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
@@ -133,7 +133,7 @@ type DataInspectorProps = {
   /**
    * Callback whenever the current expanded paths is changed.
    */
-  onExpanded?: ((expanded: DataInspectorExpanded) => void) | undefined | null;
+  onExpanded?: ((path: string, expanded: boolean) => void) | undefined | null;
   /**
    * Callback whenever delete action is invoked on current path.
    */
@@ -497,10 +497,7 @@ export default class DataInspector extends Component<
 
     const path = pathParts.join('.');
 
-    onExpanded({
-      ...expanded,
-      [path]: isExpanded,
-    });
+    onExpanded(path, isExpanded);
   }
 
   handleClick = () => {
diff --git a/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx b/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
index 5a1531849..e7c1c6260 100644
--- a/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
+++ b/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
@@ -57,6 +57,8 @@ type ManagedDataInspectorProps = {
 
 type ManagedDataInspectorState = {
   expanded: DataInspectorExpanded;
+  filterExpanded: DataInspectorExpanded;
+  userExpanded: DataInspectorExpanded;
   filter: string;
 };
 
@@ -76,6 +78,8 @@ export default class ManagedDataInspector extends PureComponent<
     super(props, context);
     this.state = {
       expanded: {},
+      userExpanded: {},
+      filterExpanded: {},
       filter: '',
     };
   }
@@ -90,8 +94,9 @@ export default class ManagedDataInspector extends PureComponent<
     if (!nextProps.filter) {
       return {
         filter: '',
+        filterExpanded: {},
         // reset expanded when removing filter
-        expanded: currentState.filter ? {} : currentState.expanded,
+        expanded: currentState.userExpanded,
       };
     }
 
@@ -130,20 +135,30 @@ export default class ManagedDataInspector extends PureComponent<
     if (filter.length >= 2) {
       walk(nextProps.data, []);
     }
-    const expanded: Record<string, boolean> = {};
+    const filterExpanded: Record<string, boolean> = {};
     paths.forEach((path) => {
       for (let i = 1; i < path.length; i++)
-        expanded[path.slice(0, i).join('.')] = true;
+        filterExpanded[path.slice(0, i).join('.')] = true;
     });
 
     return {
-      expanded,
+      filterExpanded,
+      expanded: {...currentState.userExpanded, ...filterExpanded},
       filter,
     };
   }
 
-  onExpanded = (expanded: DataInspectorExpanded) => {
-    this.setState({expanded});
+  onExpanded = (path: string, isExpanded: boolean) => {
+    this.setState({
+      userExpanded: {
+        ...this.state.userExpanded,
+        [path]: isExpanded,
+      },
+      expanded: {
+        ...this.state.expanded,
+        [path]: isExpanded,
+      },
+    });
   };
 
   render() {