Skip to content

Commit

Permalink
Add search to schema view (#2650)
Browse files Browse the repository at this point in the history
  • Loading branch information
jamakase committed Apr 8, 2021
1 parent fafc25d commit e72b0e4
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 20 deletions.
17 changes: 14 additions & 3 deletions airbyte-webapp/src/components/TreeView/TreeView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand All @@ -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) => {
Expand All @@ -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 (
Expand Down
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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>
</>
);
Expand Down

0 comments on commit e72b0e4

Please sign in to comment.