searchable data inspector

Summary: Naive implementation of searchable data inspector: matching of search term agains first level keys of data

Reviewed By: cgrushko

Differential Revision: D21510073

fbshipit-source-id: 2010e584248a64fb3351c95a5646b1935445a13b

desktop/app/src/index.tsx

@@ -97,6 +97,7 @@ export {
 } from './ui/components/data-inspector/DataInspector';
 export {default as DataInspector} from './ui/components/data-inspector/DataInspector';
 export {default as ManagedDataInspector} from './ui/components/data-inspector/ManagedDataInspector';
+export {default as SearchableDataInspector} from './ui/components/data-inspector/SearchableDataInspector';
 export {default as DataDescription} from './ui/components/data-inspector/DataDescription';
 export {default as Tabs} from './ui/components/Tabs';
 export {default as Tab} from './ui/components/Tab';

desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx

@@ -14,7 +14,7 @@ import React from 'react';
 import {DataValueExtractor} from './DataPreview';
 import {HighlightProvider} from '../Highlight';
 
-type ManagedDataInspectorProps = {
+export type ManagedDataInspectorProps = {
   /**
    * Object to inspect.
    */

desktop/app/src/ui/components/data-inspector/SearchableDataInspector.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import debounceRender from 'react-debounce-render';
+
+import ManagedDataInspector, {
+  ManagedDataInspectorProps,
+} from './ManagedDataInspector';
+import Searchable, {SearchableProps} from '../searchable/Searchable';
+
+type Props = ManagedDataInspectorProps & SearchableProps;
+
+function filter(data: any, searchTerm: string): any {
+  if (searchTerm === '') {
+    return data;
+  }
+  const res: any = {};
+  const lowerSearch = searchTerm.toLowerCase();
+
+  for (const key in data) {
+    if (key.toLowerCase().indexOf(lowerSearch) != -1) {
+      res[key] = data[key];
+    }
+  }
+  return res;
+}
+
+// Naive shallow filters matching wrapper for ManagedDataInspector
+function SearchableDataInspector(props: Props) {
+  return (
+    <ManagedDataInspector
+      {...props}
+      data={filter(props.data, props.searchTerm)}
+    />
+  );
+}
+
+export default Searchable(debounceRender(SearchableDataInspector, 250, {}));

desktop/app/src/ui/index.tsx

@@ -49,6 +49,7 @@ export {
 } from './components/data-inspector/DataInspector';
 export {default as DataInspector} from './components/data-inspector/DataInspector';
 export {default as ManagedDataInspector} from './components/data-inspector/ManagedDataInspector';
+export {default as SearchableDataInspector} from './components/data-inspector/SearchableDataInspector';
 export {default as DataDescription} from './components/data-inspector/DataDescription';
 
 // tabs