Add filter and highlight to JSON

Summary:
Large GraphQL responses feel pretty unwieldy, added a search option.

Added filter functionality to ManagedDataInspector, and use it in GraphQL

changelog: It is now possible to search inside GraphQL responses

making it slightly more efficient, and scrolling to the matches will be done in a next diff

Reviewed By: jknoxville

Differential Revision: D21347880

fbshipit-source-id: 85c95be0964515e737de2ab41bbdd8cc6a87544e

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

@@ -18,6 +18,7 @@ import {colors} from '../colors';
 import Input from '../Input';
 import React, {KeyboardEvent} from 'react';
 import Glyph from '../Glyph';
+import {Highlight} from './Highlight';
 
 const NullValue = styled.span({
   color: 'rgb(128, 128, 128)',
@@ -84,6 +85,7 @@ type DataDescriptionProps = {
   value: any;
   extra?: any;
   setValue: DataInspectorSetValue | null | undefined;
+  highlight?: string;
 };
 
 type DescriptionCommitOptions = {
@@ -278,6 +280,7 @@ export default class DataDescription extends PureComponent<
           editable={Boolean(this.props.setValue)}
           commit={this.commit}
           onEdit={this.onEditStart}
+          highlight={this.props.highlight}
         />
       );
     }
@@ -446,6 +449,7 @@ class DataDescriptionPreview extends Component<{
   editable: boolean;
   commit: (opts: DescriptionCommitOptions) => void;
   onEdit?: () => void;
+  highlight?: string;
 }> {
   onClick = () => {
     const {onEdit} = this.props;
@@ -463,6 +467,7 @@ class DataDescriptionPreview extends Component<{
         value={value}
         editable={this.props.editable}
         commit={this.props.commit}
+        highlight={this.props.highlight}
       />
     );
 
@@ -543,6 +548,7 @@ class DataDescriptionContainer extends Component<{
   value: any;
   editable: boolean;
   commit: (opts: DescriptionCommitOptions) => void;
+  highlight?: string;
 }> {
   onChangeCheckbox = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.props.commit({
@@ -609,7 +615,9 @@ class DataDescriptionContainer extends Component<{
         if (val.startsWith('http://') || val.startsWith('https://')) {
           return (
             <>
-              <Link href={val}>{val}</Link>
+              <Link href={val}>
+                <Highlight text={val} highlight={this.props.highlight} />
+              </Link>
               <Glyph
                 name="pencil"
                 variant="outline"
@@ -620,11 +628,22 @@ class DataDescriptionContainer extends Component<{
             </>
           );
         } else {
-          return <StringValue>"{String(val || '')}"</StringValue>;
+          return (
+            <StringValue>
+              <Highlight
+                text={`"${val || ''}"`}
+                highlight={this.props.highlight}
+              />
+            </StringValue>
+          );
         }
 
       case 'enum':
-        return <StringValue>{String(val)}</StringValue>;
+        return (
+          <StringValue>
+            <Highlight text={val} highlight={this.props.highlight} />
+          </StringValue>
+        );
 
       case 'boolean':
         return editable ? (