diff --git a/datahub-web-react/src/app/lineage/manage/AddEntityEdge.tsx b/datahub-web-react/src/app/lineage/manage/AddEntityEdge.tsx index b6a575e960501a..4acd1f5879306f 100644 --- a/datahub-web-react/src/app/lineage/manage/AddEntityEdge.tsx +++ b/datahub-web-react/src/app/lineage/manage/AddEntityEdge.tsx @@ -1,5 +1,5 @@ -import { SubnodeOutlined } from '@ant-design/icons'; -import { Select } from 'antd'; +import { LoadingOutlined, SubnodeOutlined } from '@ant-design/icons'; +import { AutoComplete, Empty } from 'antd'; import React, { useState } from 'react'; import styled from 'styled-components/macro'; import { useEntityRegistry } from '../../useEntityRegistry'; @@ -9,6 +9,7 @@ import { Direction } from '../types'; import { getValidEntityTypes } from '../utils/manageLineageUtils'; import LineageEntityView from './LineageEntityView'; import EntityRegistry from '../../entity/EntityRegistry'; +import { ANTD_GRAY } from '../../entity/shared/constants'; const AddEdgeWrapper = styled.div` padding: 15px 20px; @@ -28,11 +29,23 @@ const AddIcon = styled(SubnodeOutlined)` font-size: 16px; `; -const StyledSelect = styled(Select)` +const StyledAutoComplete = styled(AutoComplete)` margin-left: 10px; flex: 1; `; +const LoadingWrapper = styled.div` + padding: 8px; + display: flex; + justify-content: center; + + svg { + height: 15px; + width: 15px; + color: ${ANTD_GRAY[8]}; + } +`; + function getPlaceholderText(validEntityTypes: EntityType[], entityRegistry: EntityRegistry) { let placeholderText = 'Search for '; if (!validEntityTypes.length) { @@ -69,23 +82,25 @@ export default function AddEntityEdge({ entityType, }: Props) { const entityRegistry = useEntityRegistry(); - const [queryText, setQueryText] = useState(undefined); - const [search, { data: searchData }] = useGetSearchResultsForMultipleLazyQuery(); + const [search, { data: searchData, loading }] = useGetSearchResultsForMultipleLazyQuery(); + const [queryText, setQueryText] = useState(''); const validEntityTypes = getValidEntityTypes(lineageDirection, entityType); function handleSearch(text: string) { setQueryText(text); - search({ - variables: { - input: { - types: validEntityTypes, - query: text, - start: 0, - count: 25, + if (text !== '') { + search({ + variables: { + input: { + types: validEntityTypes, + query: text, + start: 0, + count: 15, + }, }, - }, - }); + }); + } } function selectEntity(urn: string) { @@ -99,9 +114,9 @@ export default function AddEntityEdge({ const renderSearchResult = (entity: Entity) => { return ( - + - + ); }; @@ -117,15 +132,25 @@ export default function AddEntityEdge({ Add {lineageDirection} - selectEntity(urn)} + filterOption={false} + notFoundContent={(queryText.length > 3 && ) || undefined} > + {!searchData && loading && ( + + + + + + )} {searchResults} - + ); }