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/Highlight.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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 styled from '@emotion/styled';
+import {colors} from '../colors';
+import React from 'react';
+
+const Highlighted = styled.span({
+  backgroundColor: colors.lemon,
+});
+
+export const Highlight: React.FC<{text: string; highlight?: string}> = ({
+  text,
+  highlight,
+}) => {
+  if (!highlight) {
+    return <span>{text}</span>;
+  }
+  const index = text.toLowerCase().indexOf(highlight.toLowerCase());
+  if (index === -1) {
+    return <span>{text}</span>;
+  }
+  return (
+    <span>
+      {text.substr(0, index)}
+      <Highlighted>{text.substr(index, highlight.length)}</Highlighted>
+      {text.substr(index + highlight.length)}
+    </span>
+  );
+};