Add search to schema view (#2650)

airbytehq · Apr 8, 2021 · e72b0e4 · e72b0e4
1 parent fafc25d
commit e72b0e4
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 20 deletions.
diff --git a/airbyte-webapp/src/components/TreeView/TreeView.tsx b/airbyte-webapp/src/components/TreeView/TreeView.tsx
@@ -4,6 +4,7 @@ import { TreeViewSection } from "./components/TreeViewSection";
 import { SyncSchema, AirbyteStreamConfiguration } from "core/domain/catalog";
 
 type IProps = {
+  filter?: string;
   schema: SyncSchema;
   onChangeSchema: (schema: SyncSchema) => void;
 };
@@ -15,7 +16,17 @@ function compareByName<T extends { name: string }>(o1: T, o2: T): -1 | 0 | 1 {
   return o1.name > o2.name ? 1 : -1;
 }
 
-const TreeView: React.FC<IProps> = ({ schema, onChangeSchema }) => {
+const TreeView: React.FC<IProps> = ({ schema, onChangeSchema, filter }) => {
+  const filteringSchema = useMemo(() => {
+    return filter
+      ? {
+          streams: schema.streams.filter((stream) =>
+            stream.stream.name.toLowerCase().includes(filter.toLowerCase())
+          ),
+        }
+      : schema;
+  }, [filter, schema]);
+
   const onUpdateItem = useCallback(
     (streamId: string, newStream: Partial<AirbyteStreamConfiguration>) => {
       const newSchema = schema.streams.map((streamNode) => {
@@ -35,11 +46,11 @@ const TreeView: React.FC<IProps> = ({ schema, onChangeSchema }) => {
   // TODO: there is no need to sort schema everytime. We need to do it only once as streams[].stream is const
   const sortedSchema = useMemo(
     () => ({
-      streams: schema.streams.sort((o1, o2) =>
+      streams: filteringSchema.streams.sort((o1, o2) =>
         compareByName(o1.stream, o2.stream)
       ),
     }),
-    [schema.streams]
+    [filteringSchema.streams]
   );
 
   return (

diff --git a/airbyte-webapp/src/views/Connector/FrequencyForm/components/SchemaView.tsx b/airbyte-webapp/src/views/Connector/FrequencyForm/components/SchemaView.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
@@ -38,32 +38,41 @@ const SchemaView: React.FC<IProps> = ({
   onChangeSchema,
   additionalControl,
 }) => {
+  const [searchString, setSearchString] = useState("");
   const hasSelectedItem = useMemo(
-    () => schema.streams.some((streamNode) => streamNode.config.selected),
-    [schema.streams]
+    () =>
+      schema.streams.some(
+        (streamNode) =>
+          streamNode.config.selected &&
+          streamNode.stream.name
+            .toLowerCase()
+            .includes(searchString.toLowerCase())
+      ),
+    [schema.streams, searchString]
   );
 
   const onCheckAll = useCallback(() => {
     const allSelectedValues = !hasSelectedItem;
 
     const newSchema = schema.streams.map((streamNode) => {
-      return {
-        ...streamNode,
-        config: { ...streamNode.config, selected: allSelectedValues },
-      };
-    });
+      if (
+        streamNode.stream.name
+          .toLowerCase()
+          .includes(searchString.toLowerCase())
+      ) {
+        return {
+          ...streamNode,
+          config: { ...streamNode.config, selected: allSelectedValues },
+        };
+      }
 
+      return streamNode;
+    });
     onChangeSchema({ streams: newSchema });
-  }, [hasSelectedItem, onChangeSchema, schema.streams]);
+  }, [hasSelectedItem, onChangeSchema, schema.streams, searchString]);
 
   const onSearch = useCallback((value: string) => {
-    // TODO: add search func
-    console.log(value);
-    // setCurrentSchema({
-    //   streams: schema.streams.filter((stream) =>
-    //     stream.stream.name.toLowerCase().includes(value.toLowerCase())
-    //   ),
-    // });
+    setSearchString(value);
   }, []);
 
   return (
@@ -99,7 +108,11 @@ const SchemaView: React.FC<IProps> = ({
         </LightCell>
       </SchemaHeader>
       <TreeViewContainer>
-        <TreeView schema={schema} onChangeSchema={onChangeSchema} />
+        <TreeView
+          schema={schema}
+          onChangeSchema={onChangeSchema}
+          filter={searchString}
+        />
       </TreeViewContainer>
     </>
   );