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

@@ -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)}
+        {index === -1 ? (
-        <Highlighted>{text.substr(index, currentFilter.length)}</Highlighted>
+          text
-        {text.substr(index + currentFilter.length)}
+        ) : (
+          <>
+            {text.substr(0, index)}
+            <Highlighted>
+              {text.substr(index, currentFilter.length)}
+            </Highlighted>
+            {text.substr(index + currentFilter.length)}
+          </>
+        )}
       </span>
     );
   });

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({
+    onExpanded(path, isExpanded);
-      ...expanded,
-      [path]: isExpanded,
-    });
   }
 
   handleClick = () => {

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) => {
+  onExpanded = (path: string, isExpanded: boolean) => {
-    this.setState({expanded});
+    this.setState({
+      userExpanded: {
+        ...this.state.userExpanded,
+        [path]: isExpanded,
+      },
+      expanded: {
+        ...this.state.expanded,
+        [path]: isExpanded,
+      },
+    });
   };
 
   render() {